X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=app%2FResources%2Fstatic%2Fthemes%2Fbaggy%2Fcss%2Fmain.css;h=4dfa8790cbecc8eb865041c3ef758feadc226d18;hb=1c282b1da0491cda620e03ab92c00341aa80e18b;hp=d46fae1a729dabe46213a0032bb3961057cbde66;hpb=49e2854d5c15bbce3f24f91da34450e8f209295b;p=github%2Fwallabag%2Fwallabag.git diff --git a/app/Resources/static/themes/baggy/css/main.css b/app/Resources/static/themes/baggy/css/main.css index d46fae1a..4dfa8790 100755 --- a/app/Resources/static/themes/baggy/css/main.css +++ b/app/Resources/static/themes/baggy/css/main.css @@ -84,7 +84,7 @@ a { } a.nostyle { - text-decoration: none; + text-decoration: none; } a:hover, @@ -146,7 +146,6 @@ input[type="submit"] { cursor: pointer; background-color: #000; color: #fff; - border: 0; padding: 0.5em 1em; display: inline-block; border: 1px solid #000; @@ -202,7 +201,7 @@ h2::after { } #main { - margin-left: 13em; + margin-left: 12em; position: relative; z-index: 10; padding-right: 5%; @@ -287,7 +286,6 @@ h2::after { #display-mode { float: right; - vertical-align: middle; margin-top: 10px; margin-bottom: 10px; opacity: 0.5; @@ -359,11 +357,64 @@ footer a { margin-left: 0 !important; } +.card-entry-labels { + position: absolute; + top: 100px; + left: -1em; + z-index: 90; + max-width: 50%; + padding-left: 0; +} + +.card-entry-labels li { + margin: 10px 10px 10px auto; + padding: 5px 12px 5px 25px; + background-color: rgba(0, 0, 0, 0.6); + border-radius: 0 3px 3px 0; + color: #fff; + cursor: default; + max-height: 2em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.card-entry-tags { + max-height: 2em; + overflow-y: hidden; + padding: 0; + margin: 0; +} + +.card-entry-tags li, +.card-entry-tags span { + display: inline-block; + margin: 0 5px; + padding: 5px 12px; + background-color: rgba(0, 0, 0, 0.6); + border-radius: 3px; + max-height: 2em; + overflow: hidden; + text-overflow: ellipsis; +} + +.card-entry-tags a, +.card-entry-labels a { + text-decoration: none; + font-weight: normal; + color: #fff; +} + +.nav-panel-add-tag { + margin-top: 10px; +} + .list-entries + .results { margin-bottom: 2em; } -.estimatedTime .reading-time { +.reading-time, +.created-at { color: #999; font-style: italic; font-weight: normal; @@ -383,10 +434,11 @@ footer a { width: 32%; margin-bottom: 1.5em; vertical-align: top; - margin-left: 1.5%; + margin-right: 1%; position: relative; overflow: hidden; - padding: 1.5em 1.5em 3em 1.5em; + padding: 1.5em 1.5em 3em; + height: 440px; } .entry::before { @@ -394,7 +446,7 @@ footer a { width: 0; height: 0; border-style: solid; - border-color: transparent transparent #000 transparent; + border-color: transparent transparent #000; border-width: 10px; position: absolute; bottom: 0.3em; @@ -461,13 +513,16 @@ footer a { } img.preview { - max-width: 100%; + max-width: calc(100% + 3em); + left: -1.5em; + position: relative; } .entry p { color: #666; font-size: 0.9em; line-height: 1.7; + margin-top: 5px; } .entry h2 a::first-letter { @@ -527,7 +582,6 @@ img.preview { div.pagination ul { text-align: right; - margin-bottom: 50px; } .nb-results { @@ -653,7 +707,7 @@ div.pagination ul .current { .add-to-wallabag-link-after { background-color: #000; color: #fff; - padding: 0 3px 2px 3px; + padding: 0 3px 2px; } a.add-to-wallabag-link-after { @@ -682,7 +736,7 @@ a.add-to-wallabag-link-after::after { } .btn-clickable { - cursor: pointer; + cursor: pointer; } /* ========================================================================== @@ -691,12 +745,7 @@ a.add-to-wallabag-link-after::after { @font-face { font-family: icomoon; - src: url("../fonts/icomoon.eot?-s0mcsx"); - src: - url("../fonts/icomoon.eot?#iefix-s0mcsx") format("embedded-opentype"), - url("../fonts/icomoon.woff?-s0mcsx") format("woff"), - url("../fonts/icomoon.ttf?-s0mcsx") format("truetype"), - url("../fonts/icomoon.svg?-s0mcsx#icomoon") format("svg"); + src: url("../fonts/IcoMoon-Free.ttf"); font-weight: normal; font-style: normal; } @@ -706,6 +755,7 @@ a.add-to-wallabag-link-after::after { 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"); } @@ -727,6 +777,7 @@ a.add-to-wallabag-link-after::after { /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; @@ -758,6 +809,15 @@ a.add-to-wallabag-link-after::after { text-transform: none; line-height: 1; + /* 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; @@ -800,7 +860,7 @@ a.add-to-wallabag-link-after::after { } .icon-twitter::before { - content: "\ea91"; + content: "\ea96"; } .icon-down-open::before { @@ -839,6 +899,22 @@ a.add-to-wallabag-link-after::after { content: "\e936"; } +.icon-eye::before { + content: "\e9ce"; +} + +.icon-no-eye::before { + content: "\e9d1"; +} + +.icon-calendar::before { + content: "\e953"; +} + +.icon-time::before { + content: "\e952"; +} + /* .icon-image class, for image-based icons ========================================================================== */ @@ -860,6 +936,11 @@ a.add-to-wallabag-link-after::after { background-image: url("../../_global/img/icons/diaspora-icon--black.png"); } +/* shaarli */ +.icon-image--shaarli { + background-image: url("../../_global/img/icons/shaarli.png"); +} + /* ========================================================================== Icon selected ========================================================================== */ @@ -953,6 +1034,7 @@ blockquote { #article_toolbar li { display: inline-block; + margin: 3px auto; } #article_toolbar a { @@ -1025,7 +1107,7 @@ pre code { font-family: "Courier New", Courier, monospace; } -#filter-form { +#filters { position: fixed; width: 20%; height: 100%; @@ -1040,35 +1122,35 @@ pre code { min-width: 300px; } -#filter-form form .filter-group { +#filters form .filter-group { margin: 5px; } #download-form { - position: fixed; - width: 10%; - height: 100%; - top: 0; - right: 0; - background-color: #fff; - padding: 15px; - padding-right: 30px; - padding-top: 30px; - border-left: 1px #333 solid; - z-index: 12; - min-width: 200px; + position: fixed; + width: 10%; + height: 100%; + top: 0; + right: 0; + background-color: #fff; + padding: 15px; + padding-right: 30px; + padding-top: 30px; + border-left: 1px #333 solid; + z-index: 12; + min-width: 200px; } #download-form li { - display: block; - padding: .5em 2em .5em 1em; - color: #fff; - position: relative; - text-transform: uppercase; - text-decoration: none; - font-weight: 400; - font-family: PT Sans,sans-serif; - transition: all .5s ease; + display: block; + padding: 0.5em 2em 0.5em 1em; + color: #fff; + position: relative; + text-transform: uppercase; + text-decoration: none; + font-weight: 400; + font-family: PT Sans, sans-serif; + transition: all 0.5s ease; } /* ========================================================================== @@ -1079,9 +1161,11 @@ pre code { .entry { width: 49%; } + .entry:nth-child(3n+1) { margin-left: 1.5%; } + .entry:nth-child(2n+1) { margin-left: 0; } @@ -1091,6 +1175,7 @@ pre code { #article { width: 80%; } + .topPosF { right: 2.5em; } @@ -1101,11 +1186,20 @@ pre code { width: 100%; margin-left: 0; } + #display-mode { display: none; } } +@media screen and (max-height: 770px) { + .menu.users, + .menu.internal, + .menu.developer { + display: none; + } +} + @media screen and (max-width: 500px) { .entry { width: 100%; @@ -1148,11 +1242,9 @@ pre code { } .login .logo { - width: auto; height: auto; top: 0.5em; width: 75px; - height: 75px; margin-left: -37.5px; } @@ -1169,6 +1261,7 @@ pre code { background-color: #999; font-size: 1.2em; } + .desktopHide:hover, .desktopHide:focus { background-color: #fff; @@ -1197,6 +1290,10 @@ pre code { margin-top: 3em; } + .card-entry-labels { + display: none; + } + #article_toolbar .topPosF { display: none; }