mirror of
https://github.com/owncast/owncast.git
synced 2024-10-28 01:59:38 +01:00
Added moderator menu to messages and some other styling.
created new ant overrides file. Ignore the static directory
This commit is contained in:
t1enne
parent
1cf90fb581
commit
e6cc3a39d1
10 changed files with 622 additions and 509 deletions
|
|
@ -1,3 +1,4 @@
|
||||||
# Ignore artifacts:
|
# Ignore artifacts:
|
||||||
build/javascript
|
build/javascript
|
||||||
webroot/js/web_modules
|
webroot/js/web_modules
|
||||||
|
static/
|
||||||
|
|
@ -9,6 +9,7 @@
|
||||||
|
|
||||||
.toBottomWrap {
|
.toBottomWrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
opacity: 0.9;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
||||||
|
|
@ -43,7 +43,8 @@ export default function ChatContainer(props: Props) {
|
||||||
message={message as ChatMessage}
|
message={message as ChatMessage}
|
||||||
showModeratorMenu={isModerator} // Moderators have access to an additional menu
|
showModeratorMenu={isModerator} // Moderators have access to an additional menu
|
||||||
highlightString={usernameToHighlight} // What to highlight in the message
|
highlightString={usernameToHighlight} // What to highlight in the message
|
||||||
renderAsPersonallySent={message.user?.id === chatUserId} // The local user sent this message
|
sentBySelf={message.user?.id === chatUserId} // The local user sent this message
|
||||||
|
sameUserAsLast={message.user?.id === messages[messages.length - 1].user?.id}
|
||||||
key={message.id}
|
key={message.id}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
@ -70,7 +71,7 @@ export default function ChatContainer(props: Props) {
|
||||||
{!atBottom && (
|
{!atBottom && (
|
||||||
<div className={s.toBottomWrap}>
|
<div className={s.toBottomWrap}>
|
||||||
<Button
|
<Button
|
||||||
ghost
|
type="default"
|
||||||
icon={<VerticalAlignBottomOutlined />}
|
icon={<VerticalAlignBottomOutlined />}
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
chatContainerRef.current.scrollToIndex({
|
chatContainerRef.current.scrollToIndex({
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
// animation: chatFadeIn .1s ease-in;
|
// animation: chatFadeIn .1s ease-in;
|
||||||
.background {
|
.background {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -16,8 +17,7 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.user {
|
.user {
|
||||||
font: var(--theme-header-font-family);
|
font-family: var(--theme-header-font-family);
|
||||||
color: var(--color-owncast-grey-100);
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.message {
|
.message {
|
||||||
|
|
@ -38,6 +38,7 @@
|
||||||
box-decoration-break: clone;
|
box-decoration-break: clone;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.customBorder {
|
.customBorder {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
|
|
@ -53,7 +54,7 @@
|
||||||
top: 0%;
|
top: 0%;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
background-color: currentColor;
|
background-color: currentColor;
|
||||||
border-radius: 0.5rem;
|
border-radius: var(--theme-rounded-corners);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -66,6 +67,17 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.modMenuWrapper {
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
top: 0;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover .modMenuWrapper {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,22 +3,26 @@ import { useEffect, useState } from 'react';
|
||||||
import { Highlight } from 'react-highlighter-ts';
|
import { Highlight } from 'react-highlighter-ts';
|
||||||
import he from 'he';
|
import he from 'he';
|
||||||
import cn from 'classnames';
|
import cn from 'classnames';
|
||||||
import { ChatMessage } from '../../../interfaces/chat-message.model';
|
import { Button, Dropdown, Menu } from 'antd';
|
||||||
import { formatTimestamp } from './messageFmt';
|
import { DeleteOutlined, EllipsisOutlined, StopOutlined } from '@ant-design/icons';
|
||||||
import s from './ChatUserMessage.module.scss';
|
import s from './ChatUserMessage.module.scss';
|
||||||
|
import { formatTimestamp } from './messageFmt';
|
||||||
|
import { ChatMessage } from '../../../interfaces/chat-message.model';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
message: ChatMessage;
|
message: ChatMessage;
|
||||||
showModeratorMenu: boolean;
|
showModeratorMenu: boolean;
|
||||||
highlightString: string;
|
highlightString: string;
|
||||||
renderAsPersonallySent: boolean;
|
sentBySelf: boolean;
|
||||||
|
sameUserAsLast: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ChatUserMessage({
|
export default function ChatUserMessage({
|
||||||
message,
|
message,
|
||||||
highlightString,
|
highlightString,
|
||||||
showModeratorMenu,
|
showModeratorMenu,
|
||||||
renderAsPersonallySent, // Move the border to the right and render a background
|
sentBySelf, // Move the border to the right and render a background
|
||||||
|
sameUserAsLast,
|
||||||
}: Props) {
|
}: Props) {
|
||||||
const { body, user, timestamp } = message;
|
const { body, user, timestamp } = message;
|
||||||
const { displayName, displayColor } = user;
|
const { displayName, displayColor } = user;
|
||||||
|
|
@ -32,24 +36,62 @@ export default function ChatUserMessage({
|
||||||
}, [message]);
|
}, [message]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ padding: 5 }}>
|
<div style={{ padding: 3.5 }}>
|
||||||
<div
|
<div
|
||||||
className={cn(s.root, {
|
className={cn(s.root, {
|
||||||
[s.ownMessage]: renderAsPersonallySent,
|
[s.ownMessage]: sentBySelf,
|
||||||
})}
|
})}
|
||||||
style={{ borderColor: color }}
|
style={{ borderColor: color }}
|
||||||
title={formattedTimestamp}
|
title={formattedTimestamp}
|
||||||
>
|
>
|
||||||
<div className={s.user} style={{ color }}>
|
{!sameUserAsLast && (
|
||||||
{displayName}
|
<div className={s.user} style={{ color }}>
|
||||||
</div>
|
{displayName}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<Highlight search={highlightString}>
|
<Highlight search={highlightString}>
|
||||||
<div className={s.message}>{formattedMessage}</div>
|
<div className={s.message}>{formattedMessage}</div>
|
||||||
</Highlight>
|
</Highlight>
|
||||||
{showModeratorMenu && <div>Moderator menu</div>}
|
{showModeratorMenu && <ModeratorMenu />}
|
||||||
<div className={s.customBorder} style={{ color }} />
|
<div className={s.customBorder} style={{ color }} />
|
||||||
<div className={s.background} style={{ color }} />
|
<div className={s.background} style={{ color }} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function ModeratorMenu() {
|
||||||
|
const menu = (
|
||||||
|
<Menu
|
||||||
|
items={[
|
||||||
|
{
|
||||||
|
label: (
|
||||||
|
<div>
|
||||||
|
<DeleteOutlined style={{ marginRight: 5 }} />
|
||||||
|
Hide message
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
key: 0,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
label: (
|
||||||
|
<div>
|
||||||
|
<StopOutlined style={{ marginRight: 5 }} />
|
||||||
|
Ban User
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
key: 1,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={s.modMenuWrapper}>
|
||||||
|
<Dropdown overlay={menu} trigger={['click']}>
|
||||||
|
<Button ghost icon={<EllipsisOutlined />} />
|
||||||
|
</Dropdown>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
import '../styles/variables.css';
|
import '../styles/variables.css';
|
||||||
import '../styles/global.less';
|
import '../styles/global.less';
|
||||||
import '../styles/globals.scss';
|
import '../styles/globals.scss';
|
||||||
// import '../styles/ant-overrides.scss';
|
import '../styles/ant-overrides.scss';
|
||||||
// import '../styles/markdown-editor.scss';
|
// import '../styles/markdown-editor.scss';
|
||||||
|
|
||||||
import '../styles/main-layout.scss';
|
import '../styles/main-layout.scss';
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,7 @@ theme:
|
||||||
value: '{color.owncast.background-secondary.value}'
|
value: '{color.owncast.background-secondary.value}'
|
||||||
comment: 'A secondary background color used in sections and controls.'
|
comment: 'A secondary background color used in sections and controls.'
|
||||||
rounded-corners:
|
rounded-corners:
|
||||||
value: '5px'
|
value: '.5rem'
|
||||||
comment: 'The radius of rounded corners used in places.'
|
comment: 'The radius of rounded corners used in places.'
|
||||||
|
|
||||||
success-color:
|
success-color:
|
||||||
|
|
|
||||||
|
|
@ -1,260 +1,7 @@
|
||||||
// GENERAL ANT OVERRIDES
|
/* ------------------------- //
|
||||||
|
BUTTONS
|
||||||
|
// ------------------------- */
|
||||||
|
|
||||||
// RESET BG, TEXT COLORS
|
|
||||||
.ant-layout,
|
|
||||||
.ant-layout-header,
|
|
||||||
.ant-layout-sider,
|
|
||||||
.ant-layout-footer,
|
|
||||||
.ant-card,
|
|
||||||
.ant-collapse,
|
|
||||||
.ant-collapse-content,
|
|
||||||
.ant-statistic,
|
|
||||||
.ant-statistic-title,
|
|
||||||
.ant-statistic-content,
|
|
||||||
.ant-table,
|
|
||||||
.ant-table-thead > tr > th,
|
|
||||||
.ant-table-small .ant-table-thead > tr > th,
|
|
||||||
th.ant-table-column-sort,
|
|
||||||
td.ant-table-column-sort,
|
|
||||||
.ant-table-tbody > tr.ant-table-row:hover > td,
|
|
||||||
.ant-table-thead th.ant-table-column-sort,
|
|
||||||
.ant-menu,
|
|
||||||
.ant-menu-submenu > .ant-menu,
|
|
||||||
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
|
|
||||||
background-color: transparent;
|
|
||||||
color: var(--default-text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1.ant-typography,
|
|
||||||
h2.ant-typography,
|
|
||||||
h3.ant-typography,
|
|
||||||
h4.ant-typography,
|
|
||||||
h5.ant-typography,
|
|
||||||
.ant-typography,
|
|
||||||
.ant-typography h1,
|
|
||||||
.ant-typography h2,
|
|
||||||
.ant-typography h3,
|
|
||||||
.ant-typography h4,
|
|
||||||
.ant-typography h5 {
|
|
||||||
color: var(--white);
|
|
||||||
font-weight: 400;
|
|
||||||
margin: 0.5em 0;
|
|
||||||
}
|
|
||||||
.ant-typography.ant-typography-secondary {
|
|
||||||
color: var(--white);
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
.ant-typography {
|
|
||||||
font-weight: 300;
|
|
||||||
color: var(--white-75);
|
|
||||||
a {
|
|
||||||
color: var(--owncast-purple);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// .ant-typography h1,
|
|
||||||
// h1.ant-typography {
|
|
||||||
// font-size: 1.75em;
|
|
||||||
// color: var(--pink);
|
|
||||||
// &:first-of-type {
|
|
||||||
// margin-top: 0;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
.ant-typography h2,
|
|
||||||
h2.ant-typography {
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-typography h3,
|
|
||||||
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 {
|
|
||||||
transition-duration: var(--ant-transition-duration);
|
|
||||||
|
|
||||||
.anticon {
|
|
||||||
transition-duration: var(--ant-transition-duration);
|
|
||||||
color: var(--nav-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
transition-duration: var(--ant-transition-duration);
|
|
||||||
color: var(--nav-text);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--white);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--black-50);
|
|
||||||
color: var(--white);
|
|
||||||
.anticon {
|
|
||||||
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: var(--black);
|
|
||||||
a {
|
|
||||||
color: var(--nav-selected-text);
|
|
||||||
}
|
|
||||||
.anticon {
|
|
||||||
color: var(--nav-selected-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
// the right border color
|
|
||||||
&:after {
|
|
||||||
border-color: var(--nav-selected-text);
|
|
||||||
transition-duration: var(--ant-transition-duration);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// submenu items
|
|
||||||
.ant-menu-submenu {
|
|
||||||
& > .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);
|
|
||||||
}
|
|
||||||
.ant-menu-submenu-arrow {
|
|
||||||
&:before,
|
|
||||||
&:after {
|
|
||||||
transition-duration: var(--ant-transition-duration);
|
|
||||||
background-image: linear-gradient(to right, var(--nav-text), var(--nav-text));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
.ant-menu-submenu-title {
|
|
||||||
color: var(--white);
|
|
||||||
.anticon {
|
|
||||||
color: var(--white);
|
|
||||||
}
|
|
||||||
.ant-menu-submenu-arrow {
|
|
||||||
&:before,
|
|
||||||
&:after {
|
|
||||||
background-image: linear-gradient(to right, var(--white), var(--white));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ANT RESULT
|
|
||||||
.ant-result-title {
|
|
||||||
color: var(--default-text-color);
|
|
||||||
}
|
|
||||||
.ant-result-subtitle {
|
|
||||||
color: var(--white-75);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ANT CARD
|
|
||||||
.ant-card {
|
|
||||||
border-radius: var(--container-border-radius);
|
|
||||||
background-color: var(--container-bg-color);
|
|
||||||
color: var(--default-text-color);
|
|
||||||
}
|
|
||||||
.ant-card-bordered {
|
|
||||||
border-color: var(--white-25);
|
|
||||||
}
|
|
||||||
.ant-card-meta-title {
|
|
||||||
color: var(--white);
|
|
||||||
}
|
|
||||||
.ant-card-meta-description {
|
|
||||||
color: var(--white-75);
|
|
||||||
}
|
|
||||||
.ant-card-type-inner .ant-card-head {
|
|
||||||
background-color: var(--black);
|
|
||||||
color: var(--white-88);
|
|
||||||
border-color: var(--white-25);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ANT INPUT
|
|
||||||
input.ant-input,
|
|
||||||
textarea.ant-input {
|
|
||||||
background-color: var(--textfield-bg);
|
|
||||||
color: var(--white-88);
|
|
||||||
border-color: var(--black);
|
|
||||||
&::placeholder {
|
|
||||||
color: var(--owncast-purple-50);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-input-affix-wrapper,
|
|
||||||
.ant-input-number {
|
|
||||||
background-color: var(--textfield-bg);
|
|
||||||
border-color: var(--textfield-border);
|
|
||||||
input,
|
|
||||||
textarea {
|
|
||||||
background-color: transparent;
|
|
||||||
color: var(--white-88);
|
|
||||||
border-color: var(--black);
|
|
||||||
&::placeholder {
|
|
||||||
color: var(--owncast-purple-50);
|
|
||||||
}
|
|
||||||
&:-webkit-autofill {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-input:hover,
|
|
||||||
.ant-input-number:hover,
|
|
||||||
.ant-input-affix-wrapper:hover {
|
|
||||||
border-color: var(--owncast-purple);
|
|
||||||
input,
|
|
||||||
textarea {
|
|
||||||
border-color: var(--owncast-purple);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-input,
|
|
||||||
.ant-input-number:focus,
|
|
||||||
.ant-input-affix-wrapper:focus,
|
|
||||||
.ant-input-affix-wrapper-focused {
|
|
||||||
border-color: var(--owncast-purple);
|
|
||||||
input,
|
|
||||||
textarea {
|
|
||||||
color: var(--white);
|
|
||||||
border-color: var(--owncast-purple);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea.ant-input {
|
|
||||||
padding-right: 25px;
|
|
||||||
}
|
|
||||||
.ant-input-affix-wrapper {
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-input-suffix,
|
|
||||||
.ant-input-clear-icon,
|
|
||||||
.ant-input-textarea-clear-icon,
|
|
||||||
.ant-input-password-icon {
|
|
||||||
color: var(--white-50);
|
|
||||||
&:hover {
|
|
||||||
color: var(--white);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ANT BUTTON
|
|
||||||
.ant-btn {
|
.ant-btn {
|
||||||
background-color: var(--owncast-purple-25);
|
background-color: var(--owncast-purple-25);
|
||||||
font-size: .85rem;
|
font-size: .85rem;
|
||||||
|
|
@ -271,6 +18,9 @@ textarea.ant-input {
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: var(--owncast-purple-25);
|
border-color: var(--owncast-purple-25);
|
||||||
}
|
}
|
||||||
|
&[ant-click-animating-without-extra-node]:after {
|
||||||
|
animation: 0s !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-btn-primary {
|
.ant-btn-primary {
|
||||||
|
|
@ -285,243 +35,20 @@ textarea.ant-input {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-input-affix-wrapper,
|
.ant-btn-background-ghost {
|
||||||
.ant-btn {
|
border: 0px;
|
||||||
transition-delay: 0s;
|
box-shadow: none !important;
|
||||||
transition-duration: 0.15s;
|
&:hover,
|
||||||
}
|
&:focus {
|
||||||
.ant-btn-dangerous {
|
background-color: var(--theme-info-color);
|
||||||
color: var(--white-88);
|
|
||||||
border-color: var(--ant-error);
|
|
||||||
background-color: var(--purple-dark);
|
|
||||||
}
|
|
||||||
.ant-btn-sm {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ANT TABLE
|
|
||||||
.ant-table-thead > tr > th,
|
|
||||||
.ant-table-filter-dropdown,
|
|
||||||
.ant-table-small .ant-table-thead > tr > th {
|
|
||||||
transition-duration: var(--ant-transition-duration);
|
|
||||||
background-color: var(--purple-dark);
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--white);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-table-tbody > tr > td,
|
|
||||||
.ant-table-thead > tr > th,
|
|
||||||
.ant-table-small .ant-table-thead > tr > th {
|
|
||||||
border-color: var(--white-15);
|
|
||||||
}
|
|
||||||
.ant-table-tbody > tr > td {
|
|
||||||
transition-duration: var(--ant-transition-duration);
|
|
||||||
background-color: var(--gray-dark);
|
|
||||||
color: var(--white-75);
|
|
||||||
}
|
|
||||||
.ant-table-tbody > tr.ant-table-row:hover > td {
|
|
||||||
background-color: var(--gray-dark);
|
|
||||||
}
|
|
||||||
.ant-table-tbody > tr.ant-table-row-selected > td {
|
|
||||||
background: var(--white-25);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-empty {
|
|
||||||
color: var(--white-75);
|
|
||||||
}
|
|
||||||
.ant-table-empty .ant-table-tbody > tr.ant-table-placeholder {
|
|
||||||
.ant-empty-image {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
&:hover > td {
|
}
|
||||||
background-color: var(--gray-dark);
|
|
||||||
}
|
/* ------------------------- //
|
||||||
}
|
DROPDOWN
|
||||||
.ant-table-thead th.ant-table-column-has-sorters:hover {
|
// ------------------------- */
|
||||||
background-color: var(--textfield-border);
|
|
||||||
.ant-table-filter-trigger-container {
|
|
||||||
background-color: var(--textfield-border);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-table-thead th.ant-table-column-sort,
|
|
||||||
.ant-dropdown-trigger.active {
|
|
||||||
background-color: var(--owncast-purple-25);
|
|
||||||
opacity: 0.75;
|
|
||||||
}
|
|
||||||
// DROPDOWN
|
|
||||||
|
|
||||||
.ant-dropdown-menu {
|
.ant-dropdown-menu {
|
||||||
padding: 10px 7px;
|
|
||||||
border-radius: var(--theme-rounded-corners);
|
border-radius: var(--theme-rounded-corners);
|
||||||
background-color: var(--color-owncast-background);
|
background-color: var(--color-owncast-background-secondary);
|
||||||
li {
|
|
||||||
border-radius: var(--theme-rounded-corners);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
// SELECT
|
|
||||||
.ant-select-dropdown {
|
|
||||||
background-color: var(--black);
|
|
||||||
}
|
|
||||||
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
|
|
||||||
background-color: var(--black);
|
|
||||||
border-color: var(--owncast-purple-50);
|
|
||||||
}
|
|
||||||
.ant-select-arrow {
|
|
||||||
color: var(--owncast-purple);
|
|
||||||
}
|
|
||||||
.ant-select-selection-placeholder {
|
|
||||||
color: var(--owncast-purple-50);
|
|
||||||
}
|
|
||||||
.ant-select {
|
|
||||||
color: var(--white);
|
|
||||||
}
|
|
||||||
.ant-select-item {
|
|
||||||
background-color: var(--gray-dark);
|
|
||||||
color: var(--white-88);
|
|
||||||
}
|
|
||||||
.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
|
|
||||||
background-color: var(--gray);
|
|
||||||
color: var(--white-75);
|
|
||||||
}
|
|
||||||
|
|
||||||
// SLIDER
|
|
||||||
// .ant-slider-with-marks {
|
|
||||||
// margin-right: 2em;
|
|
||||||
// }
|
|
||||||
.ant-slider-mark-text {
|
|
||||||
font-size: 0.85em;
|
|
||||||
white-space: nowrap;
|
|
||||||
color: var(--white);
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
.ant-slider-handle {
|
|
||||||
border-color: var(--blue);
|
|
||||||
}
|
|
||||||
.ant-slider:hover .ant-slider-track {
|
|
||||||
background-color: var(--blue);
|
|
||||||
}
|
|
||||||
.ant-slider-rail {
|
|
||||||
background-color: var(--black);
|
|
||||||
}
|
|
||||||
.ant-slider-track {
|
|
||||||
background-color: var(--nav-text);
|
|
||||||
}
|
|
||||||
.ant-slider-mark-text-active {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ANT SWITCH
|
|
||||||
.ant-switch {
|
|
||||||
background-color: var(--gray-medium);
|
|
||||||
}
|
|
||||||
.ant-switch-checked {
|
|
||||||
background-color: var(--ant-success);
|
|
||||||
.ant-switch-inner {
|
|
||||||
color: var(--white);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ANT COLLAPSE
|
|
||||||
.ant-collapse {
|
|
||||||
font-size: 1em;
|
|
||||||
border-color: transparent;
|
|
||||||
& > .ant-collapse-item,
|
|
||||||
.ant-collapse-content {
|
|
||||||
border-color: transparent;
|
|
||||||
& > .ant-collapse-header {
|
|
||||||
border-radius: var(--container-border-radius);
|
|
||||||
border-color: transparent;
|
|
||||||
background-color: var(--purple-dark);
|
|
||||||
color: var(--white);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.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 {
|
|
||||||
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 TOOLTIP
|
|
||||||
.ant-tooltip {
|
|
||||||
font-size: 0.75em;
|
|
||||||
}
|
|
||||||
.ant-tooltip-inner {
|
|
||||||
color: var(--white);
|
|
||||||
}
|
|
||||||
.ant-tooltip-inner,
|
|
||||||
.ant-tooltip-arrow-content {
|
|
||||||
background-color: var(--tooltip-base-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ANT TAGS
|
|
||||||
.ant-tag-red,
|
|
||||||
.ant-tag-orange,
|
|
||||||
.ant-tag-green,
|
|
||||||
.ant-tag-purple,
|
|
||||||
.ant-tag-blue {
|
|
||||||
background-color: var(--black);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ANT PAGINATOR
|
|
||||||
.ant-pagination-item {
|
|
||||||
border-color: var(--white);
|
|
||||||
color: var(--default-link-color);
|
|
||||||
a {
|
|
||||||
color: var(--default-link-color);
|
|
||||||
}
|
|
||||||
&:active,
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--white);
|
|
||||||
a {
|
|
||||||
color: var(--white);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-pagination-item-active {
|
|
||||||
color: var(--white);
|
|
||||||
background-color: var(--default-link-color);
|
|
||||||
border-color: var(--default-link-color);
|
|
||||||
a {
|
|
||||||
color: var(--white);
|
|
||||||
}
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
border-color: var(--default-link-color);
|
|
||||||
a {
|
|
||||||
color: var(--white);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-pagination-prev,
|
|
||||||
.ant-pagination-next {
|
|
||||||
.ant-pagination-item-link {
|
|
||||||
color: var(--default-link-color);
|
|
||||||
background: transparent;
|
|
||||||
border-color: transparent;
|
|
||||||
&:hover {
|
|
||||||
color: var(--white);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ANT CHECKBOX
|
|
||||||
.ant-checkbox-wrapper {
|
|
||||||
color: var(--white-75);
|
|
||||||
margin: 0.5em 0;
|
|
||||||
}
|
|
||||||
.ant-checkbox-group {
|
|
||||||
.ant-checkbox-group-item {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
|
||||||
529
web/styles/ant-overrides.scss.bak
Normal file
529
web/styles/ant-overrides.scss.bak
Normal file
|
|
@ -0,0 +1,529 @@
|
||||||
|
// GENERAL ANT OVERRIDES
|
||||||
|
|
||||||
|
// RESET BG, TEXT COLORS
|
||||||
|
.ant-layout,
|
||||||
|
.ant-layout-header,
|
||||||
|
.ant-layout-sider,
|
||||||
|
.ant-layout-footer,
|
||||||
|
.ant-card,
|
||||||
|
.ant-collapse,
|
||||||
|
.ant-collapse-content,
|
||||||
|
.ant-statistic,
|
||||||
|
.ant-statistic-title,
|
||||||
|
.ant-statistic-content,
|
||||||
|
.ant-table,
|
||||||
|
.ant-table-thead > tr > th,
|
||||||
|
.ant-table-small .ant-table-thead > tr > th,
|
||||||
|
th.ant-table-column-sort,
|
||||||
|
td.ant-table-column-sort,
|
||||||
|
.ant-table-tbody > tr.ant-table-row:hover > td,
|
||||||
|
.ant-table-thead th.ant-table-column-sort,
|
||||||
|
.ant-menu,
|
||||||
|
.ant-menu-submenu > .ant-menu,
|
||||||
|
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--default-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1.ant-typography,
|
||||||
|
h2.ant-typography,
|
||||||
|
h3.ant-typography,
|
||||||
|
h4.ant-typography,
|
||||||
|
h5.ant-typography,
|
||||||
|
.ant-typography,
|
||||||
|
.ant-typography h1,
|
||||||
|
.ant-typography h2,
|
||||||
|
.ant-typography h3,
|
||||||
|
.ant-typography h4,
|
||||||
|
.ant-typography h5 {
|
||||||
|
color: var(--white);
|
||||||
|
font-weight: 400;
|
||||||
|
margin: 0.5em 0;
|
||||||
|
}
|
||||||
|
.ant-typography.ant-typography-secondary {
|
||||||
|
color: var(--white);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.ant-typography {
|
||||||
|
font-weight: 300;
|
||||||
|
color: var(--white-75);
|
||||||
|
a {
|
||||||
|
color: var(--owncast-purple);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// .ant-typography h1,
|
||||||
|
// h1.ant-typography {
|
||||||
|
// font-size: 1.75em;
|
||||||
|
// color: var(--pink);
|
||||||
|
// &:first-of-type {
|
||||||
|
// margin-top: 0;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
.ant-typography h2,
|
||||||
|
h2.ant-typography {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-typography h3,
|
||||||
|
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 {
|
||||||
|
transition-duration: var(--ant-transition-duration);
|
||||||
|
|
||||||
|
.anticon {
|
||||||
|
transition-duration: var(--ant-transition-duration);
|
||||||
|
color: var(--nav-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
transition-duration: var(--ant-transition-duration);
|
||||||
|
color: var(--nav-text);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--black-50);
|
||||||
|
color: var(--white);
|
||||||
|
.anticon {
|
||||||
|
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: var(--black);
|
||||||
|
a {
|
||||||
|
color: var(--nav-selected-text);
|
||||||
|
}
|
||||||
|
.anticon {
|
||||||
|
color: var(--nav-selected-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
// the right border color
|
||||||
|
&:after {
|
||||||
|
border-color: var(--nav-selected-text);
|
||||||
|
transition-duration: var(--ant-transition-duration);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// submenu items
|
||||||
|
.ant-menu-submenu {
|
||||||
|
& > .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);
|
||||||
|
}
|
||||||
|
.ant-menu-submenu-arrow {
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
|
transition-duration: var(--ant-transition-duration);
|
||||||
|
background-image: linear-gradient(to right, var(--nav-text), var(--nav-text));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
.ant-menu-submenu-title {
|
||||||
|
color: var(--white);
|
||||||
|
.anticon {
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
.ant-menu-submenu-arrow {
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
|
background-image: linear-gradient(to right, var(--white), var(--white));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ANT RESULT
|
||||||
|
.ant-result-title {
|
||||||
|
color: var(--default-text-color);
|
||||||
|
}
|
||||||
|
.ant-result-subtitle {
|
||||||
|
color: var(--white-75);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ANT CARD
|
||||||
|
.ant-card {
|
||||||
|
border-radius: var(--container-border-radius);
|
||||||
|
background-color: var(--container-bg-color);
|
||||||
|
color: var(--default-text-color);
|
||||||
|
}
|
||||||
|
.ant-card-bordered {
|
||||||
|
border-color: var(--white-25);
|
||||||
|
}
|
||||||
|
.ant-card-meta-title {
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
.ant-card-meta-description {
|
||||||
|
color: var(--white-75);
|
||||||
|
}
|
||||||
|
.ant-card-type-inner .ant-card-head {
|
||||||
|
background-color: var(--black);
|
||||||
|
color: var(--white-88);
|
||||||
|
border-color: var(--white-25);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ANT INPUT
|
||||||
|
input.ant-input,
|
||||||
|
textarea.ant-input {
|
||||||
|
background-color: var(--textfield-bg);
|
||||||
|
color: var(--white-88);
|
||||||
|
border-color: var(--black);
|
||||||
|
&::placeholder {
|
||||||
|
color: var(--owncast-purple-50);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-input-affix-wrapper,
|
||||||
|
.ant-input-number {
|
||||||
|
background-color: var(--textfield-bg);
|
||||||
|
border-color: var(--textfield-border);
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--white-88);
|
||||||
|
border-color: var(--black);
|
||||||
|
&::placeholder {
|
||||||
|
color: var(--owncast-purple-50);
|
||||||
|
}
|
||||||
|
&:-webkit-autofill {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-input:hover,
|
||||||
|
.ant-input-number:hover,
|
||||||
|
.ant-input-affix-wrapper:hover {
|
||||||
|
border-color: var(--owncast-purple);
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
border-color: var(--owncast-purple);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-input,
|
||||||
|
.ant-input-number:focus,
|
||||||
|
.ant-input-affix-wrapper:focus,
|
||||||
|
.ant-input-affix-wrapper-focused {
|
||||||
|
border-color: var(--owncast-purple);
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
color: var(--white);
|
||||||
|
border-color: var(--owncast-purple);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea.ant-input {
|
||||||
|
padding-right: 25px;
|
||||||
|
}
|
||||||
|
.ant-input-affix-wrapper {
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-input-suffix,
|
||||||
|
.ant-input-clear-icon,
|
||||||
|
.ant-input-textarea-clear-icon,
|
||||||
|
.ant-input-password-icon {
|
||||||
|
color: var(--white-50);
|
||||||
|
&:hover {
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ANT BUTTON
|
||||||
|
.ant-btn {
|
||||||
|
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);
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background-color: var(--color-owncast-purple-700);
|
||||||
|
border-color: transparent;
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
border-color: var(--owncast-purple-25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-btn-primary {
|
||||||
|
background-color: var(--owncast-purple-50);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-btn-primary[disabled] {
|
||||||
|
background-color: var(--white-25);
|
||||||
|
color: var(--white-50);
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--white-35);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-btn-
|
||||||
|
|
||||||
|
.ant-input-affix-wrapper,
|
||||||
|
.ant-btn {
|
||||||
|
transition-delay: 0s;
|
||||||
|
transition-duration: 0.15s;
|
||||||
|
}
|
||||||
|
.ant-btn-dangerous {
|
||||||
|
color: var(--white-88);
|
||||||
|
border-color: var(--ant-error);
|
||||||
|
background-color: var(--purple-dark);
|
||||||
|
}
|
||||||
|
.ant-btn-sm {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ANT TABLE
|
||||||
|
.ant-table-thead > tr > th,
|
||||||
|
.ant-table-filter-dropdown,
|
||||||
|
.ant-table-small .ant-table-thead > tr > th {
|
||||||
|
transition-duration: var(--ant-transition-duration);
|
||||||
|
background-color: var(--purple-dark);
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-tbody > tr > td,
|
||||||
|
.ant-table-thead > tr > th,
|
||||||
|
.ant-table-small .ant-table-thead > tr > th {
|
||||||
|
border-color: var(--white-15);
|
||||||
|
}
|
||||||
|
.ant-table-tbody > tr > td {
|
||||||
|
transition-duration: var(--ant-transition-duration);
|
||||||
|
background-color: var(--gray-dark);
|
||||||
|
color: var(--white-75);
|
||||||
|
}
|
||||||
|
.ant-table-tbody > tr.ant-table-row:hover > td {
|
||||||
|
background-color: var(--gray-dark);
|
||||||
|
}
|
||||||
|
.ant-table-tbody > tr.ant-table-row-selected > td {
|
||||||
|
background: var(--white-25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-empty {
|
||||||
|
color: var(--white-75);
|
||||||
|
}
|
||||||
|
.ant-table-empty .ant-table-tbody > tr.ant-table-placeholder {
|
||||||
|
.ant-empty-image {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&:hover > td {
|
||||||
|
background-color: var(--gray-dark);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-table-thead th.ant-table-column-has-sorters:hover {
|
||||||
|
background-color: var(--textfield-border);
|
||||||
|
.ant-table-filter-trigger-container {
|
||||||
|
background-color: var(--textfield-border);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-table-thead th.ant-table-column-sort,
|
||||||
|
.ant-dropdown-trigger.active {
|
||||||
|
background-color: var(--owncast-purple-25);
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
// DROPDOWN
|
||||||
|
|
||||||
|
.ant-dropdown-menu {
|
||||||
|
padding: 10px 7px;
|
||||||
|
border-radius: var(--theme-rounded-corners);
|
||||||
|
background-color: var(--color-owncast-background);
|
||||||
|
li {
|
||||||
|
border-radius: var(--theme-rounded-corners);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// SELECT
|
||||||
|
.ant-select-dropdown {
|
||||||
|
background-color: var(--black);
|
||||||
|
}
|
||||||
|
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
|
||||||
|
background-color: var(--black);
|
||||||
|
border-color: var(--owncast-purple-50);
|
||||||
|
}
|
||||||
|
.ant-select-arrow {
|
||||||
|
color: var(--owncast-purple);
|
||||||
|
}
|
||||||
|
.ant-select-selection-placeholder {
|
||||||
|
color: var(--owncast-purple-50);
|
||||||
|
}
|
||||||
|
.ant-select {
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
.ant-select-item {
|
||||||
|
background-color: var(--gray-dark);
|
||||||
|
color: var(--white-88);
|
||||||
|
}
|
||||||
|
.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
|
||||||
|
background-color: var(--gray);
|
||||||
|
color: var(--white-75);
|
||||||
|
}
|
||||||
|
|
||||||
|
// SLIDER
|
||||||
|
// .ant-slider-with-marks {
|
||||||
|
// margin-right: 2em;
|
||||||
|
// }
|
||||||
|
.ant-slider-mark-text {
|
||||||
|
font-size: 0.85em;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: var(--white);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
.ant-slider-handle {
|
||||||
|
border-color: var(--blue);
|
||||||
|
}
|
||||||
|
.ant-slider:hover .ant-slider-track {
|
||||||
|
background-color: var(--blue);
|
||||||
|
}
|
||||||
|
.ant-slider-rail {
|
||||||
|
background-color: var(--black);
|
||||||
|
}
|
||||||
|
.ant-slider-track {
|
||||||
|
background-color: var(--nav-text);
|
||||||
|
}
|
||||||
|
.ant-slider-mark-text-active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ANT SWITCH
|
||||||
|
.ant-switch {
|
||||||
|
background-color: var(--gray-medium);
|
||||||
|
}
|
||||||
|
.ant-switch-checked {
|
||||||
|
background-color: var(--ant-success);
|
||||||
|
.ant-switch-inner {
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ANT COLLAPSE
|
||||||
|
.ant-collapse {
|
||||||
|
font-size: 1em;
|
||||||
|
border-color: transparent;
|
||||||
|
& > .ant-collapse-item,
|
||||||
|
.ant-collapse-content {
|
||||||
|
border-color: transparent;
|
||||||
|
& > .ant-collapse-header {
|
||||||
|
border-radius: var(--container-border-radius);
|
||||||
|
border-color: transparent;
|
||||||
|
background-color: var(--purple-dark);
|
||||||
|
color: var(--white);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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 {
|
||||||
|
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 TOOLTIP
|
||||||
|
.ant-tooltip {
|
||||||
|
font-size: 0.75em;
|
||||||
|
}
|
||||||
|
.ant-tooltip-inner {
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
.ant-tooltip-inner,
|
||||||
|
.ant-tooltip-arrow-content {
|
||||||
|
background-color: var(--tooltip-base-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ANT TAGS
|
||||||
|
.ant-tag-red,
|
||||||
|
.ant-tag-orange,
|
||||||
|
.ant-tag-green,
|
||||||
|
.ant-tag-purple,
|
||||||
|
.ant-tag-blue {
|
||||||
|
background-color: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ANT PAGINATOR
|
||||||
|
.ant-pagination-item {
|
||||||
|
border-color: var(--white);
|
||||||
|
color: var(--default-link-color);
|
||||||
|
a {
|
||||||
|
color: var(--default-link-color);
|
||||||
|
}
|
||||||
|
&:active,
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--white);
|
||||||
|
a {
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-pagination-item-active {
|
||||||
|
color: var(--white);
|
||||||
|
background-color: var(--default-link-color);
|
||||||
|
border-color: var(--default-link-color);
|
||||||
|
a {
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
border-color: var(--default-link-color);
|
||||||
|
a {
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-pagination-prev,
|
||||||
|
.ant-pagination-next {
|
||||||
|
.ant-pagination-item-link {
|
||||||
|
color: var(--default-link-color);
|
||||||
|
background: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
&:hover {
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ANT CHECKBOX
|
||||||
|
.ant-checkbox-wrapper {
|
||||||
|
color: var(--white-75);
|
||||||
|
margin: 0.5em 0;
|
||||||
|
}
|
||||||
|
.ant-checkbox-group {
|
||||||
|
.ant-checkbox-group-item {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -7,7 +7,7 @@ html,
|
||||||
body {
|
body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: var(--theme-font-family);
|
font-family: var(--theme-font-family), var(--theme-header-font-family), sans-serif;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
||||||
background-color: var(--default-bg-color);
|
background-color: var(--default-bg-color);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue