css: Fix dark theme hover color for copy invite link.

Extracted colors into variables and used them inside the id to
solve the specificity issue.
This commit is contained in:
Aman Agrawal 2023-10-22 12:23:15 +00:00 committed by Tim Abbott
parent 18475a10d7
commit 5dba15160d
2 changed files with 12 additions and 9 deletions

View File

@ -1255,14 +1255,6 @@
box-shadow: 0 5px 10px hsl(0deg 0% 0% / 40%);
}
#invite-user-modal {
#clipboard_image {
& path {
fill: hsl(236deg 33% 90%);
}
}
}
#user-profile-modal {
#default-section {
.default-field {

View File

@ -328,6 +328,8 @@ body {
--color-gear-menu-blue-text: hsl(217deg 100% 50%);
--color-header-button-hover: hsl(0deg 0% 0% / 5%);
--color-header-button-focus: hsl(0deg 0% 0% / 8%);
--color-fill-hover-copy-icon: hsl(200deg 100% 40%);
--color-fill-user-invite-copy-icon: hsl(0deg 0% 46.7%);
}
%dark-theme {
@ -482,6 +484,7 @@ body {
--color-gear-menu-blue-text: hsl(217deg 100% 65%);
--color-header-button-hover: hsl(0deg 0% 100% / 4%);
--color-header-button-focus: hsl(0deg 0% 100% / 7%);
--color-fill-user-invite-copy-icon: hsl(236deg 33% 90%);
}
@media screen {
@ -1013,7 +1016,7 @@ li,
z-index: 2;
&:hover svg path {
fill: hsl(200deg 100% 40%);
fill: var(--color-fill-hover-copy-icon);
}
}
@ -1043,6 +1046,14 @@ li,
&:active {
box-shadow: none;
}
& path {
fill: var(--color-fill-user-invite-copy-icon);
}
&:hover svg path {
fill: var(--color-fill-hover-copy-icon);
}
}
#clipboard_image {