Reorganize file structure.

This commit is contained in:
Lars Jung 2015-05-20 01:53:56 +02:00
parent 74745a8603
commit c8eff2d313
206 changed files with 70 additions and 69 deletions

View file

@ -0,0 +1,5 @@
#content {
overflow: auto;
flex: 1 1 auto;
order: 50;
}

View file

@ -0,0 +1,117 @@
#fallback {
display: none;
max-width: 960px;
margin: 16px auto;
padding: 32px 16px;
table {
.card;
display: block;
width: 100%;
border-collapse: collapse;
background: @col-back-paper;
}
th, td {
padding: 6px;
text-align: left;
border: none;
border-bottom: 1px solid #eee;
}
th {
color: #aaa;
font-weight: lighter;
line-height: 36px;
background: @col-back-panel;
}
td {
overflow: hidden;
white-space: nowrap;
}
a, a:active, a:visited {
display: block;
color: inherit;
text-decoration: none;
cursor: pointer;
&:hover {
color: @col-text-hover;
}
}
.fb-i {
width: 20px;
padding-left: 12px;
img {
width: 20px;
height: 20px;
position: relative;
top: -1px;
}
}
.fb-n {
width: 682px;
max-width: 682px;
}
.fb-d {
text-align: right;
width: 160px;
min-width: 160px;
}
.fb-s {
text-align: right;
width: 70px;
min-width: 70px;
padding-right: 12px;
}
}
#fallback-hints {
display: none;
overflow: hidden;
text-align: right;
background: @col-back-panel;
box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
a, a:active, a:visited {
.eased-transition;
display: inline-block;
line-height: 48px;
color: @col-text-secondary-black;
text-decoration: none;
outline: 0;
&:hover {
color: @col-text-hover;
}
}
.backlink {
margin: 0 16px;
}
.noJsMsg, .noBrowserMsg {
display: none;
margin: 0 16px;
color: @col-error;
}
}
html.no-js, html.no-browser {
#root {
position: static;
overflow: auto;
}
#fallback, #fallback-hints {
display: block;
}
}
html.no-js .noJsMsg {
display: inline !important;
}
html.no-browser .noBrowserMsg {
display: inline !important;
}

View file

@ -0,0 +1,7 @@
#mainrow {
.flex-row;
flex: 1 1 auto;
order: 50;
height: 0; // non-webkit fix;
}

View file

@ -0,0 +1,13 @@
#notification {
position: fixed;
left: 50%;
width: 200px;
margin-left: -100px;
z-index: 100;
padding: 3px 6px 6px 6px;
color: @col-text-primary-white;
background: rgba(0,0,0,0.2);
border-radius: 0 0 4px 4px;
text-align: center;
overflow: hidden;
}

View file

@ -0,0 +1,24 @@
#root {
.flex-column;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
background: @col-back;
}
#root, input, select {
font-family: @font-family;
font-size: @font-size;
font-weight: @font-weight;
color: @col-text;
}
pre, code {
font-family: @font-family-mono;
font-size: @font-size;
font-weight: @font-weight;
color: @col-text;
}

View file

@ -0,0 +1,116 @@
#sidebar {
display: none;
overflow-x: hidden;
overflow-y: auto;
flex: 0 0 auto;
order: 0;
background: @col-back-panel;
border-right: 1px solid rgba(0,0,0,0.08);
padding: 16px;
.block {
display: block;
margin: 0 0 24px 0;
width: 168px;
h1 {
font-size: 1em;
margin: 2px 0 6px 0;
}
}
.button {
.rounded;
.eased-transition;
display: inline-block;
margin: 4px;
color: @col-text;
cursor: pointer;
&:hover {
background: @col-back-hover;
}
&.active {
background: rgba(0,0,0,0.03);
box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4);
}
img {
width: 24px;
height: 24px;
padding: 12px;
}
}
.select {
.rounded;
background: transparent;
overflow: hidden;
outline: 0;
width: 160px;
margin: 4px;
line-height: 48px;
}
input, select {
.clear-appearance;
background: transparent;
width: 100%;
border: 0 solid #000;
cursor: pointer;
outline: 0;
&:hover {
background: @col-back-hover;
}
}
select {
width: 187px;
padding: 0 8px;
height: 48px;
line-height: 48px;
}
input[type='range'] {
.rounded;
width: 144px;
margin: 4px;
padding: 8px;
vertical-align: middle;
height: 32px;
line-height: 32px;
}
.range-track {
.clear-appearance;
border-width: 0;
border-radius: 20px;
background: @col-range-back;
height: 6px;
}
.range-thumb {
.clear-appearance;
border-width: 0;
border-radius: 20px;
background: @col-range-thumb;
width: 16px;
height: 16px;
}
input[type='range']::-webkit-slider-runnable-track { .range-track; }
input[type='range']::-moz-range-track { .range-track; }
input[type='range']::-ms-track { .range-track; }
input[type='range']::-ms-fill-lower { .range-track; }
input[type='range']::-ms-fill-upper { .range-track; }
input[type='range']::-webkit-slider-thumb { .range-thumb; margin-top: -5px; }
input[type='range']::-moz-range-thumb { .range-thumb; }
input[type='range']::-ms-thumb { .range-thumb; }
#view-size {
display: block;
}
}

