flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-30 19:00:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

playing with style...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2015-02-13 03:09:40 +03:00
parent 69b0cb25ee
commit 5075cfe2e9
1 changed files with 37 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
ui (gen4)/experiments/browse-dialog.html
View File

@ -8,28 +8,45 @@
top: 100px; top: 100px;
left: 100px; left: 100px;
border: 5px solid gray;
} }
.browse { .browse {
display: inline-block; display: inline-block;
min-width: 300px; min-width: 300px;
width: initial; width: initial;
background: gray;
color: rgba(255,255,255,0.8);
padding: 5px;
font-family: sans-serif;
} }
.browse .v-block { .browse .v-block {
width: 100%; width: 100%;
height: auto; height: auto;
border: 1px solid gray;
box-sizing: border-box; box-sizing: border-box;
border-top: 1px solid rgba(255,255,255, 0.3);
}
.browse .v-block:first-of-type {
border-top: none;
} }
.browse .v-block:empty { .browse .v-block:empty {
display: none; display: none;
} }
.browse .title {
font-weight: bold;
color: rgba(255,255,255,0.9);
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
.browse .path { .browse .path {
padding: 5px;
padding-left: 10px;
padding-right: 10px;
white-space: nowrap; white-space: nowrap;
} }
.browse .path:empty { .browse .path:empty {
@ -43,17 +60,29 @@
} }
.browse .path .dir:after { .browse .path .dir:after {
content: "/"; content: "/";
}
.browse .list div {
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
.browse .list div.selected,
.browse .path .dir:hover,
.browse .list div:hover {
background: rgba(0,0,0, 0.05);
color: white;
text-shadow: rgba(0,0,0,0.5) 0.05em 0.005em 0.4em,
rgba(0,0,0,0.5) 0.05em 0.05em;
} }
.browse .list div.selected { .browse .list div.selected {
background: rgba(0,0,0, 0.05); background: rgba(0,0,0, 0.1);
text-shadow: rgba(0,0,0,0.3) 0.1em 0.1em 0.4em,
rgba(0,0,0,0.3) 0.1em 0.1em;
box-shadow: rgba(0,0,0,0.2) 0.1em 0.1em 0.2em;
} }
.browse .path .dir:hover,
.browse .list div:hover {
background: rgba(0,0,0, 0.1);
}
</style> </style>