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

View file

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

View file

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

View file

@ -6,7 +6,7 @@
display: none; display: none;
border: none; border: none;
font-family: @font-family; font-family: @font-family;
color: #555; color: @col;
background-color: rgba(0,0,0,0); background-color: rgba(0,0,0,0);
width: 100px; 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: Ubuntu, sans-serif;
@font-family-mono: "Ubuntu Mono", monospace; @font-family-mono: "Ubuntu Mono", monospace;
@ -9,10 +38,10 @@ html { overflow-y: auto; }
body { body {
font-family: @font-family; font-family: @font-family;
font-weight: 300; // font-weight: 400;
font-size: 13px; font-size: 13px;
color: #555; color: @col;
background-color: #fff; background-color: @col-back;
margin: 30px; margin: 30px;
} }

View file

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

View file

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

View file

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

View file

@ -8,9 +8,6 @@
z-index: 100; z-index: 100;
padding: 2px 6px 2px 6px; padding: 2px 6px 2px 6px;
color: #fff; 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); background-color: rgba(0, 0, 0, 0.2);
.border-radius(4px); .border-radius(4px);
text-align: center; text-align: center;

View file

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

View file

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

View file

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

View file

@ -5,16 +5,19 @@
left: 0; left: 0;
top: 0; top: 0;
z-index: 2; z-index: 2;
border: 1px dashed rgba(240,100,0,0.5); border: 1px dashed @col-border-strong;
background-color: rgba(240,100,0,0.2); background-color: rgba(0,0,0,0.01);
} }
@item-border-col-sep: #f2f2f2; @item-border-col-sep: @col-border;
// @item-border-col-sep: #e8e8e8;
@item-background-col-hover: #f6f6f6; @item-background-col-hover: rgba(0,0,0,0.02);
@item-border-col-hover: #f0f0f0; @item-border-col-hover: @col-border;
@item-background-col-sel: rgba(240,100,0,0.2);
@item-border-col-sel: rgba(240,100,0,0.2); @item-background-col-sel: rgba(0,0,0,0.04);
@item-border-col-sel: @col-border-strong;
#view { #view {
display: none; display: none;
@ -73,7 +76,8 @@
overflow: hidden; overflow: hidden;
&:hover, &.hover { &:hover, &.hover {
color: #e80; // color: #e80;
color: @col-hover;
background-color: @item-background-col-hover; background-color: @item-background-col-hover;
border-color: @item-border-col-hover; border-color: @item-border-col-hover;
} }
@ -82,7 +86,8 @@
&.selected:not(.selecting), &.selecting:not(.selected) { &.selected:not(.selecting), &.selecting:not(.selected) {
a, a:active, a:visited { a, a:active, a:visited {
color: #000; // color: #000;
// color: @col-hover;
background-color: @item-background-col-sel; background-color: @item-background-col-sel;
border-color: @item-border-col-sel; border-color: @item-border-col-sel;
@ -100,7 +105,8 @@
color: #aaa; color: #aaa;
&:hover, &.hover { &: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 - packageName: basename of the download package, null for current foldername
*/ */
"download": { "download": {
"enabled": false, "enabled": true,
"execution": "shell", "execution": "shell",
"format": "zip", "format": "zip",
"packageName": null "packageName": null
@ -178,7 +178,7 @@ Options
2: mode, servername and -version 2: mode, servername and -version
*/ */
"mode": { "mode": {
"enabled": false, "enabled": true,
"display": 2 "display": 2
}, },
@ -248,7 +248,7 @@ Options
- size: width and height in pixel - size: width and height in pixel
*/ */
"qrcode": { "qrcode": {
"enabled": false, "enabled": true,
"size": 150 "size": 150
}, },

View file

@ -13,7 +13,7 @@ html.no-js( lang="en" )
meta( name="viewport", content="width=device-width" ) meta( name="viewport", content="width=device-width" )
link( rel="shortcut icon", href="client/images/app-16x16.ico" ) 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="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" ) link( rel="stylesheet", href="client/css/styles.css" )
script( src="client/js/scripts.js", data-mode="info" ) 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" ) meta( name="viewport", content="width=device-width" )
link( rel="shortcut icon", href!="#{href}client/images/app-16x16.ico" ) 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="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" ) link( rel="stylesheet", href!="#{href}client/css/styles.css" )
script( src!="#{href}client/js/scripts.js" ) script( src!="#{href}client/js/scripts.js" )