owncast/web/styles/ant-overrides.scss
2023-06-20 20:58:00 -07:00

260 lines
6.0 KiB
SCSS

/* ------------------------- //
HEADER
// ------------------------- */
.ant-layout-header {
line-height: unset;
height: auto;
}
/* ------------------------- //
BUTTONS
// ------------------------- */
.ant-btn[disabled] {
background-color: var(--theme-color-components-secondary-button-background-disabled);
color: var(--theme-color-components-secondary-button-text-disabled);
border-color: var(--theme-color-components-secondary-button-border-disabled);
&:hover,
&:focus {
background-color: var(--theme-color-components-secondary-button-background-disabled);
color: var(--theme-color-components-secondary-button-text-disabled);
border-color: var(--theme-color-components-secondary-button-border-disabled);
}
}
.ant-btn-default {
color: currentcolor;
border-width: 2px;
border-color: var(--theme-color-components-primary-button-border);
border-radius: var(--theme-rounded-corners);
background-color: rgb(0 0 0 / 10%);
&:hover,
&:focus {
color: currentcolor;
border-color: rgb(0 0 0 / 55%);
background-color: var(--theme-color-components-secondary-button-background);
}
}
.ant-btn-primary {
height: 2rem;
font-size: 0.85rem;
border-width: 2px;
border-radius: var(--theme-rounded-corners);
border-color: var(--theme-color-components-primary-button-border);
&:hover,
&:focus {
border-color: var(--theme-color-action-hover);
color: var(--theme-color-action-hover);
background-color: var(--theme-color-components-secondary-button-background);
}
&:focus {
border-color: var(--theme-color-components-secondary-button-text);
}
&[ant-click-animating-without-extra-node]::after {
animation: 0s !important;
}
background-color: var(--theme-color-components-primary-button-background);
color: var(--theme-color-components-primary-button-text);
&:hover {
background-color: var(--theme-color-action-hover);
color: var(--theme-color-components-primary-button-text);
border-color: var(--theme-color-action-hover);
}
&:focus {
background-color: var(--theme-color-action-hover);
color: var(--theme-color-components-primary-button-text);
border-color: var(--theme-color-components-primary-button-text);
}
}
.ant-btn-primary[disabled] {
background-color: var(--theme-color-components-primary-button-background-disabled);
border-color: var(--theme-color-components-primary-button-border-disabled);
color: var(--theme-color-components-primary-button-text-disabled);
&:hover,
&:focus {
background-color: var(--theme-color-components-primary-button-background-disabled);
border-color: var(--theme-color-components-primary-button-border-disabled);
color: var(--theme-color-components-primary-button-text-disabled);
}
}
.ant-btn-background-ghost {
border: 0;
box-shadow: none !important;
&:hover,
&:focus {
background-color: var(--theme-unknown);
}
}
/* ------------------------- //
DROPDOWN
// ------------------------- */
.ant-dropdown-menu {
border-radius: var(--theme-rounded-corners);
background-color: var(--theme-color-components-menu-background);
}
.ant-dropdown-menu-item {
color: var(--theme-color-components-menu-item-text);
&:hover {
background-color: var(--theme-color-components-menu-item-hover-bg);
}
&:focus {
background-color: var(--theme-color-components-menu-item-focus-bg);
}
}
.ant-dropdown-menu-item,
.ant-dropdown-menu-submenu-title {
font-size: 0.8rem;
padding: 4px 15px;
}
.ant-input-affix-wrapper {
background-color: var(--theme-color-components-form-field-background);
}
.ant-input,
.ant-input-number-input {
background-color: var(--theme-color-components-form-field-background);
color: var(--theme-color-components-form-field-text);
&::placeholder {
color: var(--theme-color-components-form-field-placeholder);
}
}
.ant-alert-error {
.ant-alert-icon {
color: var(--theme-color-palette-error);
}
.ant-alert-message {
color: var(--theme-color-palette-error);
}
}
.ant-tabs-tab {
padding: 0.7rem;
background-color: transparent;
border-radius: var(--theme-rounded-corners) var(--theme-rounded-corners) 0 0;
font-weight: 600;
& + .ant-tabs-tab {
margin-left: var(--module-spacing);
}
&.ant-tabs-tab-active {
background-color: var(--theme-color-palette-4);
.ant-tabs-tab-btn {
color: var(--theme-color-action);
&:hover {
color: var(--theme-color-action-hover);
}
}
}
}
.ant-tabs {
height: 100%;
.ant-tabs-content-holder {
height: 100%;
}
.ant-tabs-content {
overflow: auto;
.ant-tabs-tabpane-active {
height: 100%;
}
}
}
.ant-tabs-ink-bar {
background-color: var(--theme-color-action);
}
.ant-tabs-nav::before {
border-bottom-color: var(--theme-color-components-menu-item-focus-bg) !important;
}
.ant-modal-close:hover {
color: var(--theme-color-components-modal-header-text);
}
.ant-modal-title {
color: var(--theme-color-components-modal-header-text);
}
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
background-color: unset;
}
td.ant-table-column-sort,
.ant-table-thead th.ant-table-column-sort {
background-color: unset;
}
th {
color: var(--theme-color-components-modal-header-text);
font-family: var(--theme-text-display-font-family);
font-weight: 700 !important;
}
.ant-popover {
z-index: 800; // Lower the z-index so it renders under modals.
}
/* ------------------------- //
* SIDER MENUITEM
// ------------------------- */
.ant-menu-light .ant-menu-submenu-title:active {
background: var(--theme-color-palette-12);
}
.ant-menu-light .ant-menu-submenu-title:hover {
color: var(--theme-color-palette-12);
}
.ant-menu-submenu:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow {
color: var(--theme-color-palette-12);
}
.ant-menu-light .ant-menu-item:hover {
color: var(--theme-color-palette-12);
}
.line-chart-container {
position: relative;
.download-btn {
position: absolute;
top: 0.3rem;
right: 0.35rem;
}
}
.ant-collapse > .ant-collapse-item {
background: var(--theme-color-palette-14);
}