More style changes.

This commit is contained in:
Lars Jung 2013-07-06 20:37:08 +02:00
parent dc85bc4d5c
commit 49276c157c
16 changed files with 100 additions and 89 deletions

View File

@ -8,9 +8,8 @@
bottom: 0;
padding: 6px 0 8px 0;
// .vert-gradient(rgb(241,241,241), rgb(228,228,228));
// border-top: 1px solid rgb(210,210,210);
background-color: rgb(245,245,245);
border-top: 1px solid rgba(0,0,0,0.05);
background-color: @col-widget-back;
border-top: @border-widget;
// .box-shadow(0 -2px 4px 0 rgba(0, 0, 0, 0.15);
color: #999;
@ -23,7 +22,7 @@
opacity: 0.7;
&:hover {
color: #e80;
color: @col-hover;
opacity: 1;
}
}
@ -43,18 +42,18 @@
padding: 0 8px;
}
.noJsMsg {
color: #c33;
color: @col-error;
margin-left: 16px;
}
.oldBrowser {
display: none;
color: #c33;
color: @col-error;
margin-left: 16px;
a, a:active, a:visited {
color: #c33;
color: @col-error;
text-decoration: underline;
&:hover {
color: #e80;
color: @col-hover;
}
}
}

View File

@ -9,12 +9,12 @@
color: #333;
a, a:active, a:visited {
color: #2080FF;
color: @col-link;
text-decoration: none;
cursor: pointer;
&:hover {
color: #555;
color: @col-link-hover;
}
}
}

View File

@ -5,8 +5,8 @@
position: absolute;
right: 0;
top: 0;
background-color: rgb(241,241,241);
border: 1px solid rgb(210,210,210);
background-color: @col-widget-back;
border: @border-widget;
color: #999;
z-index: 10;
font-size: 0.9em;
@ -20,12 +20,12 @@
li {
padding: 8px 12px 10px 12px;
white-space: nowrap;
border-top: 1px solid rgb(231,231,231);
border-top: @border-widget-sep;
.transition(all 0.2s ease-in-out);
&:hover {
color: #e80;
background-color: rgba(255,255,255,0.8);
color: @col-hover;
background-color: @col-widget-back-hover;
}
}
}

View File

@ -6,7 +6,7 @@
display: none;
border: none;
font-family: @font-family;
color: #555;
color: @col;
background-color: rgba(0,0,0,0);
width: 100px;
}

View File

@ -1,4 +1,33 @@
@col: rgb(85,85,85);
@col-back: rgb(255,255,255);
@col-hover: rgb(29,119,194);
@col-border: rgba(0,0,0,0.05);
@col-border-strong: rgba(0,0,0,0.1);
@col-error: rgb(204,51,51);
@col-link: rgb(29,119,194);
@col-link-hover: rgb(29,119,194);
@col-widget-back: rgb(245,245,245);
@col-widget-back-highlight: rgba(255,255,255,0.8);
@col-widget-back-hover: rgba(255,255,255,0.8);
@col-widget-back-sel: rgba(255,255,255,0.8);
@col-widget-sep: @col-border;
@col-sb-back: rgb(210,210,210);
@col-sb-thumb: rgb(180,180,180);
@col-sb-thumb-active: rgb(150,150,150);
@border-widget: 1px solid @col-border;
@border-widget-sep: 1px solid @col-widget-sep;
@font-family: Ubuntu, sans-serif;
@font-family-mono: "Ubuntu Mono", monospace;
@ -9,10 +38,10 @@ html { overflow-y: auto; }
body {
font-family: @font-family;
font-weight: 300;
// font-weight: 400;
font-size: 13px;
color: #555;
background-color: #fff;
color: @col;
background-color: @col-back;
margin: 30px;
}

View File

@ -3,7 +3,7 @@ body#h5ai-info {
font-family: @font-family;
margin: 2em auto 4em auto;
font-size: 20px;
color: #555;
color: @col;
max-width: 600px;
text-align: center;

View File

