##// END OF EJS Templates
quick-login: make links be rcblue on hover.
marcink -
r4088:f9644077 default
parent child Browse files
Show More
@@ -1,326 +1,323 b''
1 //LOGIN
1 //LOGIN
2
2
3
3
4 .loginbox {
4 .loginbox {
5 max-width: 65%;
5 max-width: 65%;
6 margin: @pagepadding auto;
6 margin: @pagepadding auto;
7 font-family: @text-light;
7 font-family: @text-light;
8 border: @border-thickness solid @grey5;
8 border: @border-thickness solid @grey5;
9 box-sizing: border-box;
9 box-sizing: border-box;
10
10
11 @media (max-width:1200px) {
11 @media (max-width:1200px) {
12 max-width: 85%;
12 max-width: 85%;
13 }
13 }
14
14
15 @media (max-width:768px) {
15 @media (max-width:768px) {
16 max-width: 100%;
16 max-width: 100%;
17 width: 100%;
17 width: 100%;
18 margin: 0;
18 margin: 0;
19 }
19 }
20
20
21 .title {
21 .title {
22 float: none;
22 float: none;
23 }
23 }
24
24
25 .header {
25 .header {
26 width: 100%;
26 width: 100%;
27 padding: 0 35px;
27 padding: 0 35px;
28 box-sizing: border-box;
28 box-sizing: border-box;
29
29
30 .title {
30 .title {
31 padding: 0;
31 padding: 0;
32 }
32 }
33 }
33 }
34
34
35 .loginwrapper {
35 .loginwrapper {
36 float: left;
36 float: left;
37 height: 100%;
37 height: 100%;
38 width: 100%;
38 width: 100%;
39 padding: 35px 55px 35px 35px;
39 padding: 35px 55px 35px 35px;
40 background-color: white;
40 background-color: white;
41 box-sizing: border-box;
41 box-sizing: border-box;
42
42
43 @media (max-width:414px) {
43 @media (max-width:414px) {
44 padding: 35px;
44 padding: 35px;
45 }
45 }
46 }
46 }
47
47
48 .left-column {
48 .left-column {
49 float: left;
49 float: left;
50 position: relative;
50 position: relative;
51 width: 50%;
51 width: 50%;
52 height: 100%;
52 height: 100%;
53
53
54 @media (max-width:414px) {
54 @media (max-width:414px) {
55 display:none;
55 display:none;
56 }
56 }
57 }
57 }
58
58
59 .right-column {
59 .right-column {
60 float: right;
60 float: right;
61 position: relative;
61 position: relative;
62 width: 50%;
62 width: 50%;
63
63
64 @media (max-width:414px) {
64 @media (max-width:414px) {
65 width: 100%;
65 width: 100%;
66 }
66 }
67 }
67 }
68
68
69 .sign-in-image {
69 .sign-in-image {
70 display: block;
70 display: block;
71 width: 65%;
71 width: 65%;
72 margin: 5% auto;
72 margin: 5% auto;
73 }
73 }
74
74
75 .sign-in-title {
75 .sign-in-title {
76
76
77 h4 {
77 h4 {
78 margin: @padding*2 0;
78 margin: @padding*2 0;
79 }
79 }
80 }
80 }
81
81
82 .form {
82 .form {
83 label {
83 label {
84 display: block;
84 display: block;
85 }
85 }
86
86
87 input {
87 input {
88 width: 100%;
88 width: 100%;
89 margin: 0 10% @padding 0;
89 margin: 0 10% @padding 0;
90 .box-sizing(border-box) ;
90 .box-sizing(border-box) ;
91
91
92 &[type="checkbox"] {
92 &[type="checkbox"] {
93 clear: both;
93 clear: both;
94 width: auto;
94 width: auto;
95 margin: 0 1em @padding 0;
95 margin: 0 1em @padding 0;
96 }
96 }
97 }
97 }
98
98
99 .checkbox {
99 .checkbox {
100 display: inline;
100 display: inline;
101 width: auto;
101 width: auto;
102 }
102 }
103
103
104 .sign-in {
104 .sign-in {
105 clear: both;
105 clear: both;
106 width: 100%;
106 width: 100%;
107 margin: @padding 0;
107 margin: @padding 0;
108 }
108 }
109 .pwd_reset {
109 .pwd_reset {
110 font-weight: normal;
110 font-weight: normal;
111 }
111 }
112 .new_account {
112 .new_account {
113 font-weight: bold;
113 font-weight: bold;
114 }
114 }
115 }
115 }
116 .register_message,
116 .register_message,
117 .activation_msg {
117 .activation_msg {
118 padding: 0 0 @padding;
118 padding: 0 0 @padding;
119 }
119 }
120
120
121 .buttons,
121 .buttons,
122 .links {
122 .links {
123 padding: 0;
123 padding: 0;
124 }
124 }
125
125
126 .buttons {
126 .buttons {
127 input {
127 input {
128 margin-right: 0;
128 margin-right: 0;
129 .box-sizing(border-box);
129 .box-sizing(border-box);
130 }
130 }
131
131
132 #sign_up, #send {
132 #sign_up, #send {
133 width: 100%;
133 width: 100%;
134 }
134 }
135 }
135 }
136
136
137 .fields {
137 .fields {
138 .field.field-compact {
138 .field.field-compact {
139 margin-bottom: 0px;
139 margin-bottom: 0px;
140 }
140 }
141
141
142 .buttons {
142 .buttons {
143 margin: 0;
143 margin: 0;
144 }
144 }
145
145
146 .field {
146 .field {
147 margin-bottom: 15px;
147 margin-bottom: 15px;
148
148
149 input {
149 input {
150 width: 100%;
150 width: 100%;
151 .box-sizing(border-box);
151 .box-sizing(border-box);
152 }
152 }
153
153
154 .input {
154 .input {
155 margin-left: 0;
155 margin-left: 0;
156 }
156 }
157
157
158 .label {
158 .label {
159 padding-top: 0;
159 padding-top: 0;
160 }
160 }
161 }
161 }
162 }
162 }
163
163
164 .checkbox {
164 .checkbox {
165 margin: 0 0 @textmargin 0;
165 margin: 0 0 @textmargin 0;
166
166
167 input[type="checkbox"] {
167 input[type="checkbox"] {
168 width: auto;
168 width: auto;
169 }
169 }
170
170
171 label {
171 label {
172 padding: 0;
172 padding: 0;
173 min-height: 0;
173 min-height: 0;
174 }
174 }
175 }
175 }
176
176
177 .activation_msg {
177 .activation_msg {
178 padding: @padding 0 0;
178 padding: @padding 0 0;
179 color: @grey4;
179 color: @grey4;
180 }
180 }
181
181
182 .links {
182 .links {
183 float: right;
183 float: right;
184 margin: 0;
184 margin: 0;
185 padding: 0;
185 padding: 0;
186 line-height: 1;
186 line-height: 1;
187
187
188 p {
188 p {
189 float: right;
189 float: right;
190 margin: 0;
190 margin: 0;
191 line-height: 1.5em;
191 line-height: 1.5em;
192 }
192 }
193 }
193 }
194
194
195 p.help-block {
195 p.help-block {
196 margin-left: 0;
196 margin-left: 0;
197 }
197 }
198 }
198 }
199
199
200 .user-menu.submenu {
200 .user-menu.submenu {
201 right: 0!important;
201 right: 0!important;
202 left: auto!important;
202 left: auto!important;
203 min-width: 290px;
203 min-width: 290px;
204 }
204 }
205
205
206 .user-menu {
206 .user-menu {
207 .bookmark-items {
207 .bookmark-items {
208 border-top: @border-thickness solid @grey6;
208 border-top: @border-thickness solid @grey6;
209 margin-top: 1em;
209 margin-top: 1em;
210 padding: 1em .5em;
210 padding: 1em .5em;
211 color: @grey3;
211 color: @grey3;
212 border-bottom: @grey3;
212 border-bottom: @grey3;
213
213
214 a {
214 a {
215 padding: 0 !important;
215 padding: 0 !important;
216 color: @rcblue !important;
217 }
216 }
218 }
217 }
219 a.bookmark-item {
218
220 color: @rcblue !important;
221 }
222 }
219 }
223
220
224
221
225 #quick_login {
222 #quick_login {
226 left: auto;
223 left: auto;
227 right: 0;
224 right: 0;
228 padding: @menupadding;
225 padding: @menupadding;
229 z-index: 999;
226 z-index: 999;
230 overflow: hidden;
227 overflow: hidden;
231 background-color: @white;
228 background-color: @white;
232 border: 1px solid @grey5;
229 border: 1px solid @grey5;
233 color: @grey2;
230 color: @grey2;
234 box-shadow: @dropdown-shadow;
231 box-shadow: @dropdown-shadow;
235
232
236 h4 {
233 h4 {
237 margin-bottom: 12px;
234 margin-bottom: 12px;
238 }
235 }
239
236
240 .form {
237 .form {
241 width: auto;
238 width: auto;
242 }
239 }
243
240
244 label, .field {
241 label, .field {
245 margin-bottom: 0;
242 margin-bottom: 0;
246 }
243 }
247
244
248 .label {
245 .label {
249 padding-top: 0;
246 padding-top: 0;
250 }
247 }
251
248
252 input {
249 input {
253 min-width: 215px;
250 min-width: 215px;
254 margin: 8px 0 @padding;
251 margin: 8px 0 @padding;
255 }
252 }
256
253
257 input[type="submit"] {
254 input[type="submit"] {
258 &:extend(.btn-primary);
255 &:extend(.btn-primary);
259 width:100%;
256 width:100%;
260 min-width: 0;
257 min-width: 0;
261 }
258 }
262
259
263 .forgot_password,
260 .forgot_password,
264 .buttons .register {
261 .buttons .register {
265 a {
262 a {
266 color: @rcblue;
263 color: @rcblue;
267
264
268 &:hover {
265 &:hover {
269 color: @rcdarkblue;
266 color: @rcdarkblue;
270 }
267 }
271 }
268 }
272 }
269 }
273
270
274 .buttons {
271 .buttons {
275 margin: 0;
272 margin: 0;
276 }
273 }
277
274
278 .buttons a {
275 .buttons a {
279 padding: 8px 0;
276 padding: 8px 0;
280 line-height: 1.4em;
277 line-height: 1.4em;
281 color: @grey4;
278 color: @grey4;
282
279
283 &:hover {
280 &:hover {
284 color: @grey2;
281 color: @rcblue;
285 }
282 }
286 }
283 }
287
284
288 #sign_in {
285 #sign_in {
289 margin-bottom: 0
286 margin-bottom: 0
290 }
287 }
291
288
292 .big_gravatar {
289 .big_gravatar {
293 float: left;
290 float: left;
294 display: block;
291 display: block;
295 padding: .5em;
292 padding: .5em;
296 }
293 }
297
294
298 .full_name {
295 .full_name {
299 margin: 0 0 0 70px;
296 margin: 0 0 0 70px;
300 padding-top: 1em;
297 padding-top: 1em;
301 }
298 }
302
299
303 .email {
300 .email {
304 margin: 0 0 0 70px;
301 margin: 0 0 0 70px;
305 font-family: @text-light;
302 font-family: @text-light;
306 }
303 }
307
304
308 ol.links {
305 ol.links {
309 clear:both;
306 clear:both;
310 margin: 0;
307 margin: 0;
311 padding: @padding 0 0 0;
308 padding: @padding 0 0 0;
312
309
313 li {
310 li {
314 input {
311 input {
315 margin: @padding 0 0 0;
312 margin: @padding 0 0 0;
316 }
313 }
317 }
314 }
318 }
315 }
319 }
316 }
320 .submenu #quick_login li:hover {
317 .submenu #quick_login li:hover {
321 background-color: transparent;
318 background-color: transparent;
322 }
319 }
323
320
324 #quick_login_link:hover + #quick_login {
321 #quick_login_link:hover + #quick_login {
325 display: block;
322 display: block;
326 }
323 }
@@ -1,816 +1,816 b''
1 // navigation.less
1 // navigation.less
2 // For use in RhodeCode applications;
2 // For use in RhodeCode applications;
3 // see style guide documentation for guidelines.
3 // see style guide documentation for guidelines.
4
4
5 // TOP MAIN DARK NAVIGATION
5 // TOP MAIN DARK NAVIGATION
6
6
7 .header .main_nav.horizontal-list {
7 .header .main_nav.horizontal-list {
8 float: right;
8 float: right;
9 color: @grey4;
9 color: @grey4;
10 > li {
10 > li {
11 a {
11 a {
12 color: @grey4;
12 color: @grey4;
13 }
13 }
14 }
14 }
15 }
15 }
16
16
17 // HEADER NAVIGATION
17 // HEADER NAVIGATION
18
18
19 .horizontal-list {
19 .horizontal-list {
20 display: block;
20 display: block;
21 margin: 0;
21 margin: 0;
22 padding: 0;
22 padding: 0;
23 -webkit-padding-start: 0;
23 -webkit-padding-start: 0;
24 text-align: left;
24 text-align: left;
25 font-size: @navigation-fontsize;
25 font-size: @navigation-fontsize;
26 color: @grey6;
26 color: @grey6;
27 z-index:10;
27 z-index:10;
28
28
29 li {
29 li {
30 line-height: 1em;
30 line-height: 1em;
31 list-style-type: none;
31 list-style-type: none;
32 margin: 0 20px 0 0;
32 margin: 0 20px 0 0;
33
33
34 a {
34 a {
35 padding: 0 .5em;
35 padding: 0 .5em;
36
36
37 &.menu_link_notifications {
37 &.menu_link_notifications {
38 .pill(7px,@rcblue);
38 .pill(7px,@rcblue);
39 display: inline;
39 display: inline;
40 margin: 0 7px 0 .7em;
40 margin: 0 7px 0 .7em;
41 font-size: @basefontsize;
41 font-size: @basefontsize;
42 color: white;
42 color: white;
43
43
44 &.empty {
44 &.empty {
45 background-color: @grey4;
45 background-color: @grey4;
46 }
46 }
47
47
48 &:hover {
48 &:hover {
49 background-color: @rcdarkblue;
49 background-color: @rcdarkblue;
50 }
50 }
51 }
51 }
52 }
52 }
53 .pill_container {
53 .pill_container {
54 margin: 1.25em 0px 0px 0px;
54 margin: 1.25em 0px 0px 0px;
55 float: right;
55 float: right;
56 }
56 }
57
57
58 &#quick_login_li {
58 &#quick_login_li {
59 &:hover {
59 &:hover {
60 color: @grey5;
60 color: @grey5;
61 }
61 }
62
62
63 a.menu_link_notifications {
63 a.menu_link_notifications {
64 color: white;
64 color: white;
65 }
65 }
66
66
67 .user {
67 .user {
68 padding-bottom: 10px;
68 padding-bottom: 10px;
69 }
69 }
70 }
70 }
71
71
72 &:before { content: none; }
72 &:before { content: none; }
73
73
74 &:last-child {
74 &:last-child {
75 .menulabel {
75 .menulabel {
76 padding-right: 0;
76 padding-right: 0;
77 border-right: none;
77 border-right: none;
78
78
79 .show_more {
79 .show_more {
80 padding-right: 0;
80 padding-right: 0;
81 }
81 }
82 }
82 }
83
83
84 &> a {
84 &> a {
85 border-bottom: none;
85 border-bottom: none;
86 }
86 }
87 }
87 }
88
88
89 &.open {
89 &.open {
90
90
91 a {
91 a {
92 color: white;
92 color: white;
93 }
93 }
94 }
94 }
95
95
96 &:focus {
96 &:focus {
97 outline: none;
97 outline: none;
98 }
98 }
99
99
100 ul li {
100 ul li {
101 display: block;
101 display: block;
102
102
103 &:last-child> a {
103 &:last-child> a {
104 border-bottom: none;
104 border-bottom: none;
105 }
105 }
106
106
107 ul li:last-child a {
107 ul li:last-child a {
108 /* we don't expect more then 3 levels of submenu and the third
108 /* we don't expect more then 3 levels of submenu and the third
109 level can have different html structure */
109 level can have different html structure */
110 border-bottom: none;
110 border-bottom: none;
111 }
111 }
112 }
112 }
113 }
113 }
114
114
115 > li {
115 > li {
116 float: left;
116 float: left;
117 display: block;
117 display: block;
118 padding: 0;
118 padding: 0;
119
119
120 > a,
120 > a,
121 &.has_select2 a {
121 &.has_select2 a {
122 display: block;
122 display: block;
123 padding: 10px 0;
123 padding: 10px 0;
124 }
124 }
125
125
126 .menulabel {
126 .menulabel {
127 line-height: 1em;
127 line-height: 1em;
128 // for this specifically we do not use a variable
128 // for this specifically we do not use a variable
129 }
129 }
130
130
131 .menulink-counter {
131 .menulink-counter {
132 border: 1px solid @grey2;
132 border: 1px solid @grey2;
133 border-radius: @border-radius;
133 border-radius: @border-radius;
134 background: @grey7;
134 background: @grey7;
135 display: inline-block;
135 display: inline-block;
136 padding: 0px 4px;
136 padding: 0px 4px;
137 text-align: center;
137 text-align: center;
138 font-size: 12px;
138 font-size: 12px;
139 }
139 }
140
140
141 .pr_notifications {
141 .pr_notifications {
142 padding-left: .5em;
142 padding-left: .5em;
143 }
143 }
144
144
145 .pr_notifications + .menulabel {
145 .pr_notifications + .menulabel {
146 display:inline;
146 display:inline;
147 padding-left: 0;
147 padding-left: 0;
148 }
148 }
149
149
150 &:hover,
150 &:hover,
151 &.open,
151 &.open,
152 &.active {
152 &.active {
153 a {
153 a {
154 color: @rcblue;
154 color: @rcblue;
155 }
155 }
156 }
156 }
157 }
157 }
158
158
159 pre {
159 pre {
160 margin: 0;
160 margin: 0;
161 padding: 0;
161 padding: 0;
162 }
162 }
163
163
164 .select2-container,
164 .select2-container,
165 .menulink.childs {
165 .menulink.childs {
166 position: relative;
166 position: relative;
167 }
167 }
168
168
169 .menulink {
169 .menulink {
170 &.disabled {
170 &.disabled {
171 color: @grey3;
171 color: @grey3;
172 cursor: default;
172 cursor: default;
173 opacity: 0.5;
173 opacity: 0.5;
174 }
174 }
175 }
175 }
176
176
177 #quick_login {
177 #quick_login {
178
178
179 li a {
179 li a {
180 padding: .5em 0;
180 padding: .5em 0;
181 border-bottom: none;
181 border-bottom: none;
182 color: @grey2;
182 color: @grey2;
183
183
184 &:hover { color: @grey1; }
184 &:hover { color: @rcblue; }
185 }
185 }
186 }
186 }
187
187
188 #quick_login_link {
188 #quick_login_link {
189 display: inline-block;
189 display: inline-block;
190
190
191 .gravatar {
191 .gravatar {
192 border: 1px solid @grey5;
192 border: 1px solid @grey5;
193 }
193 }
194
194
195 .gravatar-login {
195 .gravatar-login {
196 height: 20px;
196 height: 20px;
197 width: 20px;
197 width: 20px;
198 margin: -8px 0;
198 margin: -8px 0;
199 padding: 0;
199 padding: 0;
200 }
200 }
201
201
202 &:hover .user {
202 &:hover .user {
203 color: @grey6;
203 color: @grey6;
204 }
204 }
205 }
205 }
206 }
206 }
207 .header .horizontal-list {
207 .header .horizontal-list {
208
208
209 li {
209 li {
210
210
211 &#quick_login_li {
211 &#quick_login_li {
212 padding-left: .5em;
212 padding-left: .5em;
213 margin-right: 0px;
213 margin-right: 0px;
214
214
215 &:hover #quick_login_link {
215 &:hover #quick_login_link {
216 color: inherit;
216 color: inherit;
217 }
217 }
218
218
219 .menu_link_user {
219 .menu_link_user {
220 padding: 0 2px;
220 padding: 0 2px;
221 }
221 }
222 }
222 }
223 list-style-type: none;
223 list-style-type: none;
224 }
224 }
225
225
226 > li {
226 > li {
227
227
228 a {
228 a {
229 padding: 18px 0 12px 0;
229 padding: 18px 0 12px 0;
230 color: @nav-grey;
230 color: @nav-grey;
231
231
232 &.menu_link_notifications {
232 &.menu_link_notifications {
233 padding: 1px 8px;
233 padding: 1px 8px;
234 }
234 }
235 }
235 }
236
236
237 &:hover,
237 &:hover,
238 &.open,
238 &.open,
239 &.active {
239 &.active {
240 .pill_container a {
240 .pill_container a {
241 // don't select text for the pill container, it has it' own
241 // don't select text for the pill container, it has it' own
242 // hover behaviour
242 // hover behaviour
243 color: @nav-grey;
243 color: @nav-grey;
244 }
244 }
245 }
245 }
246
246
247 &:hover,
247 &:hover,
248 &.open,
248 &.open,
249 &.active {
249 &.active {
250 a {
250 a {
251 color: @grey6;
251 color: @grey6;
252 }
252 }
253 }
253 }
254
254
255 .select2-dropdown-open a {
255 .select2-dropdown-open a {
256 color: @grey6;
256 color: @grey6;
257 }
257 }
258
258
259 .repo-switcher {
259 .repo-switcher {
260 padding-left: 0;
260 padding-left: 0;
261
261
262 .menulabel {
262 .menulabel {
263 padding-left: 0;
263 padding-left: 0;
264 }
264 }
265 }
265 }
266 }
266 }
267
267
268 li ul li {
268 li ul li {
269 background-color:@grey2;
269 background-color:@grey2;
270
270
271 a {
271 a {
272 padding: .5em 0;
272 padding: .5em 0;
273 border-bottom: @border-thickness solid @border-default-color;
273 border-bottom: @border-thickness solid @border-default-color;
274 color: @grey6;
274 color: @grey6;
275 }
275 }
276
276
277 &:last-child a, &.last a{
277 &:last-child a, &.last a{
278 border-bottom: none;
278 border-bottom: none;
279 }
279 }
280
280
281 &:hover {
281 &:hover {
282 background-color: @grey3;
282 background-color: @grey3;
283 }
283 }
284 }
284 }
285
285
286 .submenu {
286 .submenu {
287 margin-top: 5px;
287 margin-top: 5px;
288 }
288 }
289 }
289 }
290
290
291 // SUBMENUS
291 // SUBMENUS
292 .navigation .submenu {
292 .navigation .submenu {
293 display: none;
293 display: none;
294 }
294 }
295
295
296 .navigation li.open {
296 .navigation li.open {
297 .submenu {
297 .submenu {
298 display: block;
298 display: block;
299 }
299 }
300 }
300 }
301
301
302 .navigation li:last-child .submenu {
302 .navigation li:last-child .submenu {
303 right: auto;
303 right: auto;
304 left: 0;
304 left: 0;
305 border: 1px solid @grey5;
305 border: 1px solid @grey5;
306 background: @white;
306 background: @white;
307 box-shadow: @dropdown-shadow;
307 box-shadow: @dropdown-shadow;
308 }
308 }
309
309
310 .submenu {
310 .submenu {
311 position: absolute;
311 position: absolute;
312 top: 100%;
312 top: 100%;
313 left: 0;
313 left: 0;
314 min-width: 180px;
314 min-width: 180px;
315 margin: 2px 0 0;
315 margin: 2px 0 0;
316 padding: 0;
316 padding: 0;
317 text-align: left;
317 text-align: left;
318 font-family: @text-light;
318 font-family: @text-light;
319 border-radius: @border-radius;
319 border-radius: @border-radius;
320 z-index: 20;
320 z-index: 20;
321
321
322 li {
322 li {
323 display: block;
323 display: block;
324 margin: 0;
324 margin: 0;
325 padding: 0 .5em;
325 padding: 0 .5em;
326 line-height: 1em;
326 line-height: 1em;
327 color: @grey3;
327 color: @grey3;
328 background-color: @white;
328 background-color: @white;
329 list-style-type: none;
329 list-style-type: none;
330
330
331 a {
331 a {
332 display: block;
332 display: block;
333 width: 100%;
333 width: 100%;
334 padding: .5em 0;
334 padding: .5em 0;
335 border-right: none;
335 border-right: none;
336 border-bottom: @border-thickness solid white;
336 border-bottom: @border-thickness solid white;
337 color: @grey3;
337 color: @grey3;
338 }
338 }
339
339
340 ul {
340 ul {
341 display: none;
341 display: none;
342 position: absolute;
342 position: absolute;
343 top: 0;
343 top: 0;
344 right: 100%;
344 right: 100%;
345 padding: 0;
345 padding: 0;
346 z-index: 30;
346 z-index: 30;
347 }
347 }
348 &:hover {
348 &:hover {
349 background-color: @grey7;
349 background-color: @grey7;
350 -webkit-transition: background .3s;
350 -webkit-transition: background .3s;
351 -moz-transition: background .3s;
351 -moz-transition: background .3s;
352 -o-transition: background .3s;
352 -o-transition: background .3s;
353 transition: background .3s;
353 transition: background .3s;
354
354
355 ul {
355 ul {
356 display: block;
356 display: block;
357 }
357 }
358 }
358 }
359 }
359 }
360
360
361 }
361 }
362
362
363
363
364
364
365
365
366 // repo dropdown
366 // repo dropdown
367 .quick_repo_menu {
367 .quick_repo_menu {
368 width: 15px;
368 width: 15px;
369 text-align: center;
369 text-align: center;
370 position: relative;
370 position: relative;
371 cursor: pointer;
371 cursor: pointer;
372
372
373 div {
373 div {
374 overflow: visible !important;
374 overflow: visible !important;
375 }
375 }
376
376
377 &.sorting {
377 &.sorting {
378 cursor: auto;
378 cursor: auto;
379 }
379 }
380
380
381 &:hover {
381 &:hover {
382 .menu_items_container {
382 .menu_items_container {
383 position: absolute;
383 position: absolute;
384 display: block;
384 display: block;
385 }
385 }
386 .menu_items {
386 .menu_items {
387 display: block;
387 display: block;
388 }
388 }
389 }
389 }
390
390
391 i {
391 i {
392 margin: 0;
392 margin: 0;
393 color: @grey4;
393 color: @grey4;
394 }
394 }
395
395
396 .menu_items_container {
396 .menu_items_container {
397 position: absolute;
397 position: absolute;
398 top: 0;
398 top: 0;
399 left: 100%;
399 left: 100%;
400 margin: 0;
400 margin: 0;
401 padding: 0;
401 padding: 0;
402 list-style: none;
402 list-style: none;
403 background-color: @grey6;
403 background-color: @grey6;
404 z-index: 999;
404 z-index: 999;
405 text-align: left;
405 text-align: left;
406
406
407 a {
407 a {
408 color: @grey2;
408 color: @grey2;
409 }
409 }
410
410
411 ul.menu_items {
411 ul.menu_items {
412 margin: 0;
412 margin: 0;
413 padding: 0;
413 padding: 0;
414 }
414 }
415
415
416 li {
416 li {
417 margin: 0;
417 margin: 0;
418 padding: 0;
418 padding: 0;
419 line-height: 1em;
419 line-height: 1em;
420 list-style-type: none;
420 list-style-type: none;
421
421
422 a {
422 a {
423 display: block;
423 display: block;
424 height: 16px;
424 height: 16px;
425 padding: 8px; //must add up to td height (28px)
425 padding: 8px; //must add up to td height (28px)
426 width: 120px; // set width
426 width: 120px; // set width
427
427
428 &:hover {
428 &:hover {
429 background-color: @grey5;
429 background-color: @grey5;
430 -webkit-transition: background .3s;
430 -webkit-transition: background .3s;
431 -moz-transition: background .3s;
431 -moz-transition: background .3s;
432 -o-transition: background .3s;
432 -o-transition: background .3s;
433 transition: background .3s;
433 transition: background .3s;
434 }
434 }
435 }
435 }
436 }
436 }
437 }
437 }
438 }
438 }
439
439
440
440
441 // new objects main action
441 // new objects main action
442 .action-menu {
442 .action-menu {
443 left: auto;
443 left: auto;
444 right: 0;
444 right: 0;
445 padding: 12px;
445 padding: 12px;
446 z-index: 999;
446 z-index: 999;
447 overflow: hidden;
447 overflow: hidden;
448 background-color: #fff;
448 background-color: #fff;
449 border: 1px solid @grey5;
449 border: 1px solid @grey5;
450 color: @grey2;
450 color: @grey2;
451 box-shadow: @dropdown-shadow;
451 box-shadow: @dropdown-shadow;
452
452
453 .submenu-title {
453 .submenu-title {
454 font-weight: bold;
454 font-weight: bold;
455 }
455 }
456
456
457 .submenu-title:not(:first-of-type) {
457 .submenu-title:not(:first-of-type) {
458 padding-top: 10px;
458 padding-top: 10px;
459 }
459 }
460
460
461 &.submenu {
461 &.submenu {
462 min-width: 200px;
462 min-width: 200px;
463
463
464 ol {
464 ol {
465 padding:0;
465 padding:0;
466 }
466 }
467
467
468 li {
468 li {
469 display: block;
469 display: block;
470 margin: 0;
470 margin: 0;
471 padding: .2em .5em;
471 padding: .2em .5em;
472 line-height: 1em;
472 line-height: 1em;
473
473
474 background-color: #fff;
474 background-color: #fff;
475 list-style-type: none;
475 list-style-type: none;
476
476
477 a {
477 a {
478 padding: 4px;
478 padding: 4px;
479 color: @grey4 !important;
479 color: @grey4 !important;
480 border-bottom: none;
480 border-bottom: none;
481 }
481 }
482 }
482 }
483 li:not(.submenu-title) a:hover{
483 li:not(.submenu-title) a:hover{
484 color: @grey2 !important;
484 color: @grey2 !important;
485 }
485 }
486 }
486 }
487 }
487 }
488
488
489
489
490 // Header Repository Switcher
490 // Header Repository Switcher
491 // Select2 Dropdown
491 // Select2 Dropdown
492 #select2-drop.select2-drop.repo-switcher-dropdown {
492 #select2-drop.select2-drop.repo-switcher-dropdown {
493 width: auto !important;
493 width: auto !important;
494 margin-top: 5px;
494 margin-top: 5px;
495 padding: 1em 0;
495 padding: 1em 0;
496 text-align: left;
496 text-align: left;
497 .border-radius-bottom(@border-radius);
497 .border-radius-bottom(@border-radius);
498 border-color: transparent;
498 border-color: transparent;
499 color: @grey6;
499 color: @grey6;
500 background-color: @grey2;
500 background-color: @grey2;
501
501
502 input {
502 input {
503 min-width: 90%;
503 min-width: 90%;
504 }
504 }
505
505
506 ul.select2-result-sub {
506 ul.select2-result-sub {
507
507
508 li {
508 li {
509 line-height: 1em;
509 line-height: 1em;
510
510
511 &:hover,
511 &:hover,
512 &.select2-highlighted {
512 &.select2-highlighted {
513 background-color: @grey3;
513 background-color: @grey3;
514 }
514 }
515 }
515 }
516
516
517 &:before { content: none; }
517 &:before { content: none; }
518 }
518 }
519
519
520 ul.select2-results {
520 ul.select2-results {
521 min-width: 200px;
521 min-width: 200px;
522 margin: 0;
522 margin: 0;
523 padding: 0;
523 padding: 0;
524 list-style-type: none;
524 list-style-type: none;
525 overflow-x: visible;
525 overflow-x: visible;
526 overflow-y: scroll;
526 overflow-y: scroll;
527
527
528 li {
528 li {
529 padding: 0 8px;
529 padding: 0 8px;
530 line-height: 1em;
530 line-height: 1em;
531 color: @grey6;
531 color: @grey6;
532
532
533 &>.select2-result-label {
533 &>.select2-result-label {
534 padding: 8px 0;
534 padding: 8px 0;
535 border-bottom: @border-thickness solid @grey3;
535 border-bottom: @border-thickness solid @grey3;
536 white-space: nowrap;
536 white-space: nowrap;
537 color: @grey5;
537 color: @grey5;
538 cursor: pointer;
538 cursor: pointer;
539 }
539 }
540
540
541 &.select2-result-with-children {
541 &.select2-result-with-children {
542 margin: 0;
542 margin: 0;
543 padding: 0;
543 padding: 0;
544 }
544 }
545
545
546 &.select2-result-unselectable > .select2-result-label {
546 &.select2-result-unselectable > .select2-result-label {
547 margin: 0 8px;
547 margin: 0 8px;
548 }
548 }
549
549
550 }
550 }
551 }
551 }
552
552
553 ul.select2-result-sub {
553 ul.select2-result-sub {
554 margin: 0;
554 margin: 0;
555 padding: 0;
555 padding: 0;
556
556
557 li {
557 li {
558 display: block;
558 display: block;
559 margin: 0;
559 margin: 0;
560 border-right: none;
560 border-right: none;
561 line-height: 1em;
561 line-height: 1em;
562 font-family: @text-light;
562 font-family: @text-light;
563 color: @grey2;
563 color: @grey2;
564 list-style-type: none;
564 list-style-type: none;
565
565
566 &:hover {
566 &:hover {
567 background-color: @grey3;
567 background-color: @grey3;
568 }
568 }
569 }
569 }
570 }
570 }
571 }
571 }
572
572
573
573
574 #context-bar {
574 #context-bar {
575 display: block;
575 display: block;
576 margin: 0 auto 20px 0;
576 margin: 0 auto 20px 0;
577 padding: 0 @header-padding;
577 padding: 0 @header-padding;
578 background-color: @grey7;
578 background-color: @grey7;
579 border-bottom: 1px solid @grey5;
579 border-bottom: 1px solid @grey5;
580
580
581 .clear {
581 .clear {
582 clear: both;
582 clear: both;
583 }
583 }
584 }
584 }
585
585
586 ul#context-pages {
586 ul#context-pages {
587 li {
587 li {
588 list-style-type: none;
588 list-style-type: none;
589
589
590 a {
590 a {
591 color: @grey2;
591 color: @grey2;
592
592
593 &:hover {
593 &:hover {
594 color: @grey1;
594 color: @grey1;
595 }
595 }
596 }
596 }
597
597
598 &.active {
598 &.active {
599 // special case, non-variable color
599 // special case, non-variable color
600 border-bottom: 2px solid @rcblue;
600 border-bottom: 2px solid @rcblue;
601
601
602 a {
602 a {
603 color: @rcblue;
603 color: @rcblue;
604 }
604 }
605 }
605 }
606 }
606 }
607 }
607 }
608
608
609 // PAGINATION
609 // PAGINATION
610
610
611 .pagination {
611 .pagination {
612 border: @border-thickness solid @grey5;
612 border: @border-thickness solid @grey5;
613 color: @grey2;
613 color: @grey2;
614 box-shadow: @button-shadow;
614 box-shadow: @button-shadow;
615
615
616 .current {
616 .current {
617 color: @grey4;
617 color: @grey4;
618 }
618 }
619 }
619 }
620
620
621 .dataTables_processing {
621 .dataTables_processing {
622 text-align: center;
622 text-align: center;
623 font-size: 1.1em;
623 font-size: 1.1em;
624 position: relative;
624 position: relative;
625 top: 95px;
625 top: 95px;
626 }
626 }
627
627
628 .dataTables_paginate, .pagination-wh {
628 .dataTables_paginate, .pagination-wh {
629 text-align: left;
629 text-align: left;
630 display: inline-block;
630 display: inline-block;
631 border-left: 1px solid @grey5;
631 border-left: 1px solid @grey5;
632 float: none;
632 float: none;
633 overflow: hidden;
633 overflow: hidden;
634 box-shadow: @button-shadow;
634 box-shadow: @button-shadow;
635
635
636 .paginate_button, .pager_curpage,
636 .paginate_button, .pager_curpage,
637 .pager_link, .pg-previous, .pg-next, .pager_dotdot {
637 .pager_link, .pg-previous, .pg-next, .pager_dotdot {
638 display: inline-block;
638 display: inline-block;
639 padding: @menupadding/4 @menupadding;
639 padding: @menupadding/4 @menupadding;
640 border: 1px solid @grey5;
640 border: 1px solid @grey5;
641 border-left: 0;
641 border-left: 0;
642 color: @grey2;
642 color: @grey2;
643 cursor: pointer;
643 cursor: pointer;
644 float: left;
644 float: left;
645
645
646 &:hover {
646 &:hover {
647 color: @rcdarkblue;
647 color: @rcdarkblue;
648 }
648 }
649 }
649 }
650
650
651 .paginate_button.disabled,
651 .paginate_button.disabled,
652 .disabled {
652 .disabled {
653 color: @grey3;
653 color: @grey3;
654 cursor: default;
654 cursor: default;
655 opacity: 0.5;
655 opacity: 0.5;
656 }
656 }
657
657
658 .paginate_button.current, .pager_curpage {
658 .paginate_button.current, .pager_curpage {
659 background: @rcblue;
659 background: @rcblue;
660 border-color: @rcblue;
660 border-color: @rcblue;
661 color: @white;
661 color: @white;
662 }
662 }
663
663
664 .ellipsis {
664 .ellipsis {
665 display: inline-block;
665 display: inline-block;
666 text-align: left;
666 text-align: left;
667 padding: @menupadding/4 @menupadding;
667 padding: @menupadding/4 @menupadding;
668 border: 1px solid @grey5;
668 border: 1px solid @grey5;
669 border-left: 0;
669 border-left: 0;
670 float: left;
670 float: left;
671 }
671 }
672 }
672 }
673
673
674 // SIDEBAR
674 // SIDEBAR
675
675
676 .sidebar {
676 .sidebar {
677 .block-left;
677 .block-left;
678 clear: left;
678 clear: left;
679 max-width: @sidebar-width;
679 max-width: @sidebar-width;
680 margin-right: @sidebarpadding;
680 margin-right: @sidebarpadding;
681 padding-right: @sidebarpadding;
681 padding-right: @sidebarpadding;
682 font-family: @text-regular;
682 font-family: @text-regular;
683 color: @grey1;
683 color: @grey1;
684
684
685 .nav-pills {
685 .nav-pills {
686 margin: 0;
686 margin: 0;
687 }
687 }
688
688
689 .nav {
689 .nav {
690 list-style: none;
690 list-style: none;
691 padding: 0;
691 padding: 0;
692
692
693 li {
693 li {
694 padding-bottom: @menupadding;
694 padding-bottom: @menupadding;
695 line-height: 1em;
695 line-height: 1em;
696 color: @grey4;
696 color: @grey4;
697 list-style-type: none;
697 list-style-type: none;
698
698
699 &.active a {
699 &.active a {
700 color: @grey2;
700 color: @grey2;
701 }
701 }
702
702
703 a {
703 a {
704 color: @grey4;
704 color: @grey4;
705 }
705 }
706 }
706 }
707
707
708 }
708 }
709 }
709 }
710
710
711 .main_filter_help_box {
711 .main_filter_help_box {
712 padding: 7px 7px;
712 padding: 7px 7px;
713 display: inline-block;
713 display: inline-block;
714 vertical-align: top;
714 vertical-align: top;
715 background: inherit;
715 background: inherit;
716 position: absolute;
716 position: absolute;
717 right: 0;
717 right: 0;
718 top: 9px;
718 top: 9px;
719 }
719 }
720
720
721 .main_filter_input_box {
721 .main_filter_input_box {
722 display: inline-block;
722 display: inline-block;
723
723
724 .searchItems {
724 .searchItems {
725 display:flex;
725 display:flex;
726 background: @black;
726 background: @black;
727 padding: 0px;
727 padding: 0px;
728 border-radius: 3px;
728 border-radius: 3px;
729 border: 1px solid @black;
729 border: 1px solid @black;
730
730
731 a {
731 a {
732 border: none !important;
732 border: none !important;
733 }
733 }
734 }
734 }
735
735
736 .searchTag {
736 .searchTag {
737 line-height: 28px;
737 line-height: 28px;
738 padding: 0 5px;
738 padding: 0 5px;
739
739
740 .tag {
740 .tag {
741 color: @grey5;
741 color: @grey5;
742 border-color: @grey2;
742 border-color: @grey2;
743 background: @grey1;
743 background: @grey1;
744 }
744 }
745 }
745 }
746
746
747 .searchTagFilter {
747 .searchTagFilter {
748 background-color: @black !important;
748 background-color: @black !important;
749 margin-right: 0;
749 margin-right: 0;
750 }
750 }
751
751
752 .searchTagHelp {
752 .searchTagHelp {
753 background-color: @grey1 !important;
753 background-color: @grey1 !important;
754 margin: 0;
754 margin: 0;
755 }
755 }
756 .searchTagHelp:hover {
756 .searchTagHelp:hover {
757 background-color: @grey1 !important;
757 background-color: @grey1 !important;
758 }
758 }
759 .searchTagInput {
759 .searchTagInput {
760 background-color: @grey1 !important;
760 background-color: @grey1 !important;
761 margin-right: 0;
761 margin-right: 0;
762 }
762 }
763 }
763 }
764
764
765 .main_filter_box {
765 .main_filter_box {
766 margin: 9px 0 0 0;
766 margin: 9px 0 0 0;
767 }
767 }
768
768
769 #main_filter_help {
769 #main_filter_help {
770 background: @grey1;
770 background: @grey1;
771 border: 1px solid black;
771 border: 1px solid black;
772 position: absolute;
772 position: absolute;
773 white-space: pre;
773 white-space: pre;
774 z-index: 9999;
774 z-index: 9999;
775 color: @nav-grey;
775 color: @nav-grey;
776 padding: 0 10px;
776 padding: 0 10px;
777 }
777 }
778
778
779 input {
779 input {
780
780
781 &.main_filter_input {
781 &.main_filter_input {
782 padding: 5px 10px;
782 padding: 5px 10px;
783 min-width: 340px;
783 min-width: 340px;
784 color: @grey7;
784 color: @grey7;
785 background: @black;
785 background: @black;
786 min-height: 18px;
786 min-height: 18px;
787 border: 0;
787 border: 0;
788
788
789 &:active {
789 &:active {
790 color: @grey2 !important;
790 color: @grey2 !important;
791 background: white !important;
791 background: white !important;
792 }
792 }
793 &:focus {
793 &:focus {
794 color: @grey2 !important;
794 color: @grey2 !important;
795 background: white !important;
795 background: white !important;
796 }
796 }
797 }
797 }
798 }
798 }
799
799
800
800
801
801
802 .main_filter_input::placeholder {
802 .main_filter_input::placeholder {
803 color: @nav-grey;
803 color: @nav-grey;
804 opacity: 1;
804 opacity: 1;
805 }
805 }
806
806
807 .notice-box {
807 .notice-box {
808 display:block !important;
808 display:block !important;
809 padding: 9px 0 !important;
809 padding: 9px 0 !important;
810 }
810 }
811
811
812 .menulabel-notice {
812 .menulabel-notice {
813 border: 1px solid @color5;
813 border: 1px solid @color5;
814 padding:7px 10px;
814 padding:7px 10px;
815 color: @color5;
815 color: @color5;
816 }
816 }
General Comments 0
You need to be logged in to leave comments. Login now