slitaz-forge annotate pkgs/style/slitaz.css @ rev 662

tank: include sup-demo package on up-scn
author Christophe Lincoln <pankso@slitaz.org>
date Fri Feb 24 08:53:29 2017 +0100 (2017-02-24)
parents c890b7f0723e
children
rev   line source
al@261 1 /*
al@605 2 CSS style for SliTaz Network - (C) 2015 SliTaz GNU/Linux
al@261 3 */
al@261 4
al@261 5 html {
al@605 6 min-height: 102%;
al@605 7 }
al@605 8 body {
al@605 9 height: 100%;
al@605 10 margin: 0;
al@605 11 box-sizing: border-box;
al@605 12 color: #222;
al@605 13 background: #FFF;
al@605 14 font-size: 90%;
al@605 15 font-family: Arimo, Ubuntu, "Droid Sans", "DejaVu Sans", FreeSans, "Liberation Sans", sans-serif;
al@605 16 -moz-hyphens: auto; -epub-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;
al@605 17 }
al@605 18 code, pre, samp, kbd {
al@605 19 color: #000;
al@605 20 background-color: rgba(0, 0, 0, .05);
al@605 21 font-size: 0.9rem;
al@605 22 }
al@605 23 a {
al@605 24 text-decoration: none;
al@605 25 color: #215090;
al@605 26 }
al@605 27 a:hover {
al@605 28 text-decoration: underline;
al@605 29 }
al@605 30 img {
al@605 31 border: 0 none;
al@605 32 vertical-align: middle;
al@605 33 }
al@605 34 .large {
al@605 35 overflow-x: auto;
al@605 36 }
al@605 37 h2 {
al@605 38 color: #444;
al@605 39 font-size: 22px;
al@605 40 font-weight: 300;
al@605 41 margin: 18px auto 6px;
al@605 42 border-bottom: 1px solid #CCC;
al@605 43 }
al@605 44 h3 {
al@605 45 color: #193;
al@605 46 font-size: 19px;
al@605 47 font-weight: 300;
al@605 48 margin: 12px auto 0;
al@605 49 line-height: 1;
al@605 50 }
al@605 51 pre {
al@605 52 background-color: #F8F8F8;
al@605 53 border: 1px solid #DDD;
al@605 54 padding: 10px;
al@605 55 white-space: pre-wrap;
al@605 56 overflow-x: auto;
al@605 57 line-height: 1;
al@605 58 }
al@605 59 .hard {
al@605 60 white-space: pre;
al@605 61 resize: both;
al@605 62 }
al@605 63 .scroll {
al@605 64 max-height: 40ex;
al@261 65 }
al@261 66
al@605 67
al@605 68
al@605 69
al@605 70 /* Page header */
al@605 71
al@605 72 body > header {
al@605 73 display: block;
al@605 74 background: #444;
al@605 75 text-align: justify;
al@605 76 line-height: 0;
al@605 77 box-shadow: 0 -8px 8px #333 inset;
al@261 78 }
al@605 79 h1 {
al@605 80 display: inline-block;
al@605 81 margin: auto 0;
al@605 82 height: 40px;
al@605 83 white-space: nowrap;
al@605 84 vertical-align: middle;
al@261 85 }
al@605 86 h1::before {
al@605 87 display: inline-block;
al@605 88 content: url(logo.png);
al@605 89 vertical-align: middle;
al@261 90 }
al@605 91 h1 a {
al@605 92 color: #FFF;
al@261 93 font-size: 20px;
al@261 94 font-style: italic;
al@261 95 }
al@605 96 body > header::before, body > header::after, .block > div::before, .block > div::after {
al@605 97 display: inline-block;
al@605 98 width: 100%;
al@605 99 height: 0;
al@605 100 visibility: hidden;
al@605 101 overflow: hidden;
al@605 102 content: '';
al@605 103 }
al@605 104 .network {
al@605 105 display: inline-block;
al@605 106 text-align: left;
al@605 107 vertical-align: middle;
al@605 108 font-size: 12px;
al@605 109 line-height: normal;
al@605 110 color: #999;
al@605 111 }
al@605 112 .network a {
al@605 113 display: inline-block;
al@605 114 padding: 0 6px;
al@605 115 vertical-align: middle;
al@605 116 color: #FFF;
al@605 117 }
al@605 118 .home::before {
al@605 119 content: url(home.png);
al@261 120 }
al@261 121
al@261 122
al@605 123
al@605 124
al@605 125 /* Info block and navigation */
al@605 126
al@605 127 .block {
al@605 128 padding: 6px;
al@605 129 background: #CCC;
al@605 130 border-bottom: 1px solid #AAA;
al@605 131 }
al@605 132 .block > div {
al@605 133 max-width: 700px;
al@605 134 margin: 0 auto;
al@605 135 text-align: justify;
al@605 136 line-height: 0;
al@605 137 }
al@605 138 .block_info {
al@605 139 padding: 6px 12px 0 0;
al@605 140 line-height: normal;
al@605 141 width: 60%;
al@605 142 }
al@605 143 .block_info input {
al@605 144 width: 100%;
al@605 145 }
al@605 146 .block header {
al@605 147 font-weight: 400;
al@605 148 font-size: 18px;
al@605 149 line-height: 18px;
al@605 150 }
al@605 151 .block_info p {
al@605 152 margin: 7px 0;
al@605 153 padding: 0;
al@605 154 text-align: justify;
al@605 155 }
al@605 156 nav {
al@605 157 background: #666;
al@605 158 color: #FFF;
al@605 159 padding: 6px;
al@605 160 line-height: normal;
al@605 161 }
al@605 162 nav a {
al@605 163 white-space: nowrap;
al@605 164 color: #FFF;
al@605 165 }
al@605 166 nav header img {
al@605 167 margin: 0 4px 0 0;
al@605 168 padding: 0;
al@605 169 }
al@605 170 nav, .block_info {
al@605 171 display: inline-block;
al@605 172 vertical-align: top;
al@261 173 }
al@261 174
al@261 175
al@605 176
al@605 177
al@605 178 /* Languages selector */
al@605 179
al@605 180 .lang {
al@605 181 margin: 0;
al@605 182 text-align: right;
al@605 183 padding: 6px;
al@605 184 font-size: 0.9rem;
al@605 185 }
al@605 186 .lang a {
al@605 187 padding: 0 2px;
al@605 188 }
al@605 189 [dir="rtl"] .lang {
al@605 190 text-align: left;
al@261 191 }
al@261 192
al@261 193
al@261 194
al@605 195 /* Main content block */
al@605 196
al@605 197 main {
al@605 198 display: block;
al@605 199 max-width: 700px;
al@605 200 margin: 6px auto;
al@605 201 padding: 0 6px;
al@605 202 text-align: justify;
al@605 203 line-height: 1.5rem;
al@605 204 }
al@605 205 p, ul, ol, h2, h3, pre, table {
al@605 206 max-width: 700px;
al@605 207 }
al@605 208 p, ul, ol, pre, table {
al@605 209 margin: 6px auto;
al@605 210 }
al@605 211 p, ul, ol {
al@605 212 display: block;
al@605 213 }
al@605 214 ul, ol, dd {
al@605 215 padding: 0 2ex 0 4ex;
al@605 216 }
al@605 217 ul ul, ol ol, ul ol, ol ul {
al@605 218 margin: 0;
al@261 219 }
al@261 220
al@605 221
al@605 222
al@605 223
al@605 224 /* Countries flags */
al@605 225
al@605 226 .br::before { content: url(BR.png); }
al@605 227 .ch::before { content: url(CH.png); }
al@605 228 .cn::before { content: url(CN.png); }
al@605 229 .de::before { content: url(DE.png); }
al@605 230 .es::before { content: url(ES.png); }
al@605 231 .fr::before { content: url(FR.png); }
al@605 232 .ir::before { content: url(IR.png); }
al@605 233 .it::before { content: url(IT.png); }
al@605 234 .pl::before { content: url(PL.png); }
al@605 235 .ru::before { content: url(RU.png); }
al@605 236 .se::before { content: url(SE.png); }
al@605 237 .tw::before { content: url(TW.png); }
al@605 238 .ua::before { content: url(UA.png); }
al@605 239 .us::before { content: url(US.png); }
al@605 240
al@605 241
al@605 242
al@605 243
al@605 244 /* SliTaz mirrors list */
al@605 245
al@605 246 .mirrors {
al@605 247 padding: 6px;
al@605 248 text-align: center;
al@605 249 background: #F1F1F1;
al@605 250 border-bottom: 1px solid #DDD;
al@605 251 }
al@605 252 .mirrors a, .mirrors a::before {
al@605 253 display: inline-block;
al@605 254 padding: 0 3px;
al@605 255 }
al@605 256 .mirrors a::before {
al@605 257 vertical-align: -4px;
al@261 258 }
al@261 259
al@605 260
al@605 261
al@605 262
al@605 263 /* Table */
al@605 264
al@605 265 table {
al@605 266 background-color: #F8F8F8;
al@605 267 border: 1px solid #BBB;
al@605 268 width: 100%;
al@605 269 margin-bottom: 20px;
al@605 270 padding: 0;
al@605 271 border-spacing: 0;
al@605 272 line-height: 1;
al@605 273 }
al@605 274 caption {
al@605 275 caption-side: bottom;
al@605 276 text-align: left;
al@605 277 padding: 6px 0;
al@605 278 }
al@605 279 thead tr{
al@605 280 background-color: #DDD;
al@605 281 }
al@605 282 thead th {
al@605 283 border-bottom: 1px solid #BBB;
al@605 284 }
al@605 285 td {
al@605 286 text-align: left;
al@605 287 }
al@605 288 td, th {
al@605 289 padding: 4px;
al@605 290 }
al@605 291 /* Zebra stripes */
al@605 292 tbody tr:nth-child(odd) {
al@605 293 background-color: #FFF;
al@605 294 }
al@605 295 tbody tr:nth-child(even) {
al@605 296 background-color: #EEE;
al@605 297 }
al@605 298 /* Mirror file list table */
al@605 299 .list td:nth-child(1) {
al@605 300 vertical-align: middle;
al@605 301 }
al@605 302 .list td:nth-child(1)::before {
al@605 303 display: inline-block;
al@605 304 vertical-align: middle;
al@605 305 padding-right: 3px;
al@605 306 }
al@605 307 .list th:nth-child(3), .list td:nth-child(3) {
al@605 308 text-align: right;
al@605 309 }
al@605 310 .first {
al@605 311 width: 1%;
al@605 312 white-space: nowrap;
al@261 313 }
al@261 314
al@261 315
al@261 316
al@605 317 /* Misc blocks */
al@261 318
al@261 319 .news li {
al@261 320 list-style-type: square;
al@261 321 border-bottom: 1px dotted #BEBEBE;
al@261 322 margin-left: -25px;
al@605 323 padding: 4px 0;
al@261 324 }
al@605 325 .twitter {
al@605 326 margin: 20px 0;
al@605 327 }
al@605 328 .gallery {
al@605 329 text-align: center;
al@605 330 }
al@605 331 .sponsor {
al@261 332 font-size: 90%;
al@605 333 background-color: #FBFBFB;
al@605 334 border: 2px solid #DDD;
al@261 335 width: 200px;
al@261 336 height: 160px;
al@261 337 float: right;
al@261 338 text-align: center;
al@605 339 margin: 10px 0 20px 20px;
al@605 340 }
al@605 341 .right_box {
al@605 342 width: 48%;
al@605 343 float: right;
al@605 344 }
al@605 345 .left_box {
al@605 346 width: 48%;
al@605 347 float: left;
al@605 348 }
al@605 349 .box {
al@605 350 margin: 6px 0;
al@605 351 padding: 6px;
al@605 352 background: #F4F4F4;
al@605 353 border: 1px solid #DDD;
al@605 354 }
al@605 355 .searchbox {
al@605 356 margin: 20px 80px;
al@605 357 padding: 12px;
al@605 358 background: #F8F8F8;
al@605 359 text-align: center;
al@605 360 border: 1px solid #DDD;
al@605 361 }
al@605 362 .activity {
al@605 363 margin: 0 0 20px;
al@605 364 background: #EFEFEF;
al@605 365 padding: 5px 2px 0;
al@605 366 border: 1px solid #DDD;
al@605 367 }
al@605 368 .activity div {
al@605 369 padding: 5px 10px;
al@605 370 background: #FFF;
al@605 371 margin-top: 5px;
al@605 372 }
al@605 373 .activity p {
al@605 374 margin: 0;
al@605 375 padding: 5px 10px;
al@605 376 font-weight: 700;
al@605 377 }
al@605 378 .activity ul {
al@605 379 list-style-type: none;
al@605 380 margin: 4px 0;
al@605 381 padding: 0 4px;
al@605 382 line-height: 150%;
al@605 383 }
al@605 384 .activity_more {
al@605 385 text-align: right;
al@605 386 }
al@605 387 .activity_more a {
al@605 388 font-weight: 400;
al@605 389 color: #000;
al@605 390 padding: 0 4px;
al@605 391 }
al@605 392 .activity span, .news span {
al@605 393 color: #666;
al@605 394 font-size: 11px;
al@605 395 font-weight: 400;
al@261 396 }
al@261 397
al@261 398
al@261 399
al@261 400 /* Round corner */
al@261 401
al@605 402 nav, pre, textarea, fieldset, .box, .searchbox, .activity, .activity div, .twitter, .sponsor {
al@261 403 -moz-border-radius: 4px;
al@261 404 -webkit-border-radius: 4px;
al@261 405 border-radius: 4px;
al@261 406 }
al@605 407 fieldset {
al@605 408 border: 1px solid #999;
al@605 409 max-width: 100%;
al@261 410 }
al@261 411
al@261 412
al@605 413
al@605 414
al@605 415 /* Page footer */
al@605 416
al@605 417 body > footer {
al@605 418 background: #F1F1F1;
al@605 419 text-align: center;
al@605 420 border-top: 1px solid #CCC;
al@605 421 padding: 6px;
al@605 422 color: #666;
al@605 423 clear: both;
al@605 424 box-shadow: 0 4px 8px #CCC inset;
al@605 425 }
al@605 426 body > footer div {
al@605 427 margin: 12px;
al@605 428 }
al@605 429 .year:after {
al@605 430 content: "2015";
al@261 431 }
al@261 432
al@261 433
al@605 434
al@605 435
al@605 436 /* Mimetype icons */
al@605 437
al@605 438 .x-bzip::before { content: url(application-x-bzip.png); }
al@605 439 .x-gzip::before { content: url(application-x-gzip.png); }
al@605 440 .plain::before { content: url(text-plain.png); }
al@605 441 .x-bittorrent::before { content: url(application-x-bittorrent.png); }
al@605 442 .octet-stream::before { content: url(application-octet-stream.png); }
al@605 443 .jpeg::before { content: url(image-jpeg.png); }
al@605 444 .png::before { content: url(image-png.png); }
al@605 445 .javascript::before { content: url(text-x-javascript.png); }
al@605 446 .css::before { content: url(text-css.png); }
al@605 447 .dir::before { content: url(folder.png); }
al@605 448 .up::before { content: url(go-up.png); }
al@605 449 .zip::before { content: url(application-zip.png); }
al@605 450 .iso::before { content: url(application-x-cd-image.png); }
al@605 451 .krn::before { content: url(application-x-executable.png); }
al@605 452 .exe::before { content: url(application-x-ms-dos-executable.png); }
al@605 453 .rme::before { content: url(text-x-readme.png); }
al@605 454 .log::before { content: url(text-x-changelog.png); }
al@605 455 .x-flavor::before { content: url(slitaz-icon.png); }
al@605 456 .pkg::before { content: url(package-x-generic.png); }
al@605 457 .server::before { content: url(network-server.png); }
al@605 458 .locale::before { content: url(preferences-desktop-locale.png); display: inline-block; vertical-align: middle; }
al@605 459 .locale2::before { content: url(preferences-desktop-locale2.png); display: inline-block; vertical-align: middle; }
al@605 460
al@605 461
al@605 462
al@605 463
al@605 464 /* Responsive rules */
al@605 465
al@605 466 /* More space for touchscreen links */
al@605 467
al@605 468 .touch td, .touch th {
al@605 469 padding: 6px;
al@605 470 }
al@605 471 .touch .network a, .touch nav a, .touch .mirrors a, .touch footer a,
al@605 472 .touch .info a {
al@605 473 display: inline-block;
al@605 474 padding: 6px;
al@261 475 }
al@261 476
al@605 477 /* Full width for block_info and navigation */
al@261 478
al@605 479 @media (max-width: 510px) {
al@605 480 .block_info, nav {
al@605 481 display: block;
al@605 482 width: inherit;
al@605 483 max-width: 100%;
al@605 484 }
al@605 485 .block_info {
al@605 486 padding: 6px;
al@605 487 }
al@261 488 }