1
0
Fork 0
nih-plug/nih_plug_vizia/assets/widgets.css
2023-03-18 15:16:52 +01:00

150 lines
2.8 KiB
CSS

/* Default styling for the widgets included in nih_plug_vizia */
/* See ./theme.css for overrides for the default widgets */
generic-ui {
child-space: 10px;
col-between: 5px;
layout-type: column;
row-between: 5px;
}
scrollview > vstack > generic-ui {
child-space: 5px;
/* Our scrollview styling will already add some padding here */
child-right: 0;
}
generic-ui .row {
col-between: 6px;
layout-type: row;
}
generic-ui .label {
left: 1s;
top: 1s;
bottom: 1s;
right: 0;
}
param-button {
height: 30px;
width: auto;
border-color: #0a0a0a;
border-width: 1px;
child-top: 1s;
child-right: 7px;
child-bottom: 1s;
child-left: 7px;
background-color: #d0d0d000;
transition: background-color 0.1 0;
}
param-button:hover {
background-color: #d0d0d080;
transition: background-color 0.1 0;
}
param-button:checked {
background-color: #d0d0d0;
transition: background-color 0.1 0;
}
param-button.bypass {
background-color: #ffcfcb00;
transition: background-color 0.1 0;
}
param-button.bypass:hover {
background-color: #ffcfcb20;
transition: background-color 0.1 0;
}
param-button.bypass:checked {
background-color: #ffcfcb;
transition: background-color 0.1 0;
}
param-slider {
height: 30px;
width: 180px;
border-color: #0a0a0a;
border-width: 1px;
background-color: transparent;
transition: background-color 0.1 0;
}
/* Vizia doesn't support commas in selectors */
/* Also, WTB Sass */
param-slider:active {
background-color: #8080801a;
transition: background-color 0.1 0;
}
param-slider:hover {
background-color: #8080801a;
transition: background-color 0.1 0;
}
param-slider .fill {
background-color: #c4c4c4;
}
param-slider .fill--modulation {
background-color: #a4eafc69;
}
/* This is a textbox, but we want it to appear just like the label */
param-slider .value-entry {
/* Vizia doesn't support the unset value */
background-color: transparent;
border-width: 0px;
}
param-slider .value-entry .caret {
background-color: #0a0a0a;
}
param-slider .value-entry .selection {
background-color: #0a0a0a30;
}
peak-meter {
height: 30px;
width: 180px;
}
peak-meter .bar {
height: 50%;
border-width: 1px;
border-color: #0a0a0a;
}
peak-meter .ticks {
height: 50%;
}
peak-meter .ticks__tick {
background-color: #0a0a0a;
top: 0;
width: 1px;
height: 30%;
}
peak-meter .ticks__label {
top: 4px; /* In pixels in an attempt to get this to better align to the grid */
font-size: 11; /* 14.667px */
}
resize-handle {
bottom: 0;
color: #696969;
height: 20px;
left: 1s;
opacity: 0.4;
position-type: self-directed;
right: 0;
top: 1s;
transition: opacity 0.1 0;
width: 20px;
z-index: 1337;
}
resize-handle:active {
opacity: 0.8;
transition: opacity 0.1 0;
}
/* No commas in VIZIA */
resize-handle:hover {
opacity: 0.8;
transition: opacity 0.1 0;
}