pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

define more readable owncast color variables; apply var style names consistenly through other stylessheets; reaname file for clarity

pull/1886/head
gingervitis 6 years ago
parent
5b88b068ed
commit
44cef18a00
11 changed files with 230 additions and 140 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      web/pages/_app.tsx
  2. 164
      web/styles/ant-overrides.scss
  3. 25
      web/styles/chat.scss
  4. 35
      web/styles/colors.scss
  5. 2
      web/styles/config-public-details.scss
  6. 8
      web/styles/config-tags.scss
  7. 8
      web/styles/form-misc-elements.scss
  8. 27
      web/styles/globals.scss
  9. 10
      web/styles/main-layout.scss
  10. 26
      web/styles/markdown-editor.scss
  11. 63
      web/styles/variables.scss

2
web/pages/_app.tsx
Unescape View File

@ -1,6 +1,6 @@
// order matters! // order matters!
import 'antd/dist/antd.css'; import 'antd/dist/antd.css';
import '../styles/colors.scss'; import '../styles/variables.scss';
import '../styles/ant-overrides.scss'; import '../styles/ant-overrides.scss';
import '../styles/markdown-editor.scss'; import '../styles/markdown-editor.scss';
import '../styles/globals.scss'; import '../styles/globals.scss';

164
web/styles/ant-overrides.scss
Unescape View File

