mirror of
https://github.com/SoftFever/OrcaSlicer.git
synced 2026-03-06 10:34:51 -07:00
b02a50add0
* init * update * add ability to select / unselect filtered items * update * update * match icon placements on filter / search boxes * add clear button * add ability to filter checked / unchecked items * update * update * update * update * remove use of :has selector for better browser support * increase contrast on light mode --------- Co-authored-by: SoftFever <softfeverever@gmail.com>
207 lines
No EOL
6.9 KiB
CSS
207 lines
No EOL
6.9 KiB
CSS
/*----ORCA UNIFIED STYLING FOR ALL CONTROLS----*/
|
|
|
|
/*////////////////////////////*/
|
|
/* VARIABLES */
|
|
/*////////////////////////////*/
|
|
|
|
/*/// CONTROL VALUES ///*/
|
|
:root {
|
|
--dialog-button-sizer-height : 62px; /*----32 + 15 * 2----*/
|
|
--dialog-button-gap : 15px;
|
|
}
|
|
|
|
/*/// COLORS ///*/
|
|
:root {
|
|
--main-color : #009688;
|
|
--main-color-hover : #26A69A;
|
|
--main-color-fixed : #009688;
|
|
--bg-color : #FFFFFF;
|
|
--bg-color-secondary : #F4F4F4;
|
|
--bg-color-alt : #F0F0F0;
|
|
--fg-color-text : #262E30;
|
|
--fg-color-label : #363636;
|
|
--fg-color-disabled : #ACACAC;
|
|
--focus-bg-item : #BFE1DE;
|
|
--focus-bg-box : #E5F0EE;
|
|
--border-color : #DBDBDB;
|
|
--icon-color : #7C8282;
|
|
--button-fg-light : #FEFEFE;
|
|
--button-fg-text : #262E30;
|
|
--button-fg-disabled : #6B6B6B;
|
|
--button-bg-normal : #DFDFDF;
|
|
--button-bg-hover : #D4D4D4;
|
|
--button-bg-disabled : var(--button-bg-normal);
|
|
--button-bg-alert : #E14747;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--main-color : #00675B;
|
|
--main-color-hover : #008172;
|
|
--main-color-fixed : #009688;
|
|
--bg-color : #2D2D31;
|
|
--bg-color-secondary : #36363B;
|
|
--bg-color-alt : #242428;
|
|
--fg-color-text : #EFEFF0;
|
|
--fg-color-label : #B2B3B5;
|
|
--fg-color-disabled : #65656A;
|
|
--focus-bg-item : #223C3C;
|
|
--focus-bg-box : #283232;
|
|
--border-color : #4A4A51;
|
|
--icon-color : #949494;
|
|
--button-fg-light : #FEFEFE;
|
|
--button-fg-text : #EFEFF0;
|
|
--button-fg-disabled : #818183;
|
|
--button-bg-normal : #3E3E45;
|
|
--button-bg-hover : #4D4D54;
|
|
--button-bg-disabled : var(--button-bg-normal);
|
|
--button-bg-alert : #E14747;
|
|
}
|
|
}
|
|
|
|
/*////////////////////////////*/
|
|
/* ICONS */
|
|
/*////////////////////////////*/
|
|
|
|
:root {
|
|
--icon-filter:
|
|
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round"><polygon points=".5 .5 5.5 7.5 5.5 13.5 9.5 15.5 9.5 7.5 14.5 .5 .5 .5"/><line x1="8.64" y1="4.5" x2="10.19" y2="2.34"/></g></svg>');
|
|
--icon-search:
|
|
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M6.5,2A4.505,4.505,0,0,0,2,6.5a.5.5,0,0,0,1,0A3.5,3.5,0,0,1,6.5,3a.5.5,0,0,0,0-1Z"/><path d="M14.854,14.146l-3.423-3.422a6.518,6.518,0,1,0-.707.707l3.422,3.423a.5.5,0,0,0,.708-.708ZM1,6.5A5.5,5.5,0,1,1,6.5,12,5.507,5.507,0,0,1,1,6.5Z"/></svg>');
|
|
--icon-input-clear:
|
|
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round"><path d="M.76,7.32L4.91,2.82c.19-.21.46-.32.74-.32h8.86c.55,0,1,.45,1,1v9c0,.55-.45,1-1,1H5.64c-.28,0-.55-.12-.74-.32L.76,8.68c-.35-.38-.35-.97,0-1.35Z"/><line x1="12.5" y1="5.5" x2="7.5" y2="10.5"/><line x1="12.5" y1="10.5" x2="7.5" y2="5.5"/></g></svg>');
|
|
--icon-combo-arrow:
|
|
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><polyline points="11.5 6.5 6.5 9.5 1.5 6.5" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round"/></svg>');
|
|
}
|
|
|
|
/*////////////////////////////*/
|
|
/* UI COMPONENTS */
|
|
/*////////////////////////////*/
|
|
|
|
/*/// BUTTONS ///*/
|
|
/*----Values slightly different since renderer is different----*/
|
|
/*----Currently no support for focus border----*/
|
|
.ButtonTypeCompact { font-size: 11px; padding: 0px 8px ; border-radius: 12px; line-height: 23px; height: 24px; text-align: center}
|
|
.ButtonTypeWindow { font-size: 13px; padding: 0px 11px; border-radius: 12px; line-height: 23px; height: 24px; text-align: center}
|
|
.ButtonTypeChoice { font-size: 15px; padding: 0px 13px; border-radius: 4px ; line-height: 31px; height: 32px; text-align: center}
|
|
.ButtonTypeParameter { font-size: 15px; padding: 0px 12px; border-radius: 4px ; line-height: 25px; height: 26px; text-align: center}
|
|
.ButtonTypeExpanded { font-size: 15px; padding: 0px 12px; border-radius: 4px ; line-height: 31px; height: 32px; text-align: center}
|
|
|
|
.ButtonTypeWindow,
|
|
.ButtonTypeCompact {
|
|
min-width: 36px; /*----58 - 11*2(padding)----*/
|
|
}
|
|
|
|
.ButtonTypeWindow.ButtonStyleConfirm { /*---- Commonly used as "All" button before "Clear All" button----*/
|
|
margin-right:10px;
|
|
}
|
|
|
|
.ButtonTypeChoice {
|
|
min-width: 74px; /*----100 - 13*2(padding)----*/
|
|
margin-left:var(--dialog-button-gap);
|
|
}
|
|
|
|
.ButtonTypeExpanded {
|
|
width: 100%;
|
|
}
|
|
|
|
.ButtonTypeExpanded {
|
|
width: 120px;
|
|
}
|
|
|
|
.ButtonStyleConfirm { background: var(--main-color ); color: var(--button-fg-light )}
|
|
.ButtonStyleConfirm:hover { background: var(--main-color-hover ); color: var(--button-fg-light )}
|
|
.ButtonStyleRegular { background: var(--button-bg-normal ); color: var(--button-fg-text )}
|
|
.ButtonStyleRegular:hover { background: var(--button-bg-hover ); color: var(--button-fg-text )}
|
|
.ButtonStyleAlert { background: var(--button-bg-normal ); color: var(--button-fg-text )}
|
|
.ButtonStyleAlert:hover { background: var(--button-bg-alert ); color: var(--button-fg-light )}
|
|
.ButtonStyleDisabled { background: var(--button-bg-disabled); color: var(--button-fg-disabled)}
|
|
|
|
/*/// COMBOBOX ///*/
|
|
/*
|
|
STRUCTURE
|
|
<div class="ComboBox NoLabel">
|
|
<div class="arrow-icon"></div>
|
|
<select id="filter-tags">
|
|
<option value="0" disabled selected hidden></option>
|
|
<option value="1">Checked</option>
|
|
<option value="2">Unchecked</option>
|
|
</select>
|
|
</div>
|
|
OPTIONS
|
|
NoLabel : Hides label and just shows arrow icon
|
|
*/
|
|
.ComboBox {
|
|
position: relative;
|
|
background: inherit;
|
|
}
|
|
|
|
.ComboBox > select {
|
|
width: 120px;
|
|
background: inherit;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 0;
|
|
appearance: none;
|
|
-webkit-appearance: none; /* Hide arrow */
|
|
font-size: 14px;
|
|
color: var(--fg-color-text);
|
|
padding: 4px 4px 4px 24px;
|
|
}
|
|
|
|
.ComboBox > .arrow-icon {
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 16px;
|
|
left: 7px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
mask-image: var(--icon-combo-arrow);
|
|
-webkit-mask-image: var(--icon-combo-arrow);
|
|
background-color: var(--icon-color);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ComboBox > select:focus {
|
|
outline: none;
|
|
background-color: var(--focus-bg-box);
|
|
border-color: var(--main-color);;
|
|
}
|
|
|
|
.ComboBox > select:hover {
|
|
border-color: var(--main-color);;
|
|
}
|
|
|
|
.ComboBox.NoLabel > select {
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 4px;
|
|
color: transparent;
|
|
font-size: unset;
|
|
}
|
|
|
|
.ComboBox option {
|
|
background: var(--bg-color);
|
|
}
|
|
|
|
.ComboBox option:checked {
|
|
background: var(--focus-bg-item);
|
|
}
|
|
|
|
/*/// SCROLL BARS ///*/
|
|
.thin-scroll::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px
|
|
}
|
|
|
|
.thin-scroll::-webkit-scrollbar-track {
|
|
background: var(--bg-color-alt);
|
|
}
|
|
|
|
.thin-scroll::-webkit-scrollbar-thumb {
|
|
background: var(--button-bg-normal);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.thin-scroll::-webkit-scrollbar-thumb:hover {
|
|
background: var(--button-bg-hover);
|
|
} |