0
owncast/web/styles/form-misc-elements.scss
gingervitis a122ee6c42 Admin css overhaul pt2 (#19)
* tweaks to offline state in admin viewers page

If stream is offline, hide current viewers statistic and viewers table.
Also, change wording for describing max viewers.

* take out ant dark stylesheet, organize ant color overrides

* remove ant dark css; cleanup ant overrides; format public-detail page

* combine toggleswitch component style with textfield so layout can be shared

* fix toggleswitch status message placement

* - update styles for modals, collapses
- move reset dir into its own component
- assorted style cleanups ans consistencies

* hide entire advanced section for resetyp if no yp

* temp adjustments to video modal

* temp comment out toggle switch use for later'

* address PR comments

* lint

* update type

* allow warnings during lint

Co-authored-by: nebunez <uoj2y7wak869@opayq.net>
2021-02-12 23:55:59 -08:00

84 lines
1.4 KiB
SCSS

/* Base styles for misc helper components around forms */
/* STATUS-CONTAINER BASE */
.status-container {
&.status-success {
color: var(--ant-success);
}
&.status-error {
color: var(--ant-error);
}
&.status-warning {
color: var(--ant-warning);
}
&.empty {
display: none;
}
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
font-size: .75rem;
.status-icon {
display: inline-block;
margin-right: .5em;
}
}
/* TIP CONTAINER BASE */
.field-tip {
font-size: .8em;
color: rgba(255,255,255,.5)
}
/*
Ideal for wrapping each Textfield on a page with many text fields in a row. This div will alternate colors and look like a table.
*/
.field-container {
padding: .85em 0 .5em;
// &:nth-child(even) {
// background-color: rgba(0,0,0,.25);
// }
}
/* SEGMENT SLIDER */
.segment-slider-container {
width: 90%;
margin: auto;
padding: 1em 2em .75em;
background-color: var(--textfield-border);
border-radius: 1em;
.ant-slider-rail {
background-color: black;
}
.ant-slider-track {
background-color: var(--nav-text);
}
.ant-slider-mark-text,
.ant-slider-mark-text-active {
color: white;
opacity: .5;
}
.ant-slider-mark-text-active {
opacity: 1;
}
.status-container {
width: 100%;
margin: .5em auto;
text-align: center;
}
}
.segment-tip {
width: 10em;
text-align: center;
margin: auto;
display: inline-block;
}