]>
git.immae.eu Git - github/shaarli/Shaarli.git/blob - tpl/default/css/shaarli.css
5 background: url
(../img/noise.png) #979797;
21 display: inline-block
;
28 vertical-align: baseline
;
29 border-radius: .25rem;
37 font-family: 'Roboto Slab';
42 local
('Fira-Sans-regular'),
43 url
('../fonts/Fira-Sans-regular.woff2') format
('woff2'),
44 url
('../fonts/Fira-Sans-regular.woff') format
('woff');
48 * Extends Pure grids responsive to hide items.
49 * Use xx-0 to hide an item on xx screen.
50 * Display it at any level with xx-visible.
52 .pure-u-0 { display: none
!important
; }
53 @media screen and
(min-width: 35.5em) {
54 .pure-u-sm-0 { display: none
!important
; }
55 .pure-u-sm-visible { display: inline-block
!important
; }
57 @media screen and
(min-width: 48em) {
58 .pure-u-md-0 { display: none
!important
; }
59 .pure-u-md-visible { display: inline-block
!important
; }
61 @media screen and
(min-width: 64em) {
62 .pure-u-lg-0 { display: none
!important
; }
63 .pure-u-lg-visible { display: inline-block
!important
; }
65 @media screen and
(min-width: 80em) {
66 .pure-u-xl-0 { display: none
!important
; }
67 .pure-u-xl-visible { display: inline-block
!important
; }
70 .pure-g [class*="pure-u"]{
71 font-family: Roboto Slab
, Arial
, sans-serif
;
75 * Make pure-extras alert closable.
77 .pure-alert-closable .fa-times {
92 -webkit-font-smoothing: antialiased
;
93 /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
95 transition: max-height
0.5s;
102 transition: max-height
0.75s;
105 .pure-menu-selected {
110 .pure-menu-link:visited
,
111 .pure-menu-selected
.pure-menu-link
,
112 .pure-menu-selected .pure-menu-link:visited {
116 .pure-menu-link:hover
,
117 .pure-menu-selected .pure-menu-link:hover {
119 background: transparent
;
132 background-color: #b0ddce;
136 border-radius: 100px;
140 transition: all
0.5s;
143 .menu-toggle .bar:first-child {
144 transform: translateY
(-6px);
147 .menu-toggle.x .bar {
148 transform: rotate
(45deg);
151 .menu-toggle.x .bar:first-child {
152 transform: rotate
(-45deg);
155 @media screen and
(max-width: 64em) {
167 background: url
(../img/noise.png), #1fa67a url
(../img/logo2.png) no-repeat fixed
10px 2.5em;
173 margin: 45px 0 0 125px;
178 #header h1 a
, #header h1
a:visited
{
179 /* https://css-tricks.com/centering-css-complete-guide/#vertical-inline-multiple */
180 display: -ms-flexbox
;
182 flex-direction: column
;
183 justify-content: center
;
188 text-decoration: none
;
191 font-family: Roboto Slab
, Arial
, sans-serif
;
204 /* position: fixed; */
214 * Can't make it work with awesomplete list z-index. Any idea?
224 #search input
[type
="text"] {
226 padding: 5px 5px 3px 15px;
229 transition: width
.5s ease
;
231 border: medium none currentColor
;
233 box-shadow: 0 1px 0 rgba
(255, 255, 255, 0.078), 0 1px 4px rgba
(0, 0, 0, 0.298) inset
;
238 #search input
[type
="text"]::-webkit-input-placeholder
{
243 background: transparent
;
248 #search button:hover
{
259 #header-login-form.open
{
263 box-shadow: 0 1px 1px 1px #797979;
266 #header-login-form input
[type
="text"], #header-login-form input
[type
="password"], #header-login-form
.remember-me
{
268 padding: 5px 5px 3px 15px;
272 border: medium none currentColor
;
274 box-shadow: 0 1px 0 rgba
(255, 255, 255, 0.078), 0 1px 4px rgba
(0, 0, 0, 0.298) inset
;
279 #header-login-form input
[type
="text"]::-webkit-input-placeholder
,
280 #header-login-form input
[type
="password"]::-webkit-input-placeholder
285 #header-login-form .remember-me
{
286 display: inline-block
;
288 padding: 5px 20px 3px 20px;
292 #header-login-form .remember-me label
, #header-login-form
.remember-me input
{
296 #header-login-form input
[type
="submit"] {
297 display: inline-block
;
302 border: medium none currentColor
;
304 box-shadow: 1px 1px 2px #005C3E, -1px -1px 2px #005C3E;
308 #header-login-form input
, #header-login-form
.remember-me
{
309 transition: visibility
1s, opacity
1s;
314 #header-login-form.open input
, #header-login-form
.open
.remember-me
{
319 .new-version-message {
323 .new-version-message a {
324 color: rgb
(151, 96, 13);
333 /* Hack-ish way to only shadow the top part. */
334 box-shadow: 0 -20px 20px -20px #797979;
336 background: url
(../img/noise.png) #979797;
339 @media screen and
(max-width: 64em) {
345 @media screen and
(min-width: 64em) {
347 /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
353 * CONTENT - LINKLIST PAGING
364 .linklist-filters a {
366 text-decoration: none
;
369 .linklist-filters .filter-off {
374 .linklist-filters .filter-on {
387 text-decoration: none
;
390 .linklist-pages a:hover {
403 text-decoration: none
;
406 border: solid
1px #979797;
414 .linksperpage input[type="text"] {
418 padding: 3px 5px 3px 8px;
420 border: medium none currentColor
;
421 --border-radius: 25px;
422 box-shadow: 0 1px 0 rgba
(255, 255, 255, 0.078), 0 1px 4px rgba
(0, 0, 0, 0.298) inset
;
428 * CONTENT - LINKLIST ITEMS
433 box-shadow: 2px 2px 0.5em #797979;
436 .linklist-item-title, .linklist-item-title h2 {
438 word-wrap: break-word
;
441 .linklist-item-title {
442 background: #20b988 url
(../img/noise.png);
443 border-bottom: 1px solid
#1b926c;
444 box-shadow: 1px 1px 0.2em #1b926c;
447 .linklist-item-title h2 {
448 padding: 3px 10px 0 10px;
452 .linklist-item-title a {
455 text-decoration: none
;
456 vertical-align: middle
;
457 font-family: Roboto Slab
, Arial
, sans-serif
;
460 .linklist-item-title .linklist-link:visited {
464 .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
469 .linklist-item-title .label-private {
470 border: solid
1px #d0fff0;
471 font-family: Arial
, sans-serif
;
475 .linklist-item-title .fold-button {
479 .linklist-item-editbuttons {
484 .linklist-item-editbuttons a {
488 .linklist-item-description {
490 font-family: Roboto Slab
, Arial
, sans-serif
;
491 word-wrap: break-word
;
494 .linklist-item-description a {
495 text-decoration: none
;
499 .linklist-item-description a:hover {
500 text-shadow: 1px 1px #ddd;
503 .linklist-item-description a:visited {
507 .linklist-item-thumbnail {
512 .linklist-item-infos {
513 padding: 5px 5px 0 5px;
514 background: #ddd url
(../img/noise.png);
515 border-top: 1px solid
#989898;
516 box-shadow: 1px -1px 0.2em #989898;
520 .linklist-item-infos a {
522 text-decoration: none
;
525 .linklist-item-infos a:hover {
529 .linklist-item-tags {
534 .linklist-item-infos .label-tag {
535 border: 1px solid
#505050;
539 .linklist-item-infos .label-tag:hover {
540 border: 1px solid
#000;
543 .linklist-item-infos-dateblock {
547 .linklist-plugin-icon {
552 .linklist-item-infos-url {
556 text-overflow: ellipsis
;
561 @media screen and
(max-width: 64em) {
562 .linklist-item-infos-url {
580 background: linear-gradient
(to right
, #949393, #252525, #949393);
595 background: url
(../img/noise.png) #1fa67a;
597 box-shadow: 1px 1px 2px #797979;
607 border-radius: 5px 5px 0 0;
608 border-bottom: 1px solid
#797979;
616 .page-form input[type="text"], .page-form input[type="password"] {
618 padding: 5px 5px 3px 15px;
622 border: medium none currentColor
;
624 box-shadow: 0 1px 0 rgba
(255, 255, 255, 0.078), 0 1px 4px rgba
(0, 0, 0, 0.298) inset
;
629 .page-form input
[type
="text"]::-webkit-input-placeholder
,
630 .page-form input[type="password"]::-webkit-input-placeholder {
634 #login-form .remember-me
{
640 .page-form input[type="submit"] {
645 border: medium none currentColor
;
647 box-shadow: 1px 1px 4px #0C7653, -1px -1px 6px #0C7653, -1px 1px 6px #0C7653, 1px -1px 6px #0C7653;
656 * CONTENT - LINKLIST ITEMS
661 box-shadow: 2px 2px 0.5em #797979;
664 .linklist-item-title, .linklist-item-title h2 {
668 .linklist-item-title {
669 background: #20b988 url
(../img/noise.png);
670 border-bottom: 1px solid
#1b926c;
671 box-shadow: 1px 1px 0.2em #1b926c;
674 .linklist-item-title h2 {
675 padding: 3px 10px 0 10px;
679 .linklist-item-title a {
682 text-decoration: none
;
683 vertical-align: middle
;
684 font-family: Roboto Slab
, Arial
, sans-serif
;
687 .linklist-item-title .linklist-link:visited {
691 .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
696 .linklist-item-title .label-private {
697 border: solid
1px #d0fff0;
698 font-family: Arial
, sans-serif
;
702 .linklist-item-title .fold-button {
706 .linklist-item-editbuttons {
711 .linklist-item-editbuttons a {
715 .linklist-item-description {
717 font-family: Roboto Slab
, Arial
, sans-serif
;
720 .linklist-item-description a {
721 text-decoration: none
;
725 .linklist-item-description a:hover {
726 text-shadow: 1px 1px #ddd;
729 .linklist-item-description a:visited {
733 .linklist-item-infos {
735 background: #ddd url
(../img/noise.png);
736 border-top: 1px solid
#989898;
737 box-shadow: 1px -1px 0.2em #989898;
742 .linklist-item-infos a {
744 text-decoration: none
;
747 .linklist-item-infos a:hover {
751 .linklist-item-tags {
755 .linklist-item-infos .label-tag {
756 border: 1px solid
#505050;
760 .linklist-item-infos .label-tag:hover {
761 border: 1px solid
#000;
764 .linklist-plugin-icon {
769 .linklist-item-infos-url {
773 text-overflow: ellipsis
;