franzz/databap
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

harmonize colors palette (v2)

Browse Source
This commit is contained in:
Franzz
2014-12-01 23:37:25 +01:00
parent cfc7eb91b2
commit 4d1276adf0
10 changed files with 259 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

304
style/databap.scss
View File

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