@ -11,22 +11,20 @@
right: 0;
top: 0;
max-height: 200px;
// background-color: rgb(241,241,241);
// border: 1px solid rgb(210,210,210);
background-color: rgb(245,245,245);
border: 1px solid rgba(0,0,0,0.05);
background-color: @col-widget-back;
border: @border-widget;
.sp-scrollbar {
margin: 0;
width: 6px;
background-color: rgb(210,210,210);
background-color: @col-sb-back;
cursor: pointer;
.sp-thumb {
background-color: rgb(180,180,180);
background-color: @col-sb-thumb;
}
&.active .sp-thumb {
background-color: rgb(150,150,150);
background-color: @col-sb-thumb-active;
}
}
@ -40,17 +38,16 @@
li {
padding: 8px 24px 10px 24px;
white-space: nowrap;
// border-top: 1px solid rgb(231,231,231);
border-top: 1px solid rgba(0,0,0,0.05);
border-top: @border-widget-sep;
.transition(all 0.2s ease-in-out);
&.current {
color: #333;
background-color: rgba(255,255,255,0.8);
background-color: @col-widget-back-sel;
}
&:hover {
color: #e80;
background-color: rgba(255,255,255,0.8);
color: @col-hover;
background-color: @col-widget-back-hover;
}
}
}

View File

@ -36,9 +36,7 @@
}
}
td {
border: 1px solid #ddd;
border-left: none;
border-right: none;
border-bottom: 1px solid @col-border;
overflow: hidden;
white-space: nowrap;
font-size: 16px;
@ -50,7 +48,7 @@
cursor: pointer;
&:hover {
color: #e80;
color: @col-hover;
}
}
}

View File

@ -8,9 +8,6 @@
z-index: 100;
padding: 2px 6px 2px 6px;
color: #fff;
// background-color: rgba(240, 100, 0, 0.5);
// border: 2px solid rgba(255, 255, 255, 0.5);
// border: 2px solid rgba(240, 100, 0, 0.9);
background-color: rgba(0, 0, 0, 0.2);
.border-radius(4px);
text-align: center;

View File

@ -6,11 +6,8 @@
bottom: 50px;
z-index: 1;
// background-color: #fff;
// border: 2px solid #ddd;
// background-color: rgb(245,245,245);
background-color: rgb(255,255,255);
border: 1px solid rgba(0,0,0,0.05);
background-color: @col-widget-back;
border: @border-widget;
padding: 8px;
canvas {

View File

@ -7,34 +7,30 @@
left: 0;
top: 0;
// .vert-gradient(rgb(241,241,241), rgb(228,228,228));
// border-bottom: 1px solid rgb(210,210,210);
background-color: rgb(245,245,245);
border-bottom: 1px solid rgba(0,0,0,0.05);
background-color: @col-widget-back;
border-bottom: @border-widget;
// .box-shadow(0 2px 4px 0 rgba(0, 0, 0, 0.15);
}
.topbar-highlight {
// background-color: rgba(255,255,255,0.5);
background-color: rgba(255,255,255,0.8);
background-color: @col-widget-back-highlight;
opacity: 1.0;
}
.topbar-hover {
.topbar-highlight;
color: #e80;
color: @col-hover;
}
@topbar-sep-border: 1px solid rgba(0,0,0,0.05);
.topbar-left {
float: left;
border-right: @topbar-sep-border;
border-right: @border-widget-sep;
}
.topbar-right {
float: right;
border-left: @topbar-sep-border;
border-left: @border-widget-sep;
}
@ -45,7 +41,7 @@
padding: 0;
a, a:active, a:visited, span.element {
color: #555;
color: @col;
cursor: pointer;
text-decoration: none;
opacity: 0.7;
@ -82,8 +78,6 @@
color: #999;
}
img.hint {
// width: 14px;
// height: 14px;
opacity: 0.8;
}
}

View File

