harmonize colors palette (v2)

This commit is contained in:
2014-12-01 23:37:25 +01:00
parent cfc7eb91b2
commit 4d1276adf0
10 changed files with 259 additions and 247 deletions

View File

@@ -1,10 +1,10 @@
/* Standard Tags */ /* Standard Tags */
body, html { body, html {
background:$col_white; background:$col_none;
font-family:Verdana, Arial; font-family:Verdana, Arial;
color:$col_blue; color:$col_main_1;
background:$col_blue; background:$col_main_1;
padding:0; padding:0;
margin:0; margin:0;
min-width:1024px; min-width:1024px;
@@ -30,23 +30,23 @@ input, textarea, select {
border:none; border:none;
} }
input[type=text], input[type=password] { input[type=text], input[type=password] {
border:2px solid $col_blue; border:2px solid $col_main_1;
padding:5px; padding:5px;
width:200px; width:200px;
} }
input[type=button]:hover, input[type=submit]:hover, input[type=password]:hover, input[type=text]:hover, input[type=text]:focus { input[type=button]:hover, input[type=submit]:hover, input[type=password]:hover, input[type=text]:hover, input[type=text]:focus {
background-color:$col_orange; background-color:$col_hover_1;
} }
input[disabled="disabled"], textarea[disabled="disabled"], input:disabled, textarea:disabled { input[disabled="disabled"], textarea[disabled="disabled"], input:disabled, textarea:disabled {
background-color:$col_bright_blue; background-color:$col_main_2;
border-color:$col_bright_blue; border-color:$col_main_2;
border:2px solid $col_blue; border:2px solid $col_main_1;
} }
input[disabled="disabled"]:hover, textarea[disabled="disabled"]:hover, input:disabled:hover, textarea:disabled:hover { input[disabled="disabled"]:hover, textarea[disabled="disabled"]:hover, input:disabled:hover, textarea:disabled:hover {
background-color:$col_bright_blue; background-color:$col_main_2;
} }
button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner,input[type="file"] > input[type="button"]::-moz-focus-inner { button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner,input[type="file"] > input[type="button"]::-moz-focus-inner {
@@ -58,10 +58,10 @@ input[type=button], .clickable {
} }
select { select {
background:$col_white; background:$col_none;
border:2px solid $col_blue; border:2px solid $col_main_1;
padding:5px; padding:5px;
color:$col_blue; color:$col_main_1;
margin:0; margin:0;
} }
@@ -70,7 +70,7 @@ textarea {
} }
input, select, textarea, h1, h2, h3, h4, p, a { input, select, textarea, h1, h2, h3, h4, p, a {
color:$col_blue; color:$col_main_1;
} }
p { p {
@@ -183,45 +183,45 @@ img {
} }
.error, .error a { .error, .error a {
color:red; color:$col_error;
border-color:red; border-color:$col_error;
font-size:14px; font-size:14px;
font-weight:bold; font-weight:bold;
} }
.warning, .warning a { .warning, .warning a {
color:orange; color:$col_warning;
border-color:orange; border-color:$col_warning;
font-size:13px; font-size:13px;
font-style:italic; font-style:italic;
} }
.success, .success a { .success, .success a {
color:green; color:$col_success;
border-color:green; border-color:$col_success;
font-size:13px; font-size:13px;
} }
.default_text { .default_text {
color:$col_bright_blue !important; color:$col_main_2 !important;
} }
a.button { a.button {
padding:7px; padding:7px;
margin-right:5px; margin-right:5px;
background:$col_bright_blue; background:$col_main_2;
font-size:12px; font-size:12px;
cursor:pointer; cursor:pointer;
border:1px solid $col_blue; border:1px solid $col_main_1;
/*position:relative;*/ /*position:relative;*/
display:inline-block; display:inline-block;
} }
a.button:hover { a.button:hover {
background-color:$col_orange; background-color:$col_hover_1;
} }
a.button:active { a.button:active {
background-color:$col_blue; background-color:$col_main_1;
color:$col_white; color:$col_none;
} }
a.button .fa { a.button .fa {
@@ -234,13 +234,13 @@ a.button.strong .value {
} }
a.button.inverse { a.button.inverse {
background-color:$col_blue; background-color:$col_main_1;
color:$col_bright_blue; color:$col_main_2;
} }
a.button.inverse:hover { a.button.inverse:hover {
background-color:$col_orange; background-color:$col_hover_1;
color:$col_blue; color:$col_main_1;
} }
a.button.heavy { a.button.heavy {
@@ -258,7 +258,7 @@ a.button.gimmespace {
} }
.addr:hover { .addr:hover {
background-color:$col_white; background-color:$col_none;
} }
.maximized { .maximized {
@@ -284,7 +284,7 @@ a.button.gimmespace {
a.internal_link { a.internal_link {
text-decoration:underline; text-decoration:underline;
font-style:normal; font-style:normal;
background:$col_bright_blue; background:$col_main_2;
padding:1px 8px 1px 5px; padding:1px 8px 1px 5px;
margin:0; margin:0;
} }
@@ -300,19 +300,19 @@ a[href^="table"].internal_link span.item {
.author_box { .author_box {
padding:5px 10px; padding:5px 10px;
border:1px solid $col_blue; border:1px solid $col_main_1;
color:$col_blue; color:$col_main_1;
font-style:italic; font-style:italic;
font-size:12px; font-size:12px;
} }
.author_box:nth-child(odd) { .author_box:nth-child(odd) {
background:$col_brighter_blue; background:$col_main_3;
} }
.author_box:nth-child(even) { .author_box:nth-child(even) {
background:$col_bright_blue; background:$col_main_2;
} }
.author_box:hover { .author_box:hover {
border-color:$col_orange; border-color:$col_hover_1;
} }
.author_box a { .author_box a {
@@ -341,7 +341,7 @@ a[href^="table"].internal_link span.item {
margin-top:10px; margin-top:10px;
} }
.standalone .author_box:hover { .standalone .author_box:hover {
color:$col_orange; color:$col_hover_1;
} }
.hide, .mobile { .hide, .mobile {
@@ -354,22 +354,22 @@ a[href^="table"].internal_link span.item {
margin-top:5px; margin-top:5px;
margin-bottom:5px; margin-bottom:5px;
padding:10px; padding:10px;
background:$col_bright_blue; background:$col_main_2;
color:$col_blue; color:$col_main_1;
border: 2px solid $col_blue; border: 2px solid $col_main_1;
} }
.step_box:nth-child(even) { .step_box:nth-child(even) {
background:$col_brighter_blue; background:$col_main_3;
} }
.step_box input, .step_box textarea, .step_box select, .step_box .read.textarea, .step_box .read.input { .step_box input, .step_box textarea, .step_box select, .step_box .read.textarea, .step_box .read.input {
margin-top:10px; margin-top:10px;
background:$col_white; background:$col_none;
font-size:14px; font-size:14px;
border-width:1px; border-width:1px;
} }
.step_box input:disabled, .step_box textarea:disabled, .step_box select:disabled, .step_box input:hover:disabled, .step_box textarea:hover:disabled, .step_box select:hover:disabled { .step_box input:disabled, .step_box textarea:disabled, .step_box select:disabled, .step_box input:hover:disabled, .step_box textarea:hover:disabled, .step_box select:hover:disabled {
background-color:$col_white; background-color:$col_none;
} }
.step_box input[type=text], .step_box textarea, .step_box .read.textarea, .step_box .read.input { .step_box input[type=text], .step_box textarea, .step_box .read.textarea, .step_box .read.input {
width:100%; width:100%;
@@ -377,26 +377,26 @@ a[href^="table"].internal_link span.item {
.step_box textarea, .step_box .read.textarea { .step_box textarea, .step_box .read.textarea {
height:200px; height:200px;
padding:5px; padding:5px;
background:$col_white; background:$col_none;
border:1px solid $col_blue; border:1px solid $col_main_1;
} }
.step_box .read.textarea, .step_box .read.input { .step_box .read.textarea, .step_box .read.input {
border-color:$col_bright_blue; border-color:$col_main_2;
font-weight:bold; font-weight:bold;
} }
.step_box .read.textarea { .step_box .read.textarea {
background-color:$col_brighter_blue; background-color:$col_main_3;
} }
.step_box:nth-child(even) .read.textarea { .step_box:nth-child(even) .read.textarea {
background-color:$col_bright_blue; background-color:$col_main_2;
} }
.step_box .read.input { .step_box .read.input {
background-color:$col_bright_blue; background-color:$col_main_2;
padding-left:0; padding-left:0;
} }
.step_box .step_nb_box, .step_box .step_box_title { .step_box .step_nb_box, .step_box .step_box_title {
border-bottom:1px solid $col_blue; border-bottom:1px solid $col_main_1;
padding:0; padding:0;
} }
@@ -423,11 +423,11 @@ a[href^="table"].internal_link span.item {
} }
.scrollbar .thumb, .scrollbar .thumb .end { .scrollbar .thumb, .scrollbar .thumb .end {
background-color:$col_blue; background-color:$col_main_1;
width:13px; width:13px;
} }
.scrollbar .track { .scrollbar .track {
background-color:$col_bright_blue; background-color:$col_main_2;
height:100%; height:100%;
width:13px; width:13px;
position:relative; position:relative;
@@ -462,13 +462,13 @@ a[href^="table"].internal_link span.item {
height:100%; height:100%;
height:210px; height:210px;
z-index:2; z-index:2;
border:1px solid $col_blue; border:1px solid $col_main_1;
background:$col_white; background:$col_none;
text-align:center; text-align:center;
} }
.uploader_droparea-active { .uploader_droparea-active {
background:$col_orange; background:$col_hover_1;
} }
.uploader_droparea span { .uploader_droparea span {
display:block; display:block;
@@ -504,13 +504,13 @@ a[href^="table"].internal_link span.item {
a.uploader_item_cancel { a.uploader_item_cancel {
text-decoration:underline; text-decoration:underline;
color:$col_blue; color:$col_main_1;
} }
.uploader_box .image_description { .uploader_box .image_description {
border-width:1px; border-width:1px;
padding:3px 5px; padding:3px 5px;
background:$col_white; background:$col_none;
} }
@@ -531,9 +531,9 @@ a.uploader_item_cancel {
} }
.uploader_item_failed { .uploader_item_failed {
color:red; color:$col_error;
} }
.uploader_item_success .fa-c-delete:hover, .uploader_item_cancel .fa-c-delete:hover { .uploader_item_success .fa-c-delete:hover, .uploader_item_cancel .fa-c-delete:hover {
color:$col_orange; color:$col_hover_1;
} }

View File

@@ -102,7 +102,7 @@ vertical-align 0% -5% -10% -15% -20% -25% -30%
} }
.fa-c-comment { .fa-c-comment {
color:$col_blue; color:$col_main_1;
} }
.fa-c-comment:before { .fa-c-comment:before {
content: "\f075"; content: "\f075";
@@ -129,7 +129,7 @@ vertical-align 0% -5% -10% -15% -20% -25% -30%
} }
.fa-c-fold { .fa-c-fold {
color:$col_blue; color:$col_main_1;
} }
.fa-c-fold:before { .fa-c-fold:before {
content: "\f191"; content: "\f191";
@@ -140,21 +140,21 @@ vertical-align 0% -5% -10% -15% -20% -25% -30%
} }
.fa-c-warning { .fa-c-warning {
color:$col_orange; color:$col_warning;
} }
.fa-c-warning:before { .fa-c-warning:before {
content: "\f071"; content: "\f071";
} }
.fa-c-error { .fa-c-error {
color:red; color:$col_error;
} }
.fa-c-error:before { .fa-c-error:before {
content: "\f071"; content: "\f071";
} }
.fa-c-ko { .fa-c-ko {
color:red; color:$col_error;
} }
.fa-c-ko:before, .unavailable .fa:before { .fa-c-ko:before, .unavailable .fa:before {
content: "\f00d"; content: "\f00d";

View File

@@ -36,7 +36,7 @@
.lb-outerContainer { .lb-outerContainer {
position: relative; position: relative;
background-color: $col_blue; background-color: $col_main_1;
*zoom: 1; *zoom: 1;
width: 250px; width: 250px;
height: 250px; height: 250px;
@@ -74,7 +74,7 @@
height: 32px; height: 32px;
margin: 0 auto; margin: 0 auto;
font-size:32px; font-size:32px;
color:$col_bright_blue; color:$col_main_2;
} }
.lb-nav { .lb-nav {
@@ -144,16 +144,16 @@
-webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%); -ms-transform: translateY(-50%);
transform: translateY(-50%); transform: translateY(-50%);
color:$col_blue; color:$col_main_1;
padding: 0 20px; padding: 0 20px;
} }
.lb-prev .fa { .lb-prev .fa {
text-shadow: -1px 2px 1px $col_bright_blue; text-shadow: -1px 2px 1px $col_main_2;
} }
.lb-next .fa { .lb-next .fa {
text-shadow: 1px 1px 1px $col_bright_blue; text-shadow: 1px 1px 1px $col_main_2;
} }
.lb-dataContainer { .lb-dataContainer {
@@ -177,7 +177,7 @@
.lb-data { .lb-data {
padding: 0 4px; padding: 0 4px;
color:$col_blue; color:$col_main_1;
} }
.lb-data .lb-details { .lb-data .lb-details {
@@ -198,7 +198,7 @@
clear: left; clear: left;
padding-bottom: 1em; padding-bottom: 1em;
font-size: 12px; font-size: 12px;
color:$col_blue; color:$col_main_1;
} }
.lb-data .lb-close { .lb-data .lb-close {
@@ -207,7 +207,7 @@
width: 30px; width: 30px;
height: 30px; height: 30px;
font-size:30px; font-size:30px;
color:$col_blue; color:$col_main_1;
text-align: right; text-align: right;
outline: none; outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);

View File

@@ -1,10 +1,22 @@
@CHARSET "UTF-8"; @CHARSET "UTF-8";
$col_blue: #04357B; /* All colors of the same type are sorted from the darkest to the brightest */
$col_bright_blue: #D9E5F2;
$col_brighter_blue: #DCF2FB; /* Main colors */
$col_new_blue: #0C8BCE; $col_main_1: #04357B;
$col_orange: #EFAB00; $col_main_2: #D9E5F2;
$col_bright_orange: #F2E1B5; $col_main_3: #DCF2FB;
$col_white: #FFFFFF;
$col_black: #000000; /* Flashy hover colors */
$col_hover_1: #EFAB00;
$col_hover_2: #F2E1B5;
/* Traffic light colors */
$col_success: green;
$col_warning: orange;
$col_error: red;
/* Technical colors */
$col_none: #FFFFFF;
$col_black: #000000;
$col_main_4: #0C8BCE;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -9,7 +9,7 @@
/* Container */ /* Container */
#container { #container {
background:$col_blue; background:$col_main_1;
padding:10px 10px 1px; padding:10px 10px 1px;
} }
@@ -35,7 +35,7 @@
#query, #search_btn_submit { #query, #search_btn_submit {
height:25px; height:25px;
color:$col_blue; color:$col_main_1;
border:none; border:none;
float:right; float:right;
padding:0 10px; padding:0 10px;
@@ -43,30 +43,30 @@
} }
#query { #query {
background:$col_white; background:$col_none;
width:250px; width:250px;
} }
#search_btn_submit { #search_btn_submit {
background:$col_bright_blue; background:$col_main_2;
border-left:2px solid $col_blue; border-left:2px solid $col_main_1;
height:20px; height:20px;
padding-top:5px; padding-top:5px;
} }
#search_btn_submit:hover { #search_btn_submit:hover {
background-color:$col_orange; background-color:$col_hover_1;
} }
} }
/* Main */ /* Main */
#main_container { #main_container {
background:$col_white; background:$col_none;
margin-left:30px; margin-left:30px;
position:relative; position:relative;
overflow:hidden; overflow:hidden;
border:10px solid $col_white; border:10px solid $col_none;
} }
#page_title { #page_title {
@@ -77,13 +77,13 @@
margin:0 -12px 12px; margin:0 -12px 12px;
padding:12px 10px; padding:12px 10px;
width:100%; width:100%;
border:2px solid $col_blue; border:2px solid $col_main_1;
font-family:Arial; font-family:Arial;
font-size:32px; font-size:32px;
line-height:32px; line-height:32px;
font-style:italic; font-style:italic;
font-weight:600; font-weight:600;
@include gradient-diag($col_bright_blue, $col_white, 25%, 75%); @include gradient-diag($col_main_2, $col_none, 25%, 75%);
} }
#page_title h1 #title_feedback { #page_title h1 #title_feedback {
@@ -112,26 +112,26 @@
width:20px; width:20px;
padding:10px 0; padding:10px 0;
z-index:10; z-index:10;
border-right:0 solid $col_blue; border-right:0 solid $col_main_1;
background: $col_bright_blue; background: $col_main_2;
background: -moz-linear-gradient(top, $col_bright_blue 0%, $col_white 25%); background: -moz-linear-gradient(top, $col_main_2 0%, $col_none 25%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$col_bright_blue), color-stop(25%,$col_white)); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$col_main_2), color-stop(25%,$col_none));
background: -webkit-linear-gradient(top, $col_bright_blue 0%,$col_white 25%); background: -webkit-linear-gradient(top, $col_main_2 0%,$col_none 25%);
background: -o-linear-gradient(top, $col_bright_blue 0%,$col_white 25%); background: -o-linear-gradient(top, $col_main_2 0%,$col_none 25%);
background: -ms-linear-gradient(top, $col_bright_blue 0%,$col_white 25%); background: -ms-linear-gradient(top, $col_main_2 0%,$col_none 25%);
background: linear-gradient(to bottom, $col_bright_blue 0%,$col_white 25%); background: linear-gradient(to bottom, $col_main_2 0%,$col_none 25%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$col_bright_blue', endColorstr='$col_white',GradientType=0 ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$col_main_2', endColorstr='$col_none',GradientType=0 );
} }
#menu.opened { #menu.opened {
background: $col_white; background: $col_none;
background: -moz-linear-gradient(left, $col_white 75%, rgba(255,255,255,0) 100%); background: -moz-linear-gradient(left, $col_none 75%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(75%,$col_white), color-stop(100%,rgba(255,255,255,0))); background: -webkit-gradient(linear, left top, right top, color-stop(75%,$col_none), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, $col_white 75%,rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(left, $col_none 75%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left, $col_white 75%,rgba(255,255,255,0) 100%); background: -o-linear-gradient(left, $col_none 75%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(left, $col_white 75%,rgba(255,255,255,0) 100%); background: -ms-linear-gradient(left, $col_none 75%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right, $col_white 75%,rgba(255,255,255,0) 100%); background: linear-gradient(to right, $col_none 75%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$col_white', endColorstr='#00ffffff',GradientType=1 ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$col_none', endColorstr='#00ffffff',GradientType=1 );
} }
#menu #menu_title { #menu #menu_title {
@@ -147,7 +147,7 @@
#menu #menu_box { #menu #menu_box {
display:none; display:none;
color:$col_blue; color:$col_main_1;
text-align:center; text-align:center;
} }
@@ -176,24 +176,24 @@
} }
#menu #menu_box ul li a { #menu #menu_box ul li a {
color:$col_blue; color:$col_main_1;
display:block; display:block;
width:100%; width:100%;
} }
#menu #menu_box ul li:hover a { #menu #menu_box ul li:hover a {
color:$col_orange; color:$col_hover_1;
} }
#menu #menu_box ul li#rss_ln a { #menu #menu_box ul li#rss_ln a {
color:$col_blue; color:$col_main_1;
} }
#menu #menu_box ul li#quick_code_access_ln input { #menu #menu_box ul li#quick_code_access_ln input {
border:2px solid $col_blue; border:2px solid $col_main_1;
width:60px; width:60px;
padding:0 5px; padding:0 5px;
font-size:16px; font-size:16px;
color:$col_blue; color:$col_main_1;
} }
#menu #menu_box ul li .fa { #menu #menu_box ul li .fa {
@@ -206,14 +206,14 @@
position:absolute; position:absolute;
bottom:5px; bottom:5px;
left:5px; left:5px;
border:5px solid $col_blue; border:5px solid $col_main_1;
} }
/* Welcome */ /* Welcome */
#welcome #welcome_container { #welcome #welcome_container {
border:2px solid $col_blue; border:2px solid $col_main_1;
background:$col_bright_blue; background:$col_main_2;
padding:10px; padding:10px;
} }
@@ -252,27 +252,27 @@
margin-left:5px; margin-left:5px;
padding:2px 5px; padding:2px 5px;
font-weight:bold; font-weight:bold;
border:1px solid $col_blue; border:1px solid $col_main_1;
cursor:pointer; cursor:pointer;
background: $col_white; background: $col_none;
background: -moz-linear-gradient(top, $col_white 15%, $col_bright_blue 85%); background: -moz-linear-gradient(top, $col_none 15%, $col_main_2 85%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,$col_white), color-stop(85%,$col_bright_blue)); background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,$col_none), color-stop(85%,$col_main_2));
background: -webkit-linear-gradient(top, $col_white 15%,$col_bright_blue 85%); background: -webkit-linear-gradient(top, $col_none 15%,$col_main_2 85%);
background: -o-linear-gradient(top, $col_white 15%,$col_bright_blue 85%); background: -o-linear-gradient(top, $col_none 15%,$col_main_2 85%);
background: -ms-linear-gradient(top, $col_white 15%,$col_bright_blue 85%); background: -ms-linear-gradient(top, $col_none 15%,$col_main_2 85%);
background: linear-gradient(to bottom, $col_white 15%,$col_bright_blue 85%); background: linear-gradient(to bottom, $col_none 15%,$col_main_2 85%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$col_white', endColorstr='$col_bright_blue',GradientType=0 ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$col_none', endColorstr='$col_main_2',GradientType=0 );
} }
#welcome span.milestone:hover { #welcome span.milestone:hover {
color:$col_orange; color:$col_hover_1;
border-color:$col_orange; border-color:$col_hover_1;
background: -moz-linear-gradient(top, $col_white 15%, $col_bright_orange 85%); background: -moz-linear-gradient(top, $col_none 15%, $col_hover_2 85%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,$col_white), color-stop(85%,$col_bright_orange)); background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,$col_none), color-stop(85%,$col_hover_2));
background: -webkit-linear-gradient(top, $col_white 15%,$col_bright_orange 85%); background: -webkit-linear-gradient(top, $col_none 15%,$col_hover_2 85%);
background: -o-linear-gradient(top, $col_white 15%,$col_bright_orange 85%); background: -o-linear-gradient(top, $col_none 15%,$col_hover_2 85%);
background: -ms-linear-gradient(top, $col_white 15%,$col_bright_orange 85%); background: -ms-linear-gradient(top, $col_none 15%,$col_hover_2 85%);
background: linear-gradient(to bottom, $col_white 15%,$col_bright_orange 85%); background: linear-gradient(to bottom, $col_none 15%,$col_hover_2 85%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$col_white', endColorstr='$col_bright_orange',GradientType=0 ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$col_none', endColorstr='$col_hover_2',GradientType=0 );
} }
#welcome span.milestone .fa { #welcome span.milestone .fa {
margin-right:5px; margin-right:5px;
@@ -308,7 +308,7 @@
margin:0 -10px; margin:0 -10px;
padding:10px 6px 10px 10px; padding:10px 6px 10px 10px;
width:100%; width:100%;
border:2px solid $col_blue; border:2px solid $col_main_1;
min-height:100px; min-height:100px;
height:300px; height:300px;
font-family:courier; font-family:courier;
@@ -321,10 +321,10 @@
} }
#add_code_container input[type=text] { #add_code_container input[type=text] {
border:2px solid $col_blue; border:2px solid $col_main_1;
width:400px; width:400px;
padding:5px; padding:5px;
color:$col_blue; color:$col_main_1;
} }
#auth_company_container { #auth_company_container {
@@ -337,7 +337,7 @@
} }
#add_code_container input:hover, #add_code_container input[type=text]:focus { #add_code_container input:hover, #add_code_container input[type=text]:focus {
background-color:$col_orange; background-color:$col_hover_1;
} }
#link_result, #available_phrase { #link_result, #available_phrase {
@@ -349,8 +349,8 @@
} }
#link_result { #link_result {
color:$col_blue; color:$col_main_1;
border-color:$col_blue; border-color:$col_main_1;
} }
#available_phrase { #available_phrase {
@@ -358,12 +358,12 @@
} }
#available_phrase.available { #available_phrase.available {
color:green; color:$col_success;
border-color:green; border-color:$col_success;
} }
#available_phrase.unavailable { #available_phrase.unavailable {
color:red; color:$col_error;
border-color:red; border-color:$col_error;
} }
/* read code */ /* read code */
@@ -380,10 +380,10 @@
#code_container .code_reader { #code_container .code_reader {
margin:10px 0 0 0; margin:10px 0 0 0;
border:2px solid $col_blue; border:2px solid $col_main_1;
padding:0; padding:0;
background:#b5b5c6; background:#b5b5c6;
background:$col_blue; background:$col_main_1;
} }
#reader #code_container .code_reader { #reader #code_container .code_reader {
@@ -392,21 +392,21 @@
#code_container .code_reader ol li ::selection { #code_container .code_reader ol li ::selection {
background:#306897; background:#306897;
color:$col_white; color:$col_none;
} }
#code_container .code_reader ol li ::-moz-selection { #code_container .code_reader ol li ::-moz-selection {
background:#306897; background:#306897;
color:$col_white; color:$col_none;
} }
#code_container .code_reader .author_box { #code_container .code_reader .author_box {
background:$col_blue; background:$col_main_1;
border:none; border:none;
color:$col_white; color:$col_none;
} }
#code_container .code_reader .author_box * { #code_container .code_reader .author_box * {
color:$col_white; color:$col_none;
} }
#code_container .code_reader .tab_left { #code_container .code_reader .tab_left {
@@ -419,7 +419,7 @@
#code_container .code_reader ol { #code_container .code_reader ol {
border-left: 1px solid #848484; border-left: 1px solid #848484;
background:$col_white; background:$col_none;
margin:0; margin:0;
/*list-style-type:decimal-leading-zero;*/ /*list-style-type:decimal-leading-zero;*/
} }
@@ -429,7 +429,7 @@
margin:0; margin:0;
padding:0; padding:0;
border-left:1px dotted #398c8c; border-left:1px dotted #398c8c;
background:$col_white; background:$col_none;
font-family:Courier New, Courier; font-family:Courier New, Courier;
font-size:12px; font-size:12px;
line-height:12px; line-height:12px;
@@ -447,7 +447,7 @@
} }
#code_container .code_reader ol li:hover, #code_container .code_reader ol li.code_hover { #code_container .code_reader ol li:hover, #code_container .code_reader ol li.code_hover {
background-color:$col_bright_blue; background-color:$col_main_2;
} }
#code_container .code_reader .core {color:#0000ff; text-transform:uppercase;} #code_container .code_reader .core {color:#0000ff; text-transform:uppercase;}
@@ -462,7 +462,7 @@
#code_container .code_reader .global {color:$col_black;} #code_container .code_reader .global {color:$col_black;}
#code_container .code_reader .expand {font-weight:bold;} #code_container .code_reader .expand {font-weight:bold;}
#code_container .code_reader .comment span.code_part { #code_container .code_reader .comment span.code_part {
color:$col_blue; color:$col_main_1;
font-weight:bold; font-weight:bold;
text-transform:capitalize; text-transform:capitalize;
} }
@@ -493,18 +493,18 @@
} }
#code_container .code_reader ol li a.internal_link, #code_container .code_reader ol li a.external_link { #code_container .code_reader ol li a.internal_link, #code_container .code_reader ol li a.external_link {
color:$col_blue; color:$col_main_1;
border:none; border:none;
font-weight:normal; font-weight:normal;
text-indent:0; text-indent:0;
text-decoration:underline; text-decoration:underline;
} }
#code_container .code_reader ol li a.internal_link span { #code_container .code_reader ol li a.internal_link span {
color:$col_blue; color:$col_main_1;
font-weight:normal; font-weight:normal;
} }
#code_container .code_reader a.internal_link:hover, #code_container .code_reader a.internal_link:hover span { #code_container .code_reader a.internal_link:hover, #code_container .code_reader a.internal_link:hover span {
color:$col_orange; color:$col_hover_1;
} }
#code_container .code_reader ol li span.hide span { #code_container .code_reader ol li span.hide span {
@@ -532,7 +532,7 @@
cursor:pointer; cursor:pointer;
padding:0; padding:0;
z-index:1000; z-index:1000;
background: $col_white 0 0 no-repeat; background: $col_none 0 0 no-repeat;
width:9px; width:9px;
height:9px; height:9px;
} }
@@ -575,7 +575,7 @@
#search .code_reader:hover .tab_left, #search .code_reader:hover .tab_left,
#search .code_reader:hover ol, #search .code_reader:hover ol,
#search .code_reader:hover li { #search .code_reader:hover li {
background-color:$col_bright_blue; background-color:$col_main_2;
cursor:pointer; cursor:pointer;
} }
@@ -597,7 +597,7 @@
width:96px; width:96px;
height:96px; height:96px;
background:url("images/avatar_96.png") 0 0 no-repeat; background:url("images/avatar_96.png") 0 0 no-repeat;
border:2px solid $col_blue; border:2px solid $col_main_1;
float:left; float:left;
} }
@@ -612,8 +612,8 @@
margin-left:110px; /* 96 (picture) + 10 (margin) + 4 (borders) */ margin-left:110px; /* 96 (picture) + 10 (margin) + 4 (borders) */
padding:10px 16px; padding:10px 16px;
height:76px; /* 96 (picture height) - 20 (padding) */ height:76px; /* 96 (picture height) - 20 (padding) */
border:2px solid $col_blue; border:2px solid $col_main_1;
background:$col_bright_blue; background:$col_main_2;
} }
#profile .user .fa { #profile .user .fa {
@@ -633,14 +633,14 @@
margin:30px 0 0 0 ; margin:30px 0 0 0 ;
padding:0 10px 0 25px;; padding:0 10px 0 25px;;
font-size:25px; font-size:25px;
color:$col_blue; color:$col_main_1;
border-bottom:2px solid $col_blue; border-bottom:2px solid $col_main_1;
background:url(images/logo_25.png) 0 1px no-repeat; background:url(images/logo_25.png) 0 1px no-repeat;
} }
#profile #history_subbox { #profile #history_subbox {
margin-top:10px; margin-top:10px;
border:2px solid $col_blue; border:2px solid $col_main_1;
} }
#profile #user_history p.history_line { #profile #user_history p.history_line {
@@ -648,10 +648,10 @@
font-size:14px; font-size:14px;
} }
#profile #user_history p.history_line:nth-child(odd) { #profile #user_history p.history_line:nth-child(odd) {
background:$col_bright_blue; background:$col_main_2;
} }
#profile #user_history p.history_line:nth-child(even) { #profile #user_history p.history_line:nth-child(even) {
background:$col_white; background:$col_none;
} }
#profile #user_history p.history_line:FIRST-CHILD { #profile #user_history p.history_line:FIRST-CHILD {
-moz-border-radius-topleft: 10px; -moz-border-radius-topleft: 10px;
@@ -692,8 +692,8 @@
#chat #chat_room { #chat #chat_room {
margin-right:175px; /* 165px + 10px (margin-left) */ margin-right:175px; /* 165px + 10px (margin-left) */
border:2px solid $col_blue; border:2px solid $col_main_1;
background:$col_white; background:$col_none;
height:100%; height:100%;
} }
@@ -705,13 +705,13 @@
background-size: 100% 100%; background-size: 100% 100%;
background: -moz-linear-gradient( background: -moz-linear-gradient(
top, top,
$col_white, $col_none,
rgba(255,255,255,0) rgba(255,255,255,0)
); );
background: -webkit-gradient( background: -webkit-gradient(
linear, linear,
left top, left bottom, left top, left bottom,
from($col_white), from($col_none),
to(rgba(255,255,255,0)) to(rgba(255,255,255,0))
);*/ );*/
} }
@@ -733,7 +733,7 @@
position:relative; position:relative;
height:20px; height:20px;
overflow:hidden; overflow:hidden;
background:$col_white url("images/sap_gold_332.jpg") 50% 50% no-repeat; background:$col_none url("images/sap_gold_332.jpg") 50% 50% no-repeat;
} }
#chat #chat_room #chat_container #chat_messages { #chat #chat_room #chat_container #chat_messages {
@@ -750,19 +750,19 @@
} }
#chat_messages p { #chat_messages p {
color:$col_blue; color:$col_main_1;
} }
#chat_messages p img.proxy { #chat_messages p img.proxy {
vertical-align:middle; vertical-align:middle;
border:1px solid $col_blue; border:1px solid $col_main_1;
padding:5px; padding:5px;
background:$col_white; background:$col_none;
} }
#chat_messages p.U { #chat_messages p.U {
/*background-color:white;*/ /*background-color:white;*/
} }
#chat_messages p.A, #chat_messages p.PA, #chat_messages p.E, #chat_messages p.PE, #chat_messages p.N { #chat_messages p.A, #chat_messages p.PA, #chat_messages p.E, #chat_messages p.PE, #chat_messages p.N {
background-color:$col_bright_blue; background-color:$col_main_2;
font-style:italic; font-style:italic;
} }
#chat_messages p.C { #chat_messages p.C {
@@ -771,14 +771,14 @@
font-style:normal; font-style:normal;
} }
#chat_messages p span.time { #chat_messages p span.time {
color:$col_orange; color:$col_hover_1;
font-size:10px; font-size:10px;
font-style:normal; font-style:normal;
} }
#chat_messages p a.user, #chat_messages p span.console { #chat_messages p a.user, #chat_messages p span.console {
font-size:12px; font-size:12px;
font-weight:bold; font-weight:bold;
color:$col_blue; color:$col_main_1;
} }
#chat_messages p a.user { #chat_messages p a.user {
margin-left:5px; margin-left:5px;
@@ -801,7 +801,7 @@
color:grey; color:grey;
} }
#chat_messages p span.highlight { #chat_messages p span.highlight {
color:red; color:$col_error;
} }
#chat_messages p span.chan_link { #chat_messages p span.chan_link {
font-weight:bold; font-weight:bold;
@@ -814,7 +814,7 @@
border:1px dashed #666666; border:1px dashed #666666;
padding:0 0 5px 0; padding:0 0 5px 0;
margin:5px 0; margin:5px 0;
background:$col_white; background:$col_none;
} }
#chat_messages .help p { #chat_messages .help p {
padding:0 5px; padding:0 5px;
@@ -849,16 +849,16 @@
#chat #chat_input { #chat #chat_input {
margin:5px; margin:5px;
padding:0 5px; padding:0 5px;
background:$col_blue; background:$col_main_1;
} }
#chat #chat_input .fa { #chat #chat_input .fa {
color:$col_bright_blue; color:$col_main_2;
margin-right:2px; margin-right:2px;
} }
#chat #chat_input input#message { #chat #chat_input input#message {
color:$col_white; color:$col_none;
margin:0; margin:0;
padding:7px 0; padding:7px 0;
border:none; border:none;
@@ -883,19 +883,19 @@
#chat #sidebar .sidebar_box { #chat #sidebar .sidebar_box {
position:relative; position:relative;
border:2px solid $col_blue; border:2px solid $col_main_1;
font-weight:bold; font-weight:bold;
padding:0; padding:0;
margin-bottom:10px; margin-bottom:10px;
} }
#chat #sidebar .sidebar_box_title { #chat #sidebar .sidebar_box_title {
background-color:$col_bright_blue; background-color:$col_main_2;
text-align:center; text-align:center;
} }
#chat #sidebar .sidebar_box_content { #chat #sidebar .sidebar_box_content {
border-top:2px solid $col_blue; border-top:2px solid $col_main_1;
font-size:12px; font-size:12px;
font-weight:normal; font-weight:normal;
} }
@@ -926,19 +926,19 @@
width:calc(100% - 24px - 5px); /* logo + right margin */ width:calc(100% - 24px - 5px); /* logo + right margin */
font-style:italic; font-style:italic;
font-weight:normal; font-weight:normal;
color:$col_blue; color:$col_main_1;
text-decoration:underline; text-decoration:underline;
margin-left:5px; margin-left:5px;
} }
#chat #sidebar a.connected_user:hover { #chat #sidebar a.connected_user:hover {
color:$col_orange; color:$col_hover_1;
} }
#chat .afk { #chat .afk {
position:absolute; position:absolute;
font-size:20px; font-size:20px;
line-height:20px; line-height:20px;
text-shadow: 1px 1px 1px $col_bright_blue; text-shadow: 1px 1px 1px $col_main_2;
margin-left:-20px; margin-left:-20px;
margin-top:2px; /* (24 - 20)/2 */ margin-top:2px; /* (24 - 20)/2 */
} }
@@ -955,23 +955,23 @@
#chat #chat_chan .tab_bar span.chan { #chat #chat_chan .tab_bar span.chan {
display: inline-block; display: inline-block;
background-color:$col_bright_blue; background-color:$col_main_2;
padding:2px 8px; padding:2px 8px;
border:2px solid $col_blue; border:2px solid $col_main_1;
margin-left:5px; margin-left:5px;
color:$col_blue; color:$col_main_1;
} }
#chat #chat_chan .tab_bar span#join_chan { #chat #chat_chan .tab_bar span#join_chan {
padding:2px; padding:2px;
border-bottom:$col_blue; border-bottom:$col_main_1;
} }
#chat #chat_chan .tab_bar span#join_chan:hover #join_chan_button { #chat #chat_chan .tab_bar span#join_chan:hover #join_chan_button {
color:$col_orange; color:$col_hover_1;
} }
#chat #chat_chan .tab_bar span.chan:hover, #chat #chat_chan .tab_bar span#join_chan.active { #chat #chat_chan .tab_bar span.chan:hover, #chat #chat_chan .tab_bar span#join_chan.active {
background-color:$col_blue; background-color:$col_main_1;
color:$col_white; color:$col_none;
} }
#chat #chat_chan .tab_bar span.chan span.chan_title { #chat #chat_chan .tab_bar span.chan span.chan_title {
text-transform:capitalize; text-transform:capitalize;
@@ -982,17 +982,17 @@
} }
#chat #chat_chan .tab_bar a.quit_chan { #chat #chat_chan .tab_bar a.quit_chan {
margin-left:5px; margin-left:5px;
color:$col_blue; color:$col_main_1;
} }
#chat #chat_chan .tab_bar span.chan.active:hover a.quit_chan { #chat #chat_chan .tab_bar span.chan.active:hover a.quit_chan {
color:$col_blue; color:$col_main_1;
} }
#chat #chat_chan .tab_bar span.chan:hover a.quit_chan { #chat #chat_chan .tab_bar span.chan:hover a.quit_chan {
color:$col_bright_blue; color:$col_main_2;
} }
#chat #chat_chan .tab_bar span.chan a.quit_chan:hover, #chat #chat_chan .tab_bar span.chan a.quit_chan:hover,
#chat #chat_chan .tab_bar .fa:hover { #chat #chat_chan .tab_bar .fa:hover {
color:$col_orange; color:$col_hover_1;
} }
#chat #chat_chan .tab_bar span#join_chan input, #chat #chat_chan .tab_bar span#join_chan input:hover { #chat #chat_chan .tab_bar span#join_chan input, #chat #chat_chan .tab_bar span#join_chan input:hover {
@@ -1001,18 +1001,18 @@
padding:0; padding:0;
margin:0; margin:0;
width:70px; width:70px;
background-color:$col_blue; background-color:$col_main_1;
color:$col_white; color:$col_none;
font-weight:bold; font-weight:bold;
} }
#chat #chat_chan .tab_bar span.active, #chat #chat_chan .tab_bar span.active:hover { #chat #chat_chan .tab_bar span.active, #chat #chat_chan .tab_bar span.active:hover {
border-bottom-color: $col_white; border-bottom-color: $col_none;
background-color: $col_white; background-color: $col_none;
color:$col_black; color:$col_black;
} }
#chat #chat_chan .tab_bar span.light_up { #chat #chat_chan .tab_bar span.light_up {
background-color:$col_orange; background-color:$col_hover_1;
} }
#chat #sidebar #news, #chat #sidebar #news p { #chat #sidebar #news, #chat #sidebar #news p {
@@ -1022,10 +1022,10 @@
padding:6px 5px; padding:6px 5px;
} }
#chat #news .new:nth-child(even) { #chat #news .new:nth-child(even) {
background:$col_brighter_blue; background:$col_main_3;
} }
#chat #news .new:nth-child(odd) { #chat #news .new:nth-child(odd) {
background:$col_bright_blue; background:$col_main_2;
} }
#chat #news .new:last-child { #chat #news .new:last-child {
-moz-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px;
@@ -1044,8 +1044,8 @@
/* Options */ /* Options */
#options .options_box { #options .options_box {
background:$col_bright_blue; background:$col_main_2;
border:2px solid $col_blue; border:2px solid $col_main_1;
width:490px; width:490px;
float:left; float:left;
margin:0 10px 10px 0; margin:0 10px 10px 0;
@@ -1057,10 +1057,10 @@
} }
#options .options_box h2 { #options .options_box h2 {
color:$col_blue; color:$col_main_1;
font-size:20px; font-size:20px;
margin:0 0 10px 0; margin:0 0 10px 0;
border-bottom:2px solid $col_blue; border-bottom:2px solid $col_main_1;
} }
#options .options_box .option_line { #options .options_box .option_line {
@@ -1069,7 +1069,7 @@
#options .options_box input[type=text], #options .options_box input[type=password], #options .options_box select { #options .options_box input[type=text], #options .options_box input[type=password], #options .options_box select {
font-size:14px; font-size:14px;
background:$col_white; background:$col_none;
border-width:1px; border-width:1px;
font-size:14px; font-size:14px;
padding:5px; padding:5px;
@@ -1082,8 +1082,8 @@
} }
#options .options_box select { #options .options_box select {
border:1px solid $col_blue; border:1px solid $col_main_1;
color:$col_blue; color:$col_main_1;
} }
#options .options_box .option_line p { #options .options_box .option_line p {
@@ -1096,15 +1096,15 @@
/* Procedure */ /* Procedure */
#procedure #procedure_steps .button { #procedure #procedure_steps .button {
background-color:$col_white; background-color:$col_none;
} }
#procedure #procedure_steps .button:hover { #procedure #procedure_steps .button:hover {
background-color:$col_orange background-color:$col_hover_1
} }
#titles_read p.read_title { #titles_read p.read_title {
border-bottom:1px solid $col_blue; border-bottom:1px solid $col_main_1;
font-weight:bold; font-weight:bold;
} }
@@ -1154,8 +1154,8 @@
#procedure table.step_box input[type=file] { #procedure table.step_box input[type=file] {
margin:0 10px; margin:0 10px;
max-width:250px; max-width:250px;
border:1px solid $col_blue; border:1px solid $col_main_1;
background:$col_white; background:$col_none;
} }
#procedure #bottom_menu { #procedure #bottom_menu {
@@ -1178,14 +1178,14 @@
} }
#procedure .thumbnail_image { #procedure .thumbnail_image {
background:$col_white; background:$col_none;
border:1px solid $col_blue; border:1px solid $col_main_1;
width:100px; width:100px;
height:100px; height:100px;
vertical-align:middle; vertical-align:middle;
} }
#procedure .thumbnail_image:hover { #procedure .thumbnail_image:hover {
border-color:$col_orange; border-color:$col_hover_1;
} }
#procedure .thumbnail_desc { #procedure .thumbnail_desc {
@@ -1244,7 +1244,7 @@
} }
#table .step_box_title a { #table .step_box_title a {
color:$col_blue; color:$col_main_1;
} }
#table #validation { #table #validation {
@@ -1274,8 +1274,8 @@
} }
#table input:disabled { #table input:disabled {
color:$col_bright_blue; color:$col_main_2;
background-color:$col_blue; background-color:$col_main_1;
} }
#table .form_success { #table .form_success {
@@ -1296,7 +1296,7 @@
#err_404 p { #err_404 p {
margin-top:20px; margin-top:20px;
color:$col_blue; color:$col_main_1;
} }
/* Footer */ /* Footer */
@@ -1307,7 +1307,7 @@
} }
#footer p, #footer a { #footer p, #footer a {
color:$col_white; color:$col_none;
margin:0; margin:0;
font-size:9px; font-size:9px;
} }
@@ -1320,7 +1320,7 @@
#logout p { #logout p {
font-size:18px; font-size:18px;
color:$col_blue; color:$col_main_1;
margin-top:25px; margin-top:25px;
} }
@@ -1333,7 +1333,7 @@
#note_frame { #note_frame {
width:calc(100% - 4px); width:calc(100% - 4px);
height:calc(100% - 4px); height:calc(100% - 4px);
border: 2px solid $col_blue; border: 2px solid $col_main_1;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
} }
@@ -1353,7 +1353,7 @@
top:0; top:0;
height:1px; height:1px;
width:100%; width:100%;
border-bottom:1px solid red; border-bottom:1px solid $col_error;
z-index: 1000; z-index: 1000;
} }
.line_v { .line_v {
@@ -1361,6 +1361,6 @@
left:0; left:0;
height:100%; height:100%;
width:1px; width:1px;
border-left:1px solid red; border-left:1px solid $col_error;
z-index: 1000; z-index: 1000;
} }

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -18,7 +18,7 @@
/* Logon */ /* Logon */
#container { #container {
background:$col_blue; background:$col_main_1;
padding:10px 10px 1px; padding:10px 10px 1px;
} }
@@ -32,9 +32,9 @@
left:0; left:0;
padding:10px 10px 10px 35px; padding:10px 10px 10px 35px;
margin:0; margin:0;
border-bottom:3px solid $col_white; border-bottom:3px solid $col_none;
font-weight:bold; font-weight:bold;
color:$col_white; color:$col_none;
font-size:35px; font-size:35px;
line-height:35px; line-height:35px;
text-decoration: none; text-decoration: none;
@@ -49,7 +49,7 @@
margin-top:-64px; /* -(10*2+20*4+20*2+20+2*2+1*2)/2 */ margin-top:-64px; /* -(10*2+20*4+20*2+20+2*2+1*2)/2 */
} }
.box { .box {
background:$col_white; background:$col_none;
overflow:hidden; overflow:hidden;
position:relative; position:relative;
@@ -57,14 +57,14 @@
position:absolute; position:absolute;
height:100%; height:100%;
width:68px; width:68px;
background:$col_bright_blue; background:$col_main_2;
.fa { .fa {
position:absolute; position:absolute;
top:50%; top:50%;
left:50%; left:50%;
text-align:center; text-align:center;
color:$col_blue; color:$col_main_1;
line-height:50px; line-height:50px;
font-size:50px; font-size:50px;
width:50px; width:50px;
@@ -81,7 +81,7 @@
padding:0; padding:0;
text-align:left; text-align:left;
font-size:18px; font-size:18px;
color:$col_blue; color:$col_main_1;
} }
td.desc { td.desc {
@@ -102,8 +102,8 @@
color:red; color:red;
} }
input { input {
border:1px solid $col_blue; border:1px solid $col_main_1;
color:$col_blue; color:$col_main_1;
font-size:18px; font-size:18px;
line-height:20px; line-height:20px;
padding:2px 5px; padding:2px 5px;
@@ -125,10 +125,10 @@
.logon_msg { .logon_msg {
margin-top:10px; margin-top:10px;
padding:5px; padding:5px;
color:$col_white; color:$col_none;
text-align:center; text-align:center;
font-size: 0.75em; font-size: 0.75em;
border:1px solid $col_white; border:1px solid $col_none;
span { span {
display:block; display:block;