mobile.css (6338B)
1 /* Pagination Buttons ------------------------------------------------------- */
2
3 /* Set Container to Flex */
4 .ui.text.container .ui.secondary.pagination.menu
5 {
6 display: flex;
7 flex-direction: row;
8 font-size: 115%;
9 }
10 /* Buttons flex across all width */
11 .ui.text.container .ui.secondary.pagination.menu .item
12 {
13 flex: 50%;
14
15 }
16 /* Icons in buttons fill width */
17 .ui.text.container .ui.secondary.pagination.menu .item .icon
18 {
19 width: 100%;
20 }
21
22 /* Main Menu ---------------------------------------------------------------- */
23
24 :root
25 {
26 /* --homeicn: '\2302'; */
27 --homeicn: url("icons/home.svg");
28 /* --srchicn: '\2315'; */
29 --srchicn: url("icons/search.svg");
30 /* --evryicn: '\2394'; */
31 --evryicn: url("icons/globe.svg");
32 /* --advnicn: '\2388'; */
33 --advnicn: url("icons/settings.svg");
34 /* --exiticn: '\2300'; */
35 }
36
37 @media screen and (max-width: 576px) {
38
39 /* Remove text labels from menu */
40 nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item,
41 nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > div.compact.menu > div.ui.simple.dropdown.item
42 {
43 font-size: 0px;
44 }
45
46 /* Set navigation bar set inline-flex object */
47 nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container
48 {
49 display: inline-flex;
50 }
51
52 /* Home Button */
53 nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item[href^="/actors"]
54 {
55 flex: 20%;
56 text-align: center;
57 }
58 nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item[href="/"]
59 {
60 flex: 20%;
61 text-align: left;
62 margin-left: 12px !important;
63 }
64
65 nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item[href^="/actors"]::after,
66 nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item[href="/"]::after
67 {
68 content: var(--homeicn);
69 filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(347deg) brightness(110%) contrast(101%);
70 width: 100%;
71 }
72
73 /* Search Button */
74 nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item[href^="/search"]
75 {
76 flex: 20%;
77 text-align: center;
78 }
79 nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item[href^="/search"]::after
80 {
81 content: var(--srchicn);
82 filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(347deg) brightness(110%) contrast(101%);
83 width: 100%;
84 }
85
86 /* Everything Button */
87 nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item[href^="/everything"]
88 {
89 flex: 20%;
90 text-align: center;
91 }
92 nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item[href^="/everything"]::after
93 {
94 content: var(--evryicn);
95 filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(347deg) brightness(110%) contrast(101%);
96 width: 100%;
97 }
98
99 /* Advanced Button */
100 nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > div.compact.menu,
101 nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > div.compact.menu div.ui.simple.dropdown.item
102 {
103 flex: 20%;
104 text-align: center;
105 }
106 nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > div.compact.menu div.ui.simple.dropdown.item
107 {
108 width: 100%
109 }
110 nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > div.compact.menu div.ui.simple.dropdown.item::after
111 {
112 content: var(--advnicn);
113 filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(347deg) brightness(110%) contrast(101%);
114 width: 100%;
115 }
116
117 /* Advanced menu subtree should be initial size */
118 nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > div.compact.menu > div.ui.simple.dropdown.item > div.menu
119 {
120 font-size: initial;
121 }
122
123 /* Logout Button */
124 nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > div.right.menu > form.form > div.ui.action.input > input.link.item
125 {
126 font-size: 90%;
127 flex: 20%;
128 }
129
130 }
131
132 /* Secondary Menu ----------------------------------------------------------- */
133
134 @media screen and (max-width: 576px) {
135
136 /* Animation for Hide and Unhide */
137 @keyframes HideAndUnhide {
138 0% {
139 opacity: 1;
140 }
141 1% {
142 opacity: 0;
143 visibility: invisible;
144 }
145 90% {
146 opacity: 0;
147 visibility: invisible;
148 }
149 100% {
150 opacity: 1;
151 visibility: visible;
152 }
153 }
154
155 /* Menu Container should be a block item */
156 .ui.text.container .ui.stackable.secondary.menu
157 {
158 display: block;
159 margin-top: 1em;
160 margin-bottom: 1.5em;
161 font-size: 115%;
162 max-height: 0px;
163 transition: max-height 0.3s ease-in-out 0.1s;
164
165 }
166
167 /* Create Menu Label */
168 .ui.text.container .ui.stackable.secondary.menu:before
169 {
170 display: block;
171 content: "\2630 \0020 Timelines";
172 border-radius: 3px;
173 background-color: #2185d0;
174 color: #fff;
175 box-shadow: 0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;
176 margin: 1.5em 0.5em 0.5em 0.5em; /* top, right, bottom, left */
177 padding: 5px;
178 }
179
180 /* Style menu entries */
181 .ui.text.container .ui.stackable.secondary.menu > .item
182 {
183 font-size: initial;
184 width: 100%;
185 margin: 0px !important;
186 }
187
188 /* Hide menu entries by default */
189 /* Do NOT hide the notification wrapper, just the label */
190 .ui.text.container .ui.stackable.secondary.menu > .item:not(.notifications),
191 .ui.text.container .ui.stackable.secondary.menu > .item.notifications > a
192 {
193 visibility: hidden;
194 opacity: 0;
195 transition: opacity 0.3s ease-in-out 0.1s;
196 }
197
198 /* Unhide the notification counter */
199 .ui.text.container .ui.stackable.secondary.menu > .item.notifications > .label
200 {
201 visibility: visible;
202 position: absolute;
203 top: -12.7em; /* Move upwards to Timelines-Label */
204 right: 1em; /* right-align */
205 }
206
207 /* Upon hovering the menu, show its entries */
208 .ui.text.container .ui.stackable.secondary.menu:hover > .item:not(.notifications),
209 .ui.text.container .ui.stackable.secondary.menu:hover > .item.notifications > a
210 {
211 opacity: 1 !important;
212 visibility: visible;
213 position: initial;
214
215 }
216 .ui.text.container .ui.stackable.secondary.menu:hover > .item.notifications > .label
217 {
218 animation: HideAndUnhide 0.5s ease-in-out;
219 position: initial;
220 }
221
222 .ui.text.container .ui.stackable.secondary.menu:hover
223 {
224 max-height: 100% !important;
225 }
226
227 }
228
