tpl/default/css/shaarli.css

   1 /**
   2  * General
   3  */
   4 body {
   5
   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: inherit !important; }
  48 }
  49 @media screen and (min-width: 48em) {
  50     .pure-u-md-0 { display: none !important; }
  51     .pure-u-md-visible { display: inherit !important; }
  52 }
  53 @media screen and (min-width: 64em) {
  54     .pure-u-lg-0 { display: none !important; }
  55     .pure-u-lg-visible { display: inherit !important; }
  56 }
  57 @media screen and (min-width: 80em) {
  58     .pure-u-xl-0 { display: none !important; }
  59     .pure-u-xl-visible { display: inherit !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     box-shadow: 0 -2px 1em #797979;
 227     z-index: 2;
 228     background: url(../img/noise.png) #979797;
 229 }
 230
 231 /**
 232  * CONTENT - LINKLIST PAGING
 233  */
 234 @media screen and (min-width: 35.5em) {
 235     .linklist-paging {
 236         margin: 2.1em 0 0 0;
 237     }
 238 }
 239
 240 @media screen and (min-width: 64em) {
 241     .linklist-paging {
 242         margin: 0;
 243     }
 244 }
 245
 246 .linklist-filters {
 247     margin: 10px 0;
 248     color: #252525;
 249 }
 250
 251 .linklist-filters span {
 252     margin: 0 0 0 10px;
 253 }
 254
 255 .linklist-filters a {
 256     padding: 2px 5px;
 257     text-decoration: none;
 258 }
 259
 260 .linklist-filters .filter-off {
 261     color: #252525;
 262     background: #c8c8c8;
 263 }
 264
 265 .linklist-filters .filter-on {
 266     color: #b0ddce;
 267     background: #1b926c;
 268 }
 269
 270 .linklist-pages {
 271     margin: 10px 0;
 272     color: #252525;
 273     text-align: center;
 274 }
 275
 276 .linklist-pages a {
 277     color: #252525;
 278     text-decoration: none;
 279 }
 280
 281 .linklist-pages a:hover {
 282     color: #fff;
 283 }
 284
 285 .linksperpage {
 286     margin: 10px 0;
 287     text-align: right;
 288     color: #252525;
 289 }
 290
 291 .linksperpage a {
 292     padding: 2px 5px;
 293     text-decoration: none;
 294     color: #252525;
 295     background: #c8c8c8;
 296     border: solid 1px #979797;
 297 }
 298
 299 .linksperpage form {
 300     display: inline;
 301     margin: 0 10px 0 0;
 302 }
 303
 304 .linksperpage input[type="text"] {
 305     width: 28px;
 306     height: 20px;
 307     margin: 0 0 5px 0;
 308     padding: 3px 5px 3px 8px;
 309     background: #c8c8c8;
 310     border: medium none currentColor;
 311     border-radius: 25px;
 312     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
 313     color: #252525;
 314     font-size: 0.8em;
 315 }
 316
 317 /**
 318  * CONTENT - LINKLIST ITEMS
 319  */
 320 .linklist-item {
 321     margin: 15px 0;
 322     background: #f5f5f5;
 323     box-shadow: 2px 2px 0.5em #797979;
 324 }
 325
 326 .linklist-item-title, .linklist-item-title h2  {
 327     margin: 0;
 328 }
 329
 330 .linklist-item-title {
 331     background: #20b988 url(../img/noise.png);
 332     border-bottom: 1px solid #1b926c;
 333     box-shadow: 1px 1px 0.2em #1b926c;
 334 }
 335
 336 .linklist-item-title h2 {
 337     padding: 3px 10px 0 10px;
 338     line-height: 25px;
 339 }
 340
 341 .linklist-item-title a {
 342     font-size: 0.7em;
 343     color: #d0fff0;
 344     text-decoration: none;
 345     vertical-align: middle;
 346     font-family: Roboto Slab, Arial, sans-serif;
 347 }
 348
 349 .linklist-item-title .linklist-link:visited {
 350     color: #ddd;
 351 }
 352
 353 .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
 354     color: #fff;
 355 }
 356
 357
 358 .linklist-item-title .label-private {
 359     border: solid 1px #d0fff0;
 360     font-family: Arial, sans-serif;
 361     font-size: 0.65em;
 362 }
 363
 364 .linklist-item-title .fold-button {
 365     display: none;
 366 }
 367
 368 .linklist-item-editbuttons {
 369     float: right;
 370     padding: 5px;
 371 }
 372
 373 .linklist-item-editbuttons a {
 374     font-size: 1em;
 375 }
 376
 377 .linklist-item-description {
 378     padding: 10px;
 379     font-family: Roboto Slab, Arial, sans-serif;
 380 }
 381
 382 .linklist-item-description a {
 383     text-decoration: none;
 384     color: #1b926c;
 385 }
 386
 387 .linklist-item-description a:hover {
 388     text-shadow: 1px 1px #ddd;
 389 }
 390
 391 .linklist-item-description a:visited {
 392     color: #20b988;
 393 }
 394
 395 .linklist-item-infos {
 396     padding: 5px;
 397     background: #ddd url(../img/noise.png);
 398     border-top: 1px solid #989898;
 399     box-shadow: 1px -1px 0.2em #989898;
 400     color: #252525;
 401     font-size: 0.8em;
 402 }
 403
 404 .linklist-item-infos a {
 405     color: #505050;
 406     text-decoration: none;
 407 }
 408
 409 .linklist-item-infos a:hover {
 410     color: #000;
 411 }
 412
 413 .linklist-item-tags {
 414     margin: 0 0 5px 0;
 415 }
 416
 417 .linklist-item-infos .label-tag {
 418     border: 1px solid #505050;
 419     font-size: 0.9em;
 420 }
 421
 422 .linklist-item-infos .label-tag:hover {
 423     border: 1px solid #000;
 424 }
 425
 426 .linklist-plugin-icon {
 427     width: 13px;
 428     height: 13px;
 429 }
 430
 431 .linklist-item-infos-url {
 432     text-align: right;
 433     white-space: nowrap;
 434     overflow: hidden;
 435     text-overflow: ellipsis;
 436 }
 437
 438 /**
 439  * CONTENT - LINKLIST ITEMS
 440  */
 441 .linklist-item {
 442     margin: 15px 0;
 443     background: #fff;
 444     box-shadow: 2px 2px 0.5em #797979;
 445 }
 446
 447 .linklist-item-title, .linklist-item-title h2  {
 448     margin: 0;
 449 }
 450
 451 .linklist-item-title {
 452     background: #20b988 url(../img/noise.png);
 453     border-bottom: 1px solid #1b926c;
 454     box-shadow: 1px 1px 0.2em #1b926c;
 455 }
 456
 457 .linklist-item-title h2 {
 458     padding: 2px 10px;
 459     line-height: 25px;
 460 }
 461
 462 .linklist-item-title a {
 463     font-size: 0.6em;
 464     color: #d0fff0;
 465     text-decoration: none;
 466     vertical-align: middle;
 467 }
 468
 469 .linklist-item-title a:hover {
 470     color: #fff;
 471 }
 472
 473 .linklist-item-editbuttons {
 474     float: right;
 475     padding: 5px;
 476 }
 477
 478 .linklist-item-editbuttons a {
 479     font-size: 1em;
 480 }
 481
 482 .linklist-item-description {
 483     padding: 10px;
 484 }
 485
 486 .linklist-item-infos {
 487     padding: 5px;
 488     background: #ddd url(../img/noise.png);
 489     border-top: 1px solid #989898;
 490     box-shadow: 1px -1px 0.2em #989898;
 491     color: #252525;
 492     font-size: 0.8em;
 493 }
 494
 495 .linklist-item-infos a {
 496     color: #000;
 497     text-decoration: none;
 498 }
 499
 500 .linklist-item-infos a:hover {
 501     color: #252525;
 502 }