opensourcemirror
/
nextcloud-breeze-dark
mirror of https://github.com/mwalbeck/nextcloud-breeze-dark.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Add support for Nextcloud 25 (#325) 

* 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
This commit is contained in:
Magnus Walbeck 2023-02-04 21:33:56 +01:00 committed by GitHub
parent 204d125b5a
commit 813bc42c43
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
59 changed files with 10959 additions and 2385 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -2,3 +2,4 @@
/node_modules
/vendor
/.php_cs.cache
css/*.map

4
.prettierignore
View File

@ -1 +1,5 @@
css/apps/thirdparty/_files-markdown-syntax.scss
css/server-automatic.css
css/server.css
css/server-automatic.css.map
css/server.css.map

4
.stylelintignore
View File

@ -1 +1,5 @@
css/apps/thirdparty/_files-markdown-syntax.scss
css/server-automatic.css
css/server.css
css/server-automatic.css.map
css/server.css.map

18
.vscode/launch.json vendored Normal file
View File

@ -0,0 +1,18 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Listen for Xdebug",
"type": "php",
"request": "launch",
"port": 9003,
"pathMappings": {
"/var/www/html/lib/public": "${workspaceFolder}/vendor/christophwurst/nextcloud/OCP",
"/var/www/html/custom_apps/breezedark": "${workspaceFolder}/../breezedark"
}
}
]
}

6
Makefile
View File

@ -25,6 +25,12 @@ stylelint:
stylelint-fix:
npm run stylelint:fix
watch:
npm run watch
build:
npm run build
appstore:
rm -rf $(build_directory)
mkdir -p $(sign_directory)

36
README.md
View File

@ -10,20 +10,14 @@ If you have any questions, problems or anything else you're welcome to come hang
The currently supported and maintained Nextcloud releases are:
- Nextcloud 24
- Nextcloud 23
- Nextcloud 25
I try my best to maintain 2 Nextcloud releases at once, to allow for smoother transitions, but for various reason I might decide to drop support for older releases early.
Previous unmaintained releases:
- Nextcloud 22
- Nextcloud 21
- Nextcloud 20
- Nextcloud 19
- Nextcloud 18
- Nextcloud 17
- Nextcloud 11-16
- Nextcloud 17-24 (App)
- Nextcloud 11-16 (Theme folder)
## Version numbering
@ -41,24 +35,26 @@ After you install the theme, you need to enable it. There are two options for th
### Global
The global option enables the theme by default for all users and unauthenticated visits. Without this option items like the login and sharing pages will not be styled. You can also decide to automatically enable or disable the theme based on the theming choice reported by the browser. In the global options you will also find an option to exclude the login page from being themed. You can find the global options here:
With the global options you can enforce the use of the theme for all users as well as unauthenticated visits. Please note that when the theme is enforced for all users it isn't possible for them to disable the theme or choose a different theme.
There is also an option to let the theme be enabled / disabled based on the theming preferences reported by browser. When the theme is deactivated using this method, Nextcloud will revert to using the default light theme. This setting only sets the default for when the theme is globally enforced and can be overridden by the user.
You can also choose whether the login page should be themed. Though this only has an effect if the theme is enforced globally, or during the login phase of a user that has the theme enabled.
You can find the global options here:
```
Settings > Administration > Theming > Breeze Dark
```
Please note that you need the Theming app enabled in Nextcloud to access the global settings.
### Personal
The personal option allows each user to set their own preference independent of how you set the global option. If the user has not set an option yet, they will follow the global option. They can also choose, independently, if they want the theme to match the theming choice reported by the browser. You can find the personal option here:
The personal option allows each user to enable / disable the theme unless it's being enforced by the global options. They can though choose whether the theme should follow the theming choice reported by the browser. This option is also available when the theme is being enforced globally. If the user hasn't set a prefernece they will follow the global default. You can find the personal option here:
```
Settings > Personal > Accessibility > Breeze Dark
Settings > Personal > Appearance and accessibility > Breeze Dark
```
Please note that you need the Accessibility app enabled in Nextcloud to access the personal setting.
### Custom styling
Under the Theming section in the admin settings you can add your own custom styling to the theme. Only standard CSS can be used. This custom styling will be applied whenever the theme is enabled and only affects the Breeze Dark theme.
@ -73,14 +69,6 @@ You're also very welcome to open a styling request, if there is an app you would
A full list of supported apps can be found on the [wiki](https://github.com/mwalbeck/nextcloud-breeze-dark/wiki/Styled-apps).
### Pull requests
If you would like to contribute to the theme, all you need is a working Nextcloud setup and a text editor. Nextcloud is going to handle all the Sass compilation on its own. When you have Nextcloud setup, you can simply clone this repo into the app folder.
As Nextcloud caches all sass, your changes will not show up immediately. To have your changes show up an easy trick is to disable the theme, refresh the page and then enable it again. This is not perfect, but works most of the time. If your changes do not show up, you can either wait a couple of minutes and then try again, or you can try running an **occ maintenance:repair**.
You're always welcome to open an issue and talk about the changes, you would like to make, before starting.
## Donations
If you like the theme and would like to donate you can use the following ways:

27
appinfo/info.xml
View File

@ -10,33 +10,35 @@ This is a breeze dark theme for Nextcloud, based on the Breeze Dark theme made b
## Usage
After you install the theme, you need to enable it. There a two options for this, a global and a personal one.
After you install the theme, you need to enable it. There are two options for this, a global and a personal one.
### Global
The global option enables the theme by default for all users and unauthenticated visits. Without this option items like the login and sharing pages will not be styled. You can also decide to automatically enable or disable the theme based on the theming choice reported by the browser. In the global options you will also find an option to exclude the login page from being themed. You can find the global options here:
With the global options you can enforce the use of the theme for all users as well as unauthenticated visits. Please note that when the theme is enforced for all users it isn't possible for them to disable the theme or choose a different theme.
There is also an option to let the theme be enabled / disabled based on the theming preferences reported by browser. When the theme is deactivated using this method, Nextcloud will revert to using the default light theme. This setting only sets the default for when the theme is globally enforced and can be overridden by the user.
You can also choose whether the login page should be themed. Though this only has an effect if the theme is enforced globally, or during the login phase of a user that has the theme enabled.
You can find the global options here:
```
Settings > Administration > Theming > Breeze Dark
```
Please note that you need the Theming app enabled in Nextcloud to access the global settings.
### Personal
The personal option allows each user to set their own preference independent of how you set the global option. If the user has not set an option yet, they will follow the global option. They can also choose, independently, if they want the theme to match the theming choice reported by the browser. You can find the personal option here:
The personal option allows each user to enable / disable the theme unless it's being enforced by the global options. They can though choose whether the theme should follow the theming choice reported by the browser. This option is also available when the theme is being enforced globally. If the user hasn't set a prefernece they will follow the global default. You can find the personal option here:
```
Settings > Personal > Accessibility > Breeze Dark
Settings > Personal > Appearance and accessibility > Breeze Dark
```
Please note that you need the Accessibility app enabled in Nextcloud to access the personal setting.
### Custom styling
Under the Theming section in the admin settings you can add your own custom styling to the theme. Only standard CSS can be used. This custom styling will be applied whenever the theme is enabled and only affects the Breeze Dark theme.
]]></description>
<version>24.0.3</version>
<version>25.0.0</version>
<licence>agpl</licence>
<author mail="mw@mwalbeck.org" homepage="https://github.com/mwalbeck/nextcloud-breeze-dark">Magnus Walbeck</author>
<namespace>BreezeDark</namespace>
@ -45,8 +47,13 @@ Under the Theming section in the admin settings you can add your own custom styl
<bugs>https://github.com/mwalbeck/nextcloud-breeze-dark/issues</bugs>
<screenshot>https://raw.githubusercontent.com/mwalbeck/nextcloud-breeze-dark/master/screenshot.png</screenshot>
<dependencies>
<nextcloud min-version="24" max-version="24"/>
<nextcloud min-version="25" max-version="25"/>
</dependencies>
<repair-steps>
<post-migration>
<step>OCA\BreezeDark\Migration\MigrateUserThemeSettings</step>
</post-migration>
</repair-steps>
<settings>
<personal>OCA\BreezeDark\Settings\Personal</personal>
<admin>OCA\BreezeDark\Settings\Admin</admin>

19
css/apps/_apps.scss
View File

@ -33,8 +33,12 @@
}
}
#app-settings-header .settings-button {
opacity: 1;
#app-settings-header .settings-button,
#app-settings__header .settings-button,
.contacts-settings .contacts-settings-button {
background-color: transparent !important;
border: unset !important;
opacity: 1;
}
/* App Sidebar -------------------------------------------------------------- */
@ -76,16 +80,16 @@
#app-sidebar-vue.app-sidebar .app-sidebar-header__desc .app-sidebar-header__star .star--star,
#app-sidebar.app-sidebar .app-sidebar-header__desc .app-sidebar-header__star .star--star {
color: var(--color-main-text);
color: var(--color-main-text);
&:hover {
color: var(--color-icon-yellow);
}
}
#app-sidebar-vue.app-sidebar .app-sidebar-header__desc .app-sidebar-header__star .star--starred
#app-sidebar-vue.app-sidebar .app-sidebar-header__desc .app-sidebar-header__star .star--starred,
#app-sidebar.app-sidebar .app-sidebar-header__desc .app-sidebar-header__star .star--starred {
color: var(--color-icon-yellow);
color: var(--color-icon-yellow);
&:hover {
color: var(--color-main-text);
@ -201,3 +205,8 @@
+ .checkbox-radio-switch__label[data-v-5cec6b50] {
background-color: var(--color-background-hover) !important;
}
/* Template picker ---------------------------------------------------------- */
.templates-picker__buttons {
background-image: unset !important;
}

36
css/apps/core/_activity.scss
View File

@ -15,39 +15,3 @@
background-color: var(--color-main-background) !important;
border: 1px solid var(--color-border);
}
/* Icons -------------------------------------------------------------------- */
.icon-activity,
.icon-activity-dark {
background-image: var(--icon-activity-activity-f2f2f2) !important;
}
// Activity App: Navigation sidebar
.app-activity #app-navigation ul li a img {
filter: invert(95%);
}
// Activity App: Icons in activity feed
.app-activity .activity-icon,
.activity .activity-icon,
.activity .activity--header {
img[src$="share.svg"],
img[src$="change.svg"],
img[src$="calendar.svg"],
img[src$="comment.svg"],
img[src$="announcementcenter-dark.svg"],
img[src$="archive.svg"],
img[src$="tag.svg"],
img[src$="checkmark.svg"],
img[src$="personal.svg"],
img[src$="deck-dark.svg"],
img[src$="app-dark.svg"],
img[src$="password.svg"],
img[src$="star.svg"],
img[src$="files.svg"],
img[src$="download.svg"],
img[src$="contacts.svg"] {
filter: invert(95%);
}
}

54
css/apps/core/_dashboard.scss
View File

@ -24,6 +24,23 @@
}
}
#app-dashboard .footer .button-vue {
border: unset !important;
}
#app-dashboard .user-status-menu-item__toggle--inline {
box-shadow: none !important;
}
#status-weather .button-vue {
background-color: var(--color-main-background-blur) !important;
border: unset !important;
&:hover {
background-color: var(--color-background-hover) !important;
}
}
/* Deck */
.app-dashboard .card {
background-color: inherit !important;
@ -36,8 +53,8 @@
/* Tasks */
.center-button .button-vue--vue-secondary {
color: var(--color-main-text) !important;
background-color: var(--color-background-darker) !important;
color: var(--color-main-text) !important;
&:hover {
background-color: var(--color-background-hover) !important;
@ -49,38 +66,3 @@
color: var(--color-primary-text) !important;
}
}
/* Icons -------------------------------------------------------------------- */
.icon-github,
.icon-github-settings {
background-image: var(--icon-integration_github-app-f2f2f2) !important;
}
.icon-reddit {
background-image: var(--icon-integration_reddit-app-f2f2f2) !important;
}
.icon-discourse {
background-image: var(--icon-integration_discourse-app-f2f2f2) !important;
}
.icon-gitlab {
background-image: var(--icon-integration_gitlab-app-f2f2f2) !important;
}
.icon-mastodon {
background-image: var(--icon-integration_mastodon-app-f2f2f2) !important;
}
.icon-moodle {
background-image: var(--icon-integration_moodle-app-f2f2f2) !important;
}
.icon-twitter {
background-image: var(--icon-integration_twitter-app-f2f2f2) !important;
}
.icon-zammad {
background-image: var(--icon-integration_zammad-app-f2f2f2) !important;
}

41
css/apps/core/_files.scss
View File

@ -89,44 +89,3 @@ table tr.mouseOver {
table tr.mouseOver td {
background-color: unset !important;
}
/* Icons -------------------------------------------------------------------- */
.nav-icon-files {
background-image: var(--icon-files-folder-f2f2f2) !important;
}
.nav-icon-recent {
background-image: var(--icon-files-recent-f2f2f2) !important;
}
.nav-icon-sharingin,
.nav-icon-sharingout,
.nav-icon-pendingshares,
.nav-icon-shareoverview {
background-image: var(--icon-files-share-f2f2f2) !important;
}
.nav-icon-sharinglinks {
background-image: var(--icon-files-public-f2f2f2) !important;
}
.nav-icon-deletedshares {
background-image: var(--icon-files-unshare-f2f2f2) !important;
}
.nav-icon-extstoragemounts {
background-image: var(--icon-files-external-f2f2f2) !important;
}
.nav-icon-trashbin {
background-image: var(--icon-files-delete-f2f2f2) !important;
}
.nav-icon-favorites {
background-image: var(--icon-star-dark-f2f2f2) !important;
}
.nav-icon-systemtagsfilter {
background-image: var(--icon-tag-f2f2f2) !important;
}

7
css/apps/core/_notifications.scss
View File

@ -21,10 +21,3 @@
background-color: var(--color-background-hover);
}
}
/* Manual icon variable definitions for icons to prevent black icons -------- */
.icon-notifications-dark,
.icon-notifications {
background-image: var(--icon-notifications-notifications-dark-f2f2f2) !important;
}

11
css/apps/core/_photos.scss
View File

@ -1,11 +0,0 @@
/***
* @copyright Copyright (c) 2020, Magnus Walbeck <mw@mwalbeck.org>
*
* @license GNU AGPL version 3 or any later version, see COPYING file for more.
*/
/* Icons -------------------------------------------------------------------- */
.icon-yourphotos {
background-image: var(--icon-photos-yourphotos-f2f2f2) !important;
}

118
css/apps/core/_text.scss
View File

