]>
git.immae.eu Git - github/shaarli/Shaarli.git/blob - tpl/default/css/shaarli.css
5 background: url
(../img/noise.png) #979797;
17 display: inline-block
;
24 vertical-align: baseline
;
25 border-radius: .25rem;
29 font-family: 'Roboto Slab';
34 local
('Fira-Sans-regular'),
35 url
('../fonts/Fira-Sans-regular.woff2') format
('woff2'),
36 url
('../fonts/Fira-Sans-regular.woff') format
('woff');
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.
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
; }
49 @media screen and
(min-width: 48em) {
50 .pure-u-md-0 { display: none
!important
; }
51 .pure-u-md-visible { display: inline-block
!important
; }
53 @media screen and
(min-width: 64em) {
54 .pure-u-lg-0 { display: none
!important
; }
55 .pure-u-lg-visible { display: inline-block
!important
; }
57 @media screen and
(min-width: 80em) {
58 .pure-u-xl-0 { display: none
!important
; }
59 .pure-u-xl-visible { display: inline-block
!important
; }
70 -webkit-font-smoothing: antialiased
;
71 /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
73 transition: max-height
0.5s;
80 transition: max-height
0.75s;
88 .pure-menu-link:visited
,
89 .pure-menu-selected
.pure-menu-link
,
90 .pure-menu-selected .pure-menu-link:visited {
94 .pure-menu-link:hover
,
95 .pure-menu-selected .pure-menu-link:hover {
97 background: transparent
;
110 background-color: #b0ddce;
114 border-radius: 100px;
118 transition: all
0.5s;
121 .menu-toggle .bar:first-child {
122 transform: translateY
(-6px);
125 .menu-toggle.x .bar {
126 transform: rotate
(45deg);
129 .menu-toggle.x .bar:first-child {
130 transform: rotate
(-45deg);
133 @media screen and
(max-width: 64em) {
145 background: url
(../img/noise.png), #1fa67a url
(../img/logo2.png) no-repeat fixed
10px 2.5em;
151 margin: 45px 0 0 125px;
156 #header h1 a
, #header h1
a:visited
{
157 /* https://css-tricks.com/centering-css-complete-guide/#vertical-inline-multiple */
158 display: -ms-flexbox
;
160 flex-direction: column
;
161 justify-content: center
;
166 text-decoration: none
;
169 font-family: Roboto Slab
, Arial
, sans-serif
;
178 /* position: fixed; */
188 * Can't make it work with awesomplete list z-index. Any idea?
198 #search input
[type
="text"] {
200 padding: 5px 5px 3px 15px;
203 transition: width
.5s ease
;
205 border: medium none currentColor
;
207 box-shadow: 0 1px 0 rgba
(255, 255, 255, 0.078), 0 1px 4px rgba
(0, 0, 0, 0.298) inset
;
212 background: transparent
;
217 #search button:hover
{
226 /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
228 /* Hack-ish way to only shadow the top part. */
229 box-shadow: 0 -20px 20px -20px #797979;
231 background: url
(../img/noise.png) #979797;
235 * CONTENT - LINKLIST PAGING
237 @media screen and
(max-width: 64em) {
243 @media screen and
(min-width: 64em) {
254 .linklist-filters span {
258 .linklist-filters a {
260 text-decoration: none
;
263 .linklist-filters .filter-off {
268 .linklist-filters .filter-on {
281 text-decoration: none
;
284 .linklist-pages a:hover {
296 text-decoration: none
;
299 border: solid
1px #979797;
307 .linksperpage input[type="text"] {
311 padding: 3px 5px 3px 8px;
313 border: medium none currentColor
;
315 box-shadow: 0 1px 0 rgba
(255, 255, 255, 0.078), 0 1px 4px rgba
(0, 0, 0, 0.298) inset
;
321 * CONTENT - LINKLIST ITEMS
326 box-shadow: 2px 2px 0.5em #797979;
329 .linklist-item-title, .linklist-item-title h2 {
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;
339 .linklist-item-title h2 {
340 padding: 3px 10px 0 10px;
344 .linklist-item-title a {
347 text-decoration: none
;
348 vertical-align: middle
;
349 font-family: Roboto Slab
, Arial
, sans-serif
;
352 .linklist-item-title .linklist-link:visited {
356 .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
361 .linklist-item-title .label-private {
362 border: solid
1px #d0fff0;
363 font-family: Arial
, sans-serif
;
367 .linklist-item-title .fold-button {
371 .linklist-item-editbuttons {
376 .linklist-item-editbuttons a {
380 .linklist-item-description {
382 font-family: Roboto Slab
, Arial
, sans-serif
;
385 .linklist-item-description a {
386 text-decoration: none
;
390 .linklist-item-description a:hover {
391 text-shadow: 1px 1px #ddd;
394 .linklist-item-description a:visited {
398 .linklist-item-infos {
400 background: #ddd url
(../img/noise.png);
401 border-top: 1px solid
#989898;
402 box-shadow: 1px -1px 0.2em #989898;
407 .linklist-item-infos a {
409 text-decoration: none
;
412 .linklist-item-infos a:hover {
416 .linklist-item-tags {
420 .linklist-item-infos .label-tag {
421 border: 1px solid
#505050;
425 .linklist-item-infos .label-tag:hover {
426 border: 1px solid
#000;
429 .linklist-plugin-icon {
434 .linklist-item-infos-url {
438 text-overflow: ellipsis
;
442 * CONTENT - LINKLIST ITEMS
447 box-shadow: 2px 2px 0.5em #797979;
450 .linklist-item-title, .linklist-item-title h2 {
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;
460 .linklist-item-title h2 {
461 padding: 3px 10px 0 10px;
465 .linklist-item-title a {
468 text-decoration: none
;
469 vertical-align: middle
;
470 font-family: Roboto Slab
, Arial
, sans-serif
;
473 .linklist-item-title .linklist-link:visited {
477 .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
482 .linklist-item-title .label-private {
483 border: solid
1px #d0fff0;
484 font-family: Arial
, sans-serif
;
488 .linklist-item-title .fold-button {
492 .linklist-item-editbuttons {
497 .linklist-item-editbuttons a {
501 .linklist-item-description {
503 font-family: Roboto Slab
, Arial
, sans-serif
;
506 .linklist-item-description a {
507 text-decoration: none
;
511 .linklist-item-description a:hover {
512 text-shadow: 1px 1px #ddd;
515 .linklist-item-description a:visited {
519 .linklist-item-infos {
521 background: #ddd url
(../img/noise.png);
522 border-top: 1px solid
#989898;
523 box-shadow: 1px -1px 0.2em #989898;
528 .linklist-item-infos a {
530 text-decoration: none
;
533 .linklist-item-infos a:hover {
537 .linklist-item-tags {
541 .linklist-item-infos .label-tag {
542 border: 1px solid
#505050;
546 .linklist-item-infos .label-tag:hover {
547 border: 1px solid
#000;
550 .linklist-plugin-icon {
555 .linklist-item-infos-url {
559 text-overflow: ellipsis
;