sascha
/
nextcloud-server
mirror of https://github.com/nextcloud/server.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix for darken/lighten vars and new global colours vars to unify design 

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
pull/9723/head
John Molakvoæ (skjnldsv) 2018-06-03 21:06:27 +07:00
parent 71ce8f3107
commit 4d9f20113d
No known key found for this signature in database
GPG Key ID: 60C25B8C072916CF
8 changed files with 116 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
core/css/apps.scss
Unescape Escape View File

@ -250,7 +250,7 @@ kbd {
box-sizing: border-box;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--color-main-text);
color: var(--color-error);
opacity: .57;
flex: 1 1 0px;
z-index: 100; /* above the bullet to allow click*/
@ -553,9 +553,6 @@ kbd {
.error {
color: var(--color-error);
}
.app-navigation-separator {
border-bottom: 1px solid nc-lighten($color-main-text, 86%);
}
.app-navigation-entry-utils ul,
.app-navigation-entry-menu ul {
@ -704,7 +701,7 @@ kbd {
.section {
display: block;
padding: 30px;
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
margin-bottom: 24px;
&.hidden {
display: none !important;
@ -745,18 +742,18 @@ kbd {
float: left;
padding: 5px;
cursor: pointer;
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
margin-bottom: 1px;
a {
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
margin-bottom: 1px;
}
&.selected {
font-weight: 600;
border-bottom: 1px solid nc-lighten($color-main-text, 20%);
border-bottom: 1px solid var(--color-border);
}
&:hover {
border-bottom: 1px solid nc-lighten($color-main-text, 20%);
border-bottom: 1px solid var(--color-border);
}
&.selected, &:hover {
margin-bottom: 0px;
@ -1013,7 +1010,7 @@ $popovericon-size: 16px;
/* CONTENT LIST ------------------------------------------------------------- */
.app-content-list {
width: 300px;
border-right: 1px solid nc-darken($color-main-background, 8%);
border-right: 1px solid var(--color-border);
display: flex;
flex-direction: column;
transition: transform 250ms ease-in-out;
@ -1022,7 +1019,7 @@ $popovericon-size: 16px;
.app-content-list-item {
position: relative;
height: 68px;
border-top: 1px solid nc-darken($color-main-background, 8%);
border-top: 1px solid var(--color-border);
cursor: pointer;
padding: 10px 7px;
display: flex;
@ -1061,7 +1058,7 @@ $popovericon-size: 16px;
&:hover, &:focus,
&.active {
background-color: nc-darken($color-main-background, 6%);
background-color: var(--color-background-dark);
}
.app-content-list-item-checkbox.checkbox + label,

13
core/css/css-variables.scss
Unescape Escape View File

@ -5,13 +5,21 @@
:root {
--color-main-text: $color-main-text;
--color-main-background: $color-main-background;
--color-background-dark: $color-background-dark;
--color-background-darker: $color-background-darker;
--color-primary: $color-primary;
--color-primary-text: $color-primary-text;
--color-primary-text-dark: $color-primary-text-dark;
--color-primary-element: $color-primary-element;
--color-error: $color-error;
--color-warning: $color-warning;
--color-success: $color-success;
--color-primary-element: $color-primary-element;
--color-text-maxcontrast: $color-text-maxcontrast;
--color-text-lighter: $color-text-lighter;
--color-text-details: $color-text-details;
--image-logo: $image-logo;
@ -19,8 +27,11 @@
--color-loading: $color-loading;
--color-loading-dark: $color-loading-dark;
--color-box-shadow: $color-box-shadow;
--color-border: $color-border;
--color-border-dark: $color-border-dark;
--border-radius: $border-radius;
}

79
core/css/inputs.scss
Unescape Escape View File

@ -43,8 +43,8 @@ div[contenteditable=true],
padding: 7px 6px;
font-size: 13px;
background-color: var(--color-main-background);
color: nc-lighten($color-main-text, 33%);
border: 1px solid nc-darken($color-main-background, 14%);
color: var(--color-text-lighter);
border: 1px solid var(--color-border-dark);
outline: none;
border-radius: var(--border-radius);
cursor: text;
@ -62,7 +62,7 @@ div[contenteditable=true],
}
}
&:disabled {
background-color: nc-darken($color-main-background, 8%);
background-color: var(--color-background-dark);
color: rgba(var(--color-main-text), 0.4);
cursor: default;
opacity: 0.5;
@ -91,7 +91,7 @@ div[contenteditable=true],
}
&:disabled {
background-color: rgba(var(--color-primary-element), .7);
color: nc-lighten($color-main-text, 73%);
color: var(--color-primary-text-dark);
}
}
}
@ -101,13 +101,13 @@ div[contenteditable=false] {
padding: 7px 6px;
font-size: 13px;
background-color: var(--color-main-background);
color: nc-lighten($color-main-text, 33%);
border: 1px solid nc-darken($color-main-background, 14%);
color: var(--color-text-lighter);
border: 1px solid var(--color-background-darker);
outline: none;
border-radius: var(--border-radius);
cursor: text;
background-color: nc-darken($color-main-background, 8%);
background-color: var(--color-background-dark);
color: rgba(var(--color-main-text), 0.4);
cursor: default;
opacity: 0.5;
@ -155,7 +155,7 @@ input[type='reset'] {
min-height: 34px;
cursor: pointer;
box-sizing: border-box;
background-color: nc-darken($color-main-background, 3%);
background-color: var(--color-background-dark);
}
/* Buttons */
@ -182,7 +182,7 @@ button, .button {
}
textarea, div[contenteditable=true] {
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
cursor: text;
font-family: inherit;
height: auto;
@ -190,14 +190,14 @@ textarea, div[contenteditable=true] {
&:active,
&:hover,
&:focus {
border-color: nc-darken($color-main-background, 14%) !important;
border-color: var(--color-background-darker) !important;
background-color: var(--color-main-background) !important;
}
}
}
div[contenteditable=false] {
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
cursor: text;
font-family: inherit;
height: auto;
@ -245,7 +245,7 @@ input {
border-color: var(--color-primary-element) !important;
border-radius: var(--border-radius) !important;
&:disabled {
border-color: nc-darken($color-main-background, 14%) !important;
border-color: var(--color-background-darker) !important;
}
}
}
@ -347,8 +347,9 @@ input {
}
}
/* We do not use the nc-darken function as this si not supposed to be changed */
--color-checkbox-radio-white: #fff;
/* We do not use the nc-darken function as this is not supposed to be changed */
$color-checkbox-radio-white: #fff;
--color-checkbox-radio-white: $color-checkbox-radio-white;
&.radio--white,
&.checkbox--white {
+ label:before,
@ -395,7 +396,7 @@ input {
margin-top: -2px;
background-color: var(--color-main-background);
&.select2-drop-active {
border-color: nc-darken($color-main-background, 14%);
border-color: var(--color-border-dark);
}
.avatar {
display: inline-block;
@ -430,15 +431,15 @@ input {
padding: 12px;
background-color: transparent;
cursor: pointer;
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
}
.select2-result {
&.select2-selected {
background-color: nc-darken($color-main-background, 3%);
background-color: var(--color-background-dark);
}
}
.select2-highlighted {
background-color: nc-darken($color-main-background, 3%);
background-color: var(--color-background-dark);
color: var(--color-main-text);
}
}
@ -457,10 +458,10 @@ input {
white-space: nowrap;
text-overflow: ellipsis;
background: var(--color-main-background);
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
box-sizing: content-box;
border-radius: var(--border-radius);
border: 1px solid nc-darken($color-main-background, 14%);
border: 1px solid var(--color-border-dark);
margin: 0;
padding: 2px 0;
min-height: auto;
@ -473,8 +474,8 @@ input {
& {
background-image: none;
background-color: var(--color-main-background);
color: nc-lighten($color-main-text, 33%);
border: 1px solid nc-darken($color-main-background, 14%);
color: var(--color-text-lighter);
border: 1px solid var(--color-border-dark);
}
.select2-search-choice-close {
display: none;
@ -502,10 +503,10 @@ input {
white-space: nowrap;
text-overflow: ellipsis;
background: var(--color-main-background);
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
box-sizing: content-box;
border-radius: var(--border-radius);
border: 1px solid nc-darken($color-main-background, 14%);
border: 1px solid var(--color-border-dark);
margin: 0;
padding: 2px 0;
padding-left: 6px;
@ -514,8 +515,8 @@ input {
line-height: 20px;
padding-left: 5px;
background-image: none;
background-color: nc-darken($color-main-background, 3%);
border-color: nc-darken($color-main-background, 3%);
background-color: var(--color-background-dark);
border-color: var(--color-background-dark);
.select2-search-choice-close {
display: none;
}
@ -557,8 +558,8 @@ input {
padding-left: 5px;
background-image: none;
background-color: var(--color-main-background);
color: nc-lighten($color-main-text, 33%);
border: 1px solid nc-darken($color-main-background, 14%);
color: var(--color-text-lighter);
border: 1px solid var(--color-border-dark);
display: inline-flex;
align-items: center;
.close {
@ -574,7 +575,7 @@ input {
display: list-item;
background-color: transparent;
cursor: pointer;
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
a {
white-space: nowrap;
overflow: hidden;
@ -610,7 +611,7 @@ input {
color: var(--color-main-text);
}
&.active > a {
background-color: nc-darken($color-main-background, 3%);
background-color: var(--color-background-dark);
color: var(--color-main-text);
&::before {
visibility: visible;
@ -638,7 +639,7 @@ input {
}
&.multiselect--disabled,
&.multiselect--disabled .multiselect__single {
background-color: nc-darken($color-main-background, 8%) !important;
background-color: var(--color-background-dark) !important;
}
.multiselect__tags {
/* space between tags and limit tag */
@ -647,7 +648,7 @@ input {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
border: 1px solid nc-darken($color-main-background, 14%);
border: 1px solid var(--color-border-dark);
cursor: pointer;
position: relative;
border-radius: 3px;
@ -676,8 +677,8 @@ input {
line-height: 20px;
padding: 1px 5px;
background-image: none;
color: nc-lighten($color-main-text, 33%);
border: 1px solid nc-darken($color-main-background, 14%);
color: var(--color-text-lighter);
border: 1px solid var(--color-border-dark);
display: inline-flex;
align-items: center;
border-radius: 3px;
@ -717,7 +718,7 @@ input {
.multiselect__limit {
flex: 0 0 auto;
line-height: 20px;
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
display: inline-flex;
align-items: center;
opacity: .7;
@ -745,7 +746,7 @@ input {
position: absolute;
width: 100%;
margin-top: -1px;
border: 1px solid nc-darken($color-main-background, 14%);
border: 1px solid var(--color-border-dark);
background: var(--color-main-background);
z-index: 50;
max-height: 250px;
@ -779,7 +780,7 @@ input {
display: inline-flex;
align-items: center;
background-color: transparent !important;
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
width: 100%;
/* selected checkmark icon */
&::before {
@ -795,7 +796,7 @@ input {
visibility: hidden;
}
&.multiselect__option--disabled {
background-color: nc-darken($color-main-background, 8%);
background-color: var(--color-background-dark);
opacity: .5;
}
/* add the prop tag-placeholder="create" to add the +
@ -830,7 +831,7 @@ progress {
width: 100%;
padding: 0;
border: 0 none;
background-color: nc-darken($color-main-background, 10%);
background-color: var(--color-background-dark);
border-radius: var(--border-radius);
flex-basis: 100%;
height: 5px;

8
core/css/jquery-ui-fixes.scss
Unescape Escape View File

@ -1,7 +1,7 @@
/* Component containers
----------------------------------*/
.ui-widget-content {
border: 1px solid nc-darken($color-main-background, 20%);
border: 1px solid var(--color-border);
background: var(--color-main-background) none;
color: var(--color-main-text);
}
@ -22,7 +22,7 @@
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: 1px solid nc-darken($color-main-background, 20%);
border: 1px solid var(--color-border);
background: var(--color-main-background) none;
font-weight: bold;
color: #555;
@ -70,12 +70,12 @@
.ui-widget-header .ui-state-highlight {
border: 1px solid var(--color-main-background);
background: var(--color-main-background) none;
color: nc-lighten($color-main-text, 30%);
color: var(--color-text-lighter);
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
color: nc-lighten($color-main-text, 30%);
color: var(--color-text-lighter);
}
.ui-state-error,
.ui-widget-content .ui-state-error,

2
core/css/jquery.ocdialog.scss
Unescape Escape View File

@ -1,6 +1,6 @@
.oc-dialog {
background: var(--color-main-background);
color: nc-darken($color-main-text, 20%);
color: var(--color-text-light);
border-radius: var(--border-radius);
box-shadow: 0 0 7px var(--color-box-shadow);
padding: 15px;

2
core/css/share.scss
Unescape Escape View File

@ -131,7 +131,7 @@
}
#link {
border-top: 1px solid nc-darken($color-main-background, 14%);
border-top: 1px solid var(--color-border);
padding-top: 8px;
#showPassword img {
padding-left: 5px;

45
core/css/styles.scss
Unescape Escape View File

@ -153,7 +153,7 @@ body {
color: var(--color-primary-text);
border-bottom: 2px dotted var(--color-main-background);
&:hover, &:focus {
color: nc-lighten($color-main-text, 86%);
color: var(--color-primary-text-dark);
}
}
}
@ -170,7 +170,7 @@ body {
}
::-webkit-scrollbar-thumb {
background: nc-darken($color-main-background, 14%);
background: var(--color-background-darker);
border-radius: var(--border-radius);
}
@ -303,7 +303,7 @@ body {
#emptycontent,
.emptycontent {
color: nc-lighten($color-main-text, 53%);
color: var(--color-text-maxcontrast);
text-align: center;
margin-top: 30vh;
width: 100%;
@ -363,7 +363,7 @@ body {
}
a {
color: var(--color-primary-text);
border-bottom: 1px solid nc-darken($color-main-background, 27%);
border-bottom: 1px solid var(--color-background-darker);
}
}
.infogroup {
@ -616,7 +616,6 @@ label.infield {
}
/* Database selector */
#body-login {
form #selectDbType {
text-align: center;
@ -629,17 +628,17 @@ label.infield {
position: static;
margin: 0 -3px 5px;
font-size: 12px;
background: nc-darken($color-main-background, 3%);
color: nc-lighten($color-main-text, 53%);
background: var(--color-background-dark);
color: var(--color-text-lighter);
cursor: pointer;
border: 1px solid nc-darken($color-main-background, 14%);
border: 1px solid var(--color-border-dark);
span {
cursor: pointer;
padding: 10px 20px;
}
&.ui-state-hover, &.ui-state-active {
color: var(--color-main-text);
background-color: nc-darken($color-main-background, 8%);
background-color: var(--color-border);
}
}
}
@ -691,7 +690,7 @@ label.infield {
color: var(--color-primary-text) !important;
font-weight: 600 !important;
&.button {
color: nc-lighten($color-main-text, 33%) !important;
color: var(--color-text-lighter) !important;
display: inline-block;
text-align: center;
}
@ -922,7 +921,7 @@ tr {
tbody tr {
&:hover, &:focus, &:active {
background-color: nc-darken($color-main-background, 3%);
background-color: var(--color-background-dark);
}
}
@ -995,7 +994,7 @@ code {
.ui-datepicker-calendar {
th {
font-weight: normal;
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
opacity: .8;
width: 26px;
padding: 2px;
@ -1005,7 +1004,7 @@ code {
}
td {
&.ui-datepicker-today a:not(.ui-state-hover) {
background-color: nc-lighten($color-main-text, 86%);
background-color: var(--color-background-darker);
}
&.ui-datepicker-current-day a.ui-state-active,
@ -1018,7 +1017,7 @@ code {
&.ui-datepicker-week-end:not(.ui-state-disabled) :not(.ui-state-hover),
.ui-priority-secondary:not(.ui-state-hover) {
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
opacity: .8;
}
}
@ -1026,7 +1025,7 @@ code {
}
.ui-datepicker-prev, .ui-datepicker-next {
border: nc-darken($color-main-background, 14%);
border: var(--color-border-dark);
background: var(--color-main-background);
}
@ -1066,7 +1065,7 @@ code {
.ui-timepicker-table {
th {
font-weight: normal;
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
opacity: .8;
&.periods {
padding: 0;
@ -1088,7 +1087,7 @@ code {
}
&.ui-timepicker-minutes:not(.ui-state-hover) {
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
}
&.ui-timepicker-hours {
@ -1163,7 +1162,7 @@ code {
width: 100%;
}
.emptycontent {
color: nc-lighten($color-main-text, 53%);
color: var(--color-text-details);
text-align: center;
margin-top: 80px;
width: 100%;
@ -1348,7 +1347,7 @@ span.ui-icon {
}
.scrollarea {
overflow: auto;
border: 1px solid nc-darken($color-main-background, 14%);
border: 1px solid var(--color-background-darker);
width: 100%;
height: 240px;
}
@ -1360,7 +1359,7 @@ span.ui-icon {
}
}
.taglist li {
background: nc-darken($color-main-background, 3%);
background: var(--color-background-dark);
padding: .3em .8em;
white-space: nowrap;
overflow: hidden;
@ -1368,7 +1367,7 @@ span.ui-icon {
-webkit-transition: background-color 500ms;
transition: background-color 500ms;
&:hover, &:active {
background: nc-darken($color-main-background, 8%);
background: var(--color-background-darker);
}
}
.addinput {
@ -1483,12 +1482,12 @@ div.crumb {
position: relative;
text-align: center;
.info {
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
text-align: center;
margin: 0 auto;
padding: 20px 0;
a {
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
font-weight: 600;
padding: 13px;
margin: -13px;

39
core/css/variables.scss
Unescape Escape View File

@ -1,31 +1,46 @@
// SCSS darken/lighten function override
@function nc-darken($color, $value) {
@return darken($color, $value);
}
@function nc-lighten($color, $value) {
@return lighten($color, $value);
}
// SCSS variables
$color-main-text: #000000;
$color-main-background: #ffffff;
// used for different active/disabled states
$color-background-dark: nc-darken($color-main-background, 7%);
$color-background-darker: nc-darken($color-main-background, 14%);
$color-primary: #0082c9;
$color-primary-text: #ffffff;
$color-primary-text-dark: nc-darken($color-primary-text, 7%);
$color-primary-element: $color-primary;
$color-error: #e9322d;
$color-warning: #eca700;
$color-success: #46ba61;
$color-primary-element: $color-primary;
// rgb(118, 118, 118) / #767676
// min. color contrast for normal text on white background according to WCAG AA
// (Works as well: color: #000; opacity: 0.57;)
$color-text-details: #767676;
$color-text-maxcontrast: nc-lighten($color-main-text, 46.2%);
$color-text-light: nc-lighten($color-main-text, 15%);
$color-text-lighter: nc-lighten($color-main-text, 30%);
$image-logo: url('../img/logo.svg?v=1');
$image-login-background: url('../img/background.png?v=2');
$color-loading: #969696;
$color-loading-dark: #bbbbbb;
$color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75);
$color-border: nc-darken($color-main-background, 8%);
$border-radius: 3px;
// SCSS darken/lighten function override
@function nc-darken($color, $value) {
@return darken($color, $value);
}
$color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75);
@function nc-lighten($color, $value) {
@return lighten($color, $value);
}
// light border like file table or app-content list
$color-border: nc-darken($color-main-background, 7%);
// darker border like inputs or very visible elements
$color-border-dark: nc-darken($color-main-background, 14%);
$border-radius: 3px;