@ -43,7 +43,7 @@
}
#editor-wrapper div.ProseMirror table th {
border-bottom-width: 2px;
border-bottom-width: 2px;
}
#editor-wrapper .menubar {
@ -66,124 +66,10 @@
}
.emoji-list {
box-shadow: unset !important;
border: 1px solid var(--color-border);
box-shadow: unset !important;
.emoji-list__item {
opacity: 1 !important;
}
}
/* Icons -------------------------------------------------------------------- */
.icon-undo {
background-image: var(--icon-text-undo-f2f2f2) !important;
}
.icon-redo {
background-image: var(--icon-text-redo-f2f2f2) !important;
}
.icon-bold {
background-image: var(--icon-text-bold-f2f2f2) !important;
}
.icon-italic {
background-image: var(--icon-text-italic-f2f2f2) !important;
}
.icon-strike {
background-image: var(--icon-text-strike-f2f2f2) !important;
}
.icon-paragraph {
background-image: var(--icon-text-paragraph-f2f2f2) !important;
}
.icon-h1 {
background-image: var(--icon-text-h1-f2f2f2) !important;
}
.icon-h2 {
background-image: var(--icon-text-h2-f2f2f2) !important;
}
.icon-h3 {
background-image: var(--icon-text-h3-f2f2f2) !important;
}
.icon-h4 {
background-image: var(--icon-text-h4-f2f2f2) !important;
}
.icon-h5 {
background-image: var(--icon-text-h5-f2f2f2) !important;
}
.icon-h6 {
background-image: var(--icon-text-h6-f2f2f2) !important;
}
.icon-ul {
background-image: var(--icon-text-ul-f2f2f2) !important;
}
.icon-ol {
background-image: var(--icon-text-ol-f2f2f2) !important;
}
.icon-checkmark {
background-image: var(--icon-checkmark-f2f2f2) !important;
}
.icon-quote {
background-image: var(--icon-text-quote-f2f2f2) !important;
}
.icon-code {
background-image: var(--icon-text-code-f2f2f2) !important;
}
.icon-image {
background-image: var(--icon-text-image-f2f2f2) !important;
}
.icon-underline {
background-image: var(--icon-text-underline-f2f2f2) !important;
}
.icon-table {
background-image: var(--icon-text-table-f2f2f2) !important;
}
.icon-tasklist {
background-image: var(--icon-text-tasklist-f2f2f2) !important;
}
.icon-emoji {
background-image: var(--icon-text-emoji-f2f2f2) !important;
}
.icon-help {
background-image: var(--icon-text-help-f2f2f2) !important;
}
.icon-add_col_before {
background-image: var(--icon-text-add_col_before-f2f2f2) !important;
}
.icon-add_col_after {
background-image: var(--icon-text-add_col_after-f2f2f2) !important;
}
.icon-table_settings {
background-image: var(--icon-text-table_settings-f2f2f2) !important;
}
.icon-add_row_before {
background-image: var(--icon-text-add_row_before-f2f2f2) !important;
}
.icon-add_row_after {
background-image: var(--icon-text-add_row_after-f2f2f2) !important;
}

13
css/apps/official/_announcement-center.scss
View File

@ -15,16 +15,3 @@
color: var(--color-text-maxcontrast);
}
}
/* Icons -------------------------------------------------------------------- */
.icon-announcementcenter,
.icon-announcementcenter-dark {
background-image: var(--icon-announcementcenter-announcementcenter-f2f2f2) !important;
}
.app-announcementcenter {
.icon-notifications-off {
background-image: var(--icon-announcementcenter-notifications-off-f2f2f2) !important;
}
}

65
css/apps/official/_calendar.scss
View File

@ -120,68 +120,3 @@
.popover.open .action-link {
opacity: 1;
}
/* Icons -------------------------------------------------------------------- */
.icon-new-calendar {
background-image: var(--icon-calendar-new-calendar-f2f2f2) !important;
}
.app-calendar,
.popover {
.icon-rightarrow {
background-image: var(--icon-calendar-rightarrow-f2f2f2) !important;
}
.icon-leftarrow {
background-image: var(--icon-calendar-leftarrow-f2f2f2) !important;
}
.icon-view-module {
background-image: var(--icon-calendar-view-module-f2f2f2) !important;
}
.icon-view-week {
background-image: var(--icon-calendar-view-week-f2f2f2) !important;
}
.icon-view-day {
background-image: var(--icon-calendar-view-day-f2f2f2) !important;
}
.icon-view-list {
background-image: var(--icon-calendar-view-list-f2f2f2) !important;
}
.icon-new-calendar-with-task-list {
background-image: var(--icon-calendar-new-calendar-with-task-list-f2f2f2) !important;
}
.icon-timezone {
background-image: var(--icon-calendar-timezone-f2f2f2) !important;
}
.icon-eye {
background-image: var(--icon-calendar-eye-f2f2f2) !important;
}
.icon-briefcase {
background-image: var(--icon-calendar-briefcase-f2f2f2) !important;
}
.icon-reminder {
background-image: var(--icon-calendar-reminder-f2f2f2) !important;
}
.icon-repeat {
background-image: var(--icon-calendar-repeat-f2f2f2) !important;
}
.icon-embed {
background-image: var(--icon-calendar-embed-f2f2f2) !important;
}
.icon-color-picker {
background-image: var(--icon-calendar-color-picker-f2f2f2) !important;
}
}

6
css/apps/official/_circles.scss
View File

@ -22,9 +22,3 @@
}
}
}
/* Icons -------------------------------------------------------------------- */
.icon-circles {
background-image: var(--icon-circles-circles-f2f2f2) !important;
}

41
css/apps/official/_contacts.scss
View File

@ -27,44 +27,3 @@
background-color: var(--color-background-darker) !important;
}
}
/* Icons -------------------------------------------------------------------- */
.app-contacts {
.icon-phone {
background-image: var(--icon-contacts-phone-f2f2f2) !important;
}
.icon-address-book {
background-image: var(--icon-contacts-address-book-f2f2f2) !important;
}
.icon-social {
background-image: var(--icon-contacts-social-f2f2f2) !important;
}
.icon-language {
background-image: var(--icon-contacts-language-f2f2f2) !important;
}
.icon-up {
background-image: var(--icon-contacts-up-f2f2f2) !important;
}
.sort-contacts .multiselect .multiselect__single {
background-image: var(--icon-triangle-s-f2f2f2) !important;
}
.icon-eye {
background-image: var(--icon-contacts-eye-f2f2f2) !important;
}
.icon-recent-actors {
background-image: var(--icon-contacts-recent-actors-f2f2f2) !important;
}
}
// In popup outside the .app-contacts div
.icon-qrcode {
background-image: var(--icon-contacts-qrcode-f2f2f2) !important;
}

41
css/apps/official/_deck.scss
View File

@ -48,47 +48,6 @@
/* Icons -------------------------------------------------------------------- */
.icon-deck {
background-image: var(--icon-deck-deck-f2f2f2) !important;
}
.icon-archive {
background-image: var(--icon-deck-archive-f2f2f2) !important;
}
.icon-toggle-compact-expanded {
background-image: var(--icon-deck-toggle-view-collapse-f2f2f2) !important;
}
.icon-toggle-compact-collapsed {
background-image: var(--icon-deck-toggle-view-expand-f2f2f2) !important;
}
.icon-clone {
background-image: var(--icon-deck-clone-f2f2f2) !important;
}
.icon-filter {
background-image: var(--icon-deck-filter-f2f2f2) !important;
}
.icon-attach {
background-image: var(--icon-deck-attach-f2f2f2) !important;
}
.icon-calendar-dark.now,
.icon-calendar-dark.next {
background-image: var(--icon-calendar-000) !important;
}
.icon-filter_set {
background-image: var(--icon-deck-filter_set-f2f2f2) !important;
}
.icon-reply {
background-image: var(--icon-deck-reply-f2f2f2) !important;
}
.resource-type-deck {
img[src$="deck-dark.svg"] {
filter: invert(95%);

38
css/apps/official/_forms.scss
View File

@ -34,41 +34,3 @@
}
}
}
/* Icons -------------------------------------------------------------------- */
.icon-forms {
background-image: var(--icon-forms-forms-f2f2f2) !important;
}
.icon-answer-checkbox {
background-image: var(--icon-forms-answer-checkbox-f2f2f2) !important;
}
.icon-answer-multiple {
background-image: var(--icon-forms-answer-multiple-f2f2f2) !important;
}
.icon-answer-dropdown {
background-image: var(--icon-forms-answer-dropdown-f2f2f2) !important;
}
.icon-answer-short {
background-image: var(--icon-forms-answer-short-f2f2f2) !important;
}
.icon-answer-long {
background-image: var(--icon-forms-answer-long-f2f2f2) !important;
}
.icon-drag-handle {
background-image: var(--icon-forms-drag-handle-f2f2f2) !important;
}
.icon-answer-date {
background-image: var(--icon-forms-answer-date-f2f2f2) !important;
}
.icon-answer-datetime {
background-image: var(--icon-forms-answer-datetime-f2f2f2) !important;
}

4
css/apps/official/_groupfolders.scss
View File

@ -75,7 +75,3 @@
filter: invert(95%);
}
}
.icon-deny {
background-image: var(--icon-groupfolders-deny-f2f2f2) !important;
}

82
css/apps/official/_mail.scss
View File

@ -22,18 +22,27 @@
}
}
.app-mail #mail-content {
border-radius: 3px;
.app-mail .html-message-body #message-container {
padding: 1rem;
}
#mail-message-has-blocked-content .action-item button.action-item__menutoggle--with-title {
.app-mail #mail-message .mail-message-body-html {
#mail-message-has-blocked-content {
background-color: var(--color-main-background) !important;
}
margin: unset;
padding: 5px 1rem;
#mail-message-has-blocked-content
.action-item--open
button.action-item__menutoggle--with-title {
background-color: var(--color-primary) !important;
border-color: var(--color-primary-element) !important;
.button-vue {
border: 1px solid var(--color-border) !important;
margin-left: 1rem;
padding: unset;
}
.button-vue__text {
padding-left: 1rem !important;
padding-right: 1rem !important;
text-decoration: none !important;
}
}
}
@ -72,58 +81,3 @@
.popover.open button.action-button {
opacity: 1;
}
/* Icons -------------------------------------------------------------------- */
.app-mail {
.icon-inbox {
background-image: var(--icon-mail-inbox-f2f2f2) !important;
}
.icon-flagged {
background-image: var(--icon-mail-star-f2f2f2) !important;
}
.icon-drafts {
background-image: var(--icon-mail-drafts-f2f2f2) !important;
}
.icon-sent {
background-image: var(--icon-mail-sent-f2f2f2) !important;
}
.icon-archive {
background-image: var(--icon-mail-archive-f2f2f2) !important;
}
.icon-trash {
background-image: var(--icon-mail-trash-f2f2f2) !important;
}
.icon-starred[data-starred="false"]:not(:hover) {
background-image: var(--icon-star-dark-f2f2f2) !important;
}
}
// Icons used by Mail inside and outside the .app-mail class
.icon-forward {
background-image: var(--icon-mail-forward-f2f2f2) !important;
}
.icon-junk {
background-image: var(--icon-mail-junk-f2f2f2) !important;
}
// Specify which places to exactly to use the white mail-important icon.
// This is to prevent the important icon, on the avatar of emails
// marked as important, having a white background.
.popover .icon-important,
#mailbox-priority .icon-important {
background-image: var(--icon-mail-important-f2f2f2) !important;
}
#mail-message-has-blocked-content .action-item button.action-item__menutoggle--with-title,
.popover.open .action-button .action-button__icon.icon-toggle {
background-image: var(--icon-toggle-f2f2f2) !important;
}

32
css/apps/official/_news.scss
View File

@ -65,35 +65,3 @@
color: var(--color-text-link);
}
}
/* Icons -------------------------------------------------------------------- */
.app-news {
.icon-rss {
background-image: var(--icon-news-rss-f2f2f2) !important;
}
.icon-unpinned {
background-image: var(--icon-news-unpinned-f2f2f2) !important;
}
.icon-pinned {
background-image: var(--icon-news-pinned-f2f2f2) !important;
}
.icon-full-text-disabled {
background-image: var(--icon-news-nonfulltext-f2f2f2) !important;
}
.icon-full-text-enabled {
background-image: var(--icon-news-fulltext-f2f2f2) !important;
}
.icon-updatemode-default {
background-image: var(--icon-news-updatemodedefault-f2f2f2) !important;
}
.icon-updatemode-unread {
background-image: var(--icon-news-updatemodeunread-f2f2f2) !important;
}
}

24
css/apps/official/_notes.scss
View File

@ -12,27 +12,3 @@
background-image: none !important;
}
}
/* Icons -------------------------------------------------------------------- */
.icon-notes {
background-image: var(--icon-notes-notes-f2f2f2) !important;
}
.icon-notes-trans {
background-image: var(--icon-notes-notes-trans-f2f2f2) !important;
}
.app-notes {
.icon-recent {
background-image: var(--icon-notes-recent-f2f2f2) !important;
}
.icon-emptyfolder {
background-image: var(--icon-notes-folder-empty-f2f2f2) !important;
}
.icon-files {
background-image: var(--icon-notes-folder-f2f2f2) !important;
}
}

19
css/apps/official/_social.scss
View File

@ -1,19 +0,0 @@
/***
* @copyright Copyright (c) 2020, Magnus Walbeck <mw@mwalbeck.org>
*
* @license GNU AGPL version 3 or any later version, see COPYING file for more.
*/
/* Social ------------------------------------------------------------------- */
/* Icons -------------------------------------------------------------------- */
.app-social {
.icon-reply {
background-image: var(--icon-social-reply-f2f2f2) !important;
}
.emoji-invoker {
background-image: var(--icon-social-emoji-f2f2f2) !important;
}
}

48
css/apps/official/_spreed.scss
View File

@ -33,51 +33,3 @@
background-color: var(--color-background-hover);
}
}
/* Icons -------------------------------------------------------------------- */
// Used by other apps or just used globally, so it should be available globally
.icon-talk {
background-image: var(--icon-spreed-app-dark-f2f2f2) !important;
}
.icon-clip-add-file {
background-image: var(--icon-spreed-clip-add-file-f2f2f2) !important;
}
.icon-menu-people,
.icon-menu-people-white {
background-image: var(--icon-spreed-menu-people-f2f2f2) !important;
}
.icon-grid-view {
background-image: var(--icon-spreed-grid-view-f2f2f2) !important;
}
.icon-promoted-view {
background-image: var(--icon-spreed-promoted-view-f2f2f2) !important;
}
.icon-folder-multiple-image {
background-image: var(--icon-spreed-folder-multiple-image-f2f2f2) !important;
}
.app-talk {
.icon-lobby {
background-image: var(--icon-spreed-lobby-f2f2f2) !important;
}
.icon-reply {
background-image: var(--icon-spreed-reply-f2f2f2) !important;
}
}
// Handle situations where a custom colour is used in the theming app that has a bad contrast with white
.app-talk .icon-start-call,
.talk-modal .icon-start-call,
#talk-panel .icon-start-call,
#talk-sidebar .icon-start-call,
#call-container .icon-start-call,
.talkChatTab .icon-start-call {
background-image: var(--icon-video-f2f2f2) !important;
}

48
css/apps/official/_tasks.scss
View File

@ -104,52 +104,4 @@
.sprt-subtasks-hidden {
filter: invert(95%);
}
.icon-list {
background-image: var(--icon-tasks-icon-list-f2f2f2) !important;
}
.icon-start {
background-image: var(--icon-tasks-icon-start-f2f2f2) !important;
}
.icon-due {
background-image: var(--icon-tasks-icon-due-f2f2f2) !important;
}
.icon-task-star {
background-image: var(--icon-tasks-icon-task-star-f2f2f2) !important;
}
.icon-alphabetically {
background-image: var(--icon-tasks-icon-alphabetically-f2f2f2) !important;
}
input[type="checkbox"].checkbox:checked + label::before {
background-image: var(--icon-checkmark-f2f2f2) !important;
}
.app-content > div .task-list .grouped-tasks .task-item .task-body .task-body-icons {
.icon-subtasks-visible {
background-image: var(--icon-tasks-icon-subtasks-visible-f2f2f2) !important;
}
.icon-subtasks-hidden {
background-image: var(--icon-tasks-icon-subtasks-hidden-f2f2f2) !important;
}
}
.app-content .header .sortorder {
.icon-list__up {
background-image: var(--icon-tasks-icon-list-up-f2f2f2) !important;
}
.icon-list__down {
background-image: var(--icon-tasks-icon-list-down-f2f2f2) !important;
}
.icon-manual {
background-image: var(--icon-tasks-icon-manual-f2f2f2) !important;
}
}
}

