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