X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;ds=sidebyside;f=src%2FWallabag%2FCoreBundle%2FResources%2Fviews%2Fthemes%2Fmaterial%2Fpublic%2Fcss%2Fmain.css;h=0ce334a319212ac0a1a8e12b6547cd36c161d5ed;hb=39643c6b76d92d509b1af0228b6379d7fdce8a1c;hp=52a2be809bab7a2d8054a8bcb32c17e38eecf42f;hpb=fdab81e910f65babd1945e67c74b8bb541bcbfb3;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 52a2be80..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,10 @@ body { background: #f0f0f0; } +body.login main { + padding: 0; +} + #warning_message { position: fixed; background-color: #ff6347; @@ -48,6 +76,10 @@ nav, main, footer { padding-left: 240px; } +main, #content, .valign-wrapper { + height: 100%; +} + #main { flex: 1 0 auto; } @@ -84,6 +116,15 @@ nav, main, footer { display: none; } +footer.page-footer { + margin-top: 10px; + padding-top: 10px; +} + +footer .row { + margin-bottom: 10px; +} + /* ========================================================================== 1 = Nav ========================================================================== */ @@ -159,6 +200,9 @@ nav input { #button_filters { display: none; } +#button_export { + display: none; +} /* ========================================================================== 2 = Side-nav @@ -188,6 +232,10 @@ nav input { width: 100pt; } +#main .logo:hover { + background: transparent; +} + .side-nav li { padding: 0px; } @@ -211,8 +259,13 @@ nav input { overflow-y: visible; } +#filters div.with-checkbox { + height: 3rem; + margin-top: 0px; +} + /* ========================================================================== - 3 = Cards + 4 = Cards ========================================================================== */ main #content { @@ -223,7 +276,7 @@ main ul.row { padding: 0px 0.75rem; } -.data .card .card-content { +.data .card .card-body { height: 22em; overflow: hidden; } @@ -247,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; } @@ -260,8 +318,23 @@ 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 { @@ -305,6 +378,23 @@ main ul.row { 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 ========================================================================== */ @@ -365,3 +455,53 @@ main ul.row { 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; +} +/* but avoid to kill all file input */ +div.settings div.file-field div { + margin-top: inherit; +}