]>
git.immae.eu Git - github/wallabag/wallabag.git/blob - app/Resources/static/themes/material/css/main.css
20d1ddede55b489a453c9d095ce5f2dc80e122bf
1 /* ==========================================================================
14 ========================================================================== */
16 /* ==========================================================================
18 ========================================================================== */
22 src: url
("../fonts/IcoMoon-Free.ttf");
28 font-family: 'Material Icons';
31 src: url
(../fonts
/MaterialIcons-Regular
.eot
);
34 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");
38 font-family: 'Material Icons';
41 font-size: 24px; /* Preferred icon size */
44 display: inline-block
;
47 letter-spacing: normal
;
52 /* Support for all WebKit browsers. */
53 -webkit-font-smoothing: antialiased
;
55 /* Support for Safari and Chrome. */
56 text-rendering: optimizeLegibility
;
58 /* Support for Firefox. */
59 -moz-osx-font-smoothing: grayscale
;
62 font-feature-settings: 'liga';
65 [class^
="icon-"]::before
,
66 [class
*=" icon-"]::before
{
75 /* Enable Ligatures ================ */
77 -webkit-font-feature-settings: "liga";
78 -moz-font-feature-settings: "liga=1";
79 -moz-font-feature-settings: "liga";
80 -ms-font-feature-settings: "liga" 1;
81 -o-font-feature-settings: "liga";
82 font-feature-settings: "liga";
84 /* Better Font Rendering =========== */
85 -webkit-font-smoothing: antialiased
;
86 -moz-osx-font-smoothing: grayscale
;
90 background-size: 16px 16px;
91 background: no-repeat center
;
92 padding-right: 1em !important
;
93 padding-left: 1em !important
;
100 .icon-no-eye::before {
104 .icon-calendar::before {
112 /* Carrot (http://carrot.org) */
113 .icon-image--carrot {
114 background-image: url
("../../_global/img/icons/carrot-icon--black.png");
118 .icon-image--diaspora {
119 background-image: url
("../../_global/img/icons/diaspora-icon--black.png");
123 .icon-image--shaarli {
124 background-image: url
("../../_global/img/icons/shaarli.png");
131 flex-direction: column
;
141 border-bottom: 1px solid
#ddd;
165 .results
.nb-results
,
166 .results .pagination {
176 margin: 0 !important
;
189 .pagination .disabled {
194 div
.pagination ul
.prev
.disabled
,
195 div
.pagination ul
.next
.disabled
{
199 .pagination li.active span {
206 .page-footer .footer-copyright p {
214 .picker__date-display {
227 /* ==========================================================================
229 ========================================================================== */
235 .nav-wrapper .button-collapse {
247 .nav-panel-buttom li {
252 transition: background
0.2s ease
;
256 .nav-panel-search
.search
,
258 color: #444 !important
;
261 .nav-panels .action {
262 padding-left: 0.75rem;
267 .nav-panels .input-field input {
269 line-height: inherit
;
270 padding-left: 4rem !important
;
271 width: calc
(100% - 8rem);
274 .nav-panels .input-field input:focus {
275 background-color: #fff;
281 .input-field.nav-panel-add label {
285 .input-field.nav-panel-add .close {
292 transition: 0.3s color
;
303 .input-field
.nav-panel-add
,
304 .input-field.nav-panel-add form {
308 /* ==========================================================================
310 ========================================================================== */
318 .side-nav
.collapsible-header
,
319 .side-nav.fixed .collapsible-header {
329 .side-nav > li.logo {
344 background: transparent
;
359 /* ==========================================================================
361 * ========================================================================== */
368 .side-nav.fixed.right-aligned {
370 left: auto
!important
;
374 #filters div
.with-checkbox
{
379 /* ==========================================================================
381 ========================================================================== */
391 .data .card .card-body {
396 .card .card-content .card-title {
401 .card
.card-content i
.right
,
402 .card .card-reveal i.right {
406 .card .card-entry-labels {
413 .card .card-entry-labels li {
414 margin: 10px 10px 10px auto
;
415 padding: 5px 12px 5px 16px;
416 background-color: rgba
(0, 151, 167, 0.85);
417 border-radius: 0 3px 3px 0;
422 text-overflow: ellipsis
;
426 .card .card-entry-labels-hidden {
430 .card .card-entry-labels-hidden li {
431 display: inline-block
;
432 background-color: rgba
(0, 151, 167, 0.85);
438 max-width: calc
(100% - 15px);
440 text-overflow: ellipsis
;
444 .card .card-content .estimatedTime {
448 .card .card-action .original {
452 .card .card-action ul.links {
458 .card .card-action a {
463 .card .card-action a:hover {
467 .quickstart .card .card-action a, .quickstart .card .card-action a:hover {
468 color: #fff !important
;
471 .settings .div_tabs {
472 padding-bottom: 15px;
485 .card .card-image .preview {
487 background-size: cover
;
488 background-repeat: no-repeat
;
489 background-position: 50%;
492 /* ==========================================================================
494 ========================================================================== */
508 #article > header
> h1
{
513 width: 95px !important
;
514 transition: width
0.2s ease
;
518 width: 240px !important
;
521 .reader-mode .collapsible-body {
526 .reader-mode:hover .collapsible-body {
532 transition: opacity
0.2s ease
;
535 .reader-mode:hover span {
548 #article aside
.link
{
551 text-decoration: none
;
554 #article aside #list
{
559 #article aside
.chip
{
560 background-color: rgba
(0, 151, 167, 0.85);
562 padding: 0 15px 0 10px;
565 #article aside
.chip i
{
569 /* ==========================================================================
571 ========================================================================== */
573 @media only screen and
(max-width: 992px) {
591 width: 240px !important
;
599 display: inline-block
;
612 .pagination li.next {
617 @media only screen and
(min-width: 400px) {
623 @media only screen and
(min-width: 993px) and
(max-width: 1180px) {
675 @media only screen and
(max-width: 350px) {
681 /* ==========================================================================
683 ========================================================================== */
685 .icon-google-plus2::before {
689 .icon-facebook2::before {
693 .icon-twitter::before {
697 .icon-apple::before {
701 .icon-android::before {
705 .icon-chrome::before {
709 .icon-firefox::before {
717 footer
[class^
="icon-"],
718 footer
[class
*=" icon-"] {
720 transition: text-shadow
0.2s ease
;
724 footer
[class^
="icon-"]:hover
,
725 footer
[class
*=" icon-"]:hover
{
726 text-shadow: 0 0 10px rgba
(0, 0, 0, 0.3);
729 /* ==========================================================================
731 ========================================================================== */
733 /* force height on non-input field in the settings page */
734 div
.settings div
.input-field div
,
735 div
.settings div
.input-field ul
{
739 /* but avoid to kill all file input */
740 div
.settings div
.file-field div
{
744 .input-field label.active {