Commit 6d5106fd authored by Michael Friedrich's avatar Michael Friedrich
Browse files

Clean application and list SCSS and drop unused stuff

parent 4af3ffb4
......@@ -5,7 +5,6 @@
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #fff;
$text-color: #fff;
$value-color: #fff;
......@@ -13,88 +12,29 @@ $title-color: rgba(255, 255, 255, 0.7);
$title-color-uns: rgba(0, 0, 0, 0.7);
$moreinfo-color: rgba(255, 255, 255, 0.7);
$background-warning-color-1: #e82711;
$background-warning-color-2: #9b2d23;
$text-warning-color: #fff;
$background-color: transparent;
$background-color-green: rgba(68, 187, 119, 0.5);
$background-color-red: rgba(255, 85, 102, 0.5);
$background-color-yellow: rgba(255, 170, 68, 0.5);
$background-color-purple: rgba(170, 68, 255, 0.5);
$background-color-grey: rgba(153, 153, 153, 0.5);
$background-danger-color-1: #eeae32;
$background-danger-color-2: #ff9618;
$text-danger-color: #fff;
//$icinga-blue: #0095bf;
$icinga-blue: rgba(0, 149, 191, 1);
$background-color-green: #44bb77;
$background-color-green-1: #44bb77;
$background-color-green-2: #44bb77;
$value-color-green: #fff;
$background-color-red: #ff5566;
$background-color-red-1: #ff5566;
$background-color-red-2: #ff5566;
$value-color-red: #fff;
$background-color-yellow: #ffaa44;
$background-color-yellow-1: #ffaa44;
$background-color-yellow-2: #ffaa44;
$value-color-yellow: #fff;
$background-color-purple: #aa44ff;
$background-color-purple-1: #aa44ff;
$background-color-purple-2: #aa44ff;
$value-color-purple: #fff;
$background-color-grey: #999999;
$value-color-grey: #fff;
$icinga-blue: #0095bf;
@-webkit-keyframes status-warning-background {
0% { background-color: $background-warning-color-1; }
50% { background-color: $background-warning-color-2; }
100% { background-color: $background-warning-color-1; }
}
@-webkit-keyframes status-danger-background {
0% { background-color: $background-danger-color-1; }
50% { background-color: $background-danger-color-2; }
100% { background-color: $background-danger-color-1; }
}
@mixin animation($animation-name, $duration, $function, $animation-iteration-count:""){
-webkit-animation: $animation-name $duration $function #{$animation-iteration-count};
-moz-animation: $animation-name $duration $function #{$animation-iteration-count};
-ms-animation: $animation-name $duration $function #{$animation-iteration-count};
}
@-webkit-keyframes status-yellow-background {
0% { background-color: $background-color-yellow-1; }
50% { background-color: $background-color-yellow-2; }
100% { background-color: $background-color-yellow-1; }
}
@-webkit-keyframes status-red-background {
0% { background-color: $background-color-red-1; }
50% { background-color: $background-color-red-2; }
100% { background-color: $background-color-red-1; }
}
@-webkit-keyframes status-green-background {
0% { background-color: $background-color-green-1; }
50% { background-color: $background-color-green-2; }
100% { background-color: $background-color-green-1; }
}
@-webkit-keyframes status-purple-background {
0% { background-color: $background-color-purple-1; }
50% { background-color: $background-color-purple-2; }
100% { background-color: $background-color-purple-1; }
}
@mixin animation($animation-name, $duration, $function, $animation-iteration-count:""){
-webkit-animation: $animation-name $duration $function #{$animation-iteration-count};
-moz-animation: $animation-name $duration $function #{$animation-iteration-count};
-ms-animation: $animation-name $duration $function #{$animation-iteration-count};
}
// ----------------------------------------------------------------------------
// Base styles
// ----------------------------------------------------------------------------
html {
background-image: url("icinga-hero-background.jpg");
//background-color: $icinga-blue;
background-color: transparent;
background-color: $background-color;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
......@@ -215,7 +155,7 @@ h3 {
width: 100%;
height: 100%;
//background-color: $icinga-blue;
background-color: transparent;
background-color: $background-color;
/* Hack to fill the surrounding list element */
position: absolute;
top: 0;
......@@ -258,33 +198,6 @@ h3 {
color: rgba(0, 0, 0, 0.3);
}
.widget.status-warning {
background-color: $background-warning-color-1;
@include animation(status-warning-background, 2s, ease, infinite);
.icon-warning-sign {
display: inline-block;
}
.title, .more-info {
color: $text-warning-color;
}
}
.widget.status-danger {
color: $text-danger-color;
background-color: $background-danger-color-1;
@include animation(status-danger-background, 2s, ease, infinite);
.icon-warning-sign {
display: inline-block;
}
.title, .more-info {
color: $text-danger-color;
}
}
#save-gridster {
display: none;
position: fixed;
......
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #0095bf;
$title-color: #fff;
$value-color: #fff;
$moreinfo-color: #fff;
$background-color-green: #44bb77;
$background-color-green-1: #44bb77;
$background-color-green-2: #44bb77;
$value-color-green: #fff;
$background-color-red: #ff5566;
$background-color-red-1: #ff5566;
$background-color-red-2: #ff5566;
$value-color-red: #fff;
$background-color-yellow: #ffaa44;
$background-color-yellow-1: #ffaa44;
$background-color-yellow-2: #ffaa44;
$value-color-yellow: #fff;
$background-color-purple: #aa44ff;
$background-color-purple-1: #aa44ff;
$background-color-purple-2: #aa44ff;
$value-color-purple: #fff;
$background-color-grey: #999999;
$value-color-grey: #fff;
$label-color: rgba(255, 255, 255, 0.7);
$background-color: transparent;
$background-color-green: rgba(68, 187, 119, 0.5);
$background-color-red: rgba(255, 85, 102, 0.5);
$background-color-yellow: rgba(255, 170, 68, 0.5);
$background-color-purple: rgba(170, 68, 255, 0.5);
$background-color-grey: rgba(153, 153, 153, 0.5);
// ----------------------------------------------------------------------------
// Widget-list styles
// ----------------------------------------------------------------------------
.widget-list {
background-color: $background-color;
font-size: 15px;
ol, ul {
text-align: left;
......@@ -60,31 +44,25 @@ $label-color: rgba(255, 255, 255, 0.7);
.label {
color: $label-color;
font-size: 15px;
}
.value {
float: right;
margin-left: 10px;
font-weight: 500;
font-size: 15px;
color: $value-color;
}
.green {
background-color: #44bb77;
font-size: 15px;
background-color: $background-color-green;
}
.yellow {
background-color: #ffaa44;
font-size: 15px;
background-color: $background-color-yellow;
}
.red {
background-color: #ff5566;
font-size: 15px;
background-color: $background-color-red;
}
.purple {
background-color: #aa44ff;
font-size: 15px;
background-color: $background-color-purple;
}
}
Markdown is supported
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