Skip to content
Snippets Groups Projects
Unverified Commit 34bf2b56 authored by Julius Haertl's avatar Julius Haertl Committed by Julius Härtl
Browse files

SCSS colors in header.scss 


Signed-off-by: default avatarJulius Haertl <jus@bitgrid.net>
parent 2d1f886c
No related branches found
No related tags found
Hide whitespace changes
Inline Side-by-side
core/css/header.scss
+ 15
− 16
View file @ 34bf2b56
...@@ -25,8 +25,7 @@ ...@@ -25,8 +25,7 @@
&.menu:after, &.menu:after,
.menu:after { .menu:after {
border: 10px solid transparent; border: 10px solid transparent;
border-color: transparent; border-bottom-color: $color-main-background;
border-bottom-color: #fff;
bottom: 100%; bottom: 100%;
content: ' '; content: ' ';
height: 0; height: 0;
...@@ -48,7 +47,7 @@ ...@@ -48,7 +47,7 @@
&:focus { &:focus {
left: 76px; left: 76px;
top: -9px; top: -9px;
color: #fff; color: $color-primary-text;
width: auto; width: auto;
height: auto; height: auto;
} }
...@@ -65,7 +64,7 @@ ...@@ -65,7 +64,7 @@
right: 0; right: 0;
z-index: 2000; z-index: 2000;
height: 45px; height: 45px;
background-color: #0082c9; background-color: $color-primary;
box-sizing: border-box; box-sizing: border-box;
justify-content: space-between; justify-content: space-between;
} }
...@@ -91,7 +90,7 @@ ...@@ -91,7 +90,7 @@
#header { #header {
.logo { .logo {
background-image: url('../img/logo-icon.svg?v=1'); background-image: url('#{$image-logo}');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 175px; background-size: 175px;
background-position: center; background-position: center;
...@@ -102,7 +101,7 @@ ...@@ -102,7 +101,7 @@
.logo-icon { .logo-icon {
/* display logo so appname can be shown next to it */ /* display logo so appname can be shown next to it */
display: inline-block; display: inline-block;
background-image: url('../img/logo-icon.svg?v=1'); background-image: url($image-logo);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
width: 62px; width: 62px;
...@@ -177,7 +176,7 @@ ...@@ -177,7 +176,7 @@
.header-appname { .header-appname {
display: inline-block; display: inline-block;
position: relative; position: relative;
color: #fff; color: $color-primary-text;
font-size: 16px; font-size: 16px;
font-weight: 300; font-weight: 300;
margin: 0; margin: 0;
...@@ -204,8 +203,8 @@ nav { ...@@ -204,8 +203,8 @@ nav {
max-height: 85%; max-height: 85%;
margin-top: 0; margin-top: 0;
padding-bottom: 10px; padding-bottom: 10px;
background-color: rgba(255, 255, 255, .97); background-color: $color-main-background;
box-shadow: 0 1px 10px rgba(150, 150, 150, .75); box-shadow: 0 1px 10px rgba(lighten($color-main-text, 25%), 0.75);
border-radius: 3px; border-radius: 3px;
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
...@@ -276,7 +275,7 @@ nav { ...@@ -276,7 +275,7 @@ nav {
padding-left: 0; padding-left: 0;
width: 80px; width: 80px;
text-align: center; text-align: center;
color: #000; color: $color-main-text;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -359,7 +358,7 @@ nav { ...@@ -359,7 +358,7 @@ nav {
#settings { #settings {
display: inline-block; display: inline-block;
color: #ddd; color: rgba($color-primary-text, 0.7);
cursor: pointer; cursor: pointer;
.icon-loading-small-dark { .icon-loading-small-dark {
display: inline-block; display: inline-block;
...@@ -387,7 +386,7 @@ nav { ...@@ -387,7 +386,7 @@ nav {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
color: #fff; color: $color-primary-text;
img { img {
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
opacity: 1; opacity: 1;
...@@ -419,8 +418,8 @@ nav { ...@@ -419,8 +418,8 @@ nav {
top: 45px; top: 45px;
z-index: 2000; z-index: 2000;
display: none; display: none;
background: rgb(255, 255, 255); background: $color-main-background;
box-shadow: 0 1px 10px rgba(150, 150, 150, .75); box-shadow: 0 1px 10px rgba(lighten($color-main-text-dimmed, 25%), 0.75);
border-radius: 3px; border-radius: 3px;
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
...@@ -432,10 +431,10 @@ nav { ...@@ -432,10 +431,10 @@ nav {
a { a {
display: block; display: block;
height: 40px; height: 40px;
color: #000; color: $color-main-text;
opacity: .5;
padding: 10px 12px 0; padding: 10px 12px 0;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)'; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
opacity: .5;
box-sizing: border-box; box-sizing: border-box;
img { img {
margin-bottom: -3px; margin-bottom: -3px;
......
core/css/variables.scss
+ 1
− 0
View file @ 34bf2b56
$color-main-text: #000000; $color-main-text: #000000;
$color-main-text-dimmed: #555555; $color-main-text-dimmed: #555555;
$color-main-background: #ffffff; $color-main-background: #ffffff;
$color-main-background-dimmed: #f8f8f8;
$color-primary: #0082c9; $color-primary: #0082c9;
$color-primary-text: #ffffff; $color-primary-text: #ffffff;
$color-error: #e9322d; $color-error: #e9322d;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment