From 5ec2ac00218170519a7f2dd259e244470c75d3c5 Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Wed, 27 Jan 2021 10:51:34 +0100 Subject: [PATCH] feat: nouveau style pour les liens --- scss/_palette.scss | 4 ---- scss/_typography.scss | 14 ++++++++--- scss/components/_cards.scss | 16 +++++++++++-- style.css | 48 ++++++++++++++++++++++++------------- 4 files changed, 56 insertions(+), 26 deletions(-) diff --git a/scss/_palette.scss b/scss/_palette.scss index d64e403..98a87fe 100644 --- a/scss/_palette.scss +++ b/scss/_palette.scss @@ -53,10 +53,6 @@ $color-success: $color-green; // Colorize important elements -a, a:hover, a:active { - color: $color-link; -} - ::selection { @include background-color($color-selection, $color-light); } diff --git a/scss/_typography.scss b/scss/_typography.scss index 16a9180..2e20cf3 100644 --- a/scss/_typography.scss +++ b/scss/_typography.scss @@ -38,11 +38,19 @@ em { font-weight: $fontweight_base; } -a { - color: $color-link; + +a:not(.preview-link), a:visited:not(.preview-link) { + color: $color-light; + background-color: $color-link; text-decoration:none; - &:hover, &:active { + padding:0.05rem; + padding-left:0.25rem; + padding-right:0.25rem; + border-radius:0.1rem; + &:hover, &:active, &:focus { color: $color-link; + background-color: transparent; + text-decoration:none; } } diff --git a/scss/components/_cards.scss b/scss/components/_cards.scss index e37056b..253352c 100644 --- a/scss/components/_cards.scss +++ b/scss/components/_cards.scss @@ -89,7 +89,7 @@ $card-smallpad: $lineheight_half; margin:0; } - .menu-element, .menu-element-link, li a { + .menu-element, .menu-element-link, li a, li a:visited { display:flex; line-height:$lineheight; padding-right:$lineheight_half; @@ -120,7 +120,7 @@ $card-smallpad: $lineheight_half; } } - a { + a, a:visited { text-decoration:none; color: $color-violet; background-color:transparent; @@ -238,4 +238,16 @@ ul.card-list, .card > ul { &-danger { @include background-color($color-danger, $color-light); } &-info { @include background-color($color-info, $color-light); } &-success { @include background-color($color-success, $color-light); } + + a, a:visited { + color: $color-light; + background-color:rgba(0,0,0,0.15); + text-decoration:none; + opacity:1; + &:hover, &:active, &:visited { + color: $color-light; + background-color:transparent; + opacity:1; + } + } } diff --git a/style.css b/style.css index 0046edd..b55ddcc 100644 --- a/style.css +++ b/style.css @@ -22,9 +22,6 @@ * également celles spécifiques pour certains sujets (liens, texte) * */ -a, a:hover, a:active { - color: #2aa198; } - ::selection { background-color: #2aa198 !important; color: #fdf6e3; } @@ -309,11 +306,18 @@ em { font-style: italic; font-weight: 400; } -a { - color: #2aa198; - text-decoration: none; } - a:hover, a:active { - color: #2aa198; } +a:not(.preview-link), a:visited:not(.preview-link) { + color: #fdf6e3; + background-color: #2aa198; + text-decoration: none; + padding: 0.05rem; + padding-left: 0.25rem; + padding-right: 0.25rem; + border-radius: 0.1rem; } + a:not(.preview-link):hover, a:not(.preview-link):active, a:not(.preview-link):focus, a:visited:not(.preview-link):hover, a:visited:not(.preview-link):active, a:visited:not(.preview-link):focus { + color: #2aa198; + background-color: transparent; + text-decoration: none; } p { padding: 0; @@ -876,7 +880,7 @@ ul.social { list-style: none; padding: 0; margin: 0; } - .card-menu .menu-element, .card-menu .menu-element-link, .card-menu li a, .menu-menu .menu-element, .menu-menu .menu-element-link, .menu-menu li a { + .card-menu .menu-element, .card-menu .menu-element-link, .card-menu li a, .card-menu li a:visited, .menu-menu .menu-element, .menu-menu .menu-element-link, .menu-menu li a, .menu-menu li a:visited { display: flex; line-height: 1.5rem; padding-right: 0.75rem; @@ -892,7 +896,7 @@ ul.social { position: relative; z-index: 1; overflow: visible; } - .card-menu .menu-element:before, .card-menu .menu-element-link:before, .card-menu li a:before, .menu-menu .menu-element:before, .menu-menu .menu-element-link:before, .menu-menu li a:before { + .card-menu .menu-element:before, .card-menu .menu-element-link:before, .card-menu li a:before, .card-menu li a:visited:before, .menu-menu .menu-element:before, .menu-menu .menu-element-link:before, .menu-menu li a:before, .menu-menu li a:visited:before { content: " "; position: absolute; top: 0; @@ -902,24 +906,24 @@ ul.social { z-index: -1; transform: skewX(-15deg); transition: background-color 0.3s; } - .card-menu .menu-element strong, .card-menu .menu-element-link strong, .card-menu li a strong, .menu-menu .menu-element strong, .menu-menu .menu-element-link strong, .menu-menu li a strong { + .card-menu .menu-element strong, .card-menu .menu-element-link strong, .card-menu li a strong, .card-menu li a:visited strong, .menu-menu .menu-element strong, .menu-menu .menu-element-link strong, .menu-menu li a strong, .menu-menu li a:visited strong { font-weight: 900; color: #002b36 !important; } - .card-menu .menu-element.noflex, .card-menu .menu-element-link.noflex, .card-menu li a.noflex, .menu-menu .menu-element.noflex, .menu-menu .menu-element-link.noflex, .menu-menu li a.noflex { + .card-menu .menu-element.noflex, .card-menu .menu-element-link.noflex, .card-menu li a.noflex, .card-menu li a.noflex:visited, .menu-menu .menu-element.noflex, .menu-menu .menu-element-link.noflex, .menu-menu li a.noflex, .menu-menu li a.noflex:visited { justify-content: flex-start; } - .card-menu .menu-element.noflex :first-child, .card-menu .menu-element-link.noflex :first-child, .card-menu li a.noflex :first-child, .menu-menu .menu-element.noflex :first-child, .menu-menu .menu-element-link.noflex :first-child, .menu-menu li a.noflex :first-child { + .card-menu .menu-element.noflex :first-child, .card-menu .menu-element-link.noflex :first-child, .card-menu li a.noflex :first-child, .card-menu li a.noflex:visited :first-child, .menu-menu .menu-element.noflex :first-child, .menu-menu .menu-element-link.noflex :first-child, .menu-menu li a.noflex :first-child, .menu-menu li a.noflex:visited :first-child { min-width: 2rem; } - .card-menu a, .menu-menu a { + .card-menu a, .card-menu a:visited, .menu-menu a, .menu-menu a:visited { text-decoration: none; color: #d33682; background-color: transparent; } - .card-menu a:hover, .menu-menu a:hover { + .card-menu a:hover, .card-menu a:visited:hover, .menu-menu a:hover, .menu-menu a:visited:hover { text-decoration: none; color: #d33682; position: relative; z-index: 1; overflow: visible; } - .card-menu a:hover:before, .menu-menu a:hover:before { + .card-menu a:hover:before, .card-menu a:visited:hover:before, .menu-menu a:hover:before, .menu-menu a:visited:hover:before { content: " "; position: absolute; top: 0; @@ -929,7 +933,7 @@ ul.social { z-index: -1; transform: skewX(-15deg); transition: background-color 0.3s; } - .card-menu a:hover:before, .menu-menu a:hover:before { + .card-menu a:hover:before, .card-menu a:visited:hover:before, .menu-menu a:hover:before, .menu-menu a:visited:hover:before { background-color: #e3d9ba; } .card-menu .menu-divider, .menu-menu .menu-divider { position: relative; @@ -1191,6 +1195,16 @@ ul.card-list, .card > ul { background-color: #859900 !important; color: #fdf6e3; } +.toast a, .toast a:visited { + color: #fdf6e3; + background-color: rgba(0, 0, 0, 0.15); + text-decoration: none; + opacity: 1; } + .toast a:hover, .toast a:active, .toast a:visited, .toast a:visited:hover, .toast a:visited:active, .toast a:visited:visited { + color: #fdf6e3; + background-color: transparent; + opacity: 1; } + /* * 3. Buttons and labels * All clickable elements