X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=app%2FResources%2Fstatic%2Fthemes%2Fmaterial%2Fcss%2Fmain.css;h=b66c88f9c3ccc9262184a6ab2f595b873d47742e;hb=15f1352ef8761d3e083fc17c8354c30ca3542050;hp=053dfd91647fe3c2ce2222b63221333521d18e41;hpb=eef833d644f90518c712eccac7805d99562fd263;p=github%2Fwallabag%2Fwallabag.git diff --git a/app/Resources/static/themes/material/css/main.css b/app/Resources/static/themes/material/css/main.css index 053dfd91..b66c88f9 100755 --- a/app/Resources/static/themes/material/css/main.css +++ b/app/Resources/static/themes/material/css/main.css @@ -19,12 +19,7 @@ @font-face { font-family: icomoon; - src: url("../fonts/icomoon.eot"); - src: - url("../fonts/icomoon.eot#iefix") format("embedded-opentype"), - url("../fonts/icomoon.ttf") format("truetype"), - url("../fonts/icomoon.woff") format("woff"), - url("../fonts/icomoon.svg#icomoon") format("svg"); + src: url("../fonts/IcoMoon-Free.ttf"); font-weight: normal; font-style: normal; } @@ -34,6 +29,7 @@ font-style: normal; font-weight: 400; src: url(../fonts/MaterialIcons-Regular.eot); + /* For IE6-8 */ 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"); } @@ -55,6 +51,7 @@ /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; @@ -65,8 +62,8 @@ font-feature-settings: 'liga'; } -[class^="icon-"], -[class*=" icon-"] { +[class^="icon-"]::before, +[class*=" icon-"]::before { font-family: icomoon; speak: none; font-style: normal; @@ -74,12 +71,64 @@ font-variant: normal; text-transform: none; line-height: 1; + background-size: 24px; + + /* Enable Ligatures ================ */ + letter-spacing: 0; + -webkit-font-feature-settings: "liga"; + -moz-font-feature-settings: "liga=1"; + -moz-font-feature-settings: "liga"; + -ms-font-feature-settings: "liga" 1; + -o-font-feature-settings: "liga"; + font-feature-settings: "liga"; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } +.icon-image { + background-size: 16px; + background-repeat: no-repeat; + padding-right: 1em !important; + padding-left: 1em !important; +} + +.icon-eye::before { + content: "\e9ce"; +} + +.icon-no-eye::before { + content: "\e9d1"; +} + +.icon-calendar::before { + content: "\e953"; +} + +.icon-mail::before { + content: "\ea86"; +} + +.icon-time::before { + content: "\e952"; +} + +/* Carrot (http://carrot.org) */ +.icon-image--carrot { + background-image: url("../../_global/img/icons/carrot-icon--black.png"); +} + +/* Diaspora */ +.icon-image--diaspora { + background-image: url("../../_global/img/icons/diaspora-icon--black.png"); +} + +/* Shaarli */ +.icon-image--shaarli { + background-image: url("../../_global/img/icons/shaarli.png"); +} + body { display: flex; min-height: 100vh; @@ -89,6 +138,7 @@ body { body.login main { padding: 0; + min-height: 100vh; } .border-bottom { @@ -123,11 +173,11 @@ main, } .pagination { - float: right; + float: right; } .pagination ul { - margin: 0 !important; + margin: 0 !important; } .pagination li { @@ -141,8 +191,8 @@ main, } .pagination .disabled { - margin-right: 10px; - margin-left: 10px; + margin-right: 10px; + margin-left: 10px; } div.pagination ul .prev.disabled, @@ -151,10 +201,10 @@ div.pagination ul .next.disabled { } .pagination li.active span { - padding: 0px 10px; - height: 30px; - display: block; - color: #fff; + padding: 0 10px; + height: 30px; + display: block; + color: #fff; } .page-footer .footer-copyright p { @@ -171,7 +221,7 @@ div.pagination ul .next.disabled { footer.page-footer { margin-top: 10px; - padding-top: 10px; + padding-top: 0; } footer .row { @@ -254,6 +304,11 @@ nav input { display: none; } +.input-field.nav-panel-add, +.input-field.nav-panel-add form { + height: 100%; +} + /* ========================================================================== 2 = Side-nav ========================================================================== */ @@ -266,9 +321,9 @@ nav input { .side-nav .collapsible-header, .side-nav.fixed .collapsible-header { - height: 45px; - line-height: 44px; - padding: 0 20px; + height: 45px; + line-height: 44px; + padding: 0 20px; } .bold > a { @@ -301,6 +356,10 @@ nav input { margin: 0 1rem; } +span.numberItems { + float: right; +} + /* ========================================================================== * 3 = Filters slider * ========================================================================== */ @@ -340,44 +399,59 @@ main ul.row { .card .card-content .card-title { line-height: 32px; + max-height: 64px; +} + +.card .card-content i.right, +.card .card-reveal i.right { + margin-left: 0; } .card .card-entry-labels { - position: absolute; - top:10px; - z-index: 90; - max-width: 50%; + position: absolute; + top: 10px; + z-index: 90; + max-width: 50%; } .card .card-entry-labels li { - margin: 10px 10px 10px auto; - padding: 5px 12px 5px 16px; - background-color: rgba(0,151,167,0.85); - border-radius: 0 3px 3px 0; - color: #fff; - cursor: default; - max-height: 2em; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + margin: 10px 10px 10px auto; + padding: 5px 12px 5px 16px; + background-color: rgba(0, 151, 167, 0.85); + border-radius: 0 3px 3px 0; + color: #fff; + cursor: default; + max-height: 2em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .card .card-entry-labels-hidden { - margin-top: 5px; + margin-top: 5px; } .card .card-entry-labels-hidden li { - display: inline-block; - background-color: rgba(0,151,167,0.85); - margin: 0 5px; - padding: 5px 12px; - border-radius: 3px; - color: #fff; - max-height: 2em; - max-width: calc(100% - 15px); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + display: inline-block; + background-color: rgba(0, 151, 167, 0.85); + margin: 0 5px; + padding: 5px 12px; + border-radius: 3px; + color: #fff; + max-height: 2em; + max-width: calc(100% - 15px); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.card-entry-tags a, +.card-entry-labels a, +.card-entry-labels-hidden a, +#list .chip a { + text-decoration: none; + font-weight: normal; + color: #fff; } .card .card-content .estimatedTime { @@ -403,6 +477,11 @@ main ul.row { color: #fff; } +.quickstart .card .card-action a, +.quickstart .card .card-action a:hover { + color: #fff !important; +} + .settings .div_tabs { padding-bottom: 15px; } @@ -434,7 +513,8 @@ main ul.row { max-width: 40em; } -#article img { +#article img, +#article figure { max-width: 100%; height: auto; } @@ -491,7 +571,7 @@ main ul.row { } #article aside .chip { - background-color: rgba(0,151,167,0.85); + background-color: rgba(0, 151, 167, 0.85); color: #fff; padding: 0 15px 0 10px; } @@ -510,31 +590,40 @@ main ul.row { footer { padding-left: 0; } + nav, main, footer { padding-left: 0; } + .pagination { width: auto; - } + } + .reader-mode { width: 240px !important; } + .reader-mode span { opacity: 1; } + .tabs { display: inline-block; height: auto; } + .tab { min-width: 100%; } + .indicator { display: none; } - .pagination li.prev, .pagination li.next { + + .pagination li.prev, + .pagination li.next { width: auto; } } @@ -550,38 +639,47 @@ main ul.row { width: 25%; margin-left: 0; } + .row .col.l2 { width: 33.33333%; margin-left: 0; } + .row .col.l3 { width: 41.66667%; margin-left: 0; } + .row .col.l4 { width: 50%; margin-left: 0; } + .row .col.l5 { width: 58.33333%; margin-left: 0; } + .row .col.l6 { width: 66.66667%; margin-left: 0; } + .row .col.l7 { width: 75%; margin-left: 0; } + .row .col.l8 { width: 83.33333%; margin-left: 0; } + .row .col.l9 { width: 91.66667%; margin-left: 0; } + .row .col.l10 { width: 100%; margin-left: 0; @@ -607,7 +705,7 @@ main ul.row { } .icon-twitter::before { - content: "\ea91"; + content: "\ea96"; } .icon-apple::before { @@ -626,6 +724,10 @@ main ul.row { content: "\eae6"; } +.icon-link::before { + content: "\e9cb"; +} + footer [class^="icon-"], footer [class*=" icon-"] { font-size: 2em; @@ -633,8 +735,8 @@ footer [class*=" icon-"] { padding-right: 10px; } -footer [class^="icon-"]::hover, -footer [class*=" icon-"]::hover { +footer [class^="icon-"]:hover, +footer [class*=" icon-"]:hover { text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } @@ -652,3 +754,7 @@ div.settings div.input-field ul { div.settings div.file-field div { margin-top: inherit; } + +.input-field label.active { + font-size: 1rem; +}