slitaz-configs annotate rootfs/usr/share/webhome/app/design/theme.css @ rev 277

Tiny edits
author Aleksej Bobylev <al.bobylev@gmail.com>
date Wed Mar 30 01:30:27 2016 +0300 (2016-03-30)
parents 29b1d93039e2
children d8fd29500d7f
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 }