]>
git.immae.eu Git - github/shaarli/Shaarli.git/blob - tpl/default/css/shaarli.css
0367534bb22205bd997ee22264c942d8530280be
5 background: url
(../img/noise.png) #979797;
22 display: inline-block
;
29 vertical-align: baseline
;
30 border-radius: .25rem;
38 font-family: 'Roboto Slab';
43 local
('Fira-Sans-regular'),
44 url
('../fonts/Fira-Sans-regular.woff2') format
('woff2'),
45 url
('../fonts/Fira-Sans-regular.woff') format
('woff');
49 * Extends Pure grids responsive to hide items.
50 * Use xx-0 to hide an item on xx screen.
51 * Display it at any level with xx-visible.
53 .pure-u-0 { display: none
!important
; }
54 @media screen and
(min-width: 35.5em) {
55 .pure-u-sm-0 { display: none
!important
; }
56 .pure-u-sm-visible { display: inline-block
!important
; }
58 @media screen and
(min-width: 48em) {
59 .pure-u-md-0 { display: none
!important
; }
60 .pure-u-md-visible { display: inline-block
!important
; }
62 @media screen and
(min-width: 64em) {
63 .pure-u-lg-0 { display: none
!important
; }
64 .pure-u-lg-visible { display: inline-block
!important
; }
66 @media screen and
(min-width: 80em) {
67 .pure-u-xl-0 { display: none
!important
; }
68 .pure-u-xl-visible { display: inline-block
!important
; }
71 .pure-g [class*="pure-u"]{
72 font-family: Roboto Slab
, Arial
, sans-serif
;
76 * Make pure-extras alert closable.
78 .pure-alert-closable .fa-times {
86 background-color: #1b926c;
97 -webkit-font-smoothing: antialiased
;
98 /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
100 transition: max-height
0.5s;
105 /* Chrome bugfix: with 100% height, it only displays the first element. */
112 transition: max-height
0.75s;
116 .pure-menu-link:visited
,
117 .pure-menu-selected
.pure-menu-link
,
118 .pure-menu-selected .pure-menu-link:visited {
122 .pure-menu-link:hover
,
123 .pure-menu-selected .pure-menu-link:hover {
125 background: transparent
;
138 background-color: #b0ddce;
142 border-radius: 100px;
146 transition: all
0.5s;
149 .menu-toggle .bar:first-child {
150 transform: translateY
(-6px);
153 .menu-toggle.x .bar {
154 transform: rotate
(45deg);
157 .menu-toggle.x .bar:first-child {
158 transform: rotate
(-45deg);
161 @media screen and
(max-width: 64em) {
173 background: url
(../img/noise.png), #1fa67a url
(../img/logo.png) no-repeat fixed
10px 2.5em;
179 margin: 45px 0 0 125px;
184 #header h1 a
, #header h1
a:visited
{
185 /* https://css-tricks.com/centering-css-complete-guide/#vertical-inline-multiple */
186 display: -ms-flexbox
;
188 flex-direction: column
;
189 justify-content: center
;
194 text-decoration: none
;
197 font-family: Roboto Slab
, Arial
, sans-serif
;
210 /* position: fixed; */
220 * Can't make it work with awesomplete list z-index. Any idea?
230 #search input
[type
="text"] {
232 padding: 5px 5px 3px 15px;
235 transition: width
.5s ease
;
237 border: medium none currentColor
;
239 box-shadow: 0 1px 0 rgba
(255, 255, 255, 0.078), 0 1px 4px rgba
(0, 0, 0, 0.298) inset
;
244 #search input
[type
="text"]::-webkit-input-placeholder
{
249 background: transparent
;
254 #search button:hover
{
263 #header-login-form.open
{
269 #header-login-form input
[type
="text"], #header-login-form input
[type
="password"] {
273 #header-login-form input
, #header-login-form
.remember-me
{
274 transition: visibility
1s, opacity
1s;
279 #header-login-form.open input
, #header-login-form
.open
.remember-me
{
290 .subheader-form.open {
295 .subheader-form input[type="text"], .subheader-form input[type="password"], .subheader-form .remember-me {
297 padding: 5px 5px 3px 15px;
301 border: medium none currentColor
;
303 box-shadow: 0 1px 0 rgba
(255, 255, 255, 0.078), 0 1px 4px rgba
(0, 0, 0, 0.298) inset
;
308 .subheader-form input
[type
="text"]::-webkit-input-placeholder
,
309 .subheader-form input
[type
="password"]::-webkit-input-placeholder
314 .subheader-form .remember-me {
315 display: inline-block
;
317 padding: 5px 20px 3px 20px;
321 .subheader-form .remember-me label, .subheader-form .remember-me input {
325 .subheader-form input[type="submit"] {
326 display: inline-block
;
331 border: medium none currentColor
;
333 box-shadow: 1px 1px 2px #005C3E, -1px -1px 2px #005C3E;
337 .new-version-message {
341 .new-version-message a {
342 color: rgb
(151, 96, 13);
351 /* Hack-ish way to only shadow the top part. */
352 box-shadow: 0 -20px 20px -20px #797979;
354 background: url
(../img/noise.png) #979797;
357 @media screen and
(max-width: 64em) {
363 @media screen and
(min-width: 64em) {
365 /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
371 * CONTENT - LINKLIST PAGING
382 .linklist-filters a {
384 text-decoration: none
;
387 .linklist-filters .filter-off {
392 .linklist-filters .filter-on {
405 text-decoration: none
;
408 .linklist-pages a:hover {
421 text-decoration: none
;
424 border: solid
1px #979797;
432 .linksperpage input[type="text"] {
436 padding: 3px 5px 3px 8px;
438 border: medium none currentColor
;
439 --border-radius: 25px;
440 box-shadow: 0 1px 0 rgba
(255, 255, 255, 0.078), 0 1px 4px rgba
(0, 0, 0, 0.298) inset
;
446 * CONTENT - LINKLIST ITEMS
451 box-shadow: 2px 2px 0.5em #797979;
454 .linklist-item-title, .linklist-item-title h2 {
456 word-wrap: break-word
;
459 .linklist-item-title {
460 background: #20b988 url
(../img/noise.png);
461 border-bottom: 1px solid
#1b926c;
462 box-shadow: 1px 1px 0.2em #1b926c;
465 .linklist-item-title h2 {
466 padding: 3px 10px 0 10px;
470 .linklist-item-title a {
473 text-decoration: none
;
474 vertical-align: middle
;
475 font-family: Roboto Slab
, Arial
, sans-serif
;
478 .linklist-item-title .linklist-link:visited {
482 .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
487 .linklist-item-title .label-private {
488 border: solid
1px #d0fff0;
489 font-family: Arial
, sans-serif
;
493 .linklist-item-title .fold-button {
497 .linklist-item-editbuttons {
502 .linklist-item-editbuttons a {
506 .linklist-item-description {
508 font-family: Roboto Slab
, Arial
, sans-serif
;
509 word-wrap: break-word
;
512 .linklist-item-description a {
513 text-decoration: none
;
517 .linklist-item-description a:hover {
518 text-shadow: 1px 1px #ddd;
521 .linklist-item-description a:visited {
525 .linklist-item-thumbnail {
531 .linklist-item-infos {
532 padding: 5px 5px 0 5px;
533 background: #ddd url
(../img/noise.png);
534 border-top: 1px solid
#989898;
535 box-shadow: 1px -1px 0.2em #989898;
539 .linklist-item-infos a {
541 text-decoration: none
;
544 .linklist-item-infos a:hover {
548 .linklist-item-infos .linklist-item-tags {
553 .linklist-item-infos .linklist-item-infos .label-tag {
554 border: 1px solid
#505050;
558 .linklist-item-infos .label-tag:hover {
559 border: 1px solid
#000;
562 .linklist-item-infos-dateblock {
566 .linklist-plugin-icon {
571 .linklist-item-infos-url {
575 text-overflow: ellipsis
;
580 @media screen and
(max-width: 64em) {
581 .linklist-item-infos-url {
599 background: linear-gradient
(to right
, #949393, #252525, #949393);
614 background: url
(../img/noise.png) #1fa67a;
616 box-shadow: 1px 1px 2px #797979;
620 .page-form .window-title {
627 border-radius: 5px 5px 0 0;
628 border-bottom: 1px solid
#797979;
631 .page-form .window-subtitle {
640 .page-form input
[type
="text"],
641 .page-form input
[type
="password"],
642 .page-form textarea {
644 padding: 5px 5px 3px 15px;
648 border: medium none currentColor
;
650 box-shadow: 0 1px 0 rgba
(255, 255, 255, 0.078), 0 1px 4px rgba
(0, 0, 0, 0.298) inset
;
654 .page-form textarea {
656 padding: 15px 5px 3px 15px;
663 .page-form input
[type
="text"]::-webkit-input-placeholder
,
664 .page-form input[type="password"]::-webkit-input-placeholder {
668 .page-form input[type="submit"] {
673 border: medium none currentColor
;
675 box-shadow: 1px 1px 4px #0C7653, -1px -1px 6px #0C7653, -1px 1px 6px #0C7653, 1px -1px 6px #0C7653;
688 .page-form-light div, .page-form-light p {
693 * PAGE FORM - COMPLETE
695 .page-form-complete {
699 .page-form-complete div, .page-form-complete p {
703 .page-form-complete .form-label, .page-form-complete .form-input {
708 .page-form-complete
.form-label label
,
709 .page-form-complete
.form-input input
,
710 .page-form-complete .timezone {
713 transform: translateY
(-50%);
716 .page-form-complete .form-label label {
722 .page-form-complete .label-name {
726 .page-form-complete .label-desc {
730 .page-form-complete input
[type
="text"],
731 .page-form-complete input
[type
="password"],
732 .page-form-complete textarea {
746 .page-form table .order {
747 text-decoration: none
;
750 .page-form table, .page-form th, .page-form td {
753 border-color: #b0ddce;
756 .page-form th, .page-form td {
761 /* Awesomeplete fix */
762 .page-form .awesomplete {
766 .page-form .awesomplete input {
770 .page-form div.awesomplete > ul {
774 @media screen and
(max-width: 64em) {
775 .page-form-complete .form-label {
779 .page-form-complete
.form-label label
,
780 .page-form-complete
.form-input input
,
781 .page-form-complete .timezone {
784 transform: translateY
(0);
787 .page-form-complete .form-input input[type="checkbox"] {
791 transform: translateY
(-50%);
794 .page-form-complete .form-input {
798 .page-form-complete .form-label label {
804 .timezone-continent:after {
809 .page-form-complete .radio-buttons {
816 * Page visitor (page form extended)
819 background: url
(../img/noise.png) #fff;
830 #login-form .remember-me
{
837 * CONTENT - LINKLIST ITEMS
842 box-shadow: 2px 2px 0.5em #797979;
845 .linklist-item-title, .linklist-item-title h2 {
849 .linklist-item-title {
850 background: #20b988 url
(../img/noise.png);
851 border-bottom: 1px solid
#1b926c;
852 box-shadow: 1px 1px 0.2em #1b926c;
855 .linklist-item-title h2 {
856 padding: 3px 10px 0 10px;
860 .linklist-item-title a {
863 text-decoration: none
;
864 vertical-align: middle
;
865 font-family: Roboto Slab
, Arial
, sans-serif
;
868 .linklist-item-title .linklist-link:visited {
872 .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
876 .linklist-item-title .label-private {
877 border: solid
1px #d0fff0;
878 font-family: Arial
, sans-serif
;
882 .linklist-item-title .fold-button {
886 .linklist-item-editbuttons {
891 .linklist-item-editbuttons a {
895 .linklist-item-description {
897 font-family: Roboto Slab
, Arial
, sans-serif
;
900 .linklist-item-description a {
901 text-decoration: none
;
905 .linklist-item-description a:hover {
906 text-shadow: 1px 1px #ddd;
909 .linklist-item-description a:visited {
913 .linklist-item-infos {
915 background: #ddd url
(../img/noise.png);
916 border-top: 1px solid
#989898;
917 box-shadow: 1px -1px 0.2em #989898;
922 .linklist-item-infos a {
924 text-decoration: none
;
927 .linklist-item-infos a:hover {
931 .linklist-item-tags {
936 border: 1px solid
#505050;
941 border: 1px solid
#000;
944 .linklist-plugin-icon {
949 .linklist-item-infos-url {
953 text-overflow: ellipsis
;
961 text-decoration: none
;
964 .search-result .label-tag {
968 .search-result .label-tag .remove {
969 border-left: white
1px solid
;
984 #pluginform .mobile-row
{
992 @media screen and
(max-width: 64em) {
993 #pluginform .main-row
, #pluginform
.main-row td
{
994 border-bottom-style: none
;
997 #pluginform .mobile-row
, #pluginform
.mobile-row td
{
998 border-top-style: none
;
1018 #cloudtag, #cloudtag a
{
1020 text-decoration: none
;
1030 #picwall_container {
1031 margin: 0 10px 10px 10px;
1033 background-color: #000;
1037 .picwall_pictureframe {
1038 background-color: #000;
1041 display: table-cell
;
1042 vertical-align: middle
;
1051 -webkit-transition: opacity
500ms ease-in-out
;
1052 -moz-transition: opacity
500ms ease-in-out
;
1053 -o-transition: opacity
500ms ease-in-out
;
1054 transition: opacity
500ms ease-in-out
;
1061 .picwall_pictureframe img {
1065 } /* Adapt the width of the image */
1067 .picwall_pictureframe a {
1068 text-decoration: none
;
1071 /* CSS to show title when hovering an image - no javascript required. */
1072 .picwall_pictureframe span.info {
1076 .picwall_pictureframe:hover span.info {
1086 background-color: transparent
;
1087 background-color: rgba
(0, 0, 0, 0.4);
1088 /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
1089 filter: progid: DXImageTransform
.Microsoft
.gradient
(startColorstr
=#66000000, endColorstr
=#66000000);
1091 text-shadow: 2px 2px 1px #000000;
1104 text-decoration: none
;
1107 .daily-about a:hover {
1111 .daily-about h3:before, .daily-about h3:after {
1114 background: linear-gradient
(to right
, #d5d4d4, #252525, #d5d4d4);
1120 .daily-entry .daily-entry-title:after {
1123 background: linear-gradient
(to right
, #fff, #515151, #fff);
1129 .daily-entry .daily-entry-title {
1133 .daily-entry .daily-entry-title a {
1135 text-decoration: none
;
1138 .daily-entry .daily-entry-description {
1139 padding: 5px 5px 0 5px;
1141 text-align: justify
;
1144 .daily-entry .daily-entry-tags {
1145 padding: 0 5px 5px 5px;
1149 .daily-entry-thumbnail {
1151 margin: 15px 5px 5px 5px;
1154 .daily-entry-description a {
1155 text-decoration: none
;
1159 .daily-entry-description a:hover {
1160 text-shadow: 1px 1px #ddd;
1163 .daily-entry-description a:visited {