1
0
Fork 0
mirror of https://github.com/mwalbeck/nextcloud-breeze-dark.git synced 2025-06-24 14:21:03 +00:00
nextcloud-breeze-dark/css/server/_icons.scss

603 lines
13 KiB
SCSS
Raw Normal View History

2019-12-09 21:55:08 +01:00
/***
* @copyright Copyright (c) 2017, Magnus Walbeck <mw@mwalbeck.org>
*
* @license GNU AGPL version 3
***/
2020-02-23 18:00:01 +01:00
/* Places ------------------------------------------------------------------- */
.icon-home {
background-image: var(--icon-home-f2f2f2) !important;
}
.icon-contacts {
background-image: var(--icon-contacts-f2f2f2) !important;
}
.icon-link {
background-image: var(--icon-link-f2f2f2) !important;
}
.icon-calendar {
background-image: var(--icon-calendar-f2f2f2) !important;
}
.icon-picture {
background-image: var(--icon-picture-f2f2f2) !important;
}
.icon-files {
background-image: var(--icon-files-f2f2f2) !important;
}
/* Filetypes ---------------------------------------------------------------- */
.icon-text {
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;
}
/* 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;
}
/* Actions ------------------------------------------------------------------ */
.icon-star {
background-image: var(--icon-star-f2f2f2) !important;
}
.icon-star-dark {
background-image: var(--icon-star-dark-f2f2f2) !important;
}
.icon-search {
background-image: var(--icon-search-f2f2f2) !important;
}
.icon-password {
background-image: var(--icon-password-f2f2f2) !important;
}
.icon-settings {
background-image: var(--icon-settings-f2f2f2) !important;
}
.icon-settings-dark,
#app-settings-header .settings-button {
2020-02-23 18:00:01 +01:00
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;
}
2020-02-23 18:00:01 +01:00
}
.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 {
2020-02-23 18:00:01 +01:00
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,
#app-navigation:not(.vue) .collapsible::before {
2020-02-23 18:00:01 +01:00
background-image: var(--icon-triangle-s-f2f2f2) !important;
}
.icon-more {
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 {
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 {
background-image: var(--icon-toggle-f2f2f2) !important;
}
.icon-error {
background-image: var(--icon-error-f2f2f2) !important;
}
.icon-checkmark {
background-image: var(--icon-checkmark-f2f2f2) !important;
}
.icon-user-admin {
background-image: var(--icon-user-admin-f2f2f2) !important;
}
.icon-arrow-right {
background-image: var(--icon-arrow-right-f2f2f2) !important;
}
.icon-arrow-left {
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-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 {
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-pause {
background-image: var(--icon-pause-f2f2f2) !important;
}
2019-11-28 22:13:51 +01:00
/* Apps that haven't moved to variables for icons ---------------------------- */
// News
2020-01-25 17:00:15 +01:00
.app-news .icon-rss {
background-image: var(--icon-news-rss-000) !important;
2019-11-28 22:13:51 +01:00
}
.icon-unpinned {
2020-01-25 17:00:15 +01:00
background-image: var(--icon-news-unpinned-000) !important;
2019-11-28 22:13:51 +01:00
}
.icon-pinned {
2020-01-25 17:00:15 +01:00
background-image: var(--icon-news-pinned-000) !important;
2019-11-28 22:13:51 +01:00
}
.icon-full-text-disabled {
2020-01-25 17:00:15 +01:00
background-image: var(--icon-news-nonfulltext-000) !important;
2019-11-28 22:13:51 +01:00
}
.icon-full-text-enabled {
2020-01-25 17:00:15 +01:00
background-image: var(--icon-news-fulltext-000) !important;
}
.icon-updatemode-default {
background-image: var(--icon-news-updatemodedefault-000) !important;
}
.icon-updatemode-unread {
background-image: var(--icon-news-updatemodeunread-000) !important;
2019-11-28 22:13:51 +01:00
}
// Circles
// Circle in files app navbar
.nav-icon-circlesfilter {
2019-12-16 23:51:43 +01:00
background-image: var(--icon-circles-circles-000) !important;
2019-11-28 22:13:51 +01:00
}
// Override Deck apps override of the deck icon
.icon-deck {
background-image: var(--icon-deck-deck-000) !important;
}
// Override Deck apps override of the help icon
.icon-help {
background-image: var(--icon-help-000);
}
2019-12-16 23:51:43 +01:00
// Share by email
.icon-social-email {
background-image: var(--icon-mail-000) !important;
}
// Share by Diaspora
2020-01-18 21:51:15 +01:00
.social-diaspora {
2019-12-16 23:51:43 +01:00
background-image: var(--icon-federatedfilesharing-social-diaspora-000) !important;
}
// Share by Twitter
2020-01-18 21:51:15 +01:00
.social-twitter {
2019-12-16 23:51:43 +01:00
background-image: var(--icon-federatedfilesharing-social-twitter-000) !important;
}
// Share by Facebook
2020-01-18 21:51:15 +01:00
.social-facebook {
2019-12-16 23:51:43 +01:00
background-image: var(--icon-federatedfilesharing-social-facebook-000) !important;
}
2020-01-04 22:23:13 +01:00
// Passman icon expired
//source https://material.io/tools/icons/?icon=restore&style=baseline
.icon-expired {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0Jz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PHBhdGggZD0nTTEzIDNjLTQuOTcgMC05IDQuMDMtOSA5SDFsMy44OSAzLjg5LjA3LjE0TDkgMTJINmMwLTMuODcgMy4xMy03IDctN3M3IDMuMTMgNyA3LTMuMTMgNy03IDdjLTEuOTMgMC0zLjY4LS43OS00Ljk0LTIuMDZsLTEuNDIgMS40MkM4LjI3IDE5Ljk5IDEwLjUxIDIxIDEzIDIxYzQuOTcgMCA5LTQuMDMgOS05cy00LjAzLTktOS05em0tMSA1djVsNC4yOCAyLjU0LjcyLTEuMjEtMy41LTIuMDhWOEgxMnonIGZpbGw9JyNmMmYyZjInLz48L3N2Zz4=") !important;
2020-01-04 22:23:13 +01:00
}
2020-01-04 22:42:06 +01:00
// Flow upload
.app-flowupload .icon-file.select-file-icon {
background-image: var(--icon-text-000) !important;
}
2019-11-28 22:13:51 +01:00
/* CSS tricks to change icon color ------------------------------------------ */
.app-settings {
// Navigation in settings
#app-navigation li a img {
filter: invert(95%) !important;
}
#apps-list .section .app-image .app-icon,
2019-12-16 23:51:43 +01:00
#apps-list-search .section .app-image .app-icon,
2019-11-28 22:13:51 +01:00
#app-sidebar #app-details-view image.app-icon {
filter: invert(5%);
}
// Support submenu -> system information
.system-information div img[src$="/apps/support/img/system-info.svg"] {
filter: invert(95%);
}
.infoicon {
filter: invert(95%);
}
2019-11-28 22:13:51 +01:00
}
#settings #expanddiv li a img {
filter: invert(95%);
}
// Icons in the global notifications dropdown
2019-12-04 18:54:10 +01:00
.notification-icon {
filter: invert(95%);
}
// Client icons under Settings > Personal > Mobile & Desktop
.clientslinks img.appsmall {
filter: invert(95%);
}
2019-12-05 21:14:31 +01:00
// Two Factor Icons in Personal Settings
img.two-factor-provider-settings-icon,
.icon-u2f-device {
filter: invert(95%);
}
2019-11-28 22:13:51 +01:00
2019-12-05 21:42:32 +01:00
// Home breadcrumb icon in gallery app
.app-gallery .home img {
filter: invert(95%);
}
// Gallery App: Sorting icons and share button
.app-gallery .button img.svg {
filter: invert(95%);
}
// Activity App: Navigation sidebar
.app-activity #app-navigation ul li a img {
filter: invert(95%);
}
// Activity App: Icons in activity feed
2019-12-16 21:50:27 +01:00
.app-activity .activity-icon,
.activity .activity-icon {
2019-12-05 21:42:32 +01:00
img[src$="share.svg"],
img[src$="change.svg"],
img[src$="calendar.svg"],
2019-12-23 16:10:12 +01:00
img[src$="comment.svg"],
img[src$="announcementcenter-dark.svg"],
img[src$="archive.svg"],
2019-12-23 16:10:12 +01:00
img[src$="tag.svg"],
2020-01-18 22:00:24 +01:00
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"] {
2019-12-05 21:42:32 +01:00
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%);
}
2019-12-23 16:53:39 +01:00
// Music app: icons for Music player controls in files and in app
#music-controls img.control,
.app-music img.control {
filter: invert(95%);
}
2019-11-28 22:13:51 +01:00
2019-12-23 16:53:39 +01:00
// Music app: follow-playback icon
.app-music #app-sidebar #follow-playback {
filter: invert(95%);
}
2019-11-28 22:13:51 +01:00
2019-12-23 16:53:39 +01:00
// Music app: Play button on album covers
.app-music img.play.svg {
filter: invert(95%);
}
2019-11-28 22:13:51 +01:00
2019-12-23 16:53:39 +01:00
// Music App: Mini play button
.current.playing .play-pause,
.current:not(.playing) .play-pause,
#app-view :hover > .play-pause,
#app-view .current.playing div:hover .play-pause {
filter: invert(95%);
}
2019-11-28 22:13:51 +01:00
2019-12-23 16:53:39 +01:00
// Music app: Play option in file action menu in Files App
.fileActionsMenu .action-music-play img.icon {
filter: invert(95%);
}
2019-11-28 22:13:51 +01:00
// Music app: Settings icon
.app-music .music-nav-settings img.svg {
filter: invert(95%);
}
// play-pause button on hover in nav sidebar
.app-music #app-navigation .play-pause {
filter: invert(95%);
}
2019-12-23 16:56:41 +01:00
// Info icon in contacts menu
#contactsmenu-menu .content .contact img[src$="info.svg"] {
filter: invert(95%);
}
// Audio player: Play option in right click menu in files
.menuitem.action.action-audio img[src$="sound.svg"] {
filter: invert(95%);
}
2020-01-25 16:18:00 +01:00
// 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;
}