From 2003ffa97e98d35130c93d158c453ce9b926b838 Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Thu, 4 May 2017 17:44:42 +0200 Subject: Fix according to review --- .../static/themes/material/css/article.scss | 33 +- .../static/themes/material/css/cards.scss | 28 +- .../static/themes/material/css/icons.scss | 4 +- app/Resources/static/themes/material/css/main.css | 1024 -------------------- .../static/themes/material/css/sidenav.scss | 2 +- 5 files changed, 39 insertions(+), 1052 deletions(-) delete mode 100755 app/Resources/static/themes/material/css/main.css (limited to 'app/Resources/static/themes/material/css') diff --git a/app/Resources/static/themes/material/css/article.scss b/app/Resources/static/themes/material/css/article.scss index 7d0bdac7..dc12f857 100644 --- a/app/Resources/static/themes/material/css/article.scss +++ b/app/Resources/static/themes/material/css/article.scss @@ -106,11 +106,11 @@ font-size: 0.8em; display: flex; flex-flow: row wrap; - margin: 0 auto; li { display: inline-flex; vertical-align: middle; + margin: 0 5px; } a { @@ -121,7 +121,7 @@ #list { float: right; - margin: 0 15px 10px; + margin: -5px 15px auto; } .chip { @@ -133,12 +133,19 @@ i { color: #fff; } + + i.material-icons { + float: right; + font-size: 20px; + line-height: 32px; + padding-left: 8px; + } } } } .reader-mode { - width: 95px !important; + width: 70px !important; transition: width 0.2s ease; .collapsible-body { @@ -150,17 +157,21 @@ opacity: 0; transition: opacity 0.2s ease; } -} -.reader-mode:hover { - width: 240px !important; + &:hover { + width: 260px !important; - .collapsible-body { - height: auto; - } + .collapsible-body { + height: auto; - span { - opacity: 1; + li a i.material-icons { + margin: auto 5px auto 0; + } + } + + span { + opacity: 1; + } } } diff --git a/app/Resources/static/themes/material/css/cards.scss b/app/Resources/static/themes/material/css/cards.scss index 18ef6e60..2fa6535a 100644 --- a/app/Resources/static/themes/material/css/cards.scss +++ b/app/Resources/static/themes/material/css/cards.scss @@ -114,20 +114,6 @@ main { } } - .card-entry-labels li, - .card-tag-labels li { - margin: 10px 10px 10px auto; - padding: 5px 12px 5px 16px !important; - background-color: $blueAccentColor; - border-radius: 0 3px 3px 0; - color: #fff; - cursor: default; - max-height: 2em; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - .card-image { height: 10em; } @@ -156,6 +142,20 @@ a.original { display: block; } +.card-entry-labels li, +.card-tag-labels li { + margin: 10px 10px 10px auto; + padding: 5px 12px 5px 16px !important; + background-color: $blueAccentColor; + border-radius: 0 3px 3px 0; + color: #fff; + cursor: default; + max-height: 2em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + .card-entry-tags a, .card-entry-labels a, .card-tag-labels a, diff --git a/app/Resources/static/themes/material/css/icons.scss b/app/Resources/static/themes/material/css/icons.scss index 268e6dca..1eeab902 100644 --- a/app/Resources/static/themes/material/css/icons.scss +++ b/app/Resources/static/themes/material/css/icons.scss @@ -111,7 +111,7 @@ a.icon-image { background-repeat: no-repeat; padding-right: 0.4em !important; - padding-left: 1em !important; + padding-left: 0 !important; margin-left: 25px; &::before { @@ -120,7 +120,7 @@ a.icon-image { width: 24px; height: 24px; float: left; - margin: 0 6px 0 0; + margin: 7px 1.5px 0 0; } &.carrot::before { diff --git a/app/Resources/static/themes/material/css/main.css b/app/Resources/static/themes/material/css/main.css deleted file mode 100755 index 45428e23..00000000 --- a/app/Resources/static/themes/material/css/main.css +++ /dev/null @@ -1,1024 +0,0 @@ -/* ========================================================================== - Sommaire - - 0 = Common - 1 = Nav - 2 = Side-nav - 3 = Filters slider - 4 = Cards - 5 = Article - 6 = Media queries - 7 = Font - 8 = Others - - ========================================================================== */ - -/* ========================================================================== - 0 = Common - ========================================================================== */ - -/** - * - * Material icons - * - */ - -@font-face { - font-family: 'Material Icons'; - 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"); -} - -.material-icons { - font-family: 'Material Icons'; - font-weight: normal; - font-style: normal; - font-size: 24px; /* Preferred icon size */ - width: 1em; - height: 1em; - display: inline-block; - line-height: 1; - text-transform: none; - letter-spacing: normal; - word-wrap: normal; - white-space: nowrap; - direction: ltr; - - /* Support for all WebKit browsers. */ - -webkit-font-smoothing: antialiased; - - /* Support for Safari and Chrome. */ - text-rendering: optimizeLegibility; - - /* Support for Firefox. */ - -moz-osx-font-smoothing: grayscale; - - /* Support for IE. */ - font-feature-settings: 'liga'; -} - -/* Rules for sizing the icon. */ -.material-icons.md-18 { font-size: 18px; } -.material-icons.md-24 { font-size: 24px; } -.material-icons.md-36 { font-size: 36px; } -.material-icons.md-48 { font-size: 48px; } - -/* Rules for using icons as black on a light background. */ -.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } -.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } - -/* Rules for using icons as white on a dark background. */ -.material-icons.md-light { color: rgba(255, 255, 255, 1); } -.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } - -/** - * - * Icomoon icons - * - */ - -@font-face { - font-family: icomoon; - src: url("../fonts/IcoMoon-Free.ttf"); - font-weight: normal; - font-style: normal; -} - -[class^="icon-"]::before, -[class*=" icon-"]::before { - font-family: icomoon; - speak: none; - font-style: normal; - font-weight: normal; - 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"); -} - -/* Unmark.it */ -.icon-image--unmark { - background-image: url("../../_global/img/icons/unmark-icon--black.png"); -} - -/* Shaarli */ -.icon-image--shaarli { - background-image: url("../../_global/img/icons/shaarli.png"); -} - -/* Scuttle */ -.icon-image--scuttle { - background-image: url("../../_global/img/icons/scuttle.png"); -} - -body { - display: flex; - min-height: 100vh; - flex-direction: column; - background: #fafafa; -} - -body.login main { - padding: 0; - min-height: 100vh; -} - -.border-bottom { - border-bottom: 1px solid #ddd; -} - -nav, -main, -footer { - padding-left: 240px; -} - -main, -#content, -.valign-wrapper { - height: 100%; -} - -#main { - flex: 1 0 auto; -} - -.results { - height: 1em; -} - -.results .nb-results, -.results .pagination { - margin: 15px; - margin-bottom: 0; -} - -.results .nb-results { - display: inline-flex; -} - -.results a { - color: #444; -} - -.pagination { - float: right; -} - -.pagination ul { - margin: 0 !important; -} - -.pagination li { - padding: 0; -} - -.pagination a { - padding: 0 10px; - height: 30px; - display: block; -} - -.pagination .disabled { - margin-right: 10px; - margin-left: 10px; -} - -div.pagination ul .prev.disabled, -div.pagination ul .next.disabled { - display: none; -} - -.pagination li.active span { - padding: 0 10px; - height: 30px; - display: block; - color: #fff; -} - -.page-footer .footer-copyright { - min-width: 50px; - height: auto !important; - line-height: 1em !important; -} - -.page-footer .footer-copyright p { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - display: block; -} - -.hidden { - display: none; -} - -.picker__date-display { - display: none; -} - -footer.page-footer { - margin-top: 10px; - padding-top: 0; -} - -footer .row { - margin-bottom: 10px; -} - -/* ========================================================================== - 1 = Nav - ========================================================================== */ - -nav input { - color: #aaa; -} - -nav { - height: auto; -} - -.nav-wrapper { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - min-height: 64px; -} - -.nav-wrapper .button-collapse { - padding: 0 15px; -} - -.nav-input { - display: none; -} - -.nav-panel-buttom { - display: flex; - flex-grow: 1; - justify-content: flex-end; -} - -.nav-panel-buttom li { - max-height: 64px; -} - -.nav-panels { - transition: background 0.2s ease; -} - -.nav-panel-add .add, -.nav-panel-search .search, -.nav-panels .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, -.input-field.nav-panel-search label { - left: 1rem; -} - -.input-field.nav-panel-add .close, -.input-field.nav-panel-search .close { - position: absolute; - top: 0; - right: 1rem; - color: transparent; - cursor: pointer; - font-size: 2rem; - transition: 0.3s color; -} - -#button_filters { - display: none; -} - -#button_export { - display: none; -} - -.input-field.nav-panel-add, -.input-field.nav-panel-add form, -.input-field.nav-panel-search, -.input-field.nav-panel-search form { - display: flex; - flex: 1; -} - -/* ========================================================================== - 2 = Side-nav - ========================================================================== */ - -.side-nav.fixed a { - font-size: 13px; - line-height: 44px; - height: 44px; -} - -.side-nav .collapsible-header, -.side-nav.fixed .collapsible-header { - height: 45px; - line-height: 44px; - padding: 0 20px; -} - -.bold > a { - font-weight: bold; -} - -.side-nav > li.logo { - line-height: 0; - text-align: center; -} - -#main .logo a { - height: 100pt; -} - -#main .logo img { - height: 100pt; - width: 100pt; -} - -#main .logo:hover { - background: transparent; -} - -.side-nav li { - padding: 0; -} - -.side-nav a { - margin: 0 1rem; -} - -span.numberItems { - float: right; -} - -nav ul a:hover { - background-color: initial; -} - -/* ========================================================================== - * 3 = Filters slider - * ========================================================================== */ - -#filters button { - padding: 0; - width: 100%; -} - -.side-nav.fixed.right-aligned { - right: -250px; - left: auto !important; -} - -#filters div.with-checkbox { - height: 3rem; - margin-top: 0; -} - -/* ========================================================================== - 4 = Cards - ========================================================================== */ - -main #content { - padding: 0 0.5rem; -} - -main ul.row { - padding: 0 0.75rem; -} - -.data .card .card-body { - height: 19em; - overflow: hidden; -} - -.card .card-content .card-title, -.card .card-reveal .card-title { - line-height: 22.8px; - max-height: 80px; - font-size: 19px; - font-family: roberto, "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #313131; -} - -.card .card-content .activator, -.card .card-reveal .activator { - cursor: pointer; - font-family: "Material Icons"; -} - -.card .card-content i.right, -.card .card-reveal i.right { - margin-left: 0; -} - -.card .card-content .original { - line-height: 24px; - font-size: 15px; -} - -a.original { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - display: block; -} - -.card .card-entry-labels { - position: absolute; - top: 10px; - z-index: 90; - max-width: 50%; -} - -.card .card-entry-labels li, -.card-tag-labels li { - margin: 10px 10px 10px auto; - padding: 5px 12px 5px 16px !important; - 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: 2.5px auto; -} - -.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; -} - -.card .card-entry-labels-hidden li:first-child { - margin-left: 0; -} - -.card-entry-tags a, -.card-entry-labels a, -.card-tag-labels a, -.card-entry-labels-hidden a, -#list .chip a { - text-decoration: none; - font-weight: normal; - color: #fff; -} - -.card .card-content .estimatedTime { - margin-bottom: 10px; -} - -.card .card-action { - padding: 10px 5px 10px 15px; -} - -.card .card-action ul.links { - margin: 0; - font-size: 24px; - line-height: 24px; -} - -.card .card-action ul.tools li a.tool { - margin-right: 5px !important; -} - -.card-stacked:hover ul.tools-list { - display: block; -} - -.card-stacked ul.tools-list { - display: none; -} - -.card .card-action a { - color: #fff; - margin: 0; -} - -.card .card-action a:hover { - color: #fff; -} - -.card .card-action .reading-time { - display: inline-flex; - vertical-align: middle; -} - -.quickstart .card .card-action a, -.quickstart .card .card-action a:hover { - color: #fff !important; -} - -.settings .div_tabs { - padding-bottom: 15px; -} - -.card.sw { - max-width: 370px; - margin-left: auto; - margin-right: auto; -} - -.card .card-image { - height: 10em; -} - -.card .card-fullimage { - height: 13.5em; -} - -.card .card-image .preview, -.card .card-fullimage .preview { - height: 14em; - background-size: cover; - background-repeat: no-repeat; - background-position: 50%; -} - -/* ========================================================================== - 5 = Article - ========================================================================== */ - -#article { - font-size: 20px; - margin: 0 auto; - max-width: 45em; -} - -#article article { - color: #424242; - font-size: 18px; - line-height: 1.7em; -} - -#article article h1, -#article article h2, -#article article h3, -#article article h4, -#article article h5, -#article article h6 { - color: #212121; -} - -#article article h1 strong, -#article article h2 strong, -#article article h3 strong, -#article article h4 strong, -#article article h5 strong, -#article article h6 strong { - font-weight: 500; -} - -#article article h6 { - font-size: 1.2rem; -} - -#article article h5 { - font-size: 1.6rem; -} - -#article article h4 { - font-size: 1.9rem; -} - -#article article h3 { - font-size: 2.2rem; -} - -#article article h2 { - font-size: 2.5rem; -} - -#article article h1 { - font-size: 2.7rem; -} - -#article img, -#article figure { - max-width: 100%; - height: auto; -} - -#article article a { - border-bottom: 1px dotted #03a9f4; - text-decoration: none; -} - -#article article a:hover { - border-bottom-style: solid; -} - -#article article ul { - padding-left: 30px; -} - -#article article ul, -#article article ul li { - list-style-type: disc; -} - -#article article blockquote { - font-style: italic; -} - -#article article strong { - font-weight: bold; -} - -#article article pre { - box-sizing: border-box; - margin: 0 0 1.75em; - border: #e3f2fd 1px solid; - width: 100%; - padding: 10px; - font-family: monospace; - font-size: 0.8em; - white-space: pre; - overflow: auto; - background: #f5f5f5; - border-radius: 3px; -} - -#article > header > h1 { - font-size: 2em; - margin: 2.1rem 0 0.68rem; -} - -.reader-mode { - width: 95px !important; - transition: width 0.2s ease; -} - -.reader-mode:hover { - 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; -} - -.reader-mode:hover span { - opacity: 1; -} - -.progress { - position: fixed; - top: 0; - width: 100%; - height: 3px; - margin: 0; - z-index: 9999; -} - -#article aside .tools { - font-size: 0.8em; - display: flex; - flex-flow: row wrap; - margin: 0 auto; -} - -article aside .tools li { - display: inline-flex; - vertical-align: middle; -} - -#article aside .tools a { - color: #000; - text-decoration: none; -} - -#article aside #list { - float: right; - margin: 0 15px 10px; -} - -#article aside .chip { - background-color: rgba(0, 151, 167, 0.85); - padding: 0 15px 0 10px; - margin: auto 2px; -} - -#article aside .chip a, -#article aside .chip i { - color: #fff; -} - -/* ========================================================================== - 6 = Media queries - ========================================================================== */ - -@media only screen and (max-width: 992px) { - header, - main, - footer { - padding-left: 0; - } - - nav, - main, - footer { - padding-left: 0; - } - - .pagination { - width: auto; - } - - .nav-panels .action { - padding-right: 0.75rem; - } - - .nav-panel-buttom { - justify-content: space-around; - } - - #article { - max-width: 35em; - margin-left: auto; - margin-right: auto; - font-size: 18px; - } - - #article > header > h1 { - font-size: 1.33em; - } - - .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 { - width: auto; - } - - .drag-target + .drag-target { - height: 50%; - } - - .drag-target + .drag-target + .drag-target { - top: 50%; - } -} - -@media only screen and (min-width: 1200px) and (max-width: 1650px) { - .row .col.l3 { - width: 33.33333%; - margin-left: 0; - } -} - -@media only screen and (min-width: 993px) and (max-width: 1200px) { - .row .col.l1 { - 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; - } -} - -@media only screen and (max-width: 350px) { - .nb-results { - display: none; - } - - main ul.row { - padding: 0; - } - - .row .col { - padding: 0; - } -} - -/* ========================================================================== - 7 = Font - ========================================================================== */ - -.icon-google-plus2::before { - content: "\ea89"; -} - -.icon-facebook2::before { - content: "\ea8d"; -} - -.icon-twitter::before { - content: "\ea96"; -} - -.icon-apple::before { - content: "\eabf"; -} - -.icon-android::before { - content: "\eac1"; -} - -.icon-chrome::before { - content: "\eae5"; -} - -.icon-firefox::before { - content: "\eae6"; -} - -.icon-link::before { - content: "\e9cb"; -} - -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; -} - -.input-field label.active { - font-size: 1rem; -} - -nav .input-field input { - margin: 0; -} diff --git a/app/Resources/static/themes/material/css/sidenav.scss b/app/Resources/static/themes/material/css/sidenav.scss index b430077e..86e4a095 100644 --- a/app/Resources/static/themes/material/css/sidenav.scss +++ b/app/Resources/static/themes/material/css/sidenav.scss @@ -10,7 +10,7 @@ } a { - margin: 0 1rem; + margin: 0 auto; } &.fixed a { -- cgit v1.2.3