dark background color header (23c455bf) · Commits · e / infra / ecloud / nextcloud-apps / nextcloud-theme

core/css/server.css

+1705 −1695

Original line number	Diff line number	Diff line
		@@ -17,8 +17,7 @@
		*/
		@font-face {
		font-family: 'Roboto';
		src: url('../webfonts/Roboto-Regular.woff2') format('woff2'),
		url('../webfonts/Roboto-Regular.woff') format('woff');
		src: url('../webfonts/Roboto-Regular.woff2') format('woff2'), url('../webfonts/Roboto-Regular.woff') format('woff');
		/* font-weight: 600; */
		/* font-style: normal; */
		font-display: swap;
		@@ -37,6 +36,7 @@
		--color-delete: #e9322d;
		--color-success: #3ad975;
		--color-main-background: #ffffff;
		--color-main-background-header: #ffffff;
		--color-main-background-translucent: #f2f2f2;
		--color-main-text: black;
		--color-background-hover: white;
		@@ -51,14 +51,19 @@
		--color-dashboard-panels: #f2f2f2;
		--color-dashboard-background-plain: #d2d2d2;
		--color-sharing-icon-background: #767676;
		--logo: url("../img/logo@2x.svg");
		--notification-icon-invert: invert(0%);
		}

		/* Force a few variables to right values for dark theme */
		body.theme--dark {
		--color-main-background-header: #272727;
		--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");
		--icon-search-000: url("/svg/core/actions/search?color=fff");
		--logo: url("../img/logo@2x-dark.svg");
		--notification-icon-invert: invert(100%);
		}

		body.theme--highcontrast {
		@@ -68,7 +73,7 @@
		#body-user #header,
		#body-settings #header,
		#body-public #header {
		background-color: white !important;
		background-color: var(--color-main-background-header) !important;
		}

		button:not(:disabled):hover,
		@@ -174,11 +179,7 @@
		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,
		.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);
		@@ -206,28 +207,11 @@
		.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,
		.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 {
		@@ -236,7 +220,7 @@
		/* use logos from theme */
		#header .logo,
		#firstrunwizard .logo {
		background-image: url("../img/logo@2x.svg");
		background-image: var(--logo);
		width: 256px;
		height: 128px;
		}
		@@ -244,7 +228,7 @@
		width: 130px;
		height: 40px;
		top: 5px;
		bottom: 0px;
		bottom: 0;
		border-radius: 22px;
		}

		@@ -255,6 +239,7 @@
		#header .notifications .svg {
		height: 17px;
		width: 17px;
		filter: var(--notification-icon-invert);
		}

		/*
		@@ -332,7 +317,7 @@
		background-image: var(--icon-folder-drag-accept-007fff) !important;
		}
		#header .logo {
		background-image: url("../img/logo@2x.svg");
		background-image: var(--logo);
		}
		#body-user #header,
		#body-settings #header,
		@@ -412,9 +397,7 @@
		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 {
		#content-vue.app-tasks #app-navigation-vue .app-navigation-entry-icon.sprt-add::before {
		background-image: var(--icon-add-808080);
		}

		@@ -638,9 +621,7 @@

		#header #searchbox {
		color: var(--color-main-text);
		border-color: var(
		--icon-inactive-color
		) !important; /* !important used in source so needed to override */
		border-color: var(--icon-inactive-color) !important; /* !important used in source so needed to override */
		}

		#app-navigation,
		@@ -676,10 +657,7 @@

		/* Dashboard App */

		#body-user[data-dashboard-background]:not(.theme--dark)
		#app-dashboard
		.statuses
		button:hover,
		#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;
		}
		@@ -690,14 +668,8 @@
		}

		#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 {
		#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; */
		}
		@@ -722,16 +694,9 @@
		}

		#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 {
		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);
		}
		@@ -758,18 +723,9 @@

		.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 {
		#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);
		}

		@@ -787,7 +743,7 @@

		#content.app-files #filestable.view-grid thead tr,
		#content.app-files #filestable.view-grid thead th {
		border-bottom: 0px;
		border-bottom: 0;
		}

		#content.app-files #controls .icon-shared {
		@@ -938,10 +894,7 @@
		#collection-list .multiselect .multiselect__tags .multiselect__input {
		background-color: transparent !important;
		}
		#collection-list
		.multiselect.multiselect--active
		.multiselect__tags
		.multiselect__input {
		#collection-list .multiselect.multiselect--active .multiselect__tags .multiselect__input {
		background-color: var(--input-background-color) !important;
		}
		#app-sidebar-vue #sharing .sharing-entry .avatar-external,
		@@ -972,14 +925,8 @@

		/* 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 {
		#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;
		}

		@@ -1003,10 +950,7 @@
		}

		#content-vue.app-contacts .multiselect .multiselect__tags .multiselect__input,
		#content-vue.app-contacts
		.multiselect
		> .multiselect__tags
		> .multiselect__single {
		#content-vue.app-contacts .multiselect > .multiselect__tags > .multiselect__single {
		background-color: var(--color-main-background) !important;
		}

		@@ -1024,10 +968,7 @@
		height: 80px;
		}

		#content-vue.app-contacts
		#addressbook-list
		.addressbook-shares
		.multiselect__content {
		#content-vue.app-contacts #addressbook-list .addressbook-shares .multiselect__content {
		background-color: var(--color-secondary-element);
		}

		@@ -1072,8 +1013,7 @@
		}
		.action-button .icon-upload,
		.menuitem .icon-upload,
		button.import-contact__button--local:disabled .import-contact__button-icon.icon-upload
		{
		button.import-contact__button--local:disabled .import-contact__button-icon.icon-upload {
		background-image: var(--icon-upload-808080);
		}

		@@ -1120,10 +1060,7 @@
		fill: var(--icon-inactive-color);
		}

		#content-vue.app-contacts
		~ .popover
		.action-input
		.action-input__label::before {
		#content-vue.app-contacts ~ .popover .action-input .action-input__label::before {
		content: unset;
		}

		@@ -1296,7 +1233,7 @@
		margin: auto;
		}
		.mx-datepicker .mx-calendar td {
		border: 0px;
		border: 0;
		}

		.icon-eye {
		@@ -1325,8 +1262,8 @@

		.mx-datepicker .mx-input {
		border: none;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-top: 0;
		margin-bottom: 0;
		}

		.datepicker-button-section.icon-leftarrow {
		@@ -1411,23 +1348,11 @@
		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-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 .app-sidebar__close .material-design-icon__svg,
		#content-vue.app-calendar .app-sidebar-tabs__tab a {
		color: var(--icon-inactive-color);
		}
		@@ -1453,16 +1378,13 @@
		}

		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="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="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="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;
		@@ -1471,14 +1393,11 @@
		#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 {
		#app-sidebar-vue.app-sidebar .app-sidebar-header__desc .app-sidebar-header__menu {
		background-color: var(--color-main-background);
		}

		#content-vue.app-bookmarks
		.icon.action-item__menutoggle--primary.action-item__menutoggle--default-icon::before {
		#content-vue.app-bookmarks .icon.action-item__menutoggle--primary.action-item__menutoggle--default-icon::before {
		content: var(--icon-more-fff);
		}

		@@ -1566,10 +1485,7 @@
		color: var(--icon-active-color);
		}

		.app-navigation-entry
		.app-navigation-entry__inline-input-container
		form
		button.icon-confirm::before {
		.app-navigation-entry .app-navigation-entry__inline-input-container form button.icon-confirm::before {
		content: unset;
		}
		.app-navigation-entry.active .icon-home {
		@@ -1623,7 +1539,8 @@
		background-color: transparent;
		}

		#content-vue.app-talk #app-sidebar .username-form button.icon-rename, button.edit-output-dir span.icon-rename {
		#content-vue.app-talk #app-sidebar .username-form button.icon-rename,
		button.edit-output-dir span.icon-rename {
		background-image: var(--icon-rename-000);
		}

		@@ -1650,7 +1567,12 @@
		}

		/* 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 {
		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;
		}
		/** */
		@@ -1665,40 +1587,107 @@
		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,.new-icons .snappymail {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");}
		.new-icons .cookbook {background-image: url("../img/app-icons/Cookbook.svg");}

		#appmenu li:hover a, #appmenu li a:focus {
		.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,
		.new-icons .snappymail {
		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");
		}
		.new-icons .cookbook {
		background-image: url("../img/app-icons/Cookbook.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;}
		#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;
		@@ -1735,3 +1724,24 @@ body.theme--highcontrast svg.material-design-icon__svg{
		font-size: 12px;
		color: var(--color-text-lighter);
		}
		body.theme--dark #header #appmenu li a {
		opacity: 1;
		}
		body.theme--highcontrast #header #appmenu li a {
		opacity: 1;
		filter: invert(1);
		}
		body.theme--highcontrast #header #appmenu li a.active {
		filter: invert(0);
		}
		body.theme--dark.theme--highcontrast #header #appmenu li .icon-more-white {
		background-image: var(--icon-more-000);
		}
		body.theme--dark.theme--highcontrast #header .header-menu.unified-search a.header-menu__trigger,
		body.theme--dark.theme--highcontrast #header .notifications-button.hasNotifications {
		opacity: 1 !important;
		}
		body.theme--dark.theme--highcontrast #header #appmenu li:hover a,
		body.theme--dark.theme--highcontrast #header #appmenu li:focus a {
		color: #000;
		}

core/img/logo@2x-dark.svg

0 → 100644

+55 −0

File added.

Preview size limit exceeded, changes collapsed.