X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=src%2FWallabag%2FCoreBundle%2FResources%2Fviews%2Fthemes%2Fmaterial%2Fpublic%2Fcss%2Fmain.css;h=0ce334a319212ac0a1a8e12b6547cd36c161d5ed;hb=39643c6b76d92d509b1af0228b6379d7fdce8a1c;hp=8ec83f8997bef8fc58314d087056449c82e31e60;hpb=b17874a7d58e1ae853935a564b205566efd9ed74;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 8ec83f89..0ce334a3 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; } @@ -69,7 +142,7 @@ nav, main, footer { } .nav-panels { - overflov: hidden; + overflow: hidden; } .nav-panel-buttom li { @@ -80,6 +153,57 @@ nav, main, footer { float: right; } +.nav-panels { + transition: background 0.2s ease; +} + +.nav-panel-add .mdi-content-add, +.nav-panel-search .mdi-action-search, +.nav-panels .mdi-navigation-close { + color: #444 !important; +} + +.nav-panels .action { + padding-left: 0.75rem; + font-size: 2.1rem; + 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 ========================================================================== */ @@ -108,6 +232,10 @@ nav, main, footer { width: 100pt; } +#main .logo:hover { + background: transparent; +} + .side-nav li { padding: 0px; } @@ -117,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 { @@ -128,8 +276,9 @@ main ul.row { padding: 0px 0.75rem; } -.data .card .card-content { - min-height: 25em; +.data .card .card-body { + height: 22em; + overflow: hidden; } .card .card-content .card-title { @@ -151,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; } @@ -164,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 { @@ -183,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; @@ -192,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 ========================================================================== */ @@ -251,4 +454,54 @@ main ul.row { .nb-results { display: none; } -} \ No newline at end of file +} + +/* ========================================================================== + 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; +} +/* but avoid to kill all file input */ +div.settings div.file-field div { + margin-top: inherit; +}