Prettified Code!
This commit is contained in:
parent
8d5411a0d6
commit
1b116d2252
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user