diff --git a/web/styles/ant-overrides.scss b/web/styles/ant-overrides.scss index 03e03f381..91eb5887e 100644 --- a/web/styles/ant-overrides.scss +++ b/web/styles/ant-overrides.scss @@ -1,6 +1,5 @@ // GENERAL ANT OVERRIDES - // RESET BG, TEXT COLORS .ant-layout, .ant-layout-header, @@ -23,14 +22,14 @@ td.ant-table-column-sort, .ant-menu-submenu > .ant-menu, .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected { background-color: transparent; - color: var(--default-text-color) + color: var(--default-text-color); } -h1.ant-typography, -h2.ant-typography, -h3.ant-typography, -h4.ant-typography, -h5.ant-typography, +h1.ant-typography, +h2.ant-typography, +h3.ant-typography, +h4.ant-typography, +h5.ant-typography, .ant-typography, .ant-typography h1, .ant-typography h2, @@ -39,7 +38,7 @@ h5.ant-typography, .ant-typography h5 { color: var(--white); font-weight: 400; - margin: .5em 0; + margin: 0.5em 0; } .ant-typography.ant-typography-secondary { color: var(--white); @@ -71,15 +70,11 @@ h3.ant-typography { font-size: 1.25em; } - - .ant-progress-text, .ant-progress-circle .ant-progress-text { color: var(--default-text-color); } - - // ANT MENU // menu base .ant-menu-item { @@ -87,7 +82,7 @@ h3.ant-typography { .anticon { transition-duration: var(--ant-transition-duration); - color: var(--nav-text); + color: var(--nav-text); } a { @@ -106,7 +101,7 @@ h3.ant-typography { } } } -.ant-menu-item:active, +.ant-menu-item:active, .ant-menu-submenu-title:active { background-color: var(--black-50); } @@ -130,14 +125,14 @@ h3.ant-typography { } // submenu items .ant-menu-submenu { - &> .ant-menu { + & > .ant-menu { border-left: 1px solid var(--white-50); background-color: var(--black-35); } .ant-menu-submenu-title { transition-duration: var(--ant-transition-duration); color: var(--nav-text); - + .anticon { color: var(--nav-text); } @@ -165,7 +160,6 @@ h3.ant-typography { } } - // ANT RESULT .ant-result-title { color: var(--default-text-color); @@ -174,7 +168,6 @@ h3.ant-typography { color: var(--white-75); } - // ANT CARD .ant-card { border-radius: var(--container-border-radius); @@ -196,7 +189,6 @@ h3.ant-typography { border-color: var(--white-25); } - // ANT INPUT input.ant-input, textarea.ant-input { @@ -235,7 +227,7 @@ textarea.ant-input { } .ant-input, .ant-input-number:focus, -.ant-input-affix-wrapper:focus, +.ant-input-affix-wrapper:focus, .ant-input-affix-wrapper-focused { border-color: var(--owncast-purple); input, @@ -252,9 +244,6 @@ textarea.ant-input { padding-right: 25px; } - - - // ANT BUTTON .ant-btn { background-color: var(--owncast-purple-25); @@ -270,7 +259,7 @@ textarea.ant-input { background-color: var(--owncast-purple); border-color: var(--owncast-purple); } -.ant-btn-primary:hover, +.ant-btn-primary:hover, .ant-btn-primary:focus { background-color: var(--button-focused); color: var(--white); @@ -299,8 +288,7 @@ textarea.ant-input { transition-duration: 0.15s; } - -// ANT TABLE +// ANT TABLE .ant-table-thead > tr > th, .ant-table-small .ant-table-thead > tr > th { transition-duration: var(--ant-transition-duration); @@ -339,10 +327,9 @@ textarea.ant-input { } .ant-table-thead th.ant-table-column-sort { background-color: var(--owncast-purple-25); - opacity: .75; + opacity: 0.75; } - // MODAL .ant-modal, .ant-modal-body { @@ -384,7 +371,7 @@ textarea.ant-input { } .ant-select-single:not(.ant-select-customize-input) .ant-select-selector { background-color: var(--black); - border-color: var(--owncast-purple-50); + border-color: var(--owncast-purple-50); } .ant-select-arrow { color: var(--owncast-purple); @@ -409,10 +396,10 @@ textarea.ant-input { // margin-right: 2em; // } .ant-slider-mark-text { - font-size: .85em; + font-size: 0.85em; white-space: nowrap; color: var(--white); - opacity: .5; + opacity: 0.5; } .ant-slider-handle { border-color: var(--blue); @@ -441,15 +428,14 @@ textarea.ant-input { } } - // ANT COLLAPSE .ant-collapse { font-size: 1em; border-color: transparent; - &> .ant-collapse-item, + & > .ant-collapse-item, .ant-collapse-content { border-color: transparent; - &> .ant-collapse-header { + & > .ant-collapse-header { border-radius: var(--container-border-radius); border-color: transparent; background-color: var(--purple-dark); @@ -461,15 +447,14 @@ 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 { +.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-inner { background-color: var(--black); @@ -477,14 +462,11 @@ textarea.ant-input { .ant-popover-message, .ant-popover-inner-content { color: var(--default-text-color); - } .ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow { border-color: var(--black); } - - // ANT TAGS .ant-tag-red, .ant-tag-orange, @@ -493,7 +475,6 @@ textarea.ant-input { background-color: var(--black); } - // ANT PAGINATOR .ant-pagination-item-active { color: var(--white); @@ -503,16 +484,15 @@ textarea.ant-input { color: var(--white); &:hover { color: var(--white); - opacity: .75; + opacity: 0.75; } } } - // ANT CHECKBOX .ant-checkbox-wrapper { color: var(--white-75); - margin: .5em 0; + margin: 0.5em 0; } .ant-checkbox-group { .ant-checkbox-group-item { diff --git a/web/styles/config-public-details.scss b/web/styles/config-public-details.scss index c97ad7e4d..c03d9a13b 100644 --- a/web/styles/config-public-details.scss +++ b/web/styles/config-public-details.scss @@ -48,7 +48,7 @@ } .social-items-container { background-color: var(--container-bg-color-alt); - padding: 0 .75em; + padding: 0 0.75em; margin-left: 1em; max-width: 450px; .form-module { @@ -72,5 +72,5 @@ } .other-field-container { - margin: .5em 0; + margin: 0.5em 0; } diff --git a/web/styles/config-socialhandles.scss b/web/styles/config-socialhandles.scss index 188d0d92a..8e18128dd 100644 --- a/web/styles/config-socialhandles.scss +++ b/web/styles/config-socialhandles.scss @@ -8,7 +8,7 @@ flex-direction: row; justify-content: flex-start; align-items: center; - padding: .25em; + padding: 0.25em; line-height: normal; .option-icon { @@ -33,7 +33,7 @@ justify-content: flex-start; color: var(--white-75); - .option-icon { + .option-icon { height: 2em; width: 2em; line-height: normal; @@ -43,7 +43,7 @@ flex-direction: column; margin: 0 0 0 1em; line-height: 2; - font-size: .85em; + font-size: 0.85em; } } .actions { @@ -54,4 +54,4 @@ width: 6em; } } -} \ No newline at end of file +} diff --git a/web/styles/home.scss b/web/styles/home.scss index dbb9f9643..19477b914 100644 --- a/web/styles/home.scss +++ b/web/styles/home.scss @@ -38,13 +38,12 @@ .outbound-details, .inbound-details { - >.ant-card-bordered { - border-color: rgba(255,255,255,.1); + > .ant-card-bordered { + border-color: rgba(255, 255, 255, 0.1); } } } - .offline-content { max-width: 1000px; @@ -64,12 +63,12 @@ background-color: var(--container-bg-color-alt); border-radius: var(--container-border-radius); padding: 1em; - + > .ant-card { background-color: var(--black); margin-bottom: 1em; .ant-card-meta-avatar { - margin-top: .25rem; + margin-top: 0.25rem; svg { height: 1.5em; width: 1.5em; diff --git a/web/styles/main-layout.scss b/web/styles/main-layout.scss index a17425a3e..9878c4099 100644 --- a/web/styles/main-layout.scss +++ b/web/styles/main-layout.scss @@ -1,5 +1,4 @@ .app-container { - .side-nav { position: fixed; height: 100vh; @@ -21,7 +20,7 @@ .logo-container { background-color: var(--white); - padding: .35rem; + padding: 0.35rem; border-radius: 9999px; } @@ -33,7 +32,7 @@ font-weight: 200; text-transform: uppercase; line-height: normal; - letter-spacing: .05em; + letter-spacing: 0.05em; } } @@ -48,7 +47,6 @@ background-color: var(--nav-bg-color); } - .main-content-container { padding: 2em 3em 3em; } @@ -57,8 +55,6 @@ text-align: center; } - - .online-status-indicator { display: flex; flex-direction: row; @@ -72,9 +68,9 @@ .status-label { color: var(--white); text-transform: uppercase; - font-size: .75rem; + font-size: 0.75rem; display: inline-block; - margin-right: .5rem; + margin-right: 0.5rem; color: var(--offline-color); } .status-icon { @@ -99,7 +95,6 @@ } } - // stream title form field in header .global-stream-title-container { display: flex; @@ -149,10 +144,9 @@ } .update-button-container { margin: 0; - margin-left: .5em; + margin-left: 0.5em; line-height: 1; } - } - } + } + } } -