Commit | Line | Data |
---|---|---|
b8eab696 AE |
1 | .messageTabMenu { |
2 | border: 1px solid @wcfContainerBorderColor; | |
3 | border-top-width: 0; | |
4 | border-radius: 0 0 3px 3px; | |
5 | line-height: @wcfBaseLineHeight; | |
6 | ||
7 | > div, | |
8 | > fieldset{ | |
9 | background-color: @wcfContainerBackgroundColor; | |
10 | border-width: 0; | |
11 | border-radius: 0; | |
12 | border-top: 1px solid @wcfContainerBorderColor; | |
13 | display: none; | |
14 | padding: 15px 10px; | |
15 | position: static; | |
16 | ||
17 | &.active { | |
18 | display: block; | |
19 | } | |
20 | } | |
21 | ||
22 | > div { | |
23 | > nav { | |
24 | background-color: @wcfContainerBackgroundColor; | |
25 | border-bottom: 1px solid @wcfContainerBorderColor; | |
26 | margin: -14px -21px 14px -21px; | |
27 | padding: @wcfGapTiny @wcfGapSmall; | |
28 | ||
29 | ul { | |
30 | display: inline-block; | |
31 | font-size: 0; | |
32 | white-space: nowrap; | |
33 | ||
34 | li { | |
35 | display: inline-block; | |
36 | outline: 0; | |
37 | vertical-align: baseline; | |
38 | ||
39 | &.active a, | |
40 | &.active a:hover { | |
41 | color: @wcfButtonPrimaryColor; | |
42 | cursor: default; | |
43 | } | |
44 | ||
45 | a { | |
46 | color: @wcfButtonColor; | |
47 | display: block; | |
48 | font-size: @wcfSmallFontSize; | |
49 | outline: 0; | |
50 | padding: 0 @wcfGapSmall; | |
51 | ||
52 | -webkit-touch-callout: none; | |
53 | -webkit-user-select: none; | |
54 | -khtml-user-select: none; | |
55 | -moz-user-select: none; | |
56 | -ms-user-select: none; | |
57 | user-select: none; | |
58 | ||
59 | &:hover { | |
60 | color: @wcfButtonHoverColor; | |
61 | text-decoration: none; | |
62 | } | |
63 | } | |
64 | ||
65 | &:not(:last-child) { | |
66 | padding-right: @wcfGapTiny; | |
67 | } | |
68 | ||
69 | &.dropdown > a { | |
70 | font-size: 1.0rem; | |
71 | padding: 4px 7px 2px; | |
72 | } | |
73 | } | |
74 | } | |
75 | } | |
76 | ||
77 | > div, | |
78 | > fieldset { | |
79 | border-top-width: 0; | |
80 | } | |
81 | } | |
82 | } | |
83 | ||
84 | .messageTabMenuNavigation > ul { | |
85 | background-color: @wcfContainerBackgroundColor; | |
86 | font-size: 0; | |
87 | white-space: nowrap; | |
88 | ||
89 | > li { | |
90 | display: inline-block; | |
91 | ||
92 | > a { | |
93 | border-right: 1px solid @wcfContainerBorderColor; | |
94 | border-bottom: 1px solid transparent; | |
95 | color: @wcfButtonColor; | |
96 | display: block; | |
97 | font-size: 1rem; | |
98 | line-height: @wcfBaseLineHeight; | |
99 | margin-bottom: -1px; | |
100 | padding: 7px 14px 8px 14px; | |
101 | text-decoration: none; | |
102 | ||
103 | -webkit-touch-callout: none; | |
104 | -webkit-user-select: none; | |
105 | -khtml-user-select: none; | |
106 | -moz-user-select: none; | |
107 | -ms-user-select: none; | |
108 | user-select: none; | |
109 | ||
110 | &:hover { | |
111 | color: @wcfLinkColor; | |
112 | } | |
113 | ||
114 | > span.icon { | |
115 | display: none; | |
116 | } | |
117 | } | |
118 | ||
119 | &.active { | |
120 | > a { | |
121 | background-color: @wcfContainerBackgroundColor; | |
122 | color: @wcfLinkColor; | |
123 | } | |
124 | } | |
125 | } | |
126 | } | |
127 | ||
128 | @media only screen and (max-width: 800px) { | |
129 | .redactor-toolbar > li > a:hover { | |
130 | background-color: transparent !important; | |
131 | } | |
132 | ||
133 | .messageTabMenu { | |
134 | > nav > ul > li:not(.active) > a { | |
135 | > span.icon { | |
136 | display: block; | |
137 | } | |
138 | ||
139 | > span:not(.icon) { | |
140 | display: none; | |
141 | } | |
142 | } | |
143 | ||
144 | > div > nav { | |
145 | margin: (@wcfGapTiny - @wcfGapSmall) -@wcfGapSmall @wcfGapSmall -@wcfGapSmall; | |
146 | } | |
147 | } | |
148 | } | |
149 | ||
150 | /* fix for Firefox - fieldsets are set to display: table-column which cause an odd gap between the fieldset | |
151 | and the next element, similar to gaps with display: inline-block and font-size > 0 */ | |
152 | @-moz-document url-prefix() { | |
153 | fieldset + .messageTabMenu { | |
154 | margin-top: -3px; | |
155 | } | |
156 | } | |
157 | ||
158 | .uploadButton { | |
159 | overflow: hidden; | |
160 | position: relative; | |
161 | ||
162 | > input { | |
163 | left: -4px; | |
164 | opacity: 0; | |
165 | padding: 4px; | |
166 | position: absolute; | |
167 | top: -2px; | |
168 | } | |
169 | } |