mirror of
https://github.com/mwalbeck/nextcloud-breeze-dark.git
synced 2024-11-15 04:16:51 +00:00
Magnus Walbeck
813bc42c43
* Implement new system for individual user settings * Fix some styling for NC core * General styling fixes for apps * Implement new enforce theme system to replace the enabled by default system The old system doesn't really work with the new theming system in Nextcloud, so this new system is needed to achieve similar, although different, functionality. * Don't allow user to enable / disable the theme if the theme is enforced (it would have no effect) * Remove all references to icon variables as they no longer exist * Implement repair step to migrate user settings
278 lines
6.4 KiB
SCSS
278 lines
6.4 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.
|
|
*/
|
|
|
|
/* JavaScript XMPP Chat ----------------------------------------------------- */
|
|
|
|
.jsxc-button--default,
|
|
.jsxc-button--primary {
|
|
background-color: var(--color-main-background);
|
|
border: 1px solid var(--color-border);
|
|
color: var(--color-main-text);
|
|
transition: none;
|
|
|
|
&:hover {
|
|
background-color: var(--color-main-background);
|
|
}
|
|
}
|
|
|
|
.jsxc-button[disabled],
|
|
.jsxc-button[disabled]:hover {
|
|
background-color: var(--color-background-alternate);
|
|
border: 1px solid var(--color-border);
|
|
color: var(--color-main-text);
|
|
}
|
|
|
|
#jsxc-roster {
|
|
background-color: var(--color-main-background);
|
|
border-left-color: var(--color-border);
|
|
|
|
input {
|
|
background-color: var(--color-background-darker);
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
.jsxc-roster-toggle {
|
|
background-color: var(--color-background-darker);
|
|
border: 1px solid var(--color-border);
|
|
|
|
&::after {
|
|
border-right-color: var(--color-border);
|
|
}
|
|
}
|
|
|
|
.jsxc-roster-item {
|
|
color: var(--color-main-text);
|
|
|
|
&:hover {
|
|
background-color: var(--color-background-hover);
|
|
}
|
|
|
|
.jsxc-menu__content {
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
}
|
|
|
|
> .jsxc-bottom {
|
|
background-color: var(--color-main-background);
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
&[data-mute="yes"] .jsxc-js-presence-menu .jsxc-menu__button::after {
|
|
filter: invert(95%);
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
.jsxc-menu {
|
|
color: var(--color-main-text);
|
|
|
|
&.jsxc-menu--light li {
|
|
color: var(--color-main-text);
|
|
opacity: 0.7;
|
|
|
|
&:hover,
|
|
> span:hover {
|
|
cursor: pointer;
|
|
opacity: 1;
|
|
}
|
|
|
|
&.jsxc-disabled {
|
|
color: var(--color-text-maxcontrast);
|
|
opacity: 0.5;
|
|
|
|
&:hover {
|
|
cursor: default;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.jsxc-menu--dark li:hover {
|
|
background-color: var(--color-background-hover);
|
|
box-shadow: 0 0 0 1px var(--color-primary-element) inset;
|
|
color: var(--color-main-text);
|
|
}
|
|
|
|
.jsxc-menu__content {
|
|
background-color: var(--color-main-background);
|
|
box-shadow: none;
|
|
filter: none;
|
|
|
|
&::after {
|
|
color: var(--color-border);
|
|
}
|
|
}
|
|
|
|
&.jsxc-menu--pushup ul {
|
|
background-color: var(--color-background-darker);
|
|
border-top-color: var(--color-border);
|
|
|
|
li {
|
|
color: var(--color-main-text);
|
|
|
|
&:hover:not(.jsxc-disabled) {
|
|
background-color: var(--color-background-hover);
|
|
color: var(--color-main-text);
|
|
opacity: 1;
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom-color: var(--color-border);
|
|
}
|
|
|
|
a {
|
|
color: var(--color-main-text);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.jsxc-dialog-wrapper {
|
|
background-color: var(--color-background-blur);
|
|
|
|
.jsxc-dialog {
|
|
background-color: var(--color-main-background);
|
|
border-color: var(--color-border);
|
|
|
|
.jsxc-page {
|
|
section {
|
|
border-top-color: var(--color-border);
|
|
}
|
|
|
|
h2 {
|
|
color: var(--color-main-text);
|
|
}
|
|
|
|
.jsxc-list__item--clickable:hover {
|
|
background-color: var(--color-background-hover);
|
|
}
|
|
}
|
|
|
|
.form-group input {
|
|
background-color: var(--color-background-darker);
|
|
border-color: var(--color-border);
|
|
box-shadow: none;
|
|
color: var(--color-main-text);
|
|
|
|
&:invalid {
|
|
border-color: var(--color-error);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.jsxc-window-item {
|
|
&.jsxc-normal .jsxc-bar--window {
|
|
background-color: var(--color-primary-element);
|
|
color: var(--color-main-text);
|
|
}
|
|
|
|
&.jsxc-minimized .jsxc-bar--window {
|
|
background-color: var(--color-main-background);
|
|
color: var(--color-main-text);
|
|
}
|
|
|
|
.jsxc-menu__content {
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
.jsxc-memberlist {
|
|
background-color: var(--color-primary);
|
|
|
|
ul {
|
|
color: var(--color-main-text);
|
|
}
|
|
}
|
|
}
|
|
|
|
.jsxc-window {
|
|
background-color: var(--color-main-background);
|
|
border-color: var(--color-border);
|
|
|
|
.jsxc-message-area {
|
|
.jsxc-out {
|
|
background-color: var(--color-background-darker);
|
|
}
|
|
|
|
.jsxc-in {
|
|
background-color: var(--color-text-selection) !important;
|
|
}
|
|
}
|
|
|
|
.jsxc-timestamp {
|
|
color: var(--color-text-maxcontrast);
|
|
}
|
|
|
|
.jsxc-send-area {
|
|
background-color: var(--color-background-darker);
|
|
|
|
.jsxc-message-input {
|
|
background-color: var(--color-background-darker);
|
|
|
|
&::placeholder {
|
|
color: var(--color-text-maxcontrast);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
background-color: var(--color-background-darker) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.jsxc-mam-load-more span {
|
|
background-color: var(--color-main-background);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 16px;
|
|
opacity: 0.7;
|
|
|
|
&:hover {
|
|
background-color: var(--color-background-hover);
|
|
border-color: var(--color-primary-element);
|
|
color: var(--color-main-text);
|
|
opacity: 1;
|
|
}
|
|
|
|
&:focus,
|
|
&:active {
|
|
background-color: var(--color-primary-element);
|
|
border-color: var(--color-primary-element);
|
|
color: var(--color-main-text);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.app-settings #ojsxc-admin.ojsxc {
|
|
form.ojsxc input[readonly] {
|
|
background-color: var(--color-main-background);
|
|
}
|
|
|
|
h3 {
|
|
border-bottom-color: var(--color-border);
|
|
}
|
|
}
|
|
|
|
/* Icons -------------------------------------------------------------------- */
|
|
|
|
.jsxc-icon--clickable,
|
|
.jsxc-file-transfer {
|
|
opacity: 0.7 !important;
|
|
|
|
&:hover {
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
|
|
.jsxc-icon--menu-dark,
|
|
.jsxc-waiting::before,
|
|
.jsxc-icon--emoticon,
|
|
.jsxc-file-transfer,
|
|
div.jsxc-transfer .jsxc-transfer-icon {
|
|
filter: invert(95%);
|
|
}
|