/
common.css
194 lines (159 loc) · 6.27 KB
/
common.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
/* --------------------------------------------------------------------------
This file can be included at the beginning of any compiled CSS file,
it won't add to its size until you start using its contents.
Consider it as a library of sorts. It's the ideal place to put virtual
selectors and useful variables, so this is what we'll be doing.
NOTE: avoid including url() files here, prefer raw-url() instead!
-------------------------------------------------------------------------- */
// A common inline-block hack (for old IE compatibility.)
@mixin .inline-block($vertical_align = middle)
display: inline-block
@if $vertical_align
vertical-align: $vertical_align
@endif
// IE6/7 need layout to enable inline-block on a block element... And a default right margin, from my experience.
@if ie[-7]
margin-right: 6px
zoom: 1
// ...And they also need inline-block to be reset to inline separately... How annoying.
// (The & trick forces the selector to be closed and reopened.)
&
display: inline
@endif
// A descriptive style
.plainbox virtual
padding: .5em 1em
font-size: .9em
line-height: 1.4em
border: 1px solid #bbb
background-color: #f0f5f0
margin: .2em 1px 1em
border-radius: 4px
// A common header (e.g. alert box)
.wehead virtual
background-color: @ifnull($wehead_bg, #edf2e2)
a
color: #444
// A common footer (e.g. alert box)
.wefoot virtual extends .wehead
background-color: @ifnull($wefoot_bg, #f0f0f2)
// A common clearfix hack for float parents, in case setting overflow: hidden on the parent isn't enough for you.
.clearfix
:after
content: ""
display: table
clear: both
@if ie[-7]
zoom: 1
@endif
.vertical-arrow virtual
:after
opacity: .4
font: .66em/1 Arial
vertical-align: .12em
content: "\a0\a0\25bc"
&:hover:after
opacity: 1
transition: opacity .5s
.horizontal-arrow virtual
:after
opacity: .4
font: .66em/1 Arial
vertical-align: .12em
content: "\a0\a0\25ba"
&:hover:after
opacity: 1
transition: opacity .5s
// Mix this with your buttons if you provide an icon for them.
.button-padding virtual
padding-left: @is (firefox, 21px, 23px)
.loading virtual
mixin: .inline-block
// All the cool kids get a CSS spinner.
@if $can_animate
width, height: 11px
border-radius: 100%
border: 1px solid rgba(0,0,0,0.5)
border-top-color: transparent
box-shadow: 1px 1px 7px #777
animation: spin 1s infinite linear
@else
width, height: 14px
background-image: url($images/wheel.gif)
background-repeat: no-repeat
@endif
// Mix this into any selector to enable hardware acceleration on it. Hopefully.
.hardware virtual
transform: translate3d(0, 0, 0)
backface-visibility: hidden
/* Common and helper variables.
------------------------------------------------------- */
/*
- They can be put anywhere, they'll be considered as globals.
- They can contain other variables in their definition.
- They can easily be rewritten later in any CSS file. For 100% accuracy,
do it in a 'common.global.css' or 'common.local.css' file.
- Enjoy.
*/
/* A generic font stack for display purposes (titles, large text...) */
$generic_stack = "Franklin Gothic Medium", "Franklin Gothic", "Segoe UI", Helvetica, Arial, sans-serif
@if ios // iOS favors Helvetica Light.
$generic_stack = HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif
@endif
$main_font = Arial, sans-serif
$main_font_size = 88%/130%
$menu_font = $main_font
$big_font = $generic_stack
$head_font = $generic_stack
$head_font_style = ""
$head_font_size = 1.7em/1
$subject_font = $generic_stack
$mono_font = Consolas, "Dejavu Sans Mono", Menlo, "Lucida Console", "Courier New", monospace
$serif_font = Georgia, serif
$post_font_size = 100%/133%
$post_font = $main_font
$blog_font_size = 100%/140%
$blog_font = $post_font
$main_bg = #fff
$head_bg = #f6f6f0 // Used to be luma(#e3e0da, -3%)
$reddish = #c60
$menu_border = rgba(220, 224, 220, .95)
$menu_gradient = @is (ie[-8], "average", "linear-gradient")(rgba(232, 236, 232, .96), rgba(255, 255, 255, .96))
$sidebar-width = @is (webkit, "282px", "280px") // Webkit screws up on padding/border in table mode
$max-width = @is (ie6, "width", "max-width")
/* .windowbg classes are used to alternate colors between general blocks.
Suggestions for $window_bg: luma($window_bg2, -3%) // luma(#e3e0d0, +13%) // #f2f3ea // #f9f6f0
Suggestions for $window_bg2: #f8faf8 // luma(#e3e0d0, +11%) // luma(hue($main_bg, -20), -.5%) // #f3f7f3 // transparent */
$window_bg = #fefefe
$window_bg2 = #fff
$window_bg3 = #f0f0f0
$board_col = #d97b33
$separator_col = #bdb5b5
/* The .msg class should, by default, alternate between these two colors. */
$post_bg = $window_bg // #f2f3ee
$post_bg2 = $window_bg2 // #f3f7f3
/* float: $left will return float: right on RTL setups. */
$left = @is (rtl, right, left)
$right = @is (rtl, left, right)
/* Should we have border-radius around page corners..? Set to 0 to disable. */
$radius = 8px
$sub_radius = 0
/* Something one can remove to make more space in responsive mode... */
$horizontal_content_padding = 30px
/* helper var for vmin. Keep using non-vmin fallbacks, though! */
$vmin = @is (ie9, vm, vmin)
/* Maximum window width for the browser to trigger the low-res responsive CSS mode. */
$responsive_max_width = 1150px
$responsive = "all and (max-width: $responsive_max_width)"
/* URL for the status icon in board lists */
$board_icon = $images/boardicon.png
/* List of browsers that support the STANDARD flexbox model, i.e. display: flex.
IE10 supports an older model, but Wess automatically rewrites your CSS for it.
For reference, browsers supporting the OLD, useless model were: (firefox[2-], chrome[4-], safari[3.1-] && !ios, ios[3.2-]) */
$can_flex = @is ("firefox[22-], opera[12.1-], chrome[27-], ie[10-], safari[7-]")
/* List browsers that support CSS3 animations (Wedge adds prefixes automatically.) */
$can_animate = @is ("chrome, firefox[5-], opera[12-], ie[10-], safari[4-], ios[3.2-], android[2.1-]")
/* List browsers that support CSS filters (not the old IE ones!). Note that Firefox[3.5-] supports filter: url() with SVG filters. */
$can_filter = @is ("chrome[18-], safari[6-]")
/* List browsers that support position: sticky. iOS needs a prefix, others do not. Support data is as of September 2014. */
$can_sticky = @is ("ios[6.1-] || (firefox[32-] && !mobile)")