Skip to content

Commit 7809ec7

Browse files
AlecRustAlecRust
authored
Collapse main menu on mobile (hestiacp#3104)
1 parent f48bed1 commit 7809ec7

File tree

8 files changed

+253
-161
lines changed

8 files changed

+253
-161
lines changed

‎web/css/src/themes/dark.css‎

Lines changed: 38 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -118,35 +118,29 @@ strong {
118118
color: #e7e7e7;
119119
}
120120

121-
/* Alerts
121+
/* Main menu
122122
========================================================================== */
123123

124-
.alert-danger {
125-
background-color: #d13535;
124+
.main-menu-toggle {
125+
&:hover {
126+
& .main-menu-toggle-label {
127+
color: #d7d7d7;
128+
}
129+
}
126130

127131
& .fas {
128-
color: #d13535;
132+
color: #d7d7d7;
129133
}
130134
}
131135

132-
/* Cards
133-
========================================================================== */
134-
135-
.card {
136-
background: #454545;
137-
color: #fafafa;
138-
text-shadow: 0 1px rgb(0 0 0 / 95%) !important;
139-
border-color: #606060;
140-
box-shadow: 0 1px 4px rgb(0 0 0 / 20%), inset 0 0 60px rgb(0 0 0 / 25%);
136+
.main-menu-toggle-label {
137+
color: #bcbcbc;
141138
}
142139

143-
.card-title {
144-
color: #fafafa;
140+
.main-menu-list {
141+
border-top-color: #454545;
145142
}
146143

147-
/* Main menu
148-
========================================================================== */
149-
150144
.main-menu-item-link {
151145
&:hover {
152146
& .main-menu-item-label {
@@ -186,6 +180,32 @@ strong {
186180
}
187181
}
188182

183+
/* Alerts
184+
========================================================================== */
185+
186+
.alert-danger {
187+
background-color: #d13535;
188+
189+
& .fas {
190+
color: #d13535;
191+
}
192+
}
193+
194+
/* Cards
195+
========================================================================== */
196+
197+
.card {
198+
background: #454545;
199+
color: #fafafa;
200+
text-shadow: 0 1px rgb(0 0 0 / 95%) !important;
201+
border-color: #606060;
202+
box-shadow: 0 1px 4px rgb(0 0 0 / 20%), inset 0 0 60px rgb(0 0 0 / 25%);
203+
}
204+
205+
.card-title {
206+
color: #fafafa;
207+
}
208+
189209
.toolbar {
190210
border-color: #454545;
191211
background-color: #282828;

‎web/css/src/themes/default.css‎

Lines changed: 147 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -374,6 +374,153 @@
374374
}
375375
}
376376

377+
/* Main menu
378+
========================================================================== */
379+
380+
.main-menu {
381+
@media (--viewport-medium) {
382+
padding-top: 10px;
383+
}
384+
}
385+
386+
.main-menu-toggle {
387+
border: 0;
388+
background-color: transparent;
389+
padding: 10px;
390+
display: block;
391+
width: 100%;
392+
393+
&:hover {
394+
background-color: rgb(0 0 0 / 5%);
395+
396+
& .main-menu-toggle-label {
397+
color: #c36;
398+
}
399+
}
400+
401+
& .fas {
402+
color: #999;
403+
margin-right: 5px;
404+
}
405+
406+
@media (--viewport-small) {
407+
display: none;
408+
}
409+
}
410+
411+
.main-menu-toggle-label {
412+
color: #5b5b5b;
413+
font-weight: 600;
414+
}
415+
416+
.main-menu-list {
417+
display: none;
418+
border-top: 1px solid #ddd;
419+
420+
@media (--viewport-small) {
421+
border-top: 0;
422+
display: flex !important; /* NOTE: Overrides inline style set by JS */
423+
justify-content: space-evenly;
424+
}
425+
}
426+
427+
.main-menu-item {
428+
@media (--viewport-small) {
429+
flex-grow: 1;
430+
}
431+
432+
@media (--viewport-medium) {
433+
flex-grow: 0;
434+
display: flex;
435+
436+
&.focus {
437+
& .main-menu-item-link {
438+
border-bottom-color: #5edad0;
439+
}
440+
441+
& .main-menu-item-label {
442+
color: #5edad0;
443+
}
444+
}
445+
}
446+
}
447+
448+
.main-menu-item-link {
449+
display: block;
450+
text-align: center;
451+
padding: 10px;
452+
453+
&:hover {
454+
background-color: rgb(0 0 0 / 5%);
455+
456+
& .main-menu-item-label {
457+
color: #c36;
458+
}
459+
}
460+
461+
&.active {
462+
& .main-menu-item-label {
463+
color: #c36;
464+
465+
& .fas {
466+
color: #c36;
467+
}
468+
}
469+
}
470+
471+
@media (--viewport-small) {
472+
padding-top: 20px;
473+
padding-bottom: 20px;
474+
}
475+
476+
@media (--viewport-medium) {
477+
border-bottom: 4px solid #fff;
478+
479+
&:hover,
480+
&.active {
481+
background-color: transparent;
482+
border-bottom-color: #c36;
483+
transition: 0.3s;
484+
}
485+
}
486+
487+
@media (--viewport-large) {
488+
padding-left: 30px;
489+
padding-right: 30px;
490+
}
491+
}
492+
493+
.main-menu-item-label {
494+
color: #5b5b5b;
495+
font-weight: 600;
496+
497+
& .fas {
498+
color: #999;
499+
margin-left: 5px;
500+
}
501+
502+
@media (--viewport-medium) {
503+
font-size: 1rem;
504+
505+
& .fas {
506+
margin-left: 10px;
507+
}
508+
}
509+
}
510+
511+
.main-menu-stats {
512+
display: none;
513+
514+
@media (--viewport-medium) {
515+
display: block;
516+
font-size: 0.75rem;
517+
text-transform: lowercase;
518+
line-height: 1.8;
519+
padding-top: 10px;
520+
padding-bottom: 10px;
521+
}
522+
}
523+
377524
/* Alerts
378525
========================================================================== */
379526

@@ -507,102 +654,6 @@
507654
}
508655
}
509656

510-
/* Main menu
511-
========================================================================== */
512-
513-
.main-menu {
514-
margin-top: 10px;
515-
margin-bottom: 10px;
516-
517-
@media (--viewport-medium) {
518-
margin-top: 20px;
519-
margin-bottom: 0;
520-
}
521-
}
522-
523-
.main-menu-list {
524-
@media (--viewport-medium) {
525-
display: flex;
526-
justify-content: space-evenly;
527-
}
528-
}
529-
530-
.main-menu-item {
531-
@media (--viewport-medium) {
532-
display: flex;
533-
534-
&.focus {
535-
& .main-menu-item-link {
536-
border-bottom-color: #5edad0;
537-
}
538-
539-
& .main-menu-item-label {
540-
color: #5edad0;
541-
}
542-
}
543-
}
544-
}
545-
546-
.main-menu-item-link {
547-
display: block;
548-
text-align: center;
549-
padding: 10px;
550-
551-
&:hover {
552-
& .main-menu-item-label {
553-
color: #c36;
554-
}
555-
}
556-
557-
&.active {
558-
& .main-menu-item-label {
559-
color: #c36;
560-
561-
& .fas {
562-
color: #c36;
563-
}
564-
}
565-
}
566-
567-
@media (--viewport-medium) {
568-
border-bottom: 4px solid #fff;
569-
570-
&:hover,
571-
&.active {
572-
border-bottom-color: #c36;
573-
transition: 0.3s;
574-
}
575-
}
576-
577-
@media (--viewport-large) {
578-
padding-left: 30px;
579-
padding-right: 30px;
580-
}
581-
}
582-
583-
.main-menu-item-label {
584-
color: #5b5b5b;
585-
font-weight: 600;
586-
font-size: 1rem;
587-
588-
& .fas {
589-
color: #999;
590-
}
591-
}
592-
593-
.main-menu-stats {
594-
display: none;
595-
596-
@media (--viewport-medium) {
597-
display: block;
598-
font-size: 0.75rem;
599-
text-transform: lowercase;
600-
line-height: 1.8;
601-
padding-top: 10px;
602-
padding-bottom: 20px;
603-
}
604-
}
605-
606657
.toolbar {
607658
background-color: #fff;
608659
border-top: 1px solid #ddd;

0 commit comments

Comments
 (0)