18
css/apps/thirdparty/_analytics.scss vendored
View File

@ -52,10 +52,6 @@
}
.app-analytics {
.filterVisualizationItem {
background-image: var(--icon-close-f2f2f2);
}
.analyticsWidgetItem {
background-color: var(--color-background-darker) !important;
@ -74,17 +70,3 @@
}
}
}
/* Icons -------------------------------------------------------------------- */
.icon-analytics-filter-add {
background-image: var(--icon-analytics-filteradd-f2f2f2) !important;
}
.icon-analytics-options {
background-image: var(--icon-analytics-options-f2f2f2) !important;
}
.icon-analytics-drilldown {
background-image: var(--icon-analytics-column-f2f2f2) !important;
}

34
css/apps/thirdparty/_audio-player.scss vendored
View File

@ -111,37 +111,3 @@
#audios_import .ui-progressbar .ui-progressbar-value {
background-color: var(--color-primary);
}
/* Icons -------------------------------------------------------------------- */
.app-audioplayer {
.sm2-inline-button.previous {
background-image: var(--icon-audioplayer-previous-f2f2f2) !important;
}
.play-pause,
.play-pause:hover,
.paused .play-pause:hover {
background-image: var(--icon-audioplayer-play-f2f2f2) !important;
}
.playing .play-pause {
background-image: var(--icon-audioplayer-pause-f2f2f2) !important;
}
.sm2-inline-button.next {
background-image: var(--icon-audioplayer-next-f2f2f2) !important;
}
.sm2-volume-control {
background-image: var(--icon-audioplayer-volume-f2f2f2) !important;
}
.sm2-inline-button.repeat {
background-image: var(--icon-audioplayer-repeat-f2f2f2) !important;
}
.sm2-inline-button.shuffle {
background-image: var(--icon-audioplayer-shuffle-f2f2f2) !important;
}
}

9
css/apps/thirdparty/_bbb.scss vendored
View File

@ -20,15 +20,6 @@
/* Icons -------------------------------------------------------------------- */
#bbb-react-root td .action-rename::after,
#bbb-react-root th .action-rename::after {
background-image: var(--icon-bbb-rename-f2f2f2) !important;
}
.icon-add-shortcut {
background-image: var(--icon-bbb-chain-plus-f2f2f2) !important;
}
.fileActionsMenu img[src$="/bbb/img/app-dark.svg"] {
filter: invert(95%);
}

19
css/apps/thirdparty/_collectives.scss vendored
View File

@ -67,25 +67,6 @@
/* Icons -------------------------------------------------------------------- */
.icon-collectives {
background-image: var(--icon-collectives-app-f2f2f2) !important;
}
.icon-access-time {
background-image: var(--icon-collectives-access-time-f2f2f2) !important;
}
.icon-sort-by-alpha {
background-image: var(--icon-collectives-sort-by-alpha-f2f2f2) !important;
}
.icon-pages-template,
.icon-pages-template-grey,
.icon-pages-template-dark-grey {
background-image: var(--icon-collectives-pages-template-000) !important;
filter: invert(95%);
}
.icon-pages-template-dark-grey {
opacity: 1 !important;
}

16
css/apps/thirdparty/_cookbook.scss vendored
View File

@ -48,19 +48,3 @@
opacity: 1;
}
}
/* Icons -------------------------------------------------------------------- */
.app-cookbook {
.app-navigation-new button {
background-image: var(--icon-add-f2f2f2) !important;
}
.icon-arrow-up {
background-image: var(--icon-triangle-n-f2f2f2) !important;
}
.icon-arrow-down {
background-image: var(--icon-triangle-s-f2f2f2) !important;
}
}

8
css/apps/thirdparty/_flow-upload.scss vendored
View File

@ -14,11 +14,3 @@
border-top-color: var(--color-border);
}
}
/* Icons -------------------------------------------------------------------- */
.app-flowupload {
.icon-file.select-file-icon {
background-image: var(--icon-text-f2f2f2) !important;
}
}

4
css/apps/thirdparty/_gpxedit.scss vendored
View File

@ -42,10 +42,6 @@
.toplink:hover {
color: var(--color-text-link);
}
.marker-select {
background: var(--icon-triangle-s-000) no-repeat right 4px center;
}
}
.app-gpxedit .leaflet-container {

37
css/apps/thirdparty/_ojsxc.scss vendored
View File

@ -268,43 +268,6 @@
}
}
.jsxc-icon--more-dark {
background-image: var(--icon-more-f2f2f2);
transform: rotate(0.25turn);
}
.jsxc-icon--delete {
background-image: var(--icon-delete-f2f2f2);
&:hover {
background-image: var(--icon-delete-da4453);
}
}
.jsxc-icon--edit {
background-image: var(--icon-rename-f2f2f2);
}
.jsxc-icon--info {
background-image: var(--icon-info-f2f2f2);
}
.jsxc-icon--help {
background-image: var(--icon-ojsxc-help-f2f2f2);
}
.jsxc-icon--contact {
background-image: var(--icon-ojsxc-contact-f2f2f2);
}
.jsxc-icon--groupcontact {
background-image: var(--icon-ojsxc-groupcontact-f2f2f2);
}
.jsxc-icon--setting {
background-image: var(--icon-ojsxc-gear-f2f2f2);
}
.jsxc-icon--menu-dark,
.jsxc-waiting::before,
.jsxc-icon--emoticon,

8
css/apps/thirdparty/_passwords.scss vendored
View File

@ -148,11 +148,3 @@
border-color: var(--color-primary-element);
}
}
/* Icons -------------------------------------------------------------------- */
.app-passwords {
#controls .breadcrumb .crumb .home {
background-image: var(--icon-home-f2f2f2) !important;
}
}

19
css/apps/thirdparty/_quicknotes.scss vendored
View File

@ -26,22 +26,3 @@
box-shadow: none;
}
}
/* Icons -------------------------------------------------------------------- */
// Change icons to black as the contrast with white is really bad
.app-quicknotes {
.icon-checkmark {
background-image: var(--icon-checkmark-000) !important;
}
.quicknote .icon-delete {
background-image: var(--icon-delete-000) !important;
&:hover,
&:focus {
background-image: var(--icon-delete-da4453) !important;
opacity: 1 !important;
}
}
}

28
css/base/_elements.scss
View File

@ -29,6 +29,22 @@ input[type="submit"] {
}
}
.button-vue.button-vue--vue-secondary {
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;
}
}
/* Input Fields -------------------------------------------------------------- */
// div.select2-drop .select2-search input:not(:disabled):not(.primary):active,
@ -56,16 +72,12 @@ textarea:not(:disabled) {
.multiselect__input {
background-color: inherit !important;
}
&.multiselect--active .multiselect__input {
background-color: var(--color-background-darker) !important;
}
}
input[type="text"] + .icon-confirm,
input[type="password"] + .icon-confirm,
input[type="email"] + .icon-confirm {
background-color: var(--color-background-darker) !important;
.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;
}
/* Action items -------------------------------------------------------------- */

3295
css/server-automatic.css Normal file
View File

File diff suppressed because it is too large Load Diff

3393
css/server.css Normal file
View File

File diff suppressed because it is too large Load Diff

4
css/server.scss
View File

@ -27,9 +27,7 @@
*/
// General and Nextcloud Core
@import "variables/functions";
@import "variables/color-variables";
@import "variables/icon-variables";
@import "base/elements";
@import "server/server";
@import "apps/apps";
@ -40,7 +38,6 @@
@import "apps/core/files";
@import "apps/core/firstrunwizard";
@import "apps/core/notifications";
@import "apps/core/photos";
@import "apps/core/text";
// Official Apps
@import "apps/official/announcement-center";
@ -59,7 +56,6 @@
@import "apps/official/notes";
@import "apps/official/retention";
@import "apps/official/richdocuments";
@import "apps/official/social";
@import "apps/official/spreed";
@import "apps/official/tasks";
// Third party apps

536
css/server/_icons.scss
View File

@ -4,462 +4,8 @@
* @license GNU AGPL version 3 or any later version, see COPYING file for more.
*/
/* Places ------------------------------------------------------------------- */
.icon-home,
#oc-dialog-filepicker-content .dirtree div:first-child a {
background-image: var(--icon-home-f2f2f2) !important;
}
.icon-contacts,
.icon-contacts-dark {
background-image: var(--icon-contacts-f2f2f2) !important;
}
.icon-link {
background-image: var(--icon-link-f2f2f2) !important;
}
.icon-calendar,
.icon-calendar-dark {
background-image: var(--icon-calendar-f2f2f2) !important;
}
.icon-picture {
background-image: var(--icon-picture-f2f2f2) !important;
}
.icon-files,
.icon-files-dark {
background-image: var(--icon-files-f2f2f2) !important;
}
/* Filetypes ---------------------------------------------------------------- */
.icon-text,
.icon-description {
background-image: var(--icon-text-f2f2f2) !important;
}
.icon-folder {
background-image: var(--icon-folder-0082c9) !important;
}
/* Clients ------------------------------------------------------------------ */
.icon-desktop {
background-image: var(--icon-desktop-f2f2f2) !important;
}
.icon-phone {
background-image: var(--icon-phone-f2f2f2) !important;
}
.icon-tablet {
background-image: var(--icon-tablet-f2f2f2) !important;
}
/* User Status -------------------------------------------------------------- */
.icon-user-status {
background-image: var(--icon-user_status-app-f2f2f2) !important;
}
.icon-user-status-invisible {
background-image: var(--icon-user_status-user-status-invisible-f2f2f2) !important;
}
/* Weather Status ----------------------------------------------------------- */
.icon-weather-status {
background-image: var(--icon-weather_status-app-f2f2f2) !important;
}
/* Categories --------------------------------------------------------------- */
.icon-category-installed {
background-image: var(--icon-user-f2f2f2) !important;
}
.icon-category-enabled {
background-image: var(--icon-checkmark-f2f2f2) !important;
}
.icon-category-disabled {
background-image: var(--icon-close-f2f2f2) !important;
}
.icon-category-app-bundles {
background-image: var(--icon-bundles-f2f2f2) !important;
}
.icon-category-customization {
background-image: var(--icon-customization-f2f2f2) !important;
}
.icon-category-files {
background-image: var(--icon-files-f2f2f2) !important;
}
.icon-category-games {
background-image: var(--icon-games-f2f2f2) !important;
}
.icon-category-integration {
background-image: var(--icon-integration-f2f2f2) !important;
}
.icon-category-monitoring {
background-image: var(--icon-monitoring-f2f2f2) !important;
}
.icon-category-multimedia {
background-image: var(--icon-multimedia-f2f2f2) !important;
}
.icon-category-office {
background-image: var(--icon-office-f2f2f2) !important;
}
.icon-category-organization {
background-image: var(--icon-organization-f2f2f2) !important;
}
.icon-category-search {
background-image: var(--icon-search-f2f2f2) !important;
}
.icon-category-security {
background-image: var(--icon-password-f2f2f2) !important;
}
.icon-category-social {
background-image: var(--icon-social-f2f2f2) !important;
}
.icon-category-tools {
background-image: var(--icon-settings-dark-f2f2f2) !important;
}
.icon-category-workflow {
background-image: var(--icon-workflow-f2f2f2) !important;
}
.icon-category-auth {
background-image: var(--icon-auth-f2f2f2) !important;
}
.icon-category-dashboard {
background-image: var(--icon-dashboard-f2f2f2) !important;
}
/* Actions ------------------------------------------------------------------ */
.icon-star,
.icon-star-dark,
.icon-starred:hover,
.icon-starred:focus,
.icon-favorite {
background-image: var(--icon-star-dark-f2f2f2) !important;
}
.icon-search,
div.select2-drop .select2-search input {
background-image: var(--icon-search-f2f2f2) !important;
}
.icon-password {
background-image: var(--icon-password-f2f2f2) !important;
}
.icon-settings,
.icon-settings-dark,
#app-settings-header .settings-button {
background-image: var(--icon-settings-dark-f2f2f2);
}
.icon-rename {
background-image: var(--icon-rename-f2f2f2) !important;
}
.icon-delete {
background-image: var(--icon-delete-f2f2f2) !important;
&:hover,
&:focus {
background-image: var(--icon-delete-da4453) !important;
}
}
.icon-public {
background-image: var(--icon-public-f2f2f2) !important;
}
.icon-upload {
background-image: var(--icon-upload-f2f2f2) !important;
}
.icon-add {
background-image: var(--icon-add-f2f2f2) !important;
}
.icon-share,
.icon-shared {
background-image: var(--icon-share-f2f2f2) !important;
}
.icon-external {
background-image: var(--icon-external-f2f2f2) !important;
}
.icon-tag {
background-image: var(--icon-tag-f2f2f2) !important;
}
.icon-download {
background-image: var(--icon-download-f2f2f2) !important;
}
.icon-details {
background-image: var(--icon-details-f2f2f2) !important;
}
.icon-info {
background-image: var(--icon-info-f2f2f2) !important;
}
.icon-clippy {
background-image: var(--icon-clippy-f2f2f2) !important;
}
.icon-comment {
background-image: var(--icon-comment-f2f2f2) !important;
}
.icon-quota {
background-image: var(--icon-quota-f2f2f2) !important;
}
.icon-triangle-n {
background-image: var(--icon-triangle-n-f2f2f2) !important;
}
.icon-triangle-s,
select,
#app-navigation:not(.vue) .collapsible::before,
div.select2-container a.select2-choice .select2-arrow b {
background-image: var(--icon-triangle-s-f2f2f2) !important;
}
.icon-more,
.icon-more-white,
#app-navigation:not(.vue)
.app-navigation-entry-utils
.app-navigation-entry-utils-menu-button
button:not([class^="icon-"]):not([class*=" icon-"]) {
background-image: var(--icon-more-f2f2f2) !important;
}
.icon-toggle-filelist {
background-image: var(--icon-toggle-filelist-f2f2f2) !important;
}
.icon-toggle-pictures {
background-image: var(--icon-toggle-pictures-f2f2f2) !important;
}
.icon-history {
background-image: var(--icon-history-f2f2f2) !important;
}
.icon-edit {
background-image: var(--icon-edit-f2f2f2) !important;
}
.icon-close,
.oc-dialog-close,
.toastify.toast .toast-close {
background-image: var(--icon-close-f2f2f2) !important;
}
.icon-fullscreen {
background-image: var(--icon-fullscreen-f2f2f2) !important;
}
.icon-user {
background-image: var(--icon-user-f2f2f2) !important;
}
.icon-timezone {
background-image: var(--icon-timezone-f2f2f2) !important;
}
.icon-toggle,
#personal-show + label,
#show + label,
#dbpassword + label {
background-image: var(--icon-toggle-f2f2f2) !important;
}
.icon-error {
background-image: var(--icon-error-f2f2f2) !important;
}
.icon-checkmark,
.multiselect.multiselect--multiple .multiselect__content-wrapper li > span::before {
background-image: var(--icon-checkmark-f2f2f2) !important;
}
.icon-user-admin {
background-image: var(--icon-user-admin-f2f2f2) !important;
}
.icon-arrow-right,
.icon-view-next {
background-image: var(--icon-arrow-right-f2f2f2) !important;
}
.icon-arrow-left,
.icon-view-previous {
background-image: var(--icon-arrow-left-f2f2f2) !important;
}
.icon-mail {
background-image: var(--icon-mail-f2f2f2) !important;
}
.icon-address {
background-image: var(--icon-address-f2f2f2) !important;
}
.icon-group {
background-image: var(--icon-group-f2f2f2) !important;
}
.icon-menu {
background-image: var(--icon-menu-f2f2f2) !important;
}
.icon-menu-sidebar {
background-image: var(--icon-menu-sidebar-f2f2f2) !important;
}
.icon-projects {
background-image: var(--icon-projects-f2f2f2) !important;
}
.icon-sound {
background-image: var(--icon-sound-f2f2f2) !important;
}
.icon-sound-off {
background-image: var(--icon-sound-off-f2f2f2) !important;
}
.icon-audio {
background-image: var(--icon-audio-f2f2f2) !important;
}
.icon-audio-off {
background-image: var(--icon-audio-off-f2f2f2) !important;
}
.icon-video {
background-image: var(--icon-video-f2f2f2) !important;
}
.icon-video-off {
background-image: var(--icon-video-off-f2f2f2) !important;
}
.icon-screen {
background-image: var(--icon-screen-f2f2f2) !important;
}
.icon-screen-off {
background-image: var(--icon-screen-off-f2f2f2) !important;
}
.icon-caret,
.icon-caret-dark {
background-image: var(--icon-caret-f2f2f2) !important;
}
.icon-disabled-user {
background-image: var(--icon-disabled-user-f2f2f2) !important;
}
.icon-disabled-users {
background-image: var(--icon-disabled-users-f2f2f2) !important;
}
.icon-confirm {
background-image: var(--icon-confirm-f2f2f2) !important;
}
.icon-confirm-fade {
background-image: var(--icon-confirm-fade-f2f2f2) !important;
}
.icon-play {
background-image: var(--icon-play-f2f2f2) !important;
}
.icon-play-next {
background-image: var(--icon-play-next-f2f2f2) !important;
}
.icon-pause {
background-image: var(--icon-pause-f2f2f2) !important;
}
/* Privacy ------------------------------------------------------------------ */
.icon-control {
background-image: var(--icon-privacy-control-f2f2f2) !important;
}
.icon-knowledge {
background-image: var(--icon-privacy-knowledge-f2f2f2) !important;
}
.icon-freedom {
background-image: var(--icon-privacy-freedom-f2f2f2) !important;
}
/* Federated file sharing --------------------------------------------------- */
.social-facebook {
background-image: var(--icon-federatedfilesharing-social-facebook-f2f2f2) !important;
}
.social-twitter {
background-image: var(--icon-federatedfilesharing-social-twitter-f2f2f2) !important;
}
.social-diaspora {
background-image: var(--icon-federatedfilesharing-social-diaspora-f2f2f2) !important;
}
.icon-social-diaspora {
filter: invert(95%);
}
.icon-social-facebook {
filter: invert(95%);
}
.icon-social-twitter {
filter: invert(95%);
}
/* Apps that haven't moved to variables for icons ---------------------------- */
// Share by email
.icon-social-email {
background-image: var(--icon-mail-000) !important;
}
// OnlyOffice
.icon-onlyoffice-open,
.icon-onlyoffice-convert,
@ -479,96 +25,16 @@ div.select2-container a.select2-choice .select2-arrow b {
}
.app-settings {
// Navigation in settings
#app-navigation li a img {
filter: invert(95%) !important;
}
#apps-list .section .app-image .app-icon,
#apps-list-search .section .app-image .app-icon,
#app-sidebar #app-details-view image.app-icon {
filter: invert(5%);
}
#apps-list .section .app-image .app-icon[*|href$="circles.svg"],
#app-sidebar #app-details-view image.app-icon[*|href$="circles.svg"],
#apps-list .section .app-image .app-icon[*|href$="contacts.svg"],
#app-sidebar #app-details-view image.app-icon[*|href$="contacts.svg"] {
#app-sidebar #app-details-view image.app-icon[*|href$="circles.svg"] {
filter: invert(1);
}
// Support submenu -> system information
.system-information div img[src$="/apps/support/img/system-info.svg"] {
filter: invert(95%);
}
.infoicon {
filter: invert(95%);
}
}
#settings #expanddiv li a img {
filter: invert(95%);
}
// Icons in the global notifications dropdown
.notification-icon {
filter: invert(95%);
}
// Client icons under Settings > Personal > Mobile & Desktop
.clientslinks img.appsmall {
filter: invert(95%);
}
// Two Factor Icons in Personal Settings
img.two-factor-provider-settings-icon,
.icon-u2f-device {
filter: invert(95%);
}
// Invert icon for version history in app sidebar
.downloadVersion img[src$="download.svg"],
.revertVersion img[src$="history.svg"] {
filter: invert(95%);
}
// Change the app icons in the navigation menu to white
#navigation .app-icon {
filter: none;
}
// Arrow in advanved ldap settings and
// Little help icon
#ldapSettings .ui-accordion .ui-accordion-header .ui-accordion-header-icon,
#ldapSettings img[src$="info.svg"] {
filter: invert(95%);
}
// Icons in contacts menu
#contactsmenu-menu #contactsmenu-contacts .contact > a > img {
filter: invert(95%);
}
// Audio player: Play option in right click menu in files
.menuitem.action.action-audio img[src$="sound.svg"] {
filter: invert(95%);
}
// Fix icon colors for workflow page
#workflowengine .actions__item:not(.colored) .icon:not(.icon-invert) {
filter: invert(5%) !important;
}
#workflowengine .section.rule .trigger .event .option__icon {
filter: invert(95%);
}
// Force folder icon in app settings to be default blue, when theming app is disabled
.app-settings .icon-folder {
background-image: var(--icon-folder-0082c9) !important;
}
/* Random CSS fixes for icons ----------------------------------------------- */
// Fix avatars with dot menu being covered in dots. The dot icon is being handled

