Hi,
i played a little bit and here’s the result. from my point of view it’s a more technical view, for example fonts without “serifen”.
take a look at the screens, here’s the code:
common.css:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
border:0 none;
font-size:100%;
margin:0;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;
padding:0;
vertical-align:baseline;
}
form {
margin:0;
}
body {
background-color:white;
color:black;
line-height:1.66;
}
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
blockquote, q {
quotes:none;
}
:focus {
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;
}
ins {
text-decoration:none;
}
del {
text-decoration:line-through;
}
body {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:1em;
}
a {
color:#0F1B2E;
cursor:pointer;
text-decoration:underline;
}
#loadingPiwik {
color:#193B6C;
font-size:1.1em;
font-weight:bold;
padding:0.5em;
}
#loadingError {
color:#F88D22;
display:none;
font-size:1.1em;
font-weight:bold;
margin-left:30%;
padding:0.5em;
}
#otherPeriods {
display:none;
}
#periodString #date, #periodString #periods, #periodString #date a, #periodString #periods a {
color:#520202;
font-size:15pt;
text-decoration:none;
}
#periodString #periods a:hover {
text-decoration:underline;
}
#periodString {
display:block;
margin-left:350px;
padding-top:2em;
}
#header_message {
border:1px solid #FF7F00;
float:right;
font-size:0.9em;
font-weight:bold;
line-height:1.33;
margin-top:10px;
padding:5px;
position:relative;
right:10px;
text-align:left;
width:300px;
}
#header_message, #header_message a {
color:#FF7F00;
}
#topRightBar {
float:right;
font-size:84%;
padding:0 0 4px;
}
#topLeftBar {
float:left;
height:22px;
padding-left:10px;
width:550px;
}
#topLeftBar, #topRightBar {
background-color:#FFFFFF;
font-family:arial,sans-serif !important;
font-size:13px;
height:20px;
padding:4px 10px 0 !important;
}
#logo {
display:inline;
float:left;
font-size:45pt;
padding-left:15px;
}
#javascriptDisable, #javascriptDisable a {
clear:both;
color:#F88D22;
font-weight:bold;
padding-left:1em;
}
.topBarElem {
color:#000000;
height:22px;
margin-bottom:0;
margin-right:0.73em;
vertical-align:top;
}
#tooltip h3 {
color:#162540;
font-size:1em;
margin:0;
padding:0;
}
#tooltip {
background-color:#F5F7FF;
border:1px solid #111111;
opacity:0.95;
padding:7px;
position:absolute;
z-index:3000;
}
.tableForm {
}
.tableForm td {
border-color:#FFFFFF #C6CDD8 #C6CDD8;
border-style:solid;
border-width:10px 1px 1px;
color:#203276;
padding:0.5em 0.5em 0.5em 0.8em;
}
.tableForm input {
border-color:#CCCCCC #999999 #999999 #CCCCCC;
border-width:1px;
color:#3A2B16;
font-size:1.1em;
padding:0.15em;
}
.tableForm .submit {
text-align:center;
}
.submit input {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(./images/background-submit.png) repeat scroll 0 50%;
border-color:#CCCCCC #999999 #999999 #CCCCCC;
border-style:double;
border-width:3px;
color:#333333;
font-size:1.4em;
margin-top:15px;
padding:0.15em;
}
#ajaxError {
border:3px solid red;
color:red;
font-weight:bold;
margin:10px;
padding:10px;
text-align:center;
width:550px;
}
dashboard.css (this CSS is loading twice!!):
.col {
float: left;
width: 33%;
}
.sortable {
background: white;
}
.hover {
border: 2px dashed #E3E3E3;
}
.widget {
border: 1px solid #D2D9EB;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 5px;
margin-left: 5px;
overflow: hidden;
}
.widgetHover {
border: 1px solid #CBD3E7;
}
.widgetTop {
background: #F0F0FA;
border-bottom: 1px solid #D2D9EB;
width: 100%;
cursor: move;
font-size: 10pt;
font-weight: bold;
padding-bottom: 4px;
}
.widgetTopHover {
background: #E6E6F5;
}
.widgetName {
font-size: 12.5pt;
margin-left: 5px;
}
for a better aligning for the search field etc.:
first old code:
now new one: