cncjs

1
.widget {
2
    // default
3
    .widget-header,
4
    .widget-footer {
5
        border-color: #ccc;
6
        background-color: #fafafa;
7
        color: #222;
8
    }
9
    .widget-sortable,
10
    .widget-controls {
11
        background-color: inherit;
12
        a {
13
            color: #838383;
14
        }
15
        a:hover {
16
            color: #505050;
17
        }
18
    }
19

20
    // facebook
21
    &.widget-color-facebook {
22
        .widget-header,
23
        .widget-footer {
24
            border-color: #435a8b #3c5488 #334c83;
25
            background-color: #3a5795;
26
            color: #fff;
27
        }
28
        .widget-controls {
29
            a {
30
                color: #f0f0f0;
31
            }
32
            a:hover {
33
                color: #fff;
34
            }
35
        }
36
    }
37

38
    // lightblue
39
    &.widget-color-lightblue {
40
        .widget-header,
41
        .widget-footer {
42
            border-color: #a0aeb3;
43
            background: #cbd2d5;
44
            color: #000;
45
        }
46
        .widget-controls {
47
            a {
48
                color: #f0f0f0;
49
            }
50
            a:hover {
51
                color: #fff;
52
            }
53
        }
54
    }
55

56
    // night
57
    &.widget-color-night {
58
        .widget-header,
59
        .widget-footer {
60
            border-color: #383838;
61
            background: #404040;
62
            color: #fff;
63
        }
64
        .widget-controls {
65
            a {
66
                color: #f0f0f0;
67
            }
68
            a:hover {
69
                color: #fff;
70
            }
71
        }
72
    }
73

74
    // nightsky
75
    &.widget-color-nightsky {
76
        .widget-header,
77
        .widget-footer {
78
            border-color: #45474b;
79
            background-color: #4c4f53;
80
            color: #fff;
81
        }
82
        .widget-controls {
83
            a {
84
                color: #f0f0f0;
85
            }
86
            a:hover {
87
                color: #fff;
88
            }
89
        }
90
    }
91

92
    // teal
93
    &.widget-color-teal {
94
        .widget-header,
95
        .widget-footer {
96
            border-color: #508180;
97
            background: #568a89;
98
            color: #fff;
99
        }
100
        .widget-controls {
101
            a {
102
                color: #f0f0f0;
103
            }
104
            a:hover {
105
                color: #fff;
106
            }
107
        }
108
    }
109
}
110