Style changes.

This commit is contained in:
Lars Jung 2014-11-27 01:30:54 +01:00
parent 041c16490b
commit b390b9fc42
9 changed files with 53 additions and 22 deletions

View file

@ -1,7 +1,7 @@
@col: rgb(85,85,85); @col: rgb(85,85,85);
// @col-back: rgb(255,255,255); // @col-back: rgb(255,255,255);
@col-back: rgb(245,245,245); @col-back: #eeeeee;
@col-hover: rgb(29,119,194); @col-hover: rgb(29,119,194);
@col-border: rgba(0,0,0,0.05); @col-border: rgba(0,0,0,0.05);
@col-border-strong: rgba(0,0,0,0.15); @col-border-strong: rgba(0,0,0,0.15);
@ -28,8 +28,8 @@
@border-widget: 1px solid @col-border; @border-widget: 1px solid @col-border;
@border-widget-sep: 1px solid @col-widget-sep; @border-widget-sep: 1px solid @col-widget-sep;
@font-family: Ubuntu, Helvetica, Arial, sans-serif; @font-family: Roboto, Ubuntu, Helvetica, Arial, sans-serif;
@font-weight: 300; @font-weight: 400;
@font-family-mono: "Ubuntu Mono", monospace; @font-family-mono: "Ubuntu Mono", monospace;

View file

