mirror of
https://github.com/zoriya/flood.git
synced 2026-05-29 18:04:10 +00:00
Rearrange app directory structure
This commit is contained in:
John Furrow
@@ -0,0 +1,145 @@
|
||||
.actions {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.action {
|
||||
box-shadow:
|
||||
1px 0 transparent,
|
||||
-1px 0 transparent;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
transition: background 0.25s, box-shadow 0.25s;
|
||||
|
||||
&:hover {
|
||||
background: $action--background--hover;
|
||||
box-shadow:
|
||||
1px 0 $action--border--hover,
|
||||
-1px 0 $action--border--hover;
|
||||
|
||||
.icon {
|
||||
fill: $action--foreground--hover;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: $action--foreground;
|
||||
height: 25px;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transition: fill 0.25s;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
background: $action-bar--background;
|
||||
color: $action-bar--foreground;
|
||||
display: flex;
|
||||
|
||||
&__item {
|
||||
flex: 3;
|
||||
|
||||
&:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
&__group {
|
||||
display: inline-block;
|
||||
padding: 0 15px;
|
||||
|
||||
&--has-divider {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
background: $action-bar--group--border;
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 80%;
|
||||
left: 0;
|
||||
top: 10%;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
|
||||
&__item {
|
||||
|
||||
&--sort-torrents {
|
||||
box-shadow: -1px 0 $action-bar--group--border;
|
||||
max-width: 225px;
|
||||
|
||||
.dropdown {
|
||||
margin: 5px 0 0 15px;
|
||||
|
||||
&__label {
|
||||
color: $dropdown--label;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-size: 0.65em;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
line-height: 0.9em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__value {
|
||||
color: $dropdown--value;
|
||||
|
||||
&:after {
|
||||
border-top: 5px solid $dropdown--value;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
min-width: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
|
||||
&__item {
|
||||
|
||||
&--torrent-operations {
|
||||
|
||||
.dropdown {
|
||||
display: inline-block;
|
||||
height: 60px;
|
||||
|
||||
&__content {
|
||||
min-width: 430px;
|
||||
right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,205 @@
|
||||
.client-stat {
|
||||
display: flex;
|
||||
padding: 30px 20px 20px 20px;
|
||||
|
||||
&__icon,
|
||||
&__data {
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
flex: 0 0 23px;
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
height: 25px;
|
||||
margin: 6px 0 0 -5px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__data {
|
||||
flex: 1;
|
||||
|
||||
&--primary,
|
||||
&--secondary {
|
||||
display: block;
|
||||
font-weight: 100;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
font-size: 1.9em;
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
font-size: 0.9em;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client-stat {
|
||||
|
||||
&--limits {
|
||||
background: none;
|
||||
border: none;
|
||||
color: $client-stats--limits--foreground;
|
||||
display: block;
|
||||
margin: 15px 0 0 0;
|
||||
outline: none;
|
||||
padding: 2px 0 2px 25px;
|
||||
font-size: 0.85em;
|
||||
text-align: left;
|
||||
transition: color 0.25s;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
fill: $client-stats--limits--foreground;
|
||||
margin: -2px 5px 0 0;
|
||||
transition: fill 0.25s;
|
||||
vertical-align: middle;
|
||||
width: 14.5px;
|
||||
|
||||
.limits {
|
||||
|
||||
&__bars {
|
||||
|
||||
&--top {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&--bottom {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $client-stats--limits--icon--hover;
|
||||
|
||||
.icon {
|
||||
fill: $client-stats--limits--icon--hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client-stat {
|
||||
position: relative;
|
||||
|
||||
.graph {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
|
||||
svg {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&--line {
|
||||
fill: none;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&--download {
|
||||
|
||||
.icon {
|
||||
fill: $client-stats--download--secondary--foreground;
|
||||
}
|
||||
|
||||
.client-stat {
|
||||
|
||||
&__data {
|
||||
|
||||
&--primary {
|
||||
color: $client-stats--download--primary--foreground;
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
color: $client-stats--download--secondary--foreground;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.graph {
|
||||
|
||||
.graph--download--gradient--top {
|
||||
stop-color: $client-stats--download--graph--fill--top;
|
||||
}
|
||||
|
||||
.graph--download--gradient--bottom {
|
||||
stop-color: $client-stats--download--graph--fill--bottom;
|
||||
}
|
||||
|
||||
&--area {
|
||||
fill: url('#graph--download--gradient')
|
||||
}
|
||||
|
||||
&--line {
|
||||
stroke: $client-stats--download--graph--stroke;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&--upload {
|
||||
|
||||
.icon {
|
||||
fill: $client-stats--upload--secondary--foreground;
|
||||
}
|
||||
|
||||
.client-stat {
|
||||
|
||||
&__data {
|
||||
|
||||
&--primary {
|
||||
color: $client-stats--upload--primary--foreground;
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
color: $client-stats--upload--secondary--foreground;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.graph {
|
||||
|
||||
.graph--upload--gradient--top {
|
||||
stop-color: $client-stats--upload--graph--fill--top;
|
||||
}
|
||||
|
||||
.graph--upload--gradient--bottom {
|
||||
stop-color: $client-stats--upload--graph--fill--bottom;
|
||||
}
|
||||
|
||||
&--area {
|
||||
fill: url('#graph--upload--gradient')
|
||||
}
|
||||
|
||||
&--line {
|
||||
stroke: $client-stats--upload--graph--stroke;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
.content {
|
||||
background: $main-content--background;
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
.dropdown {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
&__button {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
padding: 12px 15px 7px 15px;
|
||||
text-align: left;
|
||||
width: auto;
|
||||
word-wrap: none;
|
||||
}
|
||||
|
||||
&__content {
|
||||
background: $dropdown--background;
|
||||
border-radius: 3px;
|
||||
box-shadow:
|
||||
0 0 0 1px $dropdown--container--border,
|
||||
0 0 35px $dropdown--container--shadow;
|
||||
color: $dropdown--foreground;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&__header {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
background: $dropdown--header--border;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 1px;
|
||||
left: 5%;
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
&__items {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
&__item {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-size: 0.9em;
|
||||
padding: 5px 15px;
|
||||
transition: background 0.25s, color 0.25s;
|
||||
|
||||
&:hover {
|
||||
background: $dropdown--item--background--hover;
|
||||
color: $dropdown--item--foreground--hover;
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
color: $dropdown--item--foreground--active;
|
||||
}
|
||||
}
|
||||
|
||||
&--align-right & {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
|
||||
&__content {
|
||||
|
||||
&-enter {
|
||||
animation: fade-in 0.25s both;
|
||||
}
|
||||
|
||||
&-leave {
|
||||
animation: fade-out 0.25s both;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
|
||||
&__content {
|
||||
|
||||
&__container {
|
||||
padding: 25px 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
.modal {
|
||||
animation: fade-in 0.25s forwards;
|
||||
background: $modal--overlay;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
|
||||
&__window {
|
||||
background: $modal--background;
|
||||
left: 50%;
|
||||
max-width: 100%;
|
||||
padding: 30px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
|
||||
&__header {
|
||||
margin-bottom: 20px;
|
||||
|
||||
h1 {
|
||||
color: $modal--header--foreground;
|
||||
font-size: 1.35em;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
.progress-bar {
|
||||
height: 3px;
|
||||
position: relative;
|
||||
transition: opacity 0.25s;
|
||||
z-index: 1;
|
||||
|
||||
.is-selected.is-stopped & {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $progress-bar--background;
|
||||
content: '';
|
||||
height: 1px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 1px;
|
||||
transition: background 0.25s;
|
||||
width: 100%;
|
||||
|
||||
.is-selected & {
|
||||
background: $progress-bar--background--selected;
|
||||
}
|
||||
|
||||
.is-selected.is-stopped & {
|
||||
background: $progress-bar--background--selected--stopped;
|
||||
}
|
||||
}
|
||||
|
||||
&__fill {
|
||||
background: $progress-bar--fill;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: background 0.25s, width 0.25s;
|
||||
z-index: 1;
|
||||
|
||||
.is-completed & {
|
||||
background: $progress-bar--fill--completed;
|
||||
}
|
||||
|
||||
.is-seeding & {
|
||||
background: $progress-bar--fill--completed;
|
||||
}
|
||||
|
||||
.is-stopped & {
|
||||
background: $progress-bar--fill--stopped;
|
||||
}
|
||||
|
||||
.is-selected & {
|
||||
background: $progress-bar--fill--selected;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
.sidebar {
|
||||
box-shadow: inset -1px 0 $sidebar--border;
|
||||
color: $sidebar--foreground;
|
||||
|
||||
&__item {
|
||||
|
||||
&--search {
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
fill: $search-torrents--icon--foreground;
|
||||
height: 22px;
|
||||
left: 17px;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transition: fill 0.25s, opacity 0.25s;
|
||||
transform: translateY(-50%);
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.textbox {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
border: 1px solid $search-torrents--border;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
background: $search-torrents--background;
|
||||
box-shadow: none;
|
||||
color: $search-torrents--foreground;
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
outline: none;
|
||||
padding: 12px 0 12px 45px;
|
||||
transition: background 0.25s, border 0.25s, color 0.25s;
|
||||
width: 100%;
|
||||
|
||||
&::placeholder {
|
||||
color: $search-torrents--placeholder;
|
||||
font-style: italic;
|
||||
transition: color 0.25s;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-in-use {
|
||||
|
||||
.icon {
|
||||
fill: $search-torrents--icon--foreground--active;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.textbox {
|
||||
background: $search-torrents--background--active;
|
||||
border-bottom: 1px solid $search-torrents--border--active;
|
||||
border-top: 1px solid $search-torrents--border--active;
|
||||
color: $search-torrents--foreground--active;
|
||||
|
||||
&::placeholder {
|
||||
color: $search-torrents--placeholder--active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
.status-filter {
|
||||
font-size: 0.85em;
|
||||
padding: 30px 0;
|
||||
|
||||
&__item {
|
||||
color: $status-filter--foreground;
|
||||
cursor: pointer;
|
||||
padding: 3px 20px;
|
||||
transition: color 0.25s;
|
||||
|
||||
&:hover {
|
||||
color: $status-filter--foreground--hover;
|
||||
|
||||
.icon {
|
||||
fill: $status-filter--foreground--hover;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
color: $status-filter--foreground--active;
|
||||
font-weight: 700;
|
||||
|
||||
.icon {
|
||||
fill: $status-filter--foreground--active;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
fill: $status-filter--foreground;
|
||||
height: 14px;
|
||||
margin-right: 7px;
|
||||
transition: fill 0.25s;
|
||||
vertical-align: middle;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.status-filter {
|
||||
|
||||
&__item {
|
||||
|
||||
&--heading {
|
||||
cursor: default;
|
||||
font-size: 0.8em;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
|
||||
&,
|
||||
&:hover {
|
||||
color: $status-filter--foreground--header;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
.torrent {
|
||||
|
||||
&__list {
|
||||
background: $torrent-list--background;
|
||||
border-radius: 4px 4px 0 0;
|
||||
box-shadow: 0 0 0 1px $torrent-list--border;
|
||||
list-style: none;
|
||||
opacity: 1;
|
||||
overflow: auto;
|
||||
padding: 10px 0;
|
||||
position: relative;
|
||||
transition: opacity 1s;
|
||||
user-select: none;
|
||||
|
||||
&--empty {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.torrent {
|
||||
cursor: default;
|
||||
padding: 10px 25px;
|
||||
transition: background 0.25s;
|
||||
|
||||
&:hover {
|
||||
background: $torrent--background--hover;
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
background: $torrent--background--selected;
|
||||
}
|
||||
}
|
||||
|
||||
.torrent {
|
||||
|
||||
&__details {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-flow: row wrap;
|
||||
list-style: none;
|
||||
|
||||
&--primary,
|
||||
&--secondary,
|
||||
&--tertiary {
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
color: $torrent--primary--foreground;
|
||||
flex: 4;
|
||||
line-height: 1.3;
|
||||
|
||||
.is-stopped & {
|
||||
color: $torrent--primary--foreground--stopped;
|
||||
}
|
||||
|
||||
.is-selected & {
|
||||
color: $torrent--primary--foreground--selected;
|
||||
}
|
||||
|
||||
.is-selected.is-stopped & {
|
||||
color: $torrent--primary--foreground--selected--stopped;
|
||||
}
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
align-items: flex-end;
|
||||
color: $torrent--secondary--foreground;
|
||||
flex: 1;
|
||||
font-size: 0.75em;
|
||||
min-width: 200px;
|
||||
|
||||
li {
|
||||
flex: 1 1 auto;
|
||||
min-width: 15%;
|
||||
|
||||
&.torrent__details--ratio {
|
||||
max-width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.is-stopped & {
|
||||
color: $torrent--secondary--foreground--stopped;
|
||||
}
|
||||
|
||||
.is-selected & {
|
||||
color: $torrent--secondary--foreground--selected;
|
||||
}
|
||||
|
||||
.is-selected.is-stopped & {
|
||||
color: $torrent--secondary--foreground--selected--stopped;
|
||||
}
|
||||
}
|
||||
|
||||
&--tertiary {
|
||||
color: $torrent--tertiary--foreground;
|
||||
display: block;
|
||||
font-size: 0.75em;
|
||||
margin: 0 0 3px 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 1em;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.is-stopped & {
|
||||
color: $torrent--tertiary--foreground--stopped;
|
||||
}
|
||||
|
||||
.is-selected & {
|
||||
color: $torrent--tertiary--foreground--selected;
|
||||
}
|
||||
|
||||
.is-selected.is-stopped & {
|
||||
color: $torrent--tertiary--foreground--selected--stopped;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
margin-right: 0.5em;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.torrent {
|
||||
|
||||
&__details {
|
||||
|
||||
&--eta {
|
||||
opacity: 0;
|
||||
transition: opacity 1s, visibility 1s;
|
||||
visibility: hidden;
|
||||
|
||||
.torrent__details--segment {
|
||||
margin-right: 0.25em;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.is-actively-downloading & {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user