owncast/web/styles/ant-overrides.scss
2022-09-10 22:33:49 -07:00

157 lines
4.4 KiB
SCSS

/* ------------------------- //
BUTTONS
// ------------------------- */
.ant-btn {
height: 2rem;
font-size: 0.85rem;
font-weight: bold;
border-width: 2px;
border-radius: var(--theme-rounded-corners);
color: var(--theme-color-components-primary-button-text);
border-color: var(--theme-color-action);
&: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;
}
}
.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-primary {
background-color: var(--theme-color-components-primary-button-background);
color: var(--theme-color-components-primary-button-text);
border-color: var(--theme-color-components-primary-button-background);
&: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: 0px;
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-modal-header {
color: var(--theme-color-components-modal-header-text);
font-family: var(--theme-text-display-font-family);
}
.ant-modal-title {
color: var(--theme-color-components-modal-header-text);
}
.ant-modal {
color: var(--theme-color-components-text-on-light);
h1 {
color: var(--theme-color-components-text-on-light);
}
}
.ant-input {
background-color: var(--theme-color-components-form-field-background);
color: var(--theme-color-components-form-field-text);
border-color: var(--theme-color-components-form-field-border);
&::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: var(--content-padding);
background-color: transparent;
border-radius: var(--theme-rounded-corners) var(--theme-rounded-corners) 0 0;
font-weight: bold;
& + .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-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);
}