slitaz-configs view rootfs/usr/share/webhome/app/design/theme.css @ rev 319

~/.Xdefaults: add xterm utf same as in /root, ~/.xinitrc: LOG=/dev/tty9, ob-menu/menu.xml.in : xcompmgr -a : Use automatic server-side compositing. Faster, but no special effects.
author anonymous
date Sat Nov 07 19:56:54 2020 +0000 (2020-11-07)
parents d8fd29500d7f
children
line source
1 @charset "UTF-8";
2 /* File: theme.css | Layout Design */
3
4 html,body {
5 background:#0D0E0F;
6 color:#AEAFAF;
7 }
8 a {
9 color:#DB4D23;
10 }
11 .header {
12 background:url(img/cover.png) 50% 30% no-repeat;
13 background-size:cover;
14 }
15 .header-bar {
16 color:#DB4D23;
17 margin:0 10px;
18 }
19 .header-bar:after,.menu-list:after {
20 content:"";
21 display:table;
22 width:100%;
23 clear:both;
24 }
25 .header-bar * {
26 line-height:1;
27 }
28 .header-l,.header-r {
29 float:left;
30 font-size:18px;
31 font-weight:bold;
32 width:50%;
33 padding:4px 0;
34 }
35 .header-l p {
36 display:table;
37 margin:0;
38 border-bottom:4px double #000;
39 }
40 .header-r p {
41 text-align:right;
42 padding:12px 0;
43 }
44 .header-r p a {
45 display:inline-table;
46 background:#DB4D23;
47 color:#FFF;
48 font-weight:bold;
49 text-align:center;
50 line-height:2.1em;
51 letter-spacing:4px;
52 width:50px;
53 height:40px;
54 border-radius:4px;
55 }
56 .header-r p a:hover {
57 background:#000;
58 }
59 .header-title {
60 text-align:center;
61 line-height:0;
62 padding:0;
63 }
64 .header-title img {
65 background:#000;
66 padding:10px;
67 margin:0 0 60px 0;
68 border-radius:100%;
69 }
70
71 p.banner {
72 background:RGBA(0,0,0,.8);
73 color:#FFF;
74 width:70%;
75 margin:0 auto;
76 border-left:20px double #DB4D23;
77 }
78
79 /* @search */
80 .search {
81 background:#181818;
82 }
83 .search-box {
84 background:url(img/lupa.png) 0 50% no-repeat;
85 color:#FFF;
86 font-family:"Monospace", monospace;
87 font-size:20px;
88 text-indent:50px;
89 padding:40px;
90 width:90%;
91 margin:0 auto;
92 outline:0;
93 overflow-x:hidden;
94 }
95 .search-box:focus {
96 background:#DB4D23 url(img/duckduckgo.png) 95% 50% no-repeat;
97 color:#FFF;
98 text-indent:0;
99 padding:40px 10px;
100 }
101
102 .footer {
103 padding:4% 0 0 0;
104 }
105 .footer p {
106 color:#555;
107 text-align:center;
108 padding:4px 0;
109 margin:0 auto;
110 }
111
112 /* menu */
113
114 aside.menu,
115 aside.social {
116 position:fixed;
117 top:0;right:0;
118 background:#181818;
119 color:#777;
120 width:100%;
121 height:100%;
122 min-height:100%;
123 overflow-x:hidden;
124 overflow-y:scroll;
125 }
126 aside.menu > .body,
127 aside.social > .body {
128 padding:2% 4%;
129 }
130 aside.menu > .body h1,
131 .advanced-features h2 {
132 color:#FFF;
133 padding:10px;
134 margin-bottom:14px;
135 border-bottom:1px solid #DB4D23;
136 }
137 aside.menu > .body h1 small {
138 display:inline-table;
139 background:#222;
140 font-size:10px;
141 vertical-align:middle;
142 padding:4px 10px;
143 border:1px solid #333;
144 }
145 aside.menu > .body > p.sponsor {
146 background:#000;
147 color:#FFF;
148 padding:20px;
149 border:1px dashed #333;
150 }
151
152 .menu-l,.menu-r {
153 float:left;
154 width:50%;
155 padding:10px 0;
156 }
157 .menu-title {
158 background:#111;
159 margin:0 10px 10px 10px;
160 border:1px dashed #DB4D23;
161 }
162 .menu-items {
163 padding:0;
164 margin:0 11px;
165 }
166 .menu-items li {
167 list-style-type:none;
168 padding:0;
169 }
170 .menu-items li a {
171 display:block;
172 text-align:left;
173 padding:12px 4px;
174 border-bottom:1px solid #000;
175 }
176 .menu-items li a small {
177 display:block;
178 color:#CCC;
179 }
180 .menu-items li a:hover small {
181 color:#000;
182 padding-left:20px;
183 }
184 .menu-items li a:focus,
185 .menu-items li a:hover {
186 background:#DB4D23;
187 color:#FFF;
188 }
189 .menu-items li a:focus:before,
190 .menu-items li a:hover:before {
191 content:"\2771\ ";
192 color:#FFF;
193 margin-right:6px;
194 }
195 .advanced-features {
196 padding:20px;
197 }
198
199 .button {
200 display:inline-table;
201 background:#DB4D23;
202 color:#FFF;
203 padding:8px;
204 }
205 .button:focus,.button:hover {
206 background:#B33E1C;
207 }
208 .closebtn {
209 float:right;
210 background:#DB4D23;
211 color:#FFF;
212 padding:10px;
213 }
214 .closebtn:after {
215 content:" ";
216 display:table;
217 width:100%;
218 clear:both;
219 }
220
221 /* sponsor */
222 aside.sponsor {
223 position:fixed;
224 top:0;left:0;
225 background:#DB4D23;
226 color:#FFF;
227 width:100%;
228 height:100%;
229 min-height:100%;
230 overflow-x:hidden;
231 overflow-y:scroll;
232 }
233 aside.sponsor > .body {
234 padding:2% 4%;
235 }
236 aside.sponsor > .body h2 {
237 color:#F1B3A0;
238 font-size:42px;
239 padding:20px 10px;
240 margin-bottom:14px;
241 border-bottom:1px solid #DB4D23;
242 }
243 aside.sponsor > .body blockquote {
244 font-size:18px;
245 text-align:left;
246 line-height:2;
247 padding:4%;
248 margin:4% auto 8% auto;
249 border:4px dashed #E9714D;
250 border:2px dashed RGBA(0,0,0,.2);
251 }
252 aside.sponsor a {
253 display:inline-table;
254 background:#E27453;
255 color:#FFF;
256 font-size:14px;
257 padding:10px 20px;
258 margin:0 4px;
259 border:1px solid RGBA(255,255,255,.3);
260 }
261 aside.sponsor a:focus,
262 aside.sponsor a:hover {
263 opacity:.8;
264 }
265
266 /* Small Desktop | SliTaz ARM | RPI | Mobile */
267
268 @media all and (max-width:740px){
269 .mobile {
270 display:none;
271 }
272 aside.menu {
273 overflow-x:hidden;
274 overflow-y:scroll;
275 }
276 .menu-l,.menu-r {
277 float:none;
278 width:100%;
279 }
280 [role="button"] {
281 display:block;
282 text-align:left;
283 width:95%;
284 margin:4px auto;
285 }
286 }
287
288 /* @extra */
289 .border {
290 padding:2px 4px;
291 border:1px solid;
292 }
293 .rights {
294 display:table;
295 margin:10px auto 0 auto!important;
296 border-top:1px solid;
297 }
298 .sharelove {
299 color:#FFF;
300 font-size:20px;
301 text-align:left;
302 line-height:1.3em;
303 }
304 .sharelove:before {
305 padding-right:20px;
306 }
307 .sharelove:after {
308 padding-left:20px;
309 }
310 .sharelove:before,.sharelove:after {
311 color:#DB4D23;
312 content:" // ";
313 }