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>
This commit is contained in:
gingervitis
@@ -1,52 +1,231 @@
|
||||
// GENERAL ANT OVERRIDES
|
||||
|
||||
|
||||
// RESET BG, TEXT COLORS
|
||||
.ant-layout,
|
||||
.ant-layout-footer,
|
||||
.ant-menu,
|
||||
.ant-menu.ant-menu-dark {
|
||||
background-color: transparent;
|
||||
}
|
||||
.owncast-layout .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected {
|
||||
background-color: var(--owncast-purple);
|
||||
}
|
||||
|
||||
// LAYOUT
|
||||
.ant-layout-header,
|
||||
.ant-layout-sider {
|
||||
background-color: #07050d;
|
||||
.ant-layout-sider,
|
||||
.ant-layout-footer,
|
||||
.ant-card,
|
||||
.ant-collapse,
|
||||
.ant-collapse-content,
|
||||
.ant-table,
|
||||
.ant-table-thead > tr > th,
|
||||
.ant-table-small .ant-table-thead > tr > th,
|
||||
th.ant-table-column-sort,
|
||||
td.ant-table-column-sort,
|
||||
.ant-table-tbody > tr.ant-table-row:hover > td,
|
||||
.ant-table-thead th.ant-table-column-sort,
|
||||
.ant-menu,
|
||||
.ant-menu-submenu > .ant-menu,
|
||||
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
|
||||
background-color: transparent;
|
||||
color: var(--default-text-color)
|
||||
}
|
||||
|
||||
// MENU
|
||||
.ant-menu-dark .ant-menu-inline.ant-menu-sub {
|
||||
// background-color: rgba(255,255,255,.05);
|
||||
background-color: #140028;
|
||||
|
||||
h1.ant-typography,
|
||||
h2.ant-typography,
|
||||
h3.ant-typography,
|
||||
h4.ant-typography,
|
||||
h5.ant-typography,
|
||||
.ant-typography,
|
||||
.ant-typography h1,
|
||||
.ant-typography h2,
|
||||
.ant-typography h3,
|
||||
.ant-typography h4,
|
||||
.ant-typography h5 {
|
||||
color: var(--default-text-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// CARD
|
||||
.ant-typography.ant-typography-secondary {
|
||||
color: rgba(255,255,255,.85);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.ant-progress-text,
|
||||
.ant-progress-circle .ant-progress-text {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ANT MENU
|
||||
// menu base
|
||||
.ant-menu-item {
|
||||
transition-duration: var(--ant-transition-duration);
|
||||
|
||||
.anticon {
|
||||
transition-duration: var(--ant-transition-duration);
|
||||
color: var(--nav-text);
|
||||
}
|
||||
|
||||
a {
|
||||
transition-duration: var(--ant-transition-duration);
|
||||
color: var(--nav-text);
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(0,0,0,.15);
|
||||
|
||||
.anticon {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
// menu item selected
|
||||
.ant-menu-item-selected,
|
||||
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
|
||||
background-color: black;
|
||||
a {
|
||||
color: var(--nav-selected-text);
|
||||
}
|
||||
.anticon {
|
||||
color: var(--nav-selected-text);
|
||||
}
|
||||
|
||||
// the right border color
|
||||
&:after {
|
||||
border-color: var(--nav-selected-text);
|
||||
transition-duration: var(--ant-transition-duration);
|
||||
}
|
||||
}
|
||||
// submenu items
|
||||
.ant-menu-submenu {
|
||||
&> .ant-menu {
|
||||
border-left: 1px solid rgba(255,255,255,.4);
|
||||
background-color: rgba(0,0,0,.15);
|
||||
}
|
||||
.ant-menu-submenu-title {
|
||||
transition-duration: var(--ant-transition-duration);
|
||||
color: var(--nav-text);
|
||||
|
||||
.anticon {
|
||||
color: var(--nav-text);
|
||||
}
|
||||
.ant-menu-submenu-arrow {
|
||||
&:before,
|
||||
&:after {
|
||||
transition-duration: var(--ant-transition-duration);
|
||||
background-image: linear-gradient(to right, var(--nav-text), var(--nav-text));
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.ant-menu-submenu-title {
|
||||
color: white;
|
||||
.anticon {
|
||||
color: white;
|
||||
}
|
||||
.ant-menu-submenu-arrow {
|
||||
&:before,
|
||||
&:after {
|
||||
background-image: linear-gradient(to right, white, white);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ANT RESULT
|
||||
.ant-result-title {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.ant-result-subtitle {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
|
||||
|
||||
// ANT CARD
|
||||
.ant-card {
|
||||
border-radius: .5em;
|
||||
border-radius: var(--container-border-radius);
|
||||
background-color: var(--container-bg-color);
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.ant-card-bordered {
|
||||
border-color: rgba(255,255,255,.25);
|
||||
}
|
||||
.ant-card-meta-title,
|
||||
.ant-card-meta-description {
|
||||
color: white;
|
||||
}
|
||||
|
||||
// INPUT
|
||||
.ant-input-affix-wrapper {
|
||||
// border-radius: 5px;
|
||||
// background-color: rgba(255,255,255,.1);
|
||||
|
||||
|
||||
// ANT INPUT
|
||||
.ant-input-affix-wrapper,
|
||||
.ant-input-number {
|
||||
background-color: var(--textfield-bg);
|
||||
border-color: var(--textfield-border);
|
||||
input,
|
||||
textarea {
|
||||
// border-radius: 5px;
|
||||
background-color: transparent;
|
||||
color: rgba(255,255,255,.85);
|
||||
border-color: rgba(0,0,0,1);
|
||||
&::placeholder {
|
||||
color: var(--textfield-border);
|
||||
}
|
||||
&:-webkit-autofill {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
input {
|
||||
// background-color: transparent;
|
||||
}
|
||||
.ant-input-number:hover,
|
||||
.ant-input-affix-wrapper:hover {
|
||||
border-color: var(--owncast-purple-highlight);
|
||||
input,
|
||||
textarea {
|
||||
border-color: var(--owncast-purple-highlight);
|
||||
}
|
||||
}
|
||||
.ant-input-number:focus,
|
||||
.ant-input-affix-wrapper:focus,
|
||||
.ant-input-affix-wrapper-focused {
|
||||
border-color: var(--owncast-purple);
|
||||
input,
|
||||
textarea {
|
||||
color: white;
|
||||
border-color: var(--owncast-purple);
|
||||
}
|
||||
}
|
||||
.ant-input-textarea-clear-icon,
|
||||
.ant-input-clear-icon {
|
||||
color: rgba(255,255,255,.5);
|
||||
}
|
||||
textarea.ant-input {
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
// BUTTON
|
||||
.ant-btn-primary:hover, .ant-btn-primary:focus {
|
||||
background-color: white;
|
||||
color: #40a9ff;
|
||||
|
||||
|
||||
|
||||
// ANT BUTTON
|
||||
.ant-btn-primary {
|
||||
background-color: var(--owncast-purple);
|
||||
border-color: var(--owncast-purple);
|
||||
}
|
||||
.ant-btn.ant-btn-primary:focus {
|
||||
.ant-btn-primary:hover,
|
||||
.ant-btn-primary:focus {
|
||||
background-color: var(--form-focused);
|
||||
border-color: var(--form-focused);
|
||||
}
|
||||
.ant-btn.ant-btn-primary:hover {
|
||||
border-color: white;
|
||||
}
|
||||
.ant-btn-primary[disabled] {
|
||||
background-color: rgba(255,255,255,.2);
|
||||
border-color: rgba(255,255,255,.2);
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255,255,255,.2);
|
||||
border-color: rgba(255,255,255,.2);
|
||||
}
|
||||
}
|
||||
.ant-input-affix-wrapper,
|
||||
.ant-btn {
|
||||
@@ -54,29 +233,72 @@
|
||||
transition-duration: 0.15s;
|
||||
}
|
||||
|
||||
// TABLE
|
||||
// ANT TABLE
|
||||
.ant-table-thead > tr > th,
|
||||
.ant-table-small .ant-table-thead > tr > th {
|
||||
background-color: #000;
|
||||
transition-duration: var(--ant-transition-duration);
|
||||
background-color: #112;
|
||||
font-weight: 500;
|
||||
color: var(--owncast-purple);
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td,
|
||||
.ant-table-thead > tr > th,
|
||||
.ant-table-small .ant-table-thead > tr > th {
|
||||
border-color: var(--textfield-border);
|
||||
}
|
||||
.ant-table-tbody > tr > td {
|
||||
transition-duration: var(--ant-transition-duration);
|
||||
background-color: var(--textfield-bg);
|
||||
}
|
||||
.ant-table-tbody > tr:nth-child(odd) > td {
|
||||
background-color: var(--textfield-bg);
|
||||
}
|
||||
.ant-empty {
|
||||
color: white;
|
||||
opacity: .75;
|
||||
}
|
||||
.ant-table-empty .ant-table-tbody > tr.ant-table-placeholder {
|
||||
&:hover > td {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.ant-table-thead th.ant-table-column-has-sorters:hover {
|
||||
background-color: var(--textfield-border);
|
||||
.ant-table-filter-trigger-container {
|
||||
background-color: var(--textfield-border);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// MODAL
|
||||
.ant-modal-content {
|
||||
border-radius: 6px;
|
||||
border-radius: var(--container-border-radius);
|
||||
border: 1px solid var(--owncast-purple-highlight);
|
||||
}
|
||||
.ant-modal-header {
|
||||
background-color: #1c173d;
|
||||
border-radius: 6px 6px 0 0;
|
||||
border-radius: var(--container-border-radius) var(--container-border-radius) 0 0;
|
||||
}
|
||||
.ant-modal-close-x {
|
||||
color: white;
|
||||
}
|
||||
.ant-modal-title {
|
||||
font-weight: bold;
|
||||
font-size: 1.5em;
|
||||
font-weight: 500;
|
||||
font-size: 1.25em;
|
||||
color: var(--nav-selected-text);
|
||||
}
|
||||
.ant-modal-body {
|
||||
background-color: #33333c;
|
||||
background-color: var(--nav-bg-color);
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.ant-modal-header,
|
||||
.ant-modal-footer {
|
||||
background-color: #222229;
|
||||
background-color: black;
|
||||
}
|
||||
.ant-modal-content,
|
||||
.ant-modal-header,
|
||||
.ant-modal-footer {
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
// SELECT
|
||||
@@ -86,10 +308,59 @@
|
||||
|
||||
|
||||
// SLIDER
|
||||
.ant-slider-with-marks {
|
||||
margin-right: 2em;
|
||||
}
|
||||
// .ant-slider-with-marks {
|
||||
// margin-right: 2em;
|
||||
// }
|
||||
.ant-slider-mark-text {
|
||||
font-size: .85em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// ANT SWITCH
|
||||
.ant-switch {
|
||||
background-color: #666;
|
||||
}
|
||||
.ant-switch-checked {
|
||||
background-color: var(--ant-success);
|
||||
.ant-switch-inner {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ANT COLLAPSE
|
||||
.ant-collapse {
|
||||
border-color: transparent;
|
||||
&> .ant-collapse-item,
|
||||
.ant-collapse-content {
|
||||
border-color: transparent;
|
||||
&> .ant-collapse-header {
|
||||
border-color: transparent;
|
||||
background-color: var(--textfield-bg);
|
||||
color: var(--nav-text);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-collapse-content {
|
||||
background-color: #181231;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ANT POPOVER
|
||||
.ant-popover {
|
||||
|
||||
}
|
||||
.ant-popover-inner {
|
||||
background-color: black;
|
||||
}
|
||||
.ant-popover-message,
|
||||
.ant-popover-inner-content {
|
||||
color: var(--default-text-color);
|
||||
|
||||
}
|
||||
.ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow {
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,14 +1,35 @@
|
||||
// rename to variables.scss
|
||||
|
||||
:root {
|
||||
--owncast-purple: rgba(90,103,216,1);
|
||||
|
||||
--default-text-color: #fff;
|
||||
|
||||
--owncast-purple: rgba(90,103,216,1); //5a67d8
|
||||
--owncast-purple-highlight: #ccd;
|
||||
|
||||
--online-color: #73dd3f;
|
||||
|
||||
--owncast-dark1: #1f1f21;
|
||||
|
||||
|
||||
--ant-error: #ff4d4f;
|
||||
--ant-success: #52c41a;
|
||||
--ant-warning: #faad14;
|
||||
--ant-transition-duration: .15s;
|
||||
|
||||
|
||||
--container-bg-color: #1A1C24;
|
||||
--container-bg-color-alt: #251c49;
|
||||
--container-border-radius: 2px;
|
||||
|
||||
--code-purple: #82aaff;
|
||||
|
||||
--nav-bg-color: #1A1C24;
|
||||
--nav-text: #6a76ba;
|
||||
--nav-selected-text: #c48dff;
|
||||
|
||||
--form-focused: #8d71ff;
|
||||
|
||||
--textfield-border: #373640;
|
||||
--textfield-bg: #100f0f;
|
||||
|
||||
}
|
||||
|
||||
65
web/styles/config-public-details.scss
Normal file
65
web/styles/config-public-details.scss
Normal file
@@ -0,0 +1,65 @@
|
||||
// dealiing with some general layout on the public details page
|
||||
|
||||
.config-public-details-page {
|
||||
width: 100%;
|
||||
.top-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
flex-wrap: wrap;
|
||||
.social-items-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
flex-wrap: nowrap;
|
||||
margin: 1em 0;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
.tags-module {
|
||||
margin-right: 1em;
|
||||
}
|
||||
.form-module {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
flex-direction: column;
|
||||
.form-module {
|
||||
width: 100%;
|
||||
}
|
||||
.tags-module {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.instance-details-container {
|
||||
width: 100%;
|
||||
}
|
||||
.social-items-container {
|
||||
background-color: var(--container-bg-color-alt);
|
||||
padding: 0 .75em;
|
||||
margin-left: 1em;
|
||||
max-width: 450px;
|
||||
.form-module {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.social-handles-container {
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
.instance-details-container,
|
||||
.page-content-module {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.field-summary {
|
||||
textarea {
|
||||
height: 6em !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -23,3 +23,35 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-links-edit-container {
|
||||
.social-handles-table {
|
||||
.social-handle-cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
color: rgba(255,255,255,.85);
|
||||
|
||||
.option-icon {
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
line-height: normal;
|
||||
}
|
||||
.option-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 0 0 1em;
|
||||
line-height: 2;
|
||||
font-size: .85em;
|
||||
}
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
width: 6em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
|
||||
.edit-storage-container {
|
||||
padding: 1em;
|
||||
.form-fields {
|
||||
display: none;
|
||||
margin-bottom: 1em;
|
||||
@@ -13,7 +14,7 @@
|
||||
}
|
||||
|
||||
.button-container {
|
||||
margin: 1em 0;
|
||||
margin: 2em 0 1em 0;
|
||||
}
|
||||
.advanced-section {
|
||||
margin: 1em 0;
|
||||
|
||||
@@ -6,19 +6,24 @@
|
||||
font-size: .85rem;
|
||||
border-radius: 10em;
|
||||
padding: .25em 1em;
|
||||
background-color: rgba(255,255,255,.5);
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ant-tag-close-icon {
|
||||
transform: translateY(-1px);
|
||||
margin-left: .3rem;
|
||||
padding: 2px;
|
||||
border-radius: 5rem;
|
||||
border: 1px solid #eee;
|
||||
color: black;
|
||||
border: 1px solid #000;
|
||||
transition-duration: var(--ant-transition-duration);
|
||||
&:hover {
|
||||
border-color: #e03;
|
||||
border-color: #5a67d8;
|
||||
background-color: white;
|
||||
svg {
|
||||
fill: black;
|
||||
transition: fill .3s;
|
||||
transition: fill var(--ant-transition-duration);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -30,8 +35,5 @@
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.new-tag-input {
|
||||
width: 16em;
|
||||
}
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,30 @@
|
||||
// styles for Video variant editor (table + modal)
|
||||
|
||||
.config-video-variants {
|
||||
|
||||
.variants-table {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.variants-table-module {
|
||||
min-width: 48%;
|
||||
max-width: 600px;
|
||||
margin-right: 1em
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// modal content
|
||||
.config-variant-form {
|
||||
.description {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
.advanced-settings {
|
||||
width: 48%;
|
||||
margin-left: 2em;
|
||||
}
|
||||
.blurb {
|
||||
margin: 1em;
|
||||
opacity: .75;
|
||||
@@ -13,58 +36,61 @@
|
||||
opacity: .5;
|
||||
font-style: italic;
|
||||
}
|
||||
.section-intro {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.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%;
|
||||
|
||||
// .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);
|
||||
}
|
||||
// .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;
|
||||
@@ -82,4 +108,8 @@
|
||||
margin-left: .5em;
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
.advanced-settings {
|
||||
margin-top: 2em;
|
||||
}
|
||||
@@ -1,9 +1,10 @@
|
||||
|
||||
|
||||
// todo: put these somewhere else
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.config-page-content-form {
|
||||
.edit-page-content {
|
||||
.page-content-actions {
|
||||
margin-top: 1em;
|
||||
display: flex;
|
||||
@@ -26,25 +27,3 @@
|
||||
margin: auto;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// .social-option {
|
||||
// .ant-select-item-option-content {
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// justify-content: flex-start;
|
||||
// align-items: center;
|
||||
// padding: .25em;
|
||||
|
||||
// .option-icon {
|
||||
// height: 1.75em;
|
||||
// width: 1.75em;
|
||||
// }
|
||||
// .option-label {
|
||||
// display: inline-block;
|
||||
// margin-left: 1em;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
|
||||
/* TIP CONTAINER BASE */
|
||||
.field-tip {
|
||||
font-size: .7em;
|
||||
font-size: .8em;
|
||||
color: rgba(255,255,255,.5)
|
||||
}
|
||||
|
||||
@@ -39,9 +39,9 @@ Ideal for wrapping each Textfield on a page with many text fields in a row. This
|
||||
*/
|
||||
.field-container {
|
||||
padding: .85em 0 .5em;
|
||||
&:nth-child(even) {
|
||||
background-color: rgba(0,0,0,.25);
|
||||
}
|
||||
// &:nth-child(even) {
|
||||
// background-color: rgba(0,0,0,.25);
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
@@ -50,8 +50,27 @@ Ideal for wrapping each Textfield on a page with many text fields in a row. This
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
padding: 1em 2em .75em;
|
||||
background-color: black;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
// Base styles for form-textfield, form-textfield-with-submit
|
||||
/*
|
||||
Base styles for
|
||||
- form-textfield,
|
||||
- form-textfield-with-submit
|
||||
- form-toggleswitch
|
||||
|
||||
Both text and toggle use this class for base layout.
|
||||
*/
|
||||
.formfield-container {
|
||||
--form-label-container-width: 15em;
|
||||
|
||||
/* TEXTFIELD-CONTAINER BASE */
|
||||
.textfield-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
@@ -10,14 +16,14 @@
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
.label-side {
|
||||
padding-right: .75em;
|
||||
padding-right: 1.25em;
|
||||
text-align: right;
|
||||
width: 12em;
|
||||
width: var(--form-label-container-width);
|
||||
margin: .2em 0;
|
||||
}
|
||||
.textfield-label {
|
||||
font-weight: 400;
|
||||
font-size: .85em;
|
||||
.formfield-label {
|
||||
font-weight: 500;
|
||||
font-size: 1em;
|
||||
color: var(--owncast-purple);
|
||||
|
||||
&::after {
|
||||
@@ -25,7 +31,7 @@
|
||||
}
|
||||
}
|
||||
&.required {
|
||||
.textfield-label {
|
||||
.formfield-label {
|
||||
&::before {
|
||||
content: '*';
|
||||
display: inline-block;
|
||||
@@ -97,7 +103,7 @@
|
||||
justify-content: flex-start;
|
||||
|
||||
.label-spacer {
|
||||
width: 12em;
|
||||
width: var(--form-label-container-width);
|
||||
}
|
||||
.lower-content {
|
||||
display: flex;
|
||||
@@ -138,3 +144,26 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* TOGGLE SWITCH CONTAINER BASE */
|
||||
.toggleswitch-container {
|
||||
margin: 2em 0 1em;
|
||||
|
||||
.label-side {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.status-container {
|
||||
width: auto;
|
||||
margin: 0 0 0 1em;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
/* TOGGLE SWITCH-WITH-SUBMIT-CONTAINER BASE */
|
||||
|
||||
|
||||
.toggleswitch-container {
|
||||
|
||||
.status-container {
|
||||
margin-top: .25rem;
|
||||
}
|
||||
|
||||
.toggleswitch {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
.label {
|
||||
font-weight: bold;
|
||||
color: var(--owncast-purple);
|
||||
}
|
||||
.info-tip {
|
||||
margin-left: .5rem;
|
||||
svg {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
.ant-form-item {
|
||||
margin: 0 .75rem 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "~antd/dist/antd.dark";
|
||||
// @import "~antd/dist/antd.dark";
|
||||
|
||||
html,
|
||||
body {
|
||||
@@ -6,15 +6,20 @@ body {
|
||||
margin: 0;
|
||||
font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
|
||||
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
|
||||
background-color: #1f1f21;
|
||||
background-color: #000;
|
||||
color: var(--default-text-color);;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
color: rgba(90,103,216,1);
|
||||
color: var(--owncast-purple);
|
||||
|
||||
&:hover {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -40,13 +45,50 @@ code {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
.ant-btn {
|
||||
transition-duration: .15s;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
p.page-description {
|
||||
p.description {
|
||||
margin: 1em 0;
|
||||
color: #ccc;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
|
||||
.line-chart-container {
|
||||
margin: 2em auto;
|
||||
}
|
||||
|
||||
h2.ant-typography.page-title,
|
||||
h3.ant-typography.page-title
|
||||
{
|
||||
font-weight: 400;
|
||||
font-size: 1.5em;
|
||||
color: var(--nav-selected-text);
|
||||
}
|
||||
h2.section-title,
|
||||
h3.section-title {
|
||||
font-weight: 400;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.form-module {
|
||||
// width: 100%;
|
||||
// max-width: 500px;
|
||||
// min-width: 300px;
|
||||
margin: 1em 0;
|
||||
background-color: var(--container-bg-color);
|
||||
padding: 2em;
|
||||
border-radius: var(--container-border-radius);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
@media (max-width: 980px) {
|
||||
flex-direction: column;
|
||||
.form-module {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,6 +5,11 @@
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
z-index: 10;
|
||||
background-color: var(--nav-bg-color);
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
h1.owncast-title {
|
||||
@@ -40,6 +45,7 @@
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
padding-right: 1rem;
|
||||
background-color: var(--nav-bg-color);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -5,17 +5,24 @@
|
||||
display: block !important;
|
||||
}
|
||||
.rc-md-editor {
|
||||
border-color: black !important;
|
||||
border: 1px solid black;
|
||||
background-color: black !important;
|
||||
.rc-md-navigation {
|
||||
background-color: black;
|
||||
border-color: black;
|
||||
}
|
||||
// Set the background color of the preview container
|
||||
.editor-container {
|
||||
background-color: #E2E8F0;
|
||||
color: rgba(45,55,72,1);
|
||||
background-color: rgba(226,232,240, 1) !important;
|
||||
|
||||
}
|
||||
|
||||
// Custom CSS for formatting the preview text
|
||||
.markdown-editor-preview-pane {
|
||||
// color:lightgrey;
|
||||
a {
|
||||
color: var(--owncast-purple);;
|
||||
color: var(--owncast-purple);
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
@@ -24,20 +31,20 @@
|
||||
|
||||
// Custom CSS class used to format the text of the editor
|
||||
.markdown-editor-pane {
|
||||
color: white !important;
|
||||
color: rgba(255,255,255,.85) !important;
|
||||
border-color: black !important;
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Set the background color of the editor text input
|
||||
textarea {
|
||||
background-color: rgb(44,44,44) !important;
|
||||
color:lightgrey !important;
|
||||
background-color: #223 !important;
|
||||
color: rgba(255,255,255,.5) !important;
|
||||
}
|
||||
.ant-btn {
|
||||
transition-duration: .15s;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
|
||||
// Hide extra toolbar buttons.
|
||||
.button-type-undo, .button-type-redo, .button-type-clear, .button-type-image, .button-type-wrap, .button-type-quote, .button-type-strikethrough, .button-type-code-inline, .button-type-code-block {
|
||||
|
||||
Reference in New Issue
Block a user