1 /* ==========================================================================
11 ========================================================================== */
18 background-color: #eee;
22 background-color: #333;
31 background-color: #fff;
33 box-shadow: 0 1px 8px rgba
(0, 0, 0, 0.9);
48 /* ==========================================================================
50 ========================================================================== */
54 background-color: #000;
71 font-family: "PT Sans", sans-serif
;
72 text-transform: uppercase
;
87 text-decoration: none
;
92 text-decoration: none
;
101 form input
[type
="text"],
102 form input
[type
="number"],
104 form input
[type
="password"],
105 form input
[type
="url"],
106 form input
[type
="email"] {
107 border: 1px solid
#999;
113 @media screen and
(-webkit-min-device-pixel-ratio: 0) {
115 -webkit-appearance: none
;
117 background: #fff url
("../../_global/img/bg-select.png") no-repeat right center
;
122 display: inline-block
;
131 display: inline-block
;
141 margin-bottom: 0.5em;
145 input
[type
="submit"] {
147 background-color: #000;
150 display: inline-block
;
151 border: 1px solid
#000;
156 input
[type
="submit"]:hover
,
157 input
[type
="submit"]:focus
{
158 background-color: #fff;
160 -webkit-transition: all
0.5s ease
;
161 -moz-transition: all
0.5s ease
;
162 -ms-transition: all
0.5s ease
;
163 -o-transition: all
0.5s ease
;
164 transition: all
0.5s ease
;
175 background-color: #000;
196 background-color: #333;
199 box-shadow: inset
-4px 0 20px rgba
(0, 0, 0, 0.6);
213 padding: 0.5em 2em 0.5em 1em;
216 text-transform: uppercase
;
217 text-decoration: none
;
219 font-family: "PT Sans", sans-serif
;
220 -webkit-transition: all
0.5s ease
;
221 -moz-transition: all
0.5s ease
;
222 -ms-transition: all
0.5s ease
;
223 -o-transition: all
0.5s ease
;
224 transition: all
0.5s ease
;
227 #links > li
> a:hover
,
228 #links > li
> a:focus
{
229 background-color: #999;
233 #links .current::after
{
240 border-color: transparent
#eee transparent transparent
;
246 #links li:last-child
{
252 #links li:last-child
a::before
{
260 list-style-type: none
;
262 display: inline-block
;
276 vertical-align: middle
;
280 vertical-align: baseline
;
296 display: inline-block
;
297 text-decoration: none
;
304 #listmode.tablemode
{
305 background-image: url
("../img/baggy/table.png");
306 background-repeat: no-repeat
;
307 background-position: bottom
;
311 background-image: url
("../img/baggy/list.png");
312 background-repeat: no-repeat
;
313 background-position: bottom
;
318 background-color: #ff6347;
326 /* ==========================================================================
328 ========================================================================== */
352 letter-spacing: -5px;
356 width: 100% !important
;
357 margin-left: 0 !important
;
369 .card-entry-labels li {
370 margin: 10px 10px 10px auto
;
371 padding: 5px 12px 5px 25px;
372 background-color: rgba
(0, 0, 0, 0.6);
373 border-radius: 0 3px 3px 0;
378 text-overflow: ellipsis
;
390 .card-entry-tags span {
391 display: inline-block
;
394 background-color: rgba
(0, 0, 0, 0.6);
398 text-overflow: ellipsis
;
402 .card-entry-labels a {
403 text-decoration: none
;
412 .list-entries + .results {
416 .estimatedTime .reading-time {
423 .estimatedTime small {
429 background-color: #fff;
430 letter-spacing: normal
;
431 box-shadow: 0 3px 7px rgba
(0, 0, 0, 0.3);
432 display: inline-block
;
434 margin-bottom: 1.5em;
439 padding: 1.5em 1.5em 3em;
448 border-color: transparent transparent
#000;
454 -webkit-transition: all
0.5s ease
;
455 -moz-transition: all
0.5s ease
;
456 -ms-transition: all
0.5s ease
;
457 -o-transition: all
0.5s ease
;
458 transition: all
0.5s ease
;
468 background-color: #000;
469 -webkit-transition: all
0.5s ease
;
470 -moz-transition: all
0.5s ease
;
471 -ms-transition: all
0.5s ease
;
472 -o-transition: all
0.5s ease
;
473 transition: all
0.5s ease
;
477 box-shadow: 0 3px 10px rgba
(0, 0, 0, 1);
480 .entry:hover::after {
484 .entry:hover::before {
493 text-transform: none
;
504 text-decoration: none
;
506 word-wrap: break-word
;
507 -webkit-transition: all
0.5s ease
;
508 -moz-transition: all
0.5s ease
;
509 -ms-transition: all
0.5s ease
;
510 -o-transition: all
0.5s ease
;
511 transition: all
0.5s ease
;
515 max-width: calc
(100% + 3em);
527 .entry h2 a::first-letter {
528 text-transform: uppercase
;
531 .entry:hover .tools {
541 padding-right: 0.5em;
543 -webkit-transition: all
0.5s ease
;
544 -moz-transition: all
0.5s ease
;
545 -ms-transition: all
0.5s ease
;
546 -o-transition: all
0.5s ease
;
547 transition: all
0.5s ease
;
552 text-decoration: none
;
557 .entry .tools a:hover {
562 display: inline-block
;
565 .entry:nth-child(3n+1) {
570 letter-spacing: -5px;
575 display: inline-block
;
577 letter-spacing: normal
;
593 div
.pagination ul
> * {
594 display: inline-block
;
598 div
.pagination ul a
{
600 text-decoration: none
;
603 div
.pagination ul
a:hover
,
604 div
.pagination ul
a:focus
{
605 text-decoration: underline
;
608 div
.pagination ul
.prev
.disabled
,
609 div
.pagination ul
.next
.disabled
{
613 div
.pagination ul
.current
{
616 border: 1px solid
#d5d5d5;
617 text-decoration: none
;
620 background-color: #ccc;
623 /* ==========================================================================
624 2.1 = "save a link" related styles
625 ========================================================================== */
628 background: rgba
(0, 0, 0, 0.5);
636 margin-top: -30% !important
;
639 border-left: 1px #eee solid
;
643 background-color: #fff;
648 border: 10px solid
#000;
654 #bagit-form-form .addurl
{
660 background-color: #000;
667 text-decoration: none
;
673 .close-button:focus {
674 background-color: #999;
678 .close-button--popup {
679 display: inline-block
;
687 background-color: #999;
690 .active-current::after {
697 border-color: transparent
#eee transparent transparent
;
707 .add-to-wallabag-link-after {
708 background-color: #000;
713 a
.add-to-wallabag-link-after
{
717 transition-duration: 2s;
718 transition-timing-function: ease-out
;
721 #article article
a:hover
+ a
.add-to-wallabag-link-after
,
722 a
.add-to-wallabag-link-after:hover
{
725 transition-duration: 0.3s;
726 transition-timing-function: ease-in
;
729 a
.add-to-wallabag-link-after::after
{
742 /* ==========================================================================
744 ========================================================================== */
747 font-family: icomoon
;
748 src: url
("../fonts/IcoMoon-Free.ttf");
754 font-family: 'Material Icons';
757 src: url
(../fonts
/MaterialIcons-Regular
.eot
);
760 src: local
("Material Icons"), local
("MaterialIcons-Regular"), url
(../fonts
/MaterialIcons-Regular
.woff2
) format
("woff2"), url
(../fonts
/MaterialIcons-Regular
.woff
) format
("woff"), url
(../fonts
/MaterialIcons-Regular
.ttf
) format
("truetype");
764 font-family: 'Material Icons';
767 font-size: 1em; /* Preferred icon size */
770 display: inline-block
;
772 text-transform: none
;
773 letter-spacing: normal
;
778 /* Support for all WebKit browsers. */
779 -webkit-font-smoothing: antialiased
;
781 /* Support for Safari and Chrome. */
782 text-rendering: optimizeLegibility
;
784 /* Support for Firefox. */
785 -moz-osx-font-smoothing: grayscale
;
787 /* Support for IE. */
788 font-feature-settings: 'liga';
791 .material-icons.md-18 { font-size: 18px; }
792 .material-icons.md-24 { font-size: 24px; }
793 .material-icons.md-36 { font-size: 36px; }
794 .material-icons.md-48 { font-size: 48px; }
802 [class^
="icon-"]::before
,
803 [class
*=" icon-"]::before
{
804 font-family: icomoon
;
808 font-variant: normal
;
809 text-transform: none
;
812 /* Enable Ligatures ================ */
814 -webkit-font-feature-settings: "liga";
815 -moz-font-feature-settings: "liga=1";
816 -moz-font-feature-settings: "liga";
817 -ms-font-feature-settings: "liga" 1;
818 -o-font-feature-settings: "liga";
819 font-feature-settings: "liga";
821 /* Better Font Rendering =========== */
822 -webkit-font-smoothing: antialiased
;
823 -moz-osx-font-smoothing: grayscale
;
826 .icon-flattr::before {
834 .icon-up-open::before {
842 .icon-check::before {
850 .icon-reply::before {
858 .icon-clock::before {
862 .icon-twitter::before {
866 .icon-down-open::before {
870 .icon-trash::before {
874 .icon-delete::before {
878 .icon-power::before {
882 .icon-arrow-up-thick::before {
890 .icon-print::before {
894 .icon-reload::before {
898 .icon-price-tags::before {
906 .icon-no-eye::before {
910 .icon-calendar::before {
918 /* .icon-image class, for image-based icons
919 ========================================================================== */
922 background-size: 16px 16px;
923 background-repeat: no-repeat
;
924 background-position: center
;
925 padding-right: 1em !important
;
926 padding-left: 1em !important
;
929 /* Carrot (http://carrot.org) */
930 .icon-image--carrot {
931 background-image: url
("../../_global/img/icons/carrot-icon--white.png");
935 .icon-image--diaspora {
936 background-image: url
("../../_global/img/icons/diaspora-icon--black.png");
940 .icon-image--unmark {
941 background-image: url
("../../_global/img/icons/unmark-icon--black.png");
945 .icon-image--shaarli {
946 background-image: url
("../../_global/img/icons/shaarli.png");
949 /* ==========================================================================
951 ========================================================================== */
953 .icon-star.fav::before {
957 .icon-check.archive::before {
961 /* ==========================================================================
963 ========================================================================== */
971 display: inline-block
;
990 /* ==========================================================================
992 ========================================================================== */
1009 border: 1px solid
#999;
1010 background-color: #fff;
1022 text-transform: none
;
1025 #article h2::after
{
1040 #article_toolbar li
{
1041 display: inline-block
;
1045 #article_toolbar a
{
1046 background-color: #000;
1047 padding: 0.3em 0.5em 0.2em;
1049 text-decoration: none
;
1052 #article_toolbar a:hover
,
1053 #article_toolbar a:focus
{
1054 background-color: #999;
1066 text-decoration: none
;
1072 margin-right: 0.5em;
1081 background-color: #000;
1083 padding: 0.2em 0.5em;
1092 margin-bottom: 0.5em;
1095 .list-tags
.icon-rss:hover
,
1096 .list-tags .icon-rss:focus {
1097 background-color: #fff;
1099 text-decoration: none
;
1103 text-decoration: none
;
1107 .list-tags a:focus {
1108 text-decoration: underline
;
1112 font-family: "Courier New", Courier
, monospace
;
1121 background-color: #fff;
1123 padding-right: 30px;
1125 border-left: 1px #333 solid
;
1130 #filters form
.filter-group
{
1140 background-color: #fff;
1142 padding-right: 30px;
1144 border-left: 1px #333 solid
;
1151 padding: 0.5em 2em 0.5em 1em;
1154 text-transform: uppercase
;
1155 text-decoration: none
;
1157 font-family: PT Sans
, sans-serif
;
1158 transition: all
0.5s ease
;
1161 /* ==========================================================================
1163 ========================================================================== */
1165 @media screen and
(max-width: 1050px) {
1170 .entry:nth-child(3n+1) {
1174 .entry:nth-child(2n+1) {
1179 @media screen and
(max-width: 900px) {
1189 @media screen and
(max-width: 700px) {
1200 @media screen and
(max-height: 770px) {
1208 @media screen and
(max-width: 500px) {
1215 background-color: #333;
1223 #links li:last-child
{
1228 #links li:last-child
a::before
{
1253 margin-left: -37.5px;
1266 background-color: #999;
1271 .desktopHide:focus {
1272 background-color: #fff;
1293 padding-right: 1.5em;
1298 .card-entry-labels {
1302 #article_toolbar .topPosF
{
1314 #article_toolbar a
{
1315 padding: 0.3em 0.4em 0.2em;