From 8ea27dcd3a23d17b8df496d0d856762f43114ea5 Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Fri, 21 Oct 2022 19:58:49 +0530 Subject: [PATCH 1/6] cookbook ui fix --- core/css/server.css | 3449 ++++++++++++++++++++++--------------------- 1 file changed, 1726 insertions(+), 1723 deletions(-) diff --git a/core/css/server.css b/core/css/server.css index 052452cc..ead2bba6 100644 --- a/core/css/server.css +++ b/core/css/server.css @@ -16,1730 +16,1733 @@ * along with this program. If not, see */ @font-face { - font-family: 'Roboto'; - src: url('../webfonts/Roboto-Regular.woff2') format('woff2'), - url('../webfonts/Roboto-Regular.woff') format('woff'); - /* font-weight: 600; */ - /* font-style: normal; */ - font-display: swap; - letter-spacing: 1px; - } - *{ - font-family: 'Roboto'; - } - :root { - --color-primary: #007fff; - --color-primary-element: #007fff; - --color-secondary-element: white; - --border-color-secondary-element: #007fff; - --color-primary-element-light: #007fff; - --color-error: #fb3845; - --color-delete: #e9322d; - --color-success: #3ad975; - --color-main-background: #ffffff; - --color-main-background-translucent: #f2f2f2; - --color-main-text: black; - --color-background-hover: white; - --color-text-maxcontrast: black; - --color-border-dark: #e6e6e6; - --color-border: #ebebeb; - --icon-settings-dark-000: #000000; - --icon-inactive-color: #808080; - --icon-active-color: #007fff; - --input-background-color: white; - --menu-icon-color: #222; - --color-dashboard-panels: #f2f2f2; - --color-dashboard-background-plain: #d2d2d2; - --color-sharing-icon-background: #767676; - } - - /* Force a few variables to right values for dark theme */ - body.theme--dark { - --input-background-color: #181818; - --icon-notifications-notifications-000000: url("/svg/notifications/notifications?color=000"); - --icon-notifications-notifications-new-000000: url("/svg/notifications/notifications-new?color=000"); - --icon-search-000: url("/svg/core/actions/search?color=000"); - } - - body.theme--highcontrast { - --icon-inactive-color: black; - } - - #body-user #header, - #body-settings #header, - #body-public #header { - background-color: white !important; - } - - button:not(:disabled):hover, - .primary:not(:disabled):hover, - .button:hover, - button.toggle.has-tooltip:hover, - .primary:active, - input[type="submit"]:active, - input[type="button"]:active, - input[type="reset"]:active, - input[type="button"]:hover, - input[type="submit"]:hover, - input[type="reset"]:hover, - .primary:active, - .button:active, - #new-contact-button:hover, - #new-user-button:hover, - #deleteaccount:hover, - #quotaincreasebutton:hover, - #content-vue.app-tasks .action.icon-checkmark:hover, - .button.today:hover, - button.import-contact__button-main:hover, - button#notes_new_note:hover, - #oc-dialog-filepicker-content .actions.creatable .icon.icon-add:hover { - opacity: 0.8; - } - - /* primary action button, use sparingly */ - button, - .button, - .primary, - input[type="submit"].primary, - input[type="button"].primary, - button.toggle.has-tooltip, - button.primary, - .button.primary, - .primary:active, - input[type="submit"].primary:active, - input[type="button"].primary:active, - button.primary:active, - .button.primary:active, - .actions a.button, - #new-contact-button, - #new-user-button, - #deleteaccount, - #quotaincreasebutton, - .mx-datepicker .mx-datepicker-footer .mx-btn, - #content-vue.app-tasks .action.icon-checkmark, - button.import-contact__button-main, - button#notes_new_note, - #content.app-news button.explore-subscribe, - input[type="button"], - input[type="submit"], - input[type="reset"] { - background-color: var(--color-primary); - color: white; - border-color: var(--color-primary); - } - - input.primary:not(:disabled):hover, - input.primary:not(:disabled):focus, - button.primary:not(:disabled):hover, - button.primary:not(:disabled):focus, - a.primary:not(:disabled):hover, - a.primary:not(:disabled):focus { - background-image: none; - } - - /* For buttons that are not primary or submit/reset/button inputs that are not primary */ - - button.primary + button:not(.primary), - button.primary + button:not(.primary):active, - .entity-picker__navigation button:not(.primary), - .event-popover__buttons button:not(.primary), - .event-popover__buttons button:not(.primary):active, - .oc-dialog-buttonrow.twobuttons button:not(.primary), - .oc-dialog-buttonrow.twobuttons button:not(.primary):active, - .status-buttons .status-buttons__select { - background-color: var(--color-secondary-element); - color: var(--color-primary); - border-color: var(--border-color-secondary-element); - } - - input[type="checkbox"].checkbox + label::before, - input[type="radio"].checkbox + label::before { - border-color: var(--icon-inactive-color); - background-color: white; - } - - textarea:not(:disabled), - textarea:not(:disabled):active, - div[contenteditable="true"]:not(:disabled):active, - textarea:not(:disabled):hover, - div[contenteditable="true"]:not(:disabled):hover, - textarea:not(:disabled):focus, - div[contenteditable="true"]:not(:disabled):focus { - background-color: var(--input-background-color) !important; - } - - select, - textarea, - input[type="text"], - input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([type="file"]):not([type="image"]):not(.multiselect__input), - #content-vue.app-tasks .task-body__checkbox label.reactive.no-nav::before, - #content.app-files #commentsTabView .newCommentForm .message, - .multiselect - .multiselect__content-wrapper - .multiselect__content - li - > span.multiselect__option, - div.select2-container-multi .select2-choices, - div.select2-container-multi.select2-container-active .select2-choices { - background-color: var(--input-background-color); - } - - #settings #expanddiv, - #header .header-right > div > .notification-container.menu { - background-color: var(--color-main-background); - } - - #header .header-appname { - color: var(--color-main-text); - } - - #settings #expanddiv li a.active { - background-color: var(--color-background-hover); - } - body.theme--dark #header .header-right > div > .notification-container.menu, - body.theme--dark #settings #expanddiv { - background-color: var(--color-main-background); - } - .multiselect .multiselect__tags input.multiselect__single, - .multiselect .multiselect__tags span.multiselect__single, - .multiselect .multiselect__tags span.multiselect__placeholder, - .multiselect .multiselect__tags .multiselect__content, - .multiselect .multiselect__tags .multiselect__tags-wrap, - .multiselect .multiselect__input, - .multiselect - .multiselect__content-wrapper - .multiselect__content - li.multiselect__element, - .multiselect - .multiselect__content-wrapper - .multiselect__content - li.multiselect__element - .multiselect__option, - #content-vue.app-contacts - .property.property--without-actions.property--last.property-masonry:not(.property--addressbooks):not(.property--groups) - .multiselect - .multiselect__tags - .multiselect__input, - #content-vue.app-contacts - .multiselect - .multiselect__tags - input.multiselect__input, - #content-vue.app-contacts - .multiselect - > .multiselect__tags - > span.multiselect__single, - #content.app-files #commentsTabView .newCommentForm .message:hover, - #app-dashboard .footer a:hover, - #app-content-systemtagsfilter .select2-container ul { - background-color: var(--input-background-color) !important; - } - /* use logos from theme */ - #header .logo, - #firstrunwizard .logo { - background-image: url("../img/logo@2x.svg"); - width: 256px; - height: 128px; - } - #header .logo-icon { - width: 130px; - height: 40px; - top: 5px; - bottom: 0px; - border-radius: 22px; - } - - #header #nextcloud { - padding-left: 150px; - } - - #header .notifications .svg { - height: 16px; - width: 16px; - } - - /* - For the overflow in search filter; - It doesn't use specific ids so gave the rule a lot of specificity - */ - .popover > .popover__wrapper .open ul li p { - white-space: normal; - } - - #unified-search #header-menu-unified-search .header-menu__carret { - right: 125px; - } - - /* App Navigation rules */ - #app-navigation:not(.vue) > ul > li.active, - #app-navigation:not(.vue) > ul > li a:active, - #app-navigation:not(.vue) > ul > li a.selected, - #app-navigation:not(.vue) > ul > li a.active, - #app-navigation:not(.vue) > ul > li.active > a, - #app-navigation:not(.vue) > ul > li a:active > a, - #app-navigation:not(.vue) > ul > li a.selected > a, - #app-navigation:not(.vue) > ul > li a.active > a { - background-color: var(--color-main-background); - } - - li.app-navigation-entry, - .conversations .acli_wrapper .acli { - background-clip: content-box; - } - - li.app-navigation-entry.active { - background-color: var(--color-main-background) !important; - } - - li.app-navigation-entry:not(.active):hover, - #content.app-deck li.app-navigation-entry.active { - background-color: var(--color-background-hover) !important; - } - - li.app-navigation-entry.app-navigation-entry--collapsible:hover { - background-color: var(--color-main-background) !important; - } - - li.app-navigation-entry.app-navigation-entry--collapsible > a:hover, - #content.app-passwords #app-navigation .active { - background-color: var(--color-background-hover); - } - - /* CSS TWEAKS TAKEN FROM THEMING APP (disabled now) */ - - .nc-theming-main-background { - background-color: #999999; - } - .nc-theming-main-text { - color: #fff; - } - .nc-theming-contrast { - color: #fff; - } - #appmenu:not(.inverted) svg { - filter: none; - } - #appmenu.inverted svg { - filter: invert(1); - } - .icon-folder, - .icon-filetype-folder { - background-image: var(--icon-folder-007FFF); - } - .icon-filetype-text { - background-image: var(--icon-text-007fff); - } - .icon-filetype-folder-drag-accept { - background-image: var(--icon-folder-drag-accept-007fff) !important; - } - #header .logo { - background-image: url("../img/logo@2x.svg"); - } - #body-user #header, - #body-settings #header, - #body-public #header { - color: var(--color-main-text); - background-image: none; - } - - #body-user.dark--theme, - #body-settings.dark--theme { - color: white !important; - } - - #header .menu, - #header #launcher-menu, - #header .header--menu { - opacity: 1; - } - - #appmenu li span { - color: var(--color-main-text); - } - - #header .logo { - background-size: auto; - } - - input.primary, - #alternative-logins li a { - background-color: #999999; - border: 1px solid #fff; - color: #fff; - } - footer { - height: 92px; - } - - .notifications-button.hasNotifications { - opacity: 0.6 !important; - } - .notifications-button.hasNotifications:hover, - .notifications-button.hasNotifications:focus { - opacity: 1 !important; - } - #header .notification-wrapper .dismiss-all .icon.icon-close { - margin-top: 4px; - } - #content #app-navigation, - #content.app-news #app-navigation button { - color: var(--color-main-text); - border-right: 1px solid var(--color-border); - } - - .icon-home, - #oc-dialog-filepicker-content .dirtree div:first-child a { - background-image: var(--icon-home-808080); - } - - #controls .icon-home, - #oc-dialog-filepicker-content .dirtree div:first-child a { - background-size: 20px; - } - - .icon-mail { - background-image: var(--icon-mail-808080); - } - .icon-error { - background-image: var(--icon-error-808080); - } - - .icon-details { - background-image: var(--icon-details-808080); - } - - .icon-add, - .action-item.icon-add, - button.action-item__menutoggle.icon-add, - #content.app-news .add-new button.icon-add, - .who-has-access .action-item.icon-add.addAdditionalAdmin, - #content-vue.app-tasks - #app-navigation-vue - .app-navigation-entry-icon.sprt-add::before { - background-image: var(--icon-add-808080); - } - - .notification-container .emptycontent .icon-notifications-dark { - background-image: var(--icon-notifications-notifications-808080); - background-size: 40px; - } - - .icon-rename, - .who-has-access .action-item--single.action-item.icon-rename, - .where-is-my-data .action-item--single.action-item.icon-rename { - background-image: var(--icon-rename-808080); - } - - .icon-download { - background-image: var(--icon-download-808080); - } - .icon-template-add { - background-image: var(--icon-template-add-808080); - } - .icon-tasks, - .panel--header .icon-tasks, - .modal__content .icon-tasks { - background-image: var(--icon-tasks-tasks-808080); - } - #tasks_panel .empty-content .icon-tasks { - background-image: var(--icon-tasks-tasks-808080) !important; - } - .icon-checkmark { - background-image: var(--icon-checkmark-808080); - } - .icon-group { - background-image: var(--icon-group-808080); - } - .icon-timezone { - background-image: var(--icon-timezone-808080); - } - .icon-edit { - background-image: var(--icon-edit-808080); - } - .icon-reminder { - background-image: var(--icon-notifications-notifications-808080); - } - .icon-gravatar { - background-image: var(--icon-contacts-gravatar-808080); - } - #content-vue.app-calendar .app-sidebar-tabs__tab-icon.icon-reminder { - background-size: 13px; - } - .icon-clippy { - background-image: var(--icon-clippy-808080); - } - .icon-confirm { - background-image: var(--icon-confirm-808080); - } - - .icon-user-admin { - background-image: var(--icon-user-admin-808080); - } - - .icon-disabled-users { - background-image: var(--icon-disabled-users-808080); - } - - .icon-notes, - .icon-notes-trans { - background-image: var(--icon-notes-notes-808080); - } - .icon-projects { - background-image: var(--icon-projects-808080); - } - .icon-comment { - background-image: var(--icon-comment-808080); - } - .icon-activity { - background-image: var(--icon-activity-activity-808080); - } - .icon-link { - background-image: var(--icon-public-808080); - } - button .icon-link { - background-image: var(--icon-public-ffffff); - } - - .icon-recent { - background-image: var(--icon-files-recent-808080); - } - - .icon-more, - .icon-more-white { - background-image: var(--icon-more-808080); - } - - .avatar-shared.icon-more-white { - background-image: var(--icon-more-fff); - } - - #collection-list .avatar .icon-projects { - background-image: var(--icon-projects-fff); - } - - #sharing-inherited-shares .sharing-entry .avatar-shared.icon-more-white, - .sharing-entry.sharing-entry__internal .avatar-external.icon-external-white, - #collection-list .avatar { - background-color: var(--color-sharing-icon-background); - } - - .icon-files, - .icon-category-files, - .icon-emptyfolder { - background-image: var(--icon-files-app-808080); - } - - #header .icon-notifications, - #header .icon-notifications-new { - background-size: 17px; - } - - .icon-notifications-new { - background-image: var(--icon-notifications-notifications-new-000000); - } - - .icon-notifications { - background-image: var(--icon-notifications-notifications-000000); - } - - .icon-external, - .icon-goto { - background-image: var(--icon-external-808080); - } - - .action.icon-checkmark { - background-image: var(--icon-checkmark-ffffff); - } - .icon-phone { - background-image: var(--icon-phone-808080); - } - - .icon-password, - .icon-category-security { - background-image: var(--icon-password-808080); - } - .icon-link { - background-image: var(--icon-link-808080); - } - .icon-toggle-filelist { - background-image: var(--icon-toggle-filelist-808080); - } - - button.icon-toggle-filelist { - background-color: var(--color-main-background); - } - - .icon-toggle-pictures { - background-image: var(--icon-toggle-pictures-808080); - } - - .button .icon-add, - button .icon-add, - button.icon-add, - #new-contact-button.icon-add, - #content-vue.app-notes #notes_new_note.icon-add, - #oc-dialog-filepicker-content .actions.creatable .icon.icon-add, - #content.app-news .add-new .icon-add.add-new-folder-primary { - background-image: var(--icon-add-ffffff); - } - - .popover .action-button .action-button__icon.icon-add { - background-image: var(--icon-add-808080); - } - - button > span[class^="icon-"], - .button > span[class^="icon-"], - button > span[class*=" icon-"], - .button > span[class*=" icon-"] { - opacity: 1; - } - - .icon-share, - .icon-shared { - background-image: var(--icon-share-808080); - } - - .icon-contacts-dark, - .icon-contacts, - .icon-category-social { - background-image: var(--icon-contacts-app-808080); - } - - #contactsmenu .icon-contacts { - background-image: var(--icon-contacts-000); - } - - .icon-user, - .icon-category-installed { - background-image: var(--icon-user-808080); - } - - .icon-category-enabled { - background-image: var(--icon-checkmark-808080); - } - - .icon-star, - .icon-star-dark, - .icon-starred:hover { - background-image: var(--icon-star-808080); - } - - .icon-starred, - .icon-star:hover, - .icon-star-dark:hover, - #filestable .filename .favorite-mark .icon-starred { - background-image: var(--icon-star-FFCC00); - } - - .icon-close, - #header-menu-unified-search .icon-close, - .icon-category-disabled { - background-image: var(--icon-close-808080); - } - - #header #searchbox { - color: var(--color-main-text); - border-color: var( - --icon-inactive-color - ) !important; /* !important used in source so needed to override */ - } - - #app-navigation, - #app-navigation-vue { - border-right: 2px solid var(--color-border); - } - - table th, - table td { - border-bottom: 1px solid var(--color-border); - } - - .icon-files-dark { - background-image: var(--icon-files-app-808080); - } - - .icon-fullscreen { - background-image: var(--icon-fullscreen-808080); - } - - .icon-calendar-dark { - background-image: var(--icon-calendar-calendar-808080); - } - .icon-talk { - background-image: var(--icon-spreed-app-808080); - } - - #app-navigation li a, - #app-navigation:not(.vue) > ul > li > a, - #app-navigation:not(.vue) > ul > li > ul > li > a { - opacity: 1; - } - - /* Dashboard App */ - - #body-user[data-dashboard-background]:not(.theme--dark) - #app-dashboard - .statuses - button:hover, - #body-user[data-dashboard-background]:not(.theme--dark) .edit-panels:hover { - background-color: var(--color-background-hover) !important; - } - - body.theme--highcontrast #app-dashboard .statuses button, - body.theme--highcontrast #app-dashboard .edit-panels { - border: 1px solid var(--color-main-text); - } - - #body-user[data-dashboard-background]:not(.theme--dark) #app-dashboard .panel, - #body-user[data-dashboard-background]:not(.theme--dark) - #app-dashboard - .statuses - button, - #body-user[data-dashboard-background]:not(.theme--dark) - #app-dashboard - .footer - a { - background-color: var(--color-dashboard-panels); - /* opacity: 0.9; */ - } - - #body-user[data-dashboard-background]:not(.theme--dark) #header { - opacity: 0.95; - } - #body-user[data-dashboard-background].theme--highcontrast #header { - background-color: var(--color-main-background) !important; - } - - #app-dashboard .panel .panel--header > .icon-calendar-dark { - background-position: 14px 10px; - } - - #app-dashboard .panel .panel--header > .icon-files-dark { - background-position: 14px 16px; - } - - #app-dashboard .statuses button { - color: var(--color-main-text); - } - - #content.app-dashboard #app-dashboard, - body[data-dashboard-background]:not(.theme--dark) - .background-selector - .background.filepicker, - body[data-dashboard-background]:not(.theme--dark) - .background-selector - .background.default, - body[data-dashboard-background]:not(.theme--dark) - .modal__content - .background-selector - .background.color { - background-color: var(--color-dashboard-background-plain); - color: var(--color-main-text); - } - - body[data-dashboard-background="#0082c9"] #app-dashboard, - body[data-dashboard-background="default"] #app-dashboard { - background-color: var(--color-dashboard-background-plain); - } - - body[data-dashboard-background="default"] #app-dashboard { - background-image: none !important; - } - - body[data-dashboard-background="#0082c9"] #app-dashboard h2, - body[data-dashboard-background="default"] #app-dashboard h2 { - color: var(--color-main-text); - } - - /* Files App */ - - #filestable .thumbnail { - background-repeat: no-repeat; - } - - .breadcrumb .canDrop > a, - #filestable tbody tr.canDrop, - #filestable.view-grid:not(.hidden) - #fileList - tr:not(.hidden).selected - .thumbnail-wrapper, - #filestable.view-grid:not(.hidden) - #fileList - tr:not(.hidden).selected - .fileactions, - #filestable.view-grid:not(.hidden) - #fileList - tr:not(.hidden).selected - .nametext { - background-color: var(--color-primary-light); - } - - .actions .button.new:active { - background-color: var(--color-primary); - } - - #fileList td a a.action { - opacity: 0.6; - } - - #fileList td a a.action:hover { - opacity: 0.8; - } - - #content.app-files #filestable.view-grid thead tr, - #content.app-files #filestable.view-grid thead th { - border-bottom: 0px; - } - - #content.app-files #controls .icon-shared { - background-size: 14px; - } - - #editor .menububble.is-active .menububble__button { - background-color: var(--color-primary); - } - - #editor .menububble.is-active .menububble__button:hover { - background-color: var(--color-background-hover); - } - - #editor .menububble__button:hover .menububble__buttontext { - color: var(--color-primary); - } - - #editor .menububble__button:hover .icon-link { - background-image: var(--icon-public-007fff); - } - - #editor .menububble__button:hover .icon-file { - background-image: var(--icon-text-007fff); - } - - #uploadprogressbar + button.icon-close, - #google-drive button .icon-close, - #google-photos button .icon-close { - background-image: var(--icon-close-fff); - } - - #google-rm-cred .icon-close { - background-image: var(--icon-close-000); - opacity: 1; - } - - .breadcrumb div.crumb span.icon-shared, - .breadcrumb div.crumb span.icon-public, - .selectedActions a, - #commentsTabView .comment .action { - opacity: 0.8; - } - - #content.app-files #emptycontent .icon-share { - background-image: var(--icon-files-share-808080); - } - - #content #app-content-files #controls { - background-color: var(--color-main-background); - } - - #app-content-files button .icon-file, - #editor .menububble__button .icon-file { - background-image: var(--icon-text-ffffff); - } - - #editor .ProseMirror { - background-color: var(--color-main-background) !important; - } - - #fileList tr td.selection > .selectCheckBox + label::before, - #oc-dialog-filepicker-content .actions.creatable .icon.icon-add { - opacity: 1; - } - - #filestable .filesize, - #filestable .date .modified.live-relative-timestamp { - color: var(--color-main-text) !important; - } - .nav-icon-files { - background-image: var(--icon-files-app-808080); - } - - .nav-icon-files.active { - background-image: var(--icon-files-app-007fff); - } - - .nav-icon-recent { - background-image: var(--icon-files-recent-808080); - } - - .nav-icon-recent.active { - background-image: var(--icon-files-recent-007fff); - } - - .nav-icon-favorites { - background-image: var(--icon-star-outline-808080); - } - .nav-icon-favorites.active { - background-image: var(--icon-star-outline-007fff); - } - - .nav-icon-deletedshares { - background-image: var(--icon-files-unshare-808080); - } - .nav-icon-deletedshares.active { - background-image: var(--icon-files-unshare-007fff); - } - - .nav-icon-shareoverview, - .nav-icon-sharingout, - .nav-icon-sharingin, - .nav-icon-pendingshares, - #content.app-files .icon-share, - #content.app-files .icon-shared { - background-image: var(--icon-files-share-808080); - } - .nav-icon-shareoverview.active, - .nav-icon-sharingout.active, - .nav-icon-sharingin.active, - .nav-icon-pendingshares.active { - background-image: var(--icon-files-share-007fff); - } - .nav-icon-sharinglinks { - background-image: var(--icon-public-808080); - } - .nav-icon-sharinglinks.active { - background-image: var(--icon-public-007fff); - } - .nav-icon-trashbin { - background-image: var(--icon-files-delete-808080); - } - - .nav-icon-trashbin.active { - background-image: var(--icon-files-delete-007fff); - } - - .nav-icon-systemtagsfilter { - background-image: var(--icon-tag-808080); - } - - .nav-icon-systemtagsfilter.active { - background-image: var(--icon-tag-007fff); - } - - .icon-quota { - background-image: var(--icon-quota-808080); - } - .app-sidebar-header__star.icon-star, - .app-sidebar-header__star.icon-starred, - .app-sidebar-header__star.icon-star:hover, - .app-sidebar-header__star.icon-starred:hover, - #view-toggle { - background-size: 16px; - } - - #collection-list .multiselect .multiselect__tags .multiselect__input { - background-color: transparent !important; - } - #collection-list - .multiselect.multiselect--active - .multiselect__tags - .multiselect__input { - background-color: var(--input-background-color) !important; - } - #app-sidebar-vue #sharing .sharing-entry .avatar-external, - #app-sidebar-vue #sharing .sharing-entry .avatar-shared { - background-color: var(--color-primary); - } - #app-sidebar-vue #sharing .sharing-entry .avatar-shared.icon-more-white { - background-image: var(--icon-more-fff); - } - - #app-sidebar-vue #sharing .sharing-entry .avatardiv.icon-public-white { - background-color: var(--color-primary) !important; - } - - body.theme--highcontrast #header .header-right .magnify-icon { - background: var(--icon-search-000) no-repeat center; - } - - #header .header-right .magnify-icon { - background: var(--icon-search-000) no-repeat center; - background-size: 15px; - } - - #content.app-files #filestable span, - #content.app-files #filestable td { - color: var(--color-main-text) !important; - } - - /* Contacts App */ - - #content-vue.app-contacts - .multiselect.property__label - .multiselect__tags - span.multiselect__single, - #content-vue.app-contacts - .multiselect.property__label - .multiselect__tags - .multiselect__input { - background-color: var(--color-main-background) !important; - } - - #contacts-list { - margin-top: 44px; - } - - li.app-navigation-entry.active .icon-user { - background-image: var(--icon-user-007fff); - } - - li.app-navigation-entry.active .icon-contacts-dark, - li.app-navigation-entry.active .icon-group { - background-image: var(--icon-contacts-app-007fff); - } - li.app-navigation-entry.active .icon-address-book { - background-image: var(--icon-contacts-address-book-007fff); - } - li.app-navigation-entry.active .icon-recent-actors { - background-image: var(--icon-contacts-recent-actors-007fff); - } - - #content-vue.app-contacts .multiselect .multiselect__tags .multiselect__input, - #content-vue.app-contacts - .multiselect - > .multiselect__tags - > .multiselect__single { - background-color: var(--color-main-background) !important; - } - - #content-vue.app-contacts ~ .popover .action.active, - #content-vue.app-contacts ~ .popover .action.active .action-input:hover, - #content-vue.app-contacts ~ .popover .action.active .action-input:focus-within { - opacity: 1; - } - - #content-vue.app-contacts ~ .popover .action.active .action-input { - opacity: .7; - } - - #content-vue.app-contacts .empty-content__icon { - height: 80px; - } - - #content-vue.app-contacts - #addressbook-list - .addressbook-shares - .multiselect__content { - background-color: var(--color-secondary-element); - } - - #content-vue.app-contacts .empty-content__title { - text-align: center; - } - #content-vue.app-contacts .app-content > .empty-content { - margin: 20vh; - } - .icon-address-book { - background-image: var(--icon-contacts-address-book-808080); - } - - #content-vue.app-contacts .app-navigation-caption__title { - color: var(--color-main-text); - } - - #content-vue.app-contacts .contact-header__infos input { - background-color: var(--color-main-background); - } - - .property .icon-contacts { - background-image: var(--icon-contacts-app-808080); - } - #content-vue.app-contacts .icon-phone { - background-image: var(--icon-contacts-phone-808080); - } - - button .icon-upload, - #uploadavatarbutton.icon-upload, - .button.primary .icon-upload, - button.primary .icon-upload, - #content-vue.app-calendar .settings-fieldset-interior-item .icon-upload, - #content-vue.app-bookmarks #app-settings-content button .icon-upload, - button.import-contact__button-main .icon-upload, - .import-export button.icon-upload, - .attachments-drag-zone button.icon-upload { - background-image: var(--icon-upload-000); - } - #uploadavatarbutton.icon-upload{ - background-image: var(--icon-upload-ffffff); - } - .action-button .icon-upload, - .menuitem .icon-upload, - button.import-contact__button--local:disabled .import-contact__button-icon.icon-upload - { - background-image: var(--icon-upload-808080); - } - - button .icon-download, - .button .icon-download, - .import-export .button.icon-download { - background-image: var(--icon-download-ffffff); - } - .action-button .icon-download { - background-image: var(--icon-download-808080); - } - - #deleteaccount:not([disabled]) .icon-delete, - button .icon-delete, - .button .icon-delete, - #removeavatar.icon-delete { - background-image: var(--icon-delete-ffffff); - } - - button.menuitem .icon-delete, - .app-navigation-entry-menu button .icon-delete { - background-image: var(--icon-delete-808080); - } - - .menu-icon svg path { - fill: var(--menu-icon-color); - } - .icon-recent-actors { - background-image: var(--icon-contacts-recent-actors-808080); - } - - .popover .action-input__input + .action-input__label { - background-color: var(--color-primary); - } - .popover .action-input__input + .action-input__label > .arrow-right-icon path { - fill: white; - } - - #content-vue.app-contacts .dots-horizontal-icon svg path { - fill: var(--icon-inactive-color); - } - - .mx-icon-calendar svg path { - fill: var(--icon-inactive-color); - } - - #content-vue.app-contacts - ~ .popover - .action-input - .action-input__label::before { - content: unset; - } - - /* Photos App */ - - #content-vue.app-photos #app-navigation-vue .app-navigation-entry.active { - background-color: var(--color-main-background) !important; - } - - #content-vue.app-photos .icon-folder { - background-image: var(--icon-folder-007FFF); - } - #content-vue.app-photos .folder-name__icon { - opacity: 0.8; - } - - li.active .icon-yourphotos { - background-image: var(--icon-photos-app-007fff); - } - .icon-yourphotos { - background-image: var(--icon-photos-app-808080); - } - - li.active .icon-video { - background-image: var(--icon-video-007fff); - } - - .icon-video { - background-image: var(--icon-video-808080); - } - - li.active .icon-favorite { - background-image: var(--icon-star-outline-007fff); - } - .icon-favorite { - background-image: var(--icon-star-outline-808080); - } - - li.active .icon-tag { - background-image: var(--icon-tag-007fff); - } - .icon-tag, - .icon-systemtags { - background-image: var(--icon-tag-808080); - } - - li.active .icon-files-dark { - background-image: var(--icon-files-app-007fff); - } - li.active .icon-address { - background-image: var(--icon-address-007fff); - } - - .icon-address { - background-image: var(--icon-address-808080); - } - - li.active .icon-share { - background-image: var(--icon-share-007fff); - } - - #app-navigation-vue #app-settings #app-settings-header .settings-button, - #app-navigation #app-settings #app-settings-header .settings-button, - .icon-category-tools { - background-image: var(--icon-settings-808080); - } - - #header #header-menu-unified-search .unified-search__form-input { - color: var(--color-main-text); - } - #header #header-menu-unified-search .unified-search__form-input, - #header #header-menu-unified-search .unified-search__input-wrapper { - background-color: var(--color-main-background); - } - - .icon-delete, - button.action-button .icon-delete { - background-image: var(--icon-files-delete-808080); - } - - .menuitem:hover .icon-delete, - .menu-option:hover .icon-delete, - button.action-button:hover .icon-delete, - button.menuitem:hover .icon-delete, - .app-navigation-entry-menu button:hover .icon-delete, - #removeavatar.icon-delete:hover { - background-image: var(--icon-delete-e9322d); - } - - #appmenu li a span { - color: transparent; - } - - #appmenu li:hover a span { - color: var(--icon-inactive-color); - } - - body.theme--highcontrast #appmenu li:hover a span { - color: var(--color-main-text); - } - - #appmenu li:hover a svg { - color: var(--color-main-text); - transform: translateY(-7px); - } - - #appmenu:hover li svg, - #appmenu:hover li .icon-more, - #appmenu:hover li .icon-more-white, - #appmenu:hover li .icon-loading-small, - #appmenu:hover li .icon-loading-small-dark { - transform: none; - } - - /* Settings app */ - - #pass2 + input[name="newpassword-clone"] { - width: 100%; - } - - /* Personal Info */ - - #selectavatar.icon-folder { - background-image: var(--icon-folder-ffffff); - background-color: var(--color-primary); - color: white; - border-color: var(--color-primary); - } - - /* Mobile & Desktop */ - - .button.icon-clippy { - background-image: var(--icon-clippy-808080); - } - - /* Sharing */ - - button.social-facebook { - padding-left: 30px; - background-image: var(--icon-federatedfilesharing-social-facebook-000); - } - - button.social-twitter { - padding-left: 30px; - background-image: var(--icon-federatedfilesharing-social-twitter-000); - } - - button.social-diaspora { - padding-left: 30px; - background-image: var(--icon-federatedfilesharing-social-diaspora-000); - } - - /* Flow */ - - #workflowengine .actions__item.colored { - background-color: var(--color-primary) !important; - } - #workflowengine .actions__item.colored button { - background-color: white; - color: var(--color-primary); - } - - /* Calendar App*/ - - .datepicker-button-section button.button { - background-color: var(--color-main-background); - color: var(--color-main-text); - border: none; - max-width: 100px; - margin: auto; - } - .mx-datepicker .mx-calendar td { - border: 0px; - } - - .icon-eye { - background-image: var(--icon-calendar-eye-808080); - } - - .icon-briefcase { - background-image: var(--icon-calendar-briefcase-808080); - } - - .icon-color-picker { - background-image: var(--icon-calendar-color-picker-808080); - } - .icon-menu { - background-image: var(--icon-menu-808080); - } - .mx-datepicker .mx-input-wrapper { - background-color: var(--input-background-color); - } - - .mx-datepicker-main .mx-datepicker-footer .mx-btn:hover, - .mx-datepicker-main .mx-datepicker-footer .mx-btn:focus { - background-color: var(--color-primary); - color: white; - } - - .mx-datepicker .mx-input { - border: none; - margin-top: 0px; - margin-bottom: 0px; - } - - .datepicker-button-section.icon-leftarrow { - background-image: var(--icon-arrow-left-808080); - } - - .datepicker-button-section.icon-rightarrow { - background-image: var(--icon-arrow-right-808080); - } - - .button.datepicker-button-section__next, - .button.datepicker-button-section__previous { - border: none; - margin: auto; - } - - .new-event-today-view-section .button { - border-radius: 8px; - } - - .icon-new-calendar { - background-image: var(--icon-calendar-calendar-808080); - } - - .icon-new-calendar-with-task-list { - background-image: var(--icon-calendar-new-calendar-with-task-list-808080); - } - - .icon-public { - background-image: var(--icon-public-808080); - } - - #content-vue.app-calendar #app-navigation-vue .action-item.icon-share, - #content-vue.app-calendar #app-navigation-vue .action-item.icon-shared, - #content-vue.app-contacts #addressbook-list .icon-shared { - background-size: 12px; - } - #content-vue.app-calendar .fc-scrollgrid { - padding-top: 14px; - } - - #content-vue.app-calendar .fc-dayGridMonth-view table { - font-size: 1em; - } - - .icon-view-week { - background-image: var(--icon-calendar-view-week-808080); - } - - .icon-view-day { - background-image: var(--icon-calendar-view-day-808080); - } - - .icon-view-module { - background-image: var(--icon-calendar-view-module-808080); - } - - .icon-view-list { - background-image: var(--icon-calendar-view-list-808080); - } - - #content-vue.app-calendar .app-sidebar-tabs__tab a.active { - color: var(--color-text-light); - } - - /* Notes App*/ - - #content-vue.app-notes li.app-navigation-entry.active, - #content-vue.app-talk li.acli_wrapper.active { - background-color: var(--color-background-hover) !important; - } - #content-vue.app-notes .welcome-content .icon-files-dark { - background-size: 18px; - } - - #content-vue.app-notes button.icon-confirm::before, - #content.app-dashboard ~ .popover .action-input__form .action-input__label::before { - content: var(--icon-confirm-fff); - } - - #content-vue.app-notes .welcome-content .icon-phone { - background-size: 11px; - } - - #content-vue.app-notes - #app-settings__header - .settings-button__icon - .material-design-icon__svg, - #content-vue.app-calendar - #app-settings - .settings-button__icon - .material-design-icon__svg, - #content-vue.app-calendar - ~ .popover - div[class^="property-"] - .material-design-icon__svg, - #content-vue.app-calendar div[class^="property-"] .material-design-icon__svg, - #content-vue.app-calendar - .app-sidebar - .app-sidebar__close - .material-design-icon__svg, - #content-vue.app-calendar .app-sidebar-tabs__tab a { - color: var(--icon-inactive-color); - } - - .CodeMirror .CodeMirror-line::selection, - .CodeMirror .CodeMirror-line > span::selection, - .CodeMirror .CodeMirror-line > span > span::selection { - background: var(--color-primary); - } - input[type="text"] + .icon-confirm, - input[type="password"] + .icon-confirm, - input[type="email"] + .icon-confirm { - background-color: var(--color-primary) !important; - background-image: var(--icon-confirm-fff) !important; - background-repeat: no-repeat !important; - background-position: center !important; - } - - input[type="text"] + .icon-confirm::before, - input[type="password"] + .icon-confirm::before, - input[type="email"] + .icon-confirm::before { - content: unset !important; - } - - input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, - input[type="password"]:not(:active):not(:hover):not(:focus) - + .icon-confirm:active, - input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, - input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, - input[type="password"]:not(:active):not(:hover):not(:focus) - + .icon-confirm:hover, - input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, - input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus, - input[type="password"]:not(:active):not(:hover):not(:focus) - + .icon-confirm:focus, - input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus { - border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; - border-left-color: transparent !important; - } - - #app-sidebar-vue .note-category .category input.icon-confirm:hover { - border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; - } - #app-sidebar-vue.app-sidebar - .app-sidebar-header__desc - .app-sidebar-header__menu { - background-color: var(--color-main-background); - } - - #content.app-settings - .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, - #content.app-files - .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, - #header - .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, - #content-vue.app-bookmarks - .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, - #content-vue.app-photos - .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, - #content-vue.app-talk - .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before{ - content: var(--icon-more-808080); - font-size: unset; - font-weight: unset; - font-style: unset; - font-family: unset; - line-height: unset; - } - - #content-vue.app-bookmarks - .icon.action-item__menutoggle--primary.action-item__menutoggle--default-icon::before { - content: var(--icon-more-fff); - } - - #note-container .CodeMirror-code[contenteditable="true"]:hover, - #note-container .CodeMirror-code[contenteditable="true"]:focus, - #note-container .CodeMirror-code[contenteditable="true"]:active { - background-color: var(--color-main-background) !important; - } - /* Tasks app*/ - - .action-item:not(.priority--high) .material-design-icon, - #app-settings .collection .material-design-icon, - .material-design-icon.emoticon-outline-icon { - color: var(--icon-inactive-color); - } - - .action.active .material-design-icon.delete-icon, - .action-item:hover .material-design-icon.delete-icon { - color: var(--color-delete); - } - - #content-vue.app-tasks .app-sidebar-tabs .property__item--clearable { - color: var(--icon-active-color) !important; - } - - #content-vue.app-tasks .app-sidebar-tabs .multiselect-picker-option.active { - color: var(--icon-active-color); - } - /* Settings Apps categories icons */ - - .icon-category-app-bundles { - background-image: var(--icon-bundles-808080); - } - .icon-category-dashboard { - background-image: var(--icon-dashboard-dashboard-808080); - } - .icon-category-customization { - background-image: var(--icon-customization-808080); - } - .icon-category-games { - background-image: var(--icon-games-808080); - } - .icon-category-integration { - background-image: var(--icon-integration-808080); - } - .icon-category-monitoring { - background-image: var(--icon-monitoring-808080); - } - .icon-category-multimedia { - background-image: var(--icon-multimedia-808080); - } - .icon-category-office { - background-image: var(--icon-office-808080); - } - .icon-category-organization { - background-image: var(--icon-organization-808080); - } - .icon-category-search { - background-image: var(--icon-search-808080); - } - - .icon-category-workflow { - background-image: var(--icon-workflow-808080); - } - - /* Bookmarks app */ - - .popover .action-button__icon.icon-link { - background-image: var(--icon-public-808080); - } - - .controls svg path, - .material-design-icon.earth-icon svg path { - fill: var(--icon-inactive-color); - } - - .app-navigation-entry-icon .material-design-icon, - .action .material-design-icon { - color: var(--icon-inactive-color); - } - - .app-navigation-entry.active .app-navigation-entry-icon .material-design-icon, - .action.active .material-design-icon, - .action.selected .material-design-icon { - color: var(--icon-active-color); - } - - .app-navigation-entry - .app-navigation-entry__inline-input-container - form - button.icon-confirm::before { - content: unset; - } - .app-navigation-entry.active .icon-home { - background-image: var(--icon-home-007fff); - } - - #content-vue.app-bookmarks .app-navigation-entry-icon svg path { - fill: var(--icon-inactive-color); - } - #content-vue.app-bookmarks .app-navigation-entry.active svg path { - fill: var(--icon-active-color); - } - - /* News App */ - - #content-vue.app-bookmarks .empty-content { - text-align: center; - } - - #app-navigation .icon-unpinned { - background-image: var(--icon-news-unpinned-808080); - } - - #app-navigation .icon-pinned { - background-image: var(--icon-news-pinned-808080); - } - #app-navigation .icon-full-text-disabled { - background-image: var(--icon-news-nonfulltext-808080); - } - #app-navigation .icon-full-text-enabled { - background-image: var(--icon-news-fulltext-808080); - } - - /* Passwords App */ - - .searchbox .icon-search-force-white { - background-image: var(--icon-search-000); - } - - .searchbox { - opacity: 1 !important; - } - - #content.app-passwords #app-navigation .icon.fa::before { - content: unset; - } - - /* Talk App */ - - #content-vue.app-talk .acli_wrapper .acli.active { - background-color: transparent; - } - - #content-vue.app-talk #app-sidebar .username-form button.icon-rename, button.edit-output-dir span.icon-rename { - background-image: var(--icon-rename-000); - } - - /* Google integration */ - - #google_prefs #google-content button.google-oauth { - background-color: var(--color-primary); - } - - #google-import-contacts .icon-contacts-dark { - background-image: var(--icon-contacts-000); - } - - #google-calendars button .icon-calendar-dark { - background-image: var(--icon-calendar-000); - } - - #google-import-files .icon-files-dark { - background-image: var(--icon-files-000); - } - - #google-import-photos .icon-picture { - background-image: var(--icon-picture-000); - } - - /* remove opacity */ - button.edit-output-dir span.icon-rename, #google-rm-cred .icon-close, #google-import-photos .icon-picture, #google-import-contacts .icon-contacts-dark, #google-calendars button .icon-calendar-dark, #google-import-files .icon-files-dark { - opacity: 1; - } - /** */ - #header .header-right .magnify-icon > svg { - display: none; - } - .new-icons .color-icons{ - background-image: url("../img/app-icons/other.svg"); - width: 100% ; - height: 80px; - background-position: 50%; - background-repeat: no-repeat; - background-size: 60px; - } - .new-icons .drive , .new-icons .files {background-image: url("../img/app-icons/Drive.svg");} - .new-icons .activity {background-image: url("../img/app-icons/Activity.svg");} - .new-icons .bookmarks {background-image: url("../img/app-icons/Bookmark.svg");} - .new-icons .calendar {background-image: url("../img/app-icons/Calendar.svg");} - .new-icons .carnet {background-image: url("../img/app-icons/Carnet.svg");} - .new-icons .contacts {background-image: url("../img/app-icons/Contacts.svg");} - .new-icons .deck {background-image: url("../img/app-icons/Deck.svg");} - .new-icons .docs {background-image: url("../img/app-icons/Docs.svg");} - .new-icons .email,.new-icons .rainloop {background-image: url("../img/app-icons/E-mail.svg");} - .new-icons .gitlab {background-image: url("../img/app-icons/Gitlab.svg");} - .new-icons .news {background-image: url("../img/app-icons/News.svg");} - .new-icons .notes {background-image: url("../img/app-icons/Notes.svg");} - .new-icons .presentation {background-image: url("../img/app-icons/Presentation.svg");} - .new-icons .spreadsheet {background-image: url("../img/app-icons/Spreadsheet.svg");} - .new-icons .tasks {background-image: url("../img/app-icons/Tasks.svg");} - .new-icons .photos {background-image: url("../img/app-icons/Gallery.svg");} - .new-icons .e-user-support-center {background-image: url("../img/app-icons/Support.svg");} - .new-icons .passwords {background-image: url("../img/app-icons/Password.svg");} - .new-icons .onlyoffice_docx {background-image: url("../img/app-icons/Docs.svg");} - .new-icons .onlyoffice_xlsx {background-image: url("../img/app-icons/Spreadsheet.svg");} - .new-icons .onlyoffice_pptx {background-image: url("../img/app-icons/Presentation.svg");} - - #appmenu li:hover a, #appmenu li a:focus { - font-size: 12px; - font-family: 'Roboto'; - letter-spacing: 1px; - } - #filestable thead{background-color: white !important ;} - #recommendations{height: 100px !important;} - .recommendation{border: 1px solid #E6E8E9;padding: 10px !important;margin-bottom: 5px;border-radius: 6px !important;} - progress{border-radius: 10px 10px !important;height: 12px !important;} - #appmenu li a:focus .icon-more, #appmenu li a:focus .icon-more-white {transform: none !important;} - #more-apps:hover span, #more-apps:focus span, #more-apps a:focus span{display: none !important;} - - button#quotaincreasebutton { - margin-top: 15px !important; - } - @media only screen and (max-width: 640px) { - .new-icons .color-icons { - height: 50px; - background-size: 40px; - } - #launcher-menu { - width: 300px !important; - left: 10% !important; - } - } - @media only screen and (max-width: 640px) { - #launcher-menu { - left: 5% !important; - } - } + font-family: 'Roboto'; + src: url('../webfonts/Roboto-Regular.woff2') format('woff2'), + url('../webfonts/Roboto-Regular.woff') format('woff'); + /* font-weight: 600; */ + /* font-style: normal; */ + font-display: swap; + letter-spacing: 1px; +} +*{ + font-family: 'Roboto'; +} +:root { +--color-primary: #007fff; +--color-primary-element: #007fff; +--color-secondary-element: white; +--border-color-secondary-element: #007fff; +--color-primary-element-light: #007fff; +--color-error: #fb3845; +--color-delete: #e9322d; +--color-success: #3ad975; +--color-main-background: #ffffff; +--color-main-background-translucent: #f2f2f2; +--color-main-text: black; +--color-background-hover: white; +--color-text-maxcontrast: black; +--color-border-dark: #e6e6e6; +--color-border: #ebebeb; +--icon-settings-dark-000: #000000; +--icon-inactive-color: #808080; +--icon-active-color: #007fff; +--input-background-color: white; +--menu-icon-color: #222; +--color-dashboard-panels: #f2f2f2; +--color-dashboard-background-plain: #d2d2d2; +--color-sharing-icon-background: #767676; +} + +/* Force a few variables to right values for dark theme */ +body.theme--dark { +--input-background-color: #181818; +--icon-notifications-notifications-000000: url("/svg/notifications/notifications?color=000"); +--icon-notifications-notifications-new-000000: url("/svg/notifications/notifications-new?color=000"); +--icon-search-000: url("/svg/core/actions/search?color=000"); +} + +body.theme--highcontrast { +--icon-inactive-color: black; +} + +#body-user #header, +#body-settings #header, +#body-public #header { +background-color: white !important; +} + +button:not(:disabled):hover, +.primary:not(:disabled):hover, +.button:hover, +button.toggle.has-tooltip:hover, +.primary:active, +input[type="submit"]:active, +input[type="button"]:active, +input[type="reset"]:active, +input[type="button"]:hover, +input[type="submit"]:hover, +input[type="reset"]:hover, +.primary:active, +.button:active, +#new-contact-button:hover, +#cookbook_new_cookbook:hover, +#new-user-button:hover, +#deleteaccount:hover, +#quotaincreasebutton:hover, +#content-vue.app-tasks .action.icon-checkmark:hover, +.button.today:hover, +button.import-contact__button-main:hover, +button#notes_new_note:hover, +#oc-dialog-filepicker-content .actions.creatable .icon.icon-add:hover { +opacity: 0.8; +} + +/* primary action button, use sparingly */ +button, +.button, +.primary, +input[type="submit"].primary, +input[type="button"].primary, +button.toggle.has-tooltip, +button.primary, +.button.primary, +.primary:active, +input[type="submit"].primary:active, +input[type="button"].primary:active, +button.primary:active, +.button.primary:active, +.actions a.button, +#new-contact-button, +#cookbook_new_cookbook, +#new-user-button, +#deleteaccount, +#quotaincreasebutton, +.mx-datepicker .mx-datepicker-footer .mx-btn, +#content-vue.app-tasks .action.icon-checkmark, +button.import-contact__button-main, +button#notes_new_note, +#content.app-news button.explore-subscribe, +input[type="button"], +input[type="submit"], +input[type="reset"] { +background-color: var(--color-primary); +color: white; +border-color: var(--color-primary); +} + +input.primary:not(:disabled):hover, +input.primary:not(:disabled):focus, +button.primary:not(:disabled):hover, +button.primary:not(:disabled):focus, +a.primary:not(:disabled):hover, +a.primary:not(:disabled):focus { +background-image: none; +} + +/* For buttons that are not primary or submit/reset/button inputs that are not primary */ + +button.primary + button:not(.primary), +button.primary + button:not(.primary):active, +.entity-picker__navigation button:not(.primary), +.event-popover__buttons button:not(.primary), +.event-popover__buttons button:not(.primary):active, +.oc-dialog-buttonrow.twobuttons button:not(.primary), +.oc-dialog-buttonrow.twobuttons button:not(.primary):active, +.status-buttons .status-buttons__select { +background-color: var(--color-secondary-element); +color: var(--color-primary); +border-color: var(--border-color-secondary-element); +} + +input[type="checkbox"].checkbox + label::before, +input[type="radio"].checkbox + label::before { +border-color: var(--icon-inactive-color); +background-color: white; +} + +textarea:not(:disabled), +textarea:not(:disabled):active, +div[contenteditable="true"]:not(:disabled):active, +textarea:not(:disabled):hover, +div[contenteditable="true"]:not(:disabled):hover, +textarea:not(:disabled):focus, +div[contenteditable="true"]:not(:disabled):focus { +background-color: var(--input-background-color) !important; +} + +select, +textarea, +input[type="text"], +input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([type="file"]):not([type="image"]):not(.multiselect__input), +#content-vue.app-tasks .task-body__checkbox label.reactive.no-nav::before, +#content.app-files #commentsTabView .newCommentForm .message, +.multiselect +.multiselect__content-wrapper +.multiselect__content +li +> span.multiselect__option, +div.select2-container-multi .select2-choices, +div.select2-container-multi.select2-container-active .select2-choices { +background-color: var(--input-background-color); +} + +#settings #expanddiv, +#header .header-right > div > .notification-container.menu { +background-color: var(--color-main-background); +} + +#header .header-appname { +color: var(--color-main-text); +} + +#settings #expanddiv li a.active { +background-color: var(--color-background-hover); +} +body.theme--dark #header .header-right > div > .notification-container.menu, +body.theme--dark #settings #expanddiv { +background-color: var(--color-main-background); +} +.multiselect .multiselect__tags input.multiselect__single, +.multiselect .multiselect__tags span.multiselect__single, +.multiselect .multiselect__tags span.multiselect__placeholder, +.multiselect .multiselect__tags .multiselect__content, +.multiselect .multiselect__tags .multiselect__tags-wrap, +.multiselect .multiselect__input, +.multiselect +.multiselect__content-wrapper +.multiselect__content +li.multiselect__element, +.multiselect +.multiselect__content-wrapper +.multiselect__content +li.multiselect__element +.multiselect__option, +#content-vue.app-contacts +.property.property--without-actions.property--last.property-masonry:not(.property--addressbooks):not(.property--groups) +.multiselect +.multiselect__tags +.multiselect__input, +#content-vue.app-contacts +.multiselect +.multiselect__tags +input.multiselect__input, +#content-vue.app-contacts +.multiselect +> .multiselect__tags +> span.multiselect__single, +#content.app-files #commentsTabView .newCommentForm .message:hover, +#app-dashboard .footer a:hover, +#app-content-systemtagsfilter .select2-container ul { +background-color: var(--input-background-color) !important; +} +/* use logos from theme */ +#header .logo, +#firstrunwizard .logo { +background-image: url("../img/logo@2x.svg"); +width: 256px; +height: 128px; +} +#header .logo-icon { +width: 130px; +height: 40px; +top: 5px; +bottom: 0px; +border-radius: 22px; +} + +#header #nextcloud { +padding-left: 150px; +} + +#header .notifications .svg { +height: 16px; +width: 16px; +} + +/* +For the overflow in search filter; +It doesn't use specific ids so gave the rule a lot of specificity +*/ +.popover > .popover__wrapper .open ul li p { +white-space: normal; +} + +#unified-search #header-menu-unified-search .header-menu__carret { +right: 125px; +} + +/* App Navigation rules */ +#app-navigation:not(.vue) > ul > li.active, +#app-navigation:not(.vue) > ul > li a:active, +#app-navigation:not(.vue) > ul > li a.selected, +#app-navigation:not(.vue) > ul > li a.active, +#app-navigation:not(.vue) > ul > li.active > a, +#app-navigation:not(.vue) > ul > li a:active > a, +#app-navigation:not(.vue) > ul > li a.selected > a, +#app-navigation:not(.vue) > ul > li a.active > a { +background-color: var(--color-main-background); +} + +li.app-navigation-entry, +.conversations .acli_wrapper .acli { +background-clip: content-box; +} + +li.app-navigation-entry.active { +background-color: var(--color-main-background) !important; +} + +li.app-navigation-entry:not(.active):hover, +#content.app-deck li.app-navigation-entry.active { +background-color: var(--color-background-hover) !important; +} + +li.app-navigation-entry.app-navigation-entry--collapsible:hover { +background-color: var(--color-main-background) !important; +} + +li.app-navigation-entry.app-navigation-entry--collapsible > a:hover, +#content.app-passwords #app-navigation .active { +background-color: var(--color-background-hover); +} + +/* CSS TWEAKS TAKEN FROM THEMING APP (disabled now) */ + +.nc-theming-main-background { +background-color: #999999; +} +.nc-theming-main-text { +color: #fff; +} +.nc-theming-contrast { +color: #fff; +} +#appmenu:not(.inverted) svg { +filter: none; +} +#appmenu.inverted svg { +filter: invert(1); +} +.icon-folder, +.icon-filetype-folder { +background-image: var(--icon-folder-007FFF); +} +.icon-filetype-text { +background-image: var(--icon-text-007fff); +} +.icon-filetype-folder-drag-accept { +background-image: var(--icon-folder-drag-accept-007fff) !important; +} +#header .logo { +background-image: url("../img/logo@2x.svg"); +} +#body-user #header, +#body-settings #header, +#body-public #header { +color: var(--color-main-text); +background-image: none; +} + +#body-user.dark--theme, +#body-settings.dark--theme { +color: white !important; +} + +#header .menu, +#header #launcher-menu, +#header .header--menu { +opacity: 1; +} + +#appmenu li span { +color: var(--color-main-text); +} + +#header .logo { +background-size: auto; +} + +input.primary, +#alternative-logins li a { +background-color: #999999; +border: 1px solid #fff; +color: #fff; +} +footer { +height: 92px; +} + +.notifications-button.hasNotifications { +opacity: 0.6 !important; +} +.notifications-button.hasNotifications:hover, +.notifications-button.hasNotifications:focus { +opacity: 1 !important; +} +#header .notification-wrapper .dismiss-all .icon.icon-close { +margin-top: 4px; +} +#content #app-navigation, +#content.app-news #app-navigation button { +color: var(--color-main-text); +border-right: 1px solid var(--color-border); +} + +.icon-home, +#oc-dialog-filepicker-content .dirtree div:first-child a { +background-image: var(--icon-home-808080); +} + +#controls .icon-home, +#oc-dialog-filepicker-content .dirtree div:first-child a { +background-size: 20px; +} + +.icon-mail { +background-image: var(--icon-mail-808080); +} +.icon-error { +background-image: var(--icon-error-808080); +} + +.icon-details { +background-image: var(--icon-details-808080); +} + +.icon-add, +.action-item.icon-add, +button.action-item__menutoggle.icon-add, +#content.app-news .add-new button.icon-add, +.who-has-access .action-item.icon-add.addAdditionalAdmin, +#content-vue.app-tasks +#app-navigation-vue +.app-navigation-entry-icon.sprt-add::before { +background-image: var(--icon-add-808080); +} + +.notification-container .emptycontent .icon-notifications-dark { +background-image: var(--icon-notifications-notifications-808080); +background-size: 40px; +} + +.icon-rename, +.who-has-access .action-item--single.action-item.icon-rename, +.where-is-my-data .action-item--single.action-item.icon-rename { +background-image: var(--icon-rename-808080); +} + +.icon-download { +background-image: var(--icon-download-808080); +} +.icon-template-add { +background-image: var(--icon-template-add-808080); +} +.icon-tasks, +.panel--header .icon-tasks, +.modal__content .icon-tasks { +background-image: var(--icon-tasks-tasks-808080); +} +#tasks_panel .empty-content .icon-tasks { +background-image: var(--icon-tasks-tasks-808080) !important; +} +.icon-checkmark { +background-image: var(--icon-checkmark-808080); +} +.icon-group { +background-image: var(--icon-group-808080); +} +.icon-timezone { +background-image: var(--icon-timezone-808080); +} +.icon-edit { +background-image: var(--icon-edit-808080); +} +.icon-reminder { +background-image: var(--icon-notifications-notifications-808080); +} +.icon-gravatar { +background-image: var(--icon-contacts-gravatar-808080); +} +#content-vue.app-calendar .app-sidebar-tabs__tab-icon.icon-reminder { +background-size: 13px; +} +.icon-clippy { +background-image: var(--icon-clippy-808080); +} +.icon-confirm { +background-image: var(--icon-confirm-808080); +} + +.icon-user-admin { +background-image: var(--icon-user-admin-808080); +} + +.icon-disabled-users { +background-image: var(--icon-disabled-users-808080); +} + +.icon-notes, +.icon-notes-trans { +background-image: var(--icon-notes-notes-808080); +} +.icon-projects { +background-image: var(--icon-projects-808080); +} +.icon-comment { +background-image: var(--icon-comment-808080); +} +.icon-activity { +background-image: var(--icon-activity-activity-808080); +} +.icon-link { +background-image: var(--icon-public-808080); +} +button .icon-link { +background-image: var(--icon-public-ffffff); +} + +.icon-recent { +background-image: var(--icon-files-recent-808080); +} + +.icon-more, +.icon-more-white { +background-image: var(--icon-more-808080); +} + +.avatar-shared.icon-more-white { +background-image: var(--icon-more-fff); +} + +#collection-list .avatar .icon-projects { +background-image: var(--icon-projects-fff); +} + +#sharing-inherited-shares .sharing-entry .avatar-shared.icon-more-white, +.sharing-entry.sharing-entry__internal .avatar-external.icon-external-white, +#collection-list .avatar { +background-color: var(--color-sharing-icon-background); +} + +.icon-files, +.icon-category-files, +.icon-emptyfolder { +background-image: var(--icon-files-app-808080); +} + +#header .icon-notifications, +#header .icon-notifications-new { +background-size: 17px; +} + +.icon-notifications-new { +background-image: var(--icon-notifications-notifications-new-000000); +} + +.icon-notifications { +background-image: var(--icon-notifications-notifications-000000); +} + +.icon-external, +.icon-goto { +background-image: var(--icon-external-808080); +} + +.action.icon-checkmark { +background-image: var(--icon-checkmark-ffffff); +} +.icon-phone { +background-image: var(--icon-phone-808080); +} + +.icon-password, +.icon-category-security { +background-image: var(--icon-password-808080); +} +.icon-link { +background-image: var(--icon-link-808080); +} +.icon-toggle-filelist { +background-image: var(--icon-toggle-filelist-808080); +} + +button.icon-toggle-filelist { +background-color: var(--color-main-background); +} + +.icon-toggle-pictures { +background-image: var(--icon-toggle-pictures-808080); +} + +.button .icon-add, +button .icon-add, +button.icon-add, +#new-contact-button.icon-add, +#cookbook_new_cookbook .icon-add, +#content-vue.app-notes #notes_new_note.icon-add, +#oc-dialog-filepicker-content .actions.creatable .icon.icon-add, +#content.app-news .add-new .icon-add.add-new-folder-primary { +background-image: var(--icon-add-ffffff); +} + +.popover .action-button .action-button__icon.icon-add { +background-image: var(--icon-add-808080); +} + +button > span[class^="icon-"], +.button > span[class^="icon-"], +button > span[class*=" icon-"], +.button > span[class*=" icon-"] { +opacity: 1; +} + +.icon-share, +.icon-shared { +background-image: var(--icon-share-808080); +} + +.icon-contacts-dark, +.icon-contacts, +.icon-category-social { +background-image: var(--icon-contacts-app-808080); +} + +#contactsmenu .icon-contacts { +background-image: var(--icon-contacts-000); +} + +.icon-user, +.icon-category-installed { +background-image: var(--icon-user-808080); +} + +.icon-category-enabled { +background-image: var(--icon-checkmark-808080); +} + +.icon-star, +.icon-star-dark, +.icon-starred:hover { +background-image: var(--icon-star-808080); +} + +.icon-starred, +.icon-star:hover, +.icon-star-dark:hover, +#filestable .filename .favorite-mark .icon-starred { +background-image: var(--icon-star-FFCC00); +} + +.icon-close, +#header-menu-unified-search .icon-close, +.icon-category-disabled { +background-image: var(--icon-close-808080); +} + +#header #searchbox { +color: var(--color-main-text); +border-color: var( + --icon-inactive-color +) !important; /* !important used in source so needed to override */ +} + +#app-navigation, +#app-navigation-vue { +border-right: 2px solid var(--color-border); +} + +table th, +table td { +border-bottom: 1px solid var(--color-border); +} + +.icon-files-dark { +background-image: var(--icon-files-app-808080); +} + +.icon-fullscreen { +background-image: var(--icon-fullscreen-808080); +} + +.icon-calendar-dark { +background-image: var(--icon-calendar-calendar-808080); +} +.icon-talk { +background-image: var(--icon-spreed-app-808080); +} + +#app-navigation li a, +#app-navigation:not(.vue) > ul > li > a, +#app-navigation:not(.vue) > ul > li > ul > li > a { +opacity: 1; +} + +/* Dashboard App */ + +#body-user[data-dashboard-background]:not(.theme--dark) +#app-dashboard +.statuses +button:hover, +#body-user[data-dashboard-background]:not(.theme--dark) .edit-panels:hover { +background-color: var(--color-background-hover) !important; +} + +body.theme--highcontrast #app-dashboard .statuses button, +body.theme--highcontrast #app-dashboard .edit-panels { +border: 1px solid var(--color-main-text); +} + +#body-user[data-dashboard-background]:not(.theme--dark) #app-dashboard .panel, +#body-user[data-dashboard-background]:not(.theme--dark) +#app-dashboard +.statuses +button, +#body-user[data-dashboard-background]:not(.theme--dark) +#app-dashboard +.footer +a { +background-color: var(--color-dashboard-panels); +/* opacity: 0.9; */ +} + +#body-user[data-dashboard-background]:not(.theme--dark) #header { +opacity: 0.95; +} +#body-user[data-dashboard-background].theme--highcontrast #header { +background-color: var(--color-main-background) !important; +} + +#app-dashboard .panel .panel--header > .icon-calendar-dark { +background-position: 14px 10px; +} + +#app-dashboard .panel .panel--header > .icon-files-dark { +background-position: 14px 16px; +} + +#app-dashboard .statuses button { +color: var(--color-main-text); +} + +#content.app-dashboard #app-dashboard, +body[data-dashboard-background]:not(.theme--dark) +.background-selector +.background.filepicker, +body[data-dashboard-background]:not(.theme--dark) +.background-selector +.background.default, +body[data-dashboard-background]:not(.theme--dark) +.modal__content +.background-selector +.background.color { +background-color: var(--color-dashboard-background-plain); +color: var(--color-main-text); +} + +body[data-dashboard-background="#0082c9"] #app-dashboard, +body[data-dashboard-background="default"] #app-dashboard { +background-color: var(--color-dashboard-background-plain); +} + +body[data-dashboard-background="default"] #app-dashboard { +background-image: none !important; +} + +body[data-dashboard-background="#0082c9"] #app-dashboard h2, +body[data-dashboard-background="default"] #app-dashboard h2 { +color: var(--color-main-text); +} + +/* Files App */ + +#filestable .thumbnail { +background-repeat: no-repeat; +} + +.breadcrumb .canDrop > a, +#filestable tbody tr.canDrop, +#filestable.view-grid:not(.hidden) +#fileList +tr:not(.hidden).selected +.thumbnail-wrapper, +#filestable.view-grid:not(.hidden) +#fileList +tr:not(.hidden).selected +.fileactions, +#filestable.view-grid:not(.hidden) +#fileList +tr:not(.hidden).selected +.nametext { +background-color: var(--color-primary-light); +} + +.actions .button.new:active { +background-color: var(--color-primary); +} + +#fileList td a a.action { +opacity: 0.6; +} + +#fileList td a a.action:hover { +opacity: 0.8; +} + +#content.app-files #filestable.view-grid thead tr, +#content.app-files #filestable.view-grid thead th { +border-bottom: 0px; +} + +#content.app-files #controls .icon-shared { +background-size: 14px; +} + +#editor .menububble.is-active .menububble__button { +background-color: var(--color-primary); +} + +#editor .menububble.is-active .menububble__button:hover { +background-color: var(--color-background-hover); +} + +#editor .menububble__button:hover .menububble__buttontext { +color: var(--color-primary); +} + +#editor .menububble__button:hover .icon-link { +background-image: var(--icon-public-007fff); +} + +#editor .menububble__button:hover .icon-file { +background-image: var(--icon-text-007fff); +} + +#uploadprogressbar + button.icon-close, +#google-drive button .icon-close, +#google-photos button .icon-close { +background-image: var(--icon-close-fff); +} + +#google-rm-cred .icon-close { +background-image: var(--icon-close-000); +opacity: 1; +} + +.breadcrumb div.crumb span.icon-shared, +.breadcrumb div.crumb span.icon-public, +.selectedActions a, +#commentsTabView .comment .action { +opacity: 0.8; +} + +#content.app-files #emptycontent .icon-share { +background-image: var(--icon-files-share-808080); +} + +#content #app-content-files #controls { +background-color: var(--color-main-background); +} + +#app-content-files button .icon-file, +#editor .menububble__button .icon-file { +background-image: var(--icon-text-ffffff); +} + +#editor .ProseMirror { +background-color: var(--color-main-background) !important; +} + +#fileList tr td.selection > .selectCheckBox + label::before, +#oc-dialog-filepicker-content .actions.creatable .icon.icon-add { +opacity: 1; +} + +#filestable .filesize, +#filestable .date .modified.live-relative-timestamp { +color: var(--color-main-text) !important; +} +.nav-icon-files { +background-image: var(--icon-files-app-808080); +} + +.nav-icon-files.active { +background-image: var(--icon-files-app-007fff); +} + +.nav-icon-recent { +background-image: var(--icon-files-recent-808080); +} + +.nav-icon-recent.active { +background-image: var(--icon-files-recent-007fff); +} + +.nav-icon-favorites { +background-image: var(--icon-star-outline-808080); +} +.nav-icon-favorites.active { +background-image: var(--icon-star-outline-007fff); +} + +.nav-icon-deletedshares { +background-image: var(--icon-files-unshare-808080); +} +.nav-icon-deletedshares.active { +background-image: var(--icon-files-unshare-007fff); +} + +.nav-icon-shareoverview, +.nav-icon-sharingout, +.nav-icon-sharingin, +.nav-icon-pendingshares, +#content.app-files .icon-share, +#content.app-files .icon-shared { +background-image: var(--icon-files-share-808080); +} +.nav-icon-shareoverview.active, +.nav-icon-sharingout.active, +.nav-icon-sharingin.active, +.nav-icon-pendingshares.active { +background-image: var(--icon-files-share-007fff); +} +.nav-icon-sharinglinks { +background-image: var(--icon-public-808080); +} +.nav-icon-sharinglinks.active { +background-image: var(--icon-public-007fff); +} +.nav-icon-trashbin { +background-image: var(--icon-files-delete-808080); +} + +.nav-icon-trashbin.active { +background-image: var(--icon-files-delete-007fff); +} + +.nav-icon-systemtagsfilter { +background-image: var(--icon-tag-808080); +} + +.nav-icon-systemtagsfilter.active { +background-image: var(--icon-tag-007fff); +} + +.icon-quota { +background-image: var(--icon-quota-808080); +} +.app-sidebar-header__star.icon-star, +.app-sidebar-header__star.icon-starred, +.app-sidebar-header__star.icon-star:hover, +.app-sidebar-header__star.icon-starred:hover, +#view-toggle { +background-size: 16px; +} + +#collection-list .multiselect .multiselect__tags .multiselect__input { +background-color: transparent !important; +} +#collection-list +.multiselect.multiselect--active +.multiselect__tags +.multiselect__input { +background-color: var(--input-background-color) !important; +} +#app-sidebar-vue #sharing .sharing-entry .avatar-external, +#app-sidebar-vue #sharing .sharing-entry .avatar-shared { +background-color: var(--color-primary); +} +#app-sidebar-vue #sharing .sharing-entry .avatar-shared.icon-more-white { +background-image: var(--icon-more-fff); +} + +#app-sidebar-vue #sharing .sharing-entry .avatardiv.icon-public-white { +background-color: var(--color-primary) !important; +} + +body.theme--highcontrast #header .header-right .magnify-icon { +background: var(--icon-search-000) no-repeat center; +} + +#header .header-right .magnify-icon { +background: var(--icon-search-000) no-repeat center; +background-size: 15px; +} + +#content.app-files #filestable span, +#content.app-files #filestable td { +color: var(--color-main-text) !important; +} + +/* Contacts App */ + +#content-vue.app-contacts +.multiselect.property__label +.multiselect__tags +span.multiselect__single, +#content-vue.app-contacts +.multiselect.property__label +.multiselect__tags +.multiselect__input { +background-color: var(--color-main-background) !important; +} + +#contacts-list { +margin-top: 44px; +} + +li.app-navigation-entry.active .icon-user { +background-image: var(--icon-user-007fff); +} + +li.app-navigation-entry.active .icon-contacts-dark, +li.app-navigation-entry.active .icon-group { +background-image: var(--icon-contacts-app-007fff); +} +li.app-navigation-entry.active .icon-address-book { +background-image: var(--icon-contacts-address-book-007fff); +} +li.app-navigation-entry.active .icon-recent-actors { +background-image: var(--icon-contacts-recent-actors-007fff); +} + +#content-vue.app-contacts .multiselect .multiselect__tags .multiselect__input, +#content-vue.app-contacts +.multiselect +> .multiselect__tags +> .multiselect__single { +background-color: var(--color-main-background) !important; +} + +#content-vue.app-contacts ~ .popover .action.active, +#content-vue.app-contacts ~ .popover .action.active .action-input:hover, +#content-vue.app-contacts ~ .popover .action.active .action-input:focus-within { +opacity: 1; +} + +#content-vue.app-contacts ~ .popover .action.active .action-input { +opacity: .7; +} + +#content-vue.app-contacts .empty-content__icon { +height: 80px; +} + +#content-vue.app-contacts +#addressbook-list +.addressbook-shares +.multiselect__content { +background-color: var(--color-secondary-element); +} + +#content-vue.app-contacts .empty-content__title { +text-align: center; +} +#content-vue.app-contacts .app-content > .empty-content { +margin: 20vh; +} +.icon-address-book { +background-image: var(--icon-contacts-address-book-808080); +} + +#content-vue.app-contacts .app-navigation-caption__title { +color: var(--color-main-text); +} + +#content-vue.app-contacts .contact-header__infos input { +background-color: var(--color-main-background); +} + +.property .icon-contacts { +background-image: var(--icon-contacts-app-808080); +} +#content-vue.app-contacts .icon-phone { +background-image: var(--icon-contacts-phone-808080); +} + +button .icon-upload, +#uploadavatarbutton.icon-upload, +.button.primary .icon-upload, +button.primary .icon-upload, +#content-vue.app-calendar .settings-fieldset-interior-item .icon-upload, +#content-vue.app-bookmarks #app-settings-content button .icon-upload, +button.import-contact__button-main .icon-upload, +.import-export button.icon-upload, +.attachments-drag-zone button.icon-upload { +background-image: var(--icon-upload-000); +} +#uploadavatarbutton.icon-upload{ +background-image: var(--icon-upload-ffffff); +} +.action-button .icon-upload, +.menuitem .icon-upload, +button.import-contact__button--local:disabled .import-contact__button-icon.icon-upload + { +background-image: var(--icon-upload-808080); +} + +button .icon-download, +.button .icon-download, +.import-export .button.icon-download { +background-image: var(--icon-download-ffffff); +} +.action-button .icon-download { +background-image: var(--icon-download-808080); +} + +#deleteaccount:not([disabled]) .icon-delete, +button .icon-delete, +.button .icon-delete, +#removeavatar.icon-delete { +background-image: var(--icon-delete-ffffff); +} + +button.menuitem .icon-delete, +.app-navigation-entry-menu button .icon-delete { +background-image: var(--icon-delete-808080); +} + +.menu-icon svg path { +fill: var(--menu-icon-color); +} +.icon-recent-actors { +background-image: var(--icon-contacts-recent-actors-808080); +} + +.popover .action-input__input + .action-input__label { +background-color: var(--color-primary); +} +.popover .action-input__input + .action-input__label > .arrow-right-icon path { +fill: white; +} + +#content-vue.app-contacts .dots-horizontal-icon svg path { +fill: var(--icon-inactive-color); +} + +.mx-icon-calendar svg path { +fill: var(--icon-inactive-color); +} + +#content-vue.app-contacts +~ .popover +.action-input +.action-input__label::before { +content: unset; +} + +/* Photos App */ + +#content-vue.app-photos #app-navigation-vue .app-navigation-entry.active { +background-color: var(--color-main-background) !important; +} + +#content-vue.app-photos .icon-folder { +background-image: var(--icon-folder-007FFF); +} +#content-vue.app-photos .folder-name__icon { +opacity: 0.8; +} + +li.active .icon-yourphotos { +background-image: var(--icon-photos-app-007fff); +} +.icon-yourphotos { +background-image: var(--icon-photos-app-808080); +} + +li.active .icon-video { +background-image: var(--icon-video-007fff); +} + +.icon-video { +background-image: var(--icon-video-808080); +} + +li.active .icon-favorite { +background-image: var(--icon-star-outline-007fff); +} +.icon-favorite { +background-image: var(--icon-star-outline-808080); +} + +li.active .icon-tag { +background-image: var(--icon-tag-007fff); +} +.icon-tag, +.icon-systemtags { +background-image: var(--icon-tag-808080); +} + +li.active .icon-files-dark { +background-image: var(--icon-files-app-007fff); +} +li.active .icon-address { +background-image: var(--icon-address-007fff); +} + +.icon-address { +background-image: var(--icon-address-808080); +} + +li.active .icon-share { +background-image: var(--icon-share-007fff); +} + +#app-navigation-vue #app-settings #app-settings-header .settings-button, +#app-navigation #app-settings #app-settings-header .settings-button, +.icon-category-tools { +background-image: var(--icon-settings-808080); +} + +#header #header-menu-unified-search .unified-search__form-input { +color: var(--color-main-text); +} +#header #header-menu-unified-search .unified-search__form-input, +#header #header-menu-unified-search .unified-search__input-wrapper { +background-color: var(--color-main-background); +} + +.icon-delete, +button.action-button .icon-delete { +background-image: var(--icon-files-delete-808080); +} + +.menuitem:hover .icon-delete, +.menu-option:hover .icon-delete, +button.action-button:hover .icon-delete, +button.menuitem:hover .icon-delete, +.app-navigation-entry-menu button:hover .icon-delete, +#removeavatar.icon-delete:hover { +background-image: var(--icon-delete-e9322d); +} + +#appmenu li a span { +color: transparent; +} + +#appmenu li:hover a span { +color: var(--icon-inactive-color); +} + +body.theme--highcontrast #appmenu li:hover a span { +color: var(--color-main-text); +} + +#appmenu li:hover a svg { +color: var(--color-main-text); +transform: translateY(-7px); +} + +#appmenu:hover li svg, +#appmenu:hover li .icon-more, +#appmenu:hover li .icon-more-white, +#appmenu:hover li .icon-loading-small, +#appmenu:hover li .icon-loading-small-dark { +transform: none; +} + +/* Settings app */ + +#pass2 + input[name="newpassword-clone"] { +width: 100%; +} + +/* Personal Info */ + +#selectavatar.icon-folder { +background-image: var(--icon-folder-ffffff); +background-color: var(--color-primary); +color: white; +border-color: var(--color-primary); +} + +/* Mobile & Desktop */ + +.button.icon-clippy { +background-image: var(--icon-clippy-808080); +} + +/* Sharing */ + +button.social-facebook { +padding-left: 30px; +background-image: var(--icon-federatedfilesharing-social-facebook-000); +} + +button.social-twitter { +padding-left: 30px; +background-image: var(--icon-federatedfilesharing-social-twitter-000); +} + +button.social-diaspora { +padding-left: 30px; +background-image: var(--icon-federatedfilesharing-social-diaspora-000); +} + +/* Flow */ + +#workflowengine .actions__item.colored { +background-color: var(--color-primary) !important; +} +#workflowengine .actions__item.colored button { +background-color: white; +color: var(--color-primary); +} + +/* Calendar App*/ + +.datepicker-button-section button.button { +background-color: var(--color-main-background); +color: var(--color-main-text); +border: none; +max-width: 100px; +margin: auto; +} +.mx-datepicker .mx-calendar td { +border: 0px; +} + +.icon-eye { +background-image: var(--icon-calendar-eye-808080); +} + +.icon-briefcase { +background-image: var(--icon-calendar-briefcase-808080); +} + +.icon-color-picker { +background-image: var(--icon-calendar-color-picker-808080); +} +.icon-menu { +background-image: var(--icon-menu-808080); +} +.mx-datepicker .mx-input-wrapper { +background-color: var(--input-background-color); +} + +.mx-datepicker-main .mx-datepicker-footer .mx-btn:hover, +.mx-datepicker-main .mx-datepicker-footer .mx-btn:focus { +background-color: var(--color-primary); +color: white; +} + +.mx-datepicker .mx-input { +border: none; +margin-top: 0px; +margin-bottom: 0px; +} + +.datepicker-button-section.icon-leftarrow { +background-image: var(--icon-arrow-left-808080); +} + +.datepicker-button-section.icon-rightarrow { +background-image: var(--icon-arrow-right-808080); +} + +.button.datepicker-button-section__next, +.button.datepicker-button-section__previous { +border: none; +margin: auto; +} + +.new-event-today-view-section .button { +border-radius: 8px; +} + +.icon-new-calendar { +background-image: var(--icon-calendar-calendar-808080); +} + +.icon-new-calendar-with-task-list { +background-image: var(--icon-calendar-new-calendar-with-task-list-808080); +} + +.icon-public { +background-image: var(--icon-public-808080); +} + +#content-vue.app-calendar #app-navigation-vue .action-item.icon-share, +#content-vue.app-calendar #app-navigation-vue .action-item.icon-shared, +#content-vue.app-contacts #addressbook-list .icon-shared { +background-size: 12px; +} +#content-vue.app-calendar .fc-scrollgrid { +padding-top: 14px; +} + +#content-vue.app-calendar .fc-dayGridMonth-view table { +font-size: 1em; +} + +.icon-view-week { +background-image: var(--icon-calendar-view-week-808080); +} + +.icon-view-day { +background-image: var(--icon-calendar-view-day-808080); +} + +.icon-view-module { +background-image: var(--icon-calendar-view-module-808080); +} + +.icon-view-list { +background-image: var(--icon-calendar-view-list-808080); +} + +#content-vue.app-calendar .app-sidebar-tabs__tab a.active { +color: var(--color-text-light); +} + +/* Notes App*/ + +#content-vue.app-notes li.app-navigation-entry.active, +#content-vue.app-talk li.acli_wrapper.active { +background-color: var(--color-background-hover) !important; +} +#content-vue.app-notes .welcome-content .icon-files-dark { +background-size: 18px; +} + +#content-vue.app-notes button.icon-confirm::before, +#content.app-dashboard ~ .popover .action-input__form .action-input__label::before { +content: var(--icon-confirm-fff); +} + +#content-vue.app-notes .welcome-content .icon-phone { +background-size: 11px; +} + +#content-vue.app-notes +#app-settings__header +.settings-button__icon +.material-design-icon__svg, +#content-vue.app-calendar +#app-settings +.settings-button__icon +.material-design-icon__svg, +#content-vue.app-calendar +~ .popover +div[class^="property-"] +.material-design-icon__svg, +#content-vue.app-calendar div[class^="property-"] .material-design-icon__svg, +#content-vue.app-calendar +.app-sidebar +.app-sidebar__close +.material-design-icon__svg, +#content-vue.app-calendar .app-sidebar-tabs__tab a { +color: var(--icon-inactive-color); +} + +.CodeMirror .CodeMirror-line::selection, +.CodeMirror .CodeMirror-line > span::selection, +.CodeMirror .CodeMirror-line > span > span::selection { +background: var(--color-primary); +} +input[type="text"] + .icon-confirm, +input[type="password"] + .icon-confirm, +input[type="email"] + .icon-confirm { +background-color: var(--color-primary) !important; +background-image: var(--icon-confirm-fff) !important; +background-repeat: no-repeat !important; +background-position: center !important; +} + +input[type="text"] + .icon-confirm::before, +input[type="password"] + .icon-confirm::before, +input[type="email"] + .icon-confirm::before { +content: unset !important; +} + +input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, +input[type="password"]:not(:active):not(:hover):not(:focus) ++ .icon-confirm:active, +input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, +input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, +input[type="password"]:not(:active):not(:hover):not(:focus) ++ .icon-confirm:hover, +input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, +input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus, +input[type="password"]:not(:active):not(:hover):not(:focus) ++ .icon-confirm:focus, +input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus { +border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; +border-left-color: transparent !important; +} + +#app-sidebar-vue .note-category .category input.icon-confirm:hover { +border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; +} +#app-sidebar-vue.app-sidebar +.app-sidebar-header__desc +.app-sidebar-header__menu { +background-color: var(--color-main-background); +} + +#content.app-settings +.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, +#content.app-files +.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, +#header +.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, +#content-vue.app-bookmarks +.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, +#content-vue.app-photos +.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, +#content-vue.app-talk +.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before{ +content: var(--icon-more-808080); +font-size: unset; +font-weight: unset; +font-style: unset; +font-family: unset; +line-height: unset; +} + +#content-vue.app-bookmarks +.icon.action-item__menutoggle--primary.action-item__menutoggle--default-icon::before { +content: var(--icon-more-fff); +} + +#note-container .CodeMirror-code[contenteditable="true"]:hover, +#note-container .CodeMirror-code[contenteditable="true"]:focus, +#note-container .CodeMirror-code[contenteditable="true"]:active { +background-color: var(--color-main-background) !important; +} +/* Tasks app*/ + +.action-item:not(.priority--high) .material-design-icon, +#app-settings .collection .material-design-icon, +.material-design-icon.emoticon-outline-icon { +color: var(--icon-inactive-color); +} + +.action.active .material-design-icon.delete-icon, +.action-item:hover .material-design-icon.delete-icon { +color: var(--color-delete); +} + +#content-vue.app-tasks .app-sidebar-tabs .property__item--clearable { +color: var(--icon-active-color) !important; +} + +#content-vue.app-tasks .app-sidebar-tabs .multiselect-picker-option.active { +color: var(--icon-active-color); +} +/* Settings Apps categories icons */ + +.icon-category-app-bundles { +background-image: var(--icon-bundles-808080); +} +.icon-category-dashboard { +background-image: var(--icon-dashboard-dashboard-808080); +} +.icon-category-customization { +background-image: var(--icon-customization-808080); +} +.icon-category-games { +background-image: var(--icon-games-808080); +} +.icon-category-integration { +background-image: var(--icon-integration-808080); +} +.icon-category-monitoring { +background-image: var(--icon-monitoring-808080); +} +.icon-category-multimedia { +background-image: var(--icon-multimedia-808080); +} +.icon-category-office { +background-image: var(--icon-office-808080); +} +.icon-category-organization { +background-image: var(--icon-organization-808080); +} +.icon-category-search { +background-image: var(--icon-search-808080); +} + +.icon-category-workflow { +background-image: var(--icon-workflow-808080); +} + +/* Bookmarks app */ + +.popover .action-button__icon.icon-link { +background-image: var(--icon-public-808080); +} + +.controls svg path, +.material-design-icon.earth-icon svg path { +fill: var(--icon-inactive-color); +} + +.app-navigation-entry-icon .material-design-icon, +.action .material-design-icon { +color: var(--icon-inactive-color); +} + +.app-navigation-entry.active .app-navigation-entry-icon .material-design-icon, +.action.active .material-design-icon, +.action.selected .material-design-icon { +color: var(--icon-active-color); +} + +.app-navigation-entry +.app-navigation-entry__inline-input-container +form +button.icon-confirm::before { +content: unset; +} +.app-navigation-entry.active .icon-home { +background-image: var(--icon-home-007fff); +} + +#content-vue.app-bookmarks .app-navigation-entry-icon svg path { +fill: var(--icon-inactive-color); +} +#content-vue.app-bookmarks .app-navigation-entry.active svg path { +fill: var(--icon-active-color); +} + +/* News App */ + +#content-vue.app-bookmarks .empty-content { +text-align: center; +} + +#app-navigation .icon-unpinned { +background-image: var(--icon-news-unpinned-808080); +} + +#app-navigation .icon-pinned { +background-image: var(--icon-news-pinned-808080); +} +#app-navigation .icon-full-text-disabled { +background-image: var(--icon-news-nonfulltext-808080); +} +#app-navigation .icon-full-text-enabled { +background-image: var(--icon-news-fulltext-808080); +} + +/* Passwords App */ + +.searchbox .icon-search-force-white { +background-image: var(--icon-search-000); +} + +.searchbox { +opacity: 1 !important; +} + +#content.app-passwords #app-navigation .icon.fa::before { +content: unset; +} + +/* Talk App */ + +#content-vue.app-talk .acli_wrapper .acli.active { +background-color: transparent; +} + +#content-vue.app-talk #app-sidebar .username-form button.icon-rename, button.edit-output-dir span.icon-rename { +background-image: var(--icon-rename-000); +} + +/* Google integration */ + +#google_prefs #google-content button.google-oauth { +background-color: var(--color-primary); +} + +#google-import-contacts .icon-contacts-dark { +background-image: var(--icon-contacts-000); +} + +#google-calendars button .icon-calendar-dark { +background-image: var(--icon-calendar-000); +} + +#google-import-files .icon-files-dark { +background-image: var(--icon-files-000); +} + +#google-import-photos .icon-picture { +background-image: var(--icon-picture-000); +} + +/* remove opacity */ +button.edit-output-dir span.icon-rename, #google-rm-cred .icon-close, #google-import-photos .icon-picture, #google-import-contacts .icon-contacts-dark, #google-calendars button .icon-calendar-dark, #google-import-files .icon-files-dark { +opacity: 1; +} +/** */ +#header .header-right .magnify-icon > svg { +display: none; +} +.new-icons .color-icons{ + background-image: url("../img/app-icons/other.svg"); + width: 100% ; + height: 80px; + background-position: 50%; + background-repeat: no-repeat; + background-size: 60px; +} +.new-icons .drive , .new-icons .files {background-image: url("../img/app-icons/Drive.svg");} +.new-icons .activity {background-image: url("../img/app-icons/Activity.svg");} +.new-icons .bookmarks {background-image: url("../img/app-icons/Bookmark.svg");} +.new-icons .calendar {background-image: url("../img/app-icons/Calendar.svg");} +.new-icons .carnet {background-image: url("../img/app-icons/Carnet.svg");} +.new-icons .contacts {background-image: url("../img/app-icons/Contacts.svg");} +.new-icons .deck {background-image: url("../img/app-icons/Deck.svg");} +.new-icons .docs {background-image: url("../img/app-icons/Docs.svg");} +.new-icons .email,.new-icons .rainloop {background-image: url("../img/app-icons/E-mail.svg");} +.new-icons .gitlab {background-image: url("../img/app-icons/Gitlab.svg");} +.new-icons .news {background-image: url("../img/app-icons/News.svg");} +.new-icons .notes {background-image: url("../img/app-icons/Notes.svg");} +.new-icons .presentation {background-image: url("../img/app-icons/Presentation.svg");} +.new-icons .spreadsheet {background-image: url("../img/app-icons/Spreadsheet.svg");} +.new-icons .tasks {background-image: url("../img/app-icons/Tasks.svg");} +.new-icons .photos {background-image: url("../img/app-icons/Gallery.svg");} +.new-icons .e-user-support-center {background-image: url("../img/app-icons/Support.svg");} +.new-icons .passwords {background-image: url("../img/app-icons/Password.svg");} +.new-icons .onlyoffice_docx {background-image: url("../img/app-icons/Docs.svg");} +.new-icons .onlyoffice_xlsx {background-image: url("../img/app-icons/Spreadsheet.svg");} +.new-icons .onlyoffice_pptx {background-image: url("../img/app-icons/Presentation.svg");} + +#appmenu li:hover a, #appmenu li a:focus { +font-size: 12px; +font-family: 'Roboto'; +letter-spacing: 1px; +} +#filestable thead{background-color: white !important ;} +#recommendations{height: 100px !important;} +.recommendation{border: 1px solid #E6E8E9;padding: 10px !important;margin-bottom: 5px;border-radius: 6px !important;} +progress{border-radius: 10px 10px !important;height: 12px !important;} +#appmenu li a:focus .icon-more, #appmenu li a:focus .icon-more-white {transform: none !important;} +#more-apps:hover span, #more-apps:focus span, #more-apps a:focus span{display: none !important;} + +button#quotaincreasebutton { + margin-top: 15px !important; +} +@media only screen and (max-width: 640px) { + .new-icons .color-icons { + height: 50px; + background-size: 40px; + } + #launcher-menu { + width: 300px !important; + left: 10% !important; + } +} +@media only screen and (max-width: 640px) { + #launcher-menu { + left: 5% !important; + } +} .text-color-active { - color: var(--icon-active-color); + color: var(--icon-active-color); } .margin-top-10{ - margin-top: 10px; + margin-top: 10px; } -- GitLab From 0eb15b74491546ee74bd77951de358536811fc95 Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Fri, 21 Oct 2022 20:02:11 +0530 Subject: [PATCH 2/6] removed last commit --- core/css/server.css | 3449 +++++++++++++++++++++---------------------- 1 file changed, 1723 insertions(+), 1726 deletions(-) diff --git a/core/css/server.css b/core/css/server.css index ead2bba6..f384527c 100644 --- a/core/css/server.css +++ b/core/css/server.css @@ -16,1733 +16,1730 @@ * along with this program. If not, see */ @font-face { - font-family: 'Roboto'; - src: url('../webfonts/Roboto-Regular.woff2') format('woff2'), - url('../webfonts/Roboto-Regular.woff') format('woff'); - /* font-weight: 600; */ - /* font-style: normal; */ - font-display: swap; - letter-spacing: 1px; -} -*{ - font-family: 'Roboto'; -} -:root { ---color-primary: #007fff; ---color-primary-element: #007fff; ---color-secondary-element: white; ---border-color-secondary-element: #007fff; ---color-primary-element-light: #007fff; ---color-error: #fb3845; ---color-delete: #e9322d; ---color-success: #3ad975; ---color-main-background: #ffffff; ---color-main-background-translucent: #f2f2f2; ---color-main-text: black; ---color-background-hover: white; ---color-text-maxcontrast: black; ---color-border-dark: #e6e6e6; ---color-border: #ebebeb; ---icon-settings-dark-000: #000000; ---icon-inactive-color: #808080; ---icon-active-color: #007fff; ---input-background-color: white; ---menu-icon-color: #222; ---color-dashboard-panels: #f2f2f2; ---color-dashboard-background-plain: #d2d2d2; ---color-sharing-icon-background: #767676; -} - -/* Force a few variables to right values for dark theme */ -body.theme--dark { ---input-background-color: #181818; ---icon-notifications-notifications-000000: url("/svg/notifications/notifications?color=000"); ---icon-notifications-notifications-new-000000: url("/svg/notifications/notifications-new?color=000"); ---icon-search-000: url("/svg/core/actions/search?color=000"); -} - -body.theme--highcontrast { ---icon-inactive-color: black; -} - -#body-user #header, -#body-settings #header, -#body-public #header { -background-color: white !important; -} - -button:not(:disabled):hover, -.primary:not(:disabled):hover, -.button:hover, -button.toggle.has-tooltip:hover, -.primary:active, -input[type="submit"]:active, -input[type="button"]:active, -input[type="reset"]:active, -input[type="button"]:hover, -input[type="submit"]:hover, -input[type="reset"]:hover, -.primary:active, -.button:active, -#new-contact-button:hover, -#cookbook_new_cookbook:hover, -#new-user-button:hover, -#deleteaccount:hover, -#quotaincreasebutton:hover, -#content-vue.app-tasks .action.icon-checkmark:hover, -.button.today:hover, -button.import-contact__button-main:hover, -button#notes_new_note:hover, -#oc-dialog-filepicker-content .actions.creatable .icon.icon-add:hover { -opacity: 0.8; -} - -/* primary action button, use sparingly */ -button, -.button, -.primary, -input[type="submit"].primary, -input[type="button"].primary, -button.toggle.has-tooltip, -button.primary, -.button.primary, -.primary:active, -input[type="submit"].primary:active, -input[type="button"].primary:active, -button.primary:active, -.button.primary:active, -.actions a.button, -#new-contact-button, -#cookbook_new_cookbook, -#new-user-button, -#deleteaccount, -#quotaincreasebutton, -.mx-datepicker .mx-datepicker-footer .mx-btn, -#content-vue.app-tasks .action.icon-checkmark, -button.import-contact__button-main, -button#notes_new_note, -#content.app-news button.explore-subscribe, -input[type="button"], -input[type="submit"], -input[type="reset"] { -background-color: var(--color-primary); -color: white; -border-color: var(--color-primary); -} - -input.primary:not(:disabled):hover, -input.primary:not(:disabled):focus, -button.primary:not(:disabled):hover, -button.primary:not(:disabled):focus, -a.primary:not(:disabled):hover, -a.primary:not(:disabled):focus { -background-image: none; -} - -/* For buttons that are not primary or submit/reset/button inputs that are not primary */ - -button.primary + button:not(.primary), -button.primary + button:not(.primary):active, -.entity-picker__navigation button:not(.primary), -.event-popover__buttons button:not(.primary), -.event-popover__buttons button:not(.primary):active, -.oc-dialog-buttonrow.twobuttons button:not(.primary), -.oc-dialog-buttonrow.twobuttons button:not(.primary):active, -.status-buttons .status-buttons__select { -background-color: var(--color-secondary-element); -color: var(--color-primary); -border-color: var(--border-color-secondary-element); -} - -input[type="checkbox"].checkbox + label::before, -input[type="radio"].checkbox + label::before { -border-color: var(--icon-inactive-color); -background-color: white; -} - -textarea:not(:disabled), -textarea:not(:disabled):active, -div[contenteditable="true"]:not(:disabled):active, -textarea:not(:disabled):hover, -div[contenteditable="true"]:not(:disabled):hover, -textarea:not(:disabled):focus, -div[contenteditable="true"]:not(:disabled):focus { -background-color: var(--input-background-color) !important; -} - -select, -textarea, -input[type="text"], -input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([type="file"]):not([type="image"]):not(.multiselect__input), -#content-vue.app-tasks .task-body__checkbox label.reactive.no-nav::before, -#content.app-files #commentsTabView .newCommentForm .message, -.multiselect -.multiselect__content-wrapper -.multiselect__content -li -> span.multiselect__option, -div.select2-container-multi .select2-choices, -div.select2-container-multi.select2-container-active .select2-choices { -background-color: var(--input-background-color); -} - -#settings #expanddiv, -#header .header-right > div > .notification-container.menu { -background-color: var(--color-main-background); -} - -#header .header-appname { -color: var(--color-main-text); -} - -#settings #expanddiv li a.active { -background-color: var(--color-background-hover); -} -body.theme--dark #header .header-right > div > .notification-container.menu, -body.theme--dark #settings #expanddiv { -background-color: var(--color-main-background); -} -.multiselect .multiselect__tags input.multiselect__single, -.multiselect .multiselect__tags span.multiselect__single, -.multiselect .multiselect__tags span.multiselect__placeholder, -.multiselect .multiselect__tags .multiselect__content, -.multiselect .multiselect__tags .multiselect__tags-wrap, -.multiselect .multiselect__input, -.multiselect -.multiselect__content-wrapper -.multiselect__content -li.multiselect__element, -.multiselect -.multiselect__content-wrapper -.multiselect__content -li.multiselect__element -.multiselect__option, -#content-vue.app-contacts -.property.property--without-actions.property--last.property-masonry:not(.property--addressbooks):not(.property--groups) -.multiselect -.multiselect__tags -.multiselect__input, -#content-vue.app-contacts -.multiselect -.multiselect__tags -input.multiselect__input, -#content-vue.app-contacts -.multiselect -> .multiselect__tags -> span.multiselect__single, -#content.app-files #commentsTabView .newCommentForm .message:hover, -#app-dashboard .footer a:hover, -#app-content-systemtagsfilter .select2-container ul { -background-color: var(--input-background-color) !important; -} -/* use logos from theme */ -#header .logo, -#firstrunwizard .logo { -background-image: url("../img/logo@2x.svg"); -width: 256px; -height: 128px; -} -#header .logo-icon { -width: 130px; -height: 40px; -top: 5px; -bottom: 0px; -border-radius: 22px; -} - -#header #nextcloud { -padding-left: 150px; -} - -#header .notifications .svg { -height: 16px; -width: 16px; -} - -/* -For the overflow in search filter; -It doesn't use specific ids so gave the rule a lot of specificity -*/ -.popover > .popover__wrapper .open ul li p { -white-space: normal; -} - -#unified-search #header-menu-unified-search .header-menu__carret { -right: 125px; -} - -/* App Navigation rules */ -#app-navigation:not(.vue) > ul > li.active, -#app-navigation:not(.vue) > ul > li a:active, -#app-navigation:not(.vue) > ul > li a.selected, -#app-navigation:not(.vue) > ul > li a.active, -#app-navigation:not(.vue) > ul > li.active > a, -#app-navigation:not(.vue) > ul > li a:active > a, -#app-navigation:not(.vue) > ul > li a.selected > a, -#app-navigation:not(.vue) > ul > li a.active > a { -background-color: var(--color-main-background); -} - -li.app-navigation-entry, -.conversations .acli_wrapper .acli { -background-clip: content-box; -} - -li.app-navigation-entry.active { -background-color: var(--color-main-background) !important; -} - -li.app-navigation-entry:not(.active):hover, -#content.app-deck li.app-navigation-entry.active { -background-color: var(--color-background-hover) !important; -} - -li.app-navigation-entry.app-navigation-entry--collapsible:hover { -background-color: var(--color-main-background) !important; -} - -li.app-navigation-entry.app-navigation-entry--collapsible > a:hover, -#content.app-passwords #app-navigation .active { -background-color: var(--color-background-hover); -} - -/* CSS TWEAKS TAKEN FROM THEMING APP (disabled now) */ - -.nc-theming-main-background { -background-color: #999999; -} -.nc-theming-main-text { -color: #fff; -} -.nc-theming-contrast { -color: #fff; -} -#appmenu:not(.inverted) svg { -filter: none; -} -#appmenu.inverted svg { -filter: invert(1); -} -.icon-folder, -.icon-filetype-folder { -background-image: var(--icon-folder-007FFF); -} -.icon-filetype-text { -background-image: var(--icon-text-007fff); -} -.icon-filetype-folder-drag-accept { -background-image: var(--icon-folder-drag-accept-007fff) !important; -} -#header .logo { -background-image: url("../img/logo@2x.svg"); -} -#body-user #header, -#body-settings #header, -#body-public #header { -color: var(--color-main-text); -background-image: none; -} - -#body-user.dark--theme, -#body-settings.dark--theme { -color: white !important; -} - -#header .menu, -#header #launcher-menu, -#header .header--menu { -opacity: 1; -} - -#appmenu li span { -color: var(--color-main-text); -} - -#header .logo { -background-size: auto; -} - -input.primary, -#alternative-logins li a { -background-color: #999999; -border: 1px solid #fff; -color: #fff; -} -footer { -height: 92px; -} - -.notifications-button.hasNotifications { -opacity: 0.6 !important; -} -.notifications-button.hasNotifications:hover, -.notifications-button.hasNotifications:focus { -opacity: 1 !important; -} -#header .notification-wrapper .dismiss-all .icon.icon-close { -margin-top: 4px; -} -#content #app-navigation, -#content.app-news #app-navigation button { -color: var(--color-main-text); -border-right: 1px solid var(--color-border); -} - -.icon-home, -#oc-dialog-filepicker-content .dirtree div:first-child a { -background-image: var(--icon-home-808080); -} - -#controls .icon-home, -#oc-dialog-filepicker-content .dirtree div:first-child a { -background-size: 20px; -} - -.icon-mail { -background-image: var(--icon-mail-808080); -} -.icon-error { -background-image: var(--icon-error-808080); -} - -.icon-details { -background-image: var(--icon-details-808080); -} - -.icon-add, -.action-item.icon-add, -button.action-item__menutoggle.icon-add, -#content.app-news .add-new button.icon-add, -.who-has-access .action-item.icon-add.addAdditionalAdmin, -#content-vue.app-tasks -#app-navigation-vue -.app-navigation-entry-icon.sprt-add::before { -background-image: var(--icon-add-808080); -} - -.notification-container .emptycontent .icon-notifications-dark { -background-image: var(--icon-notifications-notifications-808080); -background-size: 40px; -} - -.icon-rename, -.who-has-access .action-item--single.action-item.icon-rename, -.where-is-my-data .action-item--single.action-item.icon-rename { -background-image: var(--icon-rename-808080); -} - -.icon-download { -background-image: var(--icon-download-808080); -} -.icon-template-add { -background-image: var(--icon-template-add-808080); -} -.icon-tasks, -.panel--header .icon-tasks, -.modal__content .icon-tasks { -background-image: var(--icon-tasks-tasks-808080); -} -#tasks_panel .empty-content .icon-tasks { -background-image: var(--icon-tasks-tasks-808080) !important; -} -.icon-checkmark { -background-image: var(--icon-checkmark-808080); -} -.icon-group { -background-image: var(--icon-group-808080); -} -.icon-timezone { -background-image: var(--icon-timezone-808080); -} -.icon-edit { -background-image: var(--icon-edit-808080); -} -.icon-reminder { -background-image: var(--icon-notifications-notifications-808080); -} -.icon-gravatar { -background-image: var(--icon-contacts-gravatar-808080); -} -#content-vue.app-calendar .app-sidebar-tabs__tab-icon.icon-reminder { -background-size: 13px; -} -.icon-clippy { -background-image: var(--icon-clippy-808080); -} -.icon-confirm { -background-image: var(--icon-confirm-808080); -} - -.icon-user-admin { -background-image: var(--icon-user-admin-808080); -} - -.icon-disabled-users { -background-image: var(--icon-disabled-users-808080); -} - -.icon-notes, -.icon-notes-trans { -background-image: var(--icon-notes-notes-808080); -} -.icon-projects { -background-image: var(--icon-projects-808080); -} -.icon-comment { -background-image: var(--icon-comment-808080); -} -.icon-activity { -background-image: var(--icon-activity-activity-808080); -} -.icon-link { -background-image: var(--icon-public-808080); -} -button .icon-link { -background-image: var(--icon-public-ffffff); -} - -.icon-recent { -background-image: var(--icon-files-recent-808080); -} - -.icon-more, -.icon-more-white { -background-image: var(--icon-more-808080); -} - -.avatar-shared.icon-more-white { -background-image: var(--icon-more-fff); -} - -#collection-list .avatar .icon-projects { -background-image: var(--icon-projects-fff); -} - -#sharing-inherited-shares .sharing-entry .avatar-shared.icon-more-white, -.sharing-entry.sharing-entry__internal .avatar-external.icon-external-white, -#collection-list .avatar { -background-color: var(--color-sharing-icon-background); -} - -.icon-files, -.icon-category-files, -.icon-emptyfolder { -background-image: var(--icon-files-app-808080); -} - -#header .icon-notifications, -#header .icon-notifications-new { -background-size: 17px; -} - -.icon-notifications-new { -background-image: var(--icon-notifications-notifications-new-000000); -} - -.icon-notifications { -background-image: var(--icon-notifications-notifications-000000); -} - -.icon-external, -.icon-goto { -background-image: var(--icon-external-808080); -} - -.action.icon-checkmark { -background-image: var(--icon-checkmark-ffffff); -} -.icon-phone { -background-image: var(--icon-phone-808080); -} - -.icon-password, -.icon-category-security { -background-image: var(--icon-password-808080); -} -.icon-link { -background-image: var(--icon-link-808080); -} -.icon-toggle-filelist { -background-image: var(--icon-toggle-filelist-808080); -} - -button.icon-toggle-filelist { -background-color: var(--color-main-background); -} - -.icon-toggle-pictures { -background-image: var(--icon-toggle-pictures-808080); -} - -.button .icon-add, -button .icon-add, -button.icon-add, -#new-contact-button.icon-add, -#cookbook_new_cookbook .icon-add, -#content-vue.app-notes #notes_new_note.icon-add, -#oc-dialog-filepicker-content .actions.creatable .icon.icon-add, -#content.app-news .add-new .icon-add.add-new-folder-primary { -background-image: var(--icon-add-ffffff); -} - -.popover .action-button .action-button__icon.icon-add { -background-image: var(--icon-add-808080); -} - -button > span[class^="icon-"], -.button > span[class^="icon-"], -button > span[class*=" icon-"], -.button > span[class*=" icon-"] { -opacity: 1; -} - -.icon-share, -.icon-shared { -background-image: var(--icon-share-808080); -} - -.icon-contacts-dark, -.icon-contacts, -.icon-category-social { -background-image: var(--icon-contacts-app-808080); -} - -#contactsmenu .icon-contacts { -background-image: var(--icon-contacts-000); -} - -.icon-user, -.icon-category-installed { -background-image: var(--icon-user-808080); -} - -.icon-category-enabled { -background-image: var(--icon-checkmark-808080); -} - -.icon-star, -.icon-star-dark, -.icon-starred:hover { -background-image: var(--icon-star-808080); -} - -.icon-starred, -.icon-star:hover, -.icon-star-dark:hover, -#filestable .filename .favorite-mark .icon-starred { -background-image: var(--icon-star-FFCC00); -} - -.icon-close, -#header-menu-unified-search .icon-close, -.icon-category-disabled { -background-image: var(--icon-close-808080); -} - -#header #searchbox { -color: var(--color-main-text); -border-color: var( - --icon-inactive-color -) !important; /* !important used in source so needed to override */ -} - -#app-navigation, -#app-navigation-vue { -border-right: 2px solid var(--color-border); -} - -table th, -table td { -border-bottom: 1px solid var(--color-border); -} - -.icon-files-dark { -background-image: var(--icon-files-app-808080); -} - -.icon-fullscreen { -background-image: var(--icon-fullscreen-808080); -} - -.icon-calendar-dark { -background-image: var(--icon-calendar-calendar-808080); -} -.icon-talk { -background-image: var(--icon-spreed-app-808080); -} - -#app-navigation li a, -#app-navigation:not(.vue) > ul > li > a, -#app-navigation:not(.vue) > ul > li > ul > li > a { -opacity: 1; -} - -/* Dashboard App */ - -#body-user[data-dashboard-background]:not(.theme--dark) -#app-dashboard -.statuses -button:hover, -#body-user[data-dashboard-background]:not(.theme--dark) .edit-panels:hover { -background-color: var(--color-background-hover) !important; -} - -body.theme--highcontrast #app-dashboard .statuses button, -body.theme--highcontrast #app-dashboard .edit-panels { -border: 1px solid var(--color-main-text); -} - -#body-user[data-dashboard-background]:not(.theme--dark) #app-dashboard .panel, -#body-user[data-dashboard-background]:not(.theme--dark) -#app-dashboard -.statuses -button, -#body-user[data-dashboard-background]:not(.theme--dark) -#app-dashboard -.footer -a { -background-color: var(--color-dashboard-panels); -/* opacity: 0.9; */ -} - -#body-user[data-dashboard-background]:not(.theme--dark) #header { -opacity: 0.95; -} -#body-user[data-dashboard-background].theme--highcontrast #header { -background-color: var(--color-main-background) !important; -} - -#app-dashboard .panel .panel--header > .icon-calendar-dark { -background-position: 14px 10px; -} - -#app-dashboard .panel .panel--header > .icon-files-dark { -background-position: 14px 16px; -} - -#app-dashboard .statuses button { -color: var(--color-main-text); -} - -#content.app-dashboard #app-dashboard, -body[data-dashboard-background]:not(.theme--dark) -.background-selector -.background.filepicker, -body[data-dashboard-background]:not(.theme--dark) -.background-selector -.background.default, -body[data-dashboard-background]:not(.theme--dark) -.modal__content -.background-selector -.background.color { -background-color: var(--color-dashboard-background-plain); -color: var(--color-main-text); -} - -body[data-dashboard-background="#0082c9"] #app-dashboard, -body[data-dashboard-background="default"] #app-dashboard { -background-color: var(--color-dashboard-background-plain); -} - -body[data-dashboard-background="default"] #app-dashboard { -background-image: none !important; -} - -body[data-dashboard-background="#0082c9"] #app-dashboard h2, -body[data-dashboard-background="default"] #app-dashboard h2 { -color: var(--color-main-text); -} - -/* Files App */ - -#filestable .thumbnail { -background-repeat: no-repeat; -} - -.breadcrumb .canDrop > a, -#filestable tbody tr.canDrop, -#filestable.view-grid:not(.hidden) -#fileList -tr:not(.hidden).selected -.thumbnail-wrapper, -#filestable.view-grid:not(.hidden) -#fileList -tr:not(.hidden).selected -.fileactions, -#filestable.view-grid:not(.hidden) -#fileList -tr:not(.hidden).selected -.nametext { -background-color: var(--color-primary-light); -} - -.actions .button.new:active { -background-color: var(--color-primary); -} - -#fileList td a a.action { -opacity: 0.6; -} - -#fileList td a a.action:hover { -opacity: 0.8; -} - -#content.app-files #filestable.view-grid thead tr, -#content.app-files #filestable.view-grid thead th { -border-bottom: 0px; -} - -#content.app-files #controls .icon-shared { -background-size: 14px; -} - -#editor .menububble.is-active .menububble__button { -background-color: var(--color-primary); -} - -#editor .menububble.is-active .menububble__button:hover { -background-color: var(--color-background-hover); -} - -#editor .menububble__button:hover .menububble__buttontext { -color: var(--color-primary); -} - -#editor .menububble__button:hover .icon-link { -background-image: var(--icon-public-007fff); -} - -#editor .menububble__button:hover .icon-file { -background-image: var(--icon-text-007fff); -} - -#uploadprogressbar + button.icon-close, -#google-drive button .icon-close, -#google-photos button .icon-close { -background-image: var(--icon-close-fff); -} - -#google-rm-cred .icon-close { -background-image: var(--icon-close-000); -opacity: 1; -} - -.breadcrumb div.crumb span.icon-shared, -.breadcrumb div.crumb span.icon-public, -.selectedActions a, -#commentsTabView .comment .action { -opacity: 0.8; -} - -#content.app-files #emptycontent .icon-share { -background-image: var(--icon-files-share-808080); -} - -#content #app-content-files #controls { -background-color: var(--color-main-background); -} - -#app-content-files button .icon-file, -#editor .menububble__button .icon-file { -background-image: var(--icon-text-ffffff); -} - -#editor .ProseMirror { -background-color: var(--color-main-background) !important; -} - -#fileList tr td.selection > .selectCheckBox + label::before, -#oc-dialog-filepicker-content .actions.creatable .icon.icon-add { -opacity: 1; -} - -#filestable .filesize, -#filestable .date .modified.live-relative-timestamp { -color: var(--color-main-text) !important; -} -.nav-icon-files { -background-image: var(--icon-files-app-808080); -} - -.nav-icon-files.active { -background-image: var(--icon-files-app-007fff); -} - -.nav-icon-recent { -background-image: var(--icon-files-recent-808080); -} - -.nav-icon-recent.active { -background-image: var(--icon-files-recent-007fff); -} - -.nav-icon-favorites { -background-image: var(--icon-star-outline-808080); -} -.nav-icon-favorites.active { -background-image: var(--icon-star-outline-007fff); -} - -.nav-icon-deletedshares { -background-image: var(--icon-files-unshare-808080); -} -.nav-icon-deletedshares.active { -background-image: var(--icon-files-unshare-007fff); -} - -.nav-icon-shareoverview, -.nav-icon-sharingout, -.nav-icon-sharingin, -.nav-icon-pendingshares, -#content.app-files .icon-share, -#content.app-files .icon-shared { -background-image: var(--icon-files-share-808080); -} -.nav-icon-shareoverview.active, -.nav-icon-sharingout.active, -.nav-icon-sharingin.active, -.nav-icon-pendingshares.active { -background-image: var(--icon-files-share-007fff); -} -.nav-icon-sharinglinks { -background-image: var(--icon-public-808080); -} -.nav-icon-sharinglinks.active { -background-image: var(--icon-public-007fff); -} -.nav-icon-trashbin { -background-image: var(--icon-files-delete-808080); -} - -.nav-icon-trashbin.active { -background-image: var(--icon-files-delete-007fff); -} - -.nav-icon-systemtagsfilter { -background-image: var(--icon-tag-808080); -} - -.nav-icon-systemtagsfilter.active { -background-image: var(--icon-tag-007fff); -} - -.icon-quota { -background-image: var(--icon-quota-808080); -} -.app-sidebar-header__star.icon-star, -.app-sidebar-header__star.icon-starred, -.app-sidebar-header__star.icon-star:hover, -.app-sidebar-header__star.icon-starred:hover, -#view-toggle { -background-size: 16px; -} - -#collection-list .multiselect .multiselect__tags .multiselect__input { -background-color: transparent !important; -} -#collection-list -.multiselect.multiselect--active -.multiselect__tags -.multiselect__input { -background-color: var(--input-background-color) !important; -} -#app-sidebar-vue #sharing .sharing-entry .avatar-external, -#app-sidebar-vue #sharing .sharing-entry .avatar-shared { -background-color: var(--color-primary); -} -#app-sidebar-vue #sharing .sharing-entry .avatar-shared.icon-more-white { -background-image: var(--icon-more-fff); -} - -#app-sidebar-vue #sharing .sharing-entry .avatardiv.icon-public-white { -background-color: var(--color-primary) !important; -} - -body.theme--highcontrast #header .header-right .magnify-icon { -background: var(--icon-search-000) no-repeat center; -} - -#header .header-right .magnify-icon { -background: var(--icon-search-000) no-repeat center; -background-size: 15px; -} - -#content.app-files #filestable span, -#content.app-files #filestable td { -color: var(--color-main-text) !important; -} - -/* Contacts App */ - -#content-vue.app-contacts -.multiselect.property__label -.multiselect__tags -span.multiselect__single, -#content-vue.app-contacts -.multiselect.property__label -.multiselect__tags -.multiselect__input { -background-color: var(--color-main-background) !important; -} - -#contacts-list { -margin-top: 44px; -} - -li.app-navigation-entry.active .icon-user { -background-image: var(--icon-user-007fff); -} - -li.app-navigation-entry.active .icon-contacts-dark, -li.app-navigation-entry.active .icon-group { -background-image: var(--icon-contacts-app-007fff); -} -li.app-navigation-entry.active .icon-address-book { -background-image: var(--icon-contacts-address-book-007fff); -} -li.app-navigation-entry.active .icon-recent-actors { -background-image: var(--icon-contacts-recent-actors-007fff); -} - -#content-vue.app-contacts .multiselect .multiselect__tags .multiselect__input, -#content-vue.app-contacts -.multiselect -> .multiselect__tags -> .multiselect__single { -background-color: var(--color-main-background) !important; -} - -#content-vue.app-contacts ~ .popover .action.active, -#content-vue.app-contacts ~ .popover .action.active .action-input:hover, -#content-vue.app-contacts ~ .popover .action.active .action-input:focus-within { -opacity: 1; -} - -#content-vue.app-contacts ~ .popover .action.active .action-input { -opacity: .7; -} - -#content-vue.app-contacts .empty-content__icon { -height: 80px; -} - -#content-vue.app-contacts -#addressbook-list -.addressbook-shares -.multiselect__content { -background-color: var(--color-secondary-element); -} - -#content-vue.app-contacts .empty-content__title { -text-align: center; -} -#content-vue.app-contacts .app-content > .empty-content { -margin: 20vh; -} -.icon-address-book { -background-image: var(--icon-contacts-address-book-808080); -} - -#content-vue.app-contacts .app-navigation-caption__title { -color: var(--color-main-text); -} - -#content-vue.app-contacts .contact-header__infos input { -background-color: var(--color-main-background); -} - -.property .icon-contacts { -background-image: var(--icon-contacts-app-808080); -} -#content-vue.app-contacts .icon-phone { -background-image: var(--icon-contacts-phone-808080); -} - -button .icon-upload, -#uploadavatarbutton.icon-upload, -.button.primary .icon-upload, -button.primary .icon-upload, -#content-vue.app-calendar .settings-fieldset-interior-item .icon-upload, -#content-vue.app-bookmarks #app-settings-content button .icon-upload, -button.import-contact__button-main .icon-upload, -.import-export button.icon-upload, -.attachments-drag-zone button.icon-upload { -background-image: var(--icon-upload-000); -} -#uploadavatarbutton.icon-upload{ -background-image: var(--icon-upload-ffffff); -} -.action-button .icon-upload, -.menuitem .icon-upload, -button.import-contact__button--local:disabled .import-contact__button-icon.icon-upload - { -background-image: var(--icon-upload-808080); -} - -button .icon-download, -.button .icon-download, -.import-export .button.icon-download { -background-image: var(--icon-download-ffffff); -} -.action-button .icon-download { -background-image: var(--icon-download-808080); -} - -#deleteaccount:not([disabled]) .icon-delete, -button .icon-delete, -.button .icon-delete, -#removeavatar.icon-delete { -background-image: var(--icon-delete-ffffff); -} - -button.menuitem .icon-delete, -.app-navigation-entry-menu button .icon-delete { -background-image: var(--icon-delete-808080); -} - -.menu-icon svg path { -fill: var(--menu-icon-color); -} -.icon-recent-actors { -background-image: var(--icon-contacts-recent-actors-808080); -} - -.popover .action-input__input + .action-input__label { -background-color: var(--color-primary); -} -.popover .action-input__input + .action-input__label > .arrow-right-icon path { -fill: white; -} - -#content-vue.app-contacts .dots-horizontal-icon svg path { -fill: var(--icon-inactive-color); -} - -.mx-icon-calendar svg path { -fill: var(--icon-inactive-color); -} - -#content-vue.app-contacts -~ .popover -.action-input -.action-input__label::before { -content: unset; -} - -/* Photos App */ - -#content-vue.app-photos #app-navigation-vue .app-navigation-entry.active { -background-color: var(--color-main-background) !important; -} - -#content-vue.app-photos .icon-folder { -background-image: var(--icon-folder-007FFF); -} -#content-vue.app-photos .folder-name__icon { -opacity: 0.8; -} - -li.active .icon-yourphotos { -background-image: var(--icon-photos-app-007fff); -} -.icon-yourphotos { -background-image: var(--icon-photos-app-808080); -} - -li.active .icon-video { -background-image: var(--icon-video-007fff); -} - -.icon-video { -background-image: var(--icon-video-808080); -} - -li.active .icon-favorite { -background-image: var(--icon-star-outline-007fff); -} -.icon-favorite { -background-image: var(--icon-star-outline-808080); -} - -li.active .icon-tag { -background-image: var(--icon-tag-007fff); -} -.icon-tag, -.icon-systemtags { -background-image: var(--icon-tag-808080); -} - -li.active .icon-files-dark { -background-image: var(--icon-files-app-007fff); -} -li.active .icon-address { -background-image: var(--icon-address-007fff); -} - -.icon-address { -background-image: var(--icon-address-808080); -} - -li.active .icon-share { -background-image: var(--icon-share-007fff); -} - -#app-navigation-vue #app-settings #app-settings-header .settings-button, -#app-navigation #app-settings #app-settings-header .settings-button, -.icon-category-tools { -background-image: var(--icon-settings-808080); -} - -#header #header-menu-unified-search .unified-search__form-input { -color: var(--color-main-text); -} -#header #header-menu-unified-search .unified-search__form-input, -#header #header-menu-unified-search .unified-search__input-wrapper { -background-color: var(--color-main-background); -} - -.icon-delete, -button.action-button .icon-delete { -background-image: var(--icon-files-delete-808080); -} - -.menuitem:hover .icon-delete, -.menu-option:hover .icon-delete, -button.action-button:hover .icon-delete, -button.menuitem:hover .icon-delete, -.app-navigation-entry-menu button:hover .icon-delete, -#removeavatar.icon-delete:hover { -background-image: var(--icon-delete-e9322d); -} - -#appmenu li a span { -color: transparent; -} - -#appmenu li:hover a span { -color: var(--icon-inactive-color); -} - -body.theme--highcontrast #appmenu li:hover a span { -color: var(--color-main-text); -} - -#appmenu li:hover a svg { -color: var(--color-main-text); -transform: translateY(-7px); -} - -#appmenu:hover li svg, -#appmenu:hover li .icon-more, -#appmenu:hover li .icon-more-white, -#appmenu:hover li .icon-loading-small, -#appmenu:hover li .icon-loading-small-dark { -transform: none; -} - -/* Settings app */ - -#pass2 + input[name="newpassword-clone"] { -width: 100%; -} - -/* Personal Info */ - -#selectavatar.icon-folder { -background-image: var(--icon-folder-ffffff); -background-color: var(--color-primary); -color: white; -border-color: var(--color-primary); -} - -/* Mobile & Desktop */ - -.button.icon-clippy { -background-image: var(--icon-clippy-808080); -} - -/* Sharing */ - -button.social-facebook { -padding-left: 30px; -background-image: var(--icon-federatedfilesharing-social-facebook-000); -} - -button.social-twitter { -padding-left: 30px; -background-image: var(--icon-federatedfilesharing-social-twitter-000); -} - -button.social-diaspora { -padding-left: 30px; -background-image: var(--icon-federatedfilesharing-social-diaspora-000); -} - -/* Flow */ - -#workflowengine .actions__item.colored { -background-color: var(--color-primary) !important; -} -#workflowengine .actions__item.colored button { -background-color: white; -color: var(--color-primary); -} - -/* Calendar App*/ - -.datepicker-button-section button.button { -background-color: var(--color-main-background); -color: var(--color-main-text); -border: none; -max-width: 100px; -margin: auto; -} -.mx-datepicker .mx-calendar td { -border: 0px; -} - -.icon-eye { -background-image: var(--icon-calendar-eye-808080); -} - -.icon-briefcase { -background-image: var(--icon-calendar-briefcase-808080); -} - -.icon-color-picker { -background-image: var(--icon-calendar-color-picker-808080); -} -.icon-menu { -background-image: var(--icon-menu-808080); -} -.mx-datepicker .mx-input-wrapper { -background-color: var(--input-background-color); -} - -.mx-datepicker-main .mx-datepicker-footer .mx-btn:hover, -.mx-datepicker-main .mx-datepicker-footer .mx-btn:focus { -background-color: var(--color-primary); -color: white; -} - -.mx-datepicker .mx-input { -border: none; -margin-top: 0px; -margin-bottom: 0px; -} - -.datepicker-button-section.icon-leftarrow { -background-image: var(--icon-arrow-left-808080); -} - -.datepicker-button-section.icon-rightarrow { -background-image: var(--icon-arrow-right-808080); -} - -.button.datepicker-button-section__next, -.button.datepicker-button-section__previous { -border: none; -margin: auto; -} - -.new-event-today-view-section .button { -border-radius: 8px; -} - -.icon-new-calendar { -background-image: var(--icon-calendar-calendar-808080); -} - -.icon-new-calendar-with-task-list { -background-image: var(--icon-calendar-new-calendar-with-task-list-808080); -} - -.icon-public { -background-image: var(--icon-public-808080); -} - -#content-vue.app-calendar #app-navigation-vue .action-item.icon-share, -#content-vue.app-calendar #app-navigation-vue .action-item.icon-shared, -#content-vue.app-contacts #addressbook-list .icon-shared { -background-size: 12px; -} -#content-vue.app-calendar .fc-scrollgrid { -padding-top: 14px; -} - -#content-vue.app-calendar .fc-dayGridMonth-view table { -font-size: 1em; -} - -.icon-view-week { -background-image: var(--icon-calendar-view-week-808080); -} - -.icon-view-day { -background-image: var(--icon-calendar-view-day-808080); -} - -.icon-view-module { -background-image: var(--icon-calendar-view-module-808080); -} - -.icon-view-list { -background-image: var(--icon-calendar-view-list-808080); -} - -#content-vue.app-calendar .app-sidebar-tabs__tab a.active { -color: var(--color-text-light); -} - -/* Notes App*/ - -#content-vue.app-notes li.app-navigation-entry.active, -#content-vue.app-talk li.acli_wrapper.active { -background-color: var(--color-background-hover) !important; -} -#content-vue.app-notes .welcome-content .icon-files-dark { -background-size: 18px; -} - -#content-vue.app-notes button.icon-confirm::before, -#content.app-dashboard ~ .popover .action-input__form .action-input__label::before { -content: var(--icon-confirm-fff); -} - -#content-vue.app-notes .welcome-content .icon-phone { -background-size: 11px; -} - -#content-vue.app-notes -#app-settings__header -.settings-button__icon -.material-design-icon__svg, -#content-vue.app-calendar -#app-settings -.settings-button__icon -.material-design-icon__svg, -#content-vue.app-calendar -~ .popover -div[class^="property-"] -.material-design-icon__svg, -#content-vue.app-calendar div[class^="property-"] .material-design-icon__svg, -#content-vue.app-calendar -.app-sidebar -.app-sidebar__close -.material-design-icon__svg, -#content-vue.app-calendar .app-sidebar-tabs__tab a { -color: var(--icon-inactive-color); -} - -.CodeMirror .CodeMirror-line::selection, -.CodeMirror .CodeMirror-line > span::selection, -.CodeMirror .CodeMirror-line > span > span::selection { -background: var(--color-primary); -} -input[type="text"] + .icon-confirm, -input[type="password"] + .icon-confirm, -input[type="email"] + .icon-confirm { -background-color: var(--color-primary) !important; -background-image: var(--icon-confirm-fff) !important; -background-repeat: no-repeat !important; -background-position: center !important; -} - -input[type="text"] + .icon-confirm::before, -input[type="password"] + .icon-confirm::before, -input[type="email"] + .icon-confirm::before { -content: unset !important; -} - -input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, -input[type="password"]:not(:active):not(:hover):not(:focus) -+ .icon-confirm:active, -input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, -input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, -input[type="password"]:not(:active):not(:hover):not(:focus) -+ .icon-confirm:hover, -input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, -input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus, -input[type="password"]:not(:active):not(:hover):not(:focus) -+ .icon-confirm:focus, -input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus { -border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; -border-left-color: transparent !important; -} - -#app-sidebar-vue .note-category .category input.icon-confirm:hover { -border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; -} -#app-sidebar-vue.app-sidebar -.app-sidebar-header__desc -.app-sidebar-header__menu { -background-color: var(--color-main-background); -} - -#content.app-settings -.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, -#content.app-files -.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, -#header -.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, -#content-vue.app-bookmarks -.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, -#content-vue.app-photos -.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, -#content-vue.app-talk -.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before{ -content: var(--icon-more-808080); -font-size: unset; -font-weight: unset; -font-style: unset; -font-family: unset; -line-height: unset; -} - -#content-vue.app-bookmarks -.icon.action-item__menutoggle--primary.action-item__menutoggle--default-icon::before { -content: var(--icon-more-fff); -} - -#note-container .CodeMirror-code[contenteditable="true"]:hover, -#note-container .CodeMirror-code[contenteditable="true"]:focus, -#note-container .CodeMirror-code[contenteditable="true"]:active { -background-color: var(--color-main-background) !important; -} -/* Tasks app*/ - -.action-item:not(.priority--high) .material-design-icon, -#app-settings .collection .material-design-icon, -.material-design-icon.emoticon-outline-icon { -color: var(--icon-inactive-color); -} - -.action.active .material-design-icon.delete-icon, -.action-item:hover .material-design-icon.delete-icon { -color: var(--color-delete); -} - -#content-vue.app-tasks .app-sidebar-tabs .property__item--clearable { -color: var(--icon-active-color) !important; -} - -#content-vue.app-tasks .app-sidebar-tabs .multiselect-picker-option.active { -color: var(--icon-active-color); -} -/* Settings Apps categories icons */ - -.icon-category-app-bundles { -background-image: var(--icon-bundles-808080); -} -.icon-category-dashboard { -background-image: var(--icon-dashboard-dashboard-808080); -} -.icon-category-customization { -background-image: var(--icon-customization-808080); -} -.icon-category-games { -background-image: var(--icon-games-808080); -} -.icon-category-integration { -background-image: var(--icon-integration-808080); -} -.icon-category-monitoring { -background-image: var(--icon-monitoring-808080); -} -.icon-category-multimedia { -background-image: var(--icon-multimedia-808080); -} -.icon-category-office { -background-image: var(--icon-office-808080); -} -.icon-category-organization { -background-image: var(--icon-organization-808080); -} -.icon-category-search { -background-image: var(--icon-search-808080); -} - -.icon-category-workflow { -background-image: var(--icon-workflow-808080); -} - -/* Bookmarks app */ - -.popover .action-button__icon.icon-link { -background-image: var(--icon-public-808080); -} - -.controls svg path, -.material-design-icon.earth-icon svg path { -fill: var(--icon-inactive-color); -} - -.app-navigation-entry-icon .material-design-icon, -.action .material-design-icon { -color: var(--icon-inactive-color); -} - -.app-navigation-entry.active .app-navigation-entry-icon .material-design-icon, -.action.active .material-design-icon, -.action.selected .material-design-icon { -color: var(--icon-active-color); -} - -.app-navigation-entry -.app-navigation-entry__inline-input-container -form -button.icon-confirm::before { -content: unset; -} -.app-navigation-entry.active .icon-home { -background-image: var(--icon-home-007fff); -} - -#content-vue.app-bookmarks .app-navigation-entry-icon svg path { -fill: var(--icon-inactive-color); -} -#content-vue.app-bookmarks .app-navigation-entry.active svg path { -fill: var(--icon-active-color); -} - -/* News App */ - -#content-vue.app-bookmarks .empty-content { -text-align: center; -} - -#app-navigation .icon-unpinned { -background-image: var(--icon-news-unpinned-808080); -} - -#app-navigation .icon-pinned { -background-image: var(--icon-news-pinned-808080); -} -#app-navigation .icon-full-text-disabled { -background-image: var(--icon-news-nonfulltext-808080); -} -#app-navigation .icon-full-text-enabled { -background-image: var(--icon-news-fulltext-808080); -} - -/* Passwords App */ - -.searchbox .icon-search-force-white { -background-image: var(--icon-search-000); -} - -.searchbox { -opacity: 1 !important; -} - -#content.app-passwords #app-navigation .icon.fa::before { -content: unset; -} - -/* Talk App */ - -#content-vue.app-talk .acli_wrapper .acli.active { -background-color: transparent; -} - -#content-vue.app-talk #app-sidebar .username-form button.icon-rename, button.edit-output-dir span.icon-rename { -background-image: var(--icon-rename-000); -} - -/* Google integration */ - -#google_prefs #google-content button.google-oauth { -background-color: var(--color-primary); -} - -#google-import-contacts .icon-contacts-dark { -background-image: var(--icon-contacts-000); -} - -#google-calendars button .icon-calendar-dark { -background-image: var(--icon-calendar-000); -} - -#google-import-files .icon-files-dark { -background-image: var(--icon-files-000); -} - -#google-import-photos .icon-picture { -background-image: var(--icon-picture-000); -} - -/* remove opacity */ -button.edit-output-dir span.icon-rename, #google-rm-cred .icon-close, #google-import-photos .icon-picture, #google-import-contacts .icon-contacts-dark, #google-calendars button .icon-calendar-dark, #google-import-files .icon-files-dark { -opacity: 1; -} -/** */ -#header .header-right .magnify-icon > svg { -display: none; -} -.new-icons .color-icons{ - background-image: url("../img/app-icons/other.svg"); - width: 100% ; - height: 80px; - background-position: 50%; - background-repeat: no-repeat; - background-size: 60px; -} -.new-icons .drive , .new-icons .files {background-image: url("../img/app-icons/Drive.svg");} -.new-icons .activity {background-image: url("../img/app-icons/Activity.svg");} -.new-icons .bookmarks {background-image: url("../img/app-icons/Bookmark.svg");} -.new-icons .calendar {background-image: url("../img/app-icons/Calendar.svg");} -.new-icons .carnet {background-image: url("../img/app-icons/Carnet.svg");} -.new-icons .contacts {background-image: url("../img/app-icons/Contacts.svg");} -.new-icons .deck {background-image: url("../img/app-icons/Deck.svg");} -.new-icons .docs {background-image: url("../img/app-icons/Docs.svg");} -.new-icons .email,.new-icons .rainloop {background-image: url("../img/app-icons/E-mail.svg");} -.new-icons .gitlab {background-image: url("../img/app-icons/Gitlab.svg");} -.new-icons .news {background-image: url("../img/app-icons/News.svg");} -.new-icons .notes {background-image: url("../img/app-icons/Notes.svg");} -.new-icons .presentation {background-image: url("../img/app-icons/Presentation.svg");} -.new-icons .spreadsheet {background-image: url("../img/app-icons/Spreadsheet.svg");} -.new-icons .tasks {background-image: url("../img/app-icons/Tasks.svg");} -.new-icons .photos {background-image: url("../img/app-icons/Gallery.svg");} -.new-icons .e-user-support-center {background-image: url("../img/app-icons/Support.svg");} -.new-icons .passwords {background-image: url("../img/app-icons/Password.svg");} -.new-icons .onlyoffice_docx {background-image: url("../img/app-icons/Docs.svg");} -.new-icons .onlyoffice_xlsx {background-image: url("../img/app-icons/Spreadsheet.svg");} -.new-icons .onlyoffice_pptx {background-image: url("../img/app-icons/Presentation.svg");} - -#appmenu li:hover a, #appmenu li a:focus { -font-size: 12px; -font-family: 'Roboto'; -letter-spacing: 1px; -} -#filestable thead{background-color: white !important ;} -#recommendations{height: 100px !important;} -.recommendation{border: 1px solid #E6E8E9;padding: 10px !important;margin-bottom: 5px;border-radius: 6px !important;} -progress{border-radius: 10px 10px !important;height: 12px !important;} -#appmenu li a:focus .icon-more, #appmenu li a:focus .icon-more-white {transform: none !important;} -#more-apps:hover span, #more-apps:focus span, #more-apps a:focus span{display: none !important;} - -button#quotaincreasebutton { - margin-top: 15px !important; -} -@media only screen and (max-width: 640px) { - .new-icons .color-icons { - height: 50px; - background-size: 40px; - } - #launcher-menu { - width: 300px !important; - left: 10% !important; - } -} -@media only screen and (max-width: 640px) { - #launcher-menu { - left: 5% !important; - } -} + font-family: 'Roboto'; + src: url('../webfonts/Roboto-Regular.woff2') format('woff2'), + url('../webfonts/Roboto-Regular.woff') format('woff'); + /* font-weight: 600; */ + /* font-style: normal; */ + font-display: swap; + letter-spacing: 1px; + } + *{ + font-family: 'Roboto'; + } + :root { + --color-primary: #007fff; + --color-primary-element: #007fff; + --color-secondary-element: white; + --border-color-secondary-element: #007fff; + --color-primary-element-light: #007fff; + --color-error: #fb3845; + --color-delete: #e9322d; + --color-success: #3ad975; + --color-main-background: #ffffff; + --color-main-background-translucent: #f2f2f2; + --color-main-text: black; + --color-background-hover: white; + --color-text-maxcontrast: black; + --color-border-dark: #e6e6e6; + --color-border: #ebebeb; + --icon-settings-dark-000: #000000; + --icon-inactive-color: #808080; + --icon-active-color: #007fff; + --input-background-color: white; + --menu-icon-color: #222; + --color-dashboard-panels: #f2f2f2; + --color-dashboard-background-plain: #d2d2d2; + --color-sharing-icon-background: #767676; + } + + /* Force a few variables to right values for dark theme */ + body.theme--dark { + --input-background-color: #181818; + --icon-notifications-notifications-000000: url("/svg/notifications/notifications?color=000"); + --icon-notifications-notifications-new-000000: url("/svg/notifications/notifications-new?color=000"); + --icon-search-000: url("/svg/core/actions/search?color=000"); + } + + body.theme--highcontrast { + --icon-inactive-color: black; + } + + #body-user #header, + #body-settings #header, + #body-public #header { + background-color: white !important; + } + + button:not(:disabled):hover, + .primary:not(:disabled):hover, + .button:hover, + button.toggle.has-tooltip:hover, + .primary:active, + input[type="submit"]:active, + input[type="button"]:active, + input[type="reset"]:active, + input[type="button"]:hover, + input[type="submit"]:hover, + input[type="reset"]:hover, + .primary:active, + .button:active, + #new-contact-button:hover, + #new-user-button:hover, + #deleteaccount:hover, + #quotaincreasebutton:hover, + #content-vue.app-tasks .action.icon-checkmark:hover, + .button.today:hover, + button.import-contact__button-main:hover, + button#notes_new_note:hover, + #oc-dialog-filepicker-content .actions.creatable .icon.icon-add:hover { + opacity: 0.8; + } + + /* primary action button, use sparingly */ + button, + .button, + .primary, + input[type="submit"].primary, + input[type="button"].primary, + button.toggle.has-tooltip, + button.primary, + .button.primary, + .primary:active, + input[type="submit"].primary:active, + input[type="button"].primary:active, + button.primary:active, + .button.primary:active, + .actions a.button, + #new-contact-button, + #new-user-button, + #deleteaccount, + #quotaincreasebutton, + .mx-datepicker .mx-datepicker-footer .mx-btn, + #content-vue.app-tasks .action.icon-checkmark, + button.import-contact__button-main, + button#notes_new_note, + #content.app-news button.explore-subscribe, + input[type="button"], + input[type="submit"], + input[type="reset"] { + background-color: var(--color-primary); + color: white; + border-color: var(--color-primary); + } + + input.primary:not(:disabled):hover, + input.primary:not(:disabled):focus, + button.primary:not(:disabled):hover, + button.primary:not(:disabled):focus, + a.primary:not(:disabled):hover, + a.primary:not(:disabled):focus { + background-image: none; + } + + /* For buttons that are not primary or submit/reset/button inputs that are not primary */ + + button.primary + button:not(.primary), + button.primary + button:not(.primary):active, + .entity-picker__navigation button:not(.primary), + .event-popover__buttons button:not(.primary), + .event-popover__buttons button:not(.primary):active, + .oc-dialog-buttonrow.twobuttons button:not(.primary), + .oc-dialog-buttonrow.twobuttons button:not(.primary):active, + .status-buttons .status-buttons__select { + background-color: var(--color-secondary-element); + color: var(--color-primary); + border-color: var(--border-color-secondary-element); + } + + input[type="checkbox"].checkbox + label::before, + input[type="radio"].checkbox + label::before { + border-color: var(--icon-inactive-color); + background-color: white; + } + + textarea:not(:disabled), + textarea:not(:disabled):active, + div[contenteditable="true"]:not(:disabled):active, + textarea:not(:disabled):hover, + div[contenteditable="true"]:not(:disabled):hover, + textarea:not(:disabled):focus, + div[contenteditable="true"]:not(:disabled):focus { + background-color: var(--input-background-color) !important; + } + + select, + textarea, + input[type="text"], + input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([type="file"]):not([type="image"]):not(.multiselect__input), + #content-vue.app-tasks .task-body__checkbox label.reactive.no-nav::before, + #content.app-files #commentsTabView .newCommentForm .message, + .multiselect + .multiselect__content-wrapper + .multiselect__content + li + > span.multiselect__option, + div.select2-container-multi .select2-choices, + div.select2-container-multi.select2-container-active .select2-choices { + background-color: var(--input-background-color); + } + + #settings #expanddiv, + #header .header-right > div > .notification-container.menu { + background-color: var(--color-main-background); + } + + #header .header-appname { + color: var(--color-main-text); + } + + #settings #expanddiv li a.active { + background-color: var(--color-background-hover); + } + body.theme--dark #header .header-right > div > .notification-container.menu, + body.theme--dark #settings #expanddiv { + background-color: var(--color-main-background); + } + .multiselect .multiselect__tags input.multiselect__single, + .multiselect .multiselect__tags span.multiselect__single, + .multiselect .multiselect__tags span.multiselect__placeholder, + .multiselect .multiselect__tags .multiselect__content, + .multiselect .multiselect__tags .multiselect__tags-wrap, + .multiselect .multiselect__input, + .multiselect + .multiselect__content-wrapper + .multiselect__content + li.multiselect__element, + .multiselect + .multiselect__content-wrapper + .multiselect__content + li.multiselect__element + .multiselect__option, + #content-vue.app-contacts + .property.property--without-actions.property--last.property-masonry:not(.property--addressbooks):not(.property--groups) + .multiselect + .multiselect__tags + .multiselect__input, + #content-vue.app-contacts + .multiselect + .multiselect__tags + input.multiselect__input, + #content-vue.app-contacts + .multiselect + > .multiselect__tags + > span.multiselect__single, + #content.app-files #commentsTabView .newCommentForm .message:hover, + #app-dashboard .footer a:hover, + #app-content-systemtagsfilter .select2-container ul { + background-color: var(--input-background-color) !important; + } + /* use logos from theme */ + #header .logo, + #firstrunwizard .logo { + background-image: url("../img/logo@2x.svg"); + width: 256px; + height: 128px; + } + #header .logo-icon { + width: 130px; + height: 40px; + top: 5px; + bottom: 0px; + border-radius: 22px; + } + + #header #nextcloud { + padding-left: 150px; + } + + #header .notifications .svg { + height: 16px; + width: 16px; + } + + /* + For the overflow in search filter; + It doesn't use specific ids so gave the rule a lot of specificity + */ + .popover > .popover__wrapper .open ul li p { + white-space: normal; + } + + #unified-search #header-menu-unified-search .header-menu__carret { + right: 125px; + } + + /* App Navigation rules */ + #app-navigation:not(.vue) > ul > li.active, + #app-navigation:not(.vue) > ul > li a:active, + #app-navigation:not(.vue) > ul > li a.selected, + #app-navigation:not(.vue) > ul > li a.active, + #app-navigation:not(.vue) > ul > li.active > a, + #app-navigation:not(.vue) > ul > li a:active > a, + #app-navigation:not(.vue) > ul > li a.selected > a, + #app-navigation:not(.vue) > ul > li a.active > a { + background-color: var(--color-main-background); + } + + li.app-navigation-entry, + .conversations .acli_wrapper .acli { + background-clip: content-box; + } + + li.app-navigation-entry.active { + background-color: var(--color-main-background) !important; + } + + li.app-navigation-entry:not(.active):hover, + #content.app-deck li.app-navigation-entry.active { + background-color: var(--color-background-hover) !important; + } + + li.app-navigation-entry.app-navigation-entry--collapsible:hover { + background-color: var(--color-main-background) !important; + } + + li.app-navigation-entry.app-navigation-entry--collapsible > a:hover, + #content.app-passwords #app-navigation .active { + background-color: var(--color-background-hover); + } + + /* CSS TWEAKS TAKEN FROM THEMING APP (disabled now) */ + + .nc-theming-main-background { + background-color: #999999; + } + .nc-theming-main-text { + color: #fff; + } + .nc-theming-contrast { + color: #fff; + } + #appmenu:not(.inverted) svg { + filter: none; + } + #appmenu.inverted svg { + filter: invert(1); + } + .icon-folder, + .icon-filetype-folder { + background-image: var(--icon-folder-007FFF); + } + .icon-filetype-text { + background-image: var(--icon-text-007fff); + } + .icon-filetype-folder-drag-accept { + background-image: var(--icon-folder-drag-accept-007fff) !important; + } + #header .logo { + background-image: url("../img/logo@2x.svg"); + } + #body-user #header, + #body-settings #header, + #body-public #header { + color: var(--color-main-text); + background-image: none; + } + + #body-user.dark--theme, + #body-settings.dark--theme { + color: white !important; + } + + #header .menu, + #header #launcher-menu, + #header .header--menu { + opacity: 1; + } + + #appmenu li span { + color: var(--color-main-text); + } + + #header .logo { + background-size: auto; + } + + input.primary, + #alternative-logins li a { + background-color: #999999; + border: 1px solid #fff; + color: #fff; + } + footer { + height: 92px; + } + + .notifications-button.hasNotifications { + opacity: 0.6 !important; + } + .notifications-button.hasNotifications:hover, + .notifications-button.hasNotifications:focus { + opacity: 1 !important; + } + #header .notification-wrapper .dismiss-all .icon.icon-close { + margin-top: 4px; + } + #content #app-navigation, + #content.app-news #app-navigation button { + color: var(--color-main-text); + border-right: 1px solid var(--color-border); + } + + .icon-home, + #oc-dialog-filepicker-content .dirtree div:first-child a { + background-image: var(--icon-home-808080); + } + + #controls .icon-home, + #oc-dialog-filepicker-content .dirtree div:first-child a { + background-size: 20px; + } + + .icon-mail { + background-image: var(--icon-mail-808080); + } + .icon-error { + background-image: var(--icon-error-808080); + } + + .icon-details { + background-image: var(--icon-details-808080); + } + + .icon-add, + .action-item.icon-add, + button.action-item__menutoggle.icon-add, + #content.app-news .add-new button.icon-add, + .who-has-access .action-item.icon-add.addAdditionalAdmin, + #content-vue.app-tasks + #app-navigation-vue + .app-navigation-entry-icon.sprt-add::before { + background-image: var(--icon-add-808080); + } + + .notification-container .emptycontent .icon-notifications-dark { + background-image: var(--icon-notifications-notifications-808080); + background-size: 40px; + } + + .icon-rename, + .who-has-access .action-item--single.action-item.icon-rename, + .where-is-my-data .action-item--single.action-item.icon-rename { + background-image: var(--icon-rename-808080); + } + + .icon-download { + background-image: var(--icon-download-808080); + } + .icon-template-add { + background-image: var(--icon-template-add-808080); + } + .icon-tasks, + .panel--header .icon-tasks, + .modal__content .icon-tasks { + background-image: var(--icon-tasks-tasks-808080); + } + #tasks_panel .empty-content .icon-tasks { + background-image: var(--icon-tasks-tasks-808080) !important; + } + .icon-checkmark { + background-image: var(--icon-checkmark-808080); + } + .icon-group { + background-image: var(--icon-group-808080); + } + .icon-timezone { + background-image: var(--icon-timezone-808080); + } + .icon-edit { + background-image: var(--icon-edit-808080); + } + .icon-reminder { + background-image: var(--icon-notifications-notifications-808080); + } + .icon-gravatar { + background-image: var(--icon-contacts-gravatar-808080); + } + #content-vue.app-calendar .app-sidebar-tabs__tab-icon.icon-reminder { + background-size: 13px; + } + .icon-clippy { + background-image: var(--icon-clippy-808080); + } + .icon-confirm { + background-image: var(--icon-confirm-808080); + } + + .icon-user-admin { + background-image: var(--icon-user-admin-808080); + } + + .icon-disabled-users { + background-image: var(--icon-disabled-users-808080); + } + + .icon-notes, + .icon-notes-trans { + background-image: var(--icon-notes-notes-808080); + } + .icon-projects { + background-image: var(--icon-projects-808080); + } + .icon-comment { + background-image: var(--icon-comment-808080); + } + .icon-activity { + background-image: var(--icon-activity-activity-808080); + } + .icon-link { + background-image: var(--icon-public-808080); + } + button .icon-link { + background-image: var(--icon-public-ffffff); + } + + .icon-recent { + background-image: var(--icon-files-recent-808080); + } + + .icon-more, + .icon-more-white { + background-image: var(--icon-more-808080); + } + + .avatar-shared.icon-more-white { + background-image: var(--icon-more-fff); + } + + #collection-list .avatar .icon-projects { + background-image: var(--icon-projects-fff); + } + + #sharing-inherited-shares .sharing-entry .avatar-shared.icon-more-white, + .sharing-entry.sharing-entry__internal .avatar-external.icon-external-white, + #collection-list .avatar { + background-color: var(--color-sharing-icon-background); + } + + .icon-files, + .icon-category-files, + .icon-emptyfolder { + background-image: var(--icon-files-app-808080); + } + + #header .icon-notifications, + #header .icon-notifications-new { + background-size: 17px; + } + + .icon-notifications-new { + background-image: var(--icon-notifications-notifications-new-000000); + } + + .icon-notifications { + background-image: var(--icon-notifications-notifications-000000); + } + + .icon-external, + .icon-goto { + background-image: var(--icon-external-808080); + } + + .action.icon-checkmark { + background-image: var(--icon-checkmark-ffffff); + } + .icon-phone { + background-image: var(--icon-phone-808080); + } + + .icon-password, + .icon-category-security { + background-image: var(--icon-password-808080); + } + .icon-link { + background-image: var(--icon-link-808080); + } + .icon-toggle-filelist { + background-image: var(--icon-toggle-filelist-808080); + } + + button.icon-toggle-filelist { + background-color: var(--color-main-background); + } + + .icon-toggle-pictures { + background-image: var(--icon-toggle-pictures-808080); + } + + .button .icon-add, + button .icon-add, + button.icon-add, + #new-contact-button.icon-add, + #content-vue.app-notes #notes_new_note.icon-add, + #oc-dialog-filepicker-content .actions.creatable .icon.icon-add, + #content.app-news .add-new .icon-add.add-new-folder-primary { + background-image: var(--icon-add-ffffff); + } + + .popover .action-button .action-button__icon.icon-add { + background-image: var(--icon-add-808080); + } + + button > span[class^="icon-"], + .button > span[class^="icon-"], + button > span[class*=" icon-"], + .button > span[class*=" icon-"] { + opacity: 1; + } + + .icon-share, + .icon-shared { + background-image: var(--icon-share-808080); + } + + .icon-contacts-dark, + .icon-contacts, + .icon-category-social { + background-image: var(--icon-contacts-app-808080); + } + + #contactsmenu .icon-contacts { + background-image: var(--icon-contacts-000); + } + + .icon-user, + .icon-category-installed { + background-image: var(--icon-user-808080); + } + + .icon-category-enabled { + background-image: var(--icon-checkmark-808080); + } + + .icon-star, + .icon-star-dark, + .icon-starred:hover { + background-image: var(--icon-star-808080); + } + + .icon-starred, + .icon-star:hover, + .icon-star-dark:hover, + #filestable .filename .favorite-mark .icon-starred { + background-image: var(--icon-star-FFCC00); + } + + .icon-close, + #header-menu-unified-search .icon-close, + .icon-category-disabled { + background-image: var(--icon-close-808080); + } + + #header #searchbox { + color: var(--color-main-text); + border-color: var( + --icon-inactive-color + ) !important; /* !important used in source so needed to override */ + } + + #app-navigation, + #app-navigation-vue { + border-right: 2px solid var(--color-border); + } + + table th, + table td { + border-bottom: 1px solid var(--color-border); + } + + .icon-files-dark { + background-image: var(--icon-files-app-808080); + } + + .icon-fullscreen { + background-image: var(--icon-fullscreen-808080); + } + + .icon-calendar-dark { + background-image: var(--icon-calendar-calendar-808080); + } + .icon-talk { + background-image: var(--icon-spreed-app-808080); + } + + #app-navigation li a, + #app-navigation:not(.vue) > ul > li > a, + #app-navigation:not(.vue) > ul > li > ul > li > a { + opacity: 1; + } + + /* Dashboard App */ + + #body-user[data-dashboard-background]:not(.theme--dark) + #app-dashboard + .statuses + button:hover, + #body-user[data-dashboard-background]:not(.theme--dark) .edit-panels:hover { + background-color: var(--color-background-hover) !important; + } + + body.theme--highcontrast #app-dashboard .statuses button, + body.theme--highcontrast #app-dashboard .edit-panels { + border: 1px solid var(--color-main-text); + } + + #body-user[data-dashboard-background]:not(.theme--dark) #app-dashboard .panel, + #body-user[data-dashboard-background]:not(.theme--dark) + #app-dashboard + .statuses + button, + #body-user[data-dashboard-background]:not(.theme--dark) + #app-dashboard + .footer + a { + background-color: var(--color-dashboard-panels); + /* opacity: 0.9; */ + } + + #body-user[data-dashboard-background]:not(.theme--dark) #header { + opacity: 0.95; + } + #body-user[data-dashboard-background].theme--highcontrast #header { + background-color: var(--color-main-background) !important; + } + + #app-dashboard .panel .panel--header > .icon-calendar-dark { + background-position: 14px 10px; + } + + #app-dashboard .panel .panel--header > .icon-files-dark { + background-position: 14px 16px; + } + + #app-dashboard .statuses button { + color: var(--color-main-text); + } + + #content.app-dashboard #app-dashboard, + body[data-dashboard-background]:not(.theme--dark) + .background-selector + .background.filepicker, + body[data-dashboard-background]:not(.theme--dark) + .background-selector + .background.default, + body[data-dashboard-background]:not(.theme--dark) + .modal__content + .background-selector + .background.color { + background-color: var(--color-dashboard-background-plain); + color: var(--color-main-text); + } + + body[data-dashboard-background="#0082c9"] #app-dashboard, + body[data-dashboard-background="default"] #app-dashboard { + background-color: var(--color-dashboard-background-plain); + } + + body[data-dashboard-background="default"] #app-dashboard { + background-image: none !important; + } + + body[data-dashboard-background="#0082c9"] #app-dashboard h2, + body[data-dashboard-background="default"] #app-dashboard h2 { + color: var(--color-main-text); + } + + /* Files App */ + + #filestable .thumbnail { + background-repeat: no-repeat; + } + + .breadcrumb .canDrop > a, + #filestable tbody tr.canDrop, + #filestable.view-grid:not(.hidden) + #fileList + tr:not(.hidden).selected + .thumbnail-wrapper, + #filestable.view-grid:not(.hidden) + #fileList + tr:not(.hidden).selected + .fileactions, + #filestable.view-grid:not(.hidden) + #fileList + tr:not(.hidden).selected + .nametext { + background-color: var(--color-primary-light); + } + + .actions .button.new:active { + background-color: var(--color-primary); + } + + #fileList td a a.action { + opacity: 0.6; + } + + #fileList td a a.action:hover { + opacity: 0.8; + } + + #content.app-files #filestable.view-grid thead tr, + #content.app-files #filestable.view-grid thead th { + border-bottom: 0px; + } + + #content.app-files #controls .icon-shared { + background-size: 14px; + } + + #editor .menububble.is-active .menububble__button { + background-color: var(--color-primary); + } + + #editor .menububble.is-active .menububble__button:hover { + background-color: var(--color-background-hover); + } + + #editor .menububble__button:hover .menububble__buttontext { + color: var(--color-primary); + } + + #editor .menububble__button:hover .icon-link { + background-image: var(--icon-public-007fff); + } + + #editor .menububble__button:hover .icon-file { + background-image: var(--icon-text-007fff); + } + + #uploadprogressbar + button.icon-close, + #google-drive button .icon-close, + #google-photos button .icon-close { + background-image: var(--icon-close-fff); + } + + #google-rm-cred .icon-close { + background-image: var(--icon-close-000); + opacity: 1; + } + + .breadcrumb div.crumb span.icon-shared, + .breadcrumb div.crumb span.icon-public, + .selectedActions a, + #commentsTabView .comment .action { + opacity: 0.8; + } + + #content.app-files #emptycontent .icon-share { + background-image: var(--icon-files-share-808080); + } + + #content #app-content-files #controls { + background-color: var(--color-main-background); + } + + #app-content-files button .icon-file, + #editor .menububble__button .icon-file { + background-image: var(--icon-text-ffffff); + } + + #editor .ProseMirror { + background-color: var(--color-main-background) !important; + } + + #fileList tr td.selection > .selectCheckBox + label::before, + #oc-dialog-filepicker-content .actions.creatable .icon.icon-add { + opacity: 1; + } + + #filestable .filesize, + #filestable .date .modified.live-relative-timestamp { + color: var(--color-main-text) !important; + } + .nav-icon-files { + background-image: var(--icon-files-app-808080); + } + + .nav-icon-files.active { + background-image: var(--icon-files-app-007fff); + } + + .nav-icon-recent { + background-image: var(--icon-files-recent-808080); + } + + .nav-icon-recent.active { + background-image: var(--icon-files-recent-007fff); + } + + .nav-icon-favorites { + background-image: var(--icon-star-outline-808080); + } + .nav-icon-favorites.active { + background-image: var(--icon-star-outline-007fff); + } + + .nav-icon-deletedshares { + background-image: var(--icon-files-unshare-808080); + } + .nav-icon-deletedshares.active { + background-image: var(--icon-files-unshare-007fff); + } + + .nav-icon-shareoverview, + .nav-icon-sharingout, + .nav-icon-sharingin, + .nav-icon-pendingshares, + #content.app-files .icon-share, + #content.app-files .icon-shared { + background-image: var(--icon-files-share-808080); + } + .nav-icon-shareoverview.active, + .nav-icon-sharingout.active, + .nav-icon-sharingin.active, + .nav-icon-pendingshares.active { + background-image: var(--icon-files-share-007fff); + } + .nav-icon-sharinglinks { + background-image: var(--icon-public-808080); + } + .nav-icon-sharinglinks.active { + background-image: var(--icon-public-007fff); + } + .nav-icon-trashbin { + background-image: var(--icon-files-delete-808080); + } + + .nav-icon-trashbin.active { + background-image: var(--icon-files-delete-007fff); + } + + .nav-icon-systemtagsfilter { + background-image: var(--icon-tag-808080); + } + + .nav-icon-systemtagsfilter.active { + background-image: var(--icon-tag-007fff); + } + + .icon-quota { + background-image: var(--icon-quota-808080); + } + .app-sidebar-header__star.icon-star, + .app-sidebar-header__star.icon-starred, + .app-sidebar-header__star.icon-star:hover, + .app-sidebar-header__star.icon-starred:hover, + #view-toggle { + background-size: 16px; + } + + #collection-list .multiselect .multiselect__tags .multiselect__input { + background-color: transparent !important; + } + #collection-list + .multiselect.multiselect--active + .multiselect__tags + .multiselect__input { + background-color: var(--input-background-color) !important; + } + #app-sidebar-vue #sharing .sharing-entry .avatar-external, + #app-sidebar-vue #sharing .sharing-entry .avatar-shared { + background-color: var(--color-primary); + } + #app-sidebar-vue #sharing .sharing-entry .avatar-shared.icon-more-white { + background-image: var(--icon-more-fff); + } + + #app-sidebar-vue #sharing .sharing-entry .avatardiv.icon-public-white { + background-color: var(--color-primary) !important; + } + + body.theme--highcontrast #header .header-right .magnify-icon { + background: var(--icon-search-000) no-repeat center; + } + + #header .header-right .magnify-icon { + background: var(--icon-search-000) no-repeat center; + background-size: 15px; + } + + #content.app-files #filestable span, + #content.app-files #filestable td { + color: var(--color-main-text) !important; + } + + /* Contacts App */ + + #content-vue.app-contacts + .multiselect.property__label + .multiselect__tags + span.multiselect__single, + #content-vue.app-contacts + .multiselect.property__label + .multiselect__tags + .multiselect__input { + background-color: var(--color-main-background) !important; + } + + #contacts-list { + margin-top: 44px; + } + + li.app-navigation-entry.active .icon-user { + background-image: var(--icon-user-007fff); + } + + li.app-navigation-entry.active .icon-contacts-dark, + li.app-navigation-entry.active .icon-group { + background-image: var(--icon-contacts-app-007fff); + } + li.app-navigation-entry.active .icon-address-book { + background-image: var(--icon-contacts-address-book-007fff); + } + li.app-navigation-entry.active .icon-recent-actors { + background-image: var(--icon-contacts-recent-actors-007fff); + } + + #content-vue.app-contacts .multiselect .multiselect__tags .multiselect__input, + #content-vue.app-contacts + .multiselect + > .multiselect__tags + > .multiselect__single { + background-color: var(--color-main-background) !important; + } + + #content-vue.app-contacts ~ .popover .action.active, + #content-vue.app-contacts ~ .popover .action.active .action-input:hover, + #content-vue.app-contacts ~ .popover .action.active .action-input:focus-within { + opacity: 1; + } + + #content-vue.app-contacts ~ .popover .action.active .action-input { + opacity: .7; + } + + #content-vue.app-contacts .empty-content__icon { + height: 80px; + } + + #content-vue.app-contacts + #addressbook-list + .addressbook-shares + .multiselect__content { + background-color: var(--color-secondary-element); + } + + #content-vue.app-contacts .empty-content__title { + text-align: center; + } + #content-vue.app-contacts .app-content > .empty-content { + margin: 20vh; + } + .icon-address-book { + background-image: var(--icon-contacts-address-book-808080); + } + + #content-vue.app-contacts .app-navigation-caption__title { + color: var(--color-main-text); + } + + #content-vue.app-contacts .contact-header__infos input { + background-color: var(--color-main-background); + } + + .property .icon-contacts { + background-image: var(--icon-contacts-app-808080); + } + #content-vue.app-contacts .icon-phone { + background-image: var(--icon-contacts-phone-808080); + } + + button .icon-upload, + #uploadavatarbutton.icon-upload, + .button.primary .icon-upload, + button.primary .icon-upload, + #content-vue.app-calendar .settings-fieldset-interior-item .icon-upload, + #content-vue.app-bookmarks #app-settings-content button .icon-upload, + button.import-contact__button-main .icon-upload, + .import-export button.icon-upload, + .attachments-drag-zone button.icon-upload { + background-image: var(--icon-upload-000); + } + #uploadavatarbutton.icon-upload{ + background-image: var(--icon-upload-ffffff); + } + .action-button .icon-upload, + .menuitem .icon-upload, + button.import-contact__button--local:disabled .import-contact__button-icon.icon-upload + { + background-image: var(--icon-upload-808080); + } + + button .icon-download, + .button .icon-download, + .import-export .button.icon-download { + background-image: var(--icon-download-ffffff); + } + .action-button .icon-download { + background-image: var(--icon-download-808080); + } + + #deleteaccount:not([disabled]) .icon-delete, + button .icon-delete, + .button .icon-delete, + #removeavatar.icon-delete { + background-image: var(--icon-delete-ffffff); + } + + button.menuitem .icon-delete, + .app-navigation-entry-menu button .icon-delete { + background-image: var(--icon-delete-808080); + } + + .menu-icon svg path { + fill: var(--menu-icon-color); + } + .icon-recent-actors { + background-image: var(--icon-contacts-recent-actors-808080); + } + + .popover .action-input__input + .action-input__label { + background-color: var(--color-primary); + } + .popover .action-input__input + .action-input__label > .arrow-right-icon path { + fill: white; + } + + #content-vue.app-contacts .dots-horizontal-icon svg path { + fill: var(--icon-inactive-color); + } + + .mx-icon-calendar svg path { + fill: var(--icon-inactive-color); + } + + #content-vue.app-contacts + ~ .popover + .action-input + .action-input__label::before { + content: unset; + } + + /* Photos App */ + + #content-vue.app-photos #app-navigation-vue .app-navigation-entry.active { + background-color: var(--color-main-background) !important; + } + + #content-vue.app-photos .icon-folder { + background-image: var(--icon-folder-007FFF); + } + #content-vue.app-photos .folder-name__icon { + opacity: 0.8; + } + + li.active .icon-yourphotos { + background-image: var(--icon-photos-app-007fff); + } + .icon-yourphotos { + background-image: var(--icon-photos-app-808080); + } + + li.active .icon-video { + background-image: var(--icon-video-007fff); + } + + .icon-video { + background-image: var(--icon-video-808080); + } + + li.active .icon-favorite { + background-image: var(--icon-star-outline-007fff); + } + .icon-favorite { + background-image: var(--icon-star-outline-808080); + } + + li.active .icon-tag { + background-image: var(--icon-tag-007fff); + } + .icon-tag, + .icon-systemtags { + background-image: var(--icon-tag-808080); + } + + li.active .icon-files-dark { + background-image: var(--icon-files-app-007fff); + } + li.active .icon-address { + background-image: var(--icon-address-007fff); + } + + .icon-address { + background-image: var(--icon-address-808080); + } + + li.active .icon-share { + background-image: var(--icon-share-007fff); + } + + #app-navigation-vue #app-settings #app-settings-header .settings-button, + #app-navigation #app-settings #app-settings-header .settings-button, + .icon-category-tools { + background-image: var(--icon-settings-808080); + } + + #header #header-menu-unified-search .unified-search__form-input { + color: var(--color-main-text); + } + #header #header-menu-unified-search .unified-search__form-input, + #header #header-menu-unified-search .unified-search__input-wrapper { + background-color: var(--color-main-background); + } + + .icon-delete, + button.action-button .icon-delete { + background-image: var(--icon-files-delete-808080); + } + + .menuitem:hover .icon-delete, + .menu-option:hover .icon-delete, + button.action-button:hover .icon-delete, + button.menuitem:hover .icon-delete, + .app-navigation-entry-menu button:hover .icon-delete, + #removeavatar.icon-delete:hover { + background-image: var(--icon-delete-e9322d); + } + + #appmenu li a span { + color: transparent; + } + + #appmenu li:hover a span { + color: var(--icon-inactive-color); + } + + body.theme--highcontrast #appmenu li:hover a span { + color: var(--color-main-text); + } + + #appmenu li:hover a svg { + color: var(--color-main-text); + transform: translateY(-7px); + } + + #appmenu:hover li svg, + #appmenu:hover li .icon-more, + #appmenu:hover li .icon-more-white, + #appmenu:hover li .icon-loading-small, + #appmenu:hover li .icon-loading-small-dark { + transform: none; + } + + /* Settings app */ + + #pass2 + input[name="newpassword-clone"] { + width: 100%; + } + + /* Personal Info */ + + #selectavatar.icon-folder { + background-image: var(--icon-folder-ffffff); + background-color: var(--color-primary); + color: white; + border-color: var(--color-primary); + } + + /* Mobile & Desktop */ + + .button.icon-clippy { + background-image: var(--icon-clippy-808080); + } + + /* Sharing */ + + button.social-facebook { + padding-left: 30px; + background-image: var(--icon-federatedfilesharing-social-facebook-000); + } + + button.social-twitter { + padding-left: 30px; + background-image: var(--icon-federatedfilesharing-social-twitter-000); + } + + button.social-diaspora { + padding-left: 30px; + background-image: var(--icon-federatedfilesharing-social-diaspora-000); + } + + /* Flow */ + + #workflowengine .actions__item.colored { + background-color: var(--color-primary) !important; + } + #workflowengine .actions__item.colored button { + background-color: white; + color: var(--color-primary); + } + + /* Calendar App*/ + + .datepicker-button-section button.button { + background-color: var(--color-main-background); + color: var(--color-main-text); + border: none; + max-width: 100px; + margin: auto; + } + .mx-datepicker .mx-calendar td { + border: 0px; + } + + .icon-eye { + background-image: var(--icon-calendar-eye-808080); + } + + .icon-briefcase { + background-image: var(--icon-calendar-briefcase-808080); + } + + .icon-color-picker { + background-image: var(--icon-calendar-color-picker-808080); + } + .icon-menu { + background-image: var(--icon-menu-808080); + } + .mx-datepicker .mx-input-wrapper { + background-color: var(--input-background-color); + } + + .mx-datepicker-main .mx-datepicker-footer .mx-btn:hover, + .mx-datepicker-main .mx-datepicker-footer .mx-btn:focus { + background-color: var(--color-primary); + color: white; + } + + .mx-datepicker .mx-input { + border: none; + margin-top: 0px; + margin-bottom: 0px; + } + + .datepicker-button-section.icon-leftarrow { + background-image: var(--icon-arrow-left-808080); + } + + .datepicker-button-section.icon-rightarrow { + background-image: var(--icon-arrow-right-808080); + } + + .button.datepicker-button-section__next, + .button.datepicker-button-section__previous { + border: none; + margin: auto; + } + + .new-event-today-view-section .button { + border-radius: 8px; + } + + .icon-new-calendar { + background-image: var(--icon-calendar-calendar-808080); + } + + .icon-new-calendar-with-task-list { + background-image: var(--icon-calendar-new-calendar-with-task-list-808080); + } + + .icon-public { + background-image: var(--icon-public-808080); + } + + #content-vue.app-calendar #app-navigation-vue .action-item.icon-share, + #content-vue.app-calendar #app-navigation-vue .action-item.icon-shared, + #content-vue.app-contacts #addressbook-list .icon-shared { + background-size: 12px; + } + #content-vue.app-calendar .fc-scrollgrid { + padding-top: 14px; + } + + #content-vue.app-calendar .fc-dayGridMonth-view table { + font-size: 1em; + } + + .icon-view-week { + background-image: var(--icon-calendar-view-week-808080); + } + + .icon-view-day { + background-image: var(--icon-calendar-view-day-808080); + } + + .icon-view-module { + background-image: var(--icon-calendar-view-module-808080); + } + + .icon-view-list { + background-image: var(--icon-calendar-view-list-808080); + } + + #content-vue.app-calendar .app-sidebar-tabs__tab a.active { + color: var(--color-text-light); + } + + /* Notes App*/ + + #content-vue.app-notes li.app-navigation-entry.active, + #content-vue.app-talk li.acli_wrapper.active { + background-color: var(--color-background-hover) !important; + } + #content-vue.app-notes .welcome-content .icon-files-dark { + background-size: 18px; + } + + #content-vue.app-notes button.icon-confirm::before, + #content.app-dashboard ~ .popover .action-input__form .action-input__label::before { + content: var(--icon-confirm-fff); + } + + #content-vue.app-notes .welcome-content .icon-phone { + background-size: 11px; + } + + #content-vue.app-notes + #app-settings__header + .settings-button__icon + .material-design-icon__svg, + #content-vue.app-calendar + #app-settings + .settings-button__icon + .material-design-icon__svg, + #content-vue.app-calendar + ~ .popover + div[class^="property-"] + .material-design-icon__svg, + #content-vue.app-calendar div[class^="property-"] .material-design-icon__svg, + #content-vue.app-calendar + .app-sidebar + .app-sidebar__close + .material-design-icon__svg, + #content-vue.app-calendar .app-sidebar-tabs__tab a { + color: var(--icon-inactive-color); + } + + .CodeMirror .CodeMirror-line::selection, + .CodeMirror .CodeMirror-line > span::selection, + .CodeMirror .CodeMirror-line > span > span::selection { + background: var(--color-primary); + } + input[type="text"] + .icon-confirm, + input[type="password"] + .icon-confirm, + input[type="email"] + .icon-confirm { + background-color: var(--color-primary) !important; + background-image: var(--icon-confirm-fff) !important; + background-repeat: no-repeat !important; + background-position: center !important; + } + + input[type="text"] + .icon-confirm::before, + input[type="password"] + .icon-confirm::before, + input[type="email"] + .icon-confirm::before { + content: unset !important; + } + + input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, + input[type="password"]:not(:active):not(:hover):not(:focus) + + .icon-confirm:active, + input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, + input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, + input[type="password"]:not(:active):not(:hover):not(:focus) + + .icon-confirm:hover, + input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, + input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus, + input[type="password"]:not(:active):not(:hover):not(:focus) + + .icon-confirm:focus, + input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus { + border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; + border-left-color: transparent !important; + } + + #app-sidebar-vue .note-category .category input.icon-confirm:hover { + border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; + } + #app-sidebar-vue.app-sidebar + .app-sidebar-header__desc + .app-sidebar-header__menu { + background-color: var(--color-main-background); + } + + #content.app-settings + .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, + #content.app-files + .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, + #header + .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, + #content-vue.app-bookmarks + .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, + #content-vue.app-photos + .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, + #content-vue.app-talk + .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before{ + content: var(--icon-more-808080); + font-size: unset; + font-weight: unset; + font-style: unset; + font-family: unset; + line-height: unset; + } + + #content-vue.app-bookmarks + .icon.action-item__menutoggle--primary.action-item__menutoggle--default-icon::before { + content: var(--icon-more-fff); + } + + #note-container .CodeMirror-code[contenteditable="true"]:hover, + #note-container .CodeMirror-code[contenteditable="true"]:focus, + #note-container .CodeMirror-code[contenteditable="true"]:active { + background-color: var(--color-main-background) !important; + } + /* Tasks app*/ + + .action-item:not(.priority--high) .material-design-icon, + #app-settings .collection .material-design-icon, + .material-design-icon.emoticon-outline-icon { + color: var(--icon-inactive-color); + } + + .action.active .material-design-icon.delete-icon, + .action-item:hover .material-design-icon.delete-icon { + color: var(--color-delete); + } + + #content-vue.app-tasks .app-sidebar-tabs .property__item--clearable { + color: var(--icon-active-color) !important; + } + + #content-vue.app-tasks .app-sidebar-tabs .multiselect-picker-option.active { + color: var(--icon-active-color); + } + /* Settings Apps categories icons */ + + .icon-category-app-bundles { + background-image: var(--icon-bundles-808080); + } + .icon-category-dashboard { + background-image: var(--icon-dashboard-dashboard-808080); + } + .icon-category-customization { + background-image: var(--icon-customization-808080); + } + .icon-category-games { + background-image: var(--icon-games-808080); + } + .icon-category-integration { + background-image: var(--icon-integration-808080); + } + .icon-category-monitoring { + background-image: var(--icon-monitoring-808080); + } + .icon-category-multimedia { + background-image: var(--icon-multimedia-808080); + } + .icon-category-office { + background-image: var(--icon-office-808080); + } + .icon-category-organization { + background-image: var(--icon-organization-808080); + } + .icon-category-search { + background-image: var(--icon-search-808080); + } + + .icon-category-workflow { + background-image: var(--icon-workflow-808080); + } + + /* Bookmarks app */ + + .popover .action-button__icon.icon-link { + background-image: var(--icon-public-808080); + } + + .controls svg path, + .material-design-icon.earth-icon svg path { + fill: var(--icon-inactive-color); + } + + .app-navigation-entry-icon .material-design-icon, + .action .material-design-icon { + color: var(--icon-inactive-color); + } + + .app-navigation-entry.active .app-navigation-entry-icon .material-design-icon, + .action.active .material-design-icon, + .action.selected .material-design-icon { + color: var(--icon-active-color); + } + + .app-navigation-entry + .app-navigation-entry__inline-input-container + form + button.icon-confirm::before { + content: unset; + } + .app-navigation-entry.active .icon-home { + background-image: var(--icon-home-007fff); + } + + #content-vue.app-bookmarks .app-navigation-entry-icon svg path { + fill: var(--icon-inactive-color); + } + #content-vue.app-bookmarks .app-navigation-entry.active svg path { + fill: var(--icon-active-color); + } + + /* News App */ + + #content-vue.app-bookmarks .empty-content { + text-align: center; + } + + #app-navigation .icon-unpinned { + background-image: var(--icon-news-unpinned-808080); + } + + #app-navigation .icon-pinned { + background-image: var(--icon-news-pinned-808080); + } + #app-navigation .icon-full-text-disabled { + background-image: var(--icon-news-nonfulltext-808080); + } + #app-navigation .icon-full-text-enabled { + background-image: var(--icon-news-fulltext-808080); + } + + /* Passwords App */ + + .searchbox .icon-search-force-white { + background-image: var(--icon-search-000); + } + + .searchbox { + opacity: 1 !important; + } + + #content.app-passwords #app-navigation .icon.fa::before { + content: unset; + } + + /* Talk App */ + + #content-vue.app-talk .acli_wrapper .acli.active { + background-color: transparent; + } + + #content-vue.app-talk #app-sidebar .username-form button.icon-rename, button.edit-output-dir span.icon-rename { + background-image: var(--icon-rename-000); + } + + /* Google integration */ + + #google_prefs #google-content button.google-oauth { + background-color: var(--color-primary); + } + + #google-import-contacts .icon-contacts-dark { + background-image: var(--icon-contacts-000); + } + + #google-calendars button .icon-calendar-dark { + background-image: var(--icon-calendar-000); + } + + #google-import-files .icon-files-dark { + background-image: var(--icon-files-000); + } + + #google-import-photos .icon-picture { + background-image: var(--icon-picture-000); + } + + /* remove opacity */ + button.edit-output-dir span.icon-rename, #google-rm-cred .icon-close, #google-import-photos .icon-picture, #google-import-contacts .icon-contacts-dark, #google-calendars button .icon-calendar-dark, #google-import-files .icon-files-dark { + opacity: 1; + } + /** */ + #header .header-right .magnify-icon > svg { + display: none; + } + .new-icons .color-icons{ + background-image: url("../img/app-icons/other.svg"); + width: 100% ; + height: 80px; + background-position: 50%; + background-repeat: no-repeat; + background-size: 60px; + } + .new-icons .drive , .new-icons .files {background-image: url("../img/app-icons/Drive.svg");} + .new-icons .activity {background-image: url("../img/app-icons/Activity.svg");} + .new-icons .bookmarks {background-image: url("../img/app-icons/Bookmark.svg");} + .new-icons .calendar {background-image: url("../img/app-icons/Calendar.svg");} + .new-icons .carnet {background-image: url("../img/app-icons/Carnet.svg");} + .new-icons .contacts {background-image: url("../img/app-icons/Contacts.svg");} + .new-icons .deck {background-image: url("../img/app-icons/Deck.svg");} + .new-icons .docs {background-image: url("../img/app-icons/Docs.svg");} + .new-icons .email,.new-icons .rainloop {background-image: url("../img/app-icons/E-mail.svg");} + .new-icons .gitlab {background-image: url("../img/app-icons/Gitlab.svg");} + .new-icons .news {background-image: url("../img/app-icons/News.svg");} + .new-icons .notes {background-image: url("../img/app-icons/Notes.svg");} + .new-icons .presentation {background-image: url("../img/app-icons/Presentation.svg");} + .new-icons .spreadsheet {background-image: url("../img/app-icons/Spreadsheet.svg");} + .new-icons .tasks {background-image: url("../img/app-icons/Tasks.svg");} + .new-icons .photos {background-image: url("../img/app-icons/Gallery.svg");} + .new-icons .e-user-support-center {background-image: url("../img/app-icons/Support.svg");} + .new-icons .passwords {background-image: url("../img/app-icons/Password.svg");} + .new-icons .onlyoffice_docx {background-image: url("../img/app-icons/Docs.svg");} + .new-icons .onlyoffice_xlsx {background-image: url("../img/app-icons/Spreadsheet.svg");} + .new-icons .onlyoffice_pptx {background-image: url("../img/app-icons/Presentation.svg");} + + #appmenu li:hover a, #appmenu li a:focus { + font-size: 12px; + font-family: 'Roboto'; + letter-spacing: 1px; + } + #filestable thead{background-color: white !important ;} + #recommendations{height: 100px !important;} + .recommendation{border: 1px solid #E6E8E9;padding: 10px !important;margin-bottom: 5px;border-radius: 6px !important;} + progress{border-radius: 10px 10px !important;height: 12px !important;} + #appmenu li a:focus .icon-more, #appmenu li a:focus .icon-more-white {transform: none !important;} + #more-apps:hover span, #more-apps:focus span, #more-apps a:focus span{display: none !important;} + + button#quotaincreasebutton { + margin-top: 15px !important; + } + @media only screen and (max-width: 640px) { + .new-icons .color-icons { + height: 50px; + background-size: 40px; + } + #launcher-menu { + width: 300px !important; + left: 10% !important; + } + } + @media only screen and (max-width: 640px) { + #launcher-menu { + left: 5% !important; + } + } .text-color-active { - color: var(--icon-active-color); + color: var(--icon-active-color); } .margin-top-10{ - margin-top: 10px; + margin-top: 10px; } -- GitLab From 639697775625a41e2546d321c5e090a7065a6f74 Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Fri, 21 Oct 2022 20:08:49 +0530 Subject: [PATCH 3/6] cookbook ui fix --- core/css/server.css | 3448 ++++++++++++++++++++++--------------------- 1 file changed, 1725 insertions(+), 1723 deletions(-) diff --git a/core/css/server.css b/core/css/server.css index f384527c..6ff67750 100644 --- a/core/css/server.css +++ b/core/css/server.css @@ -16,1730 +16,1732 @@ * along with this program. If not, see */ @font-face { - font-family: 'Roboto'; - src: url('../webfonts/Roboto-Regular.woff2') format('woff2'), - url('../webfonts/Roboto-Regular.woff') format('woff'); - /* font-weight: 600; */ - /* font-style: normal; */ - font-display: swap; - letter-spacing: 1px; - } - *{ - font-family: 'Roboto'; - } - :root { - --color-primary: #007fff; - --color-primary-element: #007fff; - --color-secondary-element: white; - --border-color-secondary-element: #007fff; - --color-primary-element-light: #007fff; - --color-error: #fb3845; - --color-delete: #e9322d; - --color-success: #3ad975; - --color-main-background: #ffffff; - --color-main-background-translucent: #f2f2f2; - --color-main-text: black; - --color-background-hover: white; - --color-text-maxcontrast: black; - --color-border-dark: #e6e6e6; - --color-border: #ebebeb; - --icon-settings-dark-000: #000000; - --icon-inactive-color: #808080; - --icon-active-color: #007fff; - --input-background-color: white; - --menu-icon-color: #222; - --color-dashboard-panels: #f2f2f2; - --color-dashboard-background-plain: #d2d2d2; - --color-sharing-icon-background: #767676; - } - - /* Force a few variables to right values for dark theme */ - body.theme--dark { - --input-background-color: #181818; - --icon-notifications-notifications-000000: url("/svg/notifications/notifications?color=000"); - --icon-notifications-notifications-new-000000: url("/svg/notifications/notifications-new?color=000"); - --icon-search-000: url("/svg/core/actions/search?color=000"); - } - - body.theme--highcontrast { - --icon-inactive-color: black; - } - - #body-user #header, - #body-settings #header, - #body-public #header { - background-color: white !important; - } - - button:not(:disabled):hover, - .primary:not(:disabled):hover, - .button:hover, - button.toggle.has-tooltip:hover, - .primary:active, - input[type="submit"]:active, - input[type="button"]:active, - input[type="reset"]:active, - input[type="button"]:hover, - input[type="submit"]:hover, - input[type="reset"]:hover, - .primary:active, - .button:active, - #new-contact-button:hover, - #new-user-button:hover, - #deleteaccount:hover, - #quotaincreasebutton:hover, - #content-vue.app-tasks .action.icon-checkmark:hover, - .button.today:hover, - button.import-contact__button-main:hover, - button#notes_new_note:hover, - #oc-dialog-filepicker-content .actions.creatable .icon.icon-add:hover { - opacity: 0.8; - } - - /* primary action button, use sparingly */ - button, - .button, - .primary, - input[type="submit"].primary, - input[type="button"].primary, - button.toggle.has-tooltip, - button.primary, - .button.primary, - .primary:active, - input[type="submit"].primary:active, - input[type="button"].primary:active, - button.primary:active, - .button.primary:active, - .actions a.button, - #new-contact-button, - #new-user-button, - #deleteaccount, - #quotaincreasebutton, - .mx-datepicker .mx-datepicker-footer .mx-btn, - #content-vue.app-tasks .action.icon-checkmark, - button.import-contact__button-main, - button#notes_new_note, - #content.app-news button.explore-subscribe, - input[type="button"], - input[type="submit"], - input[type="reset"] { - background-color: var(--color-primary); - color: white; - border-color: var(--color-primary); - } - - input.primary:not(:disabled):hover, - input.primary:not(:disabled):focus, - button.primary:not(:disabled):hover, - button.primary:not(:disabled):focus, - a.primary:not(:disabled):hover, - a.primary:not(:disabled):focus { - background-image: none; - } - - /* For buttons that are not primary or submit/reset/button inputs that are not primary */ - - button.primary + button:not(.primary), - button.primary + button:not(.primary):active, - .entity-picker__navigation button:not(.primary), - .event-popover__buttons button:not(.primary), - .event-popover__buttons button:not(.primary):active, - .oc-dialog-buttonrow.twobuttons button:not(.primary), - .oc-dialog-buttonrow.twobuttons button:not(.primary):active, - .status-buttons .status-buttons__select { - background-color: var(--color-secondary-element); - color: var(--color-primary); - border-color: var(--border-color-secondary-element); - } - - input[type="checkbox"].checkbox + label::before, - input[type="radio"].checkbox + label::before { - border-color: var(--icon-inactive-color); - background-color: white; - } - - textarea:not(:disabled), - textarea:not(:disabled):active, - div[contenteditable="true"]:not(:disabled):active, - textarea:not(:disabled):hover, - div[contenteditable="true"]:not(:disabled):hover, - textarea:not(:disabled):focus, - div[contenteditable="true"]:not(:disabled):focus { - background-color: var(--input-background-color) !important; - } - - select, - textarea, - input[type="text"], - input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([type="file"]):not([type="image"]):not(.multiselect__input), - #content-vue.app-tasks .task-body__checkbox label.reactive.no-nav::before, - #content.app-files #commentsTabView .newCommentForm .message, - .multiselect - .multiselect__content-wrapper - .multiselect__content - li - > span.multiselect__option, - div.select2-container-multi .select2-choices, - div.select2-container-multi.select2-container-active .select2-choices { - background-color: var(--input-background-color); - } - - #settings #expanddiv, - #header .header-right > div > .notification-container.menu { - background-color: var(--color-main-background); - } - - #header .header-appname { - color: var(--color-main-text); - } - - #settings #expanddiv li a.active { - background-color: var(--color-background-hover); - } - body.theme--dark #header .header-right > div > .notification-container.menu, - body.theme--dark #settings #expanddiv { - background-color: var(--color-main-background); - } - .multiselect .multiselect__tags input.multiselect__single, - .multiselect .multiselect__tags span.multiselect__single, - .multiselect .multiselect__tags span.multiselect__placeholder, - .multiselect .multiselect__tags .multiselect__content, - .multiselect .multiselect__tags .multiselect__tags-wrap, - .multiselect .multiselect__input, - .multiselect - .multiselect__content-wrapper - .multiselect__content - li.multiselect__element, - .multiselect - .multiselect__content-wrapper - .multiselect__content - li.multiselect__element - .multiselect__option, - #content-vue.app-contacts - .property.property--without-actions.property--last.property-masonry:not(.property--addressbooks):not(.property--groups) - .multiselect - .multiselect__tags - .multiselect__input, - #content-vue.app-contacts - .multiselect - .multiselect__tags - input.multiselect__input, - #content-vue.app-contacts - .multiselect - > .multiselect__tags - > span.multiselect__single, - #content.app-files #commentsTabView .newCommentForm .message:hover, - #app-dashboard .footer a:hover, - #app-content-systemtagsfilter .select2-container ul { - background-color: var(--input-background-color) !important; - } - /* use logos from theme */ - #header .logo, - #firstrunwizard .logo { - background-image: url("../img/logo@2x.svg"); - width: 256px; - height: 128px; - } - #header .logo-icon { - width: 130px; - height: 40px; - top: 5px; - bottom: 0px; - border-radius: 22px; - } - - #header #nextcloud { - padding-left: 150px; - } - - #header .notifications .svg { - height: 16px; - width: 16px; - } - - /* - For the overflow in search filter; - It doesn't use specific ids so gave the rule a lot of specificity - */ - .popover > .popover__wrapper .open ul li p { - white-space: normal; - } - - #unified-search #header-menu-unified-search .header-menu__carret { - right: 125px; - } - - /* App Navigation rules */ - #app-navigation:not(.vue) > ul > li.active, - #app-navigation:not(.vue) > ul > li a:active, - #app-navigation:not(.vue) > ul > li a.selected, - #app-navigation:not(.vue) > ul > li a.active, - #app-navigation:not(.vue) > ul > li.active > a, - #app-navigation:not(.vue) > ul > li a:active > a, - #app-navigation:not(.vue) > ul > li a.selected > a, - #app-navigation:not(.vue) > ul > li a.active > a { - background-color: var(--color-main-background); - } - - li.app-navigation-entry, - .conversations .acli_wrapper .acli { - background-clip: content-box; - } - - li.app-navigation-entry.active { - background-color: var(--color-main-background) !important; - } - - li.app-navigation-entry:not(.active):hover, - #content.app-deck li.app-navigation-entry.active { - background-color: var(--color-background-hover) !important; - } - - li.app-navigation-entry.app-navigation-entry--collapsible:hover { - background-color: var(--color-main-background) !important; - } - - li.app-navigation-entry.app-navigation-entry--collapsible > a:hover, - #content.app-passwords #app-navigation .active { - background-color: var(--color-background-hover); - } - - /* CSS TWEAKS TAKEN FROM THEMING APP (disabled now) */ - - .nc-theming-main-background { - background-color: #999999; - } - .nc-theming-main-text { - color: #fff; - } - .nc-theming-contrast { - color: #fff; - } - #appmenu:not(.inverted) svg { - filter: none; - } - #appmenu.inverted svg { - filter: invert(1); - } - .icon-folder, - .icon-filetype-folder { - background-image: var(--icon-folder-007FFF); - } - .icon-filetype-text { - background-image: var(--icon-text-007fff); - } - .icon-filetype-folder-drag-accept { - background-image: var(--icon-folder-drag-accept-007fff) !important; - } - #header .logo { - background-image: url("../img/logo@2x.svg"); - } - #body-user #header, - #body-settings #header, - #body-public #header { - color: var(--color-main-text); - background-image: none; - } - - #body-user.dark--theme, - #body-settings.dark--theme { - color: white !important; - } - - #header .menu, - #header #launcher-menu, - #header .header--menu { - opacity: 1; - } - - #appmenu li span { - color: var(--color-main-text); - } - - #header .logo { - background-size: auto; - } - - input.primary, - #alternative-logins li a { - background-color: #999999; - border: 1px solid #fff; - color: #fff; - } - footer { - height: 92px; - } - - .notifications-button.hasNotifications { - opacity: 0.6 !important; - } - .notifications-button.hasNotifications:hover, - .notifications-button.hasNotifications:focus { - opacity: 1 !important; - } - #header .notification-wrapper .dismiss-all .icon.icon-close { - margin-top: 4px; - } - #content #app-navigation, - #content.app-news #app-navigation button { - color: var(--color-main-text); - border-right: 1px solid var(--color-border); - } - - .icon-home, - #oc-dialog-filepicker-content .dirtree div:first-child a { - background-image: var(--icon-home-808080); - } - - #controls .icon-home, - #oc-dialog-filepicker-content .dirtree div:first-child a { - background-size: 20px; - } - - .icon-mail { - background-image: var(--icon-mail-808080); - } - .icon-error { - background-image: var(--icon-error-808080); - } - - .icon-details { - background-image: var(--icon-details-808080); - } - - .icon-add, - .action-item.icon-add, - button.action-item__menutoggle.icon-add, - #content.app-news .add-new button.icon-add, - .who-has-access .action-item.icon-add.addAdditionalAdmin, - #content-vue.app-tasks - #app-navigation-vue - .app-navigation-entry-icon.sprt-add::before { - background-image: var(--icon-add-808080); - } - - .notification-container .emptycontent .icon-notifications-dark { - background-image: var(--icon-notifications-notifications-808080); - background-size: 40px; - } - - .icon-rename, - .who-has-access .action-item--single.action-item.icon-rename, - .where-is-my-data .action-item--single.action-item.icon-rename { - background-image: var(--icon-rename-808080); - } - - .icon-download { - background-image: var(--icon-download-808080); - } - .icon-template-add { - background-image: var(--icon-template-add-808080); - } - .icon-tasks, - .panel--header .icon-tasks, - .modal__content .icon-tasks { - background-image: var(--icon-tasks-tasks-808080); - } - #tasks_panel .empty-content .icon-tasks { - background-image: var(--icon-tasks-tasks-808080) !important; - } - .icon-checkmark { - background-image: var(--icon-checkmark-808080); - } - .icon-group { - background-image: var(--icon-group-808080); - } - .icon-timezone { - background-image: var(--icon-timezone-808080); - } - .icon-edit { - background-image: var(--icon-edit-808080); - } - .icon-reminder { - background-image: var(--icon-notifications-notifications-808080); - } - .icon-gravatar { - background-image: var(--icon-contacts-gravatar-808080); - } - #content-vue.app-calendar .app-sidebar-tabs__tab-icon.icon-reminder { - background-size: 13px; - } - .icon-clippy { - background-image: var(--icon-clippy-808080); - } - .icon-confirm { - background-image: var(--icon-confirm-808080); - } - - .icon-user-admin { - background-image: var(--icon-user-admin-808080); - } - - .icon-disabled-users { - background-image: var(--icon-disabled-users-808080); - } - - .icon-notes, - .icon-notes-trans { - background-image: var(--icon-notes-notes-808080); - } - .icon-projects { - background-image: var(--icon-projects-808080); - } - .icon-comment { - background-image: var(--icon-comment-808080); - } - .icon-activity { - background-image: var(--icon-activity-activity-808080); - } - .icon-link { - background-image: var(--icon-public-808080); - } - button .icon-link { - background-image: var(--icon-public-ffffff); - } - - .icon-recent { - background-image: var(--icon-files-recent-808080); - } - - .icon-more, - .icon-more-white { - background-image: var(--icon-more-808080); - } - - .avatar-shared.icon-more-white { - background-image: var(--icon-more-fff); - } - - #collection-list .avatar .icon-projects { - background-image: var(--icon-projects-fff); - } - - #sharing-inherited-shares .sharing-entry .avatar-shared.icon-more-white, - .sharing-entry.sharing-entry__internal .avatar-external.icon-external-white, - #collection-list .avatar { - background-color: var(--color-sharing-icon-background); - } - - .icon-files, - .icon-category-files, - .icon-emptyfolder { - background-image: var(--icon-files-app-808080); - } - - #header .icon-notifications, - #header .icon-notifications-new { - background-size: 17px; - } - - .icon-notifications-new { - background-image: var(--icon-notifications-notifications-new-000000); - } - - .icon-notifications { - background-image: var(--icon-notifications-notifications-000000); - } - - .icon-external, - .icon-goto { - background-image: var(--icon-external-808080); - } - - .action.icon-checkmark { - background-image: var(--icon-checkmark-ffffff); - } - .icon-phone { - background-image: var(--icon-phone-808080); - } - - .icon-password, - .icon-category-security { - background-image: var(--icon-password-808080); - } - .icon-link { - background-image: var(--icon-link-808080); - } - .icon-toggle-filelist { - background-image: var(--icon-toggle-filelist-808080); - } - - button.icon-toggle-filelist { - background-color: var(--color-main-background); - } - - .icon-toggle-pictures { - background-image: var(--icon-toggle-pictures-808080); - } - - .button .icon-add, - button .icon-add, - button.icon-add, - #new-contact-button.icon-add, - #content-vue.app-notes #notes_new_note.icon-add, - #oc-dialog-filepicker-content .actions.creatable .icon.icon-add, - #content.app-news .add-new .icon-add.add-new-folder-primary { - background-image: var(--icon-add-ffffff); - } - - .popover .action-button .action-button__icon.icon-add { - background-image: var(--icon-add-808080); - } - - button > span[class^="icon-"], - .button > span[class^="icon-"], - button > span[class*=" icon-"], - .button > span[class*=" icon-"] { - opacity: 1; - } - - .icon-share, - .icon-shared { - background-image: var(--icon-share-808080); - } - - .icon-contacts-dark, - .icon-contacts, - .icon-category-social { - background-image: var(--icon-contacts-app-808080); - } - - #contactsmenu .icon-contacts { - background-image: var(--icon-contacts-000); - } - - .icon-user, - .icon-category-installed { - background-image: var(--icon-user-808080); - } - - .icon-category-enabled { - background-image: var(--icon-checkmark-808080); - } - - .icon-star, - .icon-star-dark, - .icon-starred:hover { - background-image: var(--icon-star-808080); - } - - .icon-starred, - .icon-star:hover, - .icon-star-dark:hover, - #filestable .filename .favorite-mark .icon-starred { - background-image: var(--icon-star-FFCC00); - } - - .icon-close, - #header-menu-unified-search .icon-close, - .icon-category-disabled { - background-image: var(--icon-close-808080); - } - - #header #searchbox { - color: var(--color-main-text); - border-color: var( - --icon-inactive-color - ) !important; /* !important used in source so needed to override */ - } - - #app-navigation, - #app-navigation-vue { - border-right: 2px solid var(--color-border); - } - - table th, - table td { - border-bottom: 1px solid var(--color-border); - } - - .icon-files-dark { - background-image: var(--icon-files-app-808080); - } - - .icon-fullscreen { - background-image: var(--icon-fullscreen-808080); - } - - .icon-calendar-dark { - background-image: var(--icon-calendar-calendar-808080); - } - .icon-talk { - background-image: var(--icon-spreed-app-808080); - } - - #app-navigation li a, - #app-navigation:not(.vue) > ul > li > a, - #app-navigation:not(.vue) > ul > li > ul > li > a { - opacity: 1; - } - - /* Dashboard App */ - - #body-user[data-dashboard-background]:not(.theme--dark) - #app-dashboard - .statuses - button:hover, - #body-user[data-dashboard-background]:not(.theme--dark) .edit-panels:hover { - background-color: var(--color-background-hover) !important; - } - - body.theme--highcontrast #app-dashboard .statuses button, - body.theme--highcontrast #app-dashboard .edit-panels { - border: 1px solid var(--color-main-text); - } - - #body-user[data-dashboard-background]:not(.theme--dark) #app-dashboard .panel, - #body-user[data-dashboard-background]:not(.theme--dark) - #app-dashboard - .statuses - button, - #body-user[data-dashboard-background]:not(.theme--dark) - #app-dashboard - .footer - a { - background-color: var(--color-dashboard-panels); - /* opacity: 0.9; */ - } - - #body-user[data-dashboard-background]:not(.theme--dark) #header { - opacity: 0.95; - } - #body-user[data-dashboard-background].theme--highcontrast #header { - background-color: var(--color-main-background) !important; - } - - #app-dashboard .panel .panel--header > .icon-calendar-dark { - background-position: 14px 10px; - } - - #app-dashboard .panel .panel--header > .icon-files-dark { - background-position: 14px 16px; - } - - #app-dashboard .statuses button { - color: var(--color-main-text); - } - - #content.app-dashboard #app-dashboard, - body[data-dashboard-background]:not(.theme--dark) - .background-selector - .background.filepicker, - body[data-dashboard-background]:not(.theme--dark) - .background-selector - .background.default, - body[data-dashboard-background]:not(.theme--dark) - .modal__content - .background-selector - .background.color { - background-color: var(--color-dashboard-background-plain); - color: var(--color-main-text); - } - - body[data-dashboard-background="#0082c9"] #app-dashboard, - body[data-dashboard-background="default"] #app-dashboard { - background-color: var(--color-dashboard-background-plain); - } - - body[data-dashboard-background="default"] #app-dashboard { - background-image: none !important; - } - - body[data-dashboard-background="#0082c9"] #app-dashboard h2, - body[data-dashboard-background="default"] #app-dashboard h2 { - color: var(--color-main-text); - } - - /* Files App */ - - #filestable .thumbnail { - background-repeat: no-repeat; - } - - .breadcrumb .canDrop > a, - #filestable tbody tr.canDrop, - #filestable.view-grid:not(.hidden) - #fileList - tr:not(.hidden).selected - .thumbnail-wrapper, - #filestable.view-grid:not(.hidden) - #fileList - tr:not(.hidden).selected - .fileactions, - #filestable.view-grid:not(.hidden) - #fileList - tr:not(.hidden).selected - .nametext { - background-color: var(--color-primary-light); - } - - .actions .button.new:active { - background-color: var(--color-primary); - } - - #fileList td a a.action { - opacity: 0.6; - } - - #fileList td a a.action:hover { - opacity: 0.8; - } - - #content.app-files #filestable.view-grid thead tr, - #content.app-files #filestable.view-grid thead th { - border-bottom: 0px; - } - - #content.app-files #controls .icon-shared { - background-size: 14px; - } - - #editor .menububble.is-active .menububble__button { - background-color: var(--color-primary); - } - - #editor .menububble.is-active .menububble__button:hover { - background-color: var(--color-background-hover); - } - - #editor .menububble__button:hover .menububble__buttontext { - color: var(--color-primary); - } - - #editor .menububble__button:hover .icon-link { - background-image: var(--icon-public-007fff); - } - - #editor .menububble__button:hover .icon-file { - background-image: var(--icon-text-007fff); - } - - #uploadprogressbar + button.icon-close, - #google-drive button .icon-close, - #google-photos button .icon-close { - background-image: var(--icon-close-fff); - } - - #google-rm-cred .icon-close { - background-image: var(--icon-close-000); - opacity: 1; - } - - .breadcrumb div.crumb span.icon-shared, - .breadcrumb div.crumb span.icon-public, - .selectedActions a, - #commentsTabView .comment .action { - opacity: 0.8; - } - - #content.app-files #emptycontent .icon-share { - background-image: var(--icon-files-share-808080); - } - - #content #app-content-files #controls { - background-color: var(--color-main-background); - } - - #app-content-files button .icon-file, - #editor .menububble__button .icon-file { - background-image: var(--icon-text-ffffff); - } - - #editor .ProseMirror { - background-color: var(--color-main-background) !important; - } - - #fileList tr td.selection > .selectCheckBox + label::before, - #oc-dialog-filepicker-content .actions.creatable .icon.icon-add { - opacity: 1; - } - - #filestable .filesize, - #filestable .date .modified.live-relative-timestamp { - color: var(--color-main-text) !important; - } - .nav-icon-files { - background-image: var(--icon-files-app-808080); - } - - .nav-icon-files.active { - background-image: var(--icon-files-app-007fff); - } - - .nav-icon-recent { - background-image: var(--icon-files-recent-808080); - } - - .nav-icon-recent.active { - background-image: var(--icon-files-recent-007fff); - } - - .nav-icon-favorites { - background-image: var(--icon-star-outline-808080); - } - .nav-icon-favorites.active { - background-image: var(--icon-star-outline-007fff); - } - - .nav-icon-deletedshares { - background-image: var(--icon-files-unshare-808080); - } - .nav-icon-deletedshares.active { - background-image: var(--icon-files-unshare-007fff); - } - - .nav-icon-shareoverview, - .nav-icon-sharingout, - .nav-icon-sharingin, - .nav-icon-pendingshares, - #content.app-files .icon-share, - #content.app-files .icon-shared { - background-image: var(--icon-files-share-808080); - } - .nav-icon-shareoverview.active, - .nav-icon-sharingout.active, - .nav-icon-sharingin.active, - .nav-icon-pendingshares.active { - background-image: var(--icon-files-share-007fff); - } - .nav-icon-sharinglinks { - background-image: var(--icon-public-808080); - } - .nav-icon-sharinglinks.active { - background-image: var(--icon-public-007fff); - } - .nav-icon-trashbin { - background-image: var(--icon-files-delete-808080); - } - - .nav-icon-trashbin.active { - background-image: var(--icon-files-delete-007fff); - } - - .nav-icon-systemtagsfilter { - background-image: var(--icon-tag-808080); - } - - .nav-icon-systemtagsfilter.active { - background-image: var(--icon-tag-007fff); - } - - .icon-quota { - background-image: var(--icon-quota-808080); - } - .app-sidebar-header__star.icon-star, - .app-sidebar-header__star.icon-starred, - .app-sidebar-header__star.icon-star:hover, - .app-sidebar-header__star.icon-starred:hover, - #view-toggle { - background-size: 16px; - } - - #collection-list .multiselect .multiselect__tags .multiselect__input { - background-color: transparent !important; - } - #collection-list - .multiselect.multiselect--active - .multiselect__tags - .multiselect__input { - background-color: var(--input-background-color) !important; - } - #app-sidebar-vue #sharing .sharing-entry .avatar-external, - #app-sidebar-vue #sharing .sharing-entry .avatar-shared { - background-color: var(--color-primary); - } - #app-sidebar-vue #sharing .sharing-entry .avatar-shared.icon-more-white { - background-image: var(--icon-more-fff); - } - - #app-sidebar-vue #sharing .sharing-entry .avatardiv.icon-public-white { - background-color: var(--color-primary) !important; - } - - body.theme--highcontrast #header .header-right .magnify-icon { - background: var(--icon-search-000) no-repeat center; - } - - #header .header-right .magnify-icon { - background: var(--icon-search-000) no-repeat center; - background-size: 15px; - } - - #content.app-files #filestable span, - #content.app-files #filestable td { - color: var(--color-main-text) !important; - } - - /* Contacts App */ - - #content-vue.app-contacts - .multiselect.property__label - .multiselect__tags - span.multiselect__single, - #content-vue.app-contacts - .multiselect.property__label - .multiselect__tags - .multiselect__input { - background-color: var(--color-main-background) !important; - } - - #contacts-list { - margin-top: 44px; - } - - li.app-navigation-entry.active .icon-user { - background-image: var(--icon-user-007fff); - } - - li.app-navigation-entry.active .icon-contacts-dark, - li.app-navigation-entry.active .icon-group { - background-image: var(--icon-contacts-app-007fff); - } - li.app-navigation-entry.active .icon-address-book { - background-image: var(--icon-contacts-address-book-007fff); - } - li.app-navigation-entry.active .icon-recent-actors { - background-image: var(--icon-contacts-recent-actors-007fff); - } - - #content-vue.app-contacts .multiselect .multiselect__tags .multiselect__input, - #content-vue.app-contacts - .multiselect - > .multiselect__tags - > .multiselect__single { - background-color: var(--color-main-background) !important; - } - - #content-vue.app-contacts ~ .popover .action.active, - #content-vue.app-contacts ~ .popover .action.active .action-input:hover, - #content-vue.app-contacts ~ .popover .action.active .action-input:focus-within { - opacity: 1; - } - - #content-vue.app-contacts ~ .popover .action.active .action-input { - opacity: .7; - } - - #content-vue.app-contacts .empty-content__icon { - height: 80px; - } - - #content-vue.app-contacts - #addressbook-list - .addressbook-shares - .multiselect__content { - background-color: var(--color-secondary-element); - } - - #content-vue.app-contacts .empty-content__title { - text-align: center; - } - #content-vue.app-contacts .app-content > .empty-content { - margin: 20vh; - } - .icon-address-book { - background-image: var(--icon-contacts-address-book-808080); - } - - #content-vue.app-contacts .app-navigation-caption__title { - color: var(--color-main-text); - } - - #content-vue.app-contacts .contact-header__infos input { - background-color: var(--color-main-background); - } - - .property .icon-contacts { - background-image: var(--icon-contacts-app-808080); - } - #content-vue.app-contacts .icon-phone { - background-image: var(--icon-contacts-phone-808080); - } - - button .icon-upload, - #uploadavatarbutton.icon-upload, - .button.primary .icon-upload, - button.primary .icon-upload, - #content-vue.app-calendar .settings-fieldset-interior-item .icon-upload, - #content-vue.app-bookmarks #app-settings-content button .icon-upload, - button.import-contact__button-main .icon-upload, - .import-export button.icon-upload, - .attachments-drag-zone button.icon-upload { - background-image: var(--icon-upload-000); - } - #uploadavatarbutton.icon-upload{ - background-image: var(--icon-upload-ffffff); - } - .action-button .icon-upload, - .menuitem .icon-upload, - button.import-contact__button--local:disabled .import-contact__button-icon.icon-upload - { - background-image: var(--icon-upload-808080); - } - - button .icon-download, - .button .icon-download, - .import-export .button.icon-download { - background-image: var(--icon-download-ffffff); - } - .action-button .icon-download { - background-image: var(--icon-download-808080); - } - - #deleteaccount:not([disabled]) .icon-delete, - button .icon-delete, - .button .icon-delete, - #removeavatar.icon-delete { - background-image: var(--icon-delete-ffffff); - } - - button.menuitem .icon-delete, - .app-navigation-entry-menu button .icon-delete { - background-image: var(--icon-delete-808080); - } - - .menu-icon svg path { - fill: var(--menu-icon-color); - } - .icon-recent-actors { - background-image: var(--icon-contacts-recent-actors-808080); - } - - .popover .action-input__input + .action-input__label { - background-color: var(--color-primary); - } - .popover .action-input__input + .action-input__label > .arrow-right-icon path { - fill: white; - } - - #content-vue.app-contacts .dots-horizontal-icon svg path { - fill: var(--icon-inactive-color); - } - - .mx-icon-calendar svg path { - fill: var(--icon-inactive-color); - } - - #content-vue.app-contacts - ~ .popover - .action-input - .action-input__label::before { - content: unset; - } - - /* Photos App */ - - #content-vue.app-photos #app-navigation-vue .app-navigation-entry.active { - background-color: var(--color-main-background) !important; - } - - #content-vue.app-photos .icon-folder { - background-image: var(--icon-folder-007FFF); - } - #content-vue.app-photos .folder-name__icon { - opacity: 0.8; - } - - li.active .icon-yourphotos { - background-image: var(--icon-photos-app-007fff); - } - .icon-yourphotos { - background-image: var(--icon-photos-app-808080); - } - - li.active .icon-video { - background-image: var(--icon-video-007fff); - } - - .icon-video { - background-image: var(--icon-video-808080); - } - - li.active .icon-favorite { - background-image: var(--icon-star-outline-007fff); - } - .icon-favorite { - background-image: var(--icon-star-outline-808080); - } - - li.active .icon-tag { - background-image: var(--icon-tag-007fff); - } - .icon-tag, - .icon-systemtags { - background-image: var(--icon-tag-808080); - } - - li.active .icon-files-dark { - background-image: var(--icon-files-app-007fff); - } - li.active .icon-address { - background-image: var(--icon-address-007fff); - } - - .icon-address { - background-image: var(--icon-address-808080); - } - - li.active .icon-share { - background-image: var(--icon-share-007fff); - } - - #app-navigation-vue #app-settings #app-settings-header .settings-button, - #app-navigation #app-settings #app-settings-header .settings-button, - .icon-category-tools { - background-image: var(--icon-settings-808080); - } - - #header #header-menu-unified-search .unified-search__form-input { - color: var(--color-main-text); - } - #header #header-menu-unified-search .unified-search__form-input, - #header #header-menu-unified-search .unified-search__input-wrapper { - background-color: var(--color-main-background); - } - - .icon-delete, - button.action-button .icon-delete { - background-image: var(--icon-files-delete-808080); - } - - .menuitem:hover .icon-delete, - .menu-option:hover .icon-delete, - button.action-button:hover .icon-delete, - button.menuitem:hover .icon-delete, - .app-navigation-entry-menu button:hover .icon-delete, - #removeavatar.icon-delete:hover { - background-image: var(--icon-delete-e9322d); - } - - #appmenu li a span { - color: transparent; - } - - #appmenu li:hover a span { - color: var(--icon-inactive-color); - } - - body.theme--highcontrast #appmenu li:hover a span { - color: var(--color-main-text); - } - - #appmenu li:hover a svg { - color: var(--color-main-text); - transform: translateY(-7px); - } - - #appmenu:hover li svg, - #appmenu:hover li .icon-more, - #appmenu:hover li .icon-more-white, - #appmenu:hover li .icon-loading-small, - #appmenu:hover li .icon-loading-small-dark { - transform: none; - } - - /* Settings app */ - - #pass2 + input[name="newpassword-clone"] { - width: 100%; - } - - /* Personal Info */ - - #selectavatar.icon-folder { - background-image: var(--icon-folder-ffffff); - background-color: var(--color-primary); - color: white; - border-color: var(--color-primary); - } - - /* Mobile & Desktop */ - - .button.icon-clippy { - background-image: var(--icon-clippy-808080); - } - - /* Sharing */ - - button.social-facebook { - padding-left: 30px; - background-image: var(--icon-federatedfilesharing-social-facebook-000); - } - - button.social-twitter { - padding-left: 30px; - background-image: var(--icon-federatedfilesharing-social-twitter-000); - } - - button.social-diaspora { - padding-left: 30px; - background-image: var(--icon-federatedfilesharing-social-diaspora-000); - } - - /* Flow */ - - #workflowengine .actions__item.colored { - background-color: var(--color-primary) !important; - } - #workflowengine .actions__item.colored button { - background-color: white; - color: var(--color-primary); - } - - /* Calendar App*/ - - .datepicker-button-section button.button { - background-color: var(--color-main-background); - color: var(--color-main-text); - border: none; - max-width: 100px; - margin: auto; - } - .mx-datepicker .mx-calendar td { - border: 0px; - } - - .icon-eye { - background-image: var(--icon-calendar-eye-808080); - } - - .icon-briefcase { - background-image: var(--icon-calendar-briefcase-808080); - } - - .icon-color-picker { - background-image: var(--icon-calendar-color-picker-808080); - } - .icon-menu { - background-image: var(--icon-menu-808080); - } - .mx-datepicker .mx-input-wrapper { - background-color: var(--input-background-color); - } - - .mx-datepicker-main .mx-datepicker-footer .mx-btn:hover, - .mx-datepicker-main .mx-datepicker-footer .mx-btn:focus { - background-color: var(--color-primary); - color: white; - } - - .mx-datepicker .mx-input { - border: none; - margin-top: 0px; - margin-bottom: 0px; - } - - .datepicker-button-section.icon-leftarrow { - background-image: var(--icon-arrow-left-808080); - } - - .datepicker-button-section.icon-rightarrow { - background-image: var(--icon-arrow-right-808080); - } - - .button.datepicker-button-section__next, - .button.datepicker-button-section__previous { - border: none; - margin: auto; - } - - .new-event-today-view-section .button { - border-radius: 8px; - } - - .icon-new-calendar { - background-image: var(--icon-calendar-calendar-808080); - } - - .icon-new-calendar-with-task-list { - background-image: var(--icon-calendar-new-calendar-with-task-list-808080); - } - - .icon-public { - background-image: var(--icon-public-808080); - } - - #content-vue.app-calendar #app-navigation-vue .action-item.icon-share, - #content-vue.app-calendar #app-navigation-vue .action-item.icon-shared, - #content-vue.app-contacts #addressbook-list .icon-shared { - background-size: 12px; - } - #content-vue.app-calendar .fc-scrollgrid { - padding-top: 14px; - } - - #content-vue.app-calendar .fc-dayGridMonth-view table { - font-size: 1em; - } - - .icon-view-week { - background-image: var(--icon-calendar-view-week-808080); - } - - .icon-view-day { - background-image: var(--icon-calendar-view-day-808080); - } - - .icon-view-module { - background-image: var(--icon-calendar-view-module-808080); - } - - .icon-view-list { - background-image: var(--icon-calendar-view-list-808080); - } - - #content-vue.app-calendar .app-sidebar-tabs__tab a.active { - color: var(--color-text-light); - } - - /* Notes App*/ - - #content-vue.app-notes li.app-navigation-entry.active, - #content-vue.app-talk li.acli_wrapper.active { - background-color: var(--color-background-hover) !important; - } - #content-vue.app-notes .welcome-content .icon-files-dark { - background-size: 18px; - } - - #content-vue.app-notes button.icon-confirm::before, - #content.app-dashboard ~ .popover .action-input__form .action-input__label::before { - content: var(--icon-confirm-fff); - } - - #content-vue.app-notes .welcome-content .icon-phone { - background-size: 11px; - } - - #content-vue.app-notes - #app-settings__header - .settings-button__icon - .material-design-icon__svg, - #content-vue.app-calendar - #app-settings - .settings-button__icon - .material-design-icon__svg, - #content-vue.app-calendar - ~ .popover - div[class^="property-"] - .material-design-icon__svg, - #content-vue.app-calendar div[class^="property-"] .material-design-icon__svg, - #content-vue.app-calendar - .app-sidebar - .app-sidebar__close - .material-design-icon__svg, - #content-vue.app-calendar .app-sidebar-tabs__tab a { - color: var(--icon-inactive-color); - } - - .CodeMirror .CodeMirror-line::selection, - .CodeMirror .CodeMirror-line > span::selection, - .CodeMirror .CodeMirror-line > span > span::selection { - background: var(--color-primary); - } - input[type="text"] + .icon-confirm, - input[type="password"] + .icon-confirm, - input[type="email"] + .icon-confirm { - background-color: var(--color-primary) !important; - background-image: var(--icon-confirm-fff) !important; - background-repeat: no-repeat !important; - background-position: center !important; - } - - input[type="text"] + .icon-confirm::before, - input[type="password"] + .icon-confirm::before, - input[type="email"] + .icon-confirm::before { - content: unset !important; - } - - input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, - input[type="password"]:not(:active):not(:hover):not(:focus) - + .icon-confirm:active, - input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, - input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, - input[type="password"]:not(:active):not(:hover):not(:focus) - + .icon-confirm:hover, - input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, - input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus, - input[type="password"]:not(:active):not(:hover):not(:focus) - + .icon-confirm:focus, - input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus { - border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; - border-left-color: transparent !important; - } - - #app-sidebar-vue .note-category .category input.icon-confirm:hover { - border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; - } - #app-sidebar-vue.app-sidebar - .app-sidebar-header__desc - .app-sidebar-header__menu { - background-color: var(--color-main-background); - } - - #content.app-settings - .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, - #content.app-files - .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, - #header - .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, - #content-vue.app-bookmarks - .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, - #content-vue.app-photos - .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, - #content-vue.app-talk - .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before{ - content: var(--icon-more-808080); - font-size: unset; - font-weight: unset; - font-style: unset; - font-family: unset; - line-height: unset; - } - - #content-vue.app-bookmarks - .icon.action-item__menutoggle--primary.action-item__menutoggle--default-icon::before { - content: var(--icon-more-fff); - } - - #note-container .CodeMirror-code[contenteditable="true"]:hover, - #note-container .CodeMirror-code[contenteditable="true"]:focus, - #note-container .CodeMirror-code[contenteditable="true"]:active { - background-color: var(--color-main-background) !important; - } - /* Tasks app*/ - - .action-item:not(.priority--high) .material-design-icon, - #app-settings .collection .material-design-icon, - .material-design-icon.emoticon-outline-icon { - color: var(--icon-inactive-color); - } - - .action.active .material-design-icon.delete-icon, - .action-item:hover .material-design-icon.delete-icon { - color: var(--color-delete); - } - - #content-vue.app-tasks .app-sidebar-tabs .property__item--clearable { - color: var(--icon-active-color) !important; - } - - #content-vue.app-tasks .app-sidebar-tabs .multiselect-picker-option.active { - color: var(--icon-active-color); - } - /* Settings Apps categories icons */ - - .icon-category-app-bundles { - background-image: var(--icon-bundles-808080); - } - .icon-category-dashboard { - background-image: var(--icon-dashboard-dashboard-808080); - } - .icon-category-customization { - background-image: var(--icon-customization-808080); - } - .icon-category-games { - background-image: var(--icon-games-808080); - } - .icon-category-integration { - background-image: var(--icon-integration-808080); - } - .icon-category-monitoring { - background-image: var(--icon-monitoring-808080); - } - .icon-category-multimedia { - background-image: var(--icon-multimedia-808080); - } - .icon-category-office { - background-image: var(--icon-office-808080); - } - .icon-category-organization { - background-image: var(--icon-organization-808080); - } - .icon-category-search { - background-image: var(--icon-search-808080); - } - - .icon-category-workflow { - background-image: var(--icon-workflow-808080); - } - - /* Bookmarks app */ - - .popover .action-button__icon.icon-link { - background-image: var(--icon-public-808080); - } - - .controls svg path, - .material-design-icon.earth-icon svg path { - fill: var(--icon-inactive-color); - } - - .app-navigation-entry-icon .material-design-icon, - .action .material-design-icon { - color: var(--icon-inactive-color); - } - - .app-navigation-entry.active .app-navigation-entry-icon .material-design-icon, - .action.active .material-design-icon, - .action.selected .material-design-icon { - color: var(--icon-active-color); - } - - .app-navigation-entry - .app-navigation-entry__inline-input-container - form - button.icon-confirm::before { - content: unset; - } - .app-navigation-entry.active .icon-home { - background-image: var(--icon-home-007fff); - } - - #content-vue.app-bookmarks .app-navigation-entry-icon svg path { - fill: var(--icon-inactive-color); - } - #content-vue.app-bookmarks .app-navigation-entry.active svg path { - fill: var(--icon-active-color); - } - - /* News App */ - - #content-vue.app-bookmarks .empty-content { - text-align: center; - } - - #app-navigation .icon-unpinned { - background-image: var(--icon-news-unpinned-808080); - } - - #app-navigation .icon-pinned { - background-image: var(--icon-news-pinned-808080); - } - #app-navigation .icon-full-text-disabled { - background-image: var(--icon-news-nonfulltext-808080); - } - #app-navigation .icon-full-text-enabled { - background-image: var(--icon-news-fulltext-808080); - } - - /* Passwords App */ - - .searchbox .icon-search-force-white { - background-image: var(--icon-search-000); - } - - .searchbox { - opacity: 1 !important; - } - - #content.app-passwords #app-navigation .icon.fa::before { - content: unset; - } - - /* Talk App */ - - #content-vue.app-talk .acli_wrapper .acli.active { - background-color: transparent; - } - - #content-vue.app-talk #app-sidebar .username-form button.icon-rename, button.edit-output-dir span.icon-rename { - background-image: var(--icon-rename-000); - } - - /* Google integration */ - - #google_prefs #google-content button.google-oauth { - background-color: var(--color-primary); - } - - #google-import-contacts .icon-contacts-dark { - background-image: var(--icon-contacts-000); - } - - #google-calendars button .icon-calendar-dark { - background-image: var(--icon-calendar-000); - } - - #google-import-files .icon-files-dark { - background-image: var(--icon-files-000); - } - - #google-import-photos .icon-picture { - background-image: var(--icon-picture-000); - } - - /* remove opacity */ - button.edit-output-dir span.icon-rename, #google-rm-cred .icon-close, #google-import-photos .icon-picture, #google-import-contacts .icon-contacts-dark, #google-calendars button .icon-calendar-dark, #google-import-files .icon-files-dark { - opacity: 1; - } - /** */ - #header .header-right .magnify-icon > svg { - display: none; - } - .new-icons .color-icons{ - background-image: url("../img/app-icons/other.svg"); - width: 100% ; - height: 80px; - background-position: 50%; - background-repeat: no-repeat; - background-size: 60px; - } - .new-icons .drive , .new-icons .files {background-image: url("../img/app-icons/Drive.svg");} - .new-icons .activity {background-image: url("../img/app-icons/Activity.svg");} - .new-icons .bookmarks {background-image: url("../img/app-icons/Bookmark.svg");} - .new-icons .calendar {background-image: url("../img/app-icons/Calendar.svg");} - .new-icons .carnet {background-image: url("../img/app-icons/Carnet.svg");} - .new-icons .contacts {background-image: url("../img/app-icons/Contacts.svg");} - .new-icons .deck {background-image: url("../img/app-icons/Deck.svg");} - .new-icons .docs {background-image: url("../img/app-icons/Docs.svg");} - .new-icons .email,.new-icons .rainloop {background-image: url("../img/app-icons/E-mail.svg");} - .new-icons .gitlab {background-image: url("../img/app-icons/Gitlab.svg");} - .new-icons .news {background-image: url("../img/app-icons/News.svg");} - .new-icons .notes {background-image: url("../img/app-icons/Notes.svg");} - .new-icons .presentation {background-image: url("../img/app-icons/Presentation.svg");} - .new-icons .spreadsheet {background-image: url("../img/app-icons/Spreadsheet.svg");} - .new-icons .tasks {background-image: url("../img/app-icons/Tasks.svg");} - .new-icons .photos {background-image: url("../img/app-icons/Gallery.svg");} - .new-icons .e-user-support-center {background-image: url("../img/app-icons/Support.svg");} - .new-icons .passwords {background-image: url("../img/app-icons/Password.svg");} - .new-icons .onlyoffice_docx {background-image: url("../img/app-icons/Docs.svg");} - .new-icons .onlyoffice_xlsx {background-image: url("../img/app-icons/Spreadsheet.svg");} - .new-icons .onlyoffice_pptx {background-image: url("../img/app-icons/Presentation.svg");} - - #appmenu li:hover a, #appmenu li a:focus { - font-size: 12px; - font-family: 'Roboto'; - letter-spacing: 1px; - } - #filestable thead{background-color: white !important ;} - #recommendations{height: 100px !important;} - .recommendation{border: 1px solid #E6E8E9;padding: 10px !important;margin-bottom: 5px;border-radius: 6px !important;} - progress{border-radius: 10px 10px !important;height: 12px !important;} - #appmenu li a:focus .icon-more, #appmenu li a:focus .icon-more-white {transform: none !important;} - #more-apps:hover span, #more-apps:focus span, #more-apps a:focus span{display: none !important;} - - button#quotaincreasebutton { - margin-top: 15px !important; - } - @media only screen and (max-width: 640px) { - .new-icons .color-icons { - height: 50px; - background-size: 40px; - } - #launcher-menu { - width: 300px !important; - left: 10% !important; - } - } - @media only screen and (max-width: 640px) { - #launcher-menu { - left: 5% !important; - } - } + font-family: 'Roboto'; + src: url('../webfonts/Roboto-Regular.woff2') format('woff2'), + url('../webfonts/Roboto-Regular.woff') format('woff'); + /* font-weight: 600; */ + /* font-style: normal; */ + font-display: swap; + letter-spacing: 1px; +} +*{ + font-family: 'Roboto'; +} +:root { +--color-primary: #007fff; +--color-primary-element: #007fff; +--color-secondary-element: white; +--border-color-secondary-element: #007fff; +--color-primary-element-light: #007fff; +--color-error: #fb3845; +--color-delete: #e9322d; +--color-success: #3ad975; +--color-main-background: #ffffff; +--color-main-background-translucent: #f2f2f2; +--color-main-text: black; +--color-background-hover: white; +--color-text-maxcontrast: black; +--color-border-dark: #e6e6e6; +--color-border: #ebebeb; +--icon-settings-dark-000: #000000; +--icon-inactive-color: #808080; +--icon-active-color: #007fff; +--input-background-color: white; +--menu-icon-color: #222; +--color-dashboard-panels: #f2f2f2; +--color-dashboard-background-plain: #d2d2d2; +--color-sharing-icon-background: #767676; +} + +/* Force a few variables to right values for dark theme */ +body.theme--dark { +--input-background-color: #181818; +--icon-notifications-notifications-000000: url("/svg/notifications/notifications?color=000"); +--icon-notifications-notifications-new-000000: url("/svg/notifications/notifications-new?color=000"); +--icon-search-000: url("/svg/core/actions/search?color=000"); +} + +body.theme--highcontrast { +--icon-inactive-color: black; +} + +#body-user #header, +#body-settings #header, +#body-public #header { +background-color: white !important; +} + +button:not(:disabled):hover, +.primary:not(:disabled):hover, +.button:hover, +button.toggle.has-tooltip:hover, +.primary:active, +input[type="submit"]:active, +input[type="button"]:active, +input[type="reset"]:active, +input[type="button"]:hover, +input[type="submit"]:hover, +input[type="reset"]:hover, +.primary:active, +.button:active, +#new-contact-button:hover, +#cookbook_new_cookbook:hover, +#new-user-button:hover, +#deleteaccount:hover, +#quotaincreasebutton:hover, +#content-vue.app-tasks .action.icon-checkmark:hover, +.button.today:hover, +button.import-contact__button-main:hover, +button#notes_new_note:hover, +#oc-dialog-filepicker-content .actions.creatable .icon.icon-add:hover { +opacity: 0.8; +} + +/* primary action button, use sparingly */ +button, +.button, +.primary, +input[type="submit"].primary, +input[type="button"].primary, +button.toggle.has-tooltip, +button.primary, +.button.primary, +.primary:active, +input[type="submit"].primary:active, +input[type="button"].primary:active, +button.primary:active, +.button.primary:active, +.actions a.button, +#new-contact-button, +#cookbook_new_cookbook, +#new-user-button, +#deleteaccount, +#quotaincreasebutton, +.mx-datepicker .mx-datepicker-footer .mx-btn, +#content-vue.app-tasks .action.icon-checkmark, +button.import-contact__button-main, +button#notes_new_note, +#content.app-news button.explore-subscribe, +input[type="button"], +input[type="submit"], +input[type="reset"] { +background-color: var(--color-primary); +color: white; +border-color: var(--color-primary); +} + +input.primary:not(:disabled):hover, +input.primary:not(:disabled):focus, +button.primary:not(:disabled):hover, +button.primary:not(:disabled):focus, +a.primary:not(:disabled):hover, +a.primary:not(:disabled):focus { +background-image: none; +} + +/* For buttons that are not primary or submit/reset/button inputs that are not primary */ + +button.primary + button:not(.primary), +button.primary + button:not(.primary):active, +.entity-picker__navigation button:not(.primary), +.event-popover__buttons button:not(.primary), +.event-popover__buttons button:not(.primary):active, +.oc-dialog-buttonrow.twobuttons button:not(.primary), +.oc-dialog-buttonrow.twobuttons button:not(.primary):active, +.status-buttons .status-buttons__select { +background-color: var(--color-secondary-element); +color: var(--color-primary); +border-color: var(--border-color-secondary-element); +} + +input[type="checkbox"].checkbox + label::before, +input[type="radio"].checkbox + label::before { +border-color: var(--icon-inactive-color); +background-color: white; +} + +textarea:not(:disabled), +textarea:not(:disabled):active, +div[contenteditable="true"]:not(:disabled):active, +textarea:not(:disabled):hover, +div[contenteditable="true"]:not(:disabled):hover, +textarea:not(:disabled):focus, +div[contenteditable="true"]:not(:disabled):focus { +background-color: var(--input-background-color) !important; +} + +select, +textarea, +input[type="text"], +input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([type="file"]):not([type="image"]):not(.multiselect__input), +#content-vue.app-tasks .task-body__checkbox label.reactive.no-nav::before, +#content.app-files #commentsTabView .newCommentForm .message, +.multiselect +.multiselect__content-wrapper +.multiselect__content +li +> span.multiselect__option, +div.select2-container-multi .select2-choices, +div.select2-container-multi.select2-container-active .select2-choices { +background-color: var(--input-background-color); +} + +#settings #expanddiv, +#header .header-right > div > .notification-container.menu { +background-color: var(--color-main-background); +} + +#header .header-appname { +color: var(--color-main-text); +} + +#settings #expanddiv li a.active { +background-color: var(--color-background-hover); +} +body.theme--dark #header .header-right > div > .notification-container.menu, +body.theme--dark #settings #expanddiv { +background-color: var(--color-main-background); +} +.multiselect .multiselect__tags input.multiselect__single, +.multiselect .multiselect__tags span.multiselect__single, +.multiselect .multiselect__tags span.multiselect__placeholder, +.multiselect .multiselect__tags .multiselect__content, +.multiselect .multiselect__tags .multiselect__tags-wrap, +.multiselect .multiselect__input, +.multiselect +.multiselect__content-wrapper +.multiselect__content +li.multiselect__element, +.multiselect +.multiselect__content-wrapper +.multiselect__content +li.multiselect__element +.multiselect__option, +#content-vue.app-contacts +.property.property--without-actions.property--last.property-masonry:not(.property--addressbooks):not(.property--groups) +.multiselect +.multiselect__tags +.multiselect__input, +#content-vue.app-contacts +.multiselect +.multiselect__tags +input.multiselect__input, +#content-vue.app-contacts +.multiselect +> .multiselect__tags +> span.multiselect__single, +#content.app-files #commentsTabView .newCommentForm .message:hover, +#app-dashboard .footer a:hover, +#app-content-systemtagsfilter .select2-container ul { +background-color: var(--input-background-color) !important; +} +/* use logos from theme */ +#header .logo, +#firstrunwizard .logo { +background-image: url("../img/logo@2x.svg"); +width: 256px; +height: 128px; +} +#header .logo-icon { +width: 130px; +height: 40px; +top: 5px; +bottom: 0px; +border-radius: 22px; +} + +#header #nextcloud { +padding-left: 150px; +} + +#header .notifications .svg { +height: 16px; +width: 16px; +} + +/* +For the overflow in search filter; +It doesn't use specific ids so gave the rule a lot of specificity +*/ +.popover > .popover__wrapper .open ul li p { +white-space: normal; +} + +#unified-search #header-menu-unified-search .header-menu__carret { +right: 125px; +} + +/* App Navigation rules */ +#app-navigation:not(.vue) > ul > li.active, +#app-navigation:not(.vue) > ul > li a:active, +#app-navigation:not(.vue) > ul > li a.selected, +#app-navigation:not(.vue) > ul > li a.active, +#app-navigation:not(.vue) > ul > li.active > a, +#app-navigation:not(.vue) > ul > li a:active > a, +#app-navigation:not(.vue) > ul > li a.selected > a, +#app-navigation:not(.vue) > ul > li a.active > a { +background-color: var(--color-main-background); +} + +li.app-navigation-entry, +.conversations .acli_wrapper .acli { +background-clip: content-box; +} + +li.app-navigation-entry.active { +background-color: var(--color-main-background) !important; +} + +li.app-navigation-entry:not(.active):hover, +#content.app-deck li.app-navigation-entry.active { +background-color: var(--color-background-hover) !important; +} + +li.app-navigation-entry.app-navigation-entry--collapsible:hover { +background-color: var(--color-main-background) !important; +} + +li.app-navigation-entry.app-navigation-entry--collapsible > a:hover, +#content.app-passwords #app-navigation .active { +background-color: var(--color-background-hover); +} + +/* CSS TWEAKS TAKEN FROM THEMING APP (disabled now) */ + +.nc-theming-main-background { +background-color: #999999; +} +.nc-theming-main-text { +color: #fff; +} +.nc-theming-contrast { +color: #fff; +} +#appmenu:not(.inverted) svg { +filter: none; +} +#appmenu.inverted svg { +filter: invert(1); +} +.icon-folder, +.icon-filetype-folder { +background-image: var(--icon-folder-007FFF); +} +.icon-filetype-text { +background-image: var(--icon-text-007fff); +} +.icon-filetype-folder-drag-accept { +background-image: var(--icon-folder-drag-accept-007fff) !important; +} +#header .logo { +background-image: url("../img/logo@2x.svg"); +} +#body-user #header, +#body-settings #header, +#body-public #header { +color: var(--color-main-text); +background-image: none; +} + +#body-user.dark--theme, +#body-settings.dark--theme { +color: white !important; +} + +#header .menu, +#header #launcher-menu, +#header .header--menu { +opacity: 1; +} + +#appmenu li span { +color: var(--color-main-text); +} + +#header .logo { +background-size: auto; +} + +input.primary, +#alternative-logins li a { +background-color: #999999; +border: 1px solid #fff; +color: #fff; +} +footer { +height: 92px; +} + +.notifications-button.hasNotifications { +opacity: 0.6 !important; +} +.notifications-button.hasNotifications:hover, +.notifications-button.hasNotifications:focus { +opacity: 1 !important; +} +#header .notification-wrapper .dismiss-all .icon.icon-close { +margin-top: 4px; +} +#content #app-navigation, +#content.app-news #app-navigation button { +color: var(--color-main-text); +border-right: 1px solid var(--color-border); +} + +.icon-home, +#oc-dialog-filepicker-content .dirtree div:first-child a { +background-image: var(--icon-home-808080); +} + +#controls .icon-home, +#oc-dialog-filepicker-content .dirtree div:first-child a { +background-size: 20px; +} + +.icon-mail { +background-image: var(--icon-mail-808080); +} +.icon-error { +background-image: var(--icon-error-808080); +} + +.icon-details { +background-image: var(--icon-details-808080); +} + +.icon-add, +.action-item.icon-add, +button.action-item__menutoggle.icon-add, +#content.app-news .add-new button.icon-add, +.who-has-access .action-item.icon-add.addAdditionalAdmin, +#content-vue.app-tasks +#app-navigation-vue +.app-navigation-entry-icon.sprt-add::before { +background-image: var(--icon-add-808080); +} + +.notification-container .emptycontent .icon-notifications-dark { +background-image: var(--icon-notifications-notifications-808080); +background-size: 40px; +} + +.icon-rename, +.who-has-access .action-item--single.action-item.icon-rename, +.where-is-my-data .action-item--single.action-item.icon-rename { +background-image: var(--icon-rename-808080); +} + +.icon-download { +background-image: var(--icon-download-808080); +} +.icon-template-add { +background-image: var(--icon-template-add-808080); +} +.icon-tasks, +.panel--header .icon-tasks, +.modal__content .icon-tasks { +background-image: var(--icon-tasks-tasks-808080); +} +#tasks_panel .empty-content .icon-tasks { +background-image: var(--icon-tasks-tasks-808080) !important; +} +.icon-checkmark { +background-image: var(--icon-checkmark-808080); +} +.icon-group { +background-image: var(--icon-group-808080); +} +.icon-timezone { +background-image: var(--icon-timezone-808080); +} +.icon-edit { +background-image: var(--icon-edit-808080); +} +.icon-reminder { +background-image: var(--icon-notifications-notifications-808080); +} +.icon-gravatar { +background-image: var(--icon-contacts-gravatar-808080); +} +#content-vue.app-calendar .app-sidebar-tabs__tab-icon.icon-reminder { +background-size: 13px; +} +.icon-clippy { +background-image: var(--icon-clippy-808080); +} +.icon-confirm { +background-image: var(--icon-confirm-808080); +} + +.icon-user-admin { +background-image: var(--icon-user-admin-808080); +} + +.icon-disabled-users { +background-image: var(--icon-disabled-users-808080); +} + +.icon-notes, +.icon-notes-trans { +background-image: var(--icon-notes-notes-808080); +} +.icon-projects { +background-image: var(--icon-projects-808080); +} +.icon-comment { +background-image: var(--icon-comment-808080); +} +.icon-activity { +background-image: var(--icon-activity-activity-808080); +} +.icon-link { +background-image: var(--icon-public-808080); +} +button .icon-link { +background-image: var(--icon-public-ffffff); +} + +.icon-recent { +background-image: var(--icon-files-recent-808080); +} + +.icon-more, +.icon-more-white { +background-image: var(--icon-more-808080); +} + +.avatar-shared.icon-more-white { +background-image: var(--icon-more-fff); +} + +#collection-list .avatar .icon-projects { +background-image: var(--icon-projects-fff); +} + +#sharing-inherited-shares .sharing-entry .avatar-shared.icon-more-white, +.sharing-entry.sharing-entry__internal .avatar-external.icon-external-white, +#collection-list .avatar { +background-color: var(--color-sharing-icon-background); +} + +.icon-files, +.icon-category-files, +.icon-emptyfolder { +background-image: var(--icon-files-app-808080); +} + +#header .icon-notifications, +#header .icon-notifications-new { +background-size: 17px; +} + +.icon-notifications-new { +background-image: var(--icon-notifications-notifications-new-000000); +} + +.icon-notifications { +background-image: var(--icon-notifications-notifications-000000); +} + +.icon-external, +.icon-goto { +background-image: var(--icon-external-808080); +} + +.action.icon-checkmark { +background-image: var(--icon-checkmark-ffffff); +} +.icon-phone { +background-image: var(--icon-phone-808080); +} + +.icon-password, +.icon-category-security { +background-image: var(--icon-password-808080); +} +.icon-link { +background-image: var(--icon-link-808080); +} +.icon-toggle-filelist { +background-image: var(--icon-toggle-filelist-808080); +} + +button.icon-toggle-filelist { +background-color: var(--color-main-background); +} + +.icon-toggle-pictures { +background-image: var(--icon-toggle-pictures-808080); +} + +.button .icon-add, +button .icon-add, +button.icon-add, +#new-contact-button.icon-add,#cookbook_new_cookbook.icon-add, +#content-vue.app-notes #notes_new_note.icon-add, +#oc-dialog-filepicker-content .actions.creatable .icon.icon-add, +#content.app-news .add-new .icon-add.add-new-folder-primary { +background-image: var(--icon-add-ffffff); +} + +.popover .action-button .action-button__icon.icon-add { +background-image: var(--icon-add-808080); +} + +button > span[class^="icon-"], +.button > span[class^="icon-"], +button > span[class*=" icon-"], +.button > span[class*=" icon-"] { +opacity: 1; +} + +.icon-share, +.icon-shared { +background-image: var(--icon-share-808080); +} + +.icon-contacts-dark, +.icon-contacts, +.icon-category-social { +background-image: var(--icon-contacts-app-808080); +} + +#contactsmenu .icon-contacts { +background-image: var(--icon-contacts-000); +} + +.icon-user, +.icon-category-installed { +background-image: var(--icon-user-808080); +} + +.icon-category-enabled { +background-image: var(--icon-checkmark-808080); +} + +.icon-star, +.icon-star-dark, +.icon-starred:hover { +background-image: var(--icon-star-808080); +} + +.icon-starred, +.icon-star:hover, +.icon-star-dark:hover, +#filestable .filename .favorite-mark .icon-starred { +background-image: var(--icon-star-FFCC00); +} + +.icon-close, +#header-menu-unified-search .icon-close, +.icon-category-disabled { +background-image: var(--icon-close-808080); +} + +#header #searchbox { +color: var(--color-main-text); +border-color: var( + --icon-inactive-color +) !important; /* !important used in source so needed to override */ +} + +#app-navigation, +#app-navigation-vue { +border-right: 2px solid var(--color-border); +} + +table th, +table td { +border-bottom: 1px solid var(--color-border); +} + +.icon-files-dark { +background-image: var(--icon-files-app-808080); +} + +.icon-fullscreen { +background-image: var(--icon-fullscreen-808080); +} + +.icon-calendar-dark { +background-image: var(--icon-calendar-calendar-808080); +} +.icon-talk { +background-image: var(--icon-spreed-app-808080); +} + +#app-navigation li a, +#app-navigation:not(.vue) > ul > li > a, +#app-navigation:not(.vue) > ul > li > ul > li > a { +opacity: 1; +} + +/* Dashboard App */ + +#body-user[data-dashboard-background]:not(.theme--dark) +#app-dashboard +.statuses +button:hover, +#body-user[data-dashboard-background]:not(.theme--dark) .edit-panels:hover { +background-color: var(--color-background-hover) !important; +} + +body.theme--highcontrast #app-dashboard .statuses button, +body.theme--highcontrast #app-dashboard .edit-panels { +border: 1px solid var(--color-main-text); +} + +#body-user[data-dashboard-background]:not(.theme--dark) #app-dashboard .panel, +#body-user[data-dashboard-background]:not(.theme--dark) +#app-dashboard +.statuses +button, +#body-user[data-dashboard-background]:not(.theme--dark) +#app-dashboard +.footer +a { +background-color: var(--color-dashboard-panels); +/* opacity: 0.9; */ +} + +#body-user[data-dashboard-background]:not(.theme--dark) #header { +opacity: 0.95; +} +#body-user[data-dashboard-background].theme--highcontrast #header { +background-color: var(--color-main-background) !important; +} + +#app-dashboard .panel .panel--header > .icon-calendar-dark { +background-position: 14px 10px; +} + +#app-dashboard .panel .panel--header > .icon-files-dark { +background-position: 14px 16px; +} + +#app-dashboard .statuses button { +color: var(--color-main-text); +} + +#content.app-dashboard #app-dashboard, +body[data-dashboard-background]:not(.theme--dark) +.background-selector +.background.filepicker, +body[data-dashboard-background]:not(.theme--dark) +.background-selector +.background.default, +body[data-dashboard-background]:not(.theme--dark) +.modal__content +.background-selector +.background.color { +background-color: var(--color-dashboard-background-plain); +color: var(--color-main-text); +} + +body[data-dashboard-background="#0082c9"] #app-dashboard, +body[data-dashboard-background="default"] #app-dashboard { +background-color: var(--color-dashboard-background-plain); +} + +body[data-dashboard-background="default"] #app-dashboard { +background-image: none !important; +} + +body[data-dashboard-background="#0082c9"] #app-dashboard h2, +body[data-dashboard-background="default"] #app-dashboard h2 { +color: var(--color-main-text); +} + +/* Files App */ + +#filestable .thumbnail { +background-repeat: no-repeat; +} + +.breadcrumb .canDrop > a, +#filestable tbody tr.canDrop, +#filestable.view-grid:not(.hidden) +#fileList +tr:not(.hidden).selected +.thumbnail-wrapper, +#filestable.view-grid:not(.hidden) +#fileList +tr:not(.hidden).selected +.fileactions, +#filestable.view-grid:not(.hidden) +#fileList +tr:not(.hidden).selected +.nametext { +background-color: var(--color-primary-light); +} + +.actions .button.new:active { +background-color: var(--color-primary); +} + +#fileList td a a.action { +opacity: 0.6; +} + +#fileList td a a.action:hover { +opacity: 0.8; +} + +#content.app-files #filestable.view-grid thead tr, +#content.app-files #filestable.view-grid thead th { +border-bottom: 0px; +} + +#content.app-files #controls .icon-shared { +background-size: 14px; +} + +#editor .menububble.is-active .menububble__button { +background-color: var(--color-primary); +} + +#editor .menububble.is-active .menububble__button:hover { +background-color: var(--color-background-hover); +} + +#editor .menububble__button:hover .menububble__buttontext { +color: var(--color-primary); +} + +#editor .menububble__button:hover .icon-link { +background-image: var(--icon-public-007fff); +} + +#editor .menububble__button:hover .icon-file { +background-image: var(--icon-text-007fff); +} + +#uploadprogressbar + button.icon-close, +#google-drive button .icon-close, +#google-photos button .icon-close { +background-image: var(--icon-close-fff); +} + +#google-rm-cred .icon-close { +background-image: var(--icon-close-000); +opacity: 1; +} + +.breadcrumb div.crumb span.icon-shared, +.breadcrumb div.crumb span.icon-public, +.selectedActions a, +#commentsTabView .comment .action { +opacity: 0.8; +} + +#content.app-files #emptycontent .icon-share { +background-image: var(--icon-files-share-808080); +} + +#content #app-content-files #controls { +background-color: var(--color-main-background); +} + +#app-content-files button .icon-file, +#editor .menububble__button .icon-file { +background-image: var(--icon-text-ffffff); +} + +#editor .ProseMirror { +background-color: var(--color-main-background) !important; +} + +#fileList tr td.selection > .selectCheckBox + label::before, +#oc-dialog-filepicker-content .actions.creatable .icon.icon-add { +opacity: 1; +} + +#filestable .filesize, +#filestable .date .modified.live-relative-timestamp { +color: var(--color-main-text) !important; +} +.nav-icon-files { +background-image: var(--icon-files-app-808080); +} + +.nav-icon-files.active { +background-image: var(--icon-files-app-007fff); +} + +.nav-icon-recent { +background-image: var(--icon-files-recent-808080); +} + +.nav-icon-recent.active { +background-image: var(--icon-files-recent-007fff); +} + +.nav-icon-favorites { +background-image: var(--icon-star-outline-808080); +} +.nav-icon-favorites.active { +background-image: var(--icon-star-outline-007fff); +} + +.nav-icon-deletedshares { +background-image: var(--icon-files-unshare-808080); +} +.nav-icon-deletedshares.active { +background-image: var(--icon-files-unshare-007fff); +} + +.nav-icon-shareoverview, +.nav-icon-sharingout, +.nav-icon-sharingin, +.nav-icon-pendingshares, +#content.app-files .icon-share, +#content.app-files .icon-shared { +background-image: var(--icon-files-share-808080); +} +.nav-icon-shareoverview.active, +.nav-icon-sharingout.active, +.nav-icon-sharingin.active, +.nav-icon-pendingshares.active { +background-image: var(--icon-files-share-007fff); +} +.nav-icon-sharinglinks { +background-image: var(--icon-public-808080); +} +.nav-icon-sharinglinks.active { +background-image: var(--icon-public-007fff); +} +.nav-icon-trashbin { +background-image: var(--icon-files-delete-808080); +} + +.nav-icon-trashbin.active { +background-image: var(--icon-files-delete-007fff); +} + +.nav-icon-systemtagsfilter { +background-image: var(--icon-tag-808080); +} + +.nav-icon-systemtagsfilter.active { +background-image: var(--icon-tag-007fff); +} + +.icon-quota { +background-image: var(--icon-quota-808080); +} +.app-sidebar-header__star.icon-star, +.app-sidebar-header__star.icon-starred, +.app-sidebar-header__star.icon-star:hover, +.app-sidebar-header__star.icon-starred:hover, +#view-toggle { +background-size: 16px; +} + +#collection-list .multiselect .multiselect__tags .multiselect__input { +background-color: transparent !important; +} +#collection-list +.multiselect.multiselect--active +.multiselect__tags +.multiselect__input { +background-color: var(--input-background-color) !important; +} +#app-sidebar-vue #sharing .sharing-entry .avatar-external, +#app-sidebar-vue #sharing .sharing-entry .avatar-shared { +background-color: var(--color-primary); +} +#app-sidebar-vue #sharing .sharing-entry .avatar-shared.icon-more-white { +background-image: var(--icon-more-fff); +} + +#app-sidebar-vue #sharing .sharing-entry .avatardiv.icon-public-white { +background-color: var(--color-primary) !important; +} + +body.theme--highcontrast #header .header-right .magnify-icon { +background: var(--icon-search-000) no-repeat center; +} + +#header .header-right .magnify-icon { +background: var(--icon-search-000) no-repeat center; +background-size: 15px; +} + +#content.app-files #filestable span, +#content.app-files #filestable td { +color: var(--color-main-text) !important; +} + +/* Contacts App */ + +#content-vue.app-contacts +.multiselect.property__label +.multiselect__tags +span.multiselect__single, +#content-vue.app-contacts +.multiselect.property__label +.multiselect__tags +.multiselect__input { +background-color: var(--color-main-background) !important; +} + +#contacts-list { +margin-top: 44px; +} + +li.app-navigation-entry.active .icon-user { +background-image: var(--icon-user-007fff); +} + +li.app-navigation-entry.active .icon-contacts-dark, +li.app-navigation-entry.active .icon-group { +background-image: var(--icon-contacts-app-007fff); +} +li.app-navigation-entry.active .icon-address-book { +background-image: var(--icon-contacts-address-book-007fff); +} +li.app-navigation-entry.active .icon-recent-actors { +background-image: var(--icon-contacts-recent-actors-007fff); +} + +#content-vue.app-contacts .multiselect .multiselect__tags .multiselect__input, +#content-vue.app-contacts +.multiselect +> .multiselect__tags +> .multiselect__single { +background-color: var(--color-main-background) !important; +} + +#content-vue.app-contacts ~ .popover .action.active, +#content-vue.app-contacts ~ .popover .action.active .action-input:hover, +#content-vue.app-contacts ~ .popover .action.active .action-input:focus-within { +opacity: 1; +} + +#content-vue.app-contacts ~ .popover .action.active .action-input { +opacity: .7; +} + +#content-vue.app-contacts .empty-content__icon { +height: 80px; +} + +#content-vue.app-contacts +#addressbook-list +.addressbook-shares +.multiselect__content { +background-color: var(--color-secondary-element); +} + +#content-vue.app-contacts .empty-content__title { +text-align: center; +} +#content-vue.app-contacts .app-content > .empty-content { +margin: 20vh; +} +.icon-address-book { +background-image: var(--icon-contacts-address-book-808080); +} + +#content-vue.app-contacts .app-navigation-caption__title { +color: var(--color-main-text); +} + +#content-vue.app-contacts .contact-header__infos input { +background-color: var(--color-main-background); +} + +.property .icon-contacts { +background-image: var(--icon-contacts-app-808080); +} +#content-vue.app-contacts .icon-phone { +background-image: var(--icon-contacts-phone-808080); +} + +button .icon-upload, +#uploadavatarbutton.icon-upload, +.button.primary .icon-upload, +button.primary .icon-upload, +#content-vue.app-calendar .settings-fieldset-interior-item .icon-upload, +#content-vue.app-bookmarks #app-settings-content button .icon-upload, +button.import-contact__button-main .icon-upload, +.import-export button.icon-upload, +.attachments-drag-zone button.icon-upload { +background-image: var(--icon-upload-000); +} +#uploadavatarbutton.icon-upload{ +background-image: var(--icon-upload-ffffff); +} +.action-button .icon-upload, +.menuitem .icon-upload, +button.import-contact__button--local:disabled .import-contact__button-icon.icon-upload + { +background-image: var(--icon-upload-808080); +} + +button .icon-download, +.button .icon-download, +.import-export .button.icon-download { +background-image: var(--icon-download-ffffff); +} +.action-button .icon-download { +background-image: var(--icon-download-808080); +} + +#deleteaccount:not([disabled]) .icon-delete, +button .icon-delete, +.button .icon-delete, +#removeavatar.icon-delete { +background-image: var(--icon-delete-ffffff); +} + +button.menuitem .icon-delete, +.app-navigation-entry-menu button .icon-delete { +background-image: var(--icon-delete-808080); +} + +.menu-icon svg path { +fill: var(--menu-icon-color); +} +.icon-recent-actors { +background-image: var(--icon-contacts-recent-actors-808080); +} + +.popover .action-input__input + .action-input__label { +background-color: var(--color-primary); +} +.popover .action-input__input + .action-input__label > .arrow-right-icon path { +fill: white; +} + +#content-vue.app-contacts .dots-horizontal-icon svg path { +fill: var(--icon-inactive-color); +} + +.mx-icon-calendar svg path { +fill: var(--icon-inactive-color); +} + +#content-vue.app-contacts +~ .popover +.action-input +.action-input__label::before { +content: unset; +} + +/* Photos App */ + +#content-vue.app-photos #app-navigation-vue .app-navigation-entry.active { +background-color: var(--color-main-background) !important; +} + +#content-vue.app-photos .icon-folder { +background-image: var(--icon-folder-007FFF); +} +#content-vue.app-photos .folder-name__icon { +opacity: 0.8; +} + +li.active .icon-yourphotos { +background-image: var(--icon-photos-app-007fff); +} +.icon-yourphotos { +background-image: var(--icon-photos-app-808080); +} + +li.active .icon-video { +background-image: var(--icon-video-007fff); +} + +.icon-video { +background-image: var(--icon-video-808080); +} + +li.active .icon-favorite { +background-image: var(--icon-star-outline-007fff); +} +.icon-favorite { +background-image: var(--icon-star-outline-808080); +} + +li.active .icon-tag { +background-image: var(--icon-tag-007fff); +} +.icon-tag, +.icon-systemtags { +background-image: var(--icon-tag-808080); +} + +li.active .icon-files-dark { +background-image: var(--icon-files-app-007fff); +} +li.active .icon-address { +background-image: var(--icon-address-007fff); +} + +.icon-address { +background-image: var(--icon-address-808080); +} + +li.active .icon-share { +background-image: var(--icon-share-007fff); +} + +#app-navigation-vue #app-settings #app-settings-header .settings-button, +#app-navigation #app-settings #app-settings-header .settings-button, +.icon-category-tools { +background-image: var(--icon-settings-808080); +} + +#header #header-menu-unified-search .unified-search__form-input { +color: var(--color-main-text); +} +#header #header-menu-unified-search .unified-search__form-input, +#header #header-menu-unified-search .unified-search__input-wrapper { +background-color: var(--color-main-background); +} + +.icon-delete, +button.action-button .icon-delete { +background-image: var(--icon-files-delete-808080); +} + +.menuitem:hover .icon-delete, +.menu-option:hover .icon-delete, +button.action-button:hover .icon-delete, +button.menuitem:hover .icon-delete, +.app-navigation-entry-menu button:hover .icon-delete, +#removeavatar.icon-delete:hover { +background-image: var(--icon-delete-e9322d); +} + +#appmenu li a span { +color: transparent; +} + +#appmenu li:hover a span { +color: var(--icon-inactive-color); +} + +body.theme--highcontrast #appmenu li:hover a span { +color: var(--color-main-text); +} + +#appmenu li:hover a svg { +color: var(--color-main-text); +transform: translateY(-7px); +} + +#appmenu:hover li svg, +#appmenu:hover li .icon-more, +#appmenu:hover li .icon-more-white, +#appmenu:hover li .icon-loading-small, +#appmenu:hover li .icon-loading-small-dark { +transform: none; +} + +/* Settings app */ + +#pass2 + input[name="newpassword-clone"] { +width: 100%; +} + +/* Personal Info */ + +#selectavatar.icon-folder { +background-image: var(--icon-folder-ffffff); +background-color: var(--color-primary); +color: white; +border-color: var(--color-primary); +} + +/* Mobile & Desktop */ + +.button.icon-clippy { +background-image: var(--icon-clippy-808080); +} + +/* Sharing */ + +button.social-facebook { +padding-left: 30px; +background-image: var(--icon-federatedfilesharing-social-facebook-000); +} + +button.social-twitter { +padding-left: 30px; +background-image: var(--icon-federatedfilesharing-social-twitter-000); +} + +button.social-diaspora { +padding-left: 30px; +background-image: var(--icon-federatedfilesharing-social-diaspora-000); +} + +/* Flow */ + +#workflowengine .actions__item.colored { +background-color: var(--color-primary) !important; +} +#workflowengine .actions__item.colored button { +background-color: white; +color: var(--color-primary); +} + +/* Calendar App*/ + +.datepicker-button-section button.button { +background-color: var(--color-main-background); +color: var(--color-main-text); +border: none; +max-width: 100px; +margin: auto; +} +.mx-datepicker .mx-calendar td { +border: 0px; +} + +.icon-eye { +background-image: var(--icon-calendar-eye-808080); +} + +.icon-briefcase { +background-image: var(--icon-calendar-briefcase-808080); +} + +.icon-color-picker { +background-image: var(--icon-calendar-color-picker-808080); +} +.icon-menu { +background-image: var(--icon-menu-808080); +} +.mx-datepicker .mx-input-wrapper { +background-color: var(--input-background-color); +} + +.mx-datepicker-main .mx-datepicker-footer .mx-btn:hover, +.mx-datepicker-main .mx-datepicker-footer .mx-btn:focus { +background-color: var(--color-primary); +color: white; +} + +.mx-datepicker .mx-input { +border: none; +margin-top: 0px; +margin-bottom: 0px; +} + +.datepicker-button-section.icon-leftarrow { +background-image: var(--icon-arrow-left-808080); +} + +.datepicker-button-section.icon-rightarrow { +background-image: var(--icon-arrow-right-808080); +} + +.button.datepicker-button-section__next, +.button.datepicker-button-section__previous { +border: none; +margin: auto; +} + +.new-event-today-view-section .button { +border-radius: 8px; +} + +.icon-new-calendar { +background-image: var(--icon-calendar-calendar-808080); +} + +.icon-new-calendar-with-task-list { +background-image: var(--icon-calendar-new-calendar-with-task-list-808080); +} + +.icon-public { +background-image: var(--icon-public-808080); +} + +#content-vue.app-calendar #app-navigation-vue .action-item.icon-share, +#content-vue.app-calendar #app-navigation-vue .action-item.icon-shared, +#content-vue.app-contacts #addressbook-list .icon-shared { +background-size: 12px; +} +#content-vue.app-calendar .fc-scrollgrid { +padding-top: 14px; +} + +#content-vue.app-calendar .fc-dayGridMonth-view table { +font-size: 1em; +} + +.icon-view-week { +background-image: var(--icon-calendar-view-week-808080); +} + +.icon-view-day { +background-image: var(--icon-calendar-view-day-808080); +} + +.icon-view-module { +background-image: var(--icon-calendar-view-module-808080); +} + +.icon-view-list { +background-image: var(--icon-calendar-view-list-808080); +} + +#content-vue.app-calendar .app-sidebar-tabs__tab a.active { +color: var(--color-text-light); +} + +/* Notes App*/ + +#content-vue.app-notes li.app-navigation-entry.active, +#content-vue.app-talk li.acli_wrapper.active { +background-color: var(--color-background-hover) !important; +} +#content-vue.app-notes .welcome-content .icon-files-dark { +background-size: 18px; +} + +#content-vue.app-notes button.icon-confirm::before, +#content.app-dashboard ~ .popover .action-input__form .action-input__label::before { +content: var(--icon-confirm-fff); +} + +#content-vue.app-notes .welcome-content .icon-phone { +background-size: 11px; +} + +#content-vue.app-notes +#app-settings__header +.settings-button__icon +.material-design-icon__svg, +#content-vue.app-calendar +#app-settings +.settings-button__icon +.material-design-icon__svg, +#content-vue.app-calendar +~ .popover +div[class^="property-"] +.material-design-icon__svg, +#content-vue.app-calendar div[class^="property-"] .material-design-icon__svg, +#content-vue.app-calendar +.app-sidebar +.app-sidebar__close +.material-design-icon__svg, +#content-vue.app-calendar .app-sidebar-tabs__tab a { +color: var(--icon-inactive-color); +} + +.CodeMirror .CodeMirror-line::selection, +.CodeMirror .CodeMirror-line > span::selection, +.CodeMirror .CodeMirror-line > span > span::selection { +background: var(--color-primary); +} +input[type="text"] + .icon-confirm, +input[type="password"] + .icon-confirm, +input[type="email"] + .icon-confirm { +background-color: var(--color-primary) !important; +background-image: var(--icon-confirm-fff) !important; +background-repeat: no-repeat !important; +background-position: center !important; +} + +input[type="text"] + .icon-confirm::before, +input[type="password"] + .icon-confirm::before, +input[type="email"] + .icon-confirm::before { +content: unset !important; +} + +input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, +input[type="password"]:not(:active):not(:hover):not(:focus) ++ .icon-confirm:active, +input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, +input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, +input[type="password"]:not(:active):not(:hover):not(:focus) ++ .icon-confirm:hover, +input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, +input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus, +input[type="password"]:not(:active):not(:hover):not(:focus) ++ .icon-confirm:focus, +input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus { +border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; +border-left-color: transparent !important; +} + +#app-sidebar-vue .note-category .category input.icon-confirm:hover { +border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; +} +#app-sidebar-vue.app-sidebar +.app-sidebar-header__desc +.app-sidebar-header__menu { +background-color: var(--color-main-background); +} + +#content.app-settings +.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, +#content.app-files +.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, +#header +.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, +#content-vue.app-bookmarks +.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, +#content-vue.app-photos +.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, +#content-vue.app-talk +.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before{ +content: var(--icon-more-808080); +font-size: unset; +font-weight: unset; +font-style: unset; +font-family: unset; +line-height: unset; +} + +#content-vue.app-bookmarks +.icon.action-item__menutoggle--primary.action-item__menutoggle--default-icon::before { +content: var(--icon-more-fff); +} + +#note-container .CodeMirror-code[contenteditable="true"]:hover, +#note-container .CodeMirror-code[contenteditable="true"]:focus, +#note-container .CodeMirror-code[contenteditable="true"]:active { +background-color: var(--color-main-background) !important; +} +/* Tasks app*/ + +.action-item:not(.priority--high) .material-design-icon, +#app-settings .collection .material-design-icon, +.material-design-icon.emoticon-outline-icon { +color: var(--icon-inactive-color); +} + +.action.active .material-design-icon.delete-icon, +.action-item:hover .material-design-icon.delete-icon { +color: var(--color-delete); +} + +#content-vue.app-tasks .app-sidebar-tabs .property__item--clearable { +color: var(--icon-active-color) !important; +} + +#content-vue.app-tasks .app-sidebar-tabs .multiselect-picker-option.active { +color: var(--icon-active-color); +} +/* Settings Apps categories icons */ + +.icon-category-app-bundles { +background-image: var(--icon-bundles-808080); +} +.icon-category-dashboard { +background-image: var(--icon-dashboard-dashboard-808080); +} +.icon-category-customization { +background-image: var(--icon-customization-808080); +} +.icon-category-games { +background-image: var(--icon-games-808080); +} +.icon-category-integration { +background-image: var(--icon-integration-808080); +} +.icon-category-monitoring { +background-image: var(--icon-monitoring-808080); +} +.icon-category-multimedia { +background-image: var(--icon-multimedia-808080); +} +.icon-category-office { +background-image: var(--icon-office-808080); +} +.icon-category-organization { +background-image: var(--icon-organization-808080); +} +.icon-category-search { +background-image: var(--icon-search-808080); +} + +.icon-category-workflow { +background-image: var(--icon-workflow-808080); +} + +/* Bookmarks app */ + +.popover .action-button__icon.icon-link { +background-image: var(--icon-public-808080); +} + +.controls svg path, +.material-design-icon.earth-icon svg path { +fill: var(--icon-inactive-color); +} + +.app-navigation-entry-icon .material-design-icon, +.action .material-design-icon { +color: var(--icon-inactive-color); +} + +.app-navigation-entry.active .app-navigation-entry-icon .material-design-icon, +.action.active .material-design-icon, +.action.selected .material-design-icon { +color: var(--icon-active-color); +} + +.app-navigation-entry +.app-navigation-entry__inline-input-container +form +button.icon-confirm::before { +content: unset; +} +.app-navigation-entry.active .icon-home { +background-image: var(--icon-home-007fff); +} + +#content-vue.app-bookmarks .app-navigation-entry-icon svg path { +fill: var(--icon-inactive-color); +} +#content-vue.app-bookmarks .app-navigation-entry.active svg path { +fill: var(--icon-active-color); +} + +/* News App */ + +#content-vue.app-bookmarks .empty-content { +text-align: center; +} + +#app-navigation .icon-unpinned { +background-image: var(--icon-news-unpinned-808080); +} + +#app-navigation .icon-pinned { +background-image: var(--icon-news-pinned-808080); +} +#app-navigation .icon-full-text-disabled { +background-image: var(--icon-news-nonfulltext-808080); +} +#app-navigation .icon-full-text-enabled { +background-image: var(--icon-news-fulltext-808080); +} + +/* Passwords App */ + +.searchbox .icon-search-force-white { +background-image: var(--icon-search-000); +} + +.searchbox { +opacity: 1 !important; +} + +#content.app-passwords #app-navigation .icon.fa::before { +content: unset; +} + +/* Talk App */ + +#content-vue.app-talk .acli_wrapper .acli.active { +background-color: transparent; +} + +#content-vue.app-talk #app-sidebar .username-form button.icon-rename, button.edit-output-dir span.icon-rename { +background-image: var(--icon-rename-000); +} + +/* Google integration */ + +#google_prefs #google-content button.google-oauth { +background-color: var(--color-primary); +} + +#google-import-contacts .icon-contacts-dark { +background-image: var(--icon-contacts-000); +} + +#google-calendars button .icon-calendar-dark { +background-image: var(--icon-calendar-000); +} + +#google-import-files .icon-files-dark { +background-image: var(--icon-files-000); +} + +#google-import-photos .icon-picture { +background-image: var(--icon-picture-000); +} + +/* remove opacity */ +button.edit-output-dir span.icon-rename, #google-rm-cred .icon-close, #google-import-photos .icon-picture, #google-import-contacts .icon-contacts-dark, #google-calendars button .icon-calendar-dark, #google-import-files .icon-files-dark { +opacity: 1; +} +/** */ +#header .header-right .magnify-icon > svg { +display: none; +} +.new-icons .color-icons{ + background-image: url("../img/app-icons/other.svg"); + width: 100% ; + height: 80px; + background-position: 50%; + background-repeat: no-repeat; + background-size: 60px; +} +.new-icons .drive , .new-icons .files {background-image: url("../img/app-icons/Drive.svg");} +.new-icons .activity {background-image: url("../img/app-icons/Activity.svg");} +.new-icons .bookmarks {background-image: url("../img/app-icons/Bookmark.svg");} +.new-icons .calendar {background-image: url("../img/app-icons/Calendar.svg");} +.new-icons .carnet {background-image: url("../img/app-icons/Carnet.svg");} +.new-icons .contacts {background-image: url("../img/app-icons/Contacts.svg");} +.new-icons .deck {background-image: url("../img/app-icons/Deck.svg");} +.new-icons .docs {background-image: url("../img/app-icons/Docs.svg");} +.new-icons .email,.new-icons .rainloop {background-image: url("../img/app-icons/E-mail.svg");} +.new-icons .gitlab {background-image: url("../img/app-icons/Gitlab.svg");} +.new-icons .news {background-image: url("../img/app-icons/News.svg");} +.new-icons .notes {background-image: url("../img/app-icons/Notes.svg");} +.new-icons .presentation {background-image: url("../img/app-icons/Presentation.svg");} +.new-icons .spreadsheet {background-image: url("../img/app-icons/Spreadsheet.svg");} +.new-icons .tasks {background-image: url("../img/app-icons/Tasks.svg");} +.new-icons .photos {background-image: url("../img/app-icons/Gallery.svg");} +.new-icons .e-user-support-center {background-image: url("../img/app-icons/Support.svg");} +.new-icons .passwords {background-image: url("../img/app-icons/Password.svg");} +.new-icons .onlyoffice_docx {background-image: url("../img/app-icons/Docs.svg");} +.new-icons .onlyoffice_xlsx {background-image: url("../img/app-icons/Spreadsheet.svg");} +.new-icons .onlyoffice_pptx {background-image: url("../img/app-icons/Presentation.svg");} + +#appmenu li:hover a, #appmenu li a:focus { +font-size: 12px; +font-family: 'Roboto'; +letter-spacing: 1px; +} +#filestable thead{background-color: white !important ;} +#recommendations{height: 100px !important;} +.recommendation{border: 1px solid #E6E8E9;padding: 10px !important;margin-bottom: 5px;border-radius: 6px !important;} +progress{border-radius: 10px 10px !important;height: 12px !important;} +#appmenu li a:focus .icon-more, #appmenu li a:focus .icon-more-white {transform: none !important;} +#more-apps:hover span, #more-apps:focus span, #more-apps a:focus span{display: none !important;} + +button#quotaincreasebutton { + margin-top: 15px !important; +} +@media only screen and (max-width: 640px) { + .new-icons .color-icons { + height: 50px; + background-size: 40px; + } + #launcher-menu { + width: 300px !important; + left: 10% !important; + } +} +@media only screen and (max-width: 640px) { + #launcher-menu { + left: 5% !important; + } +} .text-color-active { - color: var(--icon-active-color); + color: var(--icon-active-color); } .margin-top-10{ - margin-top: 10px; +margin-top: 10px; } -- GitLab From cf0b68cd8026d3d93237190332826227eb9512a8 Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Fri, 21 Oct 2022 20:10:14 +0530 Subject: [PATCH 4/6] fix formatting --- core/css/server.css | 1162 +++++++++++++++++++++++-------------------- 1 file changed, 618 insertions(+), 544 deletions(-) diff --git a/core/css/server.css b/core/css/server.css index 6ff67750..8e9f7dac 100644 --- a/core/css/server.css +++ b/core/css/server.css @@ -15,60 +15,60 @@ * You should have received a copy of the GNU Affero General Public License, version 3, * along with this program. If not, see */ - @font-face { - font-family: 'Roboto'; - src: url('../webfonts/Roboto-Regular.woff2') format('woff2'), - url('../webfonts/Roboto-Regular.woff') format('woff'); +@font-face { + font-family: "Roboto"; + src: url("../webfonts/Roboto-Regular.woff2") format("woff2"), + url("../webfonts/Roboto-Regular.woff") format("woff"); /* font-weight: 600; */ /* font-style: normal; */ font-display: swap; letter-spacing: 1px; } -*{ - font-family: 'Roboto'; +* { + font-family: "Roboto"; } :root { ---color-primary: #007fff; ---color-primary-element: #007fff; ---color-secondary-element: white; ---border-color-secondary-element: #007fff; ---color-primary-element-light: #007fff; ---color-error: #fb3845; ---color-delete: #e9322d; ---color-success: #3ad975; ---color-main-background: #ffffff; ---color-main-background-translucent: #f2f2f2; ---color-main-text: black; ---color-background-hover: white; ---color-text-maxcontrast: black; ---color-border-dark: #e6e6e6; ---color-border: #ebebeb; ---icon-settings-dark-000: #000000; ---icon-inactive-color: #808080; ---icon-active-color: #007fff; ---input-background-color: white; ---menu-icon-color: #222; ---color-dashboard-panels: #f2f2f2; ---color-dashboard-background-plain: #d2d2d2; ---color-sharing-icon-background: #767676; + --color-primary: #007fff; + --color-primary-element: #007fff; + --color-secondary-element: white; + --border-color-secondary-element: #007fff; + --color-primary-element-light: #007fff; + --color-error: #fb3845; + --color-delete: #e9322d; + --color-success: #3ad975; + --color-main-background: #ffffff; + --color-main-background-translucent: #f2f2f2; + --color-main-text: black; + --color-background-hover: white; + --color-text-maxcontrast: black; + --color-border-dark: #e6e6e6; + --color-border: #ebebeb; + --icon-settings-dark-000: #000000; + --icon-inactive-color: #808080; + --icon-active-color: #007fff; + --input-background-color: white; + --menu-icon-color: #222; + --color-dashboard-panels: #f2f2f2; + --color-dashboard-background-plain: #d2d2d2; + --color-sharing-icon-background: #767676; } /* Force a few variables to right values for dark theme */ body.theme--dark { ---input-background-color: #181818; ---icon-notifications-notifications-000000: url("/svg/notifications/notifications?color=000"); ---icon-notifications-notifications-new-000000: url("/svg/notifications/notifications-new?color=000"); ---icon-search-000: url("/svg/core/actions/search?color=000"); + --input-background-color: #181818; + --icon-notifications-notifications-000000: url("/svg/notifications/notifications?color=000"); + --icon-notifications-notifications-new-000000: url("/svg/notifications/notifications-new?color=000"); + --icon-search-000: url("/svg/core/actions/search?color=000"); } body.theme--highcontrast { ---icon-inactive-color: black; + --icon-inactive-color: black; } #body-user #header, #body-settings #header, #body-public #header { -background-color: white !important; + background-color: white !important; } button:not(:disabled):hover, @@ -94,7 +94,7 @@ input[type="reset"]:hover, button.import-contact__button-main:hover, button#notes_new_note:hover, #oc-dialog-filepicker-content .actions.creatable .icon.icon-add:hover { -opacity: 0.8; + opacity: 0.8; } /* primary action button, use sparingly */ @@ -125,9 +125,9 @@ button#notes_new_note, input[type="button"], input[type="submit"], input[type="reset"] { -background-color: var(--color-primary); -color: white; -border-color: var(--color-primary); + background-color: var(--color-primary); + color: white; + border-color: var(--color-primary); } input.primary:not(:disabled):hover, @@ -136,7 +136,7 @@ button.primary:not(:disabled):hover, button.primary:not(:disabled):focus, a.primary:not(:disabled):hover, a.primary:not(:disabled):focus { -background-image: none; + background-image: none; } /* For buttons that are not primary or submit/reset/button inputs that are not primary */ @@ -149,15 +149,15 @@ button.primary + button:not(.primary):active, .oc-dialog-buttonrow.twobuttons button:not(.primary), .oc-dialog-buttonrow.twobuttons button:not(.primary):active, .status-buttons .status-buttons__select { -background-color: var(--color-secondary-element); -color: var(--color-primary); -border-color: var(--border-color-secondary-element); + background-color: var(--color-secondary-element); + color: var(--color-primary); + border-color: var(--border-color-secondary-element); } input[type="checkbox"].checkbox + label::before, input[type="radio"].checkbox + label::before { -border-color: var(--icon-inactive-color); -background-color: white; + border-color: var(--icon-inactive-color); + background-color: white; } textarea:not(:disabled), @@ -167,7 +167,7 @@ textarea:not(:disabled):hover, div[contenteditable="true"]:not(:disabled):hover, textarea:not(:disabled):focus, div[contenteditable="true"]:not(:disabled):focus { -background-color: var(--input-background-color) !important; + background-color: var(--input-background-color) !important; } select, @@ -177,30 +177,30 @@ input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type=" #content-vue.app-tasks .task-body__checkbox label.reactive.no-nav::before, #content.app-files #commentsTabView .newCommentForm .message, .multiselect -.multiselect__content-wrapper -.multiselect__content -li -> span.multiselect__option, + .multiselect__content-wrapper + .multiselect__content + li + > span.multiselect__option, div.select2-container-multi .select2-choices, div.select2-container-multi.select2-container-active .select2-choices { -background-color: var(--input-background-color); + background-color: var(--input-background-color); } #settings #expanddiv, #header .header-right > div > .notification-container.menu { -background-color: var(--color-main-background); + background-color: var(--color-main-background); } #header .header-appname { -color: var(--color-main-text); + color: var(--color-main-text); } #settings #expanddiv li a.active { -background-color: var(--color-background-hover); + background-color: var(--color-background-hover); } body.theme--dark #header .header-right > div > .notification-container.menu, body.theme--dark #settings #expanddiv { -background-color: var(--color-main-background); + background-color: var(--color-main-background); } .multiselect .multiselect__tags input.multiselect__single, .multiselect .multiselect__tags span.multiselect__single, @@ -209,54 +209,54 @@ background-color: var(--color-main-background); .multiselect .multiselect__tags .multiselect__tags-wrap, .multiselect .multiselect__input, .multiselect -.multiselect__content-wrapper -.multiselect__content -li.multiselect__element, + .multiselect__content-wrapper + .multiselect__content + li.multiselect__element, .multiselect -.multiselect__content-wrapper -.multiselect__content -li.multiselect__element -.multiselect__option, + .multiselect__content-wrapper + .multiselect__content + li.multiselect__element + .multiselect__option, #content-vue.app-contacts -.property.property--without-actions.property--last.property-masonry:not(.property--addressbooks):not(.property--groups) -.multiselect -.multiselect__tags -.multiselect__input, + .property.property--without-actions.property--last.property-masonry:not(.property--addressbooks):not(.property--groups) + .multiselect + .multiselect__tags + .multiselect__input, #content-vue.app-contacts -.multiselect -.multiselect__tags -input.multiselect__input, + .multiselect + .multiselect__tags + input.multiselect__input, #content-vue.app-contacts -.multiselect -> .multiselect__tags -> span.multiselect__single, + .multiselect + > .multiselect__tags + > span.multiselect__single, #content.app-files #commentsTabView .newCommentForm .message:hover, #app-dashboard .footer a:hover, #app-content-systemtagsfilter .select2-container ul { -background-color: var(--input-background-color) !important; + background-color: var(--input-background-color) !important; } /* use logos from theme */ #header .logo, #firstrunwizard .logo { -background-image: url("../img/logo@2x.svg"); -width: 256px; -height: 128px; + background-image: url("../img/logo@2x.svg"); + width: 256px; + height: 128px; } #header .logo-icon { -width: 130px; -height: 40px; -top: 5px; -bottom: 0px; -border-radius: 22px; + width: 130px; + height: 40px; + top: 5px; + bottom: 0px; + border-radius: 22px; } #header #nextcloud { -padding-left: 150px; + padding-left: 150px; } #header .notifications .svg { -height: 16px; -width: 16px; + height: 16px; + width: 16px; } /* @@ -264,11 +264,11 @@ For the overflow in search filter; It doesn't use specific ids so gave the rule a lot of specificity */ .popover > .popover__wrapper .open ul li p { -white-space: normal; + white-space: normal; } #unified-search #header-menu-unified-search .header-menu__carret { -right: 125px; + right: 125px; } /* App Navigation rules */ @@ -280,133 +280,133 @@ right: 125px; #app-navigation:not(.vue) > ul > li a:active > a, #app-navigation:not(.vue) > ul > li a.selected > a, #app-navigation:not(.vue) > ul > li a.active > a { -background-color: var(--color-main-background); + background-color: var(--color-main-background); } li.app-navigation-entry, .conversations .acli_wrapper .acli { -background-clip: content-box; + background-clip: content-box; } li.app-navigation-entry.active { -background-color: var(--color-main-background) !important; + background-color: var(--color-main-background) !important; } li.app-navigation-entry:not(.active):hover, #content.app-deck li.app-navigation-entry.active { -background-color: var(--color-background-hover) !important; + background-color: var(--color-background-hover) !important; } li.app-navigation-entry.app-navigation-entry--collapsible:hover { -background-color: var(--color-main-background) !important; + background-color: var(--color-main-background) !important; } li.app-navigation-entry.app-navigation-entry--collapsible > a:hover, #content.app-passwords #app-navigation .active { -background-color: var(--color-background-hover); + background-color: var(--color-background-hover); } /* CSS TWEAKS TAKEN FROM THEMING APP (disabled now) */ .nc-theming-main-background { -background-color: #999999; + background-color: #999999; } .nc-theming-main-text { -color: #fff; + color: #fff; } .nc-theming-contrast { -color: #fff; + color: #fff; } #appmenu:not(.inverted) svg { -filter: none; + filter: none; } #appmenu.inverted svg { -filter: invert(1); + filter: invert(1); } .icon-folder, .icon-filetype-folder { -background-image: var(--icon-folder-007FFF); + background-image: var(--icon-folder-007FFF); } .icon-filetype-text { -background-image: var(--icon-text-007fff); + background-image: var(--icon-text-007fff); } .icon-filetype-folder-drag-accept { -background-image: var(--icon-folder-drag-accept-007fff) !important; + background-image: var(--icon-folder-drag-accept-007fff) !important; } #header .logo { -background-image: url("../img/logo@2x.svg"); + background-image: url("../img/logo@2x.svg"); } #body-user #header, #body-settings #header, #body-public #header { -color: var(--color-main-text); -background-image: none; + color: var(--color-main-text); + background-image: none; } #body-user.dark--theme, #body-settings.dark--theme { -color: white !important; + color: white !important; } #header .menu, #header #launcher-menu, #header .header--menu { -opacity: 1; + opacity: 1; } #appmenu li span { -color: var(--color-main-text); + color: var(--color-main-text); } #header .logo { -background-size: auto; + background-size: auto; } input.primary, #alternative-logins li a { -background-color: #999999; -border: 1px solid #fff; -color: #fff; + background-color: #999999; + border: 1px solid #fff; + color: #fff; } footer { -height: 92px; + height: 92px; } .notifications-button.hasNotifications { -opacity: 0.6 !important; + opacity: 0.6 !important; } .notifications-button.hasNotifications:hover, .notifications-button.hasNotifications:focus { -opacity: 1 !important; + opacity: 1 !important; } #header .notification-wrapper .dismiss-all .icon.icon-close { -margin-top: 4px; + margin-top: 4px; } #content #app-navigation, #content.app-news #app-navigation button { -color: var(--color-main-text); -border-right: 1px solid var(--color-border); + color: var(--color-main-text); + border-right: 1px solid var(--color-border); } .icon-home, #oc-dialog-filepicker-content .dirtree div:first-child a { -background-image: var(--icon-home-808080); + background-image: var(--icon-home-808080); } #controls .icon-home, #oc-dialog-filepicker-content .dirtree div:first-child a { -background-size: 20px; + background-size: 20px; } .icon-mail { -background-image: var(--icon-mail-808080); + background-image: var(--icon-mail-808080); } .icon-error { -background-image: var(--icon-error-808080); + background-image: var(--icon-error-808080); } .icon-details { -background-image: var(--icon-details-808080); + background-image: var(--icon-details-808080); } .icon-add, @@ -415,479 +415,480 @@ button.action-item__menutoggle.icon-add, #content.app-news .add-new button.icon-add, .who-has-access .action-item.icon-add.addAdditionalAdmin, #content-vue.app-tasks -#app-navigation-vue -.app-navigation-entry-icon.sprt-add::before { -background-image: var(--icon-add-808080); + #app-navigation-vue + .app-navigation-entry-icon.sprt-add::before { + background-image: var(--icon-add-808080); } .notification-container .emptycontent .icon-notifications-dark { -background-image: var(--icon-notifications-notifications-808080); -background-size: 40px; + background-image: var(--icon-notifications-notifications-808080); + background-size: 40px; } .icon-rename, .who-has-access .action-item--single.action-item.icon-rename, .where-is-my-data .action-item--single.action-item.icon-rename { -background-image: var(--icon-rename-808080); + background-image: var(--icon-rename-808080); } .icon-download { -background-image: var(--icon-download-808080); + background-image: var(--icon-download-808080); } .icon-template-add { -background-image: var(--icon-template-add-808080); + background-image: var(--icon-template-add-808080); } .icon-tasks, .panel--header .icon-tasks, .modal__content .icon-tasks { -background-image: var(--icon-tasks-tasks-808080); + background-image: var(--icon-tasks-tasks-808080); } #tasks_panel .empty-content .icon-tasks { -background-image: var(--icon-tasks-tasks-808080) !important; + background-image: var(--icon-tasks-tasks-808080) !important; } .icon-checkmark { -background-image: var(--icon-checkmark-808080); + background-image: var(--icon-checkmark-808080); } .icon-group { -background-image: var(--icon-group-808080); + background-image: var(--icon-group-808080); } .icon-timezone { -background-image: var(--icon-timezone-808080); + background-image: var(--icon-timezone-808080); } .icon-edit { -background-image: var(--icon-edit-808080); + background-image: var(--icon-edit-808080); } .icon-reminder { -background-image: var(--icon-notifications-notifications-808080); + background-image: var(--icon-notifications-notifications-808080); } .icon-gravatar { -background-image: var(--icon-contacts-gravatar-808080); + background-image: var(--icon-contacts-gravatar-808080); } #content-vue.app-calendar .app-sidebar-tabs__tab-icon.icon-reminder { -background-size: 13px; + background-size: 13px; } .icon-clippy { -background-image: var(--icon-clippy-808080); + background-image: var(--icon-clippy-808080); } .icon-confirm { -background-image: var(--icon-confirm-808080); + background-image: var(--icon-confirm-808080); } .icon-user-admin { -background-image: var(--icon-user-admin-808080); + background-image: var(--icon-user-admin-808080); } .icon-disabled-users { -background-image: var(--icon-disabled-users-808080); + background-image: var(--icon-disabled-users-808080); } .icon-notes, .icon-notes-trans { -background-image: var(--icon-notes-notes-808080); + background-image: var(--icon-notes-notes-808080); } .icon-projects { -background-image: var(--icon-projects-808080); + background-image: var(--icon-projects-808080); } .icon-comment { -background-image: var(--icon-comment-808080); + background-image: var(--icon-comment-808080); } .icon-activity { -background-image: var(--icon-activity-activity-808080); + background-image: var(--icon-activity-activity-808080); } .icon-link { -background-image: var(--icon-public-808080); + background-image: var(--icon-public-808080); } button .icon-link { -background-image: var(--icon-public-ffffff); + background-image: var(--icon-public-ffffff); } .icon-recent { -background-image: var(--icon-files-recent-808080); + background-image: var(--icon-files-recent-808080); } .icon-more, .icon-more-white { -background-image: var(--icon-more-808080); + background-image: var(--icon-more-808080); } .avatar-shared.icon-more-white { -background-image: var(--icon-more-fff); + background-image: var(--icon-more-fff); } #collection-list .avatar .icon-projects { -background-image: var(--icon-projects-fff); + background-image: var(--icon-projects-fff); } #sharing-inherited-shares .sharing-entry .avatar-shared.icon-more-white, .sharing-entry.sharing-entry__internal .avatar-external.icon-external-white, #collection-list .avatar { -background-color: var(--color-sharing-icon-background); + background-color: var(--color-sharing-icon-background); } .icon-files, .icon-category-files, .icon-emptyfolder { -background-image: var(--icon-files-app-808080); + background-image: var(--icon-files-app-808080); } #header .icon-notifications, #header .icon-notifications-new { -background-size: 17px; + background-size: 17px; } .icon-notifications-new { -background-image: var(--icon-notifications-notifications-new-000000); + background-image: var(--icon-notifications-notifications-new-000000); } .icon-notifications { -background-image: var(--icon-notifications-notifications-000000); + background-image: var(--icon-notifications-notifications-000000); } .icon-external, .icon-goto { -background-image: var(--icon-external-808080); + background-image: var(--icon-external-808080); } .action.icon-checkmark { -background-image: var(--icon-checkmark-ffffff); + background-image: var(--icon-checkmark-ffffff); } .icon-phone { -background-image: var(--icon-phone-808080); + background-image: var(--icon-phone-808080); } .icon-password, .icon-category-security { -background-image: var(--icon-password-808080); + background-image: var(--icon-password-808080); } .icon-link { -background-image: var(--icon-link-808080); + background-image: var(--icon-link-808080); } .icon-toggle-filelist { -background-image: var(--icon-toggle-filelist-808080); + background-image: var(--icon-toggle-filelist-808080); } button.icon-toggle-filelist { -background-color: var(--color-main-background); + background-color: var(--color-main-background); } .icon-toggle-pictures { -background-image: var(--icon-toggle-pictures-808080); + background-image: var(--icon-toggle-pictures-808080); } .button .icon-add, button .icon-add, button.icon-add, -#new-contact-button.icon-add,#cookbook_new_cookbook.icon-add, +#new-contact-button.icon-add, +#cookbook_new_cookbook.icon-add, #content-vue.app-notes #notes_new_note.icon-add, #oc-dialog-filepicker-content .actions.creatable .icon.icon-add, #content.app-news .add-new .icon-add.add-new-folder-primary { -background-image: var(--icon-add-ffffff); + background-image: var(--icon-add-ffffff); } .popover .action-button .action-button__icon.icon-add { -background-image: var(--icon-add-808080); + background-image: var(--icon-add-808080); } button > span[class^="icon-"], .button > span[class^="icon-"], button > span[class*=" icon-"], .button > span[class*=" icon-"] { -opacity: 1; + opacity: 1; } .icon-share, .icon-shared { -background-image: var(--icon-share-808080); + background-image: var(--icon-share-808080); } .icon-contacts-dark, .icon-contacts, .icon-category-social { -background-image: var(--icon-contacts-app-808080); + background-image: var(--icon-contacts-app-808080); } #contactsmenu .icon-contacts { -background-image: var(--icon-contacts-000); + background-image: var(--icon-contacts-000); } .icon-user, .icon-category-installed { -background-image: var(--icon-user-808080); + background-image: var(--icon-user-808080); } .icon-category-enabled { -background-image: var(--icon-checkmark-808080); + background-image: var(--icon-checkmark-808080); } .icon-star, .icon-star-dark, .icon-starred:hover { -background-image: var(--icon-star-808080); + background-image: var(--icon-star-808080); } .icon-starred, .icon-star:hover, .icon-star-dark:hover, #filestable .filename .favorite-mark .icon-starred { -background-image: var(--icon-star-FFCC00); + background-image: var(--icon-star-FFCC00); } .icon-close, #header-menu-unified-search .icon-close, .icon-category-disabled { -background-image: var(--icon-close-808080); + background-image: var(--icon-close-808080); } #header #searchbox { -color: var(--color-main-text); -border-color: var( - --icon-inactive-color -) !important; /* !important used in source so needed to override */ + color: var(--color-main-text); + border-color: var( + --icon-inactive-color + ) !important; /* !important used in source so needed to override */ } #app-navigation, #app-navigation-vue { -border-right: 2px solid var(--color-border); + border-right: 2px solid var(--color-border); } table th, table td { -border-bottom: 1px solid var(--color-border); + border-bottom: 1px solid var(--color-border); } .icon-files-dark { -background-image: var(--icon-files-app-808080); + background-image: var(--icon-files-app-808080); } .icon-fullscreen { -background-image: var(--icon-fullscreen-808080); + background-image: var(--icon-fullscreen-808080); } .icon-calendar-dark { -background-image: var(--icon-calendar-calendar-808080); + background-image: var(--icon-calendar-calendar-808080); } .icon-talk { -background-image: var(--icon-spreed-app-808080); + background-image: var(--icon-spreed-app-808080); } #app-navigation li a, #app-navigation:not(.vue) > ul > li > a, #app-navigation:not(.vue) > ul > li > ul > li > a { -opacity: 1; + opacity: 1; } /* Dashboard App */ #body-user[data-dashboard-background]:not(.theme--dark) -#app-dashboard -.statuses -button:hover, + #app-dashboard + .statuses + button:hover, #body-user[data-dashboard-background]:not(.theme--dark) .edit-panels:hover { -background-color: var(--color-background-hover) !important; + background-color: var(--color-background-hover) !important; } body.theme--highcontrast #app-dashboard .statuses button, body.theme--highcontrast #app-dashboard .edit-panels { -border: 1px solid var(--color-main-text); + border: 1px solid var(--color-main-text); } #body-user[data-dashboard-background]:not(.theme--dark) #app-dashboard .panel, #body-user[data-dashboard-background]:not(.theme--dark) -#app-dashboard -.statuses -button, + #app-dashboard + .statuses + button, #body-user[data-dashboard-background]:not(.theme--dark) -#app-dashboard -.footer -a { -background-color: var(--color-dashboard-panels); -/* opacity: 0.9; */ + #app-dashboard + .footer + a { + background-color: var(--color-dashboard-panels); + /* opacity: 0.9; */ } #body-user[data-dashboard-background]:not(.theme--dark) #header { -opacity: 0.95; + opacity: 0.95; } #body-user[data-dashboard-background].theme--highcontrast #header { -background-color: var(--color-main-background) !important; + background-color: var(--color-main-background) !important; } #app-dashboard .panel .panel--header > .icon-calendar-dark { -background-position: 14px 10px; + background-position: 14px 10px; } #app-dashboard .panel .panel--header > .icon-files-dark { -background-position: 14px 16px; + background-position: 14px 16px; } #app-dashboard .statuses button { -color: var(--color-main-text); + color: var(--color-main-text); } #content.app-dashboard #app-dashboard, body[data-dashboard-background]:not(.theme--dark) -.background-selector -.background.filepicker, + .background-selector + .background.filepicker, body[data-dashboard-background]:not(.theme--dark) -.background-selector -.background.default, + .background-selector + .background.default, body[data-dashboard-background]:not(.theme--dark) -.modal__content -.background-selector -.background.color { -background-color: var(--color-dashboard-background-plain); -color: var(--color-main-text); + .modal__content + .background-selector + .background.color { + background-color: var(--color-dashboard-background-plain); + color: var(--color-main-text); } body[data-dashboard-background="#0082c9"] #app-dashboard, body[data-dashboard-background="default"] #app-dashboard { -background-color: var(--color-dashboard-background-plain); + background-color: var(--color-dashboard-background-plain); } body[data-dashboard-background="default"] #app-dashboard { -background-image: none !important; + background-image: none !important; } body[data-dashboard-background="#0082c9"] #app-dashboard h2, body[data-dashboard-background="default"] #app-dashboard h2 { -color: var(--color-main-text); + color: var(--color-main-text); } /* Files App */ #filestable .thumbnail { -background-repeat: no-repeat; + background-repeat: no-repeat; } .breadcrumb .canDrop > a, #filestable tbody tr.canDrop, #filestable.view-grid:not(.hidden) -#fileList -tr:not(.hidden).selected -.thumbnail-wrapper, + #fileList + tr:not(.hidden).selected + .thumbnail-wrapper, #filestable.view-grid:not(.hidden) -#fileList -tr:not(.hidden).selected -.fileactions, + #fileList + tr:not(.hidden).selected + .fileactions, #filestable.view-grid:not(.hidden) -#fileList -tr:not(.hidden).selected -.nametext { -background-color: var(--color-primary-light); + #fileList + tr:not(.hidden).selected + .nametext { + background-color: var(--color-primary-light); } .actions .button.new:active { -background-color: var(--color-primary); + background-color: var(--color-primary); } #fileList td a a.action { -opacity: 0.6; + opacity: 0.6; } #fileList td a a.action:hover { -opacity: 0.8; + opacity: 0.8; } #content.app-files #filestable.view-grid thead tr, #content.app-files #filestable.view-grid thead th { -border-bottom: 0px; + border-bottom: 0px; } #content.app-files #controls .icon-shared { -background-size: 14px; + background-size: 14px; } #editor .menububble.is-active .menububble__button { -background-color: var(--color-primary); + background-color: var(--color-primary); } #editor .menububble.is-active .menububble__button:hover { -background-color: var(--color-background-hover); + background-color: var(--color-background-hover); } #editor .menububble__button:hover .menububble__buttontext { -color: var(--color-primary); + color: var(--color-primary); } #editor .menububble__button:hover .icon-link { -background-image: var(--icon-public-007fff); + background-image: var(--icon-public-007fff); } #editor .menububble__button:hover .icon-file { -background-image: var(--icon-text-007fff); + background-image: var(--icon-text-007fff); } #uploadprogressbar + button.icon-close, #google-drive button .icon-close, #google-photos button .icon-close { -background-image: var(--icon-close-fff); + background-image: var(--icon-close-fff); } #google-rm-cred .icon-close { -background-image: var(--icon-close-000); -opacity: 1; + background-image: var(--icon-close-000); + opacity: 1; } .breadcrumb div.crumb span.icon-shared, .breadcrumb div.crumb span.icon-public, .selectedActions a, #commentsTabView .comment .action { -opacity: 0.8; + opacity: 0.8; } #content.app-files #emptycontent .icon-share { -background-image: var(--icon-files-share-808080); + background-image: var(--icon-files-share-808080); } #content #app-content-files #controls { -background-color: var(--color-main-background); + background-color: var(--color-main-background); } #app-content-files button .icon-file, #editor .menububble__button .icon-file { -background-image: var(--icon-text-ffffff); + background-image: var(--icon-text-ffffff); } #editor .ProseMirror { -background-color: var(--color-main-background) !important; + background-color: var(--color-main-background) !important; } #fileList tr td.selection > .selectCheckBox + label::before, #oc-dialog-filepicker-content .actions.creatable .icon.icon-add { -opacity: 1; + opacity: 1; } #filestable .filesize, #filestable .date .modified.live-relative-timestamp { -color: var(--color-main-text) !important; + color: var(--color-main-text) !important; } .nav-icon-files { -background-image: var(--icon-files-app-808080); + background-image: var(--icon-files-app-808080); } .nav-icon-files.active { -background-image: var(--icon-files-app-007fff); + background-image: var(--icon-files-app-007fff); } .nav-icon-recent { -background-image: var(--icon-files-recent-808080); + background-image: var(--icon-files-recent-808080); } .nav-icon-recent.active { -background-image: var(--icon-files-recent-007fff); + background-image: var(--icon-files-recent-007fff); } .nav-icon-favorites { -background-image: var(--icon-star-outline-808080); + background-image: var(--icon-star-outline-808080); } .nav-icon-favorites.active { -background-image: var(--icon-star-outline-007fff); + background-image: var(--icon-star-outline-007fff); } .nav-icon-deletedshares { -background-image: var(--icon-files-unshare-808080); + background-image: var(--icon-files-unshare-808080); } .nav-icon-deletedshares.active { -background-image: var(--icon-files-unshare-007fff); + background-image: var(--icon-files-unshare-007fff); } .nav-icon-shareoverview, @@ -896,166 +897,166 @@ background-image: var(--icon-files-unshare-007fff); .nav-icon-pendingshares, #content.app-files .icon-share, #content.app-files .icon-shared { -background-image: var(--icon-files-share-808080); + background-image: var(--icon-files-share-808080); } .nav-icon-shareoverview.active, .nav-icon-sharingout.active, .nav-icon-sharingin.active, .nav-icon-pendingshares.active { -background-image: var(--icon-files-share-007fff); + background-image: var(--icon-files-share-007fff); } .nav-icon-sharinglinks { -background-image: var(--icon-public-808080); + background-image: var(--icon-public-808080); } .nav-icon-sharinglinks.active { -background-image: var(--icon-public-007fff); + background-image: var(--icon-public-007fff); } .nav-icon-trashbin { -background-image: var(--icon-files-delete-808080); + background-image: var(--icon-files-delete-808080); } .nav-icon-trashbin.active { -background-image: var(--icon-files-delete-007fff); + background-image: var(--icon-files-delete-007fff); } .nav-icon-systemtagsfilter { -background-image: var(--icon-tag-808080); + background-image: var(--icon-tag-808080); } .nav-icon-systemtagsfilter.active { -background-image: var(--icon-tag-007fff); + background-image: var(--icon-tag-007fff); } .icon-quota { -background-image: var(--icon-quota-808080); + background-image: var(--icon-quota-808080); } .app-sidebar-header__star.icon-star, .app-sidebar-header__star.icon-starred, .app-sidebar-header__star.icon-star:hover, .app-sidebar-header__star.icon-starred:hover, #view-toggle { -background-size: 16px; + background-size: 16px; } #collection-list .multiselect .multiselect__tags .multiselect__input { -background-color: transparent !important; + background-color: transparent !important; } #collection-list -.multiselect.multiselect--active -.multiselect__tags -.multiselect__input { -background-color: var(--input-background-color) !important; + .multiselect.multiselect--active + .multiselect__tags + .multiselect__input { + background-color: var(--input-background-color) !important; } #app-sidebar-vue #sharing .sharing-entry .avatar-external, #app-sidebar-vue #sharing .sharing-entry .avatar-shared { -background-color: var(--color-primary); + background-color: var(--color-primary); } #app-sidebar-vue #sharing .sharing-entry .avatar-shared.icon-more-white { -background-image: var(--icon-more-fff); + background-image: var(--icon-more-fff); } #app-sidebar-vue #sharing .sharing-entry .avatardiv.icon-public-white { -background-color: var(--color-primary) !important; + background-color: var(--color-primary) !important; } body.theme--highcontrast #header .header-right .magnify-icon { -background: var(--icon-search-000) no-repeat center; + background: var(--icon-search-000) no-repeat center; } #header .header-right .magnify-icon { -background: var(--icon-search-000) no-repeat center; -background-size: 15px; + background: var(--icon-search-000) no-repeat center; + background-size: 15px; } #content.app-files #filestable span, #content.app-files #filestable td { -color: var(--color-main-text) !important; + color: var(--color-main-text) !important; } /* Contacts App */ #content-vue.app-contacts -.multiselect.property__label -.multiselect__tags -span.multiselect__single, + .multiselect.property__label + .multiselect__tags + span.multiselect__single, #content-vue.app-contacts -.multiselect.property__label -.multiselect__tags -.multiselect__input { -background-color: var(--color-main-background) !important; + .multiselect.property__label + .multiselect__tags + .multiselect__input { + background-color: var(--color-main-background) !important; } #contacts-list { -margin-top: 44px; + margin-top: 44px; } li.app-navigation-entry.active .icon-user { -background-image: var(--icon-user-007fff); + background-image: var(--icon-user-007fff); } li.app-navigation-entry.active .icon-contacts-dark, li.app-navigation-entry.active .icon-group { -background-image: var(--icon-contacts-app-007fff); + background-image: var(--icon-contacts-app-007fff); } li.app-navigation-entry.active .icon-address-book { -background-image: var(--icon-contacts-address-book-007fff); + background-image: var(--icon-contacts-address-book-007fff); } li.app-navigation-entry.active .icon-recent-actors { -background-image: var(--icon-contacts-recent-actors-007fff); + background-image: var(--icon-contacts-recent-actors-007fff); } #content-vue.app-contacts .multiselect .multiselect__tags .multiselect__input, #content-vue.app-contacts -.multiselect -> .multiselect__tags -> .multiselect__single { -background-color: var(--color-main-background) !important; + .multiselect + > .multiselect__tags + > .multiselect__single { + background-color: var(--color-main-background) !important; } #content-vue.app-contacts ~ .popover .action.active, #content-vue.app-contacts ~ .popover .action.active .action-input:hover, #content-vue.app-contacts ~ .popover .action.active .action-input:focus-within { -opacity: 1; + opacity: 1; } #content-vue.app-contacts ~ .popover .action.active .action-input { -opacity: .7; + opacity: 0.7; } #content-vue.app-contacts .empty-content__icon { -height: 80px; + height: 80px; } #content-vue.app-contacts -#addressbook-list -.addressbook-shares -.multiselect__content { -background-color: var(--color-secondary-element); + #addressbook-list + .addressbook-shares + .multiselect__content { + background-color: var(--color-secondary-element); } #content-vue.app-contacts .empty-content__title { -text-align: center; + text-align: center; } #content-vue.app-contacts .app-content > .empty-content { -margin: 20vh; + margin: 20vh; } .icon-address-book { -background-image: var(--icon-contacts-address-book-808080); + background-image: var(--icon-contacts-address-book-808080); } #content-vue.app-contacts .app-navigation-caption__title { -color: var(--color-main-text); + color: var(--color-main-text); } #content-vue.app-contacts .contact-header__infos input { -background-color: var(--color-main-background); + background-color: var(--color-main-background); } .property .icon-contacts { -background-image: var(--icon-contacts-app-808080); + background-image: var(--icon-contacts-app-808080); } #content-vue.app-contacts .icon-phone { -background-image: var(--icon-contacts-phone-808080); + background-image: var(--icon-contacts-phone-808080); } button .icon-upload, @@ -1067,143 +1068,143 @@ button.primary .icon-upload, button.import-contact__button-main .icon-upload, .import-export button.icon-upload, .attachments-drag-zone button.icon-upload { -background-image: var(--icon-upload-000); + background-image: var(--icon-upload-000); } -#uploadavatarbutton.icon-upload{ -background-image: var(--icon-upload-ffffff); +#uploadavatarbutton.icon-upload { + background-image: var(--icon-upload-ffffff); } .action-button .icon-upload, .menuitem .icon-upload, -button.import-contact__button--local:disabled .import-contact__button-icon.icon-upload - { -background-image: var(--icon-upload-808080); +button.import-contact__button--local:disabled + .import-contact__button-icon.icon-upload { + background-image: var(--icon-upload-808080); } button .icon-download, .button .icon-download, .import-export .button.icon-download { -background-image: var(--icon-download-ffffff); + background-image: var(--icon-download-ffffff); } .action-button .icon-download { -background-image: var(--icon-download-808080); + background-image: var(--icon-download-808080); } #deleteaccount:not([disabled]) .icon-delete, button .icon-delete, .button .icon-delete, #removeavatar.icon-delete { -background-image: var(--icon-delete-ffffff); + background-image: var(--icon-delete-ffffff); } button.menuitem .icon-delete, .app-navigation-entry-menu button .icon-delete { -background-image: var(--icon-delete-808080); + background-image: var(--icon-delete-808080); } .menu-icon svg path { -fill: var(--menu-icon-color); + fill: var(--menu-icon-color); } .icon-recent-actors { -background-image: var(--icon-contacts-recent-actors-808080); + background-image: var(--icon-contacts-recent-actors-808080); } .popover .action-input__input + .action-input__label { -background-color: var(--color-primary); + background-color: var(--color-primary); } .popover .action-input__input + .action-input__label > .arrow-right-icon path { -fill: white; + fill: white; } #content-vue.app-contacts .dots-horizontal-icon svg path { -fill: var(--icon-inactive-color); + fill: var(--icon-inactive-color); } .mx-icon-calendar svg path { -fill: var(--icon-inactive-color); + fill: var(--icon-inactive-color); } #content-vue.app-contacts -~ .popover -.action-input -.action-input__label::before { -content: unset; + ~ .popover + .action-input + .action-input__label::before { + content: unset; } /* Photos App */ #content-vue.app-photos #app-navigation-vue .app-navigation-entry.active { -background-color: var(--color-main-background) !important; + background-color: var(--color-main-background) !important; } #content-vue.app-photos .icon-folder { -background-image: var(--icon-folder-007FFF); + background-image: var(--icon-folder-007FFF); } #content-vue.app-photos .folder-name__icon { -opacity: 0.8; + opacity: 0.8; } li.active .icon-yourphotos { -background-image: var(--icon-photos-app-007fff); + background-image: var(--icon-photos-app-007fff); } .icon-yourphotos { -background-image: var(--icon-photos-app-808080); + background-image: var(--icon-photos-app-808080); } li.active .icon-video { -background-image: var(--icon-video-007fff); + background-image: var(--icon-video-007fff); } .icon-video { -background-image: var(--icon-video-808080); + background-image: var(--icon-video-808080); } li.active .icon-favorite { -background-image: var(--icon-star-outline-007fff); + background-image: var(--icon-star-outline-007fff); } .icon-favorite { -background-image: var(--icon-star-outline-808080); + background-image: var(--icon-star-outline-808080); } li.active .icon-tag { -background-image: var(--icon-tag-007fff); + background-image: var(--icon-tag-007fff); } .icon-tag, .icon-systemtags { -background-image: var(--icon-tag-808080); + background-image: var(--icon-tag-808080); } li.active .icon-files-dark { -background-image: var(--icon-files-app-007fff); + background-image: var(--icon-files-app-007fff); } li.active .icon-address { -background-image: var(--icon-address-007fff); + background-image: var(--icon-address-007fff); } .icon-address { -background-image: var(--icon-address-808080); + background-image: var(--icon-address-808080); } li.active .icon-share { -background-image: var(--icon-share-007fff); + background-image: var(--icon-share-007fff); } #app-navigation-vue #app-settings #app-settings-header .settings-button, #app-navigation #app-settings #app-settings-header .settings-button, .icon-category-tools { -background-image: var(--icon-settings-808080); + background-image: var(--icon-settings-808080); } #header #header-menu-unified-search .unified-search__form-input { -color: var(--color-main-text); + color: var(--color-main-text); } #header #header-menu-unified-search .unified-search__form-input, #header #header-menu-unified-search .unified-search__input-wrapper { -background-color: var(--color-main-background); + background-color: var(--color-main-background); } .icon-delete, button.action-button .icon-delete { -background-image: var(--icon-files-delete-808080); + background-image: var(--icon-files-delete-808080); } .menuitem:hover .icon-delete, @@ -1212,24 +1213,24 @@ button.action-button:hover .icon-delete, button.menuitem:hover .icon-delete, .app-navigation-entry-menu button:hover .icon-delete, #removeavatar.icon-delete:hover { -background-image: var(--icon-delete-e9322d); + background-image: var(--icon-delete-e9322d); } #appmenu li a span { -color: transparent; + color: transparent; } #appmenu li:hover a span { -color: var(--icon-inactive-color); + color: var(--icon-inactive-color); } body.theme--highcontrast #appmenu li:hover a span { -color: var(--color-main-text); + color: var(--color-main-text); } #appmenu li:hover a svg { -color: var(--color-main-text); -transform: translateY(-7px); + color: var(--color-main-text); + transform: translateY(-7px); } #appmenu:hover li svg, @@ -1237,511 +1238,584 @@ transform: translateY(-7px); #appmenu:hover li .icon-more-white, #appmenu:hover li .icon-loading-small, #appmenu:hover li .icon-loading-small-dark { -transform: none; + transform: none; } /* Settings app */ #pass2 + input[name="newpassword-clone"] { -width: 100%; + width: 100%; } /* Personal Info */ #selectavatar.icon-folder { -background-image: var(--icon-folder-ffffff); -background-color: var(--color-primary); -color: white; -border-color: var(--color-primary); + background-image: var(--icon-folder-ffffff); + background-color: var(--color-primary); + color: white; + border-color: var(--color-primary); } /* Mobile & Desktop */ .button.icon-clippy { -background-image: var(--icon-clippy-808080); + background-image: var(--icon-clippy-808080); } /* Sharing */ button.social-facebook { -padding-left: 30px; -background-image: var(--icon-federatedfilesharing-social-facebook-000); + padding-left: 30px; + background-image: var(--icon-federatedfilesharing-social-facebook-000); } button.social-twitter { -padding-left: 30px; -background-image: var(--icon-federatedfilesharing-social-twitter-000); + padding-left: 30px; + background-image: var(--icon-federatedfilesharing-social-twitter-000); } button.social-diaspora { -padding-left: 30px; -background-image: var(--icon-federatedfilesharing-social-diaspora-000); + padding-left: 30px; + background-image: var(--icon-federatedfilesharing-social-diaspora-000); } /* Flow */ #workflowengine .actions__item.colored { -background-color: var(--color-primary) !important; + background-color: var(--color-primary) !important; } #workflowengine .actions__item.colored button { -background-color: white; -color: var(--color-primary); + background-color: white; + color: var(--color-primary); } /* Calendar App*/ .datepicker-button-section button.button { -background-color: var(--color-main-background); -color: var(--color-main-text); -border: none; -max-width: 100px; -margin: auto; + background-color: var(--color-main-background); + color: var(--color-main-text); + border: none; + max-width: 100px; + margin: auto; } .mx-datepicker .mx-calendar td { -border: 0px; + border: 0px; } .icon-eye { -background-image: var(--icon-calendar-eye-808080); + background-image: var(--icon-calendar-eye-808080); } .icon-briefcase { -background-image: var(--icon-calendar-briefcase-808080); + background-image: var(--icon-calendar-briefcase-808080); } .icon-color-picker { -background-image: var(--icon-calendar-color-picker-808080); + background-image: var(--icon-calendar-color-picker-808080); } .icon-menu { -background-image: var(--icon-menu-808080); + background-image: var(--icon-menu-808080); } .mx-datepicker .mx-input-wrapper { -background-color: var(--input-background-color); + background-color: var(--input-background-color); } .mx-datepicker-main .mx-datepicker-footer .mx-btn:hover, .mx-datepicker-main .mx-datepicker-footer .mx-btn:focus { -background-color: var(--color-primary); -color: white; + background-color: var(--color-primary); + color: white; } .mx-datepicker .mx-input { -border: none; -margin-top: 0px; -margin-bottom: 0px; + border: none; + margin-top: 0px; + margin-bottom: 0px; } .datepicker-button-section.icon-leftarrow { -background-image: var(--icon-arrow-left-808080); + background-image: var(--icon-arrow-left-808080); } .datepicker-button-section.icon-rightarrow { -background-image: var(--icon-arrow-right-808080); + background-image: var(--icon-arrow-right-808080); } .button.datepicker-button-section__next, .button.datepicker-button-section__previous { -border: none; -margin: auto; + border: none; + margin: auto; } .new-event-today-view-section .button { -border-radius: 8px; + border-radius: 8px; } .icon-new-calendar { -background-image: var(--icon-calendar-calendar-808080); + background-image: var(--icon-calendar-calendar-808080); } .icon-new-calendar-with-task-list { -background-image: var(--icon-calendar-new-calendar-with-task-list-808080); + background-image: var(--icon-calendar-new-calendar-with-task-list-808080); } .icon-public { -background-image: var(--icon-public-808080); + background-image: var(--icon-public-808080); } #content-vue.app-calendar #app-navigation-vue .action-item.icon-share, #content-vue.app-calendar #app-navigation-vue .action-item.icon-shared, #content-vue.app-contacts #addressbook-list .icon-shared { -background-size: 12px; + background-size: 12px; } #content-vue.app-calendar .fc-scrollgrid { -padding-top: 14px; + padding-top: 14px; } #content-vue.app-calendar .fc-dayGridMonth-view table { -font-size: 1em; + font-size: 1em; } .icon-view-week { -background-image: var(--icon-calendar-view-week-808080); + background-image: var(--icon-calendar-view-week-808080); } .icon-view-day { -background-image: var(--icon-calendar-view-day-808080); + background-image: var(--icon-calendar-view-day-808080); } .icon-view-module { -background-image: var(--icon-calendar-view-module-808080); + background-image: var(--icon-calendar-view-module-808080); } .icon-view-list { -background-image: var(--icon-calendar-view-list-808080); + background-image: var(--icon-calendar-view-list-808080); } #content-vue.app-calendar .app-sidebar-tabs__tab a.active { -color: var(--color-text-light); + color: var(--color-text-light); } /* Notes App*/ #content-vue.app-notes li.app-navigation-entry.active, #content-vue.app-talk li.acli_wrapper.active { -background-color: var(--color-background-hover) !important; + background-color: var(--color-background-hover) !important; } #content-vue.app-notes .welcome-content .icon-files-dark { -background-size: 18px; + background-size: 18px; } #content-vue.app-notes button.icon-confirm::before, -#content.app-dashboard ~ .popover .action-input__form .action-input__label::before { -content: var(--icon-confirm-fff); +#content.app-dashboard + ~ .popover + .action-input__form + .action-input__label::before { + content: var(--icon-confirm-fff); } #content-vue.app-notes .welcome-content .icon-phone { -background-size: 11px; + background-size: 11px; } #content-vue.app-notes -#app-settings__header -.settings-button__icon -.material-design-icon__svg, + #app-settings__header + .settings-button__icon + .material-design-icon__svg, #content-vue.app-calendar -#app-settings -.settings-button__icon -.material-design-icon__svg, + #app-settings + .settings-button__icon + .material-design-icon__svg, #content-vue.app-calendar -~ .popover -div[class^="property-"] -.material-design-icon__svg, + ~ .popover + div[class^="property-"] + .material-design-icon__svg, #content-vue.app-calendar div[class^="property-"] .material-design-icon__svg, #content-vue.app-calendar -.app-sidebar -.app-sidebar__close -.material-design-icon__svg, + .app-sidebar + .app-sidebar__close + .material-design-icon__svg, #content-vue.app-calendar .app-sidebar-tabs__tab a { -color: var(--icon-inactive-color); + color: var(--icon-inactive-color); } .CodeMirror .CodeMirror-line::selection, .CodeMirror .CodeMirror-line > span::selection, .CodeMirror .CodeMirror-line > span > span::selection { -background: var(--color-primary); + background: var(--color-primary); } input[type="text"] + .icon-confirm, input[type="password"] + .icon-confirm, input[type="email"] + .icon-confirm { -background-color: var(--color-primary) !important; -background-image: var(--icon-confirm-fff) !important; -background-repeat: no-repeat !important; -background-position: center !important; + background-color: var(--color-primary) !important; + background-image: var(--icon-confirm-fff) !important; + background-repeat: no-repeat !important; + background-position: center !important; } input[type="text"] + .icon-confirm::before, input[type="password"] + .icon-confirm::before, input[type="email"] + .icon-confirm::before { -content: unset !important; + content: unset !important; } input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, input[type="password"]:not(:active):not(:hover):not(:focus) -+ .icon-confirm:active, + + .icon-confirm:active, input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, input[type="password"]:not(:active):not(:hover):not(:focus) -+ .icon-confirm:hover, + + .icon-confirm:hover, input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus, input[type="password"]:not(:active):not(:hover):not(:focus) -+ .icon-confirm:focus, + + .icon-confirm:focus, input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus { -border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; -border-left-color: transparent !important; + border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; + border-left-color: transparent !important; } #app-sidebar-vue .note-category .category input.icon-confirm:hover { -border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; + border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; } #app-sidebar-vue.app-sidebar -.app-sidebar-header__desc -.app-sidebar-header__menu { -background-color: var(--color-main-background); + .app-sidebar-header__desc + .app-sidebar-header__menu { + background-color: var(--color-main-background); } #content.app-settings -.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, + .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, #content.app-files -.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, + .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, #header -.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, + .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, #content-vue.app-bookmarks -.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, + .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, #content-vue.app-photos -.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, + .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, #content-vue.app-talk -.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before{ -content: var(--icon-more-808080); -font-size: unset; -font-weight: unset; -font-style: unset; -font-family: unset; -line-height: unset; + .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before { + content: var(--icon-more-808080); + font-size: unset; + font-weight: unset; + font-style: unset; + font-family: unset; + line-height: unset; } #content-vue.app-bookmarks -.icon.action-item__menutoggle--primary.action-item__menutoggle--default-icon::before { -content: var(--icon-more-fff); + .icon.action-item__menutoggle--primary.action-item__menutoggle--default-icon::before { + content: var(--icon-more-fff); } #note-container .CodeMirror-code[contenteditable="true"]:hover, #note-container .CodeMirror-code[contenteditable="true"]:focus, #note-container .CodeMirror-code[contenteditable="true"]:active { -background-color: var(--color-main-background) !important; + background-color: var(--color-main-background) !important; } /* Tasks app*/ .action-item:not(.priority--high) .material-design-icon, #app-settings .collection .material-design-icon, .material-design-icon.emoticon-outline-icon { -color: var(--icon-inactive-color); + color: var(--icon-inactive-color); } .action.active .material-design-icon.delete-icon, .action-item:hover .material-design-icon.delete-icon { -color: var(--color-delete); + color: var(--color-delete); } #content-vue.app-tasks .app-sidebar-tabs .property__item--clearable { -color: var(--icon-active-color) !important; + color: var(--icon-active-color) !important; } #content-vue.app-tasks .app-sidebar-tabs .multiselect-picker-option.active { -color: var(--icon-active-color); + color: var(--icon-active-color); } /* Settings Apps categories icons */ .icon-category-app-bundles { -background-image: var(--icon-bundles-808080); + background-image: var(--icon-bundles-808080); } .icon-category-dashboard { -background-image: var(--icon-dashboard-dashboard-808080); + background-image: var(--icon-dashboard-dashboard-808080); } .icon-category-customization { -background-image: var(--icon-customization-808080); + background-image: var(--icon-customization-808080); } .icon-category-games { -background-image: var(--icon-games-808080); + background-image: var(--icon-games-808080); } .icon-category-integration { -background-image: var(--icon-integration-808080); + background-image: var(--icon-integration-808080); } .icon-category-monitoring { -background-image: var(--icon-monitoring-808080); + background-image: var(--icon-monitoring-808080); } .icon-category-multimedia { -background-image: var(--icon-multimedia-808080); + background-image: var(--icon-multimedia-808080); } .icon-category-office { -background-image: var(--icon-office-808080); + background-image: var(--icon-office-808080); } .icon-category-organization { -background-image: var(--icon-organization-808080); + background-image: var(--icon-organization-808080); } .icon-category-search { -background-image: var(--icon-search-808080); + background-image: var(--icon-search-808080); } .icon-category-workflow { -background-image: var(--icon-workflow-808080); + background-image: var(--icon-workflow-808080); } /* Bookmarks app */ .popover .action-button__icon.icon-link { -background-image: var(--icon-public-808080); + background-image: var(--icon-public-808080); } .controls svg path, .material-design-icon.earth-icon svg path { -fill: var(--icon-inactive-color); + fill: var(--icon-inactive-color); } .app-navigation-entry-icon .material-design-icon, .action .material-design-icon { -color: var(--icon-inactive-color); + color: var(--icon-inactive-color); } .app-navigation-entry.active .app-navigation-entry-icon .material-design-icon, .action.active .material-design-icon, .action.selected .material-design-icon { -color: var(--icon-active-color); + color: var(--icon-active-color); } .app-navigation-entry -.app-navigation-entry__inline-input-container -form -button.icon-confirm::before { -content: unset; + .app-navigation-entry__inline-input-container + form + button.icon-confirm::before { + content: unset; } .app-navigation-entry.active .icon-home { -background-image: var(--icon-home-007fff); + background-image: var(--icon-home-007fff); } #content-vue.app-bookmarks .app-navigation-entry-icon svg path { -fill: var(--icon-inactive-color); + fill: var(--icon-inactive-color); } #content-vue.app-bookmarks .app-navigation-entry.active svg path { -fill: var(--icon-active-color); + fill: var(--icon-active-color); } /* News App */ #content-vue.app-bookmarks .empty-content { -text-align: center; + text-align: center; } #app-navigation .icon-unpinned { -background-image: var(--icon-news-unpinned-808080); + background-image: var(--icon-news-unpinned-808080); } #app-navigation .icon-pinned { -background-image: var(--icon-news-pinned-808080); + background-image: var(--icon-news-pinned-808080); } #app-navigation .icon-full-text-disabled { -background-image: var(--icon-news-nonfulltext-808080); + background-image: var(--icon-news-nonfulltext-808080); } #app-navigation .icon-full-text-enabled { -background-image: var(--icon-news-fulltext-808080); + background-image: var(--icon-news-fulltext-808080); } /* Passwords App */ .searchbox .icon-search-force-white { -background-image: var(--icon-search-000); + background-image: var(--icon-search-000); } .searchbox { -opacity: 1 !important; + opacity: 1 !important; } #content.app-passwords #app-navigation .icon.fa::before { -content: unset; + content: unset; } /* Talk App */ #content-vue.app-talk .acli_wrapper .acli.active { -background-color: transparent; + background-color: transparent; } -#content-vue.app-talk #app-sidebar .username-form button.icon-rename, button.edit-output-dir span.icon-rename { -background-image: var(--icon-rename-000); +#content-vue.app-talk #app-sidebar .username-form button.icon-rename, +button.edit-output-dir span.icon-rename { + background-image: var(--icon-rename-000); } /* Google integration */ #google_prefs #google-content button.google-oauth { -background-color: var(--color-primary); + background-color: var(--color-primary); } #google-import-contacts .icon-contacts-dark { -background-image: var(--icon-contacts-000); + background-image: var(--icon-contacts-000); } #google-calendars button .icon-calendar-dark { -background-image: var(--icon-calendar-000); + background-image: var(--icon-calendar-000); } #google-import-files .icon-files-dark { -background-image: var(--icon-files-000); + background-image: var(--icon-files-000); } #google-import-photos .icon-picture { -background-image: var(--icon-picture-000); + background-image: var(--icon-picture-000); } /* remove opacity */ -button.edit-output-dir span.icon-rename, #google-rm-cred .icon-close, #google-import-photos .icon-picture, #google-import-contacts .icon-contacts-dark, #google-calendars button .icon-calendar-dark, #google-import-files .icon-files-dark { -opacity: 1; +button.edit-output-dir span.icon-rename, +#google-rm-cred .icon-close, +#google-import-photos .icon-picture, +#google-import-contacts .icon-contacts-dark, +#google-calendars button .icon-calendar-dark, +#google-import-files .icon-files-dark { + opacity: 1; } /** */ #header .header-right .magnify-icon > svg { -display: none; + display: none; } -.new-icons .color-icons{ +.new-icons .color-icons { background-image: url("../img/app-icons/other.svg"); - width: 100% ; + width: 100%; height: 80px; background-position: 50%; background-repeat: no-repeat; background-size: 60px; } -.new-icons .drive , .new-icons .files {background-image: url("../img/app-icons/Drive.svg");} -.new-icons .activity {background-image: url("../img/app-icons/Activity.svg");} -.new-icons .bookmarks {background-image: url("../img/app-icons/Bookmark.svg");} -.new-icons .calendar {background-image: url("../img/app-icons/Calendar.svg");} -.new-icons .carnet {background-image: url("../img/app-icons/Carnet.svg");} -.new-icons .contacts {background-image: url("../img/app-icons/Contacts.svg");} -.new-icons .deck {background-image: url("../img/app-icons/Deck.svg");} -.new-icons .docs {background-image: url("../img/app-icons/Docs.svg");} -.new-icons .email,.new-icons .rainloop {background-image: url("../img/app-icons/E-mail.svg");} -.new-icons .gitlab {background-image: url("../img/app-icons/Gitlab.svg");} -.new-icons .news {background-image: url("../img/app-icons/News.svg");} -.new-icons .notes {background-image: url("../img/app-icons/Notes.svg");} -.new-icons .presentation {background-image: url("../img/app-icons/Presentation.svg");} -.new-icons .spreadsheet {background-image: url("../img/app-icons/Spreadsheet.svg");} -.new-icons .tasks {background-image: url("../img/app-icons/Tasks.svg");} -.new-icons .photos {background-image: url("../img/app-icons/Gallery.svg");} -.new-icons .e-user-support-center {background-image: url("../img/app-icons/Support.svg");} -.new-icons .passwords {background-image: url("../img/app-icons/Password.svg");} -.new-icons .onlyoffice_docx {background-image: url("../img/app-icons/Docs.svg");} -.new-icons .onlyoffice_xlsx {background-image: url("../img/app-icons/Spreadsheet.svg");} -.new-icons .onlyoffice_pptx {background-image: url("../img/app-icons/Presentation.svg");} - -#appmenu li:hover a, #appmenu li a:focus { -font-size: 12px; -font-family: 'Roboto'; -letter-spacing: 1px; -} -#filestable thead{background-color: white !important ;} -#recommendations{height: 100px !important;} -.recommendation{border: 1px solid #E6E8E9;padding: 10px !important;margin-bottom: 5px;border-radius: 6px !important;} -progress{border-radius: 10px 10px !important;height: 12px !important;} -#appmenu li a:focus .icon-more, #appmenu li a:focus .icon-more-white {transform: none !important;} -#more-apps:hover span, #more-apps:focus span, #more-apps a:focus span{display: none !important;} +.new-icons .drive, +.new-icons .files { + background-image: url("../img/app-icons/Drive.svg"); +} +.new-icons .activity { + background-image: url("../img/app-icons/Activity.svg"); +} +.new-icons .bookmarks { + background-image: url("../img/app-icons/Bookmark.svg"); +} +.new-icons .calendar { + background-image: url("../img/app-icons/Calendar.svg"); +} +.new-icons .carnet { + background-image: url("../img/app-icons/Carnet.svg"); +} +.new-icons .contacts { + background-image: url("../img/app-icons/Contacts.svg"); +} +.new-icons .deck { + background-image: url("../img/app-icons/Deck.svg"); +} +.new-icons .docs { + background-image: url("../img/app-icons/Docs.svg"); +} +.new-icons .email, +.new-icons .rainloop { + background-image: url("../img/app-icons/E-mail.svg"); +} +.new-icons .gitlab { + background-image: url("../img/app-icons/Gitlab.svg"); +} +.new-icons .news { + background-image: url("../img/app-icons/News.svg"); +} +.new-icons .notes { + background-image: url("../img/app-icons/Notes.svg"); +} +.new-icons .presentation { + background-image: url("../img/app-icons/Presentation.svg"); +} +.new-icons .spreadsheet { + background-image: url("../img/app-icons/Spreadsheet.svg"); +} +.new-icons .tasks { + background-image: url("../img/app-icons/Tasks.svg"); +} +.new-icons .photos { + background-image: url("../img/app-icons/Gallery.svg"); +} +.new-icons .e-user-support-center { + background-image: url("../img/app-icons/Support.svg"); +} +.new-icons .passwords { + background-image: url("../img/app-icons/Password.svg"); +} +.new-icons .onlyoffice_docx { + background-image: url("../img/app-icons/Docs.svg"); +} +.new-icons .onlyoffice_xlsx { + background-image: url("../img/app-icons/Spreadsheet.svg"); +} +.new-icons .onlyoffice_pptx { + background-image: url("../img/app-icons/Presentation.svg"); +} + +#appmenu li:hover a, +#appmenu li a:focus { + font-size: 12px; + font-family: "Roboto"; + letter-spacing: 1px; +} +#filestable thead { + background-color: white !important ; +} +#recommendations { + height: 100px !important; +} +.recommendation { + border: 1px solid #e6e8e9; + padding: 10px !important; + margin-bottom: 5px; + border-radius: 6px !important; +} +progress { + border-radius: 10px 10px !important; + height: 12px !important; +} +#appmenu li a:focus .icon-more, +#appmenu li a:focus .icon-more-white { + transform: none !important; +} +#more-apps:hover span, +#more-apps:focus span, +#more-apps a:focus span { + display: none !important; +} button#quotaincreasebutton { - margin-top: 15px !important; + margin-top: 15px !important; } @media only screen and (max-width: 640px) { - .new-icons .color-icons { - height: 50px; - background-size: 40px; - } - #launcher-menu { - width: 300px !important; - left: 10% !important; - } + .new-icons .color-icons { + height: 50px; + background-size: 40px; + } + #launcher-menu { + width: 300px !important; + left: 10% !important; + } } @media only screen and (max-width: 640px) { - #launcher-menu { - left: 5% !important; - } + #launcher-menu { + left: 5% !important; + } } .text-color-active { color: var(--icon-active-color); } -.margin-top-10{ -margin-top: 10px; +.margin-top-10 { + margin-top: 10px; } -- GitLab From 6489ca6896f1435c12d87fc6fb156285f4767ed9 Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Tue, 25 Oct 2022 14:42:21 +0530 Subject: [PATCH 5/6] fix issue for edit --- core/css/server.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/core/css/server.css b/core/css/server.css index 8e9f7dac..ddc79d2d 100644 --- a/core/css/server.css +++ b/core/css/server.css @@ -1798,6 +1798,17 @@ progress { button#quotaincreasebutton { margin-top: 15px !important; } +.app-cookbook .editingContainer .app-navigation-input-confirm__input:active+.app-navigation-input-confirm__confirm, +.app-cookbook .editingContainer .app-navigation-input-confirm__input:active+.app-navigation-input-confirm__confirm, +.app-cookbook .editingContainer .app-navigation-input-confirm__input:focus+.app-navigation-input-confirm__confirm, +.app-cookbook .editingContainer .app-navigation-input-confirm__input:focus+.app-navigation-input-confirm__confirm, +.app-cookbook .editingContainer .app-navigation-input-confirm__input:hover+.app-navigation-input-confirm__confirm, +.app-cookbook .editingContainer .app-navigation-input-confirm__input:hover+.app-navigation-input-confirm__confirm { + border-color: var(--color-primary-element); + border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; + border:1px solid var(--color-primary-element) !important; +} + @media only screen and (max-width: 640px) { .new-icons .color-icons { height: 50px; -- GitLab From fa1cdf4025c85ae7db2a2ea42d4dc55a27f4f5b4 Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Wed, 26 Oct 2022 18:08:29 +0530 Subject: [PATCH 6/6] import style and button fix --- core/css/server.css | 1175 ++++++++++++++++++++----------------------- core/css/style.css | 18 + 2 files changed, 565 insertions(+), 628 deletions(-) create mode 100644 core/css/style.css diff --git a/core/css/server.css b/core/css/server.css index ddc79d2d..f945e441 100644 --- a/core/css/server.css +++ b/core/css/server.css @@ -15,60 +15,61 @@ * You should have received a copy of the GNU Affero General Public License, version 3, * along with this program. If not, see */ -@font-face { - font-family: "Roboto"; - src: url("../webfonts/Roboto-Regular.woff2") format("woff2"), - url("../webfonts/Roboto-Regular.woff") format("woff"); + @import "style.css"; + @font-face { + font-family: 'Roboto'; + src: url('../webfonts/Roboto-Regular.woff2') format('woff2'), + url('../webfonts/Roboto-Regular.woff') format('woff'); /* font-weight: 600; */ /* font-style: normal; */ font-display: swap; letter-spacing: 1px; } -* { - font-family: "Roboto"; +*{ + font-family: 'Roboto'; } :root { - --color-primary: #007fff; - --color-primary-element: #007fff; - --color-secondary-element: white; - --border-color-secondary-element: #007fff; - --color-primary-element-light: #007fff; - --color-error: #fb3845; - --color-delete: #e9322d; - --color-success: #3ad975; - --color-main-background: #ffffff; - --color-main-background-translucent: #f2f2f2; - --color-main-text: black; - --color-background-hover: white; - --color-text-maxcontrast: black; - --color-border-dark: #e6e6e6; - --color-border: #ebebeb; - --icon-settings-dark-000: #000000; - --icon-inactive-color: #808080; - --icon-active-color: #007fff; - --input-background-color: white; - --menu-icon-color: #222; - --color-dashboard-panels: #f2f2f2; - --color-dashboard-background-plain: #d2d2d2; - --color-sharing-icon-background: #767676; +--color-primary: #007fff; +--color-primary-element: #007fff; +--color-secondary-element: white; +--border-color-secondary-element: #007fff; +--color-primary-element-light: #007fff; +--color-error: #fb3845; +--color-delete: #e9322d; +--color-success: #3ad975; +--color-main-background: #ffffff; +--color-main-background-translucent: #f2f2f2; +--color-main-text: black; +--color-background-hover: white; +--color-text-maxcontrast: black; +--color-border-dark: #e6e6e6; +--color-border: #ebebeb; +--icon-settings-dark-000: #000000; +--icon-inactive-color: #808080; +--icon-active-color: #007fff; +--input-background-color: white; +--menu-icon-color: #222; +--color-dashboard-panels: #f2f2f2; +--color-dashboard-background-plain: #d2d2d2; +--color-sharing-icon-background: #767676; } /* Force a few variables to right values for dark theme */ body.theme--dark { - --input-background-color: #181818; - --icon-notifications-notifications-000000: url("/svg/notifications/notifications?color=000"); - --icon-notifications-notifications-new-000000: url("/svg/notifications/notifications-new?color=000"); - --icon-search-000: url("/svg/core/actions/search?color=000"); +--input-background-color: #181818; +--icon-notifications-notifications-000000: url("/svg/notifications/notifications?color=000"); +--icon-notifications-notifications-new-000000: url("/svg/notifications/notifications-new?color=000"); +--icon-search-000: url("/svg/core/actions/search?color=000"); } body.theme--highcontrast { - --icon-inactive-color: black; +--icon-inactive-color: black; } #body-user #header, #body-settings #header, #body-public #header { - background-color: white !important; +background-color: white !important; } button:not(:disabled):hover, @@ -94,7 +95,7 @@ input[type="reset"]:hover, button.import-contact__button-main:hover, button#notes_new_note:hover, #oc-dialog-filepicker-content .actions.creatable .icon.icon-add:hover { - opacity: 0.8; +opacity: 0.8; } /* primary action button, use sparingly */ @@ -125,9 +126,9 @@ button#notes_new_note, input[type="button"], input[type="submit"], input[type="reset"] { - background-color: var(--color-primary); - color: white; - border-color: var(--color-primary); +background-color: var(--color-primary); +color: white; +border-color: var(--color-primary); } input.primary:not(:disabled):hover, @@ -136,7 +137,7 @@ button.primary:not(:disabled):hover, button.primary:not(:disabled):focus, a.primary:not(:disabled):hover, a.primary:not(:disabled):focus { - background-image: none; +background-image: none; } /* For buttons that are not primary or submit/reset/button inputs that are not primary */ @@ -149,15 +150,15 @@ button.primary + button:not(.primary):active, .oc-dialog-buttonrow.twobuttons button:not(.primary), .oc-dialog-buttonrow.twobuttons button:not(.primary):active, .status-buttons .status-buttons__select { - background-color: var(--color-secondary-element); - color: var(--color-primary); - border-color: var(--border-color-secondary-element); +background-color: var(--color-secondary-element); +color: var(--color-primary); +border-color: var(--border-color-secondary-element); } input[type="checkbox"].checkbox + label::before, input[type="radio"].checkbox + label::before { - border-color: var(--icon-inactive-color); - background-color: white; +border-color: var(--icon-inactive-color); +background-color: white; } textarea:not(:disabled), @@ -167,7 +168,7 @@ textarea:not(:disabled):hover, div[contenteditable="true"]:not(:disabled):hover, textarea:not(:disabled):focus, div[contenteditable="true"]:not(:disabled):focus { - background-color: var(--input-background-color) !important; +background-color: var(--input-background-color) !important; } select, @@ -177,30 +178,30 @@ input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type=" #content-vue.app-tasks .task-body__checkbox label.reactive.no-nav::before, #content.app-files #commentsTabView .newCommentForm .message, .multiselect - .multiselect__content-wrapper - .multiselect__content - li - > span.multiselect__option, +.multiselect__content-wrapper +.multiselect__content +li +> span.multiselect__option, div.select2-container-multi .select2-choices, div.select2-container-multi.select2-container-active .select2-choices { - background-color: var(--input-background-color); +background-color: var(--input-background-color); } #settings #expanddiv, #header .header-right > div > .notification-container.menu { - background-color: var(--color-main-background); +background-color: var(--color-main-background); } #header .header-appname { - color: var(--color-main-text); +color: var(--color-main-text); } #settings #expanddiv li a.active { - background-color: var(--color-background-hover); +background-color: var(--color-background-hover); } body.theme--dark #header .header-right > div > .notification-container.menu, body.theme--dark #settings #expanddiv { - background-color: var(--color-main-background); +background-color: var(--color-main-background); } .multiselect .multiselect__tags input.multiselect__single, .multiselect .multiselect__tags span.multiselect__single, @@ -209,54 +210,54 @@ body.theme--dark #settings #expanddiv { .multiselect .multiselect__tags .multiselect__tags-wrap, .multiselect .multiselect__input, .multiselect - .multiselect__content-wrapper - .multiselect__content - li.multiselect__element, +.multiselect__content-wrapper +.multiselect__content +li.multiselect__element, .multiselect - .multiselect__content-wrapper - .multiselect__content - li.multiselect__element - .multiselect__option, +.multiselect__content-wrapper +.multiselect__content +li.multiselect__element +.multiselect__option, #content-vue.app-contacts - .property.property--without-actions.property--last.property-masonry:not(.property--addressbooks):not(.property--groups) - .multiselect - .multiselect__tags - .multiselect__input, +.property.property--without-actions.property--last.property-masonry:not(.property--addressbooks):not(.property--groups) +.multiselect +.multiselect__tags +.multiselect__input, #content-vue.app-contacts - .multiselect - .multiselect__tags - input.multiselect__input, +.multiselect +.multiselect__tags +input.multiselect__input, #content-vue.app-contacts - .multiselect - > .multiselect__tags - > span.multiselect__single, +.multiselect +> .multiselect__tags +> span.multiselect__single, #content.app-files #commentsTabView .newCommentForm .message:hover, #app-dashboard .footer a:hover, #app-content-systemtagsfilter .select2-container ul { - background-color: var(--input-background-color) !important; +background-color: var(--input-background-color) !important; } /* use logos from theme */ #header .logo, #firstrunwizard .logo { - background-image: url("../img/logo@2x.svg"); - width: 256px; - height: 128px; +background-image: url("../img/logo@2x.svg"); +width: 256px; +height: 128px; } #header .logo-icon { - width: 130px; - height: 40px; - top: 5px; - bottom: 0px; - border-radius: 22px; +width: 130px; +height: 40px; +top: 5px; +bottom: 0px; +border-radius: 22px; } #header #nextcloud { - padding-left: 150px; +padding-left: 150px; } #header .notifications .svg { - height: 16px; - width: 16px; +height: 16px; +width: 16px; } /* @@ -264,11 +265,11 @@ For the overflow in search filter; It doesn't use specific ids so gave the rule a lot of specificity */ .popover > .popover__wrapper .open ul li p { - white-space: normal; +white-space: normal; } #unified-search #header-menu-unified-search .header-menu__carret { - right: 125px; +right: 125px; } /* App Navigation rules */ @@ -280,133 +281,133 @@ It doesn't use specific ids so gave the rule a lot of specificity #app-navigation:not(.vue) > ul > li a:active > a, #app-navigation:not(.vue) > ul > li a.selected > a, #app-navigation:not(.vue) > ul > li a.active > a { - background-color: var(--color-main-background); +background-color: var(--color-main-background); } li.app-navigation-entry, .conversations .acli_wrapper .acli { - background-clip: content-box; +background-clip: content-box; } li.app-navigation-entry.active { - background-color: var(--color-main-background) !important; +background-color: var(--color-main-background) !important; } li.app-navigation-entry:not(.active):hover, #content.app-deck li.app-navigation-entry.active { - background-color: var(--color-background-hover) !important; +background-color: var(--color-background-hover) !important; } li.app-navigation-entry.app-navigation-entry--collapsible:hover { - background-color: var(--color-main-background) !important; +background-color: var(--color-main-background) !important; } li.app-navigation-entry.app-navigation-entry--collapsible > a:hover, #content.app-passwords #app-navigation .active { - background-color: var(--color-background-hover); +background-color: var(--color-background-hover); } /* CSS TWEAKS TAKEN FROM THEMING APP (disabled now) */ .nc-theming-main-background { - background-color: #999999; +background-color: #999999; } .nc-theming-main-text { - color: #fff; +color: #fff; } .nc-theming-contrast { - color: #fff; +color: #fff; } #appmenu:not(.inverted) svg { - filter: none; +filter: none; } #appmenu.inverted svg { - filter: invert(1); +filter: invert(1); } .icon-folder, .icon-filetype-folder { - background-image: var(--icon-folder-007FFF); +background-image: var(--icon-folder-007FFF); } .icon-filetype-text { - background-image: var(--icon-text-007fff); +background-image: var(--icon-text-007fff); } .icon-filetype-folder-drag-accept { - background-image: var(--icon-folder-drag-accept-007fff) !important; +background-image: var(--icon-folder-drag-accept-007fff) !important; } #header .logo { - background-image: url("../img/logo@2x.svg"); +background-image: url("../img/logo@2x.svg"); } #body-user #header, #body-settings #header, #body-public #header { - color: var(--color-main-text); - background-image: none; +color: var(--color-main-text); +background-image: none; } #body-user.dark--theme, #body-settings.dark--theme { - color: white !important; +color: white !important; } #header .menu, #header #launcher-menu, #header .header--menu { - opacity: 1; +opacity: 1; } #appmenu li span { - color: var(--color-main-text); +color: var(--color-main-text); } #header .logo { - background-size: auto; +background-size: auto; } input.primary, #alternative-logins li a { - background-color: #999999; - border: 1px solid #fff; - color: #fff; +background-color: #999999; +border: 1px solid #fff; +color: #fff; } footer { - height: 92px; +height: 92px; } .notifications-button.hasNotifications { - opacity: 0.6 !important; +opacity: 0.6 !important; } .notifications-button.hasNotifications:hover, .notifications-button.hasNotifications:focus { - opacity: 1 !important; +opacity: 1 !important; } #header .notification-wrapper .dismiss-all .icon.icon-close { - margin-top: 4px; +margin-top: 4px; } #content #app-navigation, #content.app-news #app-navigation button { - color: var(--color-main-text); - border-right: 1px solid var(--color-border); +color: var(--color-main-text); +border-right: 1px solid var(--color-border); } .icon-home, #oc-dialog-filepicker-content .dirtree div:first-child a { - background-image: var(--icon-home-808080); +background-image: var(--icon-home-808080); } #controls .icon-home, #oc-dialog-filepicker-content .dirtree div:first-child a { - background-size: 20px; +background-size: 20px; } .icon-mail { - background-image: var(--icon-mail-808080); +background-image: var(--icon-mail-808080); } .icon-error { - background-image: var(--icon-error-808080); +background-image: var(--icon-error-808080); } .icon-details { - background-image: var(--icon-details-808080); +background-image: var(--icon-details-808080); } .icon-add, @@ -415,480 +416,479 @@ button.action-item__menutoggle.icon-add, #content.app-news .add-new button.icon-add, .who-has-access .action-item.icon-add.addAdditionalAdmin, #content-vue.app-tasks - #app-navigation-vue - .app-navigation-entry-icon.sprt-add::before { - background-image: var(--icon-add-808080); +#app-navigation-vue +.app-navigation-entry-icon.sprt-add::before { +background-image: var(--icon-add-808080); } .notification-container .emptycontent .icon-notifications-dark { - background-image: var(--icon-notifications-notifications-808080); - background-size: 40px; +background-image: var(--icon-notifications-notifications-808080); +background-size: 40px; } .icon-rename, .who-has-access .action-item--single.action-item.icon-rename, .where-is-my-data .action-item--single.action-item.icon-rename { - background-image: var(--icon-rename-808080); +background-image: var(--icon-rename-808080); } .icon-download { - background-image: var(--icon-download-808080); +background-image: var(--icon-download-808080); } .icon-template-add { - background-image: var(--icon-template-add-808080); +background-image: var(--icon-template-add-808080); } .icon-tasks, .panel--header .icon-tasks, .modal__content .icon-tasks { - background-image: var(--icon-tasks-tasks-808080); +background-image: var(--icon-tasks-tasks-808080); } #tasks_panel .empty-content .icon-tasks { - background-image: var(--icon-tasks-tasks-808080) !important; +background-image: var(--icon-tasks-tasks-808080) !important; } .icon-checkmark { - background-image: var(--icon-checkmark-808080); +background-image: var(--icon-checkmark-808080); } .icon-group { - background-image: var(--icon-group-808080); +background-image: var(--icon-group-808080); } .icon-timezone { - background-image: var(--icon-timezone-808080); +background-image: var(--icon-timezone-808080); } .icon-edit { - background-image: var(--icon-edit-808080); +background-image: var(--icon-edit-808080); } .icon-reminder { - background-image: var(--icon-notifications-notifications-808080); +background-image: var(--icon-notifications-notifications-808080); } .icon-gravatar { - background-image: var(--icon-contacts-gravatar-808080); +background-image: var(--icon-contacts-gravatar-808080); } #content-vue.app-calendar .app-sidebar-tabs__tab-icon.icon-reminder { - background-size: 13px; +background-size: 13px; } .icon-clippy { - background-image: var(--icon-clippy-808080); +background-image: var(--icon-clippy-808080); } .icon-confirm { - background-image: var(--icon-confirm-808080); +background-image: var(--icon-confirm-808080); } .icon-user-admin { - background-image: var(--icon-user-admin-808080); +background-image: var(--icon-user-admin-808080); } .icon-disabled-users { - background-image: var(--icon-disabled-users-808080); +background-image: var(--icon-disabled-users-808080); } .icon-notes, .icon-notes-trans { - background-image: var(--icon-notes-notes-808080); +background-image: var(--icon-notes-notes-808080); } .icon-projects { - background-image: var(--icon-projects-808080); +background-image: var(--icon-projects-808080); } .icon-comment { - background-image: var(--icon-comment-808080); +background-image: var(--icon-comment-808080); } .icon-activity { - background-image: var(--icon-activity-activity-808080); +background-image: var(--icon-activity-activity-808080); } .icon-link { - background-image: var(--icon-public-808080); +background-image: var(--icon-public-808080); } button .icon-link { - background-image: var(--icon-public-ffffff); +background-image: var(--icon-public-ffffff); } .icon-recent { - background-image: var(--icon-files-recent-808080); +background-image: var(--icon-files-recent-808080); } .icon-more, .icon-more-white { - background-image: var(--icon-more-808080); +background-image: var(--icon-more-808080); } .avatar-shared.icon-more-white { - background-image: var(--icon-more-fff); +background-image: var(--icon-more-fff); } #collection-list .avatar .icon-projects { - background-image: var(--icon-projects-fff); +background-image: var(--icon-projects-fff); } #sharing-inherited-shares .sharing-entry .avatar-shared.icon-more-white, .sharing-entry.sharing-entry__internal .avatar-external.icon-external-white, #collection-list .avatar { - background-color: var(--color-sharing-icon-background); +background-color: var(--color-sharing-icon-background); } .icon-files, .icon-category-files, .icon-emptyfolder { - background-image: var(--icon-files-app-808080); +background-image: var(--icon-files-app-808080); } #header .icon-notifications, #header .icon-notifications-new { - background-size: 17px; +background-size: 17px; } .icon-notifications-new { - background-image: var(--icon-notifications-notifications-new-000000); +background-image: var(--icon-notifications-notifications-new-000000); } .icon-notifications { - background-image: var(--icon-notifications-notifications-000000); +background-image: var(--icon-notifications-notifications-000000); } .icon-external, .icon-goto { - background-image: var(--icon-external-808080); +background-image: var(--icon-external-808080); } .action.icon-checkmark { - background-image: var(--icon-checkmark-ffffff); +background-image: var(--icon-checkmark-ffffff); } .icon-phone { - background-image: var(--icon-phone-808080); +background-image: var(--icon-phone-808080); } .icon-password, .icon-category-security { - background-image: var(--icon-password-808080); +background-image: var(--icon-password-808080); } .icon-link { - background-image: var(--icon-link-808080); +background-image: var(--icon-link-808080); } .icon-toggle-filelist { - background-image: var(--icon-toggle-filelist-808080); +background-image: var(--icon-toggle-filelist-808080); } button.icon-toggle-filelist { - background-color: var(--color-main-background); +background-color: var(--color-main-background); } .icon-toggle-pictures { - background-image: var(--icon-toggle-pictures-808080); +background-image: var(--icon-toggle-pictures-808080); } .button .icon-add, button .icon-add, button.icon-add, -#new-contact-button.icon-add, -#cookbook_new_cookbook.icon-add, +#new-contact-button.icon-add,#cookbook_new_cookbook.icon-add, #content-vue.app-notes #notes_new_note.icon-add, #oc-dialog-filepicker-content .actions.creatable .icon.icon-add, #content.app-news .add-new .icon-add.add-new-folder-primary { - background-image: var(--icon-add-ffffff); +background-image: var(--icon-add-ffffff); } .popover .action-button .action-button__icon.icon-add { - background-image: var(--icon-add-808080); +background-image: var(--icon-add-808080); } button > span[class^="icon-"], .button > span[class^="icon-"], button > span[class*=" icon-"], .button > span[class*=" icon-"] { - opacity: 1; +opacity: 1; } .icon-share, .icon-shared { - background-image: var(--icon-share-808080); +background-image: var(--icon-share-808080); } .icon-contacts-dark, .icon-contacts, .icon-category-social { - background-image: var(--icon-contacts-app-808080); +background-image: var(--icon-contacts-app-808080); } #contactsmenu .icon-contacts { - background-image: var(--icon-contacts-000); +background-image: var(--icon-contacts-000); } .icon-user, .icon-category-installed { - background-image: var(--icon-user-808080); +background-image: var(--icon-user-808080); } .icon-category-enabled { - background-image: var(--icon-checkmark-808080); +background-image: var(--icon-checkmark-808080); } .icon-star, .icon-star-dark, .icon-starred:hover { - background-image: var(--icon-star-808080); +background-image: var(--icon-star-808080); } .icon-starred, .icon-star:hover, .icon-star-dark:hover, #filestable .filename .favorite-mark .icon-starred { - background-image: var(--icon-star-FFCC00); +background-image: var(--icon-star-FFCC00); } .icon-close, #header-menu-unified-search .icon-close, .icon-category-disabled { - background-image: var(--icon-close-808080); +background-image: var(--icon-close-808080); } #header #searchbox { - color: var(--color-main-text); - border-color: var( - --icon-inactive-color - ) !important; /* !important used in source so needed to override */ +color: var(--color-main-text); +border-color: var( + --icon-inactive-color +) !important; /* !important used in source so needed to override */ } #app-navigation, #app-navigation-vue { - border-right: 2px solid var(--color-border); +border-right: 2px solid var(--color-border); } table th, table td { - border-bottom: 1px solid var(--color-border); +border-bottom: 1px solid var(--color-border); } .icon-files-dark { - background-image: var(--icon-files-app-808080); +background-image: var(--icon-files-app-808080); } .icon-fullscreen { - background-image: var(--icon-fullscreen-808080); +background-image: var(--icon-fullscreen-808080); } .icon-calendar-dark { - background-image: var(--icon-calendar-calendar-808080); +background-image: var(--icon-calendar-calendar-808080); } .icon-talk { - background-image: var(--icon-spreed-app-808080); +background-image: var(--icon-spreed-app-808080); } #app-navigation li a, #app-navigation:not(.vue) > ul > li > a, #app-navigation:not(.vue) > ul > li > ul > li > a { - opacity: 1; +opacity: 1; } /* Dashboard App */ #body-user[data-dashboard-background]:not(.theme--dark) - #app-dashboard - .statuses - button:hover, +#app-dashboard +.statuses +button:hover, #body-user[data-dashboard-background]:not(.theme--dark) .edit-panels:hover { - background-color: var(--color-background-hover) !important; +background-color: var(--color-background-hover) !important; } body.theme--highcontrast #app-dashboard .statuses button, body.theme--highcontrast #app-dashboard .edit-panels { - border: 1px solid var(--color-main-text); +border: 1px solid var(--color-main-text); } #body-user[data-dashboard-background]:not(.theme--dark) #app-dashboard .panel, #body-user[data-dashboard-background]:not(.theme--dark) - #app-dashboard - .statuses - button, +#app-dashboard +.statuses +button, #body-user[data-dashboard-background]:not(.theme--dark) - #app-dashboard - .footer - a { - background-color: var(--color-dashboard-panels); - /* opacity: 0.9; */ +#app-dashboard +.footer +a { +background-color: var(--color-dashboard-panels); +/* opacity: 0.9; */ } #body-user[data-dashboard-background]:not(.theme--dark) #header { - opacity: 0.95; +opacity: 0.95; } #body-user[data-dashboard-background].theme--highcontrast #header { - background-color: var(--color-main-background) !important; +background-color: var(--color-main-background) !important; } #app-dashboard .panel .panel--header > .icon-calendar-dark { - background-position: 14px 10px; +background-position: 14px 10px; } #app-dashboard .panel .panel--header > .icon-files-dark { - background-position: 14px 16px; +background-position: 14px 16px; } #app-dashboard .statuses button { - color: var(--color-main-text); +color: var(--color-main-text); } #content.app-dashboard #app-dashboard, body[data-dashboard-background]:not(.theme--dark) - .background-selector - .background.filepicker, +.background-selector +.background.filepicker, body[data-dashboard-background]:not(.theme--dark) - .background-selector - .background.default, +.background-selector +.background.default, body[data-dashboard-background]:not(.theme--dark) - .modal__content - .background-selector - .background.color { - background-color: var(--color-dashboard-background-plain); - color: var(--color-main-text); +.modal__content +.background-selector +.background.color { +background-color: var(--color-dashboard-background-plain); +color: var(--color-main-text); } body[data-dashboard-background="#0082c9"] #app-dashboard, body[data-dashboard-background="default"] #app-dashboard { - background-color: var(--color-dashboard-background-plain); +background-color: var(--color-dashboard-background-plain); } body[data-dashboard-background="default"] #app-dashboard { - background-image: none !important; +background-image: none !important; } body[data-dashboard-background="#0082c9"] #app-dashboard h2, body[data-dashboard-background="default"] #app-dashboard h2 { - color: var(--color-main-text); +color: var(--color-main-text); } /* Files App */ #filestable .thumbnail { - background-repeat: no-repeat; +background-repeat: no-repeat; } .breadcrumb .canDrop > a, #filestable tbody tr.canDrop, #filestable.view-grid:not(.hidden) - #fileList - tr:not(.hidden).selected - .thumbnail-wrapper, +#fileList +tr:not(.hidden).selected +.thumbnail-wrapper, #filestable.view-grid:not(.hidden) - #fileList - tr:not(.hidden).selected - .fileactions, +#fileList +tr:not(.hidden).selected +.fileactions, #filestable.view-grid:not(.hidden) - #fileList - tr:not(.hidden).selected - .nametext { - background-color: var(--color-primary-light); +#fileList +tr:not(.hidden).selected +.nametext { +background-color: var(--color-primary-light); } .actions .button.new:active { - background-color: var(--color-primary); +background-color: var(--color-primary); } #fileList td a a.action { - opacity: 0.6; +opacity: 0.6; } #fileList td a a.action:hover { - opacity: 0.8; +opacity: 0.8; } #content.app-files #filestable.view-grid thead tr, #content.app-files #filestable.view-grid thead th { - border-bottom: 0px; +border-bottom: 0px; } #content.app-files #controls .icon-shared { - background-size: 14px; +background-size: 14px; } #editor .menububble.is-active .menububble__button { - background-color: var(--color-primary); +background-color: var(--color-primary); } #editor .menububble.is-active .menububble__button:hover { - background-color: var(--color-background-hover); +background-color: var(--color-background-hover); } #editor .menububble__button:hover .menububble__buttontext { - color: var(--color-primary); +color: var(--color-primary); } #editor .menububble__button:hover .icon-link { - background-image: var(--icon-public-007fff); +background-image: var(--icon-public-007fff); } #editor .menububble__button:hover .icon-file { - background-image: var(--icon-text-007fff); +background-image: var(--icon-text-007fff); } #uploadprogressbar + button.icon-close, #google-drive button .icon-close, #google-photos button .icon-close { - background-image: var(--icon-close-fff); +background-image: var(--icon-close-fff); } #google-rm-cred .icon-close { - background-image: var(--icon-close-000); - opacity: 1; +background-image: var(--icon-close-000); +opacity: 1; } .breadcrumb div.crumb span.icon-shared, .breadcrumb div.crumb span.icon-public, .selectedActions a, #commentsTabView .comment .action { - opacity: 0.8; +opacity: 0.8; } #content.app-files #emptycontent .icon-share { - background-image: var(--icon-files-share-808080); +background-image: var(--icon-files-share-808080); } #content #app-content-files #controls { - background-color: var(--color-main-background); +background-color: var(--color-main-background); } #app-content-files button .icon-file, #editor .menububble__button .icon-file { - background-image: var(--icon-text-ffffff); +background-image: var(--icon-text-ffffff); } #editor .ProseMirror { - background-color: var(--color-main-background) !important; +background-color: var(--color-main-background) !important; } #fileList tr td.selection > .selectCheckBox + label::before, #oc-dialog-filepicker-content .actions.creatable .icon.icon-add { - opacity: 1; +opacity: 1; } #filestable .filesize, #filestable .date .modified.live-relative-timestamp { - color: var(--color-main-text) !important; +color: var(--color-main-text) !important; } .nav-icon-files { - background-image: var(--icon-files-app-808080); +background-image: var(--icon-files-app-808080); } .nav-icon-files.active { - background-image: var(--icon-files-app-007fff); +background-image: var(--icon-files-app-007fff); } .nav-icon-recent { - background-image: var(--icon-files-recent-808080); +background-image: var(--icon-files-recent-808080); } .nav-icon-recent.active { - background-image: var(--icon-files-recent-007fff); +background-image: var(--icon-files-recent-007fff); } .nav-icon-favorites { - background-image: var(--icon-star-outline-808080); +background-image: var(--icon-star-outline-808080); } .nav-icon-favorites.active { - background-image: var(--icon-star-outline-007fff); +background-image: var(--icon-star-outline-007fff); } .nav-icon-deletedshares { - background-image: var(--icon-files-unshare-808080); +background-image: var(--icon-files-unshare-808080); } .nav-icon-deletedshares.active { - background-image: var(--icon-files-unshare-007fff); +background-image: var(--icon-files-unshare-007fff); } .nav-icon-shareoverview, @@ -897,166 +897,166 @@ body[data-dashboard-background="default"] #app-dashboard h2 { .nav-icon-pendingshares, #content.app-files .icon-share, #content.app-files .icon-shared { - background-image: var(--icon-files-share-808080); +background-image: var(--icon-files-share-808080); } .nav-icon-shareoverview.active, .nav-icon-sharingout.active, .nav-icon-sharingin.active, .nav-icon-pendingshares.active { - background-image: var(--icon-files-share-007fff); +background-image: var(--icon-files-share-007fff); } .nav-icon-sharinglinks { - background-image: var(--icon-public-808080); +background-image: var(--icon-public-808080); } .nav-icon-sharinglinks.active { - background-image: var(--icon-public-007fff); +background-image: var(--icon-public-007fff); } .nav-icon-trashbin { - background-image: var(--icon-files-delete-808080); +background-image: var(--icon-files-delete-808080); } .nav-icon-trashbin.active { - background-image: var(--icon-files-delete-007fff); +background-image: var(--icon-files-delete-007fff); } .nav-icon-systemtagsfilter { - background-image: var(--icon-tag-808080); +background-image: var(--icon-tag-808080); } .nav-icon-systemtagsfilter.active { - background-image: var(--icon-tag-007fff); +background-image: var(--icon-tag-007fff); } .icon-quota { - background-image: var(--icon-quota-808080); +background-image: var(--icon-quota-808080); } .app-sidebar-header__star.icon-star, .app-sidebar-header__star.icon-starred, .app-sidebar-header__star.icon-star:hover, .app-sidebar-header__star.icon-starred:hover, #view-toggle { - background-size: 16px; +background-size: 16px; } #collection-list .multiselect .multiselect__tags .multiselect__input { - background-color: transparent !important; +background-color: transparent !important; } #collection-list - .multiselect.multiselect--active - .multiselect__tags - .multiselect__input { - background-color: var(--input-background-color) !important; +.multiselect.multiselect--active +.multiselect__tags +.multiselect__input { +background-color: var(--input-background-color) !important; } #app-sidebar-vue #sharing .sharing-entry .avatar-external, #app-sidebar-vue #sharing .sharing-entry .avatar-shared { - background-color: var(--color-primary); +background-color: var(--color-primary); } #app-sidebar-vue #sharing .sharing-entry .avatar-shared.icon-more-white { - background-image: var(--icon-more-fff); +background-image: var(--icon-more-fff); } #app-sidebar-vue #sharing .sharing-entry .avatardiv.icon-public-white { - background-color: var(--color-primary) !important; +background-color: var(--color-primary) !important; } body.theme--highcontrast #header .header-right .magnify-icon { - background: var(--icon-search-000) no-repeat center; +background: var(--icon-search-000) no-repeat center; } #header .header-right .magnify-icon { - background: var(--icon-search-000) no-repeat center; - background-size: 15px; +background: var(--icon-search-000) no-repeat center; +background-size: 15px; } #content.app-files #filestable span, #content.app-files #filestable td { - color: var(--color-main-text) !important; +color: var(--color-main-text) !important; } /* Contacts App */ #content-vue.app-contacts - .multiselect.property__label - .multiselect__tags - span.multiselect__single, +.multiselect.property__label +.multiselect__tags +span.multiselect__single, #content-vue.app-contacts - .multiselect.property__label - .multiselect__tags - .multiselect__input { - background-color: var(--color-main-background) !important; +.multiselect.property__label +.multiselect__tags +.multiselect__input { +background-color: var(--color-main-background) !important; } #contacts-list { - margin-top: 44px; +margin-top: 44px; } li.app-navigation-entry.active .icon-user { - background-image: var(--icon-user-007fff); +background-image: var(--icon-user-007fff); } li.app-navigation-entry.active .icon-contacts-dark, li.app-navigation-entry.active .icon-group { - background-image: var(--icon-contacts-app-007fff); +background-image: var(--icon-contacts-app-007fff); } li.app-navigation-entry.active .icon-address-book { - background-image: var(--icon-contacts-address-book-007fff); +background-image: var(--icon-contacts-address-book-007fff); } li.app-navigation-entry.active .icon-recent-actors { - background-image: var(--icon-contacts-recent-actors-007fff); +background-image: var(--icon-contacts-recent-actors-007fff); } #content-vue.app-contacts .multiselect .multiselect__tags .multiselect__input, #content-vue.app-contacts - .multiselect - > .multiselect__tags - > .multiselect__single { - background-color: var(--color-main-background) !important; +.multiselect +> .multiselect__tags +> .multiselect__single { +background-color: var(--color-main-background) !important; } #content-vue.app-contacts ~ .popover .action.active, #content-vue.app-contacts ~ .popover .action.active .action-input:hover, #content-vue.app-contacts ~ .popover .action.active .action-input:focus-within { - opacity: 1; +opacity: 1; } #content-vue.app-contacts ~ .popover .action.active .action-input { - opacity: 0.7; +opacity: .7; } #content-vue.app-contacts .empty-content__icon { - height: 80px; +height: 80px; } #content-vue.app-contacts - #addressbook-list - .addressbook-shares - .multiselect__content { - background-color: var(--color-secondary-element); +#addressbook-list +.addressbook-shares +.multiselect__content { +background-color: var(--color-secondary-element); } #content-vue.app-contacts .empty-content__title { - text-align: center; +text-align: center; } #content-vue.app-contacts .app-content > .empty-content { - margin: 20vh; +margin: 20vh; } .icon-address-book { - background-image: var(--icon-contacts-address-book-808080); +background-image: var(--icon-contacts-address-book-808080); } #content-vue.app-contacts .app-navigation-caption__title { - color: var(--color-main-text); +color: var(--color-main-text); } #content-vue.app-contacts .contact-header__infos input { - background-color: var(--color-main-background); +background-color: var(--color-main-background); } .property .icon-contacts { - background-image: var(--icon-contacts-app-808080); +background-image: var(--icon-contacts-app-808080); } #content-vue.app-contacts .icon-phone { - background-image: var(--icon-contacts-phone-808080); +background-image: var(--icon-contacts-phone-808080); } button .icon-upload, @@ -1068,143 +1068,143 @@ button.primary .icon-upload, button.import-contact__button-main .icon-upload, .import-export button.icon-upload, .attachments-drag-zone button.icon-upload { - background-image: var(--icon-upload-000); +background-image: var(--icon-upload-000); } -#uploadavatarbutton.icon-upload { - background-image: var(--icon-upload-ffffff); +#uploadavatarbutton.icon-upload{ +background-image: var(--icon-upload-ffffff); } .action-button .icon-upload, .menuitem .icon-upload, -button.import-contact__button--local:disabled - .import-contact__button-icon.icon-upload { - background-image: var(--icon-upload-808080); +button.import-contact__button--local:disabled .import-contact__button-icon.icon-upload + { +background-image: var(--icon-upload-808080); } button .icon-download, .button .icon-download, .import-export .button.icon-download { - background-image: var(--icon-download-ffffff); +background-image: var(--icon-download-ffffff); } .action-button .icon-download { - background-image: var(--icon-download-808080); +background-image: var(--icon-download-808080); } #deleteaccount:not([disabled]) .icon-delete, button .icon-delete, .button .icon-delete, #removeavatar.icon-delete { - background-image: var(--icon-delete-ffffff); +background-image: var(--icon-delete-ffffff); } button.menuitem .icon-delete, .app-navigation-entry-menu button .icon-delete { - background-image: var(--icon-delete-808080); +background-image: var(--icon-delete-808080); } .menu-icon svg path { - fill: var(--menu-icon-color); +fill: var(--menu-icon-color); } .icon-recent-actors { - background-image: var(--icon-contacts-recent-actors-808080); +background-image: var(--icon-contacts-recent-actors-808080); } .popover .action-input__input + .action-input__label { - background-color: var(--color-primary); +background-color: var(--color-primary); } .popover .action-input__input + .action-input__label > .arrow-right-icon path { - fill: white; +fill: white; } #content-vue.app-contacts .dots-horizontal-icon svg path { - fill: var(--icon-inactive-color); +fill: var(--icon-inactive-color); } .mx-icon-calendar svg path { - fill: var(--icon-inactive-color); +fill: var(--icon-inactive-color); } #content-vue.app-contacts - ~ .popover - .action-input - .action-input__label::before { - content: unset; +~ .popover +.action-input +.action-input__label::before { +content: unset; } /* Photos App */ #content-vue.app-photos #app-navigation-vue .app-navigation-entry.active { - background-color: var(--color-main-background) !important; +background-color: var(--color-main-background) !important; } #content-vue.app-photos .icon-folder { - background-image: var(--icon-folder-007FFF); +background-image: var(--icon-folder-007FFF); } #content-vue.app-photos .folder-name__icon { - opacity: 0.8; +opacity: 0.8; } li.active .icon-yourphotos { - background-image: var(--icon-photos-app-007fff); +background-image: var(--icon-photos-app-007fff); } .icon-yourphotos { - background-image: var(--icon-photos-app-808080); +background-image: var(--icon-photos-app-808080); } li.active .icon-video { - background-image: var(--icon-video-007fff); +background-image: var(--icon-video-007fff); } .icon-video { - background-image: var(--icon-video-808080); +background-image: var(--icon-video-808080); } li.active .icon-favorite { - background-image: var(--icon-star-outline-007fff); +background-image: var(--icon-star-outline-007fff); } .icon-favorite { - background-image: var(--icon-star-outline-808080); +background-image: var(--icon-star-outline-808080); } li.active .icon-tag { - background-image: var(--icon-tag-007fff); +background-image: var(--icon-tag-007fff); } .icon-tag, .icon-systemtags { - background-image: var(--icon-tag-808080); +background-image: var(--icon-tag-808080); } li.active .icon-files-dark { - background-image: var(--icon-files-app-007fff); +background-image: var(--icon-files-app-007fff); } li.active .icon-address { - background-image: var(--icon-address-007fff); +background-image: var(--icon-address-007fff); } .icon-address { - background-image: var(--icon-address-808080); +background-image: var(--icon-address-808080); } li.active .icon-share { - background-image: var(--icon-share-007fff); +background-image: var(--icon-share-007fff); } #app-navigation-vue #app-settings #app-settings-header .settings-button, #app-navigation #app-settings #app-settings-header .settings-button, .icon-category-tools { - background-image: var(--icon-settings-808080); +background-image: var(--icon-settings-808080); } #header #header-menu-unified-search .unified-search__form-input { - color: var(--color-main-text); +color: var(--color-main-text); } #header #header-menu-unified-search .unified-search__form-input, #header #header-menu-unified-search .unified-search__input-wrapper { - background-color: var(--color-main-background); +background-color: var(--color-main-background); } .icon-delete, button.action-button .icon-delete { - background-image: var(--icon-files-delete-808080); +background-image: var(--icon-files-delete-808080); } .menuitem:hover .icon-delete, @@ -1213,24 +1213,24 @@ button.action-button:hover .icon-delete, button.menuitem:hover .icon-delete, .app-navigation-entry-menu button:hover .icon-delete, #removeavatar.icon-delete:hover { - background-image: var(--icon-delete-e9322d); +background-image: var(--icon-delete-e9322d); } #appmenu li a span { - color: transparent; +color: transparent; } #appmenu li:hover a span { - color: var(--icon-inactive-color); +color: var(--icon-inactive-color); } body.theme--highcontrast #appmenu li:hover a span { - color: var(--color-main-text); +color: var(--color-main-text); } #appmenu li:hover a svg { - color: var(--color-main-text); - transform: translateY(-7px); +color: var(--color-main-text); +transform: translateY(-7px); } #appmenu:hover li svg, @@ -1238,595 +1238,514 @@ body.theme--highcontrast #appmenu li:hover a span { #appmenu:hover li .icon-more-white, #appmenu:hover li .icon-loading-small, #appmenu:hover li .icon-loading-small-dark { - transform: none; +transform: none; } /* Settings app */ #pass2 + input[name="newpassword-clone"] { - width: 100%; +width: 100%; } /* Personal Info */ #selectavatar.icon-folder { - background-image: var(--icon-folder-ffffff); - background-color: var(--color-primary); - color: white; - border-color: var(--color-primary); +background-image: var(--icon-folder-ffffff); +background-color: var(--color-primary); +color: white; +border-color: var(--color-primary); } /* Mobile & Desktop */ .button.icon-clippy { - background-image: var(--icon-clippy-808080); +background-image: var(--icon-clippy-808080); } /* Sharing */ button.social-facebook { - padding-left: 30px; - background-image: var(--icon-federatedfilesharing-social-facebook-000); +padding-left: 30px; +background-image: var(--icon-federatedfilesharing-social-facebook-000); } button.social-twitter { - padding-left: 30px; - background-image: var(--icon-federatedfilesharing-social-twitter-000); +padding-left: 30px; +background-image: var(--icon-federatedfilesharing-social-twitter-000); } button.social-diaspora { - padding-left: 30px; - background-image: var(--icon-federatedfilesharing-social-diaspora-000); +padding-left: 30px; +background-image: var(--icon-federatedfilesharing-social-diaspora-000); } /* Flow */ #workflowengine .actions__item.colored { - background-color: var(--color-primary) !important; +background-color: var(--color-primary) !important; } #workflowengine .actions__item.colored button { - background-color: white; - color: var(--color-primary); +background-color: white; +color: var(--color-primary); } /* Calendar App*/ .datepicker-button-section button.button { - background-color: var(--color-main-background); - color: var(--color-main-text); - border: none; - max-width: 100px; - margin: auto; +background-color: var(--color-main-background); +color: var(--color-main-text); +border: none; +max-width: 100px; +margin: auto; } .mx-datepicker .mx-calendar td { - border: 0px; +border: 0px; } .icon-eye { - background-image: var(--icon-calendar-eye-808080); +background-image: var(--icon-calendar-eye-808080); } .icon-briefcase { - background-image: var(--icon-calendar-briefcase-808080); +background-image: var(--icon-calendar-briefcase-808080); } .icon-color-picker { - background-image: var(--icon-calendar-color-picker-808080); +background-image: var(--icon-calendar-color-picker-808080); } .icon-menu { - background-image: var(--icon-menu-808080); +background-image: var(--icon-menu-808080); } .mx-datepicker .mx-input-wrapper { - background-color: var(--input-background-color); +background-color: var(--input-background-color); } .mx-datepicker-main .mx-datepicker-footer .mx-btn:hover, .mx-datepicker-main .mx-datepicker-footer .mx-btn:focus { - background-color: var(--color-primary); - color: white; +background-color: var(--color-primary); +color: white; } .mx-datepicker .mx-input { - border: none; - margin-top: 0px; - margin-bottom: 0px; +border: none; +margin-top: 0px; +margin-bottom: 0px; } .datepicker-button-section.icon-leftarrow { - background-image: var(--icon-arrow-left-808080); +background-image: var(--icon-arrow-left-808080); } .datepicker-button-section.icon-rightarrow { - background-image: var(--icon-arrow-right-808080); +background-image: var(--icon-arrow-right-808080); } .button.datepicker-button-section__next, .button.datepicker-button-section__previous { - border: none; - margin: auto; +border: none; +margin: auto; } .new-event-today-view-section .button { - border-radius: 8px; +border-radius: 8px; } .icon-new-calendar { - background-image: var(--icon-calendar-calendar-808080); +background-image: var(--icon-calendar-calendar-808080); } .icon-new-calendar-with-task-list { - background-image: var(--icon-calendar-new-calendar-with-task-list-808080); +background-image: var(--icon-calendar-new-calendar-with-task-list-808080); } .icon-public { - background-image: var(--icon-public-808080); +background-image: var(--icon-public-808080); } #content-vue.app-calendar #app-navigation-vue .action-item.icon-share, #content-vue.app-calendar #app-navigation-vue .action-item.icon-shared, #content-vue.app-contacts #addressbook-list .icon-shared { - background-size: 12px; +background-size: 12px; } #content-vue.app-calendar .fc-scrollgrid { - padding-top: 14px; +padding-top: 14px; } #content-vue.app-calendar .fc-dayGridMonth-view table { - font-size: 1em; +font-size: 1em; } .icon-view-week { - background-image: var(--icon-calendar-view-week-808080); +background-image: var(--icon-calendar-view-week-808080); } .icon-view-day { - background-image: var(--icon-calendar-view-day-808080); +background-image: var(--icon-calendar-view-day-808080); } .icon-view-module { - background-image: var(--icon-calendar-view-module-808080); +background-image: var(--icon-calendar-view-module-808080); } .icon-view-list { - background-image: var(--icon-calendar-view-list-808080); +background-image: var(--icon-calendar-view-list-808080); } #content-vue.app-calendar .app-sidebar-tabs__tab a.active { - color: var(--color-text-light); +color: var(--color-text-light); } /* Notes App*/ #content-vue.app-notes li.app-navigation-entry.active, #content-vue.app-talk li.acli_wrapper.active { - background-color: var(--color-background-hover) !important; +background-color: var(--color-background-hover) !important; } #content-vue.app-notes .welcome-content .icon-files-dark { - background-size: 18px; +background-size: 18px; } #content-vue.app-notes button.icon-confirm::before, -#content.app-dashboard - ~ .popover - .action-input__form - .action-input__label::before { - content: var(--icon-confirm-fff); +#content.app-dashboard ~ .popover .action-input__form .action-input__label::before { +content: var(--icon-confirm-fff); } #content-vue.app-notes .welcome-content .icon-phone { - background-size: 11px; +background-size: 11px; } #content-vue.app-notes - #app-settings__header - .settings-button__icon - .material-design-icon__svg, +#app-settings__header +.settings-button__icon +.material-design-icon__svg, #content-vue.app-calendar - #app-settings - .settings-button__icon - .material-design-icon__svg, +#app-settings +.settings-button__icon +.material-design-icon__svg, #content-vue.app-calendar - ~ .popover - div[class^="property-"] - .material-design-icon__svg, +~ .popover +div[class^="property-"] +.material-design-icon__svg, #content-vue.app-calendar div[class^="property-"] .material-design-icon__svg, #content-vue.app-calendar - .app-sidebar - .app-sidebar__close - .material-design-icon__svg, +.app-sidebar +.app-sidebar__close +.material-design-icon__svg, #content-vue.app-calendar .app-sidebar-tabs__tab a { - color: var(--icon-inactive-color); +color: var(--icon-inactive-color); } .CodeMirror .CodeMirror-line::selection, .CodeMirror .CodeMirror-line > span::selection, .CodeMirror .CodeMirror-line > span > span::selection { - background: var(--color-primary); +background: var(--color-primary); } input[type="text"] + .icon-confirm, input[type="password"] + .icon-confirm, input[type="email"] + .icon-confirm { - background-color: var(--color-primary) !important; - background-image: var(--icon-confirm-fff) !important; - background-repeat: no-repeat !important; - background-position: center !important; +background-color: var(--color-primary) !important; +background-image: var(--icon-confirm-fff) !important; +background-repeat: no-repeat !important; +background-position: center !important; } input[type="text"] + .icon-confirm::before, input[type="password"] + .icon-confirm::before, input[type="email"] + .icon-confirm::before { - content: unset !important; +content: unset !important; } input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, input[type="password"]:not(:active):not(:hover):not(:focus) - + .icon-confirm:active, ++ .icon-confirm:active, input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, input[type="password"]:not(:active):not(:hover):not(:focus) - + .icon-confirm:hover, ++ .icon-confirm:hover, input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus, input[type="password"]:not(:active):not(:hover):not(:focus) - + .icon-confirm:focus, ++ .icon-confirm:focus, input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus { - border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; - border-left-color: transparent !important; +border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; +border-left-color: transparent !important; } #app-sidebar-vue .note-category .category input.icon-confirm:hover { - border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; +border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; } #app-sidebar-vue.app-sidebar - .app-sidebar-header__desc - .app-sidebar-header__menu { - background-color: var(--color-main-background); +.app-sidebar-header__desc +.app-sidebar-header__menu { +background-color: var(--color-main-background); } #content.app-settings - .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, +.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, #content.app-files - .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, +.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, #header - .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, +.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, #content-vue.app-bookmarks - .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, +.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, #content-vue.app-photos - .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, +.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before, #content-vue.app-talk - .icon.action-item__menutoggle.action-item__menutoggle--default-icon::before { - content: var(--icon-more-808080); - font-size: unset; - font-weight: unset; - font-style: unset; - font-family: unset; - line-height: unset; +.icon.action-item__menutoggle.action-item__menutoggle--default-icon::before{ +content: var(--icon-more-808080); +font-size: unset; +font-weight: unset; +font-style: unset; +font-family: unset; +line-height: unset; } #content-vue.app-bookmarks - .icon.action-item__menutoggle--primary.action-item__menutoggle--default-icon::before { - content: var(--icon-more-fff); +.icon.action-item__menutoggle--primary.action-item__menutoggle--default-icon::before { +content: var(--icon-more-fff); } #note-container .CodeMirror-code[contenteditable="true"]:hover, #note-container .CodeMirror-code[contenteditable="true"]:focus, #note-container .CodeMirror-code[contenteditable="true"]:active { - background-color: var(--color-main-background) !important; +background-color: var(--color-main-background) !important; } /* Tasks app*/ .action-item:not(.priority--high) .material-design-icon, #app-settings .collection .material-design-icon, .material-design-icon.emoticon-outline-icon { - color: var(--icon-inactive-color); +color: var(--icon-inactive-color); } .action.active .material-design-icon.delete-icon, .action-item:hover .material-design-icon.delete-icon { - color: var(--color-delete); +color: var(--color-delete); } #content-vue.app-tasks .app-sidebar-tabs .property__item--clearable { - color: var(--icon-active-color) !important; +color: var(--icon-active-color) !important; } #content-vue.app-tasks .app-sidebar-tabs .multiselect-picker-option.active { - color: var(--icon-active-color); +color: var(--icon-active-color); } /* Settings Apps categories icons */ .icon-category-app-bundles { - background-image: var(--icon-bundles-808080); +background-image: var(--icon-bundles-808080); } .icon-category-dashboard { - background-image: var(--icon-dashboard-dashboard-808080); +background-image: var(--icon-dashboard-dashboard-808080); } .icon-category-customization { - background-image: var(--icon-customization-808080); +background-image: var(--icon-customization-808080); } .icon-category-games { - background-image: var(--icon-games-808080); +background-image: var(--icon-games-808080); } .icon-category-integration { - background-image: var(--icon-integration-808080); +background-image: var(--icon-integration-808080); } .icon-category-monitoring { - background-image: var(--icon-monitoring-808080); +background-image: var(--icon-monitoring-808080); } .icon-category-multimedia { - background-image: var(--icon-multimedia-808080); +background-image: var(--icon-multimedia-808080); } .icon-category-office { - background-image: var(--icon-office-808080); +background-image: var(--icon-office-808080); } .icon-category-organization { - background-image: var(--icon-organization-808080); +background-image: var(--icon-organization-808080); } .icon-category-search { - background-image: var(--icon-search-808080); +background-image: var(--icon-search-808080); } .icon-category-workflow { - background-image: var(--icon-workflow-808080); +background-image: var(--icon-workflow-808080); } /* Bookmarks app */ .popover .action-button__icon.icon-link { - background-image: var(--icon-public-808080); +background-image: var(--icon-public-808080); } .controls svg path, .material-design-icon.earth-icon svg path { - fill: var(--icon-inactive-color); +fill: var(--icon-inactive-color); } .app-navigation-entry-icon .material-design-icon, .action .material-design-icon { - color: var(--icon-inactive-color); +color: var(--icon-inactive-color); } .app-navigation-entry.active .app-navigation-entry-icon .material-design-icon, .action.active .material-design-icon, .action.selected .material-design-icon { - color: var(--icon-active-color); +color: var(--icon-active-color); } .app-navigation-entry - .app-navigation-entry__inline-input-container - form - button.icon-confirm::before { - content: unset; +.app-navigation-entry__inline-input-container +form +button.icon-confirm::before { +content: unset; } .app-navigation-entry.active .icon-home { - background-image: var(--icon-home-007fff); +background-image: var(--icon-home-007fff); } #content-vue.app-bookmarks .app-navigation-entry-icon svg path { - fill: var(--icon-inactive-color); +fill: var(--icon-inactive-color); } #content-vue.app-bookmarks .app-navigation-entry.active svg path { - fill: var(--icon-active-color); +fill: var(--icon-active-color); } /* News App */ #content-vue.app-bookmarks .empty-content { - text-align: center; +text-align: center; } #app-navigation .icon-unpinned { - background-image: var(--icon-news-unpinned-808080); +background-image: var(--icon-news-unpinned-808080); } #app-navigation .icon-pinned { - background-image: var(--icon-news-pinned-808080); +background-image: var(--icon-news-pinned-808080); } #app-navigation .icon-full-text-disabled { - background-image: var(--icon-news-nonfulltext-808080); +background-image: var(--icon-news-nonfulltext-808080); } #app-navigation .icon-full-text-enabled { - background-image: var(--icon-news-fulltext-808080); +background-image: var(--icon-news-fulltext-808080); } /* Passwords App */ .searchbox .icon-search-force-white { - background-image: var(--icon-search-000); +background-image: var(--icon-search-000); } .searchbox { - opacity: 1 !important; +opacity: 1 !important; } #content.app-passwords #app-navigation .icon.fa::before { - content: unset; +content: unset; } /* Talk App */ #content-vue.app-talk .acli_wrapper .acli.active { - background-color: transparent; +background-color: transparent; } -#content-vue.app-talk #app-sidebar .username-form button.icon-rename, -button.edit-output-dir span.icon-rename { - background-image: var(--icon-rename-000); +#content-vue.app-talk #app-sidebar .username-form button.icon-rename, button.edit-output-dir span.icon-rename { +background-image: var(--icon-rename-000); } /* Google integration */ #google_prefs #google-content button.google-oauth { - background-color: var(--color-primary); +background-color: var(--color-primary); } #google-import-contacts .icon-contacts-dark { - background-image: var(--icon-contacts-000); +background-image: var(--icon-contacts-000); } #google-calendars button .icon-calendar-dark { - background-image: var(--icon-calendar-000); +background-image: var(--icon-calendar-000); } #google-import-files .icon-files-dark { - background-image: var(--icon-files-000); +background-image: var(--icon-files-000); } #google-import-photos .icon-picture { - background-image: var(--icon-picture-000); +background-image: var(--icon-picture-000); } /* remove opacity */ -button.edit-output-dir span.icon-rename, -#google-rm-cred .icon-close, -#google-import-photos .icon-picture, -#google-import-contacts .icon-contacts-dark, -#google-calendars button .icon-calendar-dark, -#google-import-files .icon-files-dark { - opacity: 1; +button.edit-output-dir span.icon-rename, #google-rm-cred .icon-close, #google-import-photos .icon-picture, #google-import-contacts .icon-contacts-dark, #google-calendars button .icon-calendar-dark, #google-import-files .icon-files-dark { +opacity: 1; } /** */ #header .header-right .magnify-icon > svg { - display: none; +display: none; } -.new-icons .color-icons { +.new-icons .color-icons{ background-image: url("../img/app-icons/other.svg"); - width: 100%; + width: 100% ; height: 80px; background-position: 50%; background-repeat: no-repeat; background-size: 60px; } -.new-icons .drive, -.new-icons .files { - background-image: url("../img/app-icons/Drive.svg"); -} -.new-icons .activity { - background-image: url("../img/app-icons/Activity.svg"); -} -.new-icons .bookmarks { - background-image: url("../img/app-icons/Bookmark.svg"); -} -.new-icons .calendar { - background-image: url("../img/app-icons/Calendar.svg"); -} -.new-icons .carnet { - background-image: url("../img/app-icons/Carnet.svg"); -} -.new-icons .contacts { - background-image: url("../img/app-icons/Contacts.svg"); -} -.new-icons .deck { - background-image: url("../img/app-icons/Deck.svg"); -} -.new-icons .docs { - background-image: url("../img/app-icons/Docs.svg"); -} -.new-icons .email, -.new-icons .rainloop { - background-image: url("../img/app-icons/E-mail.svg"); -} -.new-icons .gitlab { - background-image: url("../img/app-icons/Gitlab.svg"); -} -.new-icons .news { - background-image: url("../img/app-icons/News.svg"); -} -.new-icons .notes { - background-image: url("../img/app-icons/Notes.svg"); -} -.new-icons .presentation { - background-image: url("../img/app-icons/Presentation.svg"); -} -.new-icons .spreadsheet { - background-image: url("../img/app-icons/Spreadsheet.svg"); -} -.new-icons .tasks { - background-image: url("../img/app-icons/Tasks.svg"); -} -.new-icons .photos { - background-image: url("../img/app-icons/Gallery.svg"); -} -.new-icons .e-user-support-center { - background-image: url("../img/app-icons/Support.svg"); -} -.new-icons .passwords { - background-image: url("../img/app-icons/Password.svg"); -} -.new-icons .onlyoffice_docx { - background-image: url("../img/app-icons/Docs.svg"); -} -.new-icons .onlyoffice_xlsx { - background-image: url("../img/app-icons/Spreadsheet.svg"); -} -.new-icons .onlyoffice_pptx { - background-image: url("../img/app-icons/Presentation.svg"); -} - -#appmenu li:hover a, -#appmenu li a:focus { - font-size: 12px; - font-family: "Roboto"; - letter-spacing: 1px; -} -#filestable thead { - background-color: white !important ; -} -#recommendations { - height: 100px !important; -} -.recommendation { - border: 1px solid #e6e8e9; - padding: 10px !important; - margin-bottom: 5px; - border-radius: 6px !important; -} -progress { - border-radius: 10px 10px !important; - height: 12px !important; -} -#appmenu li a:focus .icon-more, -#appmenu li a:focus .icon-more-white { - transform: none !important; -} -#more-apps:hover span, -#more-apps:focus span, -#more-apps a:focus span { - display: none !important; -} +.new-icons .drive , .new-icons .files {background-image: url("../img/app-icons/Drive.svg");} +.new-icons .activity {background-image: url("../img/app-icons/Activity.svg");} +.new-icons .bookmarks {background-image: url("../img/app-icons/Bookmark.svg");} +.new-icons .calendar {background-image: url("../img/app-icons/Calendar.svg");} +.new-icons .carnet {background-image: url("../img/app-icons/Carnet.svg");} +.new-icons .contacts {background-image: url("../img/app-icons/Contacts.svg");} +.new-icons .deck {background-image: url("../img/app-icons/Deck.svg");} +.new-icons .docs {background-image: url("../img/app-icons/Docs.svg");} +.new-icons .email,.new-icons .rainloop {background-image: url("../img/app-icons/E-mail.svg");} +.new-icons .gitlab {background-image: url("../img/app-icons/Gitlab.svg");} +.new-icons .news {background-image: url("../img/app-icons/News.svg");} +.new-icons .notes {background-image: url("../img/app-icons/Notes.svg");} +.new-icons .presentation {background-image: url("../img/app-icons/Presentation.svg");} +.new-icons .spreadsheet {background-image: url("../img/app-icons/Spreadsheet.svg");} +.new-icons .tasks {background-image: url("../img/app-icons/Tasks.svg");} +.new-icons .photos {background-image: url("../img/app-icons/Gallery.svg");} +.new-icons .e-user-support-center {background-image: url("../img/app-icons/Support.svg");} +.new-icons .passwords {background-image: url("../img/app-icons/Password.svg");} +.new-icons .onlyoffice_docx {background-image: url("../img/app-icons/Docs.svg");} +.new-icons .onlyoffice_xlsx {background-image: url("../img/app-icons/Spreadsheet.svg");} +.new-icons .onlyoffice_pptx {background-image: url("../img/app-icons/Presentation.svg");} + +#appmenu li:hover a, #appmenu li a:focus { +font-size: 12px; +font-family: 'Roboto'; +letter-spacing: 1px; +} +#filestable thead{background-color: white !important ;} +#recommendations{height: 100px !important;} +.recommendation{border: 1px solid #E6E8E9;padding: 10px !important;margin-bottom: 5px;border-radius: 6px !important;} +progress{border-radius: 10px 10px !important;height: 12px !important;} +#appmenu li a:focus .icon-more, #appmenu li a:focus .icon-more-white {transform: none !important;} +#more-apps:hover span, #more-apps:focus span, #more-apps a:focus span{display: none !important;} button#quotaincreasebutton { - margin-top: 15px !important; -} -.app-cookbook .editingContainer .app-navigation-input-confirm__input:active+.app-navigation-input-confirm__confirm, -.app-cookbook .editingContainer .app-navigation-input-confirm__input:active+.app-navigation-input-confirm__confirm, -.app-cookbook .editingContainer .app-navigation-input-confirm__input:focus+.app-navigation-input-confirm__confirm, -.app-cookbook .editingContainer .app-navigation-input-confirm__input:focus+.app-navigation-input-confirm__confirm, -.app-cookbook .editingContainer .app-navigation-input-confirm__input:hover+.app-navigation-input-confirm__confirm, -.app-cookbook .editingContainer .app-navigation-input-confirm__input:hover+.app-navigation-input-confirm__confirm { - border-color: var(--color-primary-element); - border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; - border:1px solid var(--color-primary-element) !important; + margin-top: 15px !important; } @media only screen and (max-width: 640px) { - .new-icons .color-icons { - height: 50px; - background-size: 40px; - } - #launcher-menu { - width: 300px !important; - left: 10% !important; - } + .new-icons .color-icons { + height: 50px; + background-size: 40px; + } + #launcher-menu { + width: 300px !important; + left: 10% !important; + } } @media only screen and (max-width: 640px) { - #launcher-menu { - left: 5% !important; - } + #launcher-menu { + left: 5% !important; + } } .text-color-active { color: var(--icon-active-color); } -.margin-top-10 { - margin-top: 10px; +.margin-top-10{ +margin-top: 10px; } + + diff --git a/core/css/style.css b/core/css/style.css new file mode 100644 index 00000000..cd2a1dcb --- /dev/null +++ b/core/css/style.css @@ -0,0 +1,18 @@ +.app-cookbook .editingContainer .app-navigation-input-confirm__input:active+.app-navigation-input-confirm__confirm, .app-cookbook .editingContainer .app-navigation-input-confirm__input:active+.app-navigation-input-confirm__confirm, .app-cookbook .editingContainer .app-navigation-input-confirm__input:focus+.app-navigation-input-confirm__confirm, .app-cookbook .editingContainer .app-navigation-input-confirm__input:focus+.app-navigation-input-confirm__confirm,.app-cookbook .editingContainer .app-navigation-input-confirm__input:hover+.app-navigation-input-confirm__confirm, .app-cookbook .editingContainer .app-navigation-input-confirm__input:hover+.app-navigation-input-confirm__confirm { + border-color: var(--color-primary-element); + border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; + border:1px solid var(--color-primary-element) !important; + } + .cookbook-app-content .add-list-item{ + background-color: var(--color-primary); + color: white; + border-color: var(--color-primary); + } + .cookbook-app-content .cookbook-footer .button{ + background-color: var(--color-primary); + color: white; + border-color: var(--color-primary); + } + .cookbook-app-content .cookbook-footer .button span { + background-image: var(--icon-checkmark-ffffff); + } \ No newline at end of file -- GitLab