diff options
author | John Molakvoæ <skjnldsv@users.noreply.github.com> | 2017-09-25 16:50:30 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-09-25 16:50:30 +0200 |
commit | 9080976975c97ef7d377bb068bdf3e7e9e7746bf (patch) | |
tree | 19852abbe9ac3cf766224d305e7365916774c82d /core/css | |
parent | 3bd4e7e5412aafd3d444954aa6f73010029a3507 (diff) | |
parent | ab1c34c5a57b4e6ac27c18b4197c9431d70eba05 (diff) | |
download | nextcloud-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.scss | 41 | ||||
-rw-r--r-- | core/css/guest.css | 4 | ||||
-rw-r--r-- | core/css/header.scss | 31 | ||||
-rw-r--r-- | core/css/inputs.scss | 18 | ||||
-rw-r--r-- | core/css/mobile.scss | 4 | ||||
-rw-r--r-- | core/css/styles.scss | 22 | ||||
-rw-r--r-- | core/css/tooltip.scss | 2 | ||||
-rw-r--r-- | core/css/variables.scss | 3 |
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%); |