LogalDeveloper/owncast
0
Fork 0
Code Activity

clean up video config forms and styling

Browse Source
This commit is contained in:
gingervitis
2021-02-14 18:46:34 -08:00
parent c5d4851296
commit 220c48432f
8 changed files with 149 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
web/styles/ant-overrides.scss
View File

@@ -54,6 +54,9 @@ h5.ant-typography,
h1.ant-typography {
font-size: 1.75em;
color: var(--pink);
&:first-of-type {
margin-top: 0;
}
}
.ant-typography h2,
h2.ant-typography {
@@ -253,13 +256,13 @@ textarea.ant-input {
// ANT BUTTON
.ant-btn {
background-color: var(--purple-dark);
border-color: var(--white-25);
background-color: var(--owncast-purple-25);
border-color: var(--owncast-purple-25);
color: var(--white-75);
&:hover,
&:focus {
background-color: var(--owncast-purple);
border-color: var(--owncast-purple);
background-color: var(--button-focused);
border-color: var(--button-focused);
color: var(--white);
}
}
@@ -308,12 +311,13 @@ textarea.ant-input {
}
.ant-table-tbody > tr > td {
transition-duration: var(--ant-transition-duration);
background-color: #141417;
background-color: #222325;
color: var(--white-75);
}
.ant-table-tbody > tr:nth-child(odd) > td {
background-color: #222325;
.ant-table-tbody > tr.ant-table-row:hover > td {
background-color: var(--gray-dark);
}
.ant-empty {
color: var(--white-75);
}
@@ -335,6 +339,10 @@ textarea.ant-input {
// MODAL
.ant-modal,
.ant-modal-body {
font-size: 1em;
}
.ant-modal-content {
border-radius: var(--container-border-radius);
border: 1px solid var(--owncast-purple);
@@ -362,7 +370,7 @@ textarea.ant-input {
.ant-modal-content,
.ant-modal-header,
.ant-modal-footer {
border-color: var(--gray);
border-color: var(--white-50);
}
// SELECT
@@ -378,6 +386,23 @@ textarea.ant-input {
.ant-slider-mark-text {
font-size: .85em;
white-space: nowrap;
color: var(--white);
opacity: .5;
}
.ant-slider-handle {
border-color: var(--blue);
}
.ant-slider:hover .ant-slider-track {
background-color: var(--blue);
}
.ant-slider-rail {
background-color: var(--black);
}
.ant-slider-track {
background-color: var(--nav-text);
}
.ant-slider-mark-text-active {
opacity: 1;
}
// ANT SWITCH
@@ -394,6 +419,7 @@ textarea.ant-input {
// ANT COLLAPSE
.ant-collapse {
font-size: 1em;
border-color: transparent;
&> .ant-collapse-item,
.ant-collapse-content {
@@ -410,13 +436,16 @@ textarea.ant-input {
.ant-collapse-content {
background-color: var(--black-35); //#181231;
}
.ant-collapse > .ant-collapse-item:last-child, .ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
border-radius: var(--container-border-radius) var(--container-border-radius) 0 0;
}
.ant-collapse-item:last-child > .ant-collapse-content {
border-radius: 0 0 var(--container-border-radius) var(--container-border-radius);
}
// ANT POPOVER
.ant-popover {
}
.ant-popover-inner {
background-color: var(--black);
}

85
web/styles/config-video-variants.scss
View File

@@ -7,9 +7,7 @@
}
.variants-table-module {
min-width: 48%;
max-width: 600px;
margin-right: 1em
min-width: 400px;
}
}
@@ -20,80 +18,13 @@
margin-top: 0;
}
.cpu-usage-container,
.bitrate-container {
height: 20em;
}
.advanced-settings {
width: 48%;
margin-left: 2em;
}
.blurb {
margin: 1em;
opacity: .75;
}
.note {
display: inline-block;
margin-left: 1em;
font-size: .75em;
opacity: .5;
font-style: italic;
}
// .field {
// margin-bottom: 2em;
// display: flex;
// flex-direction: row;
// justify-content: center;
// align-items: flex-start;
// transform: opacity .15s;
// &.disabled {
// opacity: .25;
// }
// .label {
// width: 40%;
// text-align: right;
// padding-right: 2em;
// font-weight: bold;
// color: var(--owncast-purple);
// }
// .info-tip {
// margin-right: 1em;
// }
// .form-component {
// width: 60%;
// .selected-value-note {
// font-size: .85em;
// display: inline-block;
// text-align: center;
// }
// }
// }
// .ant-collapse {
// border: none;
// border-radius: 6px;
// }
// .ant-collapse > .ant-collapse-item:last-child,
// .ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
// border: none;
// background-color: rgba(0,0,0,.25);
// border-radius: 6px;
// }
// .ant-collapse-content {
// background-color: rgba(0,0,0,.1);
// }
}
.config-video-segements-conatiner {
// display: flex;
// flex-direction: row;
// justify-content: center;
// align-items: flex-start;
.status-message {
text-align: center;
margin-top: 1em;
}
}
@@ -109,7 +40,3 @@
opacity: .8;
}
}
.advanced-settings {
margin-top: 2em;
}

33
web/styles/form-misc-elements.scss
View File

@@ -42,32 +42,31 @@ Ideal for wrapping each Textfield on a page with many text fields in a row. This
}
/* SEGMENT SLIDER */
/* SEGMENT SLIDER GROUP WITH SELECTED NOTE, OR STATUS */
.segment-slider-container {
width: 90%;
width: 100%;
margin: auto;
padding: 1em 2em .75em;
background-color: var(--owncast-purple-25);
border-radius: 1em;
.ant-slider-rail {
background-color: var(--black);
}
.ant-slider-track {
background-color: var(--nav-text);
}
.ant-slider-mark-text,
.ant-slider-mark-text-active {
color: var(--white);
opacity: .5;
}
.ant-slider-mark-text-active {
opacity: 1;
}
border-radius: var(--container-border-radius);
.status-container {
width: 100%;
margin: .5em auto;
text-align: center;
}
.selected-value-note {
width: 100%;
margin: 3em auto 0;
text-align: center;
font-size: .75em;
line-height: normal;
color: var(--white);
padding: 1em;
border-radius: var(--container-border-radius);
background-color: var(--black-35);
}
}

6
web/styles/globals.scss
View File

@@ -72,6 +72,12 @@ code {
background-color: var(--container-bg-color);
padding: 2em;
border-radius: var(--container-border-radius);
h3 {
&:first-of-type {
margin-top: 0;
}
}
}
.row {