@ -35,14 +35,27 @@ h5.ant-typography,
.ant-typography h3, .ant-typography h3,
.ant-typography h4, .ant-typography h4,
.ant-typography h5 { .ant-typography h5 {
color: var(--default-text-color); color: var(--white);
font-weight: 500; font-weight: 500;
} }
.ant-typography.ant-typography-secondary { .ant-typography.ant-typography-secondary {
color: rgba(255,255,255,.85); color: var(--white);
font-weight: 400; 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-text,
.ant-progress-circle .ant-progress-text { .ant-progress-circle .ant-progress-text {
@ -66,21 +79,26 @@ h5.ant-typography,
color: var(--nav-text); color: var(--nav-text);
&:hover { &:hover {
color: white; color: var(--white);
} }
} }
&:hover { &:hover {
background-color: rgba(0,0,0,.15); background-color: var(--black-50);
color: var(--white);
.anticon { .anticon {
color: white; color: var(--white);
} }
} }
} }
.ant-menu-item:active,
.ant-menu-submenu-title:active {
background-color: var(--black-50);
}
// menu item selected // menu item selected
.ant-menu-item-selected, .ant-menu-item-selected,
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected { .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
background-color: black; background-color: var(--black);
a { a {
color: var(--nav-selected-text); color: var(--nav-selected-text);
} }
@ -97,8 +115,8 @@ h5.ant-typography,
// submenu items // submenu items
.ant-menu-submenu { .ant-menu-submenu {
&> .ant-menu { &> .ant-menu {
border-left: 1px solid rgba(255,255,255,.4); border-left: 1px solid var(--white-50);
background-color: rgba(0,0,0,.15); background-color: var(--black-35);
} }
.ant-menu-submenu-title { .ant-menu-submenu-title {
transition-duration: var(--ant-transition-duration); transition-duration: var(--ant-transition-duration);
@ -117,14 +135,14 @@ h5.ant-typography,
} }
&:hover { &:hover {
.ant-menu-submenu-title { .ant-menu-submenu-title {
color: white; color: var(--white);
.anticon { .anticon {
color: white; color: var(--white);
} }
.ant-menu-submenu-arrow { .ant-menu-submenu-arrow {
&:before, &:before,
&:after { &: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); color: var(--default-text-color);
} }
.ant-result-subtitle { .ant-result-subtitle {
color: var(--default-text-color); color: var(--white-75);
} }
@ -148,13 +166,21 @@ h5.ant-typography,
color: var(--default-text-color); color: var(--default-text-color);
} }
.ant-card-bordered { .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 { .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 // ANT INPUT
@ -165,10 +191,10 @@ h5.ant-typography,
input, input,
textarea { textarea {
background-color: transparent; background-color: transparent;
color: rgba(255,255,255,.85); color: var(--white-88);
border-color: rgba(0,0,0,1); border-color: var(--black);
&::placeholder { &::placeholder {
color: var(--textfield-border); color: var(--owncast-purple-50);
} }
&:-webkit-autofill { &:-webkit-autofill {
background-color: transparent; background-color: transparent;
@ -177,10 +203,10 @@ h5.ant-typography,
} }
.ant-input-number:hover, .ant-input-number:hover,
.ant-input-affix-wrapper:hover { .ant-input-affix-wrapper:hover {
border-color: var(--owncast-purple-highlight); border-color: var(--owncast-purple);
input, input,
textarea { textarea {
border-color: var(--owncast-purple-highlight); border-color: var(--owncast-purple);
} }
} }
.ant-input-number:focus, .ant-input-number:focus,
@ -189,13 +215,13 @@ h5.ant-typography,
border-color: var(--owncast-purple); border-color: var(--owncast-purple);
input, input,
textarea { textarea {
color: white; color: var(--white);
border-color: var(--owncast-purple); border-color: var(--owncast-purple);
} }
} }
.ant-input-textarea-clear-icon, .ant-input-textarea-clear-icon,
.ant-input-clear-icon { .ant-input-clear-icon {
color: rgba(255,255,255,.5); color: var(--white-55);
} }
textarea.ant-input { textarea.ant-input {
padding-right: 25px; padding-right: 25px;
@ -211,20 +237,20 @@ textarea.ant-input {
} }
.ant-btn-primary:hover, .ant-btn-primary:hover,
.ant-btn-primary:focus { .ant-btn-primary:focus {
background-color: var(--form-focused); background-color: var(--button-focused);
border-color: var(--form-focused); border-color: var(--button-focused);
} }
.ant-btn.ant-btn-primary:hover { .ant-btn.ant-btn-primary:hover {
border-color: white; border-color: var(--white);
} }
.ant-btn-primary[disabled] { .ant-btn-primary[disabled] {
background-color: rgba(255,255,255,.2); background-color: var(--white-25);
border-color: rgba(255,255,255,.2); border-color: var(--white-25);
color: white; color: var(--white-50);
&:hover { &:hover {
background-color: rgba(255,255,255,.2); background-color: var(--white-35);
border-color: rgba(255,255,255,.2); border-color: var(--white-35);
} }
} }
.ant-input-affix-wrapper, .ant-input-affix-wrapper,
@ -233,30 +259,31 @@ textarea.ant-input {
transition-duration: 0.15s; transition-duration: 0.15s;
} }
// ANT TABLE // ANT TABLE
.ant-table-thead > tr > th, .ant-table-thead > tr > th,
.ant-table-small .ant-table-thead > tr > th { .ant-table-small .ant-table-thead > tr > th {
transition-duration: var(--ant-transition-duration); transition-duration: var(--ant-transition-duration);
background-color: #112; background-color: var(--purple-dark);
font-weight: 500; font-weight: 500;
color: var(--owncast-purple); color: var(--white);
} }
.ant-table-tbody > tr > td, .ant-table-tbody > tr > td,
.ant-table-thead > tr > th, .ant-table-thead > tr > th,
.ant-table-small .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 { .ant-table-tbody > tr > td {
transition-duration: var(--ant-transition-duration); 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 { .ant-table-tbody > tr:nth-child(odd) > td {
background-color: var(--textfield-bg); background-color: #222325;
} }
.ant-empty { .ant-empty {
color: white; color: var(--white-75);
opacity: .75;
} }
.ant-table-empty .ant-table-tbody > tr.ant-table-placeholder { .ant-table-empty .ant-table-tbody > tr.ant-table-placeholder {
&:hover > td { &:hover > td {
@ -269,18 +296,23 @@ textarea.ant-input {
background-color: var(--textfield-border); background-color: var(--textfield-border);
} }
} }
.ant-table-thead th.ant-table-column-sort {
background-color: var(--owncast-purple-25);
opacity: .75;
}
// MODAL // MODAL
.ant-modal-content { .ant-modal-content {
border-radius: var(--container-border-radius); 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 { .ant-modal-header {
border-radius: var(--container-border-radius) var(--container-border-radius) 0 0; border-radius: var(--container-border-radius) var(--container-border-radius) 0 0;
} }
.ant-modal-close-x { .ant-modal-close-x {
color: white; color: var(--white);
} }
.ant-modal-title { .ant-modal-title {
font-weight: 500; font-weight: 500;
@ -288,22 +320,22 @@ textarea.ant-input {
color: var(--nav-selected-text); color: var(--nav-selected-text);
} }
.ant-modal-body { .ant-modal-body {
background-color: var(--nav-bg-color); background-color: var(--gray);
color: var(--default-text-color); color: var(--default-text-color);
} }
.ant-modal-header, .ant-modal-header,
.ant-modal-footer { .ant-modal-footer {
background-color: black; background: var(--black);
} }
.ant-modal-content, .ant-modal-content,
.ant-modal-header, .ant-modal-header,
.ant-modal-footer { .ant-modal-footer {
border-color: #333; border-color: var(--gray);
} }
// SELECT // SELECT
.ant-select-dropdown { .ant-select-dropdown {
background-color: #334; background-color: var(--gray);
} }
@ -318,12 +350,12 @@ textarea.ant-input {
// ANT SWITCH // ANT SWITCH
.ant-switch { .ant-switch {
background-color: #666; background-color: var(--gray-medium);
} }
.ant-switch-checked { .ant-switch-checked {
background-color: var(--ant-success); background-color: var(--ant-success);
.ant-switch-inner { .ant-switch-inner {
color: white; color: var(--white);
} }
} }
@ -335,15 +367,16 @@ textarea.ant-input {
.ant-collapse-content { .ant-collapse-content {
border-color: transparent; border-color: transparent;
&> .ant-collapse-header { &> .ant-collapse-header {
border-radius: var(--container-border-radius);
border-color: transparent; border-color: transparent;
background-color: var(--textfield-bg); background-color: var(--purple-dark);
color: var(--nav-text); color: var(--white);
font-weight: 500; font-weight: 500;
} }
} }
} }
.ant-collapse-content { .ant-collapse-content {
background-color: #181231; background-color: var(--black-35); //#181231;
} }
@ -353,7 +386,7 @@ textarea.ant-input {
} }
.ant-popover-inner { .ant-popover-inner {
background-color: black; background-color: var(--black);
} }
.ant-popover-message, .ant-popover-message,
.ant-popover-inner-content { .ant-popover-inner-content {
@ -361,6 +394,31 @@ textarea.ant-input {
} }
.ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow { .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;
}
}
}

25
web/styles/chat.scss
Unescape View File

@ -8,11 +8,11 @@
} }
.ant-table-row.hidden { .ant-table-row.hidden {
.ant-table-cell { .ant-table-cell {
color: rgba(0,0,0,.25) color: var(--black-35)
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.ant-table-cell { .ant-table-cell {
color: rgba(255,255,255,.25) color: var(--white-25);
} }
} }
} }
@ -47,29 +47,21 @@
.bulk-editor { .bulk-editor {
margin: .5rem 0; margin: .5rem 0;
padding: .5rem; padding: .5rem;
border: 1px solid #ccc; border: 1px solid var(--textfield-border);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
border-radius: 4px; border-radius: 4px;
opacity: .5;
&.active { &.active {
opacity: 1;
.label { .label {
color: #000; color: var(--black);
}
@media (prefers-color-scheme: dark) {
.label {
color: #fff;
}
} }
} }
.label { .label {
font-size: .75rem; font-size: .75rem;
color: #666; color: var(--white-50);
margin-right: .5rem; margin-right: .5rem;
} }
@ -112,11 +104,6 @@
} }
} }
.ant-btn-text:hover { .ant-btn-text:hover {
background-color: rgba(0,0,0,.1) background-color: var(--black-35)
}
@media (prefers-color-scheme: dark) {
.ant-btn-text:hover {
background-color: rgba(255,255,255,.3)
}
} }
} }

35
web/styles/colors.scss
Unescape View File

@ -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;
}

2
web/styles/config-public-details.scss
Unescape View File

@ -45,7 +45,7 @@
margin-left: 1em; margin-left: 1em;
max-width: 450px; max-width: 450px;
.form-module { .form-module {
background-color: #000; background-color: var(--black);
} }
.social-handles-container { .social-handles-container {

8
web/styles/config-tags.scss
Unescape View File

@ -15,12 +15,12 @@
margin-left: .3rem; margin-left: .3rem;
padding: 2px; padding: 2px;
border-radius: 5rem; border-radius: 5rem;
color: black; color: var(--black);
border: 1px solid #000; border: 1px solid var(--black);
transition-duration: var(--ant-transition-duration); transition-duration: var(--ant-transition-duration);
&:hover { &:hover {
border-color: #5a67d8; border-color: var(--owncast-purple);
background-color: white; background-color: var(--white);
svg { svg {
fill: black; fill: black;
transition: fill var(--ant-transition-duration); transition: fill var(--ant-transition-duration);

8
web/styles/form-misc-elements.scss
Unescape View File

@ -30,7 +30,7 @@
/* TIP CONTAINER BASE */ /* TIP CONTAINER BASE */
.field-tip { .field-tip {
font-size: .8em; 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%; width: 90%;
margin: auto; margin: auto;
padding: 1em 2em .75em; padding: 1em 2em .75em;
background-color: var(--textfield-border); background-color: var(--black-35);
border-radius: 1em; border-radius: 1em;
.ant-slider-rail { .ant-slider-rail {
background-color: black; background-color: var(--black);
} }
.ant-slider-track { .ant-slider-track {
background-color: var(--nav-text); background-color: var(--nav-text);
} }
.ant-slider-mark-text, .ant-slider-mark-text,
.ant-slider-mark-text-active { .ant-slider-mark-text-active {
color: white; color: var(--white);
opacity: .5; opacity: .5;
} }
.ant-slider-mark-text-active { .ant-slider-mark-text-active {

27
web/styles/globals.scss
Unescape View File

@ -6,16 +6,16 @@ body {
margin: 0; 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-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; background-color: var(--default-bg-color);
color: var(--default-text-color);; color: var(--default-text-color);
} }
a { a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
color: var(--owncast-purple); color: var(--default-link-color);
&:hover { &:hover {
color: var(--default-text-color); color: var(--default-text-color);
@ -27,17 +27,23 @@ a {
} }
p { p {
font-weight: 300; font-weight: 300;
color: var(--white-75);
} }
pre { pre {
display: block; display: block;
padding: 1rem; padding: 1rem;
margin: .5rem 0; margin: .5rem 0;
background-color: rgb(44, 44, 44); background-color: var(--code-bg-color);
color:lightgrey; color: var(--white-50);
} }
code { 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 { p.description {
margin: 1em 0; margin: 1em 0;
color: #ccc; color: var(--white-75);
} }
.line-chart-container { .line-chart-container {
margin: 2em auto; margin: 2em auto;
padding: 1em;
border: 1px solid var(--gray-dark);
} }
h2.ant-typography.page-title, h2.ant-typography.page-title,
@ -70,9 +78,6 @@ h3.section-title {
} }
.form-module { .form-module {
// width: 100%;
// max-width: 500px;
// min-width: 300px;
margin: 1em 0; margin: 1em 0;
background-color: var(--container-bg-color); background-color: var(--container-bg-color);
padding: 2em; padding: 2em;

10
web/styles/main-layout.scss
Unescape View File

@ -20,7 +20,7 @@
align-items: center; align-items: center;
.logo-container { .logo-container {
background-color: #fff; background-color: var(--white);
padding: .35rem; padding: .35rem;
border-radius: 9999px; border-radius: 9999px;
} }
@ -28,7 +28,7 @@
.title-label { .title-label {
display: inline-block; display: inline-block;
margin-left: 1rem; margin-left: 1rem;
color: rgba(203,213,224, 1); color: var(--white);
font-size: 1.15rem; font-size: 1.15rem;
font-weight: 200; font-weight: 200;
text-transform: uppercase; text-transform: uppercase;
@ -70,17 +70,17 @@
} }
.status-label { .status-label {
color: #fff; color: var(--white);
text-transform: uppercase; text-transform: uppercase;
font-size: .75rem; font-size: .75rem;
display: inline-block; display: inline-block;
margin-right: .5rem; margin-right: .5rem;
color: #999; color: var(--offline-color);
} }
.status-icon { .status-icon {
font-size: 1.5rem; font-size: 1.5rem;
svg { svg {
fill: #999; fill: var(--offline-color);
} }
} }
} }

26
web/styles/markdown-editor.scss
Unescape View File

@ -5,18 +5,29 @@
display: block !important; display: block !important;
} }
.rc-md-editor { .rc-md-editor {
border-color: black !important; border-color: var(--black) !important;
border: 1px solid black; border: 1px solid var(--black);
background-color: black !important; background-color: var(--black) !important;
.rc-md-navigation { .rc-md-navigation {
background-color: black; background-color: var(--black);
border-color: black; border-color: var(--black);
} }
// Set the background color of the preview container // Set the background color of the preview container
.editor-container { .editor-container {
color: rgba(45,55,72,1); p {
color: var(--black-75);
}
background-color: rgba(226,232,240, 1) !important; 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 // Custom CSS for formatting the preview text
@ -41,8 +52,9 @@
// Set the background color of the editor text input // Set the background color of the editor text input
textarea { textarea {
background-color: #223 !important; background-color: var(--gray) !important;
color: rgba(255,255,255,.5) !important; color: rgba(255,255,255,.5) !important;
overflow: auto;
} }

63
web/styles/variables.scss
Unescape View 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);
}
Write Preview
Loading…
Cancel
Save