LogalDeveloper/owncast
0
Fork 0
Code Activity

Minor styling changes

Browse Source
This commit is contained in:
t1enne
2022-07-10 08:56:31 +02:00
parent efbe6907ac
commit f130abb8f9
9 changed files with 61 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
web/styles/ant-overrides.scss
View File

@@ -5,20 +5,17 @@
.ant-btn {
height: 2rem;
padding: .3rem 1rem;
background-color: var(--owncast-purple-25);
font-size: .85rem;
font-weight: bold;
border-radius: var(--theme-rounded-corners);
border-color: transparent;
color: var(--white-75);
background-color: var(--color-owncast-gray-500);
color: var(--color-owncast-gray-100);
&:hover,
&:focus {
background-color: var(--color-owncast-purple-700);
background-color: var(--color-owncast-gray-700);
border-color: transparent;
color: var(--white);
}
&:focus {
border-color: var(--owncast-purple-25);
color: inherit;
}
&[ant-click-animating-without-extra-node]:after {
animation: 0s !important;
@@ -26,20 +23,25 @@
}
.ant-btn-primary {
background-color: var(--owncast-purple-50);
background-color: var(--color-owncast-purple-700);
&:hover,
&:focus {
background-color: var(--color-owncast-purple-500);
border-color: transparent;
}
}
.ant-btn-primary[disabled] {
background-color: var(--white-25);
color: var(--white-50);
&:hover {
background-color: var(--white-35);
}
}
.ant-btn-background-ghost {
.ant-btn-ghost {
border: 0px;
box-shadow: none !important;
background-color: transparent !important;
&:hover,
&:focus {
background-color: var(--theme-info-color);
@@ -54,3 +56,22 @@
border-radius: var(--theme-rounded-corners);
background-color: var(--color-owncast-background-secondary);
}
/* ------------------------- //
TABS
// ------------------------- */
@media (max-width: 768px) {
.ant-tabs-content {
height: 100%;
}
}
/* ------------------------- //
TOOLTIP
// ------------------------- */
.ant-tooltip {
// border-radius: var(--theme-rounded-corners);
// overflow: hidden;
}

7
web/styles/theme.less
View File

@@ -1,9 +1,9 @@
// Do not edit directly
// Generated on Wed, 29 Jun 2022 00:29:51 GMT
// Generated on Sun, 10 Jul 2022 05:37:28 GMT
//
// How to edit these values:
// Edit the corresponding tokens file under the style-definitions directory
// Edit the corresponding token file under the style-definitions directory
// in the Owncast web project.
@text-color: var(--theme-text-color);
@@ -29,7 +29,7 @@
@theme-header-font-family: 'Poppins', 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';
@theme-background: #202232; // The main background color of the page.
@theme-background-secondary: #282a30; // A secondary background color used in sections and controls.
@theme-rounded-corners: 5px; // The radius of rounded corners used in places.
@theme-rounded-corners: .5rem; // The radius of rounded corners used in places.
@theme-success-color: #12b76a;
@theme-info-color: #d6bbfb;
@theme-warning-color: #f79009;
@@ -65,6 +65,7 @@
@color-owncast-gray-100: #f2f4f7;
@color-owncast-gray-300: #d0d5dd;
@color-owncast-gray-500: #667085;
@color-owncast-gray-600: #4b4c4d;
@color-owncast-gray-700: #344054;
@color-owncast-gray-900: #101828;
@color-owncast-logo-purple: #7871ff;

7
web/styles/variables.css
View File

@@ -1,9 +1,9 @@
/**
* Do not edit directly
* Generated on Wed, 29 Jun 2022 00:29:51 GMT
* Generated on Sun, 10 Jul 2022 05:37:28 GMT
*
* How to edit these values:
* Edit the corresponding tokens file under the style-definitions directory
* Edit the corresponding token file under the style-definitions directory
* in the Owncast web project.
*/
@@ -31,7 +31,7 @@
--theme-header-font-family: 'Poppins', 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';
--theme-background: #202232; /* The main background color of the page. */
--theme-background-secondary: #282a30; /* A secondary background color used in sections and controls. */
--theme-rounded-corners: 5px; /* The radius of rounded corners used in places. */
--theme-rounded-corners: .5rem; /* The radius of rounded corners used in places. */
--theme-success-color: #12b76a;
--theme-info-color: #d6bbfb;
--theme-warning-color: #f79009;
@@ -67,6 +67,7 @@
--color-owncast-gray-100: #f2f4f7;
--color-owncast-gray-300: #d0d5dd;
--color-owncast-gray-500: #667085;
--color-owncast-gray-600: #4b4c4d;
--color-owncast-gray-700: #344054;
--color-owncast-gray-900: #101828;
--color-owncast-logo-purple: #7871ff;