feat: nouveau style pour les liens
This commit is contained in:
parent
9cee7e78a5
commit
5ec2ac0021
4 changed files with 56 additions and 26 deletions
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
48
style.css
48
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
|
||||
|
|
Reference in a new issue