/
index.css
2099 lines (1808 loc) · 42.1 KB
/
index.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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
/*!
* Weaving (Default) skin for Wedge
* © 2010 René-Gilles Deberdt, http://wedge.org
*/
/**
* This is the base CSS file for the default theme.
*
* Here's a list of files that can be restyled by adding a new subfolder to the CSS folder:
* - index.css, sections.css, mana.css, editor.css
* - custom.css doesn't exist, you can create it then rewrite styles without modifying the original files.
* - extra.css isn't always there, it's intended as an easy way to add CSS at the very end of the file.
*
* There are also user-specific stylesheets. If you need to add a browser hack, just create a new file in
* your folder, using this file name format: filename.suffix.css. For instance, if you want to add some custom
* CSS to index.css for IE6, name it index.ie6.css. The following suffixes are available to you:
*
* - guest, member, admin, rtl, m#, b#, c#
* - will target guests, members, administrators, RTL languages, member #, board # or category #.
*
* - opera, firefox, chrome, safari, ie, gecko, webkit (also with version number/range: ie[6-7], firefox[-3.5])
* - windows, ios, android (also with version number/range: ios[5.1-], windows6.1)
* - will target that browser, browser family or OS.
*
* - local, global, replace
* - any file with the 'local' keyword won't be reused by sub-skins. Use 'global' (or no keyword) to allow re-use.
* Finally, 'replace' will do the opposite and, just like replace-type skins do, it will forget any parent files
* with the same keywords (e.g. index.replace,ie6.css will replace the parent's index.ie6.css file if it exists.)
*
* Files "install.css" and "report.css" are theme-agnostic, and thus are not skinnable per se.
*
* Go crazy with CSS comments like this; they're automatically deleted when the cache is generated.
* CSS cached files are put inside the /css/ folder, so any relative URLs will fail unless they use it
* as their root, or use the available path variables.
*
* $language - current user's language - see Wine/Warm/skin.xml for details
* $images - assets (image) folder URL
* $here - current skin's root folder URL
* $root - forum's root URL
*
* e.g. If you have a file called sprite.png in your custom "skins/Hello/World"
* skin folder, link to url($here/sprite.png) rather than url(sprite.png).
*/
/* The main styling that everything else should inherit.
Font size should be the same in all browsers if using
a percentage. Also reset HTML5 elements we use.
------------------------------------------------------- */
html
min-height: 100%
// IE (tested v11) is forcing a horizontal scrollbar otherwise.
@if ie
overflow-x: hidden
@endif
overflow-y: scroll
background: #369 // For old browsers...
background: fixed linear-gradient(45deg, #505b66, #a0a6ab 500px, #505b66 1000px, #505b66) // Fallback background for browsers that support linear gradients...
background: radial-gradient(circle at 50% 40%, #eee, #012) // And this is the one we want. Phew...
body
color: #ccc
font: $main_font_size $main_font
margin: 0
@if !mobile
padding: 12px
@endif
@if !ie10 && !chrome
transition: all .3s ease
@endif
// html5shiv does the job automatically for IE < 9.
@if !(opera[11.1-], safari[5-], chrome[6-], firefox[4-], android[2.2-])
header, footer, aside, section, article, nav
display: block
@endif
/* Let's be crazy... Universal selector! This should
prevent words from breaking the layout. Obviously,
reset to 'normal' on specific selectors as needed.
------------------------------------------------------- */
*
@if !ie6
word-wrap: break-word
@endif
/* Mobile Chrome 25+ adds a 'font boosting' feature that's
supposed to make text more readable; as of May 2013, it sucks.
This resets all elements to have the same size -- a bit smaller,
but at least we now have full control over said size.
--------------------------------------------------------------- */
@if chrome[25-] && mobile
max-height: 999999em
@endif
/* Common styles used for inheritance. You can declare
them anywhere you like, but having them near the
start of the file should avoid cascading issues.
------------------------------------------------------- */
// Alternating generic backgrounds
.windowbg
color: #444
background-color: $window_bg
.windowbg2 extends .windowbg
background-color: $window_bg2
.windowbg3 extends .windowbg
background-color: $window_bg3
.two-columns mixes .inline-block
box-sizing: border-box
vertical-align: top
width: 48.8%
margin: 0 .4%
.splitter
columns: 2
column-gap: 2em
column-rule: 1px solid #eee
> section
@if firefox // Stupid hack... :(
display: table
width: 100%
@else
break-inside: avoid
@endif
// Two columns become one if viewed on a small screen.
@media all and (max-width: 800px)
.two-columns
width: 100%
margin: 0
.splitter
columns: 1
// By default set the color on these tags to #000.
h1, h2, h3, h4, h5, h6
color: #000
font-size: 1em
margin, padding: 0
/* Main layout declarations (body, sidebar...)
------------------------------------------------------- */
#wedge
max-width: 1240px
border-radius: $radius
margin: auto
color: #444
&.sliding
overflow: hidden
@if $radius
#header
border-radius: $radius $radius 0 0
@endif
#content, #linktree
background: $main_bg
#header, #navi, #footer
@if $head_bg
background-color: luma($head_bg, +3%)
gradient: luma($head_bg, +6%), $head_bg
@else
background: $main_bg
@endif
color: #553
#navi
background-color: $head_bg
background-image: none
#edge
width: 100%
display: table
table-layout: fixed
#sideshow mixes .hide
cursor: pointer
float: right
position: relative
padding: 30px 0 0 36px
:before
content: ""
position: absolute
top: 50%
left: 12px
width: 16px
height: 2px
margin-top: -1px
background: #aaa
box-shadow: 0 5px 0 0 #aaa, 0 -5px 0 0 #aaa
transition: all .3s ease
:hover:before
background: #000
box-shadow: 0 5px 0 0 #000, 0 -5px 0 0 #000
transition: all .8s ease
#sidebar
display: table-cell
vertical-align: top
width: $sidebar-width
.column
padding: 20px $horizontal_content_padding 0 0
section
margin: 0 0 15px
#userbox extends .clearfix
margin: 1em 0
@if member
img.avatar
float: right
margin: 0 .2em 0 .8em
padding: 0
$max-width: 70px
height: auto
@endif
p
margin: 0 0 2px
p.now
margin: 0
ul
margin: 0 0 4px 2px
padding: 0 0 0 20px
img.opaque
box-shadow: #766 1px 1px 3px
border-radius: 6px
ul#noava
margin: 0
#main extends .clearfix
display: table-cell
vertical-align: top
min-height: 200px
padding: 4px $horizontal_content_padding 12px
// Top header
#top_section
padding: 8px 30px
@if local
border-radius: 8px
border-bottom: 1px solid $separator_col
background: $main_bg
@endif
@if $context['languages']
#flags mixes .inline-block // Language flags
margin: 0 1em 0 0
@endif
@if $settings['enable_news']
#sitenews
padding: 7px
margin-bottom: 7px
border-bottom: 1px dotted #999
span extends .horizontal-arrow
color: #888
font-weight: 700
+ #linktree:not(:empty)
margin-top: -7px
@endif
// Banner header
#banner
width: 100%
clear: both
overflow: hidden
min-height: 70px
> div
width: 100%
box-sizing: border-box
padding: 25px 25px 10px
display: flex
flex-flow: row wrap
align-items: baseline
// Main title
h1
letter-spacing: -1px
font: 100 2.5em/1em $big_font
padding-right: .3em
a
color: #444
word-wrap: normal
#slogan
color: #888
font: 100 1.4em/1.1em $big_font
letter-spacing: -1px
// The search box, with a few hacks to allow for a drop-down menu...
#search_form
float: right
max-width: 50%
.search
border: 1px solid #bbb
position: relative
z-index: 1
float: right
max-width: 100%
width: 80px
transition: all .2s
&.open
min-width: 200px
width: 100%
transition: all .2s
// The navigation list (i.e. linktree)
#linktree
clear: both
color: #999
padding: 0 0 1em
:empty final
padding: 0
a
color: #963
ul
padding: 7px
margin: 0
list-style: none
overflow: hidden
border: 1px dotted #999
border-width: 0 0 1px 0
li extends .horizontal-arrow
display: inline
line-height: 20px
padding: .5em .5em .5em 0
&.last:after mixes .hide
#linktree_bt extends #linktree
padding: 1em 0 0
ul
border-width: 1px 0 0 0
// The footer with copyright links etc.
#footer
margin: auto
border-top: 1px solid $separator_col
@if $radius
border-radius: 0 0 $radius $radius
@endif
> div
padding: 10px 20px
ul extends .clearfix, li
margin, padding: 0
list-style: none
li
margin-left: 4px
line-height: 160%
:first-child:before
content: ""
float: left
background: url($images/wefoot.png) 0 0 no-repeat
border-radius: 4px
padding: 40px 54px 0 0
margin: 3px 10px 0 0
.links
display: block
a
color: #679
border-bottom: 1px dashed #679
text-decoration: none
// Behold, the power of Wess!
$view_junk = $settings['db_show_debug_who_log']
@if $view_junk == "any" || (admin && $view_junk == "admin") || (member && ($view_junk == "regular" || $view_junk == "mod"))
#junk
font-size: 90%
margin, padding: 8px 0 0
border-top: 1px solid #aaa
a
border-bottom: 0
@endif
/* Styles for the general looks for the default theme.
------------------------------------------------------- */
// Normal, standard links.
a
color: #47a // #de874d, b96f17, c06002
text-decoration: none
cursor: pointer
:hover
color: #a54
text-decoration: underline
// Inside a post, if you publish a link, you want it to stand out...
.post a
text-decoration: underline
// Links that open in a new window.
a.new_win
:link, :visited
color: #679
// Tables should show empty cells.
table
empty-cells: show
// Wraps the entire forum when a forum width is set.
#wrapper
margin: auto
// Standard horizontal rule.. ([hr], etc.)
hr
color, background-color: #ccc
border: 0
height: 1px
// Fieldsets are used to group elements.
fieldset
border: 1px solid #c4c4c4
padding: 1em
margin: .5em 0
border-radius: 10px
legend
font-weight: 700
color: #866
&.wrc final
border: 0
legend
background: $main_bg
border-radius: 6px
padding: 2px 6px
// No image should have a border when linked.
a img
border: 0
// Define strong as bold, and em as italics
strong
font-weight: 700
em
font-style: italic
.ping
box-shadow: none !important
/* More common styles used for inheritance.
------------------------------------------------------- */
// "With rounded corners" class, for modern browsers...
.wrc, .wrc_top, .wrc_bottom
margin-top: 2px
margin-bottom: 4px
border-radius: 6px
box-sizing: border-box
padding: .9em 1.2em
p
margin: 0 0 .5em
:only-child
margin-top: .5em
.wrc_top // !! Set border-bottom to 0 if you add a border to .wrc
border-radius: 12px 12px 0 0
margin-bottom: 0
.wrc_bottom // !! Set border-top to 0 if you add a border to .wrc
border-radius: 0 0 12px 12px
margin-top: 0
// Fold/unfold icon
.upshrinks mixes .inline-block
background: url($images/upshrinks.png) no-repeat
text-decoration: none
// The 'New' icon, generally speaking.
.note mixes .inline-block(.1em)
border-radius: 7px
@if ie[-9], ios[-5.1]
background-color: #eb8c66
@else
gradient: #fa6, #d76
@endif
color: #fff !important
font: 700 7.5pt/115% Tahoma, Arial, sans-serif
text-transform: uppercase
margin: 0 3px
padding: 2px 5px
:hover
text-decoration: none
// In topic pages, needs more space.
h5 &
margin-left: 8px
// Same, but scarier.
.notewarn extends .note
@if ie[-9], ios[-5.1]
background-color: #d55a61
@else
gradient: luma(#d55a61, +10%), luma(#b63c47, +10%)
@endif
// Same, but positive.
.notenice extends .note
@if ie[-9], ios[-5.1]
background-color: rgb(100, 175, 100)
@else
gradient: rgb(100, 175, 100), rgb(100, 190, 100)
@endif
// Same, but neutral. Doesn't get in the way.
.notevoid extends .note
@if ie[-9], ios[-5.1]
background-color: rgb(175, 175, 175)
@else
gradient: rgb(150, 150, 150), rgb(175, 175, 175)
@endif
// The sort direction indicator. A small but potentially important detail.
.sort_up mixes .inline-block
background: url($images/sort.gif) 0 0 no-repeat
width, height: 12px
vertical-align: baseline
.sort_down extends .sort_up
background-position: 0 -12px
// Shortens text and adds ... to the end
.shorten
text-overflow: ellipsis
overflow: hidden
height: 1.2em
white-space: nowrap
/* Custom Select box styles
--------------------------------------------------------- */
select mixes .hide
select[size]
display: inline
// Move the original <select> outside the viewport,
// thus keeping its tabindex and events working.
select.sb
display: inline
position: absolute
clip: rect(1px, 1px, 1px, 1px)
width, height: 1px
.sbox mixes .inline-block
font-weight: 400
text-align: left
margin: 1px
.text mixes .inline-block("baseline")
width: 100%
small
color: #888
float: right
margin-left: 5px
.details
font-style: italic
font-size: 90%
padding: 3px
clear: left
color: #999
/* Display area (always visible) */
.display
background: rgba(255,255,255,.5)
border: 1px solid #bbb
color: #000
cursor: default
font-weight: 400
max-height: 1.9em
line-height: 1.5em
overflow: hidden
position: relative
text-decoration, outline: none
padding: 2px 22px 2px 2px
border-radius: 6px
.text
white-space: nowrap
overflow: visible !important
padding: 0 3px
.btn
position: absolute
border: 1px solid #707070
border-radius: 4px
width: 14px
text-align: center
right, top, bottom: 2px
color: rgba(0,0,0,.5)
font-size: 7px
// Replacement gradients for select box buttons.
@if ie[-8]
background: #f2f2f2
@elseif ie
background: #dbdbdb
box-shadow: inset -6px 12px 6px -6px #fff
@else
background: linear-gradient(#f2f2f2, #ebebeb 50%, #dbdbdb 50%, #cfcfcf)
@endif
&.disabled .display
color: #999
&.focused .display
background: #fff
.text
border-radius: 4px 0 0 4px
border-color: #7b7d83
background-color: #39f
color: #fcfcfc
small
color: #ddd
.btn
box-shadow: inset 0 0 1px 1px #9eb0ba
&.focused .display .btn, .hover .btn
@if ie
background: @is (ie[-8], #dcefff, #bce5fc)
@else
background: linear-gradient(#eaf6fd, #d9f0fc 50%, #bce5fc 50%, #a7d9f5)
@endif
/* Dropdown styles */
.items
background: #fff
border: 1px solid #cbcdd3
border-radius: 6px
display: inline
padding: 2px
margin: 0
list-style: none
overflow: hidden
position: absolute
z-index: 999
box-shadow: 0 2px 5px rgba(0,0,0, .3)
&.has_bar
padding-right: 15px
&.above
box-shadow: 0 -2px 5px rgba(0,0,0, .3)
.item
color: #000
cursor: default
display: block
padding: @is (mobile, 12px 8px, 4px 6px)
text-decoration: none
.pitem:hover
background-color: #eee
.selected .item
background-color: #eee
.disabled .item
color: #999
.hr
border-top: 1px solid #ccc
padding, height: 0
margin: 2px
// <optgroup> styles
.optgroup .label
gradient: #fff, #e5eeee
color: #666
cursor: default
font-weight: 700
padding: 7px
.sub .item
padding-left: 15px
/* Rounded corners */
.first .item
border-radius: 6px 6px 0 0
.last .item
border-radius: 0 0 6px 6px
/* Scrollbar viewport */
.overview, .viewport
position: relative
/* The scrollbar itself */
.scrollbar
position: absolute
top: 2px
right: 1px
width: 11px
background: #f5f8f5
/* Scrollbar thumb */
div
position: absolute
overflow: hidden
background: #e0e3e0
background: linear-gradient(90deg, #ddd, #e0e6e0, #ccc)
border-radius: 6px
cursor: pointer
height: 18px
width: 13px
left: -1px
:hover
background: #e8ece8
background: linear-gradient(90deg, #ddd, #e8ece8, #ccc)
/* Multiple selections get a checkbox. */
input[type=checkbox]
margin: 0 8px 0 0
vertical-align: -2px
#sidebar .sbox
max-width: 200px
#jump_to
margin: .5em 0
height: 25px
visibility: hidden
.cat .sbox
font-size: 14px
text-shadow: none
tr.catbg .sbox, tr.titlebg .sbox
font-size: 11px
.qaction
font-size: .85em
/* Top-level menu icons.
------------------------------------------------------- */
// It may look complicated, but it isn't. Just fetch documentation on
// image spriting. You can also simply use single images to show icons.
#m_home mixes .inline-block("")
width, height: 16px
padding: 0
margin: 0 4px 0 2px
background-repeat: no-repeat
background-image: url($images/icons/sprite.png)
background-position: -74px 0
#m_board extends #m_home
background-position: -74px 0
#m_admin extends #m_home
background-position: -36px 0
#m_profile extends #m_home
background-position: 0 0
#m_home_media extends #m_home
background-position: -54px center
vertical-align: middle
margin: 0 8px 0 0
width: 17px
#m_home_mlist extends #m_home
background-position: -19px center
vertical-align: middle
margin: 0 8px 0 3px
width: 14px
@if guest
#m_login extends #m_home
background-position: -112px 0
width: 15px
#m_register extends #m_home
background-position: -130px 0
@endif
@if member
#m_profile_logout extends #m_home
background-position: -94px 0
vertical-align: middle
width: 15px
margin: -4px 6px 0 0
@endif
/* Styles for buttons and other form elements
------------------------------------------------------- */
// Let's give all forms zero padding/margins
form
margin, padding: 0
input, select, textarea
font: 95%/1.15 $main_font
color: #000
background: $main_bg
box-sizing: border-box
border-radius: 5px
border: 1px solid #bbb
padding: 4px 5px
:hover
border: 1px solid #78a
textarea
line-height: 1.3
border-radius: 0
// No need to style input[type=reset], not using it.
input[type=submit], input[type=button]
background: #eee
transition: all .3s ease
box-shadow: inset 1px 1px #fff, inset 25px 0 25px rgba(0,0,0, .1), 0 1px 2px rgba(0,0,0, .1)
outline: none
cursor: pointer
font-size: 13.5px
line-height: 1.2
border-width: 1px
border-radius: 6px
margin: 0
@if firefox
padding: 2px 5px
@elseif ie9
padding: 4px 4px 2px
@else
padding: 3px 5px 4px
@endif
color: #555
// Old IEs have a padding bug...
@if ie6, ie7
overflow: visible
@endif
:hover, :focus
transition: all .3s ease
box-shadow: inset 1px 1px #fff, inset 25px 0 25px rgba(0,0,0, .04), 0 1px 2px rgba(0,0,0, .2)
input.submit mixes .button-padding
background: url($images/buttons/submit.png) 5px center no-repeat
background-color: #e2f3ea
input.save mixes .button-padding
background: url($images/buttons/save.png) 5px center no-repeat
background-color: #dff3e8
input.delete mixes .button-padding
background: url($images/buttons/delete.png) 5px center no-repeat
background-color: #f5efe9
input.new mixes .button-padding
background: url($images/buttons/new.png) 5px center no-repeat
background-color: #e0eaf6
input.cancel
background-color: #fff0e3
padding-left: 5px
input.search extends #m_home
background-color: rgba(255,255,235,.32)
background-position: -147px 3px
padding: 4px 5px 4px 25px
height: 25px
width: auto
float: none
margin: 0 2px
// All input elements that are checkboxes or radio buttons shouldn't have a border around them.
input[type=checkbox], input[type=radio]
mixin: checkbox-styling
.cat input[type=checkbox]
margin: 5px -3px 0 7px
// Give disabled text input elements a different background color.
input[type=text][disabled]
background-color: #eee
input[type=file]
width: 300px
@if webkit
// Thank you Apple, we like your iPod but we don't want iTunes search boxes in our browsers.
input[type=search]
-webkit-appearance: textfield
@endif
/* The dropdown menus, Nao style.
May not show, but it took years to refine it.
------------------------------------------------------- */
#navi
color: #999
border-bottom: 1px solid $separator_col
padding: 0 15px
.menu, .mimenu
user-select: none
@if webkit && (ios, android)
-prefix-tap-highlight-color: rgba(0, 0, 0, 0)
@endif
.menu
font-family: $menu_font
min-height: 2em
margin: 0 0 @is (ie7, 0, -5px) // fixes h4's margin, see below...
padding: 5px 0 0
li a
color: #444
text-decoration: none
li li a
display: block
padding: 6px 8px
h4 mixes .inline-block
mixin: .vertical-arrow
padding: 3px 6px
font-weight: 400
margin: 0 2px @is (ie7, 0, 10px) 0 // 10px gives more breathing space to the dropdown's arrow...
li > ul
opacity: 0
transition: opacity .15s ease, transform .3s ease, visibility .3s ease
@if !ie // IE 9-10 behave strangely here.
transform: translate3d(0, 5px, 0)
@endif
display: block
clear: left
@if !ie[-7]
top: 100%
@endif
position: absolute
z-index: 1000
visibility: hidden
margin, padding: 0
border: 1px solid #bbb
@if ie[9-], chrome, firefox[20-] // Speed matters.
background: #fcfcfc
box-shadow: inset 0 50px 50px rgba(232, 236, 232, .8), 2px 2px 3px 0 rgba(0,0,0, .2)
@else
background: $menu_gradient
box-shadow: 2px 2px 3px 0 rgba(0,0,0, .2)
@endif
border-radius: 0 10px 10px 0
ul ul // sub-menus
transform: translate3d(0, 0, 0)
left: @is (ie6, 95%, 100%)
top: 0
li
@if ie6
float: left
@endif
@if !ie[-7]
position: relative
@endif
list-style: none
cursor: pointer
// For anything else than IE6...
> li
display: inline-block
margin, padding: 0
> ul extends .arrow_above
li li
@if ie6
float: none
@endif
@if ie[-8]
position: relative
@endif
display: block
margin: 0
white-space: nowrap
border-left: 4px solid $menu_border // #fbe2c8
li:hover > ul
visibility: visible
opacity: 1
transition: opacity .15s ease, transform .3s ease
transform: translate3d(0, 0, 0)
ul & // sub-menus
transform: translate3d(-5px, 0, 0)
li.active > a
font-weight: 700
// We need an .horizontal-arrow for our sub-menus...
li.subsection > a
margin-right: 12px