tpl/default/css/shaarli.css

   1 /**
   2  * General
   3  */
   4 body {
   5     background: url(../img/noise.png) #979797;
   6 }
   7
   8 .strong {
   9     font-weight: bold;
  10 }
  11
  12 .clear {
  13     clear: both;
  14 }
  15
  16 .label {
  17     display: inline-block;
  18     padding: .25em .4em;
  19     font-size: 75%;
  20     font-weight: 700;
  21     line-height: 1;
  22     text-align: center;
  23     white-space: nowrap;
  24     vertical-align: baseline;
  25     border-radius: .25rem;
  26 }
  27
  28 @font-face {
  29     font-family: 'Roboto Slab';
  30     font-weight: 400;
  31     font-style: normal;
  32     src:
  33     local('Fira Sans'),
  34     local('Fira-Sans-regular'),
  35     url('../fonts/Fira-Sans-regular.woff2') format('woff2'),
  36     url('../fonts/Fira-Sans-regular.woff') format('woff');
  37 }
  38
  39 /**
  40  * Extends Pure grids responsive to hide items.
  41  * Use xx-0 to hide an item on xx screen.
  42  * Display it at any level with xx-visible.
  43  */
  44 .pure-u-0 { display: none !important; }
  45 @media screen and (min-width: 35.5em) {
  46     .pure-u-sm-0 { display: none !important; }
  47     .pure-u-sm-visible { display: inline-block !important; }
  48 }
  49 @media screen and (min-width: 48em) {
  50     .pure-u-md-0 { display: none !important; }
  51     .pure-u-md-visible { display: inline-block !important; }
  52 }
  53 @media screen and (min-width: 64em) {
  54     .pure-u-lg-0 { display: none !important; }
  55     .pure-u-lg-visible { display: inline-block !important; }
  56 }
  57 @media screen and (min-width: 80em) {
  58     .pure-u-xl-0 { display: none !important; }
  59     .pure-u-xl-visible { display: inline-block !important; }
  60 }
  61
  62 /**
  63  * MENU
  64  **/
  65 .shaarli-menu {
  66     position: fixed;
  67     top: 0;
  68     width: 100%;
  69     background: #1b926c;
  70     -webkit-font-smoothing: antialiased;
  71     /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
  72     max-height: 2.1em;
  73     transition: max-height 0.5s;
  74     overflow: hidden;
  75     z-index: 999;
  76 }
  77
  78 .shaarli-menu.open {
  79     max-height: 500px;
  80     transition: max-height 0.75s;
  81 }
  82
  83 .pure-menu-selected {
  84     background: #1A694C;
  85 }
  86
  87 .pure-menu-link,
  88 .pure-menu-link:visited,
  89 .pure-menu-selected .pure-menu-link,
  90 .pure-menu-selected .pure-menu-link:visited {
  91     color: #b0ddce;
  92 }
  93
  94 .pure-menu-link:hover,
  95 .pure-menu-selected .pure-menu-link:hover {
  96     color: #d1fff0;
  97     background: transparent;
  98 }
  99
 100 .menu-toggle {
 101     width: 34px;
 102     height: 34px;
 103     position: absolute;
 104     top: 0;
 105     right: 0;
 106     display: none;
 107 }
 108
 109 .menu-toggle .bar {
 110     background-color: #b0ddce;
 111     display: block;
 112     width: 20px;
 113     height: 2px;
 114     border-radius: 100px;
 115     position: absolute;
 116     top: 18px;
 117     right: 7px;
 118     transition: all 0.5s;
 119 }
 120
 121 .menu-toggle .bar:first-child {
 122     transform: translateY(-6px);
 123 }
 124
 125 .menu-toggle.x .bar {
 126     transform: rotate(45deg);
 127 }
 128
 129 .menu-toggle.x .bar:first-child {
 130     transform: rotate(-45deg);
 131 }
 132
 133 @media screen and (max-width: 64em) {
 134     .menu-toggle {
 135         display: block;
 136     }
 137 }
 138
 139 /**
 140  * Header
 141  */
 142 #header {
 143     width: 100%;
 144     height: 150px;
 145     background: url(../img/noise.png), #1fa67a url(../img/logo2.png) no-repeat fixed 10px 2.5em;
 146 }
 147
 148 #header h1 {
 149     position: fixed;
 150     float: left;
 151     margin: 45px 0 0 125px;
 152     width: 55%;
 153     height: 100px;
 154 }
 155
 156 #header h1 a, #header h1 a:visited {
 157     /* https://css-tricks.com/centering-css-complete-guide/#vertical-inline-multiple */
 158     display: -ms-flexbox;
 159     display: flex;
 160     flex-direction: column;
 161     justify-content: center;
 162
 163     overflow: hidden;
 164     height: 100px;
 165     color: #b0ddce;
 166     text-decoration: none;
 167     z-index: 1;
 168
 169     font-family: Roboto Slab, Arial, sans-serif;
 170     font-size: 1.2em;
 171 }
 172
 173 #header h1 a:hover {
 174     color: #d1fff0;
 175 }
 176
 177 #linkcount {
 178     /* position: fixed; */
 179     position: absolute;
 180     top: 40px;
 181     right: 10px;
 182     color: #b0ddce;
 183     font-size: 0.8em;
 184 }
 185
 186 #search {
 187     /**
 188      * Can't make it work with awesomplete list z-index. Any idea?
 189      * position: fixed;
 190      */
 191     position: absolute;
 192     top: 60px;
 193     right: 10px;
 194     width: 30%;
 195     text-align: right;
 196 }
 197
 198 #search input[type="text"] {
 199     margin: 0 0 5px 0;
 200     padding: 5px 5px 3px 15px;
 201     height: 20px;
 202     width: 140px;
 203     transition: width .5s ease;
 204     background: #1b926c;
 205     border: medium none currentColor;
 206     border-radius: 25px;
 207     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
 208     color: #b0ddce;
 209 }
 210
 211 #search button {
 212     background: transparent;
 213     border: none;
 214     color: #b0ddce;
 215 }
 216
 217 #search button:hover {
 218     color: #fff;
 219 }
 220
 221 /**
 222  * CONTENT - GENERAL
 223  */
 224 #content {
 225     position: relative;
 226     /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
 227     margin-top: -4px;
 228     /* Hack-ish way to only shadow the top part. */
 229     box-shadow: 0 -20px 20px -20px #797979;
 230     z-index: 2;
 231     background: url(../img/noise.png) #979797;
 232 }
 233
 234 /**
 235  * CONTENT - LINKLIST PAGING
 236  */
 237 @media screen and (max-width: 64em) {
 238     .linklist-paging {
 239         margin: 2.1em 0 0 0;
 240     }
 241 }
 242
 243 @media screen and (min-width: 64em) {
 244     .linklist-paging {
 245         margin: 0;
 246     }
 247 }
 248
 249 .linklist-filters {
 250     margin: 10px 0;
 251     color: #252525;
 252 }
 253
 254 .linklist-filters span {
 255     margin: 0 0 0 10px;
 256 }
 257
 258 .linklist-filters a {
 259     padding: 2px 5px;
 260     text-decoration: none;
 261 }
 262
 263 .linklist-filters .filter-off {
 264     color: #252525;
 265     background: #c8c8c8;
 266 }
 267
 268 .linklist-filters .filter-on {
 269     color: #b0ddce;
 270     background: #1b926c;
 271 }
 272
 273 .linklist-pages {
 274     margin: 10px 0;
 275     color: #252525;
 276     text-align: center;
 277 }
 278
 279 .linklist-pages a {
 280     color: #252525;
 281     text-decoration: none;
 282 }
 283
 284 .linklist-pages a:hover {
 285     color: #fff;
 286 }
 287
 288 .linksperpage {
 289     margin: 10px 0;
 290     text-align: right;
 291     color: #252525;
 292 }
 293
 294 .linksperpage a {
 295     padding: 2px 5px;
 296     text-decoration: none;
 297     color: #252525;
 298     background: #c8c8c8;
 299     border: solid 1px #979797;
 300 }
 301
 302 .linksperpage form {
 303     display: inline;
 304     margin: 0 10px 0 0;
 305 }
 306
 307 .linksperpage input[type="text"] {
 308     width: 28px;
 309     height: 20px;
 310     margin: 0 0 5px 0;
 311     padding: 3px 5px 3px 8px;
 312     background: #c8c8c8;
 313     border: medium none currentColor;
 314     border-radius: 25px;
 315     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
 316     color: #252525;
 317     font-size: 0.8em;
 318 }
 319
 320 /**
 321  * CONTENT - LINKLIST ITEMS
 322  */
 323 .linklist-item {
 324     margin: 15px 0;
 325     background: #f5f5f5;
 326     box-shadow: 2px 2px 0.5em #797979;
 327 }
 328
 329 .linklist-item-title, .linklist-item-title h2  {
 330     margin: 0;
 331 }
 332
 333 .linklist-item-title {
 334     background: #20b988 url(../img/noise.png);
 335     border-bottom: 1px solid #1b926c;
 336     box-shadow: 1px 1px 0.2em #1b926c;
 337 }
 338
 339 .linklist-item-title h2 {
 340     padding: 3px 10px 0 10px;
 341     line-height: 25px;
 342 }
 343
 344 .linklist-item-title a {
 345     font-size: 0.7em;
 346     color: #d0fff0;
 347     text-decoration: none;
 348     vertical-align: middle;
 349     font-family: Roboto Slab, Arial, sans-serif;
 350 }
 351
 352 .linklist-item-title .linklist-link:visited {
 353     color: #ddd;
 354 }
 355
 356 .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
 357     color: #fff;
 358 }
 359
 360
 361 .linklist-item-title .label-private {
 362     border: solid 1px #d0fff0;
 363     font-family: Arial, sans-serif;
 364     font-size: 0.65em;
 365 }
 366
 367 .linklist-item-title .fold-button {
 368     display: none;
 369 }
 370
 371 .linklist-item-editbuttons {
 372     float: right;
 373     padding: 5px;
 374 }
 375
 376 .linklist-item-editbuttons a {
 377     font-size: 1em;
 378 }
 379
 380 .linklist-item-description {
 381     padding: 10px;
 382     font-family: Roboto Slab, Arial, sans-serif;
 383 }
 384
 385 .linklist-item-description a {
 386     text-decoration: none;
 387     color: #1b926c;
 388 }
 389
 390 .linklist-item-description a:hover {
 391     text-shadow: 1px 1px #ddd;
 392 }
 393
 394 .linklist-item-description a:visited {
 395     color: #20b988;
 396 }
 397
 398 .linklist-item-infos {
 399     padding: 5px;
 400     background: #ddd url(../img/noise.png);
 401     border-top: 1px solid #989898;
 402     box-shadow: 1px -1px 0.2em #989898;
 403     color: #252525;
 404     font-size: 0.8em;
 405 }
 406
 407 .linklist-item-infos a {
 408     color: #505050;
 409     text-decoration: none;
 410 }
 411
 412 .linklist-item-infos a:hover {
 413     color: #000;
 414 }
 415
 416 .linklist-item-tags {
 417     margin: 0 0 5px 0;
 418 }
 419
 420 .linklist-item-infos .label-tag {
 421     border: 1px solid #505050;
 422     font-size: 0.9em;
 423 }
 424
 425 .linklist-item-infos .label-tag:hover {
 426     border: 1px solid #000;
 427 }
 428
 429 .linklist-plugin-icon {
 430     width: 13px;
 431     height: 13px;
 432 }
 433
 434 .linklist-item-infos-url {
 435     text-align: right;
 436     white-space: nowrap;
 437     overflow: hidden;
 438     text-overflow: ellipsis;
 439 }
 440
 441 /**
 442  * CONTENT - LINKLIST ITEMS
 443  */
 444 .linklist-item {
 445     margin: 15px 0;
 446     background: #f5f5f5;
 447     box-shadow: 2px 2px 0.5em #797979;
 448 }
 449
 450 .linklist-item-title, .linklist-item-title h2  {
 451     margin: 0;
 452 }
 453
 454 .linklist-item-title {
 455     background: #20b988 url(../img/noise.png);
 456     border-bottom: 1px solid #1b926c;
 457     box-shadow: 1px 1px 0.2em #1b926c;
 458 }
 459
 460 .linklist-item-title h2 {
 461     padding: 3px 10px 0 10px;
 462     line-height: 25px;
 463 }
 464
 465 .linklist-item-title a {
 466     font-size: 0.7em;
 467     color: #d0fff0;
 468     text-decoration: none;
 469     vertical-align: middle;
 470     font-family: Roboto Slab, Arial, sans-serif;
 471 }
 472
 473 .linklist-item-title .linklist-link:visited {
 474     color: #ddd;
 475 }
 476
 477 .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
 478     color: #fff;
 479 }
 480
 481
 482 .linklist-item-title .label-private {
 483     border: solid 1px #d0fff0;
 484     font-family: Arial, sans-serif;
 485     font-size: 0.65em;
 486 }
 487
 488 .linklist-item-title .fold-button {
 489     display: none;
 490 }
 491
 492 .linklist-item-editbuttons {
 493     float: right;
 494     padding: 5px;
 495 }
 496
 497 .linklist-item-editbuttons a {
 498     font-size: 1em;
 499 }
 500
 501 .linklist-item-description {
 502     padding: 10px;
 503     font-family: Roboto Slab, Arial, sans-serif;
 504 }
 505
 506 .linklist-item-description a {
 507     text-decoration: none;
 508     color: #1b926c;
 509 }
 510
 511 .linklist-item-description a:hover {
 512     text-shadow: 1px 1px #ddd;
 513 }
 514
 515 .linklist-item-description a:visited {
 516     color: #20b988;
 517 }
 518
 519 .linklist-item-infos {
 520     padding: 5px;
 521     background: #ddd url(../img/noise.png);
 522     border-top: 1px solid #989898;
 523     box-shadow: 1px -1px 0.2em #989898;
 524     color: #252525;
 525     font-size: 0.8em;
 526 }
 527
 528 .linklist-item-infos a {
 529     color: #505050;
 530     text-decoration: none;
 531 }
 532
 533 .linklist-item-infos a:hover {
 534     color: #000;
 535 }
 536
 537 .linklist-item-tags {
 538     margin: 0 0 5px 0;
 539 }
 540
 541 .linklist-item-infos .label-tag {
 542     border: 1px solid #505050;
 543     font-size: 0.9em;
 544 }
 545
 546 .linklist-item-infos .label-tag:hover {
 547     border: 1px solid #000;
 548 }
 549
 550 .linklist-plugin-icon {
 551     width: 13px;
 552     height: 13px;
 553 }
 554
 555 .linklist-item-infos-url {
 556     text-align: right;
 557     white-space: nowrap;
 558     overflow: hidden;
 559     text-overflow: ellipsis;
 560 }