nextcloud-breeze-dark/css/base/_elements.scss

169 lines
4.6 KiB
SCSS

/***
* @copyright Copyright (c) 2020, Magnus Walbeck <mw@mwalbeck.org>
*
* @license GNU AGPL version 3 or any later version, see COPYING file for more.
*/
/* Buttons ------------------------------------------------------------------- */
button:not(.color-picker__simple-color-circle):not(.property-color__color-preview),
.button,
input[type="button"],
input[type="submit"] {
&.primary {
background-color: var(--color-main-background) !important;
border-color: var(--color-border) !important;
color: var(--color-main-text) !important;
}
&.primary:hover {
border-color: var(--color-primary-element) !important;
}
&:focus,
&:active,
&.primary:focus,
&.primary:active {
background-color: var(--color-primary) !important;
border-color: var(--color-primary-element) !important;
}
}
.button-vue.button-vue--vue-secondary:not(.property-color__color-preview):not(
.unified-search__button
) {
background-color: var(--color-main-background) !important;
border: 1px solid var(--color-border) !important;
color: var(--color-main-text) !important;
&:hover {
border-color: var(--color-primary-element) !important;
}
&:focus,
&:active {
background-color: var(--color-primary) !important;
border-color: var(--color-primary-element) !important;
}
&.close-button {
border: none !important;
}
}
.button-vue.unified-search__button:hover {
opacity: 1 !important;
}
input[type="text"] + .icon-confirm,
input[type="password"] + .icon-confirm,
input[type="email"] + .icon-confirm {
background-color: var(--color-background-darker) !important;
}
/* Input Fields -------------------------------------------------------------- */
// div.select2-drop .select2-search input:not(:disabled):not(.primary):active,
// .pager li a:not(:disabled):not(.primary):active {
// }
input:not([type="range"]):not([type="button"]):not([type="submit"]) {
background-color: var(--color-background-darker);
&:active {
background-color: var(--color-background-darker);
}
}
div[contenteditable="true"]:not(:disabled),
textarea:not(:disabled) {
&:hover,
&:focus,
&:active {
border-color: var(--color-primary-element) !important;
}
}
.multiselect {
.multiselect__input {
background-color: inherit !important;
}
}
.checkbox-radio-switch:not(.checkbox-radio-switch--disabled)
.checkbox-radio-switch__input:hover
+ .checkbox-radio-switch__label,
.checkbox-radio-switch:not(.checkbox-radio-switch--disabled)
.checkbox-radio-switch__input:focus
+ .checkbox-radio-switch__label,
.checkbox-radio-switch:not(.checkbox-radio-switch--disabled) .checkbox-radio-switch__label:hover,
.checkbox-radio-switch:not(.checkbox-radio-switch--disabled)
.checkbox-radio-switch__label:focus-within {
background-color: var(--color-background-hover) !important;
}
.checkbox-radio-switch:not(.checkbox-radio-switch--disabled)
.checkbox-radio-switch__input:focus
+ .checkbox-radio-switch__label {
box-shadow: unset !important;
}
/* Action items -------------------------------------------------------------- */
.action-input .action-input__label,
.action-text-editable .action-text-editable__label {
background-color: var(--color-background-darker);
}
/* select -------------------------------------------------------------------- */
// To prevent white text on white background on windows
select option {
background-color: var(--color-main-background);
color: var(--color-main-text);
}
.select2-choices .select2-search-choice {
box-shadow: unset;
}
.select2-dropdown-open .select2-choice,
.select2-dropdown-open .select2-choices {
background: var(--color-main-background) !important;
border-color: var(--color-border) !important;
}
.select2-drop .select2-drop-active {
border-top-color: var(--color-border) !important;
}
.multiselect .multiselect__content-wrapper .multiselect__option--highlight {
background-color: var(--color-background-hover) !important;
}
/* vs__search ---------------------------------------------------------------- */
.vs__search {
background-color: unset !important;
}
/* Table --------------------------------------------------------------------- */
tbody tr:hover,
tbody tr:focus,
tbody tr:active {
background-color: var(--color-background-hover) !important;
thead tr:hover,
thead tr:focus,
thead tr:active {
background-color: var(--color-main-background) !important;
}
}
/* Progress ------------------------------------------------------------------ */
progress:not(.vue) {
background-color: var(--color-border);
}