diff --git a/app/Resources/static/themes/material/css/article.scss b/app/Resources/static/themes/material/css/article.scss index 83543c9c8..d933c18be 100644 --- a/app/Resources/static/themes/material/css/article.scss +++ b/app/Resources/static/themes/material/css/article.scss @@ -108,11 +108,12 @@ .entry-info { .tools { display: flex; - flex-flow: row wrap; + margin: 8px 5px 5px; + flex-wrap: wrap; .stats { + margin: 0; font-size: 0.7em; - margin: 8px 5px 5px; li { display: inline-flex; @@ -133,18 +134,21 @@ } .tags { - float: right; - margin: 5px 15px 10px; + display: flex; + margin: 0; + align-items: center; + gap: 5px; } } .chip { - background-color: #9e9e9e; - padding: 0 15px 0 10px; - margin: auto 2px; - border-radius: 6px; - height: 18px; - line-height: 18px; + display: flex; + margin: 0; + padding: 0; + height: 25px; + line-height: 25px; + align-items: center; + background-color: transparent; a, i { @@ -152,15 +156,45 @@ } i.material-icons { - float: right; font-size: 16px; - line-height: 18px; - padding-left: 8px; + vertical-align: sub; } } + + .chip-label { + padding-left: 10px; + padding-right: 5px; + background-color: #9e9e9e; + border-radius: 6px 0 0 6px; + } + + .chip-action { + padding: 0 5px; + background-color: #868686; + border-radius: 0 6px 6px 0; + } + + .chip-label, + .chip-action { + min-width: 30px; + text-align: center; + } + + .chip-label:hover, + .chip-label:active, + .chip-label:focus, + .chip-action:hover, + .chip-action:active, + .chip-action:focus { + background-color: #5e5e5e; + } } } +.entry-info { + margin-bottom: 40px; +} + .reader-mode { width: 70px !important; transition: width 0.2s ease; @@ -200,3 +234,28 @@ margin: 0; z-index: 9999; } + +@media only screen and (max-width: 640px) { + .entry-info { + margin-bottom: 20px; + } + + #article .entry-info .tools { + margin-left: 0; + margin-right: 0; + } + + #article .entry-info .tools .tags { + gap: 10px; + } + + #article .entry-info .chip { + height: 32px; + line-height: 32px; + } + + #article .entry-info .chip-label, + #article .entry-info .chip-action { + min-width: 40px; + } +} diff --git a/app/Resources/static/themes/material/css/dark_theme.scss b/app/Resources/static/themes/material/css/dark_theme.scss index b4a449dbe..f3eaabc25 100644 --- a/app/Resources/static/themes/material/css/dark_theme.scss +++ b/app/Resources/static/themes/material/css/dark_theme.scss @@ -81,10 +81,6 @@ color: #dfdfdf !important; } - #article .chip { - background-color: #373737; - } - .side-nav li.active { background-color: #2f2f2f; } diff --git a/src/Wallabag/CoreBundle/Resources/views/Entry/_tags.html.twig b/src/Wallabag/CoreBundle/Resources/views/Entry/_tags.html.twig index 2c39028bf..b6c84d959 100644 --- a/src/Wallabag/CoreBundle/Resources/views/Entry/_tags.html.twig +++ b/src/Wallabag/CoreBundle/Resources/views/Entry/_tags.html.twig @@ -1,10 +1,10 @@ {% if tags is iterable and tags is not empty %}