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 .icon,
+ > .icon {
+ filter: brightness(3)
+ }
+
+ .signin {
+ color: white;
+ }
+
.btn {
- img {display: none;}
-
- padding: 0 0.5rem;
- // border-radius: 0 2px 2px 0;
-
+ padding: 0.25rem 1rem;
background-color: transparent;
- background-position: center;
- background-repeat: no-repeat;
- background-image: url(icons/cog-white.svg);
-
- // border-left-width: 0;
-
- // width: 3rem;
- &:hover {
- // background-color: $main-first-alt;
- }
}
}
}
@@ -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 @@
-
-
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 @@
-
-
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 @@
-
-