slitaz-forge annotate pkgs/pkgs.css @ rev 629

Tiny edits
author Paul Issott <paul@slitaz.org>
date Tue Oct 04 21:56:45 2016 +0100 (2016-10-04)
parents 401b2efda7ed
children
rev   line source
al@605 1 body {
al@605 2 background: #FBFBFB;
al@605 3 /* url(/lib/bg.png) */
al@605 4 /* word-wrap: break-word; */
al@605 5 }
al@605 6 main {
al@605 7 background: #FFF;
al@605 8 border-radius: 6px;
al@605 9 }
al@605 10 .hidden { display: none; }
al@605 11
al@293 12 /* TABLE */
al@293 13 table {
al@293 14 width: 100%;
al@284 15 border: 1px solid #CCC;
al@293 16 -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
al@293 17 border-spacing: 0;
al@603 18 padding: 0;
al@293 19 }
al@293 20 tr {
al@293 21 margin: 0;
al@284 22 padding: 4px;
al@293 23 }
al@293 24 td {
al@293 25 margin: 0;
al@293 26 padding: 6px;
al@293 27 vertical-align: top;
al@605 28 line-height: 1.3;
al@605 29 }
al@605 30 [dir="rtl"] td {
al@605 31 text-align: right;
al@293 32 }
al@603 33 .first {
al@293 34 width: 1%;
al@293 35 white-space: nowrap;
al@293 36 }
al@618 37 .first img {
al@618 38 width: 32px;
al@618 39 height: 32px;
al@618 40 }
al@605 41 /*.first img:hover {
al@605 42 border: none; border-radius: 4px;
al@605 43 box-shadow: 0 0 1px #888;
al@605 44 }*/
al@603 45 .pre {
al@293 46 padding-left: 2em;
al@293 47 white-space: nowrap;
al@603 48 border-bottom: 1px solid #CCC;
al@293 49 }
al@605 50 .bugs tr:nth-child(even) {
al@605 51 border-bottom: 1px solid #CCC;
al@605 52 }
al@605 53 .list tr:last-child td {
al@605 54 border-bottom: none;
al@605 55 }
al@293 56
al@293 57
al@293 58 /* --- */
al@293 59
al@603 60 .form {
al@293 61 display: table;
al@293 62 table-layout: auto;
al@293 63 width: 100%;
al@293 64 padding: 0;
al@293 65 margin: 0 0 20px 0; /* t r b l */
al@284 66 }
al@284 67
al@293 68 #s_form {
al@293 69 display: table-row;
al@603 70 padding: 6px;
al@293 71 margin: 0;
al@293 72 text-align: center;
al@293 73 }
al@284 74
al@293 75 .small {
al@293 76 white-space: nowrap;
al@293 77 display: table-cell;
al@293 78 width: 10%;
al@293 79 }
al@603 80 select, input, button {
al@603 81 -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
al@603 82 height: 2rem;
al@603 83 min-height: 2rem;
al@603 84 font-size: 1rem;
al@284 85 }
al@293 86 span.stretch {
al@293 87 display: table-cell;
al@293 88 width: 100%;
al@603 89 padding: 0;
al@293 90 margin: 0;
al@284 91 }
al@603 92 #query { width: 100%; }
al@293 93
al@603 94 #ticker {
al@603 95 padding: 12px 0;
al@293 96 }
al@603 97 #ticker img {
al@293 98 float: right;
al@603 99 width: 16px;
al@603 100 height: 16px;
al@603 101 }
al@603 102 #ticker progress {
al@603 103 width: 100%;
al@603 104 box-sizing: border-box;
al@293 105 }
al@293 106
al@293 107 .summary {
al@293 108 text-align: center;
al@293 109 font-style: italic;
al@293 110 }
al@603 111 mark {
al@603 112 background: #FF8;
al@605 113 border: solid #EB7;
al@605 114 border-radius: 4px;
al@605 115 border-width: 1px 0;
al@605 116
al@603 117 }
al@603 118 .err::before {
al@603 119 display: inline-block;
al@603 120 vertical-align: middle;
al@603 121 content: url(icons/dialog-error.png);
al@603 122 padding: 1ex;
al@603 123 }
al@603 124
al@603 125
al@603 126
al@603 127
al@603 128 /* Tags cloud (and other "clouds") */
al@603 129
al@603 130 /* tag - Number of elements */
al@603 131 .tagn {
al@603 132 color: #99F;
al@603 133 font-size: 9pt;
al@603 134 padding-left: 5px;
al@603 135 padding-right: 2px;
al@603 136 }
al@603 137 /* tag - Anchor */
al@605 138 .tagn + a {
al@293 139 font-weight: bold;
al@603 140 text-decoration: none;
al@293 141 }
al@605 142
al@605 143 .tag1 { font-size: 10pt; color: #005E80; /*#222222*/ }
al@605 144 .tag2 { font-size: 11pt; color: #4A5C79; /*#383432*/ }
al@605 145 .tag3 { font-size: 12pt; color: #6F5A71; /*#4E433F*/ }
al@605 146 .tag4 { font-size: 13pt; color: #8A5769; /*#644E46*/ }
al@605 147 .tag5 { font-size: 14pt; color: #A05561; /*#7A5749*/ }
al@605 148 .tag6 { font-size: 15pt; color: #B45357; /*#905C48*/ }
al@605 149 .tag7 { font-size: 16pt; color: #C5504C; /*#A75E43*/ }
al@605 150 .tag8 { font-size: 17pt; color: #D54E40; /*#BD5D39*/ }
al@605 151 .tag9 { font-size: 18pt; color: #E44B31; /*#D3582A*/ }
al@605 152 .tag10{ font-size: 19pt; color: #F2491D; /*#E95117*/ }
al@605 153 .tag11{ font-size: 20pt; color: #FF4600; /*#FF4600*/ }
al@603 154
al@603 155
al@603 156
al@293 157
al@293 158 /* SYNTAX HIGHLIGHTER */
al@293 159 .r-comment { color: #888; }
al@293 160 .r-literal { color: #f35a00; }
al@605 161 .r-var { font-weight: 600; color: #070; }
al@293 162 .r-func { color: #4895DD; }
al@293 163 .r-url { text-decoration: none; }
al@293 164 .r-com, .r-scom { color: #4895DD; font-weight: bold; /*background-color: #cde;*/ }
al@293 165 .r-path { text-decoration: underline; color: brown; }
al@293 166 .r-param { font-weight: bold; color: #444; }
al@603 167
al@603 168
al@603 169
al@603 170
al@603 171 /* Actions icons */
al@603 172
al@619 173 .last { text-align: right; white-space: nowrap; width: 1%; }
al@603 174
al@603 175 .dl, .rc, .co {
al@603 176 height: 16px;
al@603 177 background-repeat: no-repeat; background-position: left top; background-size: contain;
al@603 178 display: inline-block; vertical-align: middle;
al@603 179 white-space: nowrap; overflow: hidden; width: 0;
al@603 180 padding-left: 16px;
al@603 181 font-size: smaller;
al@603 182 /*transition: all 0.3s cubic-bezier(.5, .51, .4, 1) 0s;*/
al@605 183 direction: initial;
al@603 184 }
al@603 185 .dl { background-image: url(icons/a-dl.png); }
al@603 186 .rc { background-image: url(icons/a-rc.png); }
al@603 187 .co { background-image: url(icons/a-co.png); }
al@605 188
al@605 189 .avatar::before { content: url(icons16/authors.png); }
al@605 190 .license::before { content: url(icons16/text-x-copying.png); }
al@605 191 .web::before { content: url(icons16/text-html.png); }
al@605 192 .receipt::before { content: url(icons16/text-x-source.png); }
al@605 193 .dep::before { content: url(icons16/x-dia-diagram.png); }
al@605 194 .description::before { content: url(icons16/text-x-readme.png); }
al@605 195 .bugs::before { content: url(icons16/bug-buddy.png); }
al@605 196 .arch::before { content: url(icons16/jockey.png); }
al@605 197 .category::before { content: url(icons16/applications-graphics.png); }
al@605 198 .file::before { content: url(icons16/multipart-encrypted.png); }
al@605 199 .common::before { content: url(icons16/edit-cut.png); }
al@605 200 .pkgi::before { content: url(icons16/package-install.png); }
al@605 201 .pkgr::before { content: url(icons16/package-remove.png); }
al@605 202 .download::before { content: url(icons16/emblem-downloads.png); }
al@605 203 .files-list::before { content: url(icons16/files-list.png); }
al@605 204 .cooker::before { content: url(icons16/text-x-makefile.png); }
al@605 205 .tag::before { content: url(icons16/easytag.png); }
al@605 206 .pkg::before { content: url(icons16/package-x-generic.png); }
al@605 207
al@605 208 .avatar::before, .license::before, .web::before, .receipt::before, .dep::before,
al@605 209 .description::before, .bugs::before, .arch::before, .category::before, .file::before,
al@605 210 .common::before, .pkgi::before, .pkgr::before, .download::before, .files-list::before,
al@605 211 .cooker::before, .tag::before, .pkg::before {
al@605 212 display: inline-block; vertical-align: middle; padding: 0 0.5ex 0 0; }
al@605 213
al@603 214 @media
al@603 215 (-webkit-min-device-pixel-ratio: 1.5),
al@603 216 (min--moz-device-pixel-ratio: 1.5),
al@603 217 (-o-min-device-pixel-ratio: 3/2),
al@603 218 (min-device-pixel-ratio: 1.5),
al@603 219 (min-resolution: 144dpi),
al@603 220 (min-resolution: 1.5dppx)
al@603 221 {
al@603 222 .dl { background-image: url(icons1.5/a-dl.png); }
al@603 223 .rc { background-image: url(icons1.5/a-rc.png); }
al@603 224 .co { background-image: url(icons1.5/a-co.png); }
al@603 225 }
al@603 226 @media
al@603 227 (-webkit-min-device-pixel-ratio: 2),
al@603 228 (min--moz-device-pixel-ratio: 2),
al@603 229 (-o-min-device-pixel-ratio: 2/1),
al@603 230 (min-device-pixel-ratio: 2),
al@603 231 (min-resolution: 192dpi),
al@603 232 (min-resolution: 2dppx)
al@603 233 {
al@603 234 .dl { background-image: url(icons2/a-dl.png); }
al@603 235 .rc { background-image: url(icons2/a-rc.png); }
al@603 236 .co { background-image: url(icons2/a-co.png); }
al@603 237 }
al@603 238 /*td:hover .dl, td:hover .rc, td:hover .co { width: inherit; }*/
al@603 239
al@603 240
al@603 241
al@603 242 /* Levels for tree */
al@603 243
al@603 244 .l1, .l2, .l3, .l4, .l5, .l6, .l7, .l8 { display: table; }
al@603 245 .l1 { margin-left: 3ex; }
al@603 246 .l2 { margin-left: 6ex; }
al@603 247 .l3 { margin-left: 9ex; }
al@603 248 .l4 { margin-left: 12ex; }
al@603 249 .l5 { margin-left: 15ex; }
al@603 250 .l6 { margin-left: 18ex; }
al@603 251 .l7 { margin-left: 21ex; }
al@603 252 .l8 { margin-left: 24ex; }
al@603 253
al@603 254
al@603 255 footer a+a::before { display: inline-block; content: '• '; color: #E81; }
al@603 256
al@605 257
al@605 258
al@605 259
al@603 260 table.info { position: relative; }
al@603 261
al@603 262 .appImg {
al@603 263 display: inline-block;
al@605 264 position: absolute; top: 0.3rem;
al@603 265 width: 64px; height: 64px;
al@603 266 }
al@605 267 [dir="ltr"] .appImg { right: 0.3rem; }
al@605 268 [dir="rtl"] .appImg { left: 0.3rem; }
al@605 269
al@605 270 .info a { display: inline-block; }
al@605 271 .spkg img { width: 16px; height: 16px; padding: 0 0.5ex 0 0;}
al@603 272
al@603 273 .desc {
al@603 274 -moz-border-radius: 4px;
al@603 275 -webkit-border-radius: 4px;
al@603 276 border-radius: 4px;
al@603 277 border: 1px solid #CCC;
al@603 278 padding: 6px;
al@603 279 }
al@603 280
al@603 281 .lang select { vertical-align: middle; }
al@603 282
al@605 283 .center { text-align: center; }
al@605 284
al@605 285
al@605 286 /* Conditional blocks */
al@605 287
al@605 288 /* Show on Small Screens - hide by default */
al@605 289 .sssi, .sssb, .sssc { display: none; }
al@605 290 /* Hide on Small Screens - show by default */
al@605 291 .hssi { display: inline-block; } .hssb { display: block; } .hssc { display: table-cell; }
al@605 292
al@605 293 @media (max-width: 480px) {
al@605 294 .sssi { display: inline-block; } .sssb { display: block; }
al@605 295 .hssi, .hssb, .hssc { display: none; }
al@605 296 }
al@605 297
al@603 298
al@603 299 /* Responsive */
al@603 300
al@603 301 @media (max-width: 480px) {
al@603 302 .form, #s_form, .small, .stretch {
al@603 303 display: block;
al@603 304 width: inherit;
al@603 305 max-width: 100%;
al@603 306 }
al@603 307 .list td:nth-child(2) {
al@603 308 display: inline-block;
al@603 309 clear: both;
al@603 310 }
al@603 311 .list td:nth-child(3) {
al@603 312 display: block;
al@603 313 text-align: right;
al@603 314 width: inherit;
al@603 315 font-size: 11px;
al@603 316 border-top: 1px dotted #CCC;
al@603 317 }
al@603 318 .small, .stretch, form select, input, button {
al@603 319 display: block !important;
al@603 320 -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
al@603 321 width: 100%;
al@603 322 height: 2rem;
al@603 323 min-height: 2rem;
al@603 324 margin: 6px 0;
al@603 325 font-size: 1rem;
al@603 326 }
al@603 327 .dl, .rc, .co {
al@603 328 white-space: normal; width: inherit;
al@603 329 }
al@605 330 .pre {
al@605 331 white-space: normal;
al@605 332 }
al@603 333 }
al@603 334
al@603 335 @media (max-device-width: 480px) {
al@603 336 body {
al@603 337 background-color: #DDD;
al@603 338 }
al@605 339 /* Custom look of standard controls */
al@603 340 select, input, button {
al@603 341 -webkit-appearance: none;
al@603 342 display: inline-block;
al@603 343 border: 1px solid #666;
al@603 344 border-radius: 4px;
al@603 345 margin: 12px 0;
al@603 346 padding: 0 6px;
al@603 347 }
al@605 348 /* Add an arrow to the "select" control */
al@603 349 select {
al@603 350 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAGAQMAAAAv/Pa7AAAABlBMVEUAAABJSUn0lwL4AAAAAXRSTlMAQObYZgAAABpJREFUCB1j+P+Aof4Ag30DgzwDAx8DAwsDADiuBA9DaVFpAAAAAElFTkSuQmCC');
al@603 351 background-position: 98% 50%;
al@603 352 background-repeat: no-repeat;
al@603 353 margin: 12px 0;
al@603 354 }
al@603 355 input, button {
al@603 356 margin: 16px 0 8px;
al@603 357 }
al@603 358 /* Remove the dots between links */
al@603 359 footer a+a::before { content: ' '; }
al@603 360 }
al@603 361
al@603 362
al@603 363
al@603 364 *::-moz-selection, *::selection { background-color: #FFA500; color: #000; }