summaryrefslogtreecommitdiffstats
path: root/core/css
diff options
context:
space:
mode:
authorJohn Molakvoæ <skjnldsv@users.noreply.github.com>2017-09-25 16:50:30 +0200
committerGitHub <noreply@github.com>2017-09-25 16:50:30 +0200
commit9080976975c97ef7d377bb068bdf3e7e9e7746bf (patch)
tree19852abbe9ac3cf766224d305e7365916774c82d /core/css
parent3bd4e7e5412aafd3d444954aa6f73010029a3507 (diff)
parentab1c34c5a57b4e6ac27c18b4197c9431d70eba05 (diff)
downloadnextcloud-server-9080976975c97ef7d377bb068bdf3e7e9e7746bf.tar.gz
nextcloud-server-9080976975c97ef7d377bb068bdf3e7e9e7746bf.zip
Merge pull request #6372 from nextcloud/scss-normalization
Scss normalization
Diffstat (limited to 'core/css')
-rw-r--r--core/css/apps.scss41
-rw-r--r--core/css/guest.css4
-rw-r--r--core/css/header.scss31
-rw-r--r--core/css/inputs.scss18
-rw-r--r--core/css/mobile.scss4
-rw-r--r--core/css/styles.scss22
-rw-r--r--core/css/tooltip.scss2
-rw-r--r--core/css/variables.scss3
8 files changed, 45 insertions, 80 deletions
diff --git a/core/css/apps.scss b/core/css/apps.scss
index 8fbe035fc85..b735dfa4d64 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -34,7 +34,6 @@ h3 {
/* do not use italic typeface style, instead lighter color */
em {
font-style: normal;
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
opacity: .5;
}
@@ -90,7 +89,7 @@ kbd {
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
- border-right: 1px solid nc-darken($color-main-background, 8%);
+ border-right: 1px solid $color-border;
display: flex;
flex-direction: column;
li {
@@ -556,7 +555,7 @@ kbd {
min-width: 300px;
display: block;
background: $color-main-background;
- border-left: 1px solid nc-darken($color-main-background, 8%);
+ border-left: 1px solid $color-border;
-webkit-transition: margin-right 300ms;
transition: margin-right 300ms;
overflow-x: hidden;
@@ -577,9 +576,11 @@ kbd {
/* change to 100% when layout positions are absolute */
bottom: 0;
z-index: 140;
- &.open #app-settings-content,
- &.opened #app-settings-content {
- display: block;
+ &.open,
+ &.opened {
+ #app-settings-content {
+ display: block;
+ }
}
}
@@ -590,7 +591,7 @@ kbd {
/* restrict height of settings and make scrollable */
max-height: 300px;
overflow-y: auto;
- border-right: 1px solid nc-darken($color-main-background, 8%);
+ border-right: 1px solid $color-border;
width: 250px;
box-sizing: border-box;
@@ -606,7 +607,7 @@ kbd {
}
#app-settings-header {
- border-right: 1px solid nc-darken($color-main-background, 8%);
+ border-right: 1px solid $color-border;
width: 250px;
box-sizing: border-box;
}
@@ -618,7 +619,7 @@ kbd {
padding: 0;
margin: 0;
background-color: $color-main-background;
- background-image: url('../img/actions/settings.svg?v=1');
+ background-image: url('../img/actions/settings-dark.svg?v=1');
background-position: 14px center;
background-repeat: no-repeat;
box-shadow: none;
@@ -627,14 +628,16 @@ kbd {
text-align: left;
padding-left: 42px;
font-weight: 400;
- &:hover,
- &:focus {
+
+ /* like app-navigation a */
+ color: $color-main-text;
+ opacity: .57;
+
+ &.opened,
+ &:hover {
background-color: $color-main-background;
- }
- &.opened {
- &:hover, &:focus {
- background-color: $color-main-background;
- }
+ opacity: 1;
+ box-shadow: inset 2px 0 $color-primary;
}
}
@@ -735,7 +738,7 @@ kbd {
.popovermenu, .popovermenu:after,
#app-navigation .app-navigation-entry-menu,
#app-navigation .app-navigation-entry-menu:after {
- border: 1px solid nc-darken($color-main-background, 8%);
+ border: 1px solid $color-border;
}
}
@@ -816,12 +819,8 @@ kbd {
box-shadow: none;
width: 100%;
/* Override the app-navigation li opacity */
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)' !important;
- filter: alpha(opacity = 70) !important;
opacity: .7 !important;
&:hover, &:focus, &.active {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)' !important;
- filter: alpha(opacity = 100) !important;
opacity: 1 !important;
}
/* prevent .action class to break the design */
diff --git a/core/css/guest.css b/core/css/guest.css
index 1081b95fb36..dacf79b37bc 100644
--- a/core/css/guest.css
+++ b/core/css/guest.css
@@ -43,7 +43,6 @@ p.info a:hover {
}
em {
font-style: normal;
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
opacity: .5;
}
@@ -309,7 +308,6 @@ label.infield {
padding: 14px !important;
}
#show:checked + label, #dbpassword-toggle:checked + label, #personal-show:checked + label {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
opacity: .8;
}
#show + label, #dbpassword-toggle + label, #personal-show + label {
@@ -319,7 +317,6 @@ label.infield {
background-image: url('../img/actions/toggle.svg?v=1');
background-repeat: no-repeat;
background-position: center;
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)';
opacity: .3;
}
#show + label:before, #dbpassword-toggle + label:before, #personal-show + label:before {
@@ -520,7 +517,6 @@ form #selectDbType label.ui-state-active {
.error a {
color: #fff !important;
font-weight: 600 !important;
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
opacity: 1;
}
.error a.button {
diff --git a/core/css/header.scss b/core/css/header.scss
index cf430914f87..e9edfe0bfb8 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -26,7 +26,7 @@
.menu {
position: absolute;
top: 45px;
- background-color: #fff;
+ background-color: $color-main-background;
box-shadow: 0 1px 10px $color-box-shadow;
border-radius: 0 0 3px 3px;
display: none;
@@ -86,14 +86,11 @@
height: 45px;
/* header height */
box-sizing: border-box;
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
opacity: 1;
&:focus {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
opacity: .75;
}
&:hover, &:active {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
opacity: 1;
}
}
@@ -156,30 +153,25 @@
/* hover effect for app switcher label */
.header-appname-container .header-appname {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
opacity: .75;
}
.menutoggle {
.icon-caret {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
opacity: .75;
}
&:hover {
.header-appname, .icon-caret {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
opacity: 1;
}
}
&:focus {
.header-appname, .icon-caret {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
opacity: 1;
}
}
&.active {
.header-appname, .icon-caret {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
opacity: 1;
}
}
@@ -236,7 +228,6 @@ nav {
}
/* arrow look */
-
#expanddiv:after {
bottom: 100%;
border: solid transparent;
@@ -245,8 +236,8 @@ nav {
width: 0;
position: absolute;
pointer-events: none;
- border-color: rgba(0, 0, 0, 0);
- border-bottom-color: rgba(255, 255, 255, .97);
+ border-color: transparent;
+ border-bottom-color: $color-main-background;
border-width: 10px;
margin-left: -10px;
}
@@ -277,7 +268,6 @@ nav {
}
svg,
span {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)';
opacity: .7;
}
svg {
@@ -287,12 +277,10 @@ nav {
&:focus svg,
&:hover span,
&:focus span {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
opacity: 1;
}
&.active {
svg, span {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
opacity: 1;
}
}
@@ -316,7 +304,6 @@ nav {
height: 16px;
}
.app-icon {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
opacity: 0;
}
}
@@ -357,7 +344,6 @@ nav {
cursor: pointer;
}
img {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)';
opacity: .7;
margin-bottom: -2px;
}
@@ -367,7 +353,6 @@ nav {
color: $color-primary-text;
img,
#expandDisplayName {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
opacity: 1;
}
}
@@ -406,7 +391,7 @@ nav {
position: absolute;
pointer-events: none;
border: 0 solid transparent;
- border-bottom-color: white;
+ border-bottom-color: $color-main-background;
border-width: 10px;
transform: translateX(-50%);
left: 26px;
@@ -429,7 +414,6 @@ nav {
color: $color-main-text;
padding: 10px 12px 0;
box-sizing: border-box;
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)';
opacity: .7;
img {
margin-bottom: -3px;
@@ -439,7 +423,6 @@ nav {
&:focus,
&:active,
&.active {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
opacity: 1;
}
}
@@ -491,7 +474,7 @@ nav {
display: none;
position: absolute;
overflow: visible;
- background-color: rgba(255, 255, 255, .97);
+ background-color: rgba($color-main-background, .97);
white-space: nowrap;
border: none;
-webkit-border-radius: 3px;
@@ -500,7 +483,7 @@ nav {
border-top-left-radius: 0;
border-top-right-radius: 0;
margin-top: 0;
- color: rgba(0, 0, 0, .7);
+ color: rgba($color-main-text, .7);
width: auto;
left: 50%;
top: 45px;
@@ -522,7 +505,7 @@ nav {
position: absolute;
pointer-events: none;
border: 0 solid transparent;
- border-bottom-color: white;
+ border-bottom-color: $color-main-background;
border-width: 10px;
transform: translateX(-50%);
left: 50%;
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 5a7da4f50c9..5fe65935ec5 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -269,8 +269,8 @@ input {
}
&:checked + label:before {
box-shadow: inset 0px 0px 0px 2px $color-main-text;
- background-color: nc-darken($color-main-background, 8%);
- border-color: nc-darken($color-main-background, 8%)
+ background-color: $color-border;
+ border-color: $color-border
}
&:disabled + label:before {
background-color: nc-lighten($color-main-text, 33%) !important; /* override other status */
@@ -320,6 +320,7 @@ input {
/* Select2 overriding. Merged to core with vendor stylesheet */
.select2-drop {
margin-top: -2px;
+ background-color: $color-main-background;
&.select2-drop-active {
border-color: nc-lighten($color-main-text, 86%);
}
@@ -354,7 +355,7 @@ input {
position: relative;
display: list-item;
padding: 12px;
- background-color: $color-main-background;
+ background-color: transparent;
cursor: pointer;
color: nc-lighten($color-main-text, 33%);
}
@@ -362,10 +363,10 @@ input {
&.select2-selected {
background-color: nc-darken($color-main-background, 3%);
}
- &.select2-highlighted {
+ }
+ .select2-highlighted {
background-color: nc-darken($color-main-background, 3%);
color: $color-main-text;
- }
}
}
}
@@ -408,6 +409,9 @@ input {
}
.select2-search-field input {
line-height: 20px;
+ &.select2-active {
+ background: none !important;
+ }
}
}
}
@@ -444,8 +448,8 @@ input {
}
&.select2-search-choice-focus,
&:hover {
- background-color: nc-darken($color-main-background, 8%);
- border-color: nc-darken($color-main-background, 8%);
+ background-color: $color-border;
+ border-color: $color-border;
}
}
.select2-arrow {
diff --git a/core/css/mobile.scss b/core/css/mobile.scss
index b0f8421345c..baf874db8f5 100644
--- a/core/css/mobile.scss
+++ b/core/css/mobile.scss
@@ -78,7 +78,7 @@
#app-content {
width: 100% !important;
left: 0 !important;
- background-color: #fff;
+ background-color: $color-main-background;
overflow-x: hidden !important;
z-index: 1000;
}
@@ -97,7 +97,7 @@
width: 44px;
height: 44px;
z-index: 149;
- background-color: rgba(255, 255, 255, .7);
+ background-color: rgba($color-main-background, .7);
cursor: pointer;
opacity: .6;
}
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 0465d137f53..be0b200ce35 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -165,7 +165,7 @@ body {
}
::-webkit-scrollbar-thumb {
- background: nc-lighten($color-main-text, 86%);
+ background: nc-darken($color-main-background, 14%);
border-radius: 3px;
}
@@ -187,7 +187,6 @@ body {
cursor: pointer;
-webkit-transition: all 100ms;
transition: all 100ms;
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)';
opacity: .6;
&:focus, &:active, &:valid {
color: $color-primary-text;
@@ -197,7 +196,6 @@ body {
border: 1px solid rgba($color-primary-text, 0.5) !important;
}
&:hover, &:focus, &:active {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
opacity: 1;
}
& ~ .icon-close-white {
@@ -327,7 +325,6 @@ body {
height: 64px;
width: 64px;
margin: 0 auto 15px;
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=40)';
opacity: .4;
}
@@ -580,7 +577,6 @@ label.infield {
}
#show:checked + label, #dbpassword:checked + label, #personal-show:checked + label {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
opacity: .8;
}
@@ -591,7 +587,6 @@ label.infield {
background-image: url('../img/actions/toggle.svg?v=1');
background-repeat: no-repeat;
background-position: center;
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)';
opacity: .3;
}
@@ -723,7 +718,6 @@ label.infield {
.warning {
margin: 0 7px 5px 4px;
legend {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
opacity: 1;
}
}
@@ -856,7 +850,6 @@ td.avatar {
top: 0;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
opacity: .9;
span {
cursor: pointer;
@@ -882,19 +875,16 @@ td.avatar {
}
tr .action:not(.permanent), .selectedActions a {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
opacity: 0;
}
tr {
&:hover .action, &:focus .action, .action.permanent {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
opacity: .5;
}
}
.selectedActions a {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
opacity: .5;
}
@@ -904,27 +894,23 @@ tr .action {
}
.header-action {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
opacity: .8;
}
tr {
&:hover .action:hover, &:focus .action:focus {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
opacity: 1;
}
}
.selectedActions a {
&:hover, &:focus {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
opacity: 1;
}
}
.header-action {
&:hover, &:focus {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
opacity: 1;
}
}
@@ -1124,7 +1110,7 @@ code {
.filelist {
td {
padding: 14px;
- border-bottom: 1px solid nc-darken($color-main-background, 8%);
+ border-bottom: 1px solid $color-border;
}
tr:last-child td {
border-bottom: none;
@@ -1213,7 +1199,7 @@ span.ui-icon {
position: relative;
align-items: center;
padding: 3px 3px 3px 10px;
- border-bottom: 1px solid #eeeeee;
+ border-bottom: 1px solid $color-border;
:last-of-type {
border-bottom: none;
@@ -1359,7 +1345,6 @@ div.crumb {
top: 8px !important;
}
&:hover, &:focus, a:focus, &:active {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)';
opacity: .7;
}
}
@@ -1422,5 +1407,4 @@ fieldset {
width: 0;
height: 0;
opacity: 0;
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
}
diff --git a/core/css/tooltip.scss b/core/css/tooltip.scss
index 7c6a2f8a580..dad7b95bbdf 100644
--- a/core/css/tooltip.scss
+++ b/core/css/tooltip.scss
@@ -31,10 +31,8 @@
font-size: 12px;
opacity: 0;
z-index: 100000;
- filter: alpha(opacity = 0);
&.in {
opacity: 1;
- filter: alpha(opacity = 100);
}
&.top {
diff --git a/core/css/variables.scss b/core/css/variables.scss
index 3a135f91c86..26fd11a07d7 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -20,4 +20,5 @@ $image-login-background: '../img/background.png?v=2';
$color-loading: #969696;
$color-loading-dark: #bbbbbb;
-$color-box-shadow: rgba(nc-lighten($color-main-text, 20%), 0.75);
+$color-box-shadow: rgba(nc-darken($color-main-background, 30%), 0.75);
+$color-border: nc-darken($color-main-background, 8%);