Merge pull request #13648 from nextcloud/darktheme-fix
🕶 Dark theme fixes
This commit is contained in:
commit
ccc35d5566
|
@ -19,11 +19,34 @@ $color-border-dark: lighten($color-main-background, 14%);
|
||||||
|
|
||||||
#app-navigation > ul > li > a:first-child,
|
#app-navigation > ul > li > a:first-child,
|
||||||
#app-navigation > ul > li > ul > li > a:first-child,
|
#app-navigation > ul > li > ul > li > a:first-child,
|
||||||
#expanddiv a {
|
#contactsmenu-menu a,
|
||||||
|
#expanddiv a,
|
||||||
|
.activity-section .activity-icon.monochrome {
|
||||||
img {
|
img {
|
||||||
filter: invert(100%);
|
filter: invert(100%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#navigation #apps li a,
|
||||||
|
#body-settings #content.app-settings .app-image-icon,
|
||||||
|
#body-settings #content.app-settings #app-sidebar #app-details-view h2 {
|
||||||
|
svg {
|
||||||
|
filter: invert(100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Otherwise icon-more gets inverted via function
|
||||||
|
#appmenu .icon-more-white {
|
||||||
|
filter: invert(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// since svg icons are inverted, revert to white for the header
|
||||||
|
.header-right > * {
|
||||||
|
[class^='icon-'], [class*=' icon-'] {
|
||||||
|
filter: invert(100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.bubble,
|
.bubble,
|
||||||
.app-navigation-entry-menu,
|
.app-navigation-entry-menu,
|
||||||
.popovermenu {
|
.popovermenu {
|
||||||
|
@ -44,8 +67,8 @@ $color-border-dark: lighten($color-main-background, 14%);
|
||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
// since svg icons are inverted, revert to white for the header
|
// Prevent slideshow icons from going dark
|
||||||
.header-right > * {
|
#slideshow {
|
||||||
[class^='icon-'], [class*=' icon-']{
|
[class^='icon-'], [class*=' icon-']{
|
||||||
filter: invert(100%);
|
filter: invert(100%);
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -2761,7 +2761,8 @@
|
||||||
"ansi-regex": {
|
"ansi-regex": {
|
||||||
"version": "2.1.1",
|
"version": "2.1.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"aproba": {
|
"aproba": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
|
@ -3176,7 +3177,8 @@
|
||||||
"safe-buffer": {
|
"safe-buffer": {
|
||||||
"version": "5.1.1",
|
"version": "5.1.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"safer-buffer": {
|
"safer-buffer": {
|
||||||
"version": "2.1.2",
|
"version": "2.1.2",
|
||||||
|
@ -3232,6 +3234,7 @@
|
||||||
"version": "3.0.1",
|
"version": "3.0.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"ansi-regex": "^2.0.0"
|
"ansi-regex": "^2.0.0"
|
||||||
}
|
}
|
||||||
|
@ -3275,12 +3278,14 @@
|
||||||
"wrappy": {
|
"wrappy": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"yallist": {
|
"yallist": {
|
||||||
"version": "3.0.2",
|
"version": "3.0.2",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -17,25 +17,22 @@
|
||||||
|
|
||||||
[class^="social-"], [class*=" social-"] {
|
[class^="social-"], [class*=" social-"] {
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: 2px;
|
background-position: 8px;
|
||||||
min-width: 16px;
|
min-width: 16px;
|
||||||
min-height: 16px;
|
min-height: 16px;
|
||||||
padding-left: 29px;
|
padding-left: 28px;
|
||||||
background-size: 24px;
|
background-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-gnu {
|
|
||||||
background-image: url('../img/social-gnu.svg');
|
|
||||||
}
|
|
||||||
.social-diaspora {
|
.social-diaspora {
|
||||||
background-image: url('../img/social-diaspora.svg');
|
@include icon-color('social-diaspora', 'federatedfilesharing', $color-black);
|
||||||
}
|
}
|
||||||
.social-twitter {
|
.social-twitter {
|
||||||
background-image: url('../img/social-twitter.svg');
|
@include icon-color('social-twitter', 'federatedfilesharing', $color-black);
|
||||||
}
|
}
|
||||||
.social-facebook {
|
.social-facebook {
|
||||||
background-image: url('../img/social-facebook.svg');
|
@include icon-color('social-facebook', 'federatedfilesharing', $color-black);
|
||||||
}
|
}
|
||||||
.social-googleplus {
|
.social-googleplus {
|
||||||
background-image: url('../img/social-googleplus.svg');
|
@include icon-color('social-googleplus', 'federatedfilesharing', $color-black);
|
||||||
}
|
}
|
|
@ -1 +1 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" height="32" id="Layer_1" viewBox="0 0 32 32" width="32"><style id="style4709">.st0{fill-rule:evenodd;clip-rule:evenodd}</style><path d="M12.26 1c-1.044 0-2.164.12-3.36.365-1.207.284-2.37.885-3.49 1.807C3.776 4.748 2.96 6.502 2.96 8.438c0 1.6.576 3.003 1.73 4.21 1.098 1.292 2.697 1.953 4.795 1.98.395 0 .818-.028 1.266-.078-.074.207-.155.43-.24.676-.1.23-.15.523-.15.87 0 .578.13 1.075.39 1.488.222.424.475.823.76 1.197-.92.026-2.075.142-3.466.346-1.405.244-2.746.73-4.02 1.458-1.138.678-1.924 1.465-2.356 2.36-.447.894-.67 1.71-.67 2.437 0 1.497.688 2.782 2.06 3.857 1.362 1.15 3.422 1.738 6.182 1.763 3.297-.05 5.82-.837 7.567-2.363 1.686-1.475 2.53-3.166 2.53-5.076-.026-1.343-.333-2.432-.923-3.266a13.466 13.466 0 0 0-2.184-2.247l-1.337-1.096a7.868 7.868 0 0 1-.596-.672c-.242-.27-.362-.607-.362-1.02 0-.422.118-.793.352-1.113.2-.31.416-.584.652-.827.41-.36.797-.712 1.16-1.057.33-.345.64-.723.933-1.133.6-.846.912-1.974.935-3.383 0-.77-.087-1.442-.26-2.018a7.594 7.594 0 0 0-1.596-2.633 5.256 5.256 0 0 0-.836-.673h2.43L20.14 1h-7.88zm12.418.17v4.134h-4.134v2.003h4.134v4.134h2.004V7.308h4.134V5.304h-4.134V1.17h-2.004zM9.823 2.304c.807.026 1.52.265 2.14.712.61.475 1.1 1.093 1.474 1.85.794 1.577 1.192 3.145 1.192 4.697 0 .36-.03.803-.088 1.33a4.06 4.06 0 0 1-.643 1.54c-.69.706-1.555 1.08-2.593 1.118-.82 0-1.55-.25-2.19-.752-.64-.5-1.16-1.11-1.563-1.83-.834-1.54-1.25-3.022-1.25-4.447a4.844 4.844 0 0 1 .856-2.927c.708-.835 1.595-1.265 2.663-1.29zm1.667 17.54c.09 0 .16.003.21.01.337 0 .632.01.884.038 1.47 1.026 2.548 1.89 3.24 2.595.65.743.976 1.613.976 2.613 0 1.233-.477 2.238-1.43 3.02-.978.795-2.396 1.205-4.253 1.23-2.07-.025-3.702-.486-4.894-1.382-1.255-.897-1.88-2.04-1.88-3.423 0-.704.143-1.307.433-1.806a4.11 4.11 0 0 1 .92-1.194 5.237 5.237 0 0 1 1.11-.71c.365-.155.646-.27.847-.347a16.935 16.935 0 0 1 2.504-.56c.62-.056 1.065-.085 1.333-.085z" id="path4713" opacity=".5"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" height="32" id="Layer_1" viewBox="0 0 32 32" width="32"><path d="M12.26 1c-1.044 0-2.164.12-3.36.365-1.207.284-2.37.885-3.49 1.807C3.776 4.748 2.96 6.502 2.96 8.438c0 1.6.576 3.003 1.73 4.21 1.098 1.292 2.697 1.953 4.795 1.98.395 0 .818-.028 1.266-.078-.074.207-.155.43-.24.676-.1.23-.15.523-.15.87 0 .578.13 1.075.39 1.488.222.424.475.823.76 1.197-.92.026-2.075.142-3.466.346-1.405.244-2.746.73-4.02 1.458-1.138.678-1.924 1.465-2.356 2.36-.447.894-.67 1.71-.67 2.437 0 1.497.688 2.782 2.06 3.857 1.362 1.15 3.422 1.738 6.182 1.763 3.297-.05 5.82-.837 7.567-2.363 1.686-1.475 2.53-3.166 2.53-5.076-.026-1.343-.333-2.432-.923-3.266a13.466 13.466 0 0 0-2.184-2.247l-1.337-1.096a7.868 7.868 0 0 1-.596-.672c-.242-.27-.362-.607-.362-1.02 0-.422.118-.793.352-1.113.2-.31.416-.584.652-.827.41-.36.797-.712 1.16-1.057.33-.345.64-.723.933-1.133.6-.846.912-1.974.935-3.383 0-.77-.087-1.442-.26-2.018a7.594 7.594 0 0 0-1.596-2.633 5.256 5.256 0 0 0-.836-.673h2.43L20.14 1h-7.88zm12.418.17v4.134h-4.134v2.003h4.134v4.134h2.004V7.308h4.134V5.304h-4.134V1.17h-2.004zM9.823 2.304c.807.026 1.52.265 2.14.712.61.475 1.1 1.093 1.474 1.85.794 1.577 1.192 3.145 1.192 4.697 0 .36-.03.803-.088 1.33a4.06 4.06 0 0 1-.643 1.54c-.69.706-1.555 1.08-2.593 1.118-.82 0-1.55-.25-2.19-.752-.64-.5-1.16-1.11-1.563-1.83-.834-1.54-1.25-3.022-1.25-4.447a4.844 4.844 0 0 1 .856-2.927c.708-.835 1.595-1.265 2.663-1.29zm1.667 17.54c.09 0 .16.003.21.01.337 0 .632.01.884.038 1.47 1.026 2.548 1.89 3.24 2.595.65.743.976 1.613.976 2.613 0 1.233-.477 2.238-1.43 3.02-.978.795-2.396 1.205-4.253 1.23-2.07-.025-3.702-.486-4.894-1.382-1.255-.897-1.88-2.04-1.88-3.423 0-.704.143-1.307.433-1.806a4.11 4.11 0 0 1 .92-1.194 5.237 5.237 0 0 1 1.11-.71c.365-.155.646-.27.847-.347a16.935 16.935 0 0 1 2.504-.56c.62-.056 1.065-.085 1.333-.085z" id="path4713" opacity=".5"/></svg>
|
||||||
|
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.8 KiB |
|
@ -694,8 +694,8 @@ nav[role='navigation'] {
|
||||||
color: var(--color-primary-text);
|
color: var(--color-primary-text);
|
||||||
width: 155px;
|
width: 155px;
|
||||||
cursor: text;
|
cursor: text;
|
||||||
background-color: var(--color-primary) !important;
|
background-color: transparent !important;
|
||||||
border: 1px solid var(--color-primary-text-dark) !important;
|
border: 1px solid var(--color-border) !important;
|
||||||
}
|
}
|
||||||
&:hover, &:focus, &:active {
|
&:hover, &:focus, &:active {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
|
@ -230,7 +230,7 @@ select {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
background: url('../img/actions/triangle-s.svg') no-repeat right 4px center;
|
background: var(--icon-triangle-s-000) no-repeat right 4px center;
|
||||||
background-color: inherit;
|
background-color: inherit;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
padding-right: 24px !important;
|
padding-right: 24px !important;
|
||||||
|
@ -431,7 +431,7 @@ div.select2-drop {
|
||||||
}
|
}
|
||||||
.select2-search input {
|
.select2-search input {
|
||||||
min-height: auto;
|
min-height: auto;
|
||||||
background: url('../img/actions/search.svg') no-repeat right center !important;
|
background: var(--icon-search-000) no-repeat right center !important;
|
||||||
background-origin: content-box !important;
|
background-origin: content-box !important;
|
||||||
}
|
}
|
||||||
.select2-results {
|
.select2-results {
|
||||||
|
@ -554,7 +554,7 @@ div.select2-container {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: none;
|
border: none;
|
||||||
b {
|
b {
|
||||||
background: url('../img/actions/triangle-s.svg') no-repeat center !important;
|
background: var(--icon-triangle-s-000) no-repeat center !important;
|
||||||
opacity: .5;
|
opacity: .5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -619,7 +619,7 @@ div.select2-container {
|
||||||
color: inherit !important;
|
color: inherit !important;
|
||||||
&::before {
|
&::before {
|
||||||
content: ' ';
|
content: ' ';
|
||||||
background-image: url('../img/actions/checkmark.svg?v=1');
|
background-image: var(--icon-checkmark-000);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
min-width: 16px;
|
min-width: 16px;
|
||||||
|
@ -809,7 +809,7 @@ div.select2-container {
|
||||||
/* selected checkmark icon */
|
/* selected checkmark icon */
|
||||||
&::before {
|
&::before {
|
||||||
content: ' ';
|
content: ' ';
|
||||||
background-image: url('../img/actions/checkmark.svg?v=1');
|
background-image: var(--icon-checkmark-000);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
min-width: 16px;
|
min-width: 16px;
|
||||||
|
@ -828,7 +828,7 @@ div.select2-container {
|
||||||
*/
|
*/
|
||||||
&[data-select='create'] {
|
&[data-select='create'] {
|
||||||
&::before {
|
&::before {
|
||||||
background-image: url('../img/actions/add.svg?v=1');
|
background-image: var(--icon-add-000);
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -51,7 +51,7 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
background: url('../img/actions/close.svg') no-repeat center;
|
background: var(--icon-close-000) no-repeat center;
|
||||||
opacity: .5;
|
opacity: .5;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
|
|
|
@ -290,7 +290,7 @@ label.infield {
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
background-image: url('../img/actions/toggle.svg?v=1');
|
background-image: var(--icon-toggle-000);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
opacity: .3;
|
opacity: .3;
|
||||||
|
@ -312,8 +312,9 @@ label.infield {
|
||||||
#personal-show + label {
|
#personal-show + label {
|
||||||
display: block;
|
display: block;
|
||||||
right: 0;
|
right: 0;
|
||||||
margin-top: -36px;
|
margin-top: -41px;
|
||||||
padding: 6px 4px;
|
margin-right: -6px;
|
||||||
|
padding: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Warnings and errors are the same */
|
/* Warnings and errors are the same */
|
||||||
|
@ -709,7 +710,7 @@ code {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
div:first-child a {
|
div:first-child a {
|
||||||
background-image: url('../img/places/home.svg?v=1');
|
background-image: var(--icon-home-000);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: left center;
|
background-position: left center;
|
||||||
}
|
}
|
||||||
|
@ -743,6 +744,7 @@ code {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// keyboard focus
|
// keyboard focus
|
||||||
#picker-showgridview:focus + #picker-view-toggle {
|
#picker-showgridview:focus + #picker-view-toggle {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
@ -768,7 +770,6 @@ code {
|
||||||
max-height: 36px;
|
max-height: 36px;
|
||||||
width: 36px;
|
width: 36px;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
|
@ -739,23 +739,27 @@ span.usersLastLoginTooltip {
|
||||||
&.appwarning:hover {
|
&.appwarning:hover {
|
||||||
background: #fbb;
|
background: #fbb;
|
||||||
}
|
}
|
||||||
.app-external, .app-version {
|
.app-external {
|
||||||
color: rgba(85, 85, 85, 0.5);
|
color: var(--color-text-maxcontrast);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
span.version {
|
span.version {
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
margin-right: 1em;
|
margin-right: 1em;
|
||||||
color: #555;
|
color: var(--color-text-maxcontrast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-version {
|
||||||
|
color: var(--color-text-maxcontrast);
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-level {
|
.app-level {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
span {
|
span {
|
||||||
color: #555;
|
color: var(--color-text-maxcontrast);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: 1px solid #555;
|
border: 1px solid var(--color-text-maxcontrast);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
padding: 3px 6px;
|
padding: 3px 6px;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue