1
0
Fork 0
nih-plug/nih_plug_vizia/assets/widgets.css
Robbert van der Helm 772c1ecfaf Add a resize handle widget
This currently only works on Linux, and it causes a random white bar to
be added to the bottom of the GUI.
2022-03-28 00:33:10 +02:00

108 lines
2 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-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;
}
/* 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.5;
position-type: self-directed;
right: 0;
top: 1s;
transition: opacity 0.1 0;
width: 20px;
z-index: 1337;
}
resize-handle:hover {
opacity: 0.8;
transition: opacity 0.1 0;
}