Mirrors
/
nextcloud-server
mirror of https://github.com/nextcloud/server
3
0
Fork 0
Code Releases Activity
Browse Source

Replace old color occurences with calculations 

Signed-off-by: Julius Haertl <jus@bitgrid.net>
pull/3530/head
Julius Haertl 9 years ago
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
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 36
      core/css/apps.scss
  2. 70
      core/css/inputs.scss
  3. 2
      core/css/share.scss
  4. 40
      core/css/styles.scss
  5. 11
      core/css/variables.scss

36
core/css/apps.scss
View File

@ -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;

70
core/css/inputs.scss
View File

@ -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 */

2
core/css/share.scss
View File

@ -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;

40
core/css/styles.scss
View File

@ -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;

11
core/css/variables.scss
View File

@ -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);
$color-box-shadow: rgba(nc-lighten($color-main-text, 20%), 0.75);
Write Preview
Loading…
Cancel
Save