From 2b1aa7eedeba6058b8cc7cca261bf379462f3655 Mon Sep 17 00:00:00 2001 From: maTh Date: Thu, 25 Aug 2022 22:05:54 +0200 Subject: Fix: Ansum theme cleaning (#4538) * icons * login screen * fix login screen input in .stick * in the same height like input * simplefy the search bar button * header height improved * improve the config menu button * navigation bar: border radius * navigation bar: btn hover improved to darker grey, when not within .stick * delete unused code ul.nav * delete outcommented code + translate EN-> FR * fix syntax * fixed and RTL * RTL --- p/themes/Ansum/_layout.scss | 153 +++++++++++--------------------------------- 1 file changed, 37 insertions(+), 116 deletions(-) (limited to 'p/themes/Ansum/_layout.scss') diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.scss index b35b1ded7..4d099ab4a 100644 --- a/p/themes/Ansum/_layout.scss +++ b/p/themes/Ansum/_layout.scss @@ -10,15 +10,12 @@ background: variables.$sid-bg; display: block; width: auto; - height: 3rem; + height: 3.5rem; table-layout: none; .item { vertical-align: middle; - // text-align: center; - // display: flex; - // justify-content: space-between; - // flex-direction: row; + &.title { width: 280px; font-weight: 400; @@ -32,8 +29,6 @@ } &.search { - // text-align: center; - // width: 50%; input { width: 230px; color: variables.$sid-font-color; @@ -55,50 +50,46 @@ } } - .btn { - img {display: none;} + input:focus ~ .btn, + input:hover ~ .btn { + background-color: variables.$main-first; + .icon { + filter: brightness(3); + } + } + + .btn { width: 3rem; border-radius: 0 2px 2px 0; - - background-color: variables.$main-first; - background-position: center; - background-repeat: no-repeat; - background-image: url(icons/magnifier.svg); - + background-color: variables.$sid-bg-alt; border-left-width: 0; min-height: 35px; + .icon { + filter: invert(49%) sepia(13%) saturate(2426%) hue-rotate(346deg) brightness(99%) contrast(95%); + } + &:hover { background-color: variables.$main-first-alt; + + .icon { + filter: brightness(3); + } } } } &.configure { - width: 2rem; + width: 3rem; position: absolute; right: 1rem; - top: 1.25rem; + top: 1rem; text-align: center; - // float: right; - .btn { - img {display: none;} - - padding: 0 0.5rem; - // border-radius: 0 2px 2px 0; + .btn { + padding: 0.25rem 1rem; background-color: transparent; - background-position: center; - background-repeat: no-repeat; - background-image: url(icons/cog.svg); - - // border-left-width: 0; - - // width: 3rem; - &:hover { - // background-color: $main-first-alt; - } } } } @@ -106,12 +97,13 @@ /*=== Body */ #global { - height: calc(100% - 4rem); + height: calc(100% - 3.5rem); } /*=== Prompt (centered) */ -.prompt input { - margin: 5px auto; +main.prompt { + background: variables.$grey-light; + border-radius: 5px; } /*=== New article notification */ @@ -141,16 +133,13 @@ line-height: 3em; letter-spacing: 1px; text-transform: uppercase; - // border-left: 2px solid #ecf0f1; + .name { padding: 0 1rem 0 1rem; - // font-weight: 700; color: variables.$main-font-color; font-size: 0.875rem; position: relative; left: 0; - - // letter-spacing: 1px; text-transform: uppercase; } } @@ -186,13 +175,11 @@ background-repeat: no-repeat; &:hover { - background-color: variables.$grey-light; + background-color: variables.$grey-medium-light; } } .stick { - background: variables.$grey-lighter; - .btn { border-left-width: 0; padding: 0.5rem 1rem; @@ -208,48 +195,14 @@ &.active { background-color: variables.$main-first; - } - - img.icon {display: none;} // on efface pour afficher nos icones, mouhahaha !! - - - // actions - &#toggle-read { - background-image: url(icons/read.svg); - } - - &#toggle-read.active { - background-image: url(icons/read-white.svg); - } - &#toggle-unread { - background-image: url(icons/unread.svg); - } - - &#toggle-unread.active { - background-image: url(icons/unread-white.svg); - } - - &#toggle-starred { - background-image: url(icons/starred.svg); - } - - &#toggle-starred.active { - background-image: url(icons/starred-white.svg); - } - - &#toggle-non-starred { - background-image: url(icons/non-starred.svg); - } - - &#toggle-non-starred.active { - background-image: url(icons/non-starred-white.svg); + .icon { + filter: brightness(5); + } } - // read all &.read_all { padding: 5px 16px; - // min-height: 0; color: variables.$main-font-color; background-color: variables.$grey-lighter; @@ -259,42 +212,16 @@ background-color: variables.$grey-medium-light; } } - - // views - &.view-normal { - background-image: url(icons/view-list.svg); - } - - &.view-normal.active { - background-image: url(icons/view-list-white.svg); - } - - &.view-global { - background-image: url(icons/view-global.svg); - } - - &.view-global.active { - background-image: url(icons/view-global-white.svg); - } - - &.view-reader { - background-image: url(icons/view-reader.svg); - } - - &.view-reader.active { - background-image: url(icons/view-reader-white.svg); - } - - &.view-rss { - background-image: url(icons/rss.svg); - } - } .dropdown { a.dropdown-toggle { border-left-width: 0; background-image: url(icons/more.svg); + + .icon { + display: none; + } } } } @@ -368,7 +295,6 @@ border-radius: 3px; } - blockquote { margin: 0; padding: 5px 20px; @@ -382,21 +308,17 @@ margin: 0; } } - } /*=== Notification and actualize notification */ .notification { - padding: 1rem 0; background: variables.$grey-medium-light; width: 100%; height: 3rem; color: variables.$grey-dark; - // font-weight: bold; font-size: 1em; - // border-radius: 3px; border: none; position: fixed; top: auto; @@ -448,7 +370,6 @@ } } - /*=== Navigation menu (for articles) */ #nav_entries { margin: 0; -- cgit v1.2.3