From 0cb9f59622f893ce0878e3876e28556781dd6700 Mon Sep 17 00:00:00 2001 From: maTh Date: Sat, 6 Aug 2022 22:40:43 +0200 Subject: Fix: Mapco theme cleaning (#4491) * translated the comments FR -> EN * delete useless extra styles for login header (template.css) * * simplefy the search bar button * improve the config menu button * improve the layout of the login/register prompt * navigation bar: border radius * navigation bar: btn hover improved to darker grey, when not within .stick * header height improved * delete unused code ul.nav * delete outcommented code * translate comments FR -> EN * improve login form layout * icons: do not use it as background-image * mapco.css * fixes the nuts * more nuts * improve mobile login form * delete unused view-normal.svg * compress the svg icons --- p/themes/Mapco/_components.scss | 104 +++--------- p/themes/Mapco/_configuration.scss | 27 +-- p/themes/Mapco/_forms.scss | 14 +- p/themes/Mapco/_global-view.scss | 12 +- p/themes/Mapco/_layout.scss | 179 +++++++------------- p/themes/Mapco/_list-view.scss | 7 +- p/themes/Mapco/_mobile.scss | 51 ++---- p/themes/Mapco/_sidebar.scss | 4 +- p/themes/Mapco/_variables.scss | 42 ++--- p/themes/Mapco/icons/cog-white.svg | 5 - p/themes/Mapco/icons/cog.svg | 59 ------- p/themes/Mapco/icons/configure.svg | 3 + p/themes/Mapco/icons/down-white.svg | 59 ------- p/themes/Mapco/icons/down.svg | 60 +------ p/themes/Mapco/icons/icon.svg | 16 +- p/themes/Mapco/icons/link-white.svg | 59 ------- p/themes/Mapco/icons/link.svg | 8 +- p/themes/Mapco/icons/magnifier.svg | 5 - p/themes/Mapco/icons/more.svg | 60 +------ p/themes/Mapco/icons/non-starred-white.svg | 61 ------- p/themes/Mapco/icons/non-starred.svg | 61 +------ p/themes/Mapco/icons/read-grey.svg | 5 - p/themes/Mapco/icons/read-white.svg | 59 ------- p/themes/Mapco/icons/read.svg | 60 +------ p/themes/Mapco/icons/refresh.svg | 60 +------ p/themes/Mapco/icons/rss-white.svg | 60 ------- p/themes/Mapco/icons/rss.svg | 61 +------ p/themes/Mapco/icons/search.svg | 3 + p/themes/Mapco/icons/starred-white.svg | 59 ------- p/themes/Mapco/icons/starred.svg | 8 +- p/themes/Mapco/icons/tick-color.svg | 8 +- p/themes/Mapco/icons/tick-white.svg | 5 - p/themes/Mapco/icons/tick.svg | 5 - p/themes/Mapco/icons/unread-grey.svg | 59 ------- p/themes/Mapco/icons/unread-white.svg | 5 - p/themes/Mapco/icons/unread.svg | 60 +------ p/themes/Mapco/icons/up-white.svg | 59 ------- p/themes/Mapco/icons/up.svg | 60 +------ p/themes/Mapco/icons/view-global-white.svg | 5 - p/themes/Mapco/icons/view-global.svg | 60 +------ p/themes/Mapco/icons/view-list-white.svg | 5 - p/themes/Mapco/icons/view-list.svg | 60 ------- p/themes/Mapco/icons/view-normal.svg | 3 + p/themes/Mapco/icons/view-reader-white.svg | 59 ------- p/themes/Mapco/icons/view-reader.svg | 60 +------ p/themes/Mapco/mapco.css | 254 ++++++++++------------------- p/themes/Mapco/mapco.rtl.css | 254 ++++++++++------------------- p/themes/Mapco/mapco.scss | 5 + 48 files changed, 349 insertions(+), 1948 deletions(-) delete mode 100644 p/themes/Mapco/icons/cog-white.svg delete mode 100644 p/themes/Mapco/icons/cog.svg create mode 100644 p/themes/Mapco/icons/configure.svg delete mode 100644 p/themes/Mapco/icons/down-white.svg delete mode 100644 p/themes/Mapco/icons/link-white.svg delete mode 100644 p/themes/Mapco/icons/magnifier.svg delete mode 100644 p/themes/Mapco/icons/non-starred-white.svg delete mode 100644 p/themes/Mapco/icons/read-grey.svg delete mode 100644 p/themes/Mapco/icons/read-white.svg delete mode 100644 p/themes/Mapco/icons/rss-white.svg create mode 100644 p/themes/Mapco/icons/search.svg delete mode 100644 p/themes/Mapco/icons/starred-white.svg delete mode 100644 p/themes/Mapco/icons/tick-white.svg delete mode 100644 p/themes/Mapco/icons/tick.svg delete mode 100644 p/themes/Mapco/icons/unread-grey.svg delete mode 100644 p/themes/Mapco/icons/unread-white.svg delete mode 100644 p/themes/Mapco/icons/up-white.svg delete mode 100644 p/themes/Mapco/icons/view-global-white.svg delete mode 100644 p/themes/Mapco/icons/view-list-white.svg delete mode 100644 p/themes/Mapco/icons/view-list.svg create mode 100644 p/themes/Mapco/icons/view-normal.svg delete mode 100644 p/themes/Mapco/icons/view-reader-white.svg (limited to 'p/themes/Mapco') diff --git a/p/themes/Mapco/_components.scss b/p/themes/Mapco/_components.scss index fc956dfc3..c3698659b 100644 --- a/p/themes/Mapco/_components.scss +++ b/p/themes/Mapco/_components.scss @@ -7,7 +7,7 @@ /*=== COMPONENTS */ /*===============*/ /*=== Forms */ -// parti dans _forms.scss +// see _forms.scss /*=== Horizontal-list */ .horizontal-list { @@ -41,7 +41,6 @@ } .dropdown-header { - // padding: 0 5px 5px; margin: 1rem 0.5rem 1rem 1rem; font-weight: bold; text-align: left; @@ -66,6 +65,10 @@ background: variables.$main-first; color: variables.$white; + .icon { + filter: brightness(3); + } + a, button, label { text-decoration: none; color: variables.$white; @@ -91,7 +94,6 @@ .separator { margin: 0.75rem 0; border-bottom: 1px solid variables.$grey-light; - // display: none; } } @@ -122,7 +124,6 @@ /*=== Alerts */ .alert { margin: 1rem 0; - // width: 100%; padding: 1rem; background: variables.$grey-lighter; color: variables.$grey-dark; @@ -144,7 +145,7 @@ .alert-warn { background: variables.$warning-light; color: variables.$warning-text; - border: 1px solid string.unquote(variables.$warning-text + '33'); // on ajoute l’opacité à la fin + border: 1px solid string.unquote(variables.$warning-text + '33'); // add opacity at the end } .alert-success { @@ -178,7 +179,6 @@ /*=== Boxes */ .box { background: variables.$white; - // border: 1px solid #ddd; border: none; border-radius: 3px; @@ -189,31 +189,24 @@ padding: 5px 10px; background: variables.$grey-light; color: variables.$main-font-color; - // border-bottom: 1px solid #ddd; border-radius: 2px 2px 0 0; .configure { - margin-right: 4px; + padding: 5px; } &:hover { .configure { - background: url("icons/cog.svg") no-repeat 4px 4px; - display: block; - float: left; - width: 1.75rem; - height: 1.75rem; - border-radius: 2px; - margin-right: 0.5rem; - .icon { - display: none; - border-radius: 3px; vertical-align: middle; } &:hover { - background: url("icons/cog-white.svg") no-repeat 4px 4px variables.$main-first; + background-color: variables.$main-first; + + .icon { + filter: brightness(3); + } } } } @@ -229,7 +222,6 @@ a.dropdown-toggle { padding: 0; - // float: right; border-radius: 0; background-image: url(icons/more.svg); background-repeat: no-repeat; @@ -244,41 +236,30 @@ } .box-content { - // max-height: 260px; padding-left: 30px; .item { - padding: 0.5rem 0; + padding: 0.25rem 0; color: variables.$main-font-color; font-size: 1rem; border-bottom: 1px solid variables.$grey-light; line-height: 1.7em; - img { - margin-right: 0.75rem; - } - .configure { - background: url("icons/cog.svg") no-repeat 4px 4px; - display: block; - float: left; - width: 1.75rem; - height: 1.75rem; - border-radius: 2px; - margin-right: 0.5rem; + padding: 5px; .icon { - display: none; - border-radius: 3px; vertical-align: middle; } &:hover { - // background: $main-first; - background: url("icons/cog-white.svg") no-repeat 4px 4px variables.$main-first; + background-color: variables.$main-first; + + .icon { + filter: brightness(3); + } } } - } .item:last-child { @@ -301,7 +282,7 @@ color: #fff; .bigTick { - background: url(icons/tick-white.svg) center no-repeat; + filter: brightness(5); } } @@ -315,48 +296,3 @@ white-space: nowrap; } } - -// page de login -.formLogin { - background: variables.$sid-bg; - - .header { - .configure { - padding-right: 1rem; - - img { - margin-right: 0.5rem; - } - - a.signin { - color: variables.$white; - } - } - } - - h1 { - color: variables.$white; - } - - form#crypto-form { - div { - margin-bottom: 1rem; - - label { - color: variables.$grey-medium; - font-size: 1rem; - - - } - - input { - background: variables.$main-first-darker; - - &:focus { - background: variables.$grey-lighter; - color: variables.$main-font-color; - } - } - } - } -} diff --git a/p/themes/Mapco/_configuration.scss b/p/themes/Mapco/_configuration.scss index e2f9d054a..d14d54a5e 100644 --- a/p/themes/Mapco/_configuration.scss +++ b/p/themes/Mapco/_configuration.scss @@ -7,34 +7,13 @@ form { margin: 1rem 0; - - // Gestion des extensions - .horizontal-list { - margin-bottom: 0.5rem; - - .item { - .stick { - // width: 65%; - // margin-right: 1rem; - // display:flex; - - } - - .btn { - // width: 8rem; - // flex-grow: 1; - } - } - - } } &.content { max-width: 550px; } - h1, h2 { // pages titles - // font-family: "spectral"; + h1, h2 { color: variables.$main-font-color; font-size: 3rem; margin-top: 1.75rem; @@ -42,17 +21,15 @@ line-height: 1.2em; } - a[href="./"] { // C’est le bouton "Retour à vos flux" + a[href="./"] { // This is the "Back to your feeds" button. margin: 0; padding: 0.75rem 1.5rem; background: variables.$grey-lighter; display: inline-block; - // border: none; color: variables.$grey-dark; font-size: 1rem; border: 1px solid variables.$grey-medium-light; border-radius: 5px; - // min-height: 38px; min-width: 15px; line-height: 25px; vertical-align: middle; diff --git a/p/themes/Mapco/_forms.scss b/p/themes/Mapco/_forms.scss index 0fc90894b..0f5f96681 100644 --- a/p/themes/Mapco/_forms.scss +++ b/p/themes/Mapco/_forms.scss @@ -25,7 +25,6 @@ background: variables.$main-first; color: variables.$white; - // @include transition(all, 0.15s, ease-in-out); &:hover, &:active { background: variables.$main-first-alt; @@ -96,6 +95,11 @@ input, select, textarea, button { vertical-align: middle; } +select { + padding-top: 9px; + padding-bottom: 9px; +} + option { padding: 0 .5em; } @@ -130,13 +134,6 @@ input.extend { clear: both; } - &:hover { - // background: #fff; - // border: 1px solid #eee; - // border-radius: 3px; - // border: 1px solid #eee; - } - .group-name { padding: 10px 0; text-align: right; @@ -154,7 +151,6 @@ input.extend { &.form-actions { margin: 15px 0 25px; padding: 5px 0; - // background: #333; } &.form-actions .btn { diff --git a/p/themes/Mapco/_global-view.scss b/p/themes/Mapco/_global-view.scss index c2055c64f..dbf82f75f 100644 --- a/p/themes/Mapco/_global-view.scss +++ b/p/themes/Mapco/_global-view.scss @@ -4,17 +4,8 @@ /*================*/ #stream { .box.category { - &:not([data-unread="0"]) .box-title { - // background: #3498db; - } - - &:not([data-unread="0"]) .box-title:active { - // background: #2980b9; - } - &:not([data-unread="0"]) .box-title .title { font-weight: bold; - // color: #fff; } .box-title { @@ -53,7 +44,6 @@ .item.feed { padding: 0.5rem 1.5rem; - // padding: 2px 10px; font-size: 1rem; a { @@ -71,7 +61,7 @@ } -// le panel qui apparait en overlay pour afficher les flux +// the panel that appears in overlay to display the flows #overlay { background: rgba(0, 0, 0, 0.65); } 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; diff --git a/p/themes/Mapco/_list-view.scss b/p/themes/Mapco/_list-view.scss index cd6e9efa5..3996f75fd 100644 --- a/p/themes/Mapco/_list-view.scss +++ b/p/themes/Mapco/_list-view.scss @@ -6,7 +6,6 @@ /*=== Feed articles */ .flux { - // border-left: 2px solid #ecf0f1; background: variables.$white; @include mixins.transition(all, 0.15s, ease-in-out); @@ -27,7 +26,7 @@ } &.not_read:not(.current) { - background: variables.$unread-bg; //-------------------- + background: variables.$unread-bg; &:hover .item.title { background: variables.$unread-bg; @@ -37,14 +36,14 @@ &.not_read { .item.title { a { - color: variables.$unread-font-color; //-------------------- + color: variables.$unread-font-color; } } .item.website { a { - color: variables.$unread-font-color; //-------------------- + color: variables.$unread-font-color; } } diff --git a/p/themes/Mapco/_mobile.scss b/p/themes/Mapco/_mobile.scss index 92e5d833f..769434892 100644 --- a/p/themes/Mapco/_mobile.scss +++ b/p/themes/Mapco/_mobile.scss @@ -6,40 +6,6 @@ /*===========*/ @media (max-width: 840px) { - html, body { - // font-size: 1rem; - } - - ul.nav { - .item { - width: 100%; - - img { - display: none; - } - - a { - box-sizing: border-box; - padding: 1rem 1rem 1rem 2.5rem; - - background: url("../../themes/icons/logout.svg") no-repeat variables.$sid-bg-dark 3% center; - display: inline-block; - width: 100%; - color: variables.$sid-font-color; - - @include mixins.transition(all, 0.2s, ease-in-out); - - &:hover, - &:active { - background: url("../../themes/icons/logout.svg") no-repeat variables.$alert-bg 3% center; - text-decoration: none; - } - } - - } - - } - .form-group .group-name { text-align: left; } @@ -75,6 +41,7 @@ .header { padding: 0.5rem; + height: 8rem; .item { &.search { @@ -97,16 +64,21 @@ } } - - .btn { - min-height: 49px; - padding: 0.5rem 2rem; - } } } } + #global { + height: calc(100% - 8rem); + } + + main.prompt { + max-width: 100%; + min-width: auto; + width: 75%; + } + .post { padding-left: 1rem; padding-right: 1rem; @@ -183,7 +155,6 @@ .name { padding: 0; - // font-size: 1.1rem; display: block; width: 100%; line-height: 1.5rem; diff --git a/p/themes/Mapco/_sidebar.scss b/p/themes/Mapco/_sidebar.scss index a5ee0ea82..06ae07d9e 100644 --- a/p/themes/Mapco/_sidebar.scss +++ b/p/themes/Mapco/_sidebar.scss @@ -92,8 +92,7 @@ border-radius: 0; } - .btn:first-child, - input:first-child { + .btn:first-child { border-radius: 5px 0 0 5px; } @@ -237,7 +236,6 @@ .nav-head { margin: 0; text-align: right; - // background: #34495e; color: variables.$white; a { diff --git a/p/themes/Mapco/_variables.scss b/p/themes/Mapco/_variables.scss index 0b5e65315..98136f496 100644 --- a/p/themes/Mapco/_variables.scss +++ b/p/themes/Mapco/_variables.scss @@ -1,18 +1,18 @@ -// La couleur principale du thème -$main-first: #36c; // couleur principale -$main-first-alt: #25c; // var pour les hovers +// The main color of the theme +$main-first: #36c; // main color +$main-first-alt: #25c; // var for hovers $main-first-light: #effcfd; // var light 1 $main-first-lighter: #f7fdfe; // var light 2 -$main-first-dark: #35363c; // var pour les hovers -$main-first-darker: #1d1e22; // var pour les hovers +$main-first-dark: #35363c; // var for hovers +$main-first-darker: #1d1e22; // var for hovers -// les couleurs de polices liées +// linked font colors $main-font-color: #303136; $light-font-color: #5b6871; -$white: #fff; // le blanc (des fois qu’on aurait envie de le teinter un peu) +$white: #fff; // white (sometimes we would like to tint it a little) -// toute la palette des gris, très utile -// on essaiera de teinter ces gris suivant la couleur principale +// the whole palette of grays, very useful +// we will try to tint these grays according to the main color $grey-darker: #3b3f4d; $grey-dark: #5b6871; $grey-medium-dark: #a6a7ae; @@ -25,10 +25,10 @@ $unread-font-color: $main-first; $unread-bg: #f2f6f8; $unread-bg-light: #fdfdfe; -// les couleurs d’alertes (rouge, jaune, vert) -$alert-bg: #f5633e; // la base +// alert colors (red, yellow, green) +$alert-bg: #f5633e; // the base $alert-light: #fde0d8; // +light -$alert-text: #73341f; // +foncé +$alert-text: #73341f; // +dark $warning-bg: #f4f762; $warning-light: #fdfde0; @@ -38,18 +38,18 @@ $success-bg: #10f587; $success-light: #cffde7; $success-text: #0c7540; -// les favoris +// favourites $fav-bg: #ffc300; $fav-light: #fff6da; -// la couleur de sidebar, utile si on a envie d’un thème qui aurait une sidebar foncé, e.g. +// the sidebar color, useful if you want a theme that would have a dark sidebar, e.g. // stylelint-disable-next-line color-hex-length -$sid-font-color: #ffffff; // la couleur de fond de la barre de gauche et du header -$sid-bg: #303136; // le background général de la barre de gauche, et du header +$sid-font-color: #ffffff; // the background color of the left bar and the header +$sid-bg: #303136; // the general background of the left bar, and of the header $sid-bg-alt: #26272a; // background inside groups -$sid-bg-dark: #17181a; // les hovers -$sid-sep: #3f3f3f; // les séparateurs -$sid-active: $main-first; // la couleur active +$sid-bg-dark: #17181a; // the hover +$sid-sep: #3f3f3f; // the separators +$sid-active: $main-first; // the active color // stylelint-disable-next-line color-hex-length -$sid-active-font: #ffffff; // la couleur active -$sid-pills: rgba(0,0,0, 0.25); // les gélules +$sid-active-font: #ffffff; // the active color +$sid-pills: rgba(0,0,0, 0.25); // capsules diff --git a/p/themes/Mapco/icons/cog-white.svg b/p/themes/Mapco/icons/cog-white.svg deleted file mode 100644 index 3df8c2d70..000000000 --- a/p/themes/Mapco/icons/cog-white.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/p/themes/Mapco/icons/cog.svg b/p/themes/Mapco/icons/cog.svg deleted file mode 100644 index aa56d862b..000000000 --- a/p/themes/Mapco/icons/cog.svg +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - - diff --git a/p/themes/Mapco/icons/configure.svg b/p/themes/Mapco/icons/configure.svg new file mode 100644 index 000000000..5ffe55442 --- /dev/null +++ b/p/themes/Mapco/icons/configure.svg @@ -0,0 +1,3 @@ + + + diff --git a/p/themes/Mapco/icons/down-white.svg b/p/themes/Mapco/icons/down-white.svg deleted file mode 100644 index df05a4704..000000000 --- a/p/themes/Mapco/icons/down-white.svg +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - - diff --git a/p/themes/Mapco/icons/down.svg b/p/themes/Mapco/icons/down.svg index 5c732e199..2ffcf409b 100644 --- a/p/themes/Mapco/icons/down.svg +++ b/p/themes/Mapco/icons/down.svg @@ -1,59 +1,3 @@ - - - - - - image/svg+xml - - - - - - - - - - + + diff --git a/p/themes/Mapco/icons/icon.svg b/p/themes/Mapco/icons/icon.svg index 594abba59..8ba9478e7 100644 --- a/p/themes/Mapco/icons/icon.svg +++ b/p/themes/Mapco/icons/icon.svg @@ -1,9 +1,7 @@ - - - - - - - - - \ No newline at end of file + + + + + + + diff --git a/p/themes/Mapco/icons/link-white.svg b/p/themes/Mapco/icons/link-white.svg deleted file mode 100644 index c6baadc85..000000000 --- a/p/themes/Mapco/icons/link-white.svg +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - diff --git a/p/themes/Mapco/icons/link.svg b/p/themes/Mapco/icons/link.svg index 44ee847b0..6bcfc1eb9 100644 --- a/p/themes/Mapco/icons/link.svg +++ b/p/themes/Mapco/icons/link.svg @@ -1,5 +1,3 @@ - - - - - \ No newline at end of file + + + diff --git a/p/themes/Mapco/icons/magnifier.svg b/p/themes/Mapco/icons/magnifier.svg deleted file mode 100644 index ae3732c69..000000000 --- a/p/themes/Mapco/icons/magnifier.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/p/themes/Mapco/icons/more.svg b/p/themes/Mapco/icons/more.svg index 6e505e71b..71535325a 100644 --- a/p/themes/Mapco/icons/more.svg +++ b/p/themes/Mapco/icons/more.svg @@ -1,59 +1,3 @@ - - - - - - image/svg+xml - - - - - - - - - - + + diff --git a/p/themes/Mapco/icons/non-starred-white.svg b/p/themes/Mapco/icons/non-starred-white.svg deleted file mode 100644 index 9bd48c801..000000000 --- a/p/themes/Mapco/icons/non-starred-white.svg +++ /dev/null @@ -1,61 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - - diff --git a/p/themes/Mapco/icons/non-starred.svg b/p/themes/Mapco/icons/non-starred.svg index 9d49930c0..57405ef45 100644 --- a/p/themes/Mapco/icons/non-starred.svg +++ b/p/themes/Mapco/icons/non-starred.svg @@ -1,60 +1,3 @@ - - - - - - image/svg+xml - - - - - - - - - - + + diff --git a/p/themes/Mapco/icons/read-grey.svg b/p/themes/Mapco/icons/read-grey.svg deleted file mode 100644 index 4857aca02..000000000 --- a/p/themes/Mapco/icons/read-grey.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/p/themes/Mapco/icons/read-white.svg b/p/themes/Mapco/icons/read-white.svg deleted file mode 100644 index 578facdc7..000000000 --- a/p/themes/Mapco/icons/read-white.svg +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - - diff --git a/p/themes/Mapco/icons/read.svg b/p/themes/Mapco/icons/read.svg index d583cce03..91b0a8d17 100644 --- a/p/themes/Mapco/icons/read.svg +++ b/p/themes/Mapco/icons/read.svg @@ -1,59 +1,3 @@ - - - - - - image/svg+xml - - - - - - - - - - + + diff --git a/p/themes/Mapco/icons/refresh.svg b/p/themes/Mapco/icons/refresh.svg index f23fbf4a2..495432162 100644 --- a/p/themes/Mapco/icons/refresh.svg +++ b/p/themes/Mapco/icons/refresh.svg @@ -1,59 +1,3 @@ - - - - - - image/svg+xml - - - - - - - - - - + + diff --git a/p/themes/Mapco/icons/rss-white.svg b/p/themes/Mapco/icons/rss-white.svg deleted file mode 100644 index b7fbf9987..000000000 --- a/p/themes/Mapco/icons/rss-white.svg +++ /dev/null @@ -1,60 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - - diff --git a/p/themes/Mapco/icons/rss.svg b/p/themes/Mapco/icons/rss.svg index 7044bbaa4..cf3c34814 100644 --- a/p/themes/Mapco/icons/rss.svg +++ b/p/themes/Mapco/icons/rss.svg @@ -1,60 +1,3 @@ - - - - - - image/svg+xml - - - - - - - - - - + + diff --git a/p/themes/Mapco/icons/search.svg b/p/themes/Mapco/icons/search.svg new file mode 100644 index 000000000..690c74942 --- /dev/null +++ b/p/themes/Mapco/icons/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/p/themes/Mapco/icons/starred-white.svg b/p/themes/Mapco/icons/starred-white.svg deleted file mode 100644 index 896dd1eeb..000000000 --- a/p/themes/Mapco/icons/starred-white.svg +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - - diff --git a/p/themes/Mapco/icons/starred.svg b/p/themes/Mapco/icons/starred.svg index 3b0bf8cb8..998164e85 100644 --- a/p/themes/Mapco/icons/starred.svg +++ b/p/themes/Mapco/icons/starred.svg @@ -1,5 +1,3 @@ - - - - - \ No newline at end of file + + + diff --git a/p/themes/Mapco/icons/tick-color.svg b/p/themes/Mapco/icons/tick-color.svg index 302541e80..da7d176aa 100644 --- a/p/themes/Mapco/icons/tick-color.svg +++ b/p/themes/Mapco/icons/tick-color.svg @@ -1,5 +1,3 @@ - - - - - \ No newline at end of file + + + diff --git a/p/themes/Mapco/icons/tick-white.svg b/p/themes/Mapco/icons/tick-white.svg deleted file mode 100644 index 0bcc26f47..000000000 --- a/p/themes/Mapco/icons/tick-white.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/p/themes/Mapco/icons/tick.svg b/p/themes/Mapco/icons/tick.svg deleted file mode 100644 index 9c436e7a0..000000000 --- a/p/themes/Mapco/icons/tick.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/p/themes/Mapco/icons/unread-grey.svg b/p/themes/Mapco/icons/unread-grey.svg deleted file mode 100644 index 1981cf92c..000000000 --- a/p/themes/Mapco/icons/unread-grey.svg +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - - diff --git a/p/themes/Mapco/icons/unread-white.svg b/p/themes/Mapco/icons/unread-white.svg deleted file mode 100644 index 6623924ab..000000000 --- a/p/themes/Mapco/icons/unread-white.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/p/themes/Mapco/icons/unread.svg b/p/themes/Mapco/icons/unread.svg index 5c6c3ac8e..e80d4119c 100644 --- a/p/themes/Mapco/icons/unread.svg +++ b/p/themes/Mapco/icons/unread.svg @@ -1,59 +1,3 @@ - - - - - - image/svg+xml - - - - - - - - - - + + diff --git a/p/themes/Mapco/icons/up-white.svg b/p/themes/Mapco/icons/up-white.svg deleted file mode 100644 index e19d1e1d9..000000000 --- a/p/themes/Mapco/icons/up-white.svg +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - - diff --git a/p/themes/Mapco/icons/up.svg b/p/themes/Mapco/icons/up.svg index 306b076e9..65da6b1a7 100644 --- a/p/themes/Mapco/icons/up.svg +++ b/p/themes/Mapco/icons/up.svg @@ -1,59 +1,3 @@ - - - - - - image/svg+xml - - - - - - - - - - + + diff --git a/p/themes/Mapco/icons/view-global-white.svg b/p/themes/Mapco/icons/view-global-white.svg deleted file mode 100644 index 950267f6a..000000000 --- a/p/themes/Mapco/icons/view-global-white.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/p/themes/Mapco/icons/view-global.svg b/p/themes/Mapco/icons/view-global.svg index 08632a190..ff9673422 100644 --- a/p/themes/Mapco/icons/view-global.svg +++ b/p/themes/Mapco/icons/view-global.svg @@ -1,59 +1,3 @@ - - - - - - image/svg+xml - - - - - - - - - - + + diff --git a/p/themes/Mapco/icons/view-list-white.svg b/p/themes/Mapco/icons/view-list-white.svg deleted file mode 100644 index c76fc298b..000000000 --- a/p/themes/Mapco/icons/view-list-white.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/p/themes/Mapco/icons/view-list.svg b/p/themes/Mapco/icons/view-list.svg deleted file mode 100644 index bcea01055..000000000 --- a/p/themes/Mapco/icons/view-list.svg +++ /dev/null @@ -1,60 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - - diff --git a/p/themes/Mapco/icons/view-normal.svg b/p/themes/Mapco/icons/view-normal.svg new file mode 100644 index 000000000..5b206352b --- /dev/null +++ b/p/themes/Mapco/icons/view-normal.svg @@ -0,0 +1,3 @@ + + + diff --git a/p/themes/Mapco/icons/view-reader-white.svg b/p/themes/Mapco/icons/view-reader-white.svg deleted file mode 100644 index 70175c623..000000000 --- a/p/themes/Mapco/icons/view-reader-white.svg +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - - diff --git a/p/themes/Mapco/icons/view-reader.svg b/p/themes/Mapco/icons/view-reader.svg index 7471037d9..30229af23 100644 --- a/p/themes/Mapco/icons/view-reader.svg +++ b/p/themes/Mapco/icons/view-reader.svg @@ -1,59 +1,3 @@ - - - - - - image/svg+xml - - - - - - - - - - + + diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css index 036c3ad60..eaeb00ab6 100644 --- a/p/themes/Mapco/mapco.css +++ b/p/themes/Mapco/mapco.css @@ -139,6 +139,11 @@ input, select, textarea, button { vertical-align: middle; } +select { + padding-top: 9px; + padding-bottom: 9px; +} + option { padding: 0 0.5em; } @@ -261,6 +266,9 @@ form th { background: #36c; color: #fff; } +.dropdown-menu .item:not(.addItem):hover .icon { + filter: brightness(3); +} .dropdown-menu .item:not(.addItem):hover a, .dropdown-menu .item:not(.addItem):hover button, .dropdown-menu .item:not(.addItem):hover label { text-decoration: none; color: #fff; @@ -362,24 +370,16 @@ form th { border-radius: 2px 2px 0 0; } .box .box-title .configure { - margin-right: 4px; -} -.box .box-title:hover .configure { - background: url("icons/cog.svg") no-repeat 4px 4px; - display: block; - float: left; - width: 1.75rem; - height: 1.75rem; - border-radius: 2px; - margin-right: 0.5rem; + padding: 5px; } .box .box-title:hover .configure .icon { - display: none; - border-radius: 3px; vertical-align: middle; } .box .box-title:hover .configure:hover { - background: url("icons/cog-white.svg") no-repeat 4px 4px #36c; + background-color: #36c; +} +.box .box-title:hover .configure:hover .icon { + filter: brightness(3); } .box .box-title form input { width: 85%; @@ -401,31 +401,23 @@ form th { padding-left: 30px; } .box .box-content .item { - padding: 0.5rem 0; + padding: 0.25rem 0; color: #303136; font-size: 1rem; border-bottom: 1px solid #eff0f2; line-height: 1.7em; } -.box .box-content .item img { - margin-right: 0.75rem; -} .box .box-content .item .configure { - background: url("icons/cog.svg") no-repeat 4px 4px; - display: block; - float: left; - width: 1.75rem; - height: 1.75rem; - border-radius: 2px; - margin-right: 0.5rem; + padding: 5px; } .box .box-content .item .configure .icon { - display: none; - border-radius: 3px; vertical-align: middle; } .box .box-content .item .configure:hover { - background: url("icons/cog-white.svg") no-repeat 4px 4px #36c; + background-color: #36c; +} +.box .box-content .item .configure:hover .icon { + filter: brightness(3); } .box .box-content .item:last-child { border-bottom: none; @@ -444,7 +436,7 @@ form th { color: #fff; } #bigMarkAsRead:hover .bigTick { - background: url(icons/tick-white.svg) center no-repeat; + filter: brightness(5); } #bigMarkAsRead .bigTick { margin: 0.5rem 0; @@ -456,36 +448,6 @@ form th { white-space: nowrap; } -.formLogin { - background: #303136; -} -.formLogin .header .configure { - padding-right: 1rem; -} -.formLogin .header .configure img { - margin-right: 0.5rem; -} -.formLogin .header .configure a.signin { - color: #fff; -} -.formLogin h1 { - color: #fff; -} -.formLogin form#crypto-form div { - margin-bottom: 1rem; -} -.formLogin form#crypto-form div label { - color: #c5ced3; - font-size: 1rem; -} -.formLogin form#crypto-form div input { - background: #1d1e22; -} -.formLogin form#crypto-form div input:focus { - background: #f9fafb; - color: #303136; -} - /*=== DIVERS */ /*===========*/ .aside.aside_feed .nav-form input, @@ -570,8 +532,7 @@ form th { .stick input, .stick .btn { border-radius: 0; } -.stick .btn:first-child, -.stick input:first-child { +.stick .btn:first-child { border-radius: 5px 0 0 5px; } .stick .btn:last-child, .stick input:last-child, .stick .btn + .dropdown > .btn { @@ -746,7 +707,7 @@ form th { background: #303136; display: block; width: auto; - height: 3rem; + height: 3.5rem; table-layout: none; } .header .logo { @@ -779,61 +740,76 @@ form th { color: #5b6871; background-color: #fff; } +.header .item.search input:focus ~ .btn, +.header .item.search input:hover ~ .btn { + background-color: #36c; +} +.header .item.search input:focus ~ .btn .icon, +.header .item.search input:hover ~ .btn .icon { + filter: brightness(3); +} .header .item.search .btn { width: 3rem; border-radius: 0 2px 2px 0; - background-color: #36c; - background-position: center; - background-repeat: no-repeat; - background-image: url(icons/magnifier.svg); + background-color: #26272a; border-left-width: 0; min-height: 35px; } -.header .item.search .btn img { - display: none; -} .header .item.search .btn:hover { background-color: #25c; } +.header .item.search .btn:hover .icon { + filter: brightness(3); +} .header .item.configure { - width: 2rem; + width: 3rem; position: absolute; right: 1rem; - top: 1.25rem; + top: 1rem; text-align: center; } +.header .item.configure .btn .icon, +.header .item.configure > .icon { + filter: brightness(3); +} +.header .item.configure .signin { + color: white; +} .header .item.configure .btn { - padding: 0 0.5rem; + padding: 0.25rem 1rem; background-color: transparent; - background-position: center; - background-repeat: no-repeat; - background-image: url(icons/cog-white.svg); -} -.header .item.configure .btn img { - display: none; } + /*=== Body */ #global { - height: calc(100% - 4rem); + height: calc(100% - 3.5rem); } /*=== Prompt (centered) */ +main.prompt { + margin: 3rem auto; + padding: 2rem; + background: #eff0f2; + 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 { @@ -891,6 +867,9 @@ form th { .btn.active { background-color: #36c; } +.btn.active .icon { + filter: brightness(3); +} /*=== Index menu */ .nav_menu { @@ -905,10 +884,7 @@ form th { background-repeat: no-repeat; } .nav_menu .btn:hover { - background-color: #eff0f2; -} -.nav_menu .stick { - background: #f9fafb; + background-color: #d5d8db; } .nav_menu .stick .btn { border-left-width: 0; @@ -924,32 +900,11 @@ form th { .nav_menu .stick .btn.active { background-color: #36c; } -.nav_menu .stick .btn img.icon { - display: none; -} -.nav_menu .stick .btn#toggle-read { - background-image: url(icons/read.svg); -} -.nav_menu .stick .btn#toggle-read.active { - background-image: url(icons/read-white.svg); -} -.nav_menu .stick .btn#toggle-unread { - background-image: url(icons/unread.svg); -} -.nav_menu .stick .btn#toggle-unread.active { - background-image: url(icons/unread-white.svg); -} -.nav_menu .stick .btn#toggle-starred { - background-image: url(icons/starred.svg); -} -.nav_menu .stick .btn#toggle-starred.active { - background-image: url(icons/starred-white.svg); +.nav_menu .stick .btn#toggle-read.active .icon { + filter: brightness(3.5); } -.nav_menu .stick .btn#toggle-non-starred { - background-image: url(icons/non-starred.svg); -} -.nav_menu .stick .btn#toggle-non-starred.active { - background-image: url(icons/non-starred-white.svg); +.nav_menu .stick .btn#toggle-unread.active .icon { + filter: brightness(3.5) grayscale(1); } .nav_menu .stick .btn.read_all { padding: 5px 16px; @@ -960,36 +915,12 @@ form th { .nav_menu .stick .btn.read_all:hover { background-color: #d5d8db; } -.nav_menu .stick .btn.view-normal { - background-image: url(icons/view-list.svg); -} -.nav_menu .stick .btn.view-normal.active { - background-image: url(icons/view-list-white.svg); -} -.nav_menu .stick .btn.view-global { - background-image: url(icons/view-global.svg); -} -.nav_menu .stick .btn.view-global.active { - background-image: url(icons/view-global-white.svg); -} -.nav_menu .stick .btn.view-reader { - background-image: url(icons/view-reader.svg); -} -.nav_menu .stick .btn.view-reader.active { - background-image: url(icons/view-reader-white.svg); -} -.nav_menu .stick .btn.view-rss { - background-image: url(icons/rss.svg); -} .nav_menu .stick .dropdown a.dropdown-toggle { border-left-width: 0; background-image: url(icons/more.svg); } - -#dropdown-query ~ .dropdown-menu .dropdown-header .icon { - vertical-align: middle; - background-color: #a6a7ae; - border-radius: 3px; +.nav_menu .stick .dropdown a.dropdown-toggle .icon { + display: none; } /*=== Content of feed articles */ @@ -1260,9 +1191,6 @@ form th { .post form { margin: 1rem 0; } -.post form .horizontal-list { - margin-bottom: 0.5rem; -} .post.content { max-width: 550px; } @@ -1385,26 +1313,6 @@ form th { /*=== MOBILE */ /*===========*/ @media (max-width: 840px) { - ul.nav .item { - width: 100%; - } - ul.nav .item img { - display: none; - } - ul.nav .item a { - box-sizing: border-box; - padding: 1rem 1rem 1rem 2.5rem; - background: url("../../themes/icons/logout.svg") no-repeat #17181a 3% center; - display: inline-block; - width: 100%; - color: #ffffff; - transition: all 0.2s ease-in-out; - } - ul.nav .item a:hover, ul.nav .item a:active { - background: url("../../themes/icons/logout.svg") no-repeat #f5633e 3% center; - text-decoration: none; - } - .form-group .group-name { text-align: left; } @@ -1439,6 +1347,7 @@ form th { .header { padding: 0.5rem; + height: 8rem; } .header .item.search { display: block; @@ -1456,9 +1365,15 @@ form th { .header .item.search input:focus { width: 100%; } - .header .item.search .btn { - min-height: 49px; - padding: 0.5rem 2rem; + + #global { + height: calc(100% - 8rem); + } + + main.prompt { + max-width: 100%; + min-width: auto; + width: 75%; } .post { @@ -1549,6 +1464,11 @@ html, body { font-size: 0.875rem; } +body.formLogin, +body.register { + background: #303136; +} + /*=== Links */ a, button.as-link { outline: none; diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css index 53844168e..2f0561e9e 100644 --- a/p/themes/Mapco/mapco.rtl.css +++ b/p/themes/Mapco/mapco.rtl.css @@ -139,6 +139,11 @@ input, select, textarea, button { vertical-align: middle; } +select { + padding-top: 9px; + padding-bottom: 9px; +} + option { padding: 0 0.5em; } @@ -261,6 +266,9 @@ form th { background: #36c; color: #fff; } +.dropdown-menu .item:not(.addItem):hover .icon { + filter: brightness(3); +} .dropdown-menu .item:not(.addItem):hover a, .dropdown-menu .item:not(.addItem):hover button, .dropdown-menu .item:not(.addItem):hover label { text-decoration: none; color: #fff; @@ -362,24 +370,16 @@ form th { border-radius: 2px 2px 0 0; } .box .box-title .configure { - margin-left: 4px; -} -.box .box-title:hover .configure { - background: url("icons/cog.svg") no-repeat 4px 4px; - display: block; - float: right; - width: 1.75rem; - height: 1.75rem; - border-radius: 2px; - margin-left: 0.5rem; + padding: 5px; } .box .box-title:hover .configure .icon { - display: none; - border-radius: 3px; vertical-align: middle; } .box .box-title:hover .configure:hover { - background: url("icons/cog-white.svg") no-repeat 4px 4px #36c; + background-color: #36c; +} +.box .box-title:hover .configure:hover .icon { + filter: brightness(3); } .box .box-title form input { width: 85%; @@ -401,31 +401,23 @@ form th { padding-right: 30px; } .box .box-content .item { - padding: 0.5rem 0; + padding: 0.25rem 0; color: #303136; font-size: 1rem; border-bottom: 1px solid #eff0f2; line-height: 1.7em; } -.box .box-content .item img { - margin-left: 0.75rem; -} .box .box-content .item .configure { - background: url("icons/cog.svg") no-repeat 4px 4px; - display: block; - float: right; - width: 1.75rem; - height: 1.75rem; - border-radius: 2px; - margin-left: 0.5rem; + padding: 5px; } .box .box-content .item .configure .icon { - display: none; - border-radius: 3px; vertical-align: middle; } .box .box-content .item .configure:hover { - background: url("icons/cog-white.svg") no-repeat 4px 4px #36c; + background-color: #36c; +} +.box .box-content .item .configure:hover .icon { + filter: brightness(3); } .box .box-content .item:last-child { border-bottom: none; @@ -444,7 +436,7 @@ form th { color: #fff; } #bigMarkAsRead:hover .bigTick { - background: url(icons/tick-white.svg) center no-repeat; + filter: brightness(5); } #bigMarkAsRead .bigTick { margin: 0.5rem 0; @@ -456,36 +448,6 @@ form th { white-space: nowrap; } -.formLogin { - background: #303136; -} -.formLogin .header .configure { - padding-left: 1rem; -} -.formLogin .header .configure img { - margin-left: 0.5rem; -} -.formLogin .header .configure a.signin { - color: #fff; -} -.formLogin h1 { - color: #fff; -} -.formLogin form#crypto-form div { - margin-bottom: 1rem; -} -.formLogin form#crypto-form div label { - color: #c5ced3; - font-size: 1rem; -} -.formLogin form#crypto-form div input { - background: #1d1e22; -} -.formLogin form#crypto-form div input:focus { - background: #f9fafb; - color: #303136; -} - /*=== DIVERS */ /*===========*/ .aside.aside_feed .nav-form input, @@ -570,8 +532,7 @@ form th { .stick input, .stick .btn { border-radius: 0; } -.stick .btn:first-child, -.stick input:first-child { +.stick .btn:first-child { border-radius: 0 5px 5px 0; } .stick .btn:last-child, .stick input:last-child, .stick .btn + .dropdown > .btn { @@ -746,7 +707,7 @@ form th { background: #303136; display: block; width: auto; - height: 3rem; + height: 3.5rem; table-layout: none; } .header .logo { @@ -779,61 +740,76 @@ form th { color: #5b6871; background-color: #fff; } +.header .item.search input:focus ~ .btn, +.header .item.search input:hover ~ .btn { + background-color: #36c; +} +.header .item.search input:focus ~ .btn .icon, +.header .item.search input:hover ~ .btn .icon { + filter: brightness(3); +} .header .item.search .btn { width: 3rem; border-radius: 2px 0 0 2px; - background-color: #36c; - background-position: center; - background-repeat: no-repeat; - background-image: url(icons/magnifier.svg); + background-color: #26272a; border-right-width: 0; min-height: 35px; } -.header .item.search .btn img { - display: none; -} .header .item.search .btn:hover { background-color: #25c; } +.header .item.search .btn:hover .icon { + filter: brightness(3); +} .header .item.configure { - width: 2rem; + width: 3rem; position: absolute; left: 1rem; - top: 1.25rem; + top: 1rem; text-align: center; } +.header .item.configure .btn .icon, +.header .item.configure > .icon { + filter: brightness(3); +} +.header .item.configure .signin { + color: white; +} .header .item.configure .btn { - padding: 0 0.5rem; + padding: 0.25rem 1rem; background-color: transparent; - background-position: center; - background-repeat: no-repeat; - background-image: url(icons/cog-white.svg); -} -.header .item.configure .btn img { - display: none; } + /*=== Body */ #global { - height: calc(100% - 4rem); + height: calc(100% - 3.5rem); } /*=== Prompt (centered) */ +main.prompt { + margin: 3rem auto; + padding: 2rem; + background: #eff0f2; + max-width: 400px; + min-width: 300px; + width: 33%; + border-radius: 5px; +} + .prompt { text-align: center; } -.prompt label { +.prompt label, +.prompt .help { text-align: right; } -.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 { @@ -891,6 +867,9 @@ form th { .btn.active { background-color: #36c; } +.btn.active .icon { + filter: brightness(3); +} /*=== Index menu */ .nav_menu { @@ -905,10 +884,7 @@ form th { background-repeat: no-repeat; } .nav_menu .btn:hover { - background-color: #eff0f2; -} -.nav_menu .stick { - background: #f9fafb; + background-color: #d5d8db; } .nav_menu .stick .btn { border-right-width: 0; @@ -924,32 +900,11 @@ form th { .nav_menu .stick .btn.active { background-color: #36c; } -.nav_menu .stick .btn img.icon { - display: none; -} -.nav_menu .stick .btn#toggle-read { - background-image: url(icons/read.svg); -} -.nav_menu .stick .btn#toggle-read.active { - background-image: url(icons/read-white.svg); -} -.nav_menu .stick .btn#toggle-unread { - background-image: url(icons/unread.svg); -} -.nav_menu .stick .btn#toggle-unread.active { - background-image: url(icons/unread-white.svg); -} -.nav_menu .stick .btn#toggle-starred { - background-image: url(icons/starred.svg); -} -.nav_menu .stick .btn#toggle-starred.active { - background-image: url(icons/starred-white.svg); +.nav_menu .stick .btn#toggle-read.active .icon { + filter: brightness(3.5); } -.nav_menu .stick .btn#toggle-non-starred { - background-image: url(icons/non-starred.svg); -} -.nav_menu .stick .btn#toggle-non-starred.active { - background-image: url(icons/non-starred-white.svg); +.nav_menu .stick .btn#toggle-unread.active .icon { + filter: brightness(3.5) grayscale(1); } .nav_menu .stick .btn.read_all { padding: 5px 16px; @@ -960,36 +915,12 @@ form th { .nav_menu .stick .btn.read_all:hover { background-color: #d5d8db; } -.nav_menu .stick .btn.view-normal { - background-image: url(icons/view-list.svg); -} -.nav_menu .stick .btn.view-normal.active { - background-image: url(icons/view-list-white.svg); -} -.nav_menu .stick .btn.view-global { - background-image: url(icons/view-global.svg); -} -.nav_menu .stick .btn.view-global.active { - background-image: url(icons/view-global-white.svg); -} -.nav_menu .stick .btn.view-reader { - background-image: url(icons/view-reader.svg); -} -.nav_menu .stick .btn.view-reader.active { - background-image: url(icons/view-reader-white.svg); -} -.nav_menu .stick .btn.view-rss { - background-image: url(icons/rss.svg); -} .nav_menu .stick .dropdown a.dropdown-toggle { border-right-width: 0; background-image: url(icons/more.svg); } - -#dropdown-query ~ .dropdown-menu .dropdown-header .icon { - vertical-align: middle; - background-color: #a6a7ae; - border-radius: 3px; +.nav_menu .stick .dropdown a.dropdown-toggle .icon { + display: none; } /*=== Content of feed articles */ @@ -1260,9 +1191,6 @@ form th { .post form { margin: 1rem 0; } -.post form .horizontal-list { - margin-bottom: 0.5rem; -} .post.content { max-width: 550px; } @@ -1385,26 +1313,6 @@ form th { /*=== MOBILE */ /*===========*/ @media (max-width: 840px) { - ul.nav .item { - width: 100%; - } - ul.nav .item img { - display: none; - } - ul.nav .item a { - box-sizing: border-box; - padding: 1rem 2.5rem 1rem 1rem; - background: url("../../themes/icons/logout.svg") no-repeat #17181a 97% center; - display: inline-block; - width: 100%; - color: #ffffff; - transition: all 0.2s ease-in-out; - } - ul.nav .item a:hover, ul.nav .item a:active { - background: url("../../themes/icons/logout.svg") no-repeat #f5633e 97% center; - text-decoration: none; - } - .form-group .group-name { text-align: right; } @@ -1439,6 +1347,7 @@ form th { .header { padding: 0.5rem; + height: 8rem; } .header .item.search { display: block; @@ -1456,9 +1365,15 @@ form th { .header .item.search input:focus { width: 100%; } - .header .item.search .btn { - min-height: 49px; - padding: 0.5rem 2rem; + + #global { + height: calc(100% - 8rem); + } + + main.prompt { + max-width: 100%; + min-width: auto; + width: 75%; } .post { @@ -1549,6 +1464,11 @@ html, body { font-size: 0.875rem; } +body.formLogin, +body.register { + background: #303136; +} + /*=== Links */ a, button.as-link { outline: none; diff --git a/p/themes/Mapco/mapco.scss b/p/themes/Mapco/mapco.scss index 0cf9a84f2..5457b15aa 100644 --- a/p/themes/Mapco/mapco.scss +++ b/p/themes/Mapco/mapco.scss @@ -40,6 +40,11 @@ html, body { font-size: 0.875rem; } +body.formLogin, +body.register { + background: variables.$sid-bg; +} + /*=== Links */ a, button.as-link { outline: none; -- cgit v1.2.3