MokoConsulting/MokoCassiopeia
1
1
Fork 0
Code Issues 2 Pull Requests Actions Packages Releases 1 Activity

Convert choices.js component colors to CSS variables

Browse Source 
Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2026-03-07 22:00:05 +00:00
parent eab5926006
commit 81066dd359
3 changed files with 50 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/media/css/colors/dark/colors_standard.css
View File

@@ -236,6 +236,22 @@ color-scheme: dark;
--taba-btn-blue: #3d75a8;
--taba-btn-red: #c43620;
--taba-btn-gray: #6a7080;
--taba-msg-bg: #1e2430;
--toc-link-color: #9fa6ad;
--toc-link-active-color: #91a4ff;
--choices-disabled-bg: #2b323b;
--choices-input-bg: var(--body-bg);
--choices-border-light: #48525d;
--choices-arrow-color: #9fa6ad;
--choices-inner-bg: #1a2027;
--choices-focused-border: #5472ff;
--choices-dropdown-bg: var(--body-bg);
--choices-item-bg: #1a5f75;
--choices-item-border: #1a748f;
--choices-item-hover-bg: #1a748f;
--choices-item-hover-border: #1a8aa8;
--choices-item-disabled-bg: #48525d;
--choices-item-disabled-border: #36404a;
/* ===== STANDARD COLORS ===== */
--blue: #91a4ff;

16
src/media/css/colors/light/colors_standard.css
View File

@@ -235,6 +235,22 @@ color-scheme: light;
--taba-btn-blue: #5091cd;
--taba-btn-red: #f44321;
--taba-btn-gray: #AAA;
--taba-msg-bg: #f5f5f5;
--toc-link-color: #767676;
--toc-link-active-color: #563d7c;
--choices-disabled-bg: #eaeaea;
--choices-input-bg: var(--white);
--choices-border-light: #ddd;
--choices-arrow-color: #333;
--choices-inner-bg: #f9f9f9;
--choices-focused-border: #b7b7b7;
--choices-dropdown-bg: var(--white);
--choices-item-bg: #00bcd4;
--choices-item-border: #00a5bb;
--choices-item-hover-bg: #00a5bb;
--choices-item-hover-border: #008fa1;
--choices-item-disabled-bg: #aaaaaa;
--choices-item-disabled-border: #919191;
/* ===== STANDARD COLORS ===== */
--blue: #010156;

36
src/media/css/template.css
View File

@@ -17633,7 +17633,7 @@ code {
}
.taba-msghead {
background-color: #f5f5f5;
background-color: var(--taba-msg-bg);
padding: 0.25rem;
padding-left: 0.625rem;
padding-right: 0.375rem;
@@ -17641,7 +17641,7 @@ code {
}
.taba-msg {
background-color: #f5f5f5;
background-color: var(--taba-msg-bg);
padding: 0.5rem;
border-radius: 0px 8px 8px 8px;
word-wrap: break-word;
@@ -17652,21 +17652,21 @@ nav[data-toggle=toc] .nav>li>a{
padding:0.25rem 1.25rem;
font-size:13px;
font-weight:500;
color:#767676;
color: var(--toc-link-color);
}
nav[data-toggle=toc] .nav>li>a:focus,nav[data-toggle=toc] .nav>li>a:hover{
padding-left:1.1875rem;
color:#563d7c;
color: var(--toc-link-active-color);
text-decoration:none;
background-color:transparent;
border-left:1px solid #563d7c;
border-left:1px solid var(--toc-link-active-color);
}
nav[data-toggle=toc] .nav-link.active,nav[data-toggle=toc] .nav-link.active:focus,nav[data-toggle=toc] .nav-link.active:hover{
padding-left:1.125rem;
font-weight:700;
color:#563d7c;
color: var(--toc-link-active-color);
background-color:transparent;
border-left:2px solid #563d7c;
border-left:2px solid var(--toc-link-active-color);
}
nav[data-toggle=toc] .nav-link+ul{
display:none;
@@ -17711,7 +17711,7 @@ nav[data-toggle=toc] .nav-link.active+ul{
}
.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
background-color: #eaeaea;
background-color: var(--choices-disabled-bg);
cursor: not-allowed;
-webkit-user-select: none;
-moz-user-select: none;
@@ -17735,8 +17735,8 @@ nav[data-toggle=toc] .nav-link.active+ul{
display: block;
width: 100%;
padding: 0.625rem;
border-bottom: 1px solid #ddd;
background-color: #fff;
border-bottom: 1px solid var(--choices-border-light);
background-color: var(--choices-input-bg);
margin: 0;
}
.choices[data-type*=select-one] .choices__button {
@@ -17768,7 +17768,7 @@ nav[data-toggle=toc] .nav-link.active+ul{
height: 0;
width: 0;
border-style: solid;
border-color: #333 transparent transparent transparent;
border-color: var(--choices-arrow-color) transparent transparent transparent;
border-width: 5px;
position: absolute;
right: 11.5px;
@@ -17777,7 +17777,7 @@ nav[data-toggle=toc] .nav-link.active+ul{
pointer-events: none;
}
.choices[data-type*=select-one].is-open::after {
border-color: transparent transparent #333 transparent;
border-color: transparent transparent var(--choices-arrow-color) transparent;
margin-top: -0.46875rem;
}
.choices[data-type*=select-one][dir=rtl]::after {
@@ -17822,16 +17822,16 @@ nav[data-toggle=toc] .nav-link.active+ul{
display: inline-block;
vertical-align: top;
width: 100%;
background-color: #f9f9f9;
background-color: var(--choices-inner-bg);
padding: 0.46875rem 0.46875rem 0.234375rem;
border: 1px solid #ddd;
border: 1px solid var(--choices-border-light);
border-radius: 2.5px;
font-size: 14px;
min-height: 44px;
overflow: hidden;
}
.is-focused .choices__inner, .is-open .choices__inner {
border-color: #b7b7b7;
border-color: var(--choices-focused-border);
}
.is-open .choices__inner {
border-radius: 2.5px 2.5px 0 0;
@@ -17899,8 +17899,8 @@ nav[data-toggle=toc] .nav-link.active+ul{
z-index: 1;
position: absolute;
width: 100%;
background-color: #fff;
border: 1px solid #ddd;
background-color: var(--choices-dropdown-bg);
border: 1px solid var(--choices-border-light);
top: 100%;
margin-top: -0.0625rem;
border-bottom-left-radius: 2.5px;
@@ -17913,7 +17913,7 @@ nav[data-toggle=toc] .nav-link.active+ul{
visibility: visible;
}
.is-open .choices__list--dropdown {
border-color: #b7b7b7;
border-color: var(--choices-focused-border);
}
.is-flipped .choices__list--dropdown {
top: auto;