mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Replace old color occurences with calculations 

Signed-off-by: Julius Haertl <jus@bitgrid.net>
This commit is contained in:
Julius Haertl 2017-03-05 22:38:59 +01:00 committed by Julius Härtl
parent 322ecdca63
commit 7381a2ec5c
No known key found for this signature in database
GPG Key ID: 4C614C6ED2CDE6DF
5 changed files with 75 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
core/css/apps.scss
View File

@ -61,7 +61,7 @@ em {
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
border-right: 1px solid $color-main-old-eeeeee; border-right: 1px solid nc-darken($color-main-background, 8%);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
> ul { > ul {
@ -166,9 +166,9 @@ em {
-ms-transform: rotate(0); -ms-transform: rotate(0);
transform: rotate(0); transform: rotate(0);
} }
background-image: linear-gradient(top, $color-main-old-eeeeee 0%, $color-main-old-f8f8f8 100%); background-image: linear-gradient(top, nc-darken($color-main-background, 8%) 0%, nc-darken($color-main-background, 3%) 100%);
background-image: -webkit-linear-gradient(top, $color-main-old-eeeeee 0%, $color-main-old-f8f8f8 100%); background-image: -webkit-linear-gradient(top, nc-darken($color-main-background, 8%) 0%, nc-darken($color-main-background, 3%) 100%);
background-image: -ms-linear-gradient(top, $color-main-old-eeeeee 0%, $color-main-old-f8f8f8 100%); background-image: -ms-linear-gradient(top, nc-darken($color-main-background, 8%) 0%, nc-darken($color-main-background, 3%) 100%);
} }
} }
> { > {
@ -251,7 +251,7 @@ em {
color: $color-error; color: $color-error;
} }
.app-navigation-separator { .app-navigation-separator {
border-bottom: 1px solid $color-main-old-dddddd; border-bottom: 1px solid nc-lighten($color-main-text, 86%);
} }
/** /**
@ -324,7 +324,7 @@ em {
margin-right: 0; margin-right: 0;
height: 38px; height: 38px;
float: left; float: left;
border: 1px solid rgba($color-main-old-bbbbbb, 0.9); border: 1px solid rgba(nc-lighten($color-main-text, 73%), 0.9);
} }
button, button,
input[type='submit'] { input[type='submit'] {
@ -378,7 +378,7 @@ em {
min-width: 300px; min-width: 300px;
display: block; display: block;
background: $color-main-background; background: $color-main-background;
border-left: 1px solid $color-main-old-eeeeee; border-left: 1px solid nc-darken($color-main-background, 8%);
-webkit-transition: margin-right 300ms; -webkit-transition: margin-right 300ms;
transition: margin-right 300ms; transition: margin-right 300ms;
overflow-x: hidden; overflow-x: hidden;
@ -412,7 +412,7 @@ em {
/* restrict height of settings and make scrollable */ /* restrict height of settings and make scrollable */
max-height: 300px; max-height: 300px;
overflow-y: auto; overflow-y: auto;
border-right: 1px solid $color-main-old-eeeeee; border-right: 1px solid nc-darken($color-main-background, 8%);
width: 250px; width: 250px;
box-sizing: border-box; box-sizing: border-box;
@ -428,7 +428,7 @@ em {
} }
#app-settings-header { #app-settings-header {
border-right: 1px solid $color-main-old-eeeeee; border-right: 1px solid nc-darken($color-main-background, 8%);
width: 250px; width: 250px;
box-sizing: border-box; box-sizing: border-box;
} }
@ -464,7 +464,7 @@ em {
.section { .section {
display: block; display: block;
padding: 30px; padding: 30px;
color: $color-main-old-555555; color: nc-lighten($color-main-text, 33%);
margin-bottom: 24px; margin-bottom: 24px;
&.hidden { &.hidden {
display: none !important; display: none !important;
@ -499,7 +499,7 @@ em {
/* DROPDOWN ----------------------------------------------------------------- */ /* DROPDOWN ----------------------------------------------------------------- */
.dropdown { .dropdown {
background: $color-main-old-eeeeee; background: nc-darken($color-main-background, 8%);
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
box-shadow: 0 1px 1px $color-box-shadow; box-shadow: 0 1px 1px $color-box-shadow;
@ -520,18 +520,18 @@ em {
float: left; float: left;
padding: 5px; padding: 5px;
cursor: pointer; cursor: pointer;
color: $color-main-old-555555; color: nc-lighten($color-main-text, 33%);
margin-bottom: 1px; margin-bottom: 1px;
a { a {
color: $color-main-old-555555; color: nc-lighten($color-main-text, 33%);
margin-bottom: 1px; margin-bottom: 1px;
} }
&.selected { &.selected {
font-weight: 600; font-weight: 600;
border-bottom: 1px solid $color-main-old-333333; border-bottom: 1px solid nc-lighten($color-main-text, 20%);
} }
&:hover { &:hover {
border-bottom: 1px solid $color-main-old-333333; border-bottom: 1px solid nc-lighten($color-main-text, 20%);
} }
&.selected, &:hover { &.selected, &:hover {
margin-bottom: 0px; margin-bottom: 0px;
@ -557,7 +557,7 @@ em {
.popovermenu, .popovermenu:after, .popovermenu, .popovermenu:after,
#app-navigation .app-navigation-entry-menu, #app-navigation .app-navigation-entry-menu,
#app-navigation .app-navigation-entry-menu:after { #app-navigation .app-navigation-entry-menu:after {
border: 1px solid $color-main-old-eeeeee; border: 1px solid nc-darken($color-main-background, 8%);
} }
} }
@ -566,7 +566,7 @@ em {
.popovermenu { .popovermenu {
position: absolute; position: absolute;
background-color: $color-main-background; background-color: $color-main-background;
color: $color-main-old-333333; color: nc-lighten($color-main-text, 20%);
border-radius: 3px; border-radius: 3px;
z-index: 110; z-index: 110;
margin: 5px; margin: 5px;
@ -643,7 +643,7 @@ em {
margin: 0; margin: 0;
font-weight: inherit; font-weight: inherit;
box-shadow: none; box-shadow: none;
color: $color-main-old-333333 !important; /* Overwrite app-navigation li */ color: nc-lighten($color-main-text, 20%) !important; /* Overwrite app-navigation li */
/* prevent .action class to break the design */ /* prevent .action class to break the design */
&.action { &.action {
padding: inherit !important; padding: inherit !important;

70
core/css/inputs.scss
View File

@ -40,8 +40,8 @@ textarea,
padding: 7px 6px; padding: 7px 6px;
font-size: 13px; font-size: 13px;
background-color: $color-main-background; background-color: $color-main-background;
color: $color-main-old-333333; color: nc-lighten($color-main-text, 33%);
border: 1px solid $color-main-old-dddddd; border: 1px solid nc-lighten($color-main-text, 86%);
outline: none; outline: none;
border-radius: 3px; border-radius: 3px;
&:not(:disabled):not(.primary) { &:not(:disabled):not(.primary) {
@ -59,7 +59,7 @@ textarea,
} }
} }
&:disabled { &:disabled {
background-color: $color-main-old-eeeeee; background-color: nc-darken($color-main-background, 8%);
color: rgba($color-main-text, 0.4); color: rgba($color-main-text, 0.4);
cursor: default; cursor: default;
opacity: 0.5; opacity: 0.5;
@ -81,7 +81,7 @@ textarea,
} }
&:disabled { &:disabled {
background-color: rgba($color-primary, .7); background-color: rgba($color-primary, .7);
color: $color-main-old-bbbbbb; color: nc-lighten($color-main-text, 73%);
} }
} }
} }
@ -128,7 +128,7 @@ input[type='reset'] {
min-height: 34px; min-height: 34px;
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
background-color: $color-main-old-f8f8f8; background-color: nc-darken($color-main-background, 3%);
} }
/* Buttons */ /* Buttons */
@ -155,7 +155,7 @@ button, .button {
} }
textarea { textarea {
color: $color-main-old-555555; color: nc-lighten($color-main-text, 33%);
cursor: text; cursor: text;
font-family: inherit; font-family: inherit;
height: auto; height: auto;
@ -163,7 +163,7 @@ textarea {
&:active, &:active,
&:hover, &:hover,
&:focus { &:focus {
border-color: $color-main-old-dddddd !important; border-color: nc-lighten($color-main-text, 86%) !important;
background-color: $color-main-background !important; background-color: $color-main-background !important;
} }
} }
@ -186,7 +186,7 @@ button img,
cursor: pointer; cursor: pointer;
} }
#quota { #quota {
color: $color-main-old-555555; color: nc-lighten($color-main-text, 33%);
} }
select, select,
.button.multiselect { .button.multiselect {
@ -221,7 +221,7 @@ input {
border-radius: 50%; border-radius: 50%;
margin: 3px; margin: 3px;
margin-top: 1px; margin-top: 1px;
border: 1px solid $color-main-old-888888; border: 1px solid nc-lighten($color-main-text, 53%);
} }
&:not(:disabled):not(:checked) + label:hover:before, &:not(:disabled):not(:checked) + label:hover:before,
&:focus + label:before { &:focus + label:before {
@ -236,11 +236,11 @@ input {
border-color: $color-primary border-color: $color-primary
} }
&:disabled + label:before { &:disabled + label:before {
border: 1px solid $color-main-old-888888; border: 1px solid nc-lighten($color-main-text, 53%);
background-color: $color-main-old-bbbbbb !important; /* override other status */ background-color: nc-lighten($color-main-text, 73%) !important; /* override other status */
} }
&:checked:disabled + label:before { &:checked:disabled + label:before {
background-color: $color-main-old-bbbbbb; background-color: nc-lighten($color-main-text, 73%);
} }
} }
&.checkbox { &.checkbox {
@ -261,7 +261,7 @@ input {
&.radio--white, &.radio--white,
&.checkbox--white { &.checkbox--white {
+ label:before { + label:before {
border-color: $color-main-old-dddddd; border-color: nc-lighten($color-main-text, 86%);
} }
&:not(:disabled):not(:checked) + label:hover:before, &:not(:disabled):not(:checked) + label:hover:before,
&:focus + label:before { &:focus + label:before {
@ -269,17 +269,17 @@ input {
} }
&:checked + label:before { &:checked + label:before {
box-shadow: inset 0px 0px 0px 2px $color-main-text; box-shadow: inset 0px 0px 0px 2px $color-main-text;
background-color: $color-main-old-eeeeee; background-color: nc-darken($color-main-background, 8%);
border-color: $color-main-old-eeeeee border-color: nc-darken($color-main-background, 8%)
} }
&:disabled + label:before { &:disabled + label:before {
background-color: $color-main-old-555555 !important; /* override other status */ background-color: nc-lighten($color-main-text, 33%) !important; /* override other status */
border-color: rgba($color-main-text, 0.4) !important; /* override other status */ border-color: rgba($color-main-text, 0.4) !important; /* override other status */
} }
&:checked:disabled + label:before { &:checked:disabled + label:before {
box-shadow: inset 0px 0px 0px 2px $color-main-text; box-shadow: inset 0px 0px 0px 2px $color-main-text;
border-color: $color-main-old-555555; border-color: nc-lighten($color-main-text, 33%);
background-color: $color-main-old-333333; background-color: nc-lighten($color-main-text, 33%);
} }
} }
&.checkbox--white { &.checkbox--white {
@ -293,10 +293,10 @@ input {
background-image: url('../img/actions/checkbox-mixed-white.svg'); background-image: url('../img/actions/checkbox-mixed-white.svg');
} }
&:checked:disabled + label:after { &:checked:disabled + label:after {
border-color: $color-main-old-bbbbbb; border-color: nc-lighten($color-main-text, 73%);
} }
&:indeterminate:disabled + label:after { &:indeterminate:disabled + label:after {
background-color: $color-main-old-bbbbbb; background-color: nc-lighten($color-main-text, 73%);
} }
} }
} }
@ -306,7 +306,7 @@ input {
.select2-drop { .select2-drop {
margin-top: -2px; margin-top: -2px;
&.select2-drop-active { &.select2-drop-active {
border-color: $color-main-old-dddddd; border-color: nc-lighten($color-main-text, 86%);
} }
.avatar { .avatar {
display: inline-block; display: inline-block;
@ -341,14 +341,14 @@ input {
padding: 12px; padding: 12px;
background-color: $color-main-background; background-color: $color-main-background;
cursor: pointer; cursor: pointer;
color: $color-main-old-333333; color: nc-lighten($color-main-text, 33%);
} }
.select2-result { .select2-result {
&.select2-selected { &.select2-selected {
background-color: $color-main-old-f8f8f8; background-color: nc-darken($color-main-background, 3%);
} }
&.select2-highlighted { &.select2-highlighted {
background-color: $color-main-old-f8f8f8; background-color: nc-darken($color-main-background, 3%);
color: $color-main-text; color: $color-main-text;
} }
} }
@ -368,10 +368,10 @@ input {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
background: $color-main-background; background: $color-main-background;
color: $color-main-old-555555; color: nc-lighten($color-main-text, 33%);
box-sizing: content-box; box-sizing: content-box;
border-radius: 3px; border-radius: 3px;
border: 1px solid $color-main-old-dddddd; border: 1px solid nc-lighten($color-main-text, 86%);
margin: 0; margin: 0;
padding: 2px 0; padding: 2px 0;
min-height: auto; min-height: auto;
@ -384,8 +384,8 @@ input {
& { & {
background-image: none; background-image: none;
background-color: $color-main-background; background-color: $color-main-background;
color: $color-main-old-333333; color: nc-lighten($color-main-text, 33%);
border: 1px solid $color-main-old-dddddd; border: 1px solid nc-lighten($color-main-text, 86%);
} }
.select2-search-choice-close { .select2-search-choice-close {
display: none; display: none;
@ -410,10 +410,10 @@ input {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
background: $color-main-background; background: $color-main-background;
color: $color-main-old-555555; color: nc-lighten($color-main-text, 33%);
box-sizing: content-box; box-sizing: content-box;
border-radius: 3px; border-radius: 3px;
border: 1px solid $color-main-old-dddddd; border: 1px solid nc-lighten($color-main-text, 86%);
margin: 0; margin: 0;
padding: 2px 0; padding: 2px 0;
padding-left: 6px; padding-left: 6px;
@ -422,15 +422,15 @@ input {
line-height: 20px; line-height: 20px;
padding-left: 5px; padding-left: 5px;
background-image: none; background-image: none;
background-color: $color-main-old-f8f8f8; background-color: nc-darken($color-main-background, 3%);
border-color: $color-main-old-f8f8f8; border-color: nc-darken($color-main-background, 3%);
.select2-search-choice-close { .select2-search-choice-close {
display: none; display: none;
} }
&.select2-search-choice-focus, &.select2-search-choice-focus,
&:hover { &:hover {
background-color: $color-main-old-eeeeee; background-color: nc-darken($color-main-background, 8%);
border-color: $color-main-old-eeeeee; border-color: nc-darken($color-main-background, 8%);
} }
} }
.select2-arrow { .select2-arrow {
@ -478,7 +478,7 @@ input {
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
border: none; border: none;
background: $color-main-old-f8f8f8; background: nc-darken($color-main-background, 3%);
} }
/* Animation */ /* Animation */

2
core/css/share.scss
View File

@ -144,7 +144,7 @@ a {
} }
#link { #link {
border-top: 1px solid $color-main-old-dddddd; border-top: 1px solid nc-lighten($color-main-text, 86%);
padding-top: 8px; padding-top: 8px;
#showPassword img { #showPassword img {
padding-left: 5px; padding-left: 5px;

40
core/css/styles.scss
View File

@ -148,7 +148,7 @@ body {
color: $color-primary-text; color: $color-primary-text;
border-bottom: 2px dotted $color-main-background; border-bottom: 2px dotted $color-main-background;
&:hover, &:focus { &:hover, &:focus {
color: $color-main-old-dddddd; color: nc-lighten($color-main-text, 86%);
} }
} }
} }
@ -164,7 +164,7 @@ body {
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: $color-main-old-dddddd; background: nc-lighten($color-main-text, 86%);
border-radius: 3px; border-radius: 3px;
} }
@ -298,7 +298,7 @@ body {
} }
#emptycontent, .emptycontent { #emptycontent, .emptycontent {
color: $color-main-old-888888; color: nc-darken($color-main-background, 8%);
text-align: center; text-align: center;
margin-top: 30vh; margin-top: 30vh;
width: 100%; width: 100%;
@ -355,7 +355,7 @@ body {
} }
a { a {
color: $color-primary-text; color: $color-primary-text;
border-bottom: 1px solid $color-main-old-bbbbbb; border-bottom: 1px solid nc-lighten($color-main-text, 73%);
} }
} }
.infogroup { .infogroup {
@ -620,17 +620,17 @@ label.infield {
position: static; position: static;
margin: 0 -3px 5px; margin: 0 -3px 5px;
font-size: 12px; font-size: 12px;
background: $color-main-old-f8f8f8; background: nc-darken($color-main-background, 3%);
color: $color-main-old-888888; color: nc-lighten($color-main-text, 53%);
cursor: pointer; cursor: pointer;
border: 1px solid $color-main-old-dddddd; border: 1px solid nc-lighten($color-main-text, 86%);
span { span {
cursor: pointer; cursor: pointer;
padding: 10px 20px; padding: 10px 20px;
} }
&.ui-state-hover, &.ui-state-active { &.ui-state-hover, &.ui-state-active {
color: $color-main-text; color: $color-main-text;
background-color: $color-main-old-eeeeee; background-color: nc-darken($color-main-background, 8%);
} }
} }
} }
@ -682,7 +682,7 @@ label.infield {
color: $color-primary-text !important; color: $color-primary-text !important;
font-weight: 600 !important; font-weight: 600 !important;
&.button { &.button {
color: $color-main-old-555555 !important; color: nc-lighten($color-main-text, 33%) !important;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
} }
@ -899,7 +899,7 @@ tr {
tbody tr { tbody tr {
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
background-color: $color-main-old-f8f8f8; background-color: nc-darken($color-main-background, 3%);
} }
} }
@ -956,7 +956,7 @@ code {
} }
.ui-datepicker-prev, .ui-datepicker-next { .ui-datepicker-prev, .ui-datepicker-next {
border: $color-main-old-dddddd; border: nc-lighten($color-main-text, 86%);
background: $color-main-background; background: $color-main-background;
} }
@ -995,7 +995,7 @@ code {
width: 100%; width: 100%;
} }
.emptycontent { .emptycontent {
color: $color-main-old-888888; color: nc-lighten($color-main-text, 53%);
text-align: center; text-align: center;
margin-top: 80px; margin-top: 80px;
width: 100%; width: 100%;
@ -1013,7 +1013,7 @@ code {
.filelist { .filelist {
td { td {
padding: 14px; padding: 14px;
border-bottom: 1px solid $color-main-old-eeeeee; border-bottom: 1px solid nc-darken($color-main-background, 8%);
} }
tr:last-child td { tr:last-child td {
border-bottom: none; border-bottom: none;
@ -1070,7 +1070,7 @@ span.ui-icon {
} }
.scrollarea { .scrollarea {
overflow: auto; overflow: auto;
border: 1px solid $color-main-old-dddddd; border: 1px solid nc-lighten($color-main-text, 86%);
width: 100%; width: 100%;
height: 240px; height: 240px;
} }
@ -1082,7 +1082,7 @@ span.ui-icon {
} }
} }
.taglist li { .taglist li {
background: $color-main-old-f8f8f8; background: nc-darken($color-main-background, 3%);
padding: .3em .8em; padding: .3em .8em;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -1090,7 +1090,7 @@ span.ui-icon {
-webkit-transition: background-color 500ms; -webkit-transition: background-color 500ms;
transition: background-color 500ms; transition: background-color 500ms;
&:hover, &:active { &:hover, &:active {
background: $color-main-old-eeeeee; background: nc-darken($color-main-background, 8%);
} }
} }
.addinput { .addinput {
@ -1105,7 +1105,7 @@ span.ui-icon {
background-color: $color-main-background; background-color: $color-main-background;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 0 10px $color-box-shadow; box-shadow: 0 0 10px $color-box-shadow;
color: $color-main-old-333333; color: nc-lighten($color-main-text, 20%);
padding: 10px; padding: 10px;
position: fixed !important; position: fixed !important;
z-index: 100; z-index: 100;
@ -1174,7 +1174,7 @@ div.crumb {
position: relative; position: relative;
top: 12px; top: 12px;
padding: 14px 24px 14px 17px; padding: 14px 24px 14px 17px;
color: $color-main-old-555555; color: nc-lighten($color-main-text, 33%);
} }
&.last a { &.last a {
padding-right: 0; padding-right: 0;
@ -1222,12 +1222,12 @@ div.crumb {
position: relative; position: relative;
text-align: center; text-align: center;
.info { .info {
color: $color-main-old-555555; color: nc-lighten($color-main-text, 33%);
text-align: center; text-align: center;
margin: 0 auto; margin: 0 auto;
padding: 20px 0; padding: 20px 0;
a { a {
color: $color-main-old-555555; color: nc-lighten($color-main-text, 33%);
font-weight: 600; font-weight: 600;
padding: 13px; padding: 13px;
margin: -13px; margin: -13px;

11
core/css/variables.scss
View File

@ -19,13 +19,4 @@ $image-login-background: '../img/background.jpg?v=1';
$color-loading: #969696; $color-loading: #969696;
$color-loading-dark: #bbbbbb; $color-loading-dark: #bbbbbb;
$color-box-shadow: rgba(nc-lighten($color-main-text, 20%), 0.75);
$color-main-old-f8f8f8: nc-darken($color-main-background, 3%);
$color-main-old-eeeeee: nc-lighten($color-main-text, 93%);
$color-main-old-dddddd: nc-lighten($color-main-text, 86%);
$color-main-old-bbbbbb: nc-lighten($color-main-text, 73%);
$color-main-old-888888: nc-lighten($color-main-text, 53%);
$color-main-old-555555: nc-lighten($color-main-text, 33%);
$color-main-old-333333: nc-lighten($color-main-text, 20%);
$color-box-shadow: rgba($color-main-old-333333, 0.75);