View file

@ -0,0 +1,71 @@
#topbar {
.flex-row;
overflow: hidden;
flex: 0 0 auto;
order: 1;
background: @col-back-panel;
box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
z-index: 1;
}
#toolbar {
overflow: hidden;
flex: 0 0 auto;
order: 1;
height: 48px;
.tool {
.eased-transition;
display: inline-block;
cursor: pointer;
img {
display: inline-block;
width: 24px;
height: 24px;
padding: 12px;
}
&:hover {
background: @col-back-hover;
}
}
}
#flowbar {
overflow: hidden;
flex: 1 1 auto;
order: 2;
height: 48px;
}
#backlink {
.eased-transition;
display: block;
overflow: hidden;
flex: 0 0 auto;
order: 99;
text-align: center;
padding: 6px 12px;
overflow: hidden;
height: 36px;
&, &:active, &:visited {
color: @col-text-disabled-black;
cursor: pointer;
text-decoration: none;
}
&:hover {
color: @col-text-hover;
background: @col-back-hover;
}
&:focus {
outline: 0;
}
div {
line-height: 18px;
white-space: nowrap;
}
}

View file

@ -0,0 +1,117 @@
#view.view-details {
.view-details-sized(@size) {
.item {
.label, .date, .size {
line-height: @size + 14px;
}
}
.square {
width: @size;
height: @size;
img {
width: @size;
height: @size;
}
}
.label {
margin: 0 246px 0 (@size + 32px);
}
}
margin: 16px;
#items {
.rounded;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
}
.header {
position: relative;
white-space: nowrap;
display: list-item;
background: @col-back-panel;
border-bottom: 1px solid rgba(0,0,0,0.07);
border-radius: 2px 2px 0 0;
.label, .date, .size {
.eased-transition;
line-height: 46px;
opacity: 0.4;
outline: 0;
&:hover {
opacity: 1;
color: @col-text-hover;
}
}
.sort {
display: none;
position: relative;
top: -2px;
width: 20px;
height: 20px;
padding: 0 4px;
}
.ascending .sort {
display: inline;
}
.descending .sort {
display: inline;
transform: rotate(180deg);
zoom: 1;
}
}
.item {
overflow: hidden;
border-bottom: 1px solid rgba(0,0,0,0.07);
&:hover {
.raised;
z-index: 1;
}
&:last-child {
border-radius: 0 0 2px 2px;
}
}
.square {
display: inline-block;
position: absolute;
left: 16px;
top: -1px;
padding: 8px;
.thumb {
.rounded;
box-shadow: 0 0 1px 0 rgba(0,0,0,0.2);
}
}
.label, .date, .size {
padding: 0 8px;
}
.date {
position: absolute;
right: 116px;
top: 0;
}
.size {
position: absolute;
right: 16px;
top: 0;
}
.view-details-sized(16px)
}

View file

@ -0,0 +1,52 @@
#view.view-grid {
.view-grid-sized(@size) {
.label {
line-height: @size;
}
.square {
width: @size;
height: @size;
img {
width: @size;
height: @size;
}
}
}
margin: 8px;
.item {
.card;
.rounded;
overflow: hidden;
float: left;
margin: 8px;
&:hover {
.raised;
}
}
.square {
display: inline-block;
vertical-align: top;
background: @col-back-panel;
}
.label {
display: inline-block;
vertical-align: top;
width: 180px;
padding: 0 8px;
}
.date, .size {
display: none;
}
.view-grid-sized(48px);
}

View file

@ -0,0 +1,53 @@
#view.view-icons {
.view-icons-sized(@size) {
.item {
width: @size * 4/3;
}
.landscape {
width: @size * 4/3;
height: @size;
img {
width: @size;
height: @size;
}
.thumb {
width: @size * 4/3;
}
}
}
margin: 8px;
.item {
.card;
.rounded;
overflow: hidden;
float: left;
margin: 8px;
&:hover {
.raised;
}
}
.landscape {
display: block;
background: @col-back-panel;
}
.label {
padding: 0 6px;
line-height: 24px;
}
.date, .size {
display: none;
}
.view-icons-sized(96px);
}

View file

@ -0,0 +1,79 @@
#view {
a, a:active, a:visited {
display: block;
color: inherit;
cursor: pointer;
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.header {
display: none;
}
.item {
position: relative;
white-space: nowrap;
background: @col-back-paper;
&:hover {
color: @col-text-hover;
background: @col-back-panel;
}
}
.folder-parent {
.date, .size {
display: none;
}
}
.icon {
display: none;
text-align: center;
img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.thumb {
max-width: none;
max-height: none;
}
}
.label {
display: block;
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
}
.date {
text-align: right;
width: 130px;
}
.size {
text-align: right;
width: 80px;
}
#view-hint {
display: block;
margin-top: 36px;
text-align: center;
color: @col-border;
font-size: 5em;
font-weight: bold;
}
}