sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Fix composer button visibility in contrast colour mode (#31255)

Browse Source 
* Fix composer button visibility in contrast colour mode

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Simplify

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2025-12-09 13:59:01 +00:00
committed by GitHub
parent d30e6f25d3
commit 4fda167c11
46 changed files with 428 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/_common.pcss
+6 -36
View File
@@ -896,53 +896,23 @@ legend {
@define-mixin composerButtonHighLight {
background: var(--cpd-color-bg-subtle-primary);
&::before {
background-color: var(--cpd-color-icon-primary) !important;
}
color: var(--cpd-color-icon-primary) !important;
}
@define-mixin composerButton $border-radius, $hover-color, $hover-bg {
--size: 26px;
position: relative;
cursor: pointer;
height: var(--size);
line-height: var(--size);
width: auto;
padding-left: var(--size);
border-radius: $border-radius;
&::before {
content: "";
position: absolute;
top: 3px;
left: 3px;
height: 20px;
width: 20px;
background-color: $icon-button-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
z-index: 2;
}
&::after {
content: "";
position: absolute;
left: 0;
top: 0;
z-index: 0;
width: var(--size);
height: var(--size);
border-radius: $border-radius;
svg {
color: $icon-button-color;
}
&:hover {
&::after {
background: $hover-bg;
}
background-color: $hover-bg;
&::before {
background-color: $hover-color;
svg {
color: $hover-color;
}
}
}