mirror of
https://github.com/owncast/owncast.git
synced 2024-11-29 11:39:08 +03:00
define more readable owncast color variables; apply var style names consistenly through other stylessheets; reaname file for clarity
This commit is contained in:
gingervitis
parent
5b88b068ed
commit
44cef18a00
11 changed files with 230 additions and 140 deletions
|
|
@ -1,6 +1,6 @@
|
|||
// order matters!
|
||||
import 'antd/dist/antd.css';
|
||||
import '../styles/colors.scss';
|
||||
import '../styles/variables.scss';
|
||||
import '../styles/ant-overrides.scss';
|
||||
import '../styles/markdown-editor.scss';
|
||||
import '../styles/globals.scss';
|
||||
|
|
|
|||
|
|
@ -35,14 +35,27 @@ h5.ant-typography,
|
|||
.ant-typography h3,
|
||||
.ant-typography h4,
|
||||
.ant-typography h5 {
|
||||
color: var(--default-text-color);
|
||||
color: var(--white);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ant-typography.ant-typography-secondary {
|
||||
color: rgba(255,255,255,.85);
|
||||
color: var(--white);
|
||||
font-weight: 400;
|
||||
}
|
||||
.ant-typography {
|
||||
a {
|
||||
color: var(--owncast-purple);
|
||||
}
|
||||
}
|
||||
.ant-typography h1,
|
||||
h1.ant-typography {
|
||||
color: var(--white);
|
||||
}
|
||||
.ant-typography h2,
|
||||
h2.ant-typography{
|
||||
color: var(--pink);
|
||||
}
|
||||
|
||||
|
||||
.ant-progress-text,
|
||||
.ant-progress-circle .ant-progress-text {
|
||||
|
|
@ -66,21 +79,26 @@ h5.ant-typography,
|
|||
color: var(--nav-text);
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(0,0,0,.15);
|
||||
|
||||
background-color: var(--black-50);
|
||||
color: var(--white);
|
||||
.anticon {
|
||||
color: white;
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-menu-item:active,
|
||||
.ant-menu-submenu-title:active {
|
||||
background-color: var(--black-50);
|
||||
}
|
||||
|
||||
// menu item selected
|
||||
.ant-menu-item-selected,
|
||||
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
|
||||
background-color: black;
|
||||
background-color: var(--black);
|
||||
a {
|
||||
color: var(--nav-selected-text);
|
||||
}
|
||||
|
|
@ -97,8 +115,8 @@ h5.ant-typography,
|
|||
// submenu items
|
||||
.ant-menu-submenu {
|
||||
&> .ant-menu {
|
||||
border-left: 1px solid rgba(255,255,255,.4);
|
||||
background-color: rgba(0,0,0,.15);
|
||||
border-left: 1px solid var(--white-50);
|
||||
background-color: var(--black-35);
|
||||
}
|
||||
.ant-menu-submenu-title {
|
||||
transition-duration: var(--ant-transition-duration);
|
||||
|
|
@ -117,14 +135,14 @@ h5.ant-typography,
|
|||
}
|
||||
&:hover {
|
||||
.ant-menu-submenu-title {
|
||||
color: white;
|
||||
color: var(--white);
|
||||
.anticon {
|
||||
color: white;
|
||||
color: var(--white);
|
||||
}
|
||||
.ant-menu-submenu-arrow {
|
||||
&:before,
|
||||
&:after {
|
||||
background-image: linear-gradient(to right, white, white);
|
||||
background-image: linear-gradient(to right, var(--white), var(--white));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -137,7 +155,7 @@ h5.ant-typography,
|
|||
color: var(--default-text-color);
|
||||
}
|
||||
.ant-result-subtitle {
|
||||
color: var(--default-text-color);
|
||||
color: var(--white-75);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -148,13 +166,21 @@ h5.ant-typography,
|
|||
color: var(--default-text-color);
|
||||
}
|
||||
.ant-card-bordered {
|
||||
border-color: rgba(255,255,255,.25);
|
||||
border-color: var(--white-25);
|
||||
}
|
||||
.ant-card-meta-title {
|
||||
color: var(--white);
|
||||
}
|
||||
.ant-card-meta-title,
|
||||
.ant-card-meta-description {
|
||||
color: white;
|
||||
color: var(--white-75);
|
||||
}
|
||||
.ant-card {
|
||||
.ant-statistic,
|
||||
.ant-statistic-title,
|
||||
.ant-statistic-content {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ANT INPUT
|
||||
|
|
@ -165,10 +191,10 @@ h5.ant-typography,
|
|||
input,
|
||||
textarea {
|
||||
background-color: transparent;
|
||||
color: rgba(255,255,255,.85);
|
||||
border-color: rgba(0,0,0,1);
|
||||
color: var(--white-88);
|
||||
border-color: var(--black);
|
||||
&::placeholder {
|
||||
color: var(--textfield-border);
|
||||
color: var(--owncast-purple-50);
|
||||
}
|
||||
&:-webkit-autofill {
|
||||
background-color: transparent;
|
||||
|
|
@ -177,10 +203,10 @@ h5.ant-typography,
|
|||
}
|
||||
.ant-input-number:hover,
|
||||
.ant-input-affix-wrapper:hover {
|
||||
border-color: var(--owncast-purple-highlight);
|
||||
border-color: var(--owncast-purple);
|
||||
input,
|
||||
textarea {
|
||||
border-color: var(--owncast-purple-highlight);
|
||||
border-color: var(--owncast-purple);
|
||||
}
|
||||
}
|
||||
.ant-input-number:focus,
|
||||
|
|
@ -189,13 +215,13 @@ h5.ant-typography,
|
|||
border-color: var(--owncast-purple);
|
||||
input,
|
||||
textarea {
|
||||
color: white;
|
||||
color: var(--white);
|
||||
border-color: var(--owncast-purple);
|
||||
}
|
||||
}
|
||||
.ant-input-textarea-clear-icon,
|
||||
.ant-input-clear-icon {
|
||||
color: rgba(255,255,255,.5);
|
||||
color: var(--white-55);
|
||||
}
|
||||
textarea.ant-input {
|
||||
padding-right: 25px;
|
||||
|
|
@ -211,20 +237,20 @@ textarea.ant-input {
|
|||
}
|
||||
.ant-btn-primary:hover,
|
||||
.ant-btn-primary:focus {
|
||||
background-color: var(--form-focused);
|
||||
border-color: var(--form-focused);
|
||||
background-color: var(--button-focused);
|
||||
border-color: var(--button-focused);
|
||||
}
|
||||
.ant-btn.ant-btn-primary:hover {
|
||||
border-color: white;
|
||||
border-color: var(--white);
|
||||
}
|
||||
.ant-btn-primary[disabled] {
|
||||
background-color: rgba(255,255,255,.2);
|
||||
border-color: rgba(255,255,255,.2);
|
||||
color: white;
|
||||
background-color: var(--white-25);
|
||||
border-color: var(--white-25);
|
||||
color: var(--white-50);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255,255,255,.2);
|
||||
border-color: rgba(255,255,255,.2);
|
||||
background-color: var(--white-35);
|
||||
border-color: var(--white-35);
|
||||
}
|
||||
}
|
||||
.ant-input-affix-wrapper,
|
||||
|
|
@ -233,30 +259,31 @@ textarea.ant-input {
|
|||
transition-duration: 0.15s;
|
||||
}
|
||||
|
||||
|
||||
// ANT TABLE
|
||||
.ant-table-thead > tr > th,
|
||||
.ant-table-small .ant-table-thead > tr > th {
|
||||
transition-duration: var(--ant-transition-duration);
|
||||
background-color: #112;
|
||||
background-color: var(--purple-dark);
|
||||
font-weight: 500;
|
||||
color: var(--owncast-purple);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td,
|
||||
.ant-table-thead > tr > th,
|
||||
.ant-table-small .ant-table-thead > tr > th {
|
||||
border-color: var(--textfield-border);
|
||||
border-color: var(--white-15);
|
||||
}
|
||||
.ant-table-tbody > tr > td {
|
||||
transition-duration: var(--ant-transition-duration);
|
||||
background-color: var(--textfield-bg);
|
||||
background-color: #141417;
|
||||
color: var(--white-75);
|
||||
}
|
||||
.ant-table-tbody > tr:nth-child(odd) > td {
|
||||
background-color: var(--textfield-bg);
|
||||
background-color: #222325;
|
||||
}
|
||||
.ant-empty {
|
||||
color: white;
|
||||
opacity: .75;
|
||||
color: var(--white-75);
|
||||
}
|
||||
.ant-table-empty .ant-table-tbody > tr.ant-table-placeholder {
|
||||
&:hover > td {
|
||||
|
|
@ -269,18 +296,23 @@ textarea.ant-input {
|
|||
background-color: var(--textfield-border);
|
||||
}
|
||||
}
|
||||
.ant-table-thead th.ant-table-column-sort {
|
||||
background-color: var(--owncast-purple-25);
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
|
||||
// MODAL
|
||||
.ant-modal-content {
|
||||
border-radius: var(--container-border-radius);
|
||||
border: 1px solid var(--owncast-purple-highlight);
|
||||
border: 1px solid var(--owncast-purple);
|
||||
background-color: var(--black);
|
||||
}
|
||||
.ant-modal-header {
|
||||
border-radius: var(--container-border-radius) var(--container-border-radius) 0 0;
|
||||
}
|
||||
.ant-modal-close-x {
|
||||
color: white;
|
||||
color: var(--white);
|
||||
}
|
||||
.ant-modal-title {
|
||||
font-weight: 500;
|
||||
|
|
@ -288,22 +320,22 @@ textarea.ant-input {
|
|||
color: var(--nav-selected-text);
|
||||
}
|
||||
.ant-modal-body {
|
||||
background-color: var(--nav-bg-color);
|
||||
background-color: var(--gray);
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.ant-modal-header,
|
||||
.ant-modal-footer {
|
||||
background-color: black;
|
||||
background: var(--black);
|
||||
}
|
||||
.ant-modal-content,
|
||||
.ant-modal-header,
|
||||
.ant-modal-footer {
|
||||
border-color: #333;
|
||||
border-color: var(--gray);
|
||||
}
|
||||
|
||||
// SELECT
|
||||
.ant-select-dropdown {
|
||||
background-color: #334;
|
||||
background-color: var(--gray);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -318,12 +350,12 @@ textarea.ant-input {
|
|||
|
||||
// ANT SWITCH
|
||||
.ant-switch {
|
||||
background-color: #666;
|
||||
background-color: var(--gray-medium);
|
||||
}
|
||||
.ant-switch-checked {
|
||||
background-color: var(--ant-success);
|
||||
.ant-switch-inner {
|
||||
color: white;
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -335,15 +367,16 @@ textarea.ant-input {
|
|||
.ant-collapse-content {
|
||||
border-color: transparent;
|
||||
&> .ant-collapse-header {
|
||||
border-radius: var(--container-border-radius);
|
||||
border-color: transparent;
|
||||
background-color: var(--textfield-bg);
|
||||
color: var(--nav-text);
|
||||
background-color: var(--purple-dark);
|
||||
color: var(--white);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-collapse-content {
|
||||
background-color: #181231;
|
||||
background-color: var(--black-35); //#181231;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -353,7 +386,7 @@ textarea.ant-input {
|
|||
|
||||
}
|
||||
.ant-popover-inner {
|
||||
background-color: black;
|
||||
background-color: var(--black);
|
||||
}
|
||||
.ant-popover-message,
|
||||
.ant-popover-inner-content {
|
||||
|
|
@ -361,6 +394,31 @@ textarea.ant-input {
|
|||
|
||||
}
|
||||
.ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow {
|
||||
border-color: black;
|
||||
border-color: var(--black);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// ANT TAGS
|
||||
|
||||
.ant-tag-orange {
|
||||
background: #fa8c16;
|
||||
color: #fff7e6;
|
||||
border-color: #ffd591;
|
||||
}
|
||||
|
||||
|
||||
// ANT PAGINATOR
|
||||
.ant-pagination-item-active {
|
||||
color: var(--white);
|
||||
background-color: var(--default-link-color);
|
||||
border-color: var(--default-link-color);
|
||||
a {
|
||||
color: var(--white);
|
||||
&:hover {
|
||||
color: var(--white);
|
||||
opacity: .75;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,11 +8,11 @@
|
|||
}
|
||||
.ant-table-row.hidden {
|
||||
.ant-table-cell {
|
||||
color: rgba(0,0,0,.25)
|
||||
color: var(--black-35)
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.ant-table-cell {
|
||||
color: rgba(255,255,255,.25)
|
||||
color: var(--white-25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -47,29 +47,21 @@
|
|||
.bulk-editor {
|
||||
margin: .5rem 0;
|
||||
padding: .5rem;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid var(--textfield-border);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
border-radius: 4px;
|
||||
opacity: .5;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
.label {
|
||||
color: #000;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.label {
|
||||
color: #fff;
|
||||
}
|
||||
color: var(--black);
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: .75rem;
|
||||
color: #666;
|
||||
color: var(--white-50);
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
|
|
@ -112,11 +104,6 @@
|
|||
}
|
||||
}
|
||||
.ant-btn-text:hover {
|
||||
background-color: rgba(0,0,0,.1)
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.ant-btn-text:hover {
|
||||
background-color: rgba(255,255,255,.3)
|
||||
}
|
||||
background-color: var(--black-35)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,35 +0,0 @@
|
|||
// rename to variables.scss
|
||||
|
||||
:root {
|
||||
|
||||
--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;
|
||||
|
||||
}
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
margin-left: 1em;
|
||||
max-width: 450px;
|
||||
.form-module {
|
||||
background-color: #000;
|
||||
background-color: var(--black);
|
||||
}
|
||||
|
||||
.social-handles-container {
|
||||
|
|
|
|||
|
|
@ -15,12 +15,12 @@
|
|||
margin-left: .3rem;
|
||||
padding: 2px;
|
||||
border-radius: 5rem;
|
||||
color: black;
|
||||
border: 1px solid #000;
|
||||
color: var(--black);
|
||||
border: 1px solid var(--black);
|
||||
transition-duration: var(--ant-transition-duration);
|
||||
&:hover {
|
||||
border-color: #5a67d8;
|
||||
background-color: white;
|
||||
border-color: var(--owncast-purple);
|
||||
background-color: var(--white);
|
||||
svg {
|
||||
fill: black;
|
||||
transition: fill var(--ant-transition-duration);
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
/* TIP CONTAINER BASE */
|
||||
.field-tip {
|
||||
font-size: .8em;
|
||||
color: rgba(255,255,255,.5)
|
||||
color: var(--white-50);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -50,17 +50,17 @@ 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: var(--textfield-border);
|
||||
background-color: var(--black-35);
|
||||
border-radius: 1em;
|
||||
.ant-slider-rail {
|
||||
background-color: black;
|
||||
background-color: var(--black);
|
||||
}
|
||||
.ant-slider-track {
|
||||
background-color: var(--nav-text);
|
||||
}
|
||||
.ant-slider-mark-text,
|
||||
.ant-slider-mark-text-active {
|
||||
color: white;
|
||||
color: var(--white);
|
||||
opacity: .5;
|
||||
}
|
||||
.ant-slider-mark-text-active {
|
||||
|
|
|
|||
|
|
@ -6,16 +6,16 @@ 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: 14px;
|
||||
font-size: 16px;
|
||||
|
||||
background-color: #000;
|
||||
color: var(--default-text-color);;
|
||||
background-color: var(--default-bg-color);
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
color: var(--owncast-purple);
|
||||
color: var(--default-link-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--default-text-color);
|
||||
|
|
@ -27,17 +27,23 @@ a {
|
|||
}
|
||||
p {
|
||||
font-weight: 300;
|
||||
color: var(--white-75);
|
||||
}
|
||||
pre {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
margin: .5rem 0;
|
||||
background-color: rgb(44, 44, 44);
|
||||
color:lightgrey;
|
||||
background-color: var(--code-bg-color);
|
||||
color: var(--white-50);
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--owncast-purple);
|
||||
color: var(--code-color);
|
||||
background-color: var(--white-15);
|
||||
display: inline-block;
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
font-size: .88em;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -48,12 +54,14 @@ code {
|
|||
|
||||
p.description {
|
||||
margin: 1em 0;
|
||||
color: #ccc;
|
||||
color: var(--white-75);
|
||||
}
|
||||
|
||||
|
||||
.line-chart-container {
|
||||
margin: 2em auto;
|
||||
padding: 1em;
|
||||
border: 1px solid var(--gray-dark);
|
||||
}
|
||||
|
||||
h2.ant-typography.page-title,
|
||||
|
|
@ -70,9 +78,6 @@ h3.section-title {
|
|||
}
|
||||
|
||||
.form-module {
|
||||
// width: 100%;
|
||||
// max-width: 500px;
|
||||
// min-width: 300px;
|
||||
margin: 1em 0;
|
||||
background-color: var(--container-bg-color);
|
||||
padding: 2em;
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
align-items: center;
|
||||
|
||||
.logo-container {
|
||||
background-color: #fff;
|
||||
background-color: var(--white);
|
||||
padding: .35rem;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
.title-label {
|
||||
display: inline-block;
|
||||
margin-left: 1rem;
|
||||
color: rgba(203,213,224, 1);
|
||||
color: var(--white);
|
||||
font-size: 1.15rem;
|
||||
font-weight: 200;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -70,17 +70,17 @@
|
|||
}
|
||||
|
||||
.status-label {
|
||||
color: #fff;
|
||||
color: var(--white);
|
||||
text-transform: uppercase;
|
||||
font-size: .75rem;
|
||||
display: inline-block;
|
||||
margin-right: .5rem;
|
||||
color: #999;
|
||||
color: var(--offline-color);
|
||||
}
|
||||
.status-icon {
|
||||
font-size: 1.5rem;
|
||||
svg {
|
||||
fill: #999;
|
||||
fill: var(--offline-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,18 +5,29 @@
|
|||
display: block !important;
|
||||
}
|
||||
.rc-md-editor {
|
||||
border-color: black !important;
|
||||
border: 1px solid black;
|
||||
background-color: black !important;
|
||||
border-color: var(--black) !important;
|
||||
border: 1px solid var(--black);
|
||||
background-color: var(--black) !important;
|
||||
.rc-md-navigation {
|
||||
background-color: black;
|
||||
border-color: black;
|
||||
background-color: var(--black);
|
||||
border-color: var(--black);
|
||||
}
|
||||
// Set the background color of the preview container
|
||||
.editor-container {
|
||||
color: rgba(45,55,72,1);
|
||||
p {
|
||||
color: var(--black-75);
|
||||
}
|
||||
background-color: rgba(226,232,240, 1) !important;
|
||||
|
||||
.sec-html {
|
||||
background-color: white;
|
||||
|
||||
pre,code {
|
||||
background-color: #eee;
|
||||
color: #900;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Custom CSS for formatting the preview text
|
||||
|
|
@ -41,8 +52,9 @@
|
|||
|
||||
// Set the background color of the editor text input
|
||||
textarea {
|
||||
background-color: #223 !important;
|
||||
background-color: var(--gray) !important;
|
||||
color: rgba(255,255,255,.5) !important;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
63
web/styles/variables.scss
Normal file
63
web/styles/variables.scss
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
// rename to variables.scss
|
||||
|
||||
:root {
|
||||
// colors
|
||||
--white: rgba(255,255,255,1);
|
||||
--white-15: rgba(255,255,255,.15);
|
||||
--white-25: rgba(255,255,255,.25);
|
||||
--white-35: rgba(255,255,255,.35);
|
||||
--white-50: rgba(255,255,255,.5);
|
||||
--white-75: rgba(255,255,255,.75);
|
||||
--white-88: rgba(255,255,255,.88);
|
||||
|
||||
--black: rgba(0,0,0,1);
|
||||
--black-35: rgba(0,0,0,.35);
|
||||
--black-50: rgba(0,0,0,.5);
|
||||
--black-75: rgba(0,0,0,.75);
|
||||
|
||||
// owncast logo color family
|
||||
--owncast-purple: rgba(120,113,255,1); // #7871FF;
|
||||
--purple-dark: rgba(28,26,59,1); // #1c1a3b;//
|
||||
--pink: rgba(201,139,254,1); // #D18BFE;
|
||||
--blue: rgba(32,134,225,1); // #2086E1;
|
||||
|
||||
// owncast puprple variations
|
||||
--owncast-purple-25: rgba(120,113,255,.25);
|
||||
--owncast-purple-50: rgba(120,113,255,.5);
|
||||
|
||||
--gray-light: rgba(168,175,197,1);
|
||||
--gray-medium: rgba(102,107,120,1);
|
||||
--gray: rgba(51,53,60,1);
|
||||
--gray-dark: rgba(23,24,27,1); // #17181b;
|
||||
|
||||
--online-color: #73dd3f;
|
||||
--offline-color: #999;
|
||||
|
||||
--ant-error: #ff4d4f;
|
||||
--ant-success: #52c41a;
|
||||
--ant-warning: #faad14;
|
||||
--ant-transition-duration: .15s;
|
||||
|
||||
|
||||
// ////////////////////////////////
|
||||
--default-text-color: var(--white-88);
|
||||
--default-bg-color: var(--black);
|
||||
--default-link-color: var(--owncast-purple);
|
||||
|
||||
--container-bg-color: var(--gray-dark);
|
||||
--container-bg-color-alt: var(--purple-dark);
|
||||
--container-border-radius: 4px;
|
||||
|
||||
--code-color: #9cdcfe;
|
||||
--code-bg-color: var(--owncast-purple-25);
|
||||
|
||||
--nav-bg-color: var(--gray-dark);
|
||||
--nav-text: #aaa;
|
||||
--nav-selected-text: var(--pink); //#cd7cff;
|
||||
|
||||
--button-focused: var(--owncast-purple-50);
|
||||
|
||||
--textfield-border: var(--white-25);;
|
||||
--textfield-bg: var(--black);
|
||||
|
||||
}
|
||||
Loading…
Reference in a new issue