X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=src%2FWallabag%2FCoreBundle%2FResources%2Fviews%2Fthemes%2Fmaterial%2Fpublic%2Fcss%2Fmain.css;h=7396557148a894df062d075abdae8df1ddd5e04a;hb=10b2411c1069e1a4b89ad1dcc5e2770d4230a186;hp=25ec0bfcbdc0027420b3f9ce4bd799028f3fba24;hpb=0e654f62730e233f586a4efee0d654311a498b9e;p=github%2Fwallabag%2Fwallabag.git diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css index 25ec0bfc..73965571 100755 --- a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css +++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css @@ -4,13 +4,12 @@ 0 = Common 1 = Nav 2 = Side-nav - - 2 = Layout - 3 = Pictos - 4 = Messages + 3 = Filters slider + 4 = Cards 5 = Article - 6 = Media queries + 7 = Font + 8 = Others ========================================================================== */ @@ -19,6 +18,31 @@ 0 = Common ========================================================================== */ +@font-face { + font-family: 'icomoon'; + src:url('../font/icomoon/icomoon.eot?yw303w'); + src:url('../font/icomoon/icomoon.eot?yw303w#iefix') format('embedded-opentype'), + url('../font/icomoon/icomoon.ttf?yw303w') format('truetype'), + url('../font/icomoon/icomoon.woff?yw303w') format('woff'), + url('../font/icomoon/icomoon.svg?yw303w#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"], [class*=" icon-"] { + font-family: 'icomoon'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + body { display: flex; min-height: 100vh; @@ -26,6 +50,24 @@ body { background: #f0f0f0; } +body.login main { + padding: 0; +} + +#warning_message { + position: fixed; + background-color: #ff6347; + z-index: 1000; + bottom: 0; + left: 0; + width: 100%; + color: #000; +} + +#warning_message a { + color: #555; +} + .border-bottom { border-bottom: 1px solid #DDD; } @@ -34,6 +76,10 @@ nav, main, footer { padding-left: 240px; } +main, #content, .valign-wrapper { + height: 100%; +} + #main { flex: 1 0 auto; } @@ -48,6 +94,16 @@ nav, main, footer { margin-bottom: 0; } +.pagination li { + padding: 0; +} + +.pagination a { + padding: 0px 10px; + height: 30px; + display: block; +} + .page-footer .footer-copyright p { display: inline; } @@ -56,10 +112,27 @@ nav, main, footer { display: none; } +.picker__date-display { + display: none; +} + +footer.page-footer { + margin-top: 10px; + padding-top: 10px; +} + +footer .row { + margin-bottom: 10px; +} + /* ========================================================================== 1 = Nav ========================================================================== */ +nav input { + color: #aaa; +} + .nav-wrapper .button-collapse { padding: 0px 15px; } @@ -96,6 +169,41 @@ nav, main, footer { white-space: nowrap; } +.nav-panels .input-field input { + display: block; + line-height: inherit; + padding-left: 4rem !important; + width: calc(100% - 8rem); +} + +.nav-panels .input-field input:focus { + background-color: #fff; + border: 0; + box-shadow: none; + color: #444; +} + +.input-field.nav-panel-add label { + left: 1rem; +} + +.input-field.nav-panel-add .mdi-navigation-close { + position: absolute; + top: 0; + right: 1rem; + color: transparent; + cursor: pointer; + font-size: 2rem; + transition: .3s color; +} + +#button_filters { + display: none; +} +#button_export { + display: none; +} + /* ========================================================================== 2 = Side-nav ========================================================================== */ @@ -124,6 +232,10 @@ nav, main, footer { width: 100pt; } +#main .logo:hover { + background: transparent; +} + .side-nav li { padding: 0px; } @@ -133,7 +245,27 @@ nav, main, footer { } /* ========================================================================== - 3 = Cards + * 3 = Filters slider + * ========================================================================== */ + +#filters button { + padding: 0px; + width: 100%; +} + +.side-nav.fixed.right-aligned { + right: -250px; + left: auto !important; + overflow-y: visible; +} + +#filters div.with-checkbox { + height: 3rem; + margin-top: 0px; +} + +/* ========================================================================== + 4 = Cards ========================================================================== */ main #content { @@ -144,7 +276,7 @@ main ul.row { padding: 0px 0.75rem; } -.data .card .card-content { +.data .card .card-body { height: 22em; overflow: hidden; } @@ -168,9 +300,14 @@ main ul.row { } .card .card-action a { + color: #ffffff; margin: 0; } +.card .card-action a:hover { + color: #ffffff; +} + .settings .div_tabs { padding-bottom: 15px; } @@ -181,14 +318,29 @@ main ul.row { margin-right: auto; } +.mdi-card-close:before { + content: "\e8aa"; +} + +.card .card-image { + height: 14em; +} + +.card .card-image .preview { + height: 14em; + background-size: cover; + background-repeat: no-repeat; + background-position: 50%; +} + /* ========================================================================== - 4 = Article + 5 = Article ========================================================================== */ #article { font-size: 20px; margin: 0px auto; - max-width: 30em; + max-width: 40em; } .reader-mode { @@ -200,6 +352,15 @@ main ul.row { width: 240px !important; } +.reader-mode .collapsible-body { + height: 0; + overflow: hidden; +} + +.reader-mode:hover .collapsible-body { + height: auto; +} + .reader-mode span { opacity: 0; transition: opacity 0.2s ease; @@ -209,6 +370,31 @@ main ul.row { opacity: 1; } +.progress { + position:fixed; + top:0px; + width: 100%; + height: 3px; + margin: 0; + z-index: 9999; +} + +#article aside .link { + color: #000; + font-size: 0.6em; + text-decoration: none; +} + +#article aside #list { + float: right; + margin-right: 15px; +} + +#article aside .chip { + background-color: #039be5; + color: #ffffff; +} + /* ========================================================================== 6 = Media queries ========================================================================== */ @@ -268,4 +454,50 @@ main ul.row { .nb-results { display: none; } +} + +/* ========================================================================== + 7 = Font + ========================================================================== */ + +.icon-google-plus2:before { + content: "\e800"; +} +.icon-facebook2:before { + content: "\e801"; +} +.icon-twitter:before { + content: "\e802"; +} +.icon-apple:before { + content: "\e803"; +} +.icon-android:before { + content: "\e804"; +} +.icon-chrome:before { + content: "\e805"; +} +.icon-firefox:before { + content: "\e806"; +} + +footer [class^="icon-"], footer [class*=" icon-"] { + font-size: 2em; + transition: text-shadow 0.2s ease; + padding-right: 10px; +} + +footer [class^="icon-"]:hover, footer [class*=" icon-"]:hover { + text-shadow: 0 0 10px rgba(0,0,0,0.3); +} + + +/* ========================================================================== + 8 = Others + ========================================================================== */ + +/* force height on non-input field in the settings page */ +div.settings div.input-field div, div.settings div.input-field ul { + margin-top: 40px; } \ No newline at end of file