diff options
author | Julius Haertl <jus@bitgrid.net> | 2017-03-06 00:38:59 +0300 |
---|---|---|
committer | Julius Härtl <jus@bitgrid.net> | 2017-03-20 14:49:08 +0300 |
commit | 7381a2ec5c4d2fa5324e8927e81f858b11005ce7 (patch) | |
tree | 58fbea77b6b3ccd21bffb5613afda3f850825bef /core/css | |
parent | 322ecdca63903a8f17aec4927c2d219e45d13e6c (diff) |
Replace old color occurences with calculations
Signed-off-by: Julius Haertl <jus@bitgrid.net>
Diffstat (limited to 'core/css')
-rw-r--r-- | core/css/apps.scss | 36 | ||||
-rw-r--r-- | core/css/inputs.scss | 70 | ||||
-rw-r--r-- | core/css/share.scss | 2 | ||||
-rw-r--r-- | core/css/styles.scss | 40 | ||||
-rw-r--r-- | core/css/variables.scss | 11 |
5 files changed, 75 insertions, 84 deletions
diff --git a/core/css/apps.scss b/core/css/apps.scss index 8e804bf85f4..e9ed9f470cd 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -61,7 +61,7 @@ em { -moz-user-select: none; -ms-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; flex-direction: column; > ul { @@ -166,9 +166,9 @@ em { -ms-transform: rotate(0); transform: rotate(0); } - background-image: linear-gradient(top, $color-main-old-eeeeee 0%, $color-main-old-f8f8f8 100%); - background-image: -webkit-linear-gradient(top, $color-main-old-eeeeee 0%, $color-main-old-f8f8f8 100%); - background-image: -ms-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, nc-darken($color-main-background, 8%) 0%, nc-darken($color-main-background, 3%) 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; } .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; height: 38px; 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, input[type='submit'] { @@ -378,7 +378,7 @@ em { min-width: 300px; display: block; 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; transition: margin-right 300ms; overflow-x: hidden; @@ -412,7 +412,7 @@ em { /* restrict height of settings and make scrollable */ max-height: 300px; overflow-y: auto; - border-right: 1px solid $color-main-old-eeeeee; + border-right: 1px solid nc-darken($color-main-background, 8%); width: 250px; box-sizing: border-box; @@ -428,7 +428,7 @@ em { } #app-settings-header { - border-right: 1px solid $color-main-old-eeeeee; + border-right: 1px solid nc-darken($color-main-background, 8%); width: 250px; box-sizing: border-box; } @@ -464,7 +464,7 @@ em { .section { display: block; padding: 30px; - color: $color-main-old-555555; + color: nc-lighten($color-main-text, 33%); margin-bottom: 24px; &.hidden { display: none !important; @@ -499,7 +499,7 @@ em { /* DROPDOWN ----------------------------------------------------------------- */ .dropdown { - background: $color-main-old-eeeeee; + background: nc-darken($color-main-background, 8%); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; box-shadow: 0 1px 1px $color-box-shadow; @@ -520,18 +520,18 @@ em { float: left; padding: 5px; cursor: pointer; - color: $color-main-old-555555; + color: nc-lighten($color-main-text, 33%); margin-bottom: 1px; a { - color: $color-main-old-555555; + color: nc-lighten($color-main-text, 33%); margin-bottom: 1px; } &.selected { font-weight: 600; - border-bottom: 1px solid $color-main-old-333333; + border-bottom: 1px solid nc-lighten($color-main-text, 20%); } &:hover { - border-bottom: 1px solid $color-main-old-333333; + border-bottom: 1px solid nc-lighten($color-main-text, 20%); } &.selected, &:hover { margin-bottom: 0px; @@ -557,7 +557,7 @@ em { .popovermenu, .popovermenu:after, #app-navigation .app-navigation-entry-menu, #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 { position: absolute; background-color: $color-main-background; - color: $color-main-old-333333; + color: nc-lighten($color-main-text, 20%); border-radius: 3px; z-index: 110; margin: 5px; @@ -643,7 +643,7 @@ em { margin: 0; font-weight: inherit; 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 */ &.action { padding: inherit !important; diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 54f753c5c72..37405172d3a 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -40,8 +40,8 @@ textarea, padding: 7px 6px; font-size: 13px; background-color: $color-main-background; - color: $color-main-old-333333; - border: 1px solid $color-main-old-dddddd; + color: nc-lighten($color-main-text, 33%); + border: 1px solid nc-lighten($color-main-text, 86%); outline: none; border-radius: 3px; &:not(:disabled):not(.primary) { @@ -59,7 +59,7 @@ textarea, } } &:disabled { - background-color: $color-main-old-eeeeee; + background-color: nc-darken($color-main-background, 8%); color: rgba($color-main-text, 0.4); cursor: default; opacity: 0.5; @@ -81,7 +81,7 @@ textarea, } &:disabled { 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; cursor: pointer; box-sizing: border-box; - background-color: $color-main-old-f8f8f8; + background-color: nc-darken($color-main-background, 3%); } /* Buttons */ @@ -155,7 +155,7 @@ button, .button { } textarea { - color: $color-main-old-555555; + color: nc-lighten($color-main-text, 33%); cursor: text; font-family: inherit; height: auto; @@ -163,7 +163,7 @@ textarea { &:active, &:hover, &:focus { - border-color: $color-main-old-dddddd !important; + border-color: nc-lighten($color-main-text, 86%) !important; background-color: $color-main-background !important; } } @@ -186,7 +186,7 @@ button img, cursor: pointer; } #quota { - color: $color-main-old-555555; + color: nc-lighten($color-main-text, 33%); } select, .button.multiselect { @@ -221,7 +221,7 @@ input { border-radius: 50%; margin: 3px; 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, &:focus + label:before { @@ -236,11 +236,11 @@ input { border-color: $color-primary } &:disabled + label:before { - border: 1px solid $color-main-old-888888; - background-color: $color-main-old-bbbbbb !important; /* override other status */ + border: 1px solid nc-lighten($color-main-text, 53%); + background-color: nc-lighten($color-main-text, 73%) !important; /* override other status */ } &:checked:disabled + label:before { - background-color: $color-main-old-bbbbbb; + background-color: nc-lighten($color-main-text, 73%); } } &.checkbox { @@ -261,7 +261,7 @@ input { &.radio--white, &.checkbox--white { + label:before { - border-color: $color-main-old-dddddd; + border-color: nc-lighten($color-main-text, 86%); } &:not(:disabled):not(:checked) + label:hover:before, &:focus + label:before { @@ -269,17 +269,17 @@ input { } &:checked + label:before { box-shadow: inset 0px 0px 0px 2px $color-main-text; - background-color: $color-main-old-eeeeee; - border-color: $color-main-old-eeeeee + background-color: nc-darken($color-main-background, 8%); + border-color: nc-darken($color-main-background, 8%) } &: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 */ } &:checked:disabled + label:before { box-shadow: inset 0px 0px 0px 2px $color-main-text; - border-color: $color-main-old-555555; - background-color: $color-main-old-333333; + border-color: nc-lighten($color-main-text, 33%); + background-color: nc-lighten($color-main-text, 33%); } } &.checkbox--white { @@ -293,10 +293,10 @@ input { background-image: url('../img/actions/checkbox-mixed-white.svg'); } &:checked:disabled + label:after { - border-color: $color-main-old-bbbbbb; + border-color: nc-lighten($color-main-text, 73%); } &: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 { margin-top: -2px; &.select2-drop-active { - border-color: $color-main-old-dddddd; + border-color: nc-lighten($color-main-text, 86%); } .avatar { display: inline-block; @@ -341,14 +341,14 @@ input { padding: 12px; background-color: $color-main-background; cursor: pointer; - color: $color-main-old-333333; + color: nc-lighten($color-main-text, 33%); } .select2-result { &.select2-selected { - background-color: $color-main-old-f8f8f8; + background-color: nc-darken($color-main-background, 3%); } &.select2-highlighted { - background-color: $color-main-old-f8f8f8; + background-color: nc-darken($color-main-background, 3%); color: $color-main-text; } } @@ -368,10 +368,10 @@ input { white-space: nowrap; text-overflow: ellipsis; background: $color-main-background; - color: $color-main-old-555555; + color: nc-lighten($color-main-text, 33%); box-sizing: content-box; border-radius: 3px; - border: 1px solid $color-main-old-dddddd; + border: 1px solid nc-lighten($color-main-text, 86%); margin: 0; padding: 2px 0; min-height: auto; @@ -384,8 +384,8 @@ input { & { background-image: none; background-color: $color-main-background; - color: $color-main-old-333333; - border: 1px solid $color-main-old-dddddd; + color: nc-lighten($color-main-text, 33%); + border: 1px solid nc-lighten($color-main-text, 86%); } .select2-search-choice-close { display: none; @@ -410,10 +410,10 @@ input { white-space: nowrap; text-overflow: ellipsis; background: $color-main-background; - color: $color-main-old-555555; + color: nc-lighten($color-main-text, 33%); box-sizing: content-box; border-radius: 3px; - border: 1px solid $color-main-old-dddddd; + border: 1px solid nc-lighten($color-main-text, 86%); margin: 0; padding: 2px 0; padding-left: 6px; @@ -422,15 +422,15 @@ input { line-height: 20px; padding-left: 5px; background-image: none; - background-color: $color-main-old-f8f8f8; - border-color: $color-main-old-f8f8f8; + background-color: nc-darken($color-main-background, 3%); + border-color: nc-darken($color-main-background, 3%); .select2-search-choice-close { display: none; } &.select2-search-choice-focus, &:hover { - background-color: $color-main-old-eeeeee; - border-color: $color-main-old-eeeeee; + background-color: nc-darken($color-main-background, 8%); + border-color: nc-darken($color-main-background, 8%); } } .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 { border: none; - background: $color-main-old-f8f8f8; + background: nc-darken($color-main-background, 3%); } /* Animation */ diff --git a/core/css/share.scss b/core/css/share.scss index 4a1119222c1..0e6eb3ccf8b 100644 --- a/core/css/share.scss +++ b/core/css/share.scss @@ -144,7 +144,7 @@ a { } #link { - border-top: 1px solid $color-main-old-dddddd; + border-top: 1px solid nc-lighten($color-main-text, 86%); padding-top: 8px; #showPassword img { padding-left: 5px; diff --git a/core/css/styles.scss b/core/css/styles.scss index 0fb6d60888d..2bec3c8d3b1 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -148,7 +148,7 @@ body { color: $color-primary-text; border-bottom: 2px dotted $color-main-background; &:hover, &:focus { - color: $color-main-old-dddddd; + color: nc-lighten($color-main-text, 86%); } } } @@ -164,7 +164,7 @@ body { } ::-webkit-scrollbar-thumb { - background: $color-main-old-dddddd; + background: nc-lighten($color-main-text, 86%); border-radius: 3px; } @@ -298,7 +298,7 @@ body { } #emptycontent, .emptycontent { - color: $color-main-old-888888; + color: nc-darken($color-main-background, 8%); text-align: center; margin-top: 30vh; width: 100%; @@ -355,7 +355,7 @@ body { } a { color: $color-primary-text; - border-bottom: 1px solid $color-main-old-bbbbbb; + border-bottom: 1px solid nc-lighten($color-main-text, 73%); } } .infogroup { @@ -620,17 +620,17 @@ label.infield { position: static; margin: 0 -3px 5px; font-size: 12px; - background: $color-main-old-f8f8f8; - color: $color-main-old-888888; + background: nc-darken($color-main-background, 3%); + color: nc-lighten($color-main-text, 53%); cursor: pointer; - border: 1px solid $color-main-old-dddddd; + border: 1px solid nc-lighten($color-main-text, 86%); span { cursor: pointer; padding: 10px 20px; } &.ui-state-hover, &.ui-state-active { 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; font-weight: 600 !important; &.button { - color: $color-main-old-555555 !important; + color: nc-lighten($color-main-text, 33%) !important; display: inline-block; text-align: center; } @@ -899,7 +899,7 @@ tr { tbody tr { &: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 { - border: $color-main-old-dddddd; + border: nc-lighten($color-main-text, 86%); background: $color-main-background; } @@ -995,7 +995,7 @@ code { width: 100%; } .emptycontent { - color: $color-main-old-888888; + color: nc-lighten($color-main-text, 53%); text-align: center; margin-top: 80px; width: 100%; @@ -1013,7 +1013,7 @@ code { .filelist { td { padding: 14px; - border-bottom: 1px solid $color-main-old-eeeeee; + border-bottom: 1px solid nc-darken($color-main-background, 8%); } tr:last-child td { border-bottom: none; @@ -1070,7 +1070,7 @@ span.ui-icon { } .scrollarea { overflow: auto; - border: 1px solid $color-main-old-dddddd; + border: 1px solid nc-lighten($color-main-text, 86%); width: 100%; height: 240px; } @@ -1082,7 +1082,7 @@ span.ui-icon { } } .taglist li { - background: $color-main-old-f8f8f8; + background: nc-darken($color-main-background, 3%); padding: .3em .8em; white-space: nowrap; overflow: hidden; @@ -1090,7 +1090,7 @@ span.ui-icon { -webkit-transition: background-color 500ms; transition: background-color 500ms; &:hover, &:active { - background: $color-main-old-eeeeee; + background: nc-darken($color-main-background, 8%); } } .addinput { @@ -1105,7 +1105,7 @@ span.ui-icon { background-color: $color-main-background; border-radius: 3px; box-shadow: 0 0 10px $color-box-shadow; - color: $color-main-old-333333; + color: nc-lighten($color-main-text, 20%); padding: 10px; position: fixed !important; z-index: 100; @@ -1174,7 +1174,7 @@ div.crumb { position: relative; top: 12px; padding: 14px 24px 14px 17px; - color: $color-main-old-555555; + color: nc-lighten($color-main-text, 33%); } &.last a { padding-right: 0; @@ -1222,12 +1222,12 @@ div.crumb { position: relative; text-align: center; .info { - color: $color-main-old-555555; + color: nc-lighten($color-main-text, 33%); text-align: center; margin: 0 auto; padding: 20px 0; a { - color: $color-main-old-555555; + color: nc-lighten($color-main-text, 33%); font-weight: 600; padding: 13px; margin: -13px; diff --git a/core/css/variables.scss b/core/css/variables.scss index 1ca81610f1a..47c8e1a27f8 100644 --- a/core/css/variables.scss +++ b/core/css/variables.scss @@ -19,13 +19,4 @@ $image-login-background: '../img/background.jpg?v=1'; $color-loading: #969696; $color-loading-dark: #bbbbbb; - -$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);
\ No newline at end of file +$color-box-shadow: rgba(nc-lighten($color-main-text, 20%), 0.75);
\ No newline at end of file |