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