18
css/server/_server.scss
View File

@ -6,16 +6,6 @@
/* Header -------------------------------------------------------------------- */
#header {
background-color: var(--color-background-darker) !important;
background-image: unset !important;
}
#header .header-left > nav > .menu::after,
#header .header-right > div > .menu::after {
border-bottom-color: var(--color-border);
}
#settings #expand:hover #expandDisplayName,
#settings #expand:focus #expandDisplayName,
#settings #expand:active #expandDisplayName,
@ -35,7 +25,8 @@
.popovermenu,
.bubble,
.popover,
.app-navigation-entry-menu {
.app-navigation-entry-menu,
.v-popper__popper .v-popper__inner {
border: 1px solid var(--color-border);
}
@ -201,11 +192,6 @@
.toastify.dialogs {
border: 1px solid var(--color-border);
.toast-close,
.toast-undo-button.toast-close {
background-image: var(--icon-close-f2f2f2) !important;
}
}
/* App Store ---------------------------------------------------------------- */

27
css/settings.css Normal file
View File

@ -0,0 +1,27 @@
.preview-list {
display: flex;
flex-direction: column;
max-width: 800px;
}
.preview {
display: flex;
justify-content: flex-start;
margin-top: 3em;
position: relative;
}
.preview .preview-image {
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
border-radius: var(--border-radius);
flex-basis: 200px;
flex-shrink: 0;
margin-right: 1em;
}
.preview .preview-description {
display: flex;
flex-direction: column;
}

3
css/variables/_color-variables.scss
View File

@ -4,7 +4,7 @@
* @license GNU AGPL version 3 or any later version, see COPYING file for more.
*/
:root {
[data-themes*="breezedark"] {
// Primary Breeze colours
--color-paper-white: rgba(252, 252, 252, 1);
--color-cardboard-gray: rgba(239, 240, 241, 1);
@ -45,6 +45,7 @@
--color-background-dark: var(--color-main-background) !important;
--color-background-darker: var(--color-shade-black) !important;
--color-background-translucent: var(--color-dashboard-grey) !important;
--color-background-plain: var(--color-shade-black) !important;
--color-primary: var(--color-plasma-blue) !important;
--color-primary-light: var(--color-primary) !important;

33
css/variables/_functions.scss
View File

@ -1,33 +0,0 @@
/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
* @copyright Copyright (c) 2019, Magnus Walbeck (mw@mwalbeck.org)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
@mixin icon-color-theming($icon, $dir, $color, $version: 1, $core: false) {
$color: remove-hash-from-color($color);
/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
$var-name: "--icon-#{$dir}-#{$icon}-#{$color}";
@if $core {
$var-name: "--icon-#{$icon}-#{$color}";
}
/* stylelint-disable-next-line function-url-quotes */
#{$var-name}: url(icon-color-path($icon, $dir, $color, $version, $core));
}

317
css/variables/_icon-variables.scss
View File

@ -1,317 +0,0 @@
/***
* @copyright Copyright (c) 2017, Magnus Walbeck <mw@mwalbeck.org>
*
* @license GNU AGPL version 3 or any later version, see COPYING file for more.
*/
/* Icon variables ----------------------------------------------------------- */
// Color variables for icons
$icon-normal: #f2f2f2;
$icon-error: #da4453;
$icon-success: #27ae60;
:root {
// Manual icons
// Mail
--icon-mail-inbox-f2f2f2: var(--icon-home-f2f2f2);
--icon-mail-trash-f2f2f2: var(--icon-delete-f2f2f2);
// // News
--icon-news-unpinned-f2f2f2: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnIGZpbGw9IiNmMmYyZjIiPgogIDxyZWN0IHg9IjIuODI1MSIgeT0iLjQxMjU1IiB3aWR0aD0iMTAuMzUiIGhlaWdodD0iMS4xODgxIiByeT0iLjE4ODkiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSIjZjJmMmYyIiBzdHJva2Utd2lkdGg9Ii42ODA4NHB4Ii8+CiAgPHBhdGggZD0ibTUuMTI4NyAxLjkxMzNoNS43NDI2bC0wLjE4ODkgNi44MDA1aC01LjM0NTl6Ii8+CiAgPHBhdGggZD0ibTMuMTM1OCA4LjQzMDVoOS43Mjg1YzEuMjI3OSAwLjQ1MzM2IDEuMzAzNCAxLjQzNTcgMS4zMDM0IDEuNDM1N2gtMTIuMzM1czAuMDM3NzgtMC45NjM0IDEuMzAzNC0xLjQzNTd6Ii8+CiAgPHJlY3QgeD0iNy41MTgzIiB5PSI4LjYxMDUiIHdpZHRoPSIuOTYzNCIgaGVpZ2h0PSI3LjMxNzQiLz4KIDwvZz4KPC9zdmc+Cg==");
--icon-news-pinned-f2f2f2: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnIGZpbGw9IiNmMmYyZjIiPgogIDxyZWN0IHg9IjIuODI1MSIgeT0iLjQxMjU1IiB3aWR0aD0iMTAuMzUiIGhlaWdodD0iMS4xODgxIiByeT0iLjE4ODkiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSIjZjJmMmYyIiBzdHJva2Utd2lkdGg9Ii42ODA4NHB4Ii8+CiAgPHBhdGggZD0ibTUuMTI4NyAxLjkxMzNoNS43NDI2bC0wLjE4ODkgNi44MDA1aC01LjM0NTl6Ii8+CiAgPHBhdGggZD0ibTMuMTM1OCA4LjQzMDVoOS43Mjg1YzEuMjI3OSAwLjQ1MzM2IDEuMzAzNCAxLjQzNTcgMS4zMDM0IDEuNDM1N2gtMTIuMzM1czAuMDM3NzgtMC45NjM0IDEuMzAzNC0xLjQzNTd6Ii8+CiAgPHJlY3QgeD0iNy41MTgzIiB5PSI5Ljc4NiIgd2lkdGg9Ii45NjM0IiBoZWlnaHQ9IjQuOTY2NSIvPgogIDxyZWN0IHg9IjEuMTc0NCIgeT0iMTIuMTgiIHdpZHRoPSIxMy42NTEiIGhlaWdodD0iMS4zODkyIi8+CiA8L2c+Cjwvc3ZnPgo=");
--icon-news-nonfulltext-f2f2f2: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZlcnNpb249IjEuMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxwYXRoIGQ9Im0zIDJjLTAuNTU0IDAtMSAwLjQ0Ni0xIDF2MmMwIDAuNTU0IDAuNDQ2IDEgMSAxaDI2YzAuNTU0IDAgMS0wLjQ0NiAxLTF2LTJjMC0wLjU1NC0wLjQ0Ni0xLTEtMWgtMjZ6IiBmaWxsPSIjZjJmMmYyIi8+CiA8cGF0aCBkPSJtMyAxMGMtMC41NTQgMC0xIDAuNDQ2LTEgMXYyYzAgMC41NTQgMC40NDYgMSAxIDFoMThjMC41NTQgMCAxLTAuNDQ2IDEtMXYtMmMwLTAuNTU0LTAuNDQ2LTEtMS0xaC0xOHoiIGZpbGw9IiNmMmYyZjIiLz4KPC9zdmc+Cg==");
--icon-news-fulltext-f2f2f2: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZlcnNpb249IjEuMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxwYXRoIGQ9Im0zIDJjLTAuNTU0IDAtMSAwLjQ0Ni0xIDF2MmMwIDAuNTU0IDAuNDQ2IDEgMSAxaDI2YzAuNTU0IDAgMS0wLjQ0NiAxLTF2LTJjMC0wLjU1NC0wLjQ0Ni0xLTEtMWgtMjZ6bTAgOGMtMC41NTQgMC0xIDAuNDQ2LTEgMXYyYzAgMC41NTQgMC40NDYgMSAxIDFoMThjMC41NTQgMCAxLTAuNDQ2IDEtMXYtMmMwLTAuNTU0LTAuNDQ2LTEtMS0xaC0xOHptMCA4Yy0wLjU1NCAwLTEgMC40NDYtMSAxdjJjMCAwLjU1NCAwLjQ0NiAxIDEgMWgyNGMwLjU1NCAwIDEtMC40NDYgMS0xdi0yYzAtMC41NTQtMC40NDYtMS0xLTFoLTI0em0wIDhjLTAuNTU0IDAtMSAwLjQ0Ni0xIDF2MmMwIDAuNTU0IDAuNDQ2IDEgMSAxaDEyYzAuNTU0IDAgMS0wLjQ0NiAxLTF2LTJjMC0wLjU1NC0wLjQ0Ni0xLTEtMWgtMTJ6IiBmaWxsPSIjZjJmMmYyIi8+Cjwvc3ZnPgo=");
--icon-news-updatemodedefault-f2f2f2: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkzLjQyMiAtNDY2LjY2KSIgZmlsbD0iI2YyZjJmMiI+CiAgPHBhdGggZD0ibS04My44OTcgNDY4Ljc0Yy0zLjk1MDIgMC02LjUzNDkgMy40NDY5LTYuMzY0MyA2LjcyMTNoLTIuMTYwOGwzLjkwNCAzLjkxNzQgNC4wODEzLTMuODcyMmgtMi4xNDg5Yy0wLjIzNzA1LTEuNzAwOSAxLjE2MzUtMy4xMTQ1IDIuNjg4Ny0zLjA5MjEgMS41OTY1IDAuMDIzNSAyLjgwMDYgMS4yMjkyIDIuODAwNiAyLjczMzQgMC4wODk2MSAxLjU5MzgtMS42Mjk0IDMuNDI3OS0zLjk2NTQgMi41MzE3LTguM2UtNSAxLjIyODEgMC4wMDI3IDIuNTQzOSAwIDMuNzY0IDQuMTg5NCAwLjgyODk2IDcuNjM5OC0yLjUwOTUgNy42Mzk4LTYuMjUwOSAwLTMuNTYyMS0yLjkxODgtNi40NTI1LTYuNDc0OS02LjQ1MjV6IiBmaWxsPSIjZjJmMmYyIi8+CiA8L2c+Cjwvc3ZnPgo=");
--icon-news-updatemodeunread-f2f2f2: var(--icon-news-updatemodedefault-000);
// Deck
--icon-deck-filter_set-f2f2f2: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0LjIzMyA0LjIzMyIgaGVpZ2h0PSIxNiIgd2lkdGg9IjE2Ij48cGF0aCBkPSJNLjUyLjQ2NWgzLjI4M0wyLjYzMSAxLjkxOGgtLjk5em0xLjEyMiAxLjQ1M2guOTkydjEuODY2bC0uOTk2LS40NTV6IiBwYWludC1vcmRlcj0ic3Ryb2tlIGZpbGwgbWFya2VycyIgZmlsbD0iI2YyZjJmMiIvPjxlbGxpcHNlIHJ5PSIuNjkxIiByeD0iLjY3NCIgY3k9IjMuNDYxIiBjeD0iMy40NSIgZmlsbD0iI2YyZjJmMiIvPjwvc3ZnPgo=");
// ojsxc - icons from here https://github.com/jsxc/jsxc
// color changed to #f2f2f2 and convert to base64
--icon-ojsxc-help-f2f2f2: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHRleHQgc3R5bGU9ImxpbmUtaGVpZ2h0OjEyNSU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpBYnlzc2luaWNhIFNJTCIgeD0iMi40NDQiIHk9IjEwNTEuNzM5IiBmb250LXNpemU9IjEuODA4IiBmb250LXdlaWdodD0iNDAwIiBsZXR0ZXItc3BhY2luZz0iMCIgd29yZC1zcGFjaW5nPSIwIiBmb250LWZhbWlseT0iQWJ5c3NpbmljYSBTSUwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTEwMzYuMzYyKSIgZmlsbD0iI2YyZjJmMiI+PHRzcGFuIHg9IjIuNDQ0IiB5PSIxMDUxLjczOSIgZm9udC1zaXplPSIyMi41OTkiPj88L3RzcGFuPjwvdGV4dD48L3N2Zz4=");
--icon-ojsxc-contact-f2f2f2: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDAwMCA0NDAwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaW4gbWVldCIgd2lkdGg9IjQ0IiBoZWlnaHQ9IjQ0Ij48cGF0aCBkPSJNMjIwMDYuMTEyIDBjLTIzMTUuODIzIDEyOC42NzgtNDMwOS4yMDMgOTk3LjM5NS01OTgxLjc0MyAyNjA1LjY2NC0xNjcyLjUzOSAxNjA4LjIyNS0yODMwLjg4OCAzNTA1LjAzNC0zNDc0LjE3MyA1NjkyLjE5Ny03NzEuOTQxIDI5NTkuMTQtNTE0LjUzIDU5ODIuMTUzIDc3Mi4wMzggOTA2OS45MjYgMTAyOS4yNTUgMTkyOS44NTIgMjM4MC42NjQgMzQ3NC4yOTMgNDA1My4yMDMgNDYzMi4yMTNsLTM2NjcuMTgzIDE3MzcuMDgtOTY0OC45MjYgNDQzOS4yMTljLTEwMjkuMjU1IDUxNC42MjEtMTU0NC4wNzggMTM0OS42NzQtMTU0NC4wNzggMjUwNy41OTR2OTA3MS40MzJDMjM4Ni41OTQgNDI0NTcuMTEgMzE1OC44MjYgNDM4NzEuMzIyIDQ4MzEuMzY2IDQ0MDAwaDM0NTQ0LjA1OGM3NzEuOTQxLTI1Ny4zMTEgMTMxOC45MDctNjQzLjQzMiAxNjQwLjU4Mi0xMTU4LjA1MyAzMjEuNjc0LTUxNC42NjYgNDgyLjUyNC05MzIuOTkgNDgyLjUyNC0xMjU0LjU3M1YzMDY4My44OTNjMC0xMTU3LjkyLTQ1MC40Ny0xOTI4LjYxMi0xMzUxLjA2Ny0yMzE0LjU1NmwtOTI2Mi45MDctNDYzMi4yNTctNDA1My4yMDMtMTkzMC4wNzRjMjQ0NC40ODEtMTQxNS4yMzEgNDA1My4zLTM4NTkuMDg1IDQ4MjUuMjQxLTczMzIuODQ2IDUxNC42MjgtMTkyOS44NTMgNTE0LjYyOC0zOTI0Ljc3NSAwLTU5ODMuMjYtNjQzLjI4My0yMzE1Ljg0MS0xODMzLjg0My00Mjc3LjAxLTM1NzAuNjc4LTU4ODUuMjM2QzI2MzQ5LjA4MiA5OTcuMzk0IDI0MzIyLjAwMiAxMjguNjc4IDIyMDA2LjExMiAwem0tMTYyNi41NzMgMjYxMTcuMDE2aDMxMzcuOTYzdjUzNTQuNDQ2aDU0NTcuMTkydjMxNjcuNTQ4aC01NDU3LjE5MnY1MzcwLjAzOGgtMzEzNy45NjNWMzQ2MzkuMDFoLTUzNTQuNDYxdi0zMTY3LjU0OGg1MzU0LjQ2MXoiIGZpbGw9IiNmMmYyZjIiLz48L3N2Zz4=");
--icon-ojsxc-groupcontact-f2f2f2: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAwIDEwMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiIHN0eWxlPSJ3aWR0aDo1MTJweDtoZWlnaHQ6NTEycHgiPjxwYXRoIGQ9Ik00OTcuNjg4IDE3Mi40NjljLTM2LjM0NyAyLjAxOS02Ny42NTYgMTUuNjMzLTkzLjkwNyA0MC44NzUtMjYuMjUgMjUuMjQxLTQ0LjQwMyA1NS4wNDctNTQuNSA4OS4zNzUtMTIuMTE1IDQ2LjQ0My04LjA5OSA5My44OCAxMi4wOTQgMTQyLjM0NCAxNi4xNTQgMzAuMjg5IDM3LjM3NCA1NC41MTQgNjMuNjI1IDcyLjY4N2wtNTcuNTYzIDI3LjI4MUwyMTYgNjE0LjY4OGMtMTYuMTU0IDguMDc3LTI0LjIxOSAyMS4yMDEtMjQuMjE5IDM5LjM3NXYxNDIuMzQzYy0yLjAxOSA0Mi40MDUgMTAuMDkzIDY0LjYzNyAzNi4zNDQgNjYuNjU3aDU0Mi4xNTZjMTIuMTE2LTQuMDM5IDIwLjcwMi0xMC4xMSAyNS43NS0xOC4xODggNS4wNDktOC4wNzcgNy41OTQtMTQuNjQgNy41OTQtMTkuNjg4VjY1NC4wNjNjMC0xOC4xNzMtNy4wODQtMzAuMjg1LTIxLjIxOS0zNi4zNDNMNjM3LjAzMSA1NDUuMDNsLTYzLjYyNS0zMC4zMTJjMzguMzY2LTIyLjIxMiA2My42MDMtNjAuNTc0IDc1LjcxOS0xMTUuMDk0IDguMDc3LTMwLjI5IDguMDc3LTYxLjU5OCAwLTkzLjkwNi0xMC4wOTYtMzYuMzQ3LTI4Ljc3Mi02Ny4xMzQtNTYuMDMxLTkyLjM3NS0yNy4yNi0yNS4yNDItNTkuMDU5LTM4Ljg1Ni05NS40MDctNDAuODc1ek0yNDYuMjggMjM5LjA5NGMtMzguMzY2IDIuMDE5LTY4LjYzMSAxNy42NTgtOTAuODQ0IDQ2LjkzNy0yMi4yMTIgMjkuMjgtMzMuMzQzIDYyLjA5LTMzLjM0MyA5OC40MzggMi4wMTkgNjIuNTk3IDI0LjI1MSAxMDcuMDMgNjYuNjU2IDEzMy4yODFMMTYuMDk0IDU5Ni41QzUuOTk3IDYwMi41NTguOTM3IDYxMi42NDYuOTM3IDYyNi43ODF2MTM2LjMxM2MwIDIyLjIxMiA5LjEwOCAzMy4zMTIgMjcuMjgyIDMzLjMxMkgxNDAuMjhWNjU0LjA2M2MwLTE4LjE3NCA0LjUzOC0zNC44MjUgMTMuNjI1LTQ5Ljk3IDkuMDg3LTE1LjE0MyAyMS43MjEtMjYuNzY1IDM3Ljg3NS0zNC44NDNsMTE1LjA5NC01NC41MzFjMTAuMDk2LTYuMDU4IDE4LjE2LTEzLjExIDI0LjIxOS0yMS4xODgtMTIuMTE2LTE4LjE3My0yMi4yMDQtMzkuMzkzLTMwLjI4MS02My42MjUtOC4wNzgtMjQuMjMxLTEyLjEyNS00OS40NjgtMTIuMTI1LTc1LjcxOSAwLTE2LjE1NCAyLjAyMy0zMi4zMTQgNi4wNjItNDguNDY4IDQuMDM5LTE2LjE1NCA5LjA5OC0zMS4yNzIgMTUuMTU2LTQ1LjQwNi0yMC4xOTItMTQuMTM1LTQxLjQxMy0yMS4yMi02My42MjUtMjEuMjJ6bTUwOC44NzUgMGMtMjIuMjEyIDAtNDQuNDQ0IDcuMDg0LTY2LjY1NiAyMS4yMTkgMTIuMTE2IDMwLjI4OSAxOC4xODggNjEuNTY2IDE4LjE4OCA5My44NzUgMCA1MC40ODEtMTMuMTI1IDk2LjkzOC0zOS4zNzUgMTM5LjM0MyA4LjA3NyA4LjA3NyAxOC4xNjUgMTYuMTQyIDMwLjI4IDI0LjIxOSAxMi4xMTYgOC4wNzcgMjMuMjE3IDE0LjE0OSAzMy4zMTMgMTguMTg4IDEwLjA5NyA0LjAzOCAyMy4yMjEgOS41ODggMzkuMzc1IDE2LjY1NnMyOC4yNjcgMTIuNjE3IDM2LjM0NCAxNi42NTZjMTYuMTU0IDguMDc3IDI4Ljc4OCAxOS42OTkgMzcuODc1IDM0Ljg0NHMxMy42MjUgMzEuNzk2IDEzLjYyNSA0OS45Njh2MTQyLjM0NGgxMTUuMDk0YzE4LjE3My0yLjAxOSAyNy4yODEtMTMuMTIgMjcuMjgxLTMzLjMxMlY2MjYuNzhjMC0xNC4xMzUtNS4wNi0yNC4yMjMtMTUuMTU2LTMwLjI4MWwtMTY5LjYyNS04MS43ODFjNDIuNDA1LTMwLjI5IDYzLjYyNS03My43MSA2My42MjUtMTMwLjI1IDAtMzguMzY2LTEyLjExMy03Mi4xNTktMzYuMzQ0LTEwMS40MzgtMjQuMjMxLTI5LjI3OS01My41MTYtNDMuOTM2LTg3Ljg0NC00My45Mzd6TTQ3NC42MjUgNTg0Ljg3NWg0OS4xNTZ2ODMuOTA2aDg1LjQ2OXY0OS41OTRoLTg1LjQ2OXY4NC4wOTRoLTQ5LjE1NnYtODQuMDk0SDM5MC43NXYtNDkuNTk0aDgzLjg3NXYtODMuOTA2eiIgZmlsbD0iI2YyZjJmMiIvPjwvc3ZnPg==");
--icon-ojsxc-gear-f2f2f2: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NCIgaGVpZ2h0PSI0NCI+PHBhdGggZD0iTTIxLjk2MSA0Mi45OTFjLS4yMjYtLjU2Ni0uNDEzLTEuNzQ2LS40MTUtMi42MjMtLjAwNS0yLjQ1Mi0uMTItMi42NzUtMS41MTktMi45NzUtLjY2Ny0uMTQ0LTEuOTUxLS4zMzYtMi44NTMtLjQyN2wtMS42MzktLjE2Ni0uNzIyIDEuOTA0Yy0uNyAxLjg0Ni0xLjY4OCAzLjI2OC0yLjI3MSAzLjI2OC0uMzExIDAtMy4xMTQtMS41NTgtMy44ODQtMi4xNTktLjc1My0uNTg3LS4zNDYtMS44MjYgMS4yNS0zLjgxbDEuNDA2LTEuNzQ1LTEuMTQ0LTEuNDUzYy0uNjMtLjgtMS40NzctMS44NDctMS44ODUtMi4zMjhsLS43NC0uODc0LTIuMjA5IDEuMTk0Yy0xLjIxNS42NTctMi40NDcgMS4xOTQtMi43MzcgMS4xOTQtLjU4NiAwLTEuNDk0LTEuNzEtMi4wOC0zLjkyMi0uMzE3LTEuMTkzLS4zMDctMS4yNS4zMDYtMS43MTMuMzQ5LS4yNjMgMS42NDItLjY4MyAyLjg3My0uOTMybDIuMjQtLjQ1M3YtNS45ODZsLTEuODU2LS4zMmMtMS4wMi0uMTc2LTIuMy0uNTQxLTIuODQ1LS44MTItLjktLjQ0Ni0uOTc4LS41NjUtLjg1OC0xLjMwNC4wNzItLjQ0Ny40NTYtMS42NDcuODUzLTIuNjY2LjY0NC0xLjY1NS43OTQtMS44NTQgMS40LTEuODU0LjM3NCAwIDEuNjMuNTM5IDIuNzkzIDEuMTk3bDIuMTE0IDEuMTk4Ljc0Ny0uODc4YzEuNjI4LTEuOTE0IDIuNzctMy41MDEgMi43Ny0zLjg0OSAwLS4yLS40Ny0uOTM0LTEuMDQ0LTEuNjNDOC43OTQgNi41OTYgOC4yNCA1LjYwNCA4LjI0IDQuODk1YzAtLjU3NiAzLjQtMi44NDcgNC4yNi0yLjg0Ny42NSAwIDEuNDE1IDEuMDQ0IDIuMjcyIDMuMTAxLjM3NS44OTkuNzggMS43MzcuOSAxLjg2My4xMjcuMTM0IDEuMzkxLjA0IDMuMDQ3LS4yMjdsMi44My0uNDU1VjQuMTk0YzAtMS4zNjYuMTQ4LTIuNTA3LjQxMS0zLjE2NUMyMi4zNDcuMDY0IDIyLjQzOCAwIDIzLjQxMSAwYy41NzIgMCAxLjc2OS4xMjcgMi42Ni4yODJsMS42Mi4yODJ2MS4yNGMwIC42ODMtLjI5NiAyLjE3OS0uNjU4IDMuMzI1LS4zNjIgMS4xNDctLjYyMSAyLjEyLS41NzYgMi4xNjIuMDQ2LjA0MiAxLjIyMy42ODQgMi42MTYgMS40MjdsMi41MzQgMS4zNSAxLjU2MS0xLjY5YzEuNDc2LTEuNTk4IDIuNzUyLTIuNDkyIDMuNTU5LTIuNDkyLjMyIDAgMy4yNSAzLjIyOSAzLjI1IDMuNTgxIDAgLjQ3Ni0xLjg4NSAyLjI3Ni0zLjM5NSAzLjI0NC0xLjYzIDEuMDQ2LTEuNzYgMS4xOTItMS42IDEuODIzLjI4IDEuMTIyIDEuNjg0IDQuNjQxIDEuOTA1IDQuNzc3LjExMi4wNyAxLjE3NC0uMDA0IDIuMzYtLjE2MiAxLjc5LS4yNCAyLjM1LS4yMjQgMy4yOTguMDkybDEuMTQyLjM4djQuNzk4bC0xLjE1Mi4zNGMtLjkyNy4yNzItMS41OS4yOC0zLjQwNC4wMzYtMS4zMjktLjE3OC0yLjMzOS0uMjA4LTIuNDYzLS4wNzItLjM1LjM4Mi0xLjg2IDUuMTktMS43MDYgNS40MzguMDc4LjEyNy45MzEuNyAxLjg5NSAxLjI3MiAxLjEyLjY2NSAyLjAwMyAxLjQyIDIuNDQ2IDIuMDlsLjY5NCAxLjA0OC0uNTEzLjY1MmMtLjc4NiAxLTIuMjI2IDIuNTY0LTIuNTM1IDIuNzU1LS41OTEuMzY2LTIuMjc0LS42ODMtMy44ODMtMi40MTlsLTEuNjYzLTEuNzk1LTIuNDMyIDEuNDU3Yy0xLjMzNy44LTIuNDcyIDEuNDg5LTIuNTIxIDEuNTI4LS4wNS4wNC4yMTYuOTkzLjU5IDIuMTE3LjQ1OCAxLjM3NS42NTUgMi40NS42MDIgMy4yOGwtLjA3OCAxLjIzNC0xLjQwOC4yOTVjLS43NzQuMTYzLTEuOTQyLjMwNy0yLjU5NS4zMi0xLjE1Ni4wMjQtMS4yLS4wMDMtMS42LTEuMDA0em0zLjUxMy0xMy4xNDNjNi4xMDEtMi45ODUgNi40MzUtMTIuMDI3LjU2OS0xNS4zNzctMi4yNTQtMS4yODgtNS41OTgtMS40NTUtNy45OTQtLjQtMS40NzUuNjUtMy4zMjMgMi40Mi00LjEzNyAzLjk2Mi0uNjEyIDEuMTYtLjY4IDEuNTYxLS42OCAzLjk3NyAwIDIuMzEyLjA4MiAyLjg0LjU4NyAzLjc4NiAxLjI1IDIuMzQ0IDMuMzcyIDQuMDI0IDUuODc0IDQuNjUzIDEuNjY4LjQyIDQuMjQyLjE1MiA1Ljc4MS0uNjAxeiIgZmlsbD0iI2YyZjJmMiIvPjwvc3ZnPg==");
// BBB
--icon-bbb-chain-plus-f2f2f2: url("data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIiB2ZXJzaW9uPSIxLjEiIGlkPSJFYmVuZV8yIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzb2RpcG9kaTpkb2NuYW1lPSJjaGFpbi1wbHVzLnN2ZyIgaW5rc2NhcGU6dmVyc2lvbj0iMC45Mi41ICgyMDYwZWMxZjlmLCAyMDIwLTA0LTA4KSIgZmlsbD0iI2YyZjJmMiI+PG1ldGFkYXRhIGlkPSJtZXRhZGF0YTE2Ij48cmRmOlJERj48Y2M6V29yayByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPjxkYzp0aXRsZS8+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzIGlkPSJkZWZzMTQiPgoJCgkKCQoJCjwvZGVmcz48c29kaXBvZGk6bmFtZWR2aWV3IHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgYm9yZGVyY29sb3I9IiM2NjY2NjYiIGJvcmRlcm9wYWNpdHk9IjEiIG9iamVjdHRvbGVyYW5jZT0iMTAiIGdyaWR0b2xlcmFuY2U9IjEwIiBndWlkZXRvbGVyYW5jZT0iMTAiIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIiBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjEzMjciIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9Ijk4NiIgaWQ9Im5hbWVkdmlldzEyIiBzaG93Z3JpZD0iZmFsc2UiIGlua3NjYXBlOnpvb209IjcuMzc1IiBpbmtzY2FwZTpjeD0iLTEwLjQ0MDY3OCIgaW5rc2NhcGU6Y3k9IjIyLjUzNjY5NiIgaW5rc2NhcGU6d2luZG93LXg9IjIwNzkiIGlua3NjYXBlOndpbmRvdy15PSI3NTQiIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9IkViZW5lXzIiLz4KPHBhdGggaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgaWQ9InBhdGg0IiBkPSJNIDEuNjEwNjQ3NywxNC4zMDQ2OTEgQyAwLjM3NjQ2NTY5LDEzLjY5Njc2MSAtMC4yMzE0NjQ3MywxMi4yMDI3NTEgMC4wODExMDU4OSwxMC41MTYwOTEgMC4yMTk5MDI3OSw5Ljc2ODgwODUgMi40NDQ1Mzk1LDcuMzM1OTc2NCAzLjM4MzM2MTcsNi44ODQ2MDg5IDMuOTkxMjkyMiw2LjYwNjQ1OTkgNS45MjA1NjkxLDYuNTAyNjM5OCA1LjkyMDU2OTEsNi43NDUyNTY4IGMgMCwwLjIyNTk2MTMgLTEuMjg2MzY5NywxLjM3Mjk3ODkgLTEuNjY4MzM4OCwxLjQ5NDU2NSBDIDQuMDQ0MDM1LDguMzA5MjIwMyAzLjM2NjE1MDksOC44ODI3MjkgMi43MjI2ODg1LDkuNTQzNDAyMyAxLjY4MDYwMTQsMTAuNjM4Nzg3IDEuNTc2MjI2MSwxMC44MTIwMDYgMS41NzYyMjYxLDExLjQ3MjY3OSBjIDAsMC45MzgyNjcgMC42MjU2OTY0LDEuNTYzOTY0IDEuNTgxNzI5NSwxLjU2Mzk2NCAwLjU5MDcxOTYsMCAwLjgxNjY4MDksLTAuMTM4Nzk3IDEuODc3MDg5MiwtMS4xNDcwMTggMC42NzczMjg5LC0wLjYyNTY5NiAxLjI2ODA0ODUsLTEuMzAzNTggMS4zMzgwMDIyLC0xLjUxMTc3NiAwLjEyMTU4NiwtMC40MDAyOSAxLjI1MDgzNzYsLTEuNjg1NTQ5MyAxLjQ5NDU2NSwtMS42ODU1NDkzIDAuMjA4NzUwNSwwIDAuMTc0MzI4OSwxLjgwNzEzNTMgLTAuMDM0OTc3LDIuMzYyMzIzMyAtMC4yNDMxNzIsMC42MjY4MDcgLTIuNTAyNzg1NSwyLjkzNzQ5OCAtMy4yMTU2NDY0LDMuMjY4Mzg5IC0wLjc0NjcyNzMsMC4zNjQ3NTkgLTIuMjc2MjY5MiwwLjM0NzU0OCAtMy4wMDYzNDA5LC0wLjAxODMyIHoiIHN0eWxlPSIiLz48cGF0aCBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiBpZD0icGF0aDYiIGQ9Ik0gNC43MDQxNTMsOS45MDgxNjA1IEMgNC41MTMxNjg1LDkuNzE3MTc2IDQuMzU2NjA1Niw5LjQ3MzQ0ODcgNC4zNTY2MDU2LDkuMzUyNDE3OCBjIDAsLTAuMTIyMTQxMyAxLjA3NzYxOTEsLTEuMjg2MzY5NyAyLjM5ODQxMDQsLTIuNjA3MTYxIEMgOC43NTI1ODEsNC43NDY1ODE0IDkuMjA1NjE0MSw0LjM4MTgyMzIgOS41MzUzOTU1LDQuNDY4NDMyNCAxMC4wMjIyOTUsNC41OTAwMTg1IDEwLjI2NDM1Nyw1LjAyNDczMDQgMTAuMDkxMTM4LDUuNDc2MDk3OSA5LjkxNzM2NDYsNS45MTAyNTQ2IDUuNTIwODM0LDEwLjI1NTE1MyA1LjI1OTg5NTgsMTAuMjU1MTUzIDUuMTM4MzA5NywxMC4yNTU3MDggNC44OTUxMzc2LDEwLjA5OTE0NSA0LjcwNDE1Myw5LjkwODE2MDUgWiIgc3R5bGU9IiIvPjxwYXRoIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIGlkPSJwYXRoOCIgZD0ibSA4LjcwMjA1ODksNy44NTc4NTI3IGMgMCwtMC4yNDM3MjczIDEuMjg1MjU5MywtMS4zNzI5Nzg5IDEuNjg0OTk0MSwtMS40OTQ1NjUgMC4yMDg3NTEsLTAuMDY5Mzk4IDAuODg2NjM1LC0wLjY2MDExOCAxLjUxMjMzMSwtMS4zMzgwMDIxIDEuMDA3NjY2LC0xLjA2MDQwODMgMS4xNDcwMTgsLTEuMjg1ODE0NSAxLjE0NzAxOCwtMS44NzcwODkzIDAsLTAuOTU1NDc3OCAtMC42MjU2OTcsLTEuNTgxNzI5NCAtMS41NjQ1MTksLTEuNTgxNzI5NCAtMC42NjA2NzMsMCAtMC44MzMzMzYsMC4xMDQzNzUyIC0xLjkyOTI3NjcsMS4xNDcwMTc1IEMgOC44OTMwNDM1LDMuMzU2MzkxNyA4LjMxODk3OTUsNC4wMzQyNzU3IDguMjQ5NTgxLDQuMjQzMDI2MyA4LjEyNzk5NSw0LjYyNDk5NTMgNi45ODA0MjIyLDUuOTEwODA5OCA2Ljc1NTAxNiw1LjkxMDgwOTggNi41MTEyODg3LDUuOTEwODA5OCA2LjYxNTY2MzksMy45ODIwODgxIDYuODkzODEyOSwzLjM5MDgxMzMgNy4yMjQxNDk2LDIuNjc4NTA3NiA5LjUzNTM5NTUsMC40MTg4OTQwOSAxMC4xNjA1MzcsMC4xNzU3MjE5MiAxMC44NzI4NDIsLTAuMDg1MjE2MjUgMTIuMzE1Nzc1LC0wLjAzMzAyODYyIDEyLjk5MzY1OSwwLjI4MDA5NzE5IDE0LjI0NTA1MiwwLjg4ODU4MjggMTQuODUzNTM4LDIuMzgzMTQ3OCAxNC41NDA0MTIsNC4wODU5MDgyIDE0LjQwMTA2LDQuODMzMTkwNyAxMi4xNzY0MjMsNy4yNjY1Nzc5IDExLjIzODcxMSw3LjcxODUwMDcgMTAuNjI5NjcsNy45OTcyMDQ4IDguNzAyMDU4OSw4LjEwMTAyNDkgOC43MDIwNTg5LDcuODU3ODUyNyBaIiBzdHlsZT0iIi8+Cjx0ZXh0IHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSIiIHg9IjkuMDQyMjM4MiIgeT0iMTcuMDA2NDY4IiBpZD0idGV4dDQ1NjAiPjx0c3BhbiBzb2RpcG9kaTpyb2xlPSJsaW5lIiBpZD0idHNwYW40NTU4IiB4PSI5LjA0MjIzODIiIHk9IjE3LjAwNjQ2OCIgc3R5bGU9IiI+KzwvdHNwYW4+PC90ZXh0Pgo8L3N2Zz4=");
// Svg api
@include icon-color-theming("home", "places", $icon-normal, 1, true);
@include icon-color-theming("contacts", "places", $icon-normal, 1, true);
@include icon-color-theming("link", "places", $icon-normal, 1, true);
@include icon-color-theming("calendar", "places", $icon-normal, 1, true);
@include icon-color-theming("picture", "places", $icon-normal, 1, true);
@include icon-color-theming("files", "places", $icon-normal, 1, true);
@include icon-color-theming("text", "filetypes", $icon-normal, 1, true);
@include icon-color-theming("folder", "filetypes", #0082c9, 1, true);
@include icon-color-theming("desktop", "clients", $icon-normal, 1, true);
@include icon-color-theming("phone", "clients", $icon-normal, 1, true);
@include icon-color-theming("tablet", "clients", $icon-normal, 1, true);
@include icon-color-theming("bundles", "categories", $icon-normal, 1, true);
@include icon-color-theming("customization", "categories", $icon-normal, 1, true);
@include icon-color-theming("games", "categories", $icon-normal, 1, true);
@include icon-color-theming("integration", "categories", $icon-normal, 1, true);
@include icon-color-theming("monitoring", "categories", $icon-normal, 1, true);
@include icon-color-theming("multimedia", "categories", $icon-normal, 1, true);
@include icon-color-theming("office", "categories", $icon-normal, 1, true);
@include icon-color-theming("organization", "categories", $icon-normal, 1, true);
@include icon-color-theming("social", "categories", $icon-normal, 1, true);
@include icon-color-theming("workflow", "categories", $icon-normal, 1, true);
@include icon-color-theming("auth", "categories", $icon-normal, 1, true);
@include icon-color-theming("dashboard", "categories", $icon-normal, 1, true);
@include icon-color-theming("star-dark", "actions", $icon-normal, 1, true);
@include icon-color-theming("search", "actions", $icon-normal, 1, true);
@include icon-color-theming("password", "actions", $icon-normal, 1, true);
@include icon-color-theming("settings-dark", "actions", $icon-normal, 1, true);
@include icon-color-theming("rename", "actions", $icon-normal, 1, true);
@include icon-color-theming("delete", "actions", $icon-normal, 1, true);
@include icon-color-theming("delete", "actions", $icon-error, 1, true);
@include icon-color-theming("public", "actions", $icon-normal, 1, true);
@include icon-color-theming("upload", "actions", $icon-normal, 1, true);
@include icon-color-theming("add", "actions", $icon-normal, 1, true);
@include icon-color-theming("share", "actions", $icon-normal, 1, true);
@include icon-color-theming("external", "actions", $icon-normal, 1, true);
@include icon-color-theming("tag", "actions", $icon-normal, 1, true);
@include icon-color-theming("download", "actions", $icon-normal, 1, true);
@include icon-color-theming("details", "actions", $icon-normal, 1, true);
@include icon-color-theming("info", "actions", $icon-normal, 1, true);
@include icon-color-theming("clippy", "actions", $icon-normal, 1, true);
@include icon-color-theming("comment", "actions", $icon-normal, 1, true);
@include icon-color-theming("quota", "actions", $icon-normal, 1, true);
@include icon-color-theming("triangle-n", "actions", $icon-normal, 1, true);
@include icon-color-theming("triangle-s", "actions", $icon-normal, 1, true);
@include icon-color-theming("more", "actions", $icon-normal, 1, true);
@include icon-color-theming("toggle-filelist", "actions", $icon-normal, 1, true);
@include icon-color-theming("toggle-pictures", "actions", $icon-normal, 1, true);
@include icon-color-theming("history", "actions", $icon-normal, 1, true);
@include icon-color-theming("edit", "actions", $icon-normal, 1, true);
@include icon-color-theming("close", "actions", $icon-normal, 1, true);
@include icon-color-theming("fullscreen", "actions", $icon-normal, 1, true);
@include icon-color-theming("user", "actions", $icon-normal, 1, true);
@include icon-color-theming("timezone", "actions", $icon-normal, 1, true);
@include icon-color-theming("toggle", "actions", $icon-normal, 1, true);
@include icon-color-theming("error", "actions", $icon-normal, 1, true);
@include icon-color-theming("checkmark", "actions", $icon-normal, 1, true);
@include icon-color-theming("user-admin", "actions", $icon-normal, 1, true);
@include icon-color-theming("arrow-right", "actions", $icon-normal, 1, true);
@include icon-color-theming("arrow-left", "actions", $icon-normal, 1, true);
@include icon-color-theming("mail", "actions", $icon-normal, 1, true);
@include icon-color-theming("address", "actions", $icon-normal, 1, true);
@include icon-color-theming("group", "actions", $icon-normal, 1, true);
@include icon-color-theming("menu", "actions", $icon-normal, 1, true);
@include icon-color-theming("menu-sidebar", "actions", $icon-normal, 1, true);
@include icon-color-theming("projects", "actions", $icon-normal, 1, true);
@include icon-color-theming("sound", "actions", $icon-normal, 1, true);
@include icon-color-theming("sound-off", "actions", $icon-normal, 1, true);
@include icon-color-theming("audio", "actions", $icon-normal, 1, true);
@include icon-color-theming("audio-off", "actions", $icon-normal, 1, true);
@include icon-color-theming("video", "actions", $icon-normal, 1, true);
@include icon-color-theming("video-off", "actions", $icon-normal, 1, true);
@include icon-color-theming("screen", "actions", $icon-normal, 1, true);
@include icon-color-theming("screen-off", "actions", $icon-normal, 1, true);
@include icon-color-theming("caret", "actions", $icon-normal, 1, true);
@include icon-color-theming("disabled-user", "actions", $icon-normal, 1, true);
@include icon-color-theming("disabled-users", "actions", $icon-normal, 1, true);
@include icon-color-theming("confirm", "actions", $icon-normal, 1, true);
@include icon-color-theming("confirm-fade", "actions", $icon-normal, 1, true);
@include icon-color-theming("play", "actions", $icon-normal, 1, true);
@include icon-color-theming("play-next", "actions", $icon-normal, 1, true);
@include icon-color-theming("pause", "actions", $icon-normal, 1, true);
@include icon-color-theming("app", "user_status", $icon-normal, 1, false);
@include icon-color-theming("user-status-invisible", "user_status", $icon-normal, 1, false);
@include icon-color-theming("app", "weather_status", $icon-normal, 1, false);
@include icon-color-theming("folder", "files", $icon-normal, 1, false);
@include icon-color-theming("recent", "files", $icon-normal, 1, false);
@include icon-color-theming("external", "files", $icon-normal, 1, false);
@include icon-color-theming("share", "files", $icon-normal, 1, false);
@include icon-color-theming("unshare", "files", $icon-normal, 1, false);
@include icon-color-theming("public", "files", $icon-normal, 1, false);
@include icon-color-theming("delete", "files", $icon-normal, 1, false);
@include icon-color-theming("control", "privacy", $icon-normal, 1, false);
@include icon-color-theming("knowledge", "privacy", $icon-normal, 1, false);
@include icon-color-theming("freedom", "privacy", $icon-normal, 1, false);
@include icon-color-theming("activity", "activity", $icon-normal, 1, false);
@include icon-color-theming("notifications-dark", "notifications", $icon-normal, 1, false);
@include icon-color-theming("undo", "text", $icon-normal, 1, false);
@include icon-color-theming("redo", "text", $icon-normal, 1, false);
@include icon-color-theming("bold", "text", $icon-normal, 1, false);
@include icon-color-theming("italic", "text", $icon-normal, 1, false);
@include icon-color-theming("strike", "text", $icon-normal, 1, false);
@include icon-color-theming("paragraph", "text", $icon-normal, 1, false);
@include icon-color-theming("ul", "text", $icon-normal, 1, false);
@include icon-color-theming("ol", "text", $icon-normal, 1, false);
@include icon-color-theming("quote", "text", $icon-normal, 1, false);
@include icon-color-theming("h1", "text", $icon-normal, 1, false);
@include icon-color-theming("h2", "text", $icon-normal, 1, false);
@include icon-color-theming("h3", "text", $icon-normal, 1, false);
@include icon-color-theming("h4", "text", $icon-normal, 1, false);
@include icon-color-theming("h5", "text", $icon-normal, 1, false);
@include icon-color-theming("h6", "text", $icon-normal, 1, false);
@include icon-color-theming("code", "text", $icon-normal, 1, false);
@include icon-color-theming("image", "text", $icon-normal, 1, false);
@include icon-color-theming("underline", "text", $icon-normal, 1, false);
@include icon-color-theming("tasklist", "text", $icon-normal, 1, false);
@include icon-color-theming("table", "text", $icon-normal, 1, false);
@include icon-color-theming("emoji", "text", $icon-normal, 1, false);
@include icon-color-theming("help", "text", $icon-normal, 1, false);
@include icon-color-theming("table_settings", "text", $icon-normal, 1, false);
@include icon-color-theming("add_col_before", "text", $icon-normal, 1, false);
@include icon-color-theming("add_col_after", "text", $icon-normal, 1, false);
@include icon-color-theming("add_row_before", "text", $icon-normal, 1, false);
@include icon-color-theming("add_row_after", "text", $icon-normal, 1, false);
@include icon-color-theming("rss", "news", $icon-normal, 1, false);
@include icon-color-theming("notes", "notes", $icon-normal, 1, false);
@include icon-color-theming("folder", "notes", $icon-normal, 1, false);
@include icon-color-theming("recent", "notes", $icon-normal, 1, false);
@include icon-color-theming("folder-empty", "notes", $icon-normal, 1, false);
@include icon-color-theming("notes-trans", "notes", $icon-normal, 1, false);
@include icon-color-theming("phone", "contacts", $icon-normal, 1, false);
@include icon-color-theming("address-book", "contacts", $icon-normal, 1, false);
@include icon-color-theming("social", "contacts", $icon-normal, 1, false);
@include icon-color-theming("qrcode", "contacts", $icon-normal, 1, false);
@include icon-color-theming("language", "contacts", $icon-normal, 1, false);
@include icon-color-theming("up", "contacts", $icon-normal, 1, false);
@include icon-color-theming("eye", "contacts", $icon-normal, 1, false);
@include icon-color-theming("recent-actors", "contacts", $icon-normal, 1, false);
@include icon-color-theming("deck", "deck", $icon-normal, 1, false);
@include icon-color-theming("archive", "deck", $icon-normal, 1, false);
@include icon-color-theming("toggle-view-collapse", "deck", $icon-normal, 1, false);
@include icon-color-theming("toggle-view-expand", "deck", $icon-normal, 1, false);
@include icon-color-theming("attach", "deck", $icon-normal, 1, false);
@include icon-color-theming("filter", "deck", $icon-normal, 1, false);
@include icon-color-theming("clone", "deck", $icon-normal, 1, false);
@include icon-color-theming("reply", "deck", $icon-normal, 1, false);
@include icon-color-theming("app-dark", "spreed", $icon-normal, 1, false);
@include icon-color-theming("reply", "spreed", $icon-normal, 1, false);
@include icon-color-theming("lobby", "spreed", $icon-normal, 1, false);
@include icon-color-theming("clip-add-file", "spreed", $icon-normal, 1, false);
@include icon-color-theming("menu-people", "spreed", $icon-normal, 1, false);
@include icon-color-theming("grid-view", "spreed", $icon-normal, 1, false);
@include icon-color-theming("promoted-view", "spreed", $icon-normal, 1, false);
@include icon-color-theming("folder-multiple-image", "spreed", $icon-normal, 1, false);
@include icon-color-theming("star", "mail", $icon-normal, 1, false);
@include icon-color-theming("drafts", "mail", $icon-normal, 1, false);
@include icon-color-theming("sent", "mail", $icon-normal, 1, false);
@include icon-color-theming("junk", "mail", $icon-normal, 1, false);
@include icon-color-theming("archive", "mail", $icon-normal, 1, false);
@include icon-color-theming("forward", "mail", $icon-normal, 1, false);
@include icon-color-theming("important", "mail", $icon-normal, 1, false);
@include icon-color-theming("announcementcenter", "announcementcenter", $icon-normal, 1, false);
@include icon-color-theming("notifications-off", "announcementcenter", $icon-normal, 1, false);
@include icon-color-theming("social-diaspora", "federatedfilesharing", $icon-normal, 1, false);
@include icon-color-theming("social-twitter", "federatedfilesharing", $icon-normal, 1, false);
@include icon-color-theming("social-facebook", "federatedfilesharing", $icon-normal, 1, false);
@include icon-color-theming("circles", "circles", $icon-normal, 1, false);
@include icon-color-theming("previous", "audioplayer", $icon-normal, 1, false);
@include icon-color-theming("play", "audioplayer", $icon-normal, 1, false);
@include icon-color-theming("pause", "audioplayer", $icon-normal, 1, false);
@include icon-color-theming("next", "audioplayer", $icon-normal, 1, false);
@include icon-color-theming("volume", "audioplayer", $icon-normal, 1, false);
@include icon-color-theming("repeat", "audioplayer", $icon-normal, 1, false);
@include icon-color-theming("shuffle", "audioplayer", $icon-normal, 1, false);
@include icon-color-theming("leftarrow", "calendar", $icon-normal, 1, false);
@include icon-color-theming("rightarrow", "calendar", $icon-normal, 1, false);
@include icon-color-theming("view-module", "calendar", $icon-normal, 1, false);
@include icon-color-theming("view-day", "calendar", $icon-normal, 1, false);
@include icon-color-theming("view-week", "calendar", $icon-normal, 1, false);
@include icon-color-theming("view-list", "calendar", $icon-normal, 1, false);
@include icon-color-theming("embed", "calendar", $icon-normal, 1, false);
@include icon-color-theming("new-calendar", "calendar", $icon-normal, 1, false);
@include icon-color-theming("new-calendar-with-task-list", "calendar", $icon-normal, 1, false);
@include icon-color-theming("eye", "calendar", $icon-normal, 1, false);
@include icon-color-theming("briefcase", "calendar", $icon-normal, 1, false);
@include icon-color-theming("reminder", "calendar", $icon-normal, 1, false);
@include icon-color-theming("repeat", "calendar", $icon-normal, 1, false);
@include icon-color-theming("timezone", "calendar", $icon-normal, 1, false);
@include icon-color-theming("color-picker", "calendar", $icon-normal, 1, false);
@include icon-color-theming("yourphotos", "photos", $icon-normal, 1, false);
@include icon-color-theming("icon-start", "tasks", $icon-normal, 1, false);
@include icon-color-theming("icon-due", "tasks", $icon-normal, 1, false);
@include icon-color-theming("icon-list", "tasks", $icon-normal, 1, false);
@include icon-color-theming("icon-task-star", "tasks", $icon-normal, 1, false);
@include icon-color-theming("icon-due", "tasks", $icon-normal, 1, false);
@include icon-color-theming("icon-alphabetically", "tasks", $icon-normal, 1, false);
@include icon-color-theming("icon-subtasks-visible", "tasks", $icon-normal, 1, false);
@include icon-color-theming("icon-subtasks-hidden", "tasks", $icon-normal, 1, false);
@include icon-color-theming("icon-list-down", "tasks", $icon-normal, 1, false);
@include icon-color-theming("icon-list-up", "tasks", $icon-normal, 1, false);
@include icon-color-theming("icon-manual", "tasks", $icon-normal, 1, false);
@include icon-color-theming("rename", "bbb", $icon-normal, 1, false);
@include icon-color-theming("app", "integration_gitlab", $icon-normal, 1, false);
@include icon-color-theming("app", "integration_github", $icon-normal, 1, false);
@include icon-color-theming("app", "integration_reddit", $icon-normal, 1, false);
@include icon-color-theming("app", "integration_google", $icon-normal, 1, false);
@include icon-color-theming("app", "integration_zammad", $icon-normal, 1, false);
@include icon-color-theming("app", "integration_twitter", $icon-normal, 1, false);
@include icon-color-theming("app", "integration_jira", $icon-normal, 1, false);
@include icon-color-theming("app", "integration_mastodon", $icon-normal, 1, false);
@include icon-color-theming("app", "integration_discourse", $icon-normal, 1, false);
@include icon-color-theming("app", "integration_moodle", $icon-normal, 1, false);
@include icon-color-theming("forms", "forms", $icon-normal, 1, false);
@include icon-color-theming("answer-checkbox", "forms", $icon-normal, 1, false);
@include icon-color-theming("answer-multiple", "forms", $icon-normal, 1, false);
@include icon-color-theming("answer-dropdown", "forms", $icon-normal, 1, false);
@include icon-color-theming("answer-short", "forms", $icon-normal, 1, false);
@include icon-color-theming("answer-long", "forms", $icon-normal, 1, false);
@include icon-color-theming("answer-date", "forms", $icon-normal, 1, false);
@include icon-color-theming("answer-datetime", "forms", $icon-normal, 1, false);
@include icon-color-theming("drag-handle", "forms", $icon-normal, 1, false);
@include icon-color-theming("reply", "social", $icon-normal, 1, false);
@include icon-color-theming("emoji", "social", $icon-normal, 1, false);
@include icon-color-theming("filteradd", "analytics", $icon-normal, 1, false);
@include icon-color-theming("options", "analytics", $icon-normal, 1, false);
@include icon-color-theming("column", "analytics", $icon-normal, 1, false);
@include icon-color-theming("app", "collectives", $icon-normal, 1, false);
@include icon-color-theming("pages", "collectives", $icon-normal, 1, false);
@include icon-color-theming("access-time", "collectives", $icon-normal, 1, false);
@include icon-color-theming("sort-by-alpha", "collectives", $icon-normal, 1, false);
@include icon-color-theming("deny", "groupfolders", $icon-normal, 1, false);
// This rule being here fixes an issue with some styling imported right after this file will be removed during NC's sass compilation
color: var(--color-main-text);
}

10
js/settings-admin.js
View File

@ -43,7 +43,7 @@ function postError(selector, id) {
window.addEventListener("DOMContentLoaded", function () {
$("#breezedark-theme-enabled").change(function () {
$.post(OC.generateUrl("apps/breezedark/settings/admin"), {
theme_enabled: this.checked ? 1 : 0,
theme_enforced: this.checked ? 1 : 0,
theme_automatic_activation_enabled: $("#breezedark-automatic-activation-enabled").prop(
"checked"
)
@ -61,10 +61,6 @@ window.addEventListener("DOMContentLoaded", function () {
postError("label[for='breezedark-theme-enabled']", "breezedark-theme-enabled-msg");
});
$("#breezedark-theme-login-page").prop(
"disabled",
!$("#breezedark-theme-enabled").prop("checked")
);
$("#breezedark-automatic-activation-enabled").prop(
"disabled",
!$("#breezedark-theme-enabled").prop("checked")
@ -73,7 +69,7 @@ window.addEventListener("DOMContentLoaded", function () {
$("#breezedark-automatic-activation-enabled").change(function () {
$.post(OC.generateUrl("apps/breezedark/settings/admin"), {
theme_enabled: $("#breezedark-theme-enabled").prop("checked") ? 1 : 0,
theme_enforced: $("#breezedark-theme-enabled").prop("checked") ? 1 : 0,
theme_automatic_activation_enabled: this.checked ? 1 : 0,
theme_login_page: $("#breezedark-theme-login-page").prop("checked") ? 1 : 0,
})
@ -94,7 +90,7 @@ window.addEventListener("DOMContentLoaded", function () {
$("#breezedark-theme-login-page").change(function () {
$.post(OC.generateUrl("apps/breezedark/settings/admin"), {
theme_login_page: this.checked ? 1 : 0,
theme_enabled: $("#breezedark-theme-enabled").prop("checked") ? 1 : 0,
theme_enforced: $("#breezedark-theme-enabled").prop("checked") ? 1 : 0,
theme_automatic_activation_enabled: $("#breezedark-automatic-activation-enabled").prop(
"checked"
)

4
js/settings-personal.js
View File

@ -52,10 +52,6 @@ window.addEventListener("DOMContentLoaded", function () {
$("#breezedark-enabled-msg").remove();
}, 3000);
});
$("#breezedark-automatic-activation-enabled").prop(
"disabled",
!$("#breezedark-enabled").prop("checked")
);
});
$("#breezedark-automatic-activation-enabled").change(function () {

15
lib/AppInfo/Application.php
View File

@ -71,17 +71,20 @@ class Application extends App implements IBootstrap
public function doTheming(IConfig $config, IUserSession $userSession, IURLGenerator $urlGenerator): void
{
$user = $userSession->getUser();
$default = $config->getAppValue($this->appName, "theme_enabled", "0");
$enforced = $config->getAppValue($this->appName, "theme_enforced", "0");
$loginPage = $config->getAppValue($this->appName, "theme_login_page", "1");
$cachebuster = $config->getAppValue($this->appName, "theme_cachebuster", "0");
$automaticActivation = $config->getAppValue($this->appName, "theme_automatic_activation_enabled", "0");
if (!is_null($user) and $config->getUserValue($user->getUID(), $this->appName, "theme_enabled", $default)) {
if ($enforced) {
if (!is_null($user)) {
$automaticActivation = $config->getUserValue($user->getUID(), $this->appName, "theme_automatic_activation_enabled", $automaticActivation);
}
$this->addStyling($urlGenerator, $loginPage, $cachebuster, $automaticActivation);
} elseif (!is_null($user) and $config->getUserValue($user->getUID(), $this->appName, "theme_enabled", "0")) {
// When shown the 2FA login page you are logged in while also being on a login page,
// so a logged in user still needs the guests.css stylesheet
$this->addStyling($urlGenerator, $loginPage, $cachebuster, $config->getUserValue($user->getUID(), $this->appName, "theme_automatic_activation_enabled", $automaticActivation));
} elseif (is_null($user) and $default) {
$this->addStyling($urlGenerator, $loginPage, $cachebuster, $automaticActivation);
$this->addStyling($urlGenerator, $loginPage, $cachebuster, $config->getUserValue($user->getUID(), $this->appName, "theme_automatic_activation_enabled", "0"));
}
}

49
lib/Controller/SettingsController.php
View File

@ -69,10 +69,16 @@ class SettingsController extends Controller
*/
public function personal(): void
{
if ($this->request->getParam("theme_enabled")) {
$this->config->setUserValue($this->userId, $this->appName, "theme_enabled", "1");
} else {
$this->config->setUserValue($this->userId, $this->appName, "theme_enabled", "0");
$themeEnforced = $this->config->getAppValue($this->appName, 'theme_enforced', "0");
if (!$themeEnforced) {
if ($this->request->getParam("theme_enabled")) {
$this->config->setUserValue($this->userId, $this->appName, "theme_enabled", "1");
$this->toggleTheme("on");
} else {
$this->config->setUserValue($this->userId, $this->appName, "theme_enabled", "0");
$this->toggleTheme("off");
}
}
if ($this->request->getParam("theme_automatic_activation_enabled")) {
@ -87,10 +93,12 @@ class SettingsController extends Controller
*/
public function admin(): void
{
if ($this->request->getParam("theme_enabled")) {
$this->config->setAppValue($this->appName, "theme_enabled", "1");
if ($this->request->getParam("theme_enforced")) {
$this->config->setAppValue($this->appName, "theme_enforced", "1");
$this->enforceTheme("on");
} else {
$this->config->setAppValue($this->appName, "theme_enabled", "0");
$this->config->setAppValue($this->appName, "theme_enforced", "0");
$this->enforceTheme("off");
}
if ($this->request->getParam("theme_login_page")) {
@ -121,4 +129,31 @@ class SettingsController extends Controller
$this->config->setAppValue($this->appName, "theme_cachebuster", 0);
}
}
public function toggleTheme($state): void
{
$enabledThemes = json_decode($this->config->getUserValue($this->userId, "theming", "enabled-themes", "[]"));
if ($state === "on") {
$enabledThemes = array_merge(["breezedark"], $enabledThemes);
$this->config->setUserValue($this->userId, "theming", "enabled-themes", json_encode(array_values(array_unique($enabledThemes))));
}
if ($state === "off") {
$enabledThemes = array_diff($enabledThemes, ["breezedark"]);
$this->config->setUserValue($this->userId, "theming", "enabled-themes", json_encode(array_values(array_unique($enabledThemes))));
}
}
public function enforceTheme($state): void
{
if ($state === "on") {
$this->config->setSystemValue("enforce_theme", "breezedark");
}
if ($state === "off") {
$this->config->setSystemValue("enforce_theme", "");
}
}
}

82
lib/Migration/MigrateUserThemeSettings.php Normal file
View File

@ -0,0 +1,82 @@
<?php
declare(strict_types=1);
/**
* Breeze Dark theme for Nextcloud
*
* @copyright Copyright (C) 2023 Magnus Walbeck <mw@mwalbeck.org>
*
* @author Magnus Walbeck <mw@mwalbeck.org>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
namespace OCA\BreezeDark\Migration;
use OCP\IConfig;
use OCP\IDBConnection;
use OCP\DB\QueryBuilder\IQueryBuilder;
use OCP\Migration\IOutput;
use OCP\Migration\IRepairStep;
class MigrateUserThemeSettings implements IRepairStep
{
/** @var IDBConnection */
private $db;
/** @var IConfig */
private $config;
public function __construct(IDBConnection $db, IConfig $config)
{
$this->db = $db;
$this->config = $config;
}
public function getName(): string
{
return "Migrate user theme settings";
}
public function run(IOutput $output): void
{
$settingsVersion = $this->config->getAppValue("breezedark", "theme_settings_version", "0");
if ($settingsVersion >= "2") {
return;
}
$userQb = $this->db->getQueryBuilder();
$userQb->select('userid')->from('preferences')->where(
$userQb->expr()->eq('appid', $userQb->createNamedParameter('breezedark'), IQueryBuilder::PARAM_STR),
$userQb->expr()->eq('configkey', $userQb->createNamedParameter('theme_enabled')),
$userQb->expr()->eq('configvalue', $userQb->createNamedParameter('1'))
);
$result = $userQb->executeQuery();
$users = $result->fetchAll();
foreach($users as $user) {
$enabledThemes = json_decode($this->config->getUserValue($user["userid"], "theming", "enabled-themes", "[]"));
$enabledThemes = array_merge(["breezedark"], $enabledThemes);
$this->config->setUserValue($user["userid"], "theming", "enabled-themes", json_encode(array_values(array_unique($enabledThemes))));
}
$this->config->setAppValue("breezedark", "theme_settings_version", "2");
}
}

4
lib/Settings/Admin.php
View File

@ -59,12 +59,12 @@ class Admin implements ISettings
*/
public function getForm(): TemplateResponse
{
$themeEnabled = $this->config->getAppValue($this->appName, 'theme_enabled', "0");
$themeEnforced = $this->config->getAppValue($this->appName, 'theme_enforced', "0");
$themeLoginPage = $this->config->getAppValue($this->appName, 'theme_login_page', "1");
$themeAutomaticActivation = $this->config->getAppValue($this->appName, 'theme_automatic_activation_enabled', "0");
$themeCustomStyling = $this->config->getAppValue($this->appName, 'theme_custom_styling', "");
return new TemplateResponse('breezedark', 'admin', [
"themeEnabled" => $themeEnabled,
"themeEnforced" => $themeEnforced,
"themeLoginPage" => $themeLoginPage,
"themeAutomaticActivation" => $themeAutomaticActivation,
"themeCustomStyling" => $themeCustomStyling

9
lib/Settings/Personal.php
View File

@ -47,7 +47,7 @@ class Personal implements ISettings
private $userId;
/** @var string */
private $appPath;
private $appWebPath;
/**
* @param string $appName
@ -72,11 +72,12 @@ class Personal implements ISettings
*/
public function getForm(): TemplateResponse
{
$default = $this->config->getAppValue($this->appName, 'theme_enabled', "0");
$themeEnforced = $this->config->getAppValue($this->appName, 'theme_enforced', "0");
$defaultAutomaticActivation = $this->config->getAppValue($this->appName, 'theme_automatic_activation_enabled', "0");
$themeEnabled = $this->config->getUserValue($this->userId, $this->appName, 'theme_enabled', $default);
$themeEnabled = $this->config->getUserValue($this->userId, $this->appName, 'theme_enabled', "0");
$themeAutomaticActivation = $this->config->getUserValue($this->userId, $this->appName, 'theme_automatic_activation_enabled', $defaultAutomaticActivation);
return new TemplateResponse('breezedark', 'personal', [
"themeEnforced" => $themeEnforced,
"themeEnabled" => $themeEnabled,
"themeAutomaticActivation" => $themeAutomaticActivation,
"appWebPath" => $this->appWebPath
@ -88,7 +89,7 @@ class Personal implements ISettings
*/
public function getSection(): string
{
return 'accessibility';
return 'theming';
}
/**

4473
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -8,9 +8,12 @@
"stylelint": "^13.13.1",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-sass-guidelines": "^7.1.0",
"stylelint-prettier": "^1.2.0"
"stylelint-prettier": "^1.2.0",
"sass": "^1.54.9"
},
"scripts": {
"watch": "sass --poll --watch css/server.scss:css/server.css css/server-automatic.scss:css/server-automatic.css",
"build": "sass css/server.scss:css/server.css css/server-automatic.scss:css/server-automatic.css",
"prettier": "prettier --check css js",
"prettier:fix": "prettier --write css js",
"stylelint": "stylelint css",

BIN
screenshot.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 114 KiB

After

Width:  |  Height:  |  Size: 159 KiB

15
templates/admin.php
View File

@ -30,14 +30,17 @@ script('breezedark', 'settings-admin');
<div id="breezedark" class="breezedark-admin section">
<h2><?php p($l->t("Breeze Dark")); ?></h2>
<p><?php p($l->t("A Dark theme based on Breeze Dark by the KDE project. Please refresh the page for changes to take effect.")); ?></p>
<p><?php p($l->t("This setting will enable the theme by default, for any unauthenticated users and users who have not set a preference.")); ?></p>
<input type="checkbox" class="checkbox" id="breezedark-theme-enabled" <?php p($themeEnabled ? "checked" : ""); ?>>
<label for="breezedark-theme-enabled"><?php p($l->t("Enable Breeze Dark theme by default")); ?></label>
<p><?php p($l->t("This setting will enforce the usage of this theme. Please note, this will prevent users from disabling or choosing a different theme.")); ?></p>
<input type="checkbox" class="checkbox" id="breezedark-theme-enabled" <?php p($themeEnforced ? "checked" : ""); ?>>
<label for="breezedark-theme-enabled"><?php p($l->t("Enforce use of the Breeze Dark theme")); ?></label>
<p><?php p($l->t("This setting will enable the automated activation by the clients system settings by default, for any unauthenticated users and users who have not set a preference.")); ?></p>
<input type="checkbox" class="checkbox" id="breezedark-automatic-activation-enabled" <?php p($themeEnabled ? "" : "disabled");?> <?php p($themeAutomaticActivation ? "checked" : ""); ?>>
<input type="checkbox" class="checkbox" id="breezedark-automatic-activation-enabled" <?php p($themeEnforced ? "" : "disabled");?> <?php p($themeAutomaticActivation ? "checked" : ""); ?>>
<label for="breezedark-automatic-activation-enabled"><?php p($l->t("Enable Breeze Dark automated activation by the clients system settings by default")); ?></label>
<p><?php p($l->t("This setting will allow you to choose if the login page should be themed when the theme is enabled by default.")); ?></p>
<input type="checkbox" class="checkbox" id="breezedark-theme-login-page" <?php p($themeEnabled ? "" : "disabled");?> <?php p($themeLoginPage ? "checked" : "");?>>
<p><?php p($l->t("This setting will allow you to choose if the login page should be themed. This only has an effect if the theme is enforced or during the login process for a user that has the theme enabled.")); ?></p>
<input type="checkbox" class="checkbox" id="breezedark-theme-login-page" <?php p($themeLoginPage ? "checked" : ""); ?>>
<label for="breezedark-theme-login-page"><?php p($l->t("Theme the login page")); ?></label>
<h3><?php p($l->t("Custom Styling")); ?></h3>

9
templates/personal.php
View File

@ -25,6 +25,7 @@
script('breezedark', 'settings-personal');
style('breezedark', 'settings');
?>
<div id="breezedark" class="breezedark-personal section">
@ -36,9 +37,13 @@ script('breezedark', 'settings-personal');
<div class="preview-description">
<h3><?php p($l->t("Breeze Dark theme")); ?></h3>
<p><?php p($l->t("A Dark theme based on Breeze Dark by the KDE project. Please refresh the page for changes to take effect.")); ?></p>
<input type="checkbox" class="checkbox" id="breezedark-enabled" <?php p($themeEnabled ? "checked" : ""); ?>>
<?php if ($themeEnforced) : ?>
<input type="checkbox" class="checkbox" id="breezedark-enabled" disabled checked>
<?php else : ?>
<input type="checkbox" class="checkbox" id="breezedark-enabled" <?php p($themeEnabled ? "checked" : ""); ?>>
<?php endif; ?>
<label for="breezedark-enabled"><?php p($l->t("Enable Breeze Dark theme")); ?></label>
<input type="checkbox" class="checkbox" id="breezedark-automatic-activation-enabled" <?php p($themeEnabled ? "" : "disabled");?> <?php p($themeAutomaticActivation ? "checked" : ""); ?>>
<input type="checkbox" class="checkbox" id="breezedark-automatic-activation-enabled" <?php p($themeAutomaticActivation ? "checked" : ""); ?>>
<label for="breezedark-automatic-activation-enabled"><?php p($l->t("Enable Breeze Dark automated activation by clients system settings")); ?></label>
</div>
</div>