@ -8,11 +8,12 @@
top: 0; top: 0;
background-color: @col-widget-back; background-color: @col-widget-back;
border-bottom: @border-widget; border-bottom: @border-widget;
font-weight: lighter;
} }
.topbar-highlight { .topbar-highlight {
background-color: @col-widget-back-highlight; // background-color: @col-widget-back-highlight;
opacity: 1.0; opacity: 1.0;
} }
@ -42,7 +43,7 @@
color: @col; color: @col;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
opacity: 0.7; // opacity: 0.7;
.transition(all 0.2s ease-in-out); .transition(all 0.2s ease-in-out);
display: block; display: block;
@ -55,6 +56,7 @@
} }
} }
.current { .current {
font-weight: bold;
a, span.element { a, span.element {
.topbar-highlight; .topbar-highlight;
} }

View file

@ -8,8 +8,11 @@
z-index: 3; z-index: 3;
overflow: auto; overflow: auto;
padding: 8px; padding: 8px;
background-color: @col-widget-back; // background-color: @col-widget-back;
border-right: @border-widget; // border-right: @border-widget;
background: #eee;
border-right: 2px solid @col-border;
font-weight: lighter;
.sp-scrollbar { .sp-scrollbar {
width: 6px; width: 6px;
@ -31,7 +34,7 @@
width: 16px; width: 16px;
height: 22px; height: 22px;
float: left; float: left;
opacity: 0.7; // opacity: 0.7;
cursor: pointer; cursor: pointer;
img { img {
@ -62,12 +65,12 @@
border: 1px solid rgba(0,0,0,0); border: 1px solid rgba(0,0,0,0);
border-radius: 3px; border-radius: 3px;
text-decoration: none; text-decoration: none;
opacity: 0.7; // opacity: 0.7;
&:hover, &.hover { &:hover, &.hover {
color: @col-hover; color: @col-hover;
background-color: @col-widget-back-hover; // background-color: @col-widget-back-hover;
opacity: 1; // opacity: 1;
} }
} }
.icon { .icon {
@ -97,9 +100,10 @@
} }
.current { .current {
> a, > a:active, > a:visited { > a, > a:active, > a:visited {
background-color: @col-widget-back-sel; // background-color: @col-widget-back-sel;
border-color: @col-widget-sep; // border-color: @col-widget-sep;
opacity: 1; // opacity: 1;
font-weight: bold;
} }
} }
.error { .error {

View file

@ -33,6 +33,7 @@
#view.view-details { #view.view-details {
li { li {
border-bottom: 1px solid rgba(0,0,0,0.065);
&.header { &.header {
display: list-item; display: list-item;
@ -42,7 +43,7 @@
background: #fff; background: #fff;
a, a:active, a:visited { a, a:active, a:visited {
border-bottom: 1px solid @item-border-col-sep; // border-bottom: 1px solid @item-border-col-sep;
&:hover, &.hover { &:hover, &.hover {
border-color: @item-border-col-hover; border-color: @item-border-col-hover;

View file

@ -37,8 +37,10 @@
&.item { &.item {
float: left; float: left;
margin: 2px; // margin: 2px;
margin: 4px;
background: #fff; background: #fff;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
a, a:active, a:visited { a, a:active, a:visited {
border: 1px solid rgba(0,0,0,0); border: 1px solid rgba(0,0,0,0);

View file

@ -28,6 +28,9 @@
} }
@minsize: 64px;
#view.view-icons { #view.view-icons {
li { li {
@ -40,6 +43,8 @@
a, a:active, a:visited { a, a:active, a:visited {
padding: 8px; padding: 8px;
border: 1px solid rgba(0,0,0,0); border: 1px solid rgba(0,0,0,0);
min-width: @minsize * 4/3;
min-height: @minsize + 28px;
&:hover, &.hover { &:hover, &.hover {
border-color: @item-border-col-hover; border-color: @item-border-col-hover;
@ -50,6 +55,16 @@
.icon.rational { .icon.rational {
display: block; display: block;
margin-bottom: 6px; margin-bottom: 6px;
min-height: @minsize;
img {
min-height: @minsize;
}
.thumb {
min-width: @minsize * 4/3;
}
} }
.label { .label {

View file

@ -16,7 +16,7 @@
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
z-index: 10; z-index: 2;
border: 1px dashed @col-border-strong; border: 1px dashed @col-border-strong;
background-color: rgba(0,0,0,0.01); background-color: rgba(0,0,0,0.01);
} }
@ -45,9 +45,11 @@
&.header { &.header {
display: none; display: none;
font-size: 13px; font-size: 13px;
background: #fafafa;
a, a:active, a:visited { a, a:active, a:visited {
padding: 6px 6px 18px 6px; // padding: 6px 6px 18px 6px;
padding: 12px 8px;
opacity: 0.4; opacity: 0.4;
.transition(all 0.2s ease-in-out); .transition(all 0.2s ease-in-out);
@ -130,6 +132,7 @@
img { img {
vertical-align: top; vertical-align: top;
max-width: 64px; max-width: 64px;
// max-width: 32px;
} }
.thumb { .thumb {
@ -140,7 +143,8 @@
border-radius: 1px; border-radius: 1px;
background: #fff; background: #fff;
overflow: hidden; overflow: hidden;
box-shadow: 0 1px rgba(0,0,0,0.1), 1px 0 rgba(0,0,0,0.02), -1px 0 rgba(0,0,0,0.02); // box-shadow: 0 1px rgba(0,0,0,0.1), 1px 0 rgba(0,0,0,0.02), -1px 0 rgba(0,0,0,0.02);
box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
} }
} }

View file

@ -2,7 +2,7 @@
@import "lib/h5bp-normalize"; @import "lib/h5bp-normalize";
@import "lib/h5bp-main-header"; @import "lib/h5bp-main-header";
@import "inc/fonts"; // @import "inc/fonts";
@import "inc/general"; @import "inc/general";
@import "inc/topbar"; @import "inc/topbar";
@import "inc/bottombar"; @import "inc/bottombar";
@ -31,3 +31,6 @@
@import "inc/h5ai-info"; @import "inc/h5ai-info";
@import "lib/h5bp-main-footer"; @import "lib/h5bp-main-footer";
@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,700);
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,700);

View file

@ -17,7 +17,7 @@ Options
"bottom": 50, "bottom": 50,
"left": "auto", "left": "auto",
"right": "auto", "right": "auto",
"maxWidth": 1024 "maxWidth": 1400
}, },
/* /*
@ -52,7 +52,7 @@ Options
"hideParentFolder": false, "hideParentFolder": false,
"modes": ["details", "grid", "icons"], "modes": ["details", "grid", "icons"],
"setParentFolderLabels": true, "setParentFolderLabels": true,
"sizes": [24, 32, 48, 64, 96, 128, 192, 256, 384], "sizes": [16, 24, 32, 48, 64, 96, 128, 192, 256, 384],
"smartBrowsing": true, "smartBrowsing": true,
"theme": "", "theme": "",
"unmanaged": ["index.html", "index.htm", "index.php"], "unmanaged": ["index.html", "index.htm", "index.php"],