@ -8,25 +8,22 @@
z-index: 3;
overflow: auto;
padding: 8px;
// background-color: rgb(241,241,241);
// border-right: 2px solid rgb(221,221,221);
// border-right: 1px solid rgb(216,216,216);
background-color: rgb(245,245,245);
border-right: 1px solid rgba(0,0,0,0.05);
background-color: @col-widget-back;
border-right: @border-widget;
.sp-scrollbar {
margin: 8px 8px 8px 0;
width: 6px;
background-color: rgb(210,210,210);
background-color: @col-sb-back;
.border-radius(3px);
cursor: pointer;
.sp-thumb {
background-color: rgb(180,180,180);
background-color: @col-sb-thumb;
.border-radius(3px);
}
&.active .sp-thumb {
background-color: rgb(150,150,150);
background-color: @col-sb-thumb-active;
}
}
@ -71,9 +68,8 @@
opacity: 0.7;
&:hover, &.hover {
color: #e80;
// background-color: rgba(255,255,255,0.5);
background-color: rgba(255,255,255,0.8);
color: @col-hover;
background-color: @col-widget-back-hover;
// border-color: rgba(0,0,0,0.05);
opacity: 1;
}
@ -105,10 +101,8 @@
}
.current {
> a, > a:active, > a:visited {
// background-color: rgba(255,255,255,0.5);
// border-color: rgb(221,221,221);
background-color: rgba(255,255,255,0.8);
border-color: rgba(0,0,0,0.05);
background-color: @col-widget-back-sel;
border-color: @col-widget-sep;
opacity: 1;
}
}
@ -116,7 +110,7 @@
> a, > a:active, > a:visited {
color: #999;
&:hover, &.hover {
color: #e80;
color: @col-hover;
}
}
.hint {

View File

@ -5,16 +5,19 @@
left: 0;
top: 0;
z-index: 2;
border: 1px dashed rgba(240,100,0,0.5);
background-color: rgba(240,100,0,0.2);
border: 1px dashed @col-border-strong;
background-color: rgba(0,0,0,0.01);
}
@item-border-col-sep: #f2f2f2;
// @item-border-col-sep: #e8e8e8;
@item-background-col-hover: #f6f6f6;
@item-border-col-hover: #f0f0f0;
@item-background-col-sel: rgba(240,100,0,0.2);
@item-border-col-sel: rgba(240,100,0,0.2);
@item-border-col-sep: @col-border;
@item-background-col-hover: rgba(0,0,0,0.02);
@item-border-col-hover: @col-border;
@item-background-col-sel: rgba(0,0,0,0.04);
@item-border-col-sel: @col-border-strong;
#view {
display: none;
@ -73,7 +76,8 @@
overflow: hidden;
&:hover, &.hover {
color: #e80;
// color: #e80;
color: @col-hover;
background-color: @item-background-col-hover;
border-color: @item-border-col-hover;
}
@ -82,7 +86,8 @@
&.selected:not(.selecting), &.selecting:not(.selected) {
a, a:active, a:visited {
color: #000;
// color: #000;
// color: @col-hover;
background-color: @item-background-col-sel;
border-color: @item-border-col-sel;
@ -100,7 +105,8 @@
color: #aaa;
&:hover, &.hover {
color: #e80;
// color: #e80;
color: @col-hover;
}
}

View File

@ -104,7 +104,7 @@ Options
- packageName: basename of the download package, null for current foldername
*/
"download": {
"enabled": false,
"enabled": true,
"execution": "shell",
"format": "zip",
"packageName": null
@ -178,7 +178,7 @@ Options
2: mode, servername and -version
*/
"mode": {
"enabled": false,
"enabled": true,
"display": 2
},
@ -248,7 +248,7 @@ Options
- size: width and height in pixel
*/
"qrcode": {
"enabled": false,
"enabled": true,
"size": 150
},

View File

@ -13,7 +13,7 @@ html.no-js( lang="en" )
meta( name="viewport", content="width=device-width" )
link( rel="shortcut icon", href="client/images/app-16x16.ico" )
link( rel="apple-touch-icon", type="image/png", href="client/images/app-48x48.png" )
link( rel="stylesheet", href="//fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic,700italic|Ubuntu:300,400,700,300italic,400italic,700italic" )
link( rel="stylesheet", href="//fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic,700italic|Ubuntu:400,700,400italic,700italic" )
link( rel="stylesheet", href="client/css/styles.css" )
script( src="client/js/scripts.js", data-mode="info" )

View File

@ -17,7 +17,7 @@ html.no-js( lang="en" )
meta( name="viewport", content="width=device-width" )
link( rel="shortcut icon", href!="#{href}client/images/app-16x16.ico" )
link( rel="apple-touch-icon", type="image/png", href!="#{href}client/images/app-48x48.png" )
link( rel="stylesheet", href="//fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic,700italic|Ubuntu:300,400,700,300italic,400italic,700italic" )
link( rel="stylesheet", href="//fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic,700italic|Ubuntu:400,700,400italic,700italic" )
link( rel="stylesheet", href!="#{href}client/css/styles.css" )
script( src!="#{href}client/js/scripts.js" )