diff options
Diffstat (limited to 'p/themes/Mapco/_layout.scss')
| -rw-r--r-- | p/themes/Mapco/_layout.scss | 179 |
1 files changed, 61 insertions, 118 deletions
diff --git a/p/themes/Mapco/_layout.scss b/p/themes/Mapco/_layout.scss index 02c0dceb8..a0c901f3f 100644 --- a/p/themes/Mapco/_layout.scss +++ b/p/themes/Mapco/_layout.scss @@ -10,7 +10,7 @@ background: variables.$sid-bg; display: block; width: auto; - height: 3rem; + height: 3.5rem; table-layout: none; .logo { @@ -20,10 +20,7 @@ .item { vertical-align: middle; - // text-align: center; - // display: flex; - // justify-content: space-between; - // flex-direction: row; + &.title { width: 280px; @@ -37,8 +34,6 @@ } &.search { - // text-align: center; - // width: 50%; input { width: 230px; color: variables.$sid-font-color; @@ -60,50 +55,51 @@ } } - .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; &: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; - - background-color: transparent; - background-position: center; - background-repeat: no-repeat; - background-image: url(icons/cog-white.svg); + .btn .icon, + > .icon { + filter: brightness(3) + } - // border-left-width: 0; + .signin { + color: white; + } - // width: 3rem; - &:hover { - // background-color: $main-first-alt; - } + .btn { + padding: 0.25rem 1rem; + background-color: transparent; } } } @@ -111,26 +107,34 @@ /*=== Body */ #global { - height: calc(100% - 4rem); + height: calc(100% - 3.5rem); } /*=== Prompt (centered) */ +main.prompt { + margin: 3rem auto; + padding: 2rem; + background: variables.$grey-light; + max-width: 400px; + min-width: 300px; + width: 33%; + border-radius: 5px; +} + .prompt { text-align: center; } -.prompt label { +.prompt label, +.prompt .help { text-align: left; } -.prompt form { - margin: 10px auto 20px auto; - width: 200px; -} - -.prompt input { - margin: 5px auto; +.prompt input, +.prompt select, +.prompt .stick { width: 100%; + box-sizing: border-box; } .prompt p { @@ -164,16 +168,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; } } @@ -193,6 +194,10 @@ &.active { background-color: variables.$main-first; + + .icon { + filter: brightness(3); + } } } @@ -209,13 +214,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; @@ -233,46 +236,22 @@ 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); + .icon { + filter: brightness(3.5); + } } &#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(3.5) grayscale(1); + } } // read all &.read_all { padding: 5px 16px; - // min-height: 0; color: variables.$main-font-color; background-color: variables.$grey-lighter; @@ -282,55 +261,21 @@ 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; + } } } } } - -#dropdown-query ~ .dropdown-menu .dropdown-header .icon { - vertical-align: middle; - background-color: variables.$grey-medium-dark; - border-radius: 3px; -} - - /*=== Content of feed articles */ .content, .content.thin { padding: 20px 10px; @@ -418,9 +363,7 @@ width: 100%; height: 3rem; color: variables.$grey-dark; - // font-weight: bold; font-size: 1em; - // border-radius: 3px; border: none; position: fixed; top: auto; |