mirror of
https://github.com/zoriya/flood.git
synced 2026-06-08 12:42:41 +00:00
Move torrent details to modal
This commit is contained in:
John Furrow
@@ -7,11 +7,11 @@ $sidebar-filter--count--background--active: #3b586d;
|
||||
border-radius: 100px;
|
||||
color: $sidebar-filter--count--foreground;
|
||||
display: inline-block;
|
||||
font-size: 0.8em;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
margin-left: 10px;
|
||||
padding: 1px 5px;
|
||||
padding: 2px 5px;
|
||||
transition: background 0.25s;
|
||||
vertical-align: baseline;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@@ -1,105 +1,50 @@
|
||||
$directory-tree--filename--foreground: #527893;
|
||||
$directory-tree--directory--foreground: $directory-tree--filename--foreground;
|
||||
$directory-tree--directory--foreground--open: #719bb7;
|
||||
|
||||
$directory-tree--icon--file: #344b5b;
|
||||
$directory-tree--icon--folder: rgba(#527893, 0.4);
|
||||
$directory-tree--icon--folder--active: rgba(#82aac5, 0.5);
|
||||
$directory-tree--icon--folder--open: rgba(#82aac5, 0.5);
|
||||
|
||||
$directory-tree--file-details--foreground: #2b4456;
|
||||
$directory-tree--file-details--hover--foreground: #527893;
|
||||
|
||||
$torrent-details--directory-tree--file--hover--background: rgba(#1a2d3c, 0.8);
|
||||
$torrent-details--directory-tree--file--hover--foreground: #79a7c7;
|
||||
$torrent-details--directory-tree--file--hover--border: #1f3647;
|
||||
|
||||
$torrent-details--directory-tree--parent-directory--foreground: #3a5c74;
|
||||
$torrent-details--directory-tree--parent-directory--icon--fill: rgba(#3a5c74, 0.5);
|
||||
|
||||
.directory-tree {
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
fill: $directory-tree--icon--folder;
|
||||
height: 14px;
|
||||
margin-right: 6px;
|
||||
margin-top: -3px;
|
||||
vertical-align: middle;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
&__node {
|
||||
color: $directory-tree--filename--foreground;
|
||||
line-height: 1.75;
|
||||
margin-left: -0px;
|
||||
margin-right: -0px;
|
||||
padding: 1px 4px 1px 8px;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
|
||||
&--group {
|
||||
padding-left: 10px;
|
||||
margin-left: 0;
|
||||
padding-left: 12px;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
background: rgba(#527893, 0.1);
|
||||
content: '';
|
||||
height: 100%;
|
||||
left: 5px;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
top: 0;
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&--directory {
|
||||
color: $directory-tree--directory--foreground;
|
||||
cursor: pointer;
|
||||
transition: color 0.125s;
|
||||
|
||||
&.is-expanded {
|
||||
color: $directory-tree--directory--foreground--open;
|
||||
font-weight: 500;
|
||||
|
||||
.icon {
|
||||
fill: $directory-tree--icon--folder--active;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: $directory-tree--icon--folder;
|
||||
}
|
||||
}
|
||||
|
||||
.file {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
line-height: 1.4;
|
||||
margin-left: -9px;
|
||||
padding: 2px 0 2px 9px;
|
||||
transition: background 0.25s, box-shadow 0.25s, color 0.25s;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background: $torrent-details--directory-tree--file--hover--background;
|
||||
box-shadow:
|
||||
0 1px 0 $torrent-details--directory-tree--file--hover--border,
|
||||
0 -1px 0 $torrent-details--directory-tree--file--hover--border;
|
||||
color: $torrent-details--directory-tree--file--hover--foreground;
|
||||
|
||||
.file {
|
||||
|
||||
&__detail {
|
||||
|
||||
&--size,
|
||||
&--priority {
|
||||
color: $directory-tree--file-details--hover--foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
width: auto;
|
||||
|
||||
.icon {
|
||||
fill: $directory-tree--icon--file;
|
||||
margin-top: -3px;
|
||||
vertical-align: middle;
|
||||
transition: fill 0.25s;
|
||||
}
|
||||
|
||||
&__detail {
|
||||
@@ -110,9 +55,8 @@ $torrent-details--directory-tree--parent-directory--icon--fill: rgba(#3a5c74, 0.
|
||||
|
||||
&--size,
|
||||
&--priority {
|
||||
color: $directory-tree--file-details--foreground;
|
||||
flex: 0 0 auto;
|
||||
font-size: 0.95em;
|
||||
font-size: 0.7rem;
|
||||
text-align: right;
|
||||
transition: color 0.25s;
|
||||
}
|
||||
@@ -134,6 +78,20 @@ $torrent-details--directory-tree--parent-directory--icon--fill: rgba(#3a5c74, 0.
|
||||
|
||||
&--file-list {
|
||||
margin-bottom: 3px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > .directory-tree {
|
||||
|
||||
&__tree {
|
||||
|
||||
& > .directory-tree {
|
||||
|
||||
&__node {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -143,7 +101,6 @@ $torrent-details--directory-tree--parent-directory--icon--fill: rgba(#3a5c74, 0.
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.icon {
|
||||
fill: $torrent-details--directory-tree--parent-directory--icon--fill;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -152,7 +109,7 @@ $torrent-details--directory-tree--parent-directory--icon--fill: rgba(#3a5c74, 0.
|
||||
&__tree {
|
||||
|
||||
.directory-tree__tree {
|
||||
padding-left: 6px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,6 +20,34 @@
|
||||
}
|
||||
}
|
||||
|
||||
&--information {
|
||||
|
||||
&__fill {
|
||||
fill-opacity: 0.05;
|
||||
}
|
||||
|
||||
&__ring {
|
||||
fill-opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
&--limits {
|
||||
|
||||
.limits {
|
||||
|
||||
&__bars {
|
||||
|
||||
&--top {
|
||||
fill-opacity: 0.4;
|
||||
}
|
||||
|
||||
&--bottom {
|
||||
fill-opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--loading-indicator {
|
||||
|
||||
.loading-indicator {
|
||||
@@ -41,21 +69,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--limits {
|
||||
|
||||
.limits {
|
||||
|
||||
&__bars {
|
||||
|
||||
&--top {
|
||||
fill-opacity: 0.4;
|
||||
}
|
||||
|
||||
&--bottom {
|
||||
fill-opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
$modal--background: #f7fafc;
|
||||
$modal--heading--background: #fff;
|
||||
$modal--heading--background: $white;
|
||||
$modal--heading--foreground: #5c6e80;
|
||||
$modal--heading--border: #dde7ed;
|
||||
|
||||
@@ -36,11 +36,13 @@ $modal--tabs--padding--right: $spacing-unit * 1/5;
|
||||
$modal--tabs--padding--bottom: $spacing-unit * 2/5;
|
||||
$modal--tabs--padding--left: $spacing-unit * 1/5;
|
||||
|
||||
$modal--tabs--padding--vertical--top: $spacing-unit * 2/5;
|
||||
$modal--tabs--padding--vertical--top: $spacing-unit * 1/5;
|
||||
$modal--tabs--padding--vertical--right: $spacing-unit * 2/5;
|
||||
$modal--tabs--padding--vertical--bottom: $spacing-unit * 2/5;
|
||||
$modal--tabs--padding--vertical--bottom: $spacing-unit * 1/5;
|
||||
$modal--tabs--padding--vertical--left: $modal--padding--horizontal;
|
||||
|
||||
$modal--tabs--in-body--background: rgba($white, 0.55);
|
||||
|
||||
.modal {
|
||||
background: $modal--overlay;
|
||||
height: 100%;
|
||||
@@ -57,7 +59,7 @@ $modal--tabs--padding--vertical--left: $modal--padding--horizontal;
|
||||
|
||||
&__tabs {
|
||||
color: $modal--tab--foreground;
|
||||
font-size: 0.65em;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 400;
|
||||
margin: $modal--tabs--margin--top $modal--tabs--margin--right $modal--tabs--margin--bottom $modal--tabs--margin--left;
|
||||
|
||||
@@ -73,7 +75,7 @@ $modal--tabs--padding--vertical--left: $modal--padding--horizontal;
|
||||
&:after {
|
||||
bottom: 0;
|
||||
content: '';
|
||||
height: 1px;
|
||||
height: 2px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@@ -114,16 +116,19 @@ $modal--tabs--padding--vertical--left: $modal--padding--horizontal;
|
||||
font-size: 1.25em;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
padding: $modal--padding--vertical $modal--padding--horizontal;
|
||||
|
||||
&.has-tabs {
|
||||
padding-bottom: 0;
|
||||
|
||||
.modal--tabs-in-header & {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
padding: $modal--content--padding--top $modal--content--padding--right $modal--content--padding--bottom $modal--content--padding--left;
|
||||
|
||||
&__wrapper {
|
||||
@@ -134,9 +139,11 @@ $modal--tabs--padding--vertical--left: $modal--padding--horizontal;
|
||||
0 0 35px $modal--content--shadow;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
left: 50%;
|
||||
max-height: 80%;
|
||||
max-width: 80%;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
transform: translate(-50%, 0);
|
||||
@@ -146,7 +153,25 @@ $modal--tabs--padding--vertical--left: $modal--padding--horizontal;
|
||||
|
||||
&__body {
|
||||
color: $modal--body--foreground;
|
||||
flex: 1 1 auto;
|
||||
font-size: 0.9em;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
.modal--tabs-in-body & {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
padding: 0 $modal--padding--horizontal $modal--padding--vertical $modal--padding--horizontal;
|
||||
|
||||
.modal {
|
||||
|
||||
&__actions {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
@@ -189,68 +214,113 @@ $modal--tabs--padding--vertical--left: $modal--padding--horizontal;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&--orientation {
|
||||
&--vertical {
|
||||
|
||||
&--vertical {
|
||||
&.modal {
|
||||
|
||||
&.modal__content__wrapper {
|
||||
&--tabs-in-header {
|
||||
flex-direction: row;
|
||||
|
||||
.modal {
|
||||
|
||||
&__header {
|
||||
border-radius: $modal--border-radius 0 0 $modal--border-radius;
|
||||
box-shadow: inset -1px 0 0 $modal--heading--border;
|
||||
flex-basis: 175px;
|
||||
padding-bottom: $modal--padding--horizontal;
|
||||
padding-right: 0;
|
||||
max-width: 175px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
&--tabs-in-body {
|
||||
|
||||
&__header {
|
||||
border-radius: $modal--border-radius 0 0 $modal--border-radius;
|
||||
box-shadow: inset -1px 0 0 $modal--heading--border;
|
||||
flex-basis: 175px;
|
||||
padding-bottom: $modal--padding--horizontal;
|
||||
padding-right: 0;
|
||||
max-width: 175px;
|
||||
.modal {
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&__content {
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
background: $modal--tabs--in-body--background;
|
||||
box-shadow: inset -1px 0 $modal--heading--border;
|
||||
flex: 0 0 135px;
|
||||
margin: 0;
|
||||
padding-top: $modal--padding--vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
margin: 10px 0 0 $modal--padding--horizontal * -1;
|
||||
.modal {
|
||||
|
||||
.modal {
|
||||
&__tabs {
|
||||
margin: $modal--padding--vertical 0 0 $modal--padding--horizontal * -1;
|
||||
|
||||
&__tab {
|
||||
display: block;
|
||||
margin-right: 0;
|
||||
padding: $modal--tabs--padding--vertical--top $modal--tabs--padding--vertical--right $modal--tabs--padding--vertical--bottom $modal--tabs--padding--vertical--left;
|
||||
.modal {
|
||||
|
||||
&:after {
|
||||
bottom: 0;
|
||||
content: '';
|
||||
height: auto;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: background 0.25s;
|
||||
width: 1px;
|
||||
}
|
||||
&__tab {
|
||||
display: block;
|
||||
margin-right: 0;
|
||||
padding: $modal--tabs--padding--vertical--top $modal--tabs--padding--vertical--right $modal--tabs--padding--vertical--bottom $modal--tabs--padding--vertical--left;
|
||||
|
||||
&:after {
|
||||
bottom: 0;
|
||||
content: '';
|
||||
height: auto;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: background 0.25s;
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 500px;
|
||||
}
|
||||
&__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__body {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
&__actions {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--large {
|
||||
width: 700px;
|
||||
&--size {
|
||||
|
||||
&-large {
|
||||
width: 700px;
|
||||
|
||||
&.modal {
|
||||
|
||||
&__content {
|
||||
|
||||
&__wrapper {
|
||||
bottom: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,76 +1,55 @@
|
||||
$torrent-details--background: saturate(lighten(#0c1b26, 2.5%), 4%); //#162835;
|
||||
$torrent-details--border: rgba($background, 0.1);
|
||||
|
||||
$torrent-details--header--border: rgba(#040d13, 0.3);
|
||||
$torrent-details--header--name--foreground: #c7dbeb;
|
||||
$torrent-details--header--name--foreground: #5b6d7c;
|
||||
$torrent-details--header--tertiary--foreground: #7b9cb4;
|
||||
$torrent-details--header--progress-bar--track: #2a3e4c;
|
||||
$torrent-details--header--progress-bar--fill--error: #be2558;
|
||||
$torrent-details--header--progress-bar--fill--stopped: #7b9cb4;
|
||||
|
||||
$torrent-details--navigation--border: rgba(#040d13, 0.4);
|
||||
$torrent-details--navigation--item--background--active: rgba(#349cf4, 0.07);
|
||||
$torrent-details--navigation--item--foreground--active: #349cf4;
|
||||
$torrent-details--navigation--item--border--active: #349cf4;
|
||||
$torrent-details--navigation--background: transparent;
|
||||
|
||||
$torrent-details--content--background: rgba(desaturate(#0c1b26, 15%), 0.4);
|
||||
|
||||
$torrent-details--table--foreground: #527893;
|
||||
$torrent-details--table--header: rgba(#527893, 0.5);
|
||||
$torrent-details--table--header--count--background: rgba(#527893, 0.5);
|
||||
$torrent-details--table--header--count--foreground: #0c1b26;
|
||||
$torrent-details--table--header--count--background: rgba(#527893, 0.2);
|
||||
$torrent-details--table--header--count--foreground: #527893;
|
||||
|
||||
$torrent-details--header--icon--default--fill: rgba(#4d6f87, 0.5);
|
||||
|
||||
.application {
|
||||
$torrent-details--detail--label--foreground: #527893;
|
||||
|
||||
&__panel {
|
||||
$directory-tree--filename--foreground: rgba(#527893, 0.7);
|
||||
$directory-tree--directory--foreground: #527893;
|
||||
$directory-tree--directory--foreground--open: darken($directory-tree--directory--foreground, 5%);
|
||||
|
||||
&--torrent-details {
|
||||
background: $torrent-details--background;
|
||||
}
|
||||
}
|
||||
}
|
||||
$directory-tree--icon--file: rgba(#527893, 0.4);
|
||||
$directory-tree--icon--folder: rgba(#527893, 0.4);
|
||||
$directory-tree--icon--folder--active: $directory-tree--icon--folder;
|
||||
$directory-tree--icon--folder--open: rgba(darken(#527893, 10%), 0.4);
|
||||
|
||||
$directory-tree--file-details--foreground: rgba(#527893, 0.7);
|
||||
$directory-tree--file-details--hover--foreground: rgba(#527893, 0.8);
|
||||
|
||||
$torrent-details--directory-tree--file--hover--background: rgba($blue, 0.1);
|
||||
$torrent-details--directory-tree--file--hover--foreground: $blue;
|
||||
$torrent-details--directory-tree--file--hover--border: rgba($blue, 0.5);
|
||||
|
||||
$torrent-details--directory-tree--parent-directory--foreground: rgba(#527893, 0.6);
|
||||
$torrent-details--directory-tree--parent-directory--icon--fill: rgba(#527893, 0.5);
|
||||
|
||||
.torrent-details {
|
||||
background: $torrent-details--background;
|
||||
bottom: 0;
|
||||
box-shadow: -1px 0 0 $torrent-details--border;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.8em;
|
||||
left: 0;
|
||||
min-width: 400px;
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: opacity 1s;
|
||||
z-index: 2;
|
||||
|
||||
&__wrapper {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__scroll-container {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
&__heading {
|
||||
color: $torrent-details--header--name--foreground;
|
||||
font-size: 1.7em;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 300;
|
||||
margin-bottom: $spacing-unit * 2/5;
|
||||
}
|
||||
|
||||
&__sub-heading {
|
||||
display: flex;
|
||||
margin-bottom: $spacing-unit * 1/4;
|
||||
flex-wrap: wrap;
|
||||
font-weight: 400;
|
||||
margin-bottom: $spacing-unit * 1/5;
|
||||
|
||||
&__secondary {
|
||||
color: $torrent-details--header--tertiary--foreground;
|
||||
display: flex;
|
||||
font-size: 0.85rem;
|
||||
flex: 1 0 auto;
|
||||
|
||||
&:first-child {
|
||||
@@ -129,56 +108,6 @@ $torrent-details--header--icon--default--fill: rgba(#4d6f87, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
box-shadow: 0 1px 0 $torrent-details--header--border;
|
||||
flex: 0 0 auto;
|
||||
padding: $spacing-unit * 1/2 $spacing-unit $spacing-unit * 2/3 $spacing-unit;
|
||||
|
||||
&.has-error {
|
||||
|
||||
.progress-bar {
|
||||
|
||||
&__fill {
|
||||
background: $torrent-details--header--progress-bar--fill--error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-stopped {
|
||||
|
||||
.progress-bar {
|
||||
|
||||
&__fill {
|
||||
background: $torrent-details--header--progress-bar--fill--stopped;
|
||||
|
||||
&__wrapper {
|
||||
|
||||
&:after {
|
||||
background: $torrent-details--header--progress-bar--track;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: $torrent-details--header--progress-bar--fill--stopped;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
|
||||
&__fill {
|
||||
|
||||
&__wrapper {
|
||||
|
||||
&:after {
|
||||
background: $torrent-details--header--progress-bar--track;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__action {
|
||||
cursor: pointer;
|
||||
transition: color 0.25s;
|
||||
@@ -216,43 +145,8 @@ $torrent-details--header--icon--default--fill: rgba(#4d6f87, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: $spacing-unit * 2/3 $spacing-unit;
|
||||
|
||||
&__wrapper {
|
||||
background: $torrent-details--content--background;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&__navigation {
|
||||
background: $torrent-details--navigation--background;
|
||||
box-shadow: 1px 0 0 $torrent-details--navigation--border;
|
||||
min-width: 125px;
|
||||
padding: $spacing-unit * 1/2 0;
|
||||
|
||||
.navigation {
|
||||
|
||||
&__item {
|
||||
cursor: pointer;
|
||||
padding: $spacing-unit * 1/4 $spacing-unit;
|
||||
text-align: right;
|
||||
transition: background 0.25s, box-shadow 0.25s, color 0.25s;
|
||||
|
||||
&.is-active {
|
||||
background: $torrent-details--navigation--item--background--active;
|
||||
box-shadow: 1px 0 0 $torrent-details--navigation--item--border--active;
|
||||
color: $torrent-details--navigation--item--foreground--active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__section {
|
||||
font-size: 0.8rem;
|
||||
|
||||
&__heading,
|
||||
&__null-data {
|
||||
@@ -261,33 +155,123 @@ $torrent-details--header--icon--default--fill: rgba(#4d6f87, 0.5);
|
||||
margin-bottom: $spacing-unit * 1/10;
|
||||
}
|
||||
|
||||
&__heading {
|
||||
&--file-tree {
|
||||
margin-left: -8px;
|
||||
|
||||
.badge {
|
||||
background: $torrent-details--table--header--count--background;
|
||||
color: $torrent-details--table--header--count--foreground;
|
||||
.directory-tree {
|
||||
color: $directory-tree--filename--foreground;
|
||||
|
||||
&__node {
|
||||
|
||||
&--group {
|
||||
|
||||
&:after {
|
||||
background: rgba(#527893, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&--directory {
|
||||
color: $directory-tree--directory--foreground;
|
||||
|
||||
&.is-expanded {
|
||||
color: $directory-tree--directory--foreground--open;
|
||||
font-weight: 500;
|
||||
|
||||
.icon {
|
||||
fill: $directory-tree--icon--folder--open;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: $directory-tree--icon--folder;
|
||||
}
|
||||
}
|
||||
|
||||
.file {
|
||||
width: auto;
|
||||
|
||||
&__detail {
|
||||
|
||||
&--size,
|
||||
&--priority {
|
||||
color: $directory-tree--file-details--foreground;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: $directory-tree--icon--file;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__selectable {
|
||||
position: relative;
|
||||
transition: background 0.25s, border 0.25s, color 0.25s;
|
||||
|
||||
&:after {
|
||||
background: rgba($blue, 0);
|
||||
bottom: 0;
|
||||
content: '';
|
||||
height: auto;
|
||||
left: -2px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: background 0.25s;
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $torrent-details--directory-tree--file--hover--background;
|
||||
color: $torrent-details--directory-tree--file--hover--foreground;
|
||||
|
||||
&:after {
|
||||
background: rgba($blue, 1);
|
||||
}
|
||||
|
||||
.file {
|
||||
|
||||
&__detail {
|
||||
|
||||
&--size,
|
||||
&--priority {
|
||||
color: $directory-tree--file-details--hover--foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: $torrent-details--directory-tree--file--hover--foreground;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&__parent-directory {
|
||||
color: $torrent-details--directory-tree--parent-directory--foreground;
|
||||
|
||||
.icon {
|
||||
fill: $torrent-details--directory-tree--parent-directory--icon--fill;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: $directory-tree--icon--file;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
background: $torrent-details--table--header--count--background;
|
||||
color: $torrent-details--table--header--count--foreground;
|
||||
}
|
||||
}
|
||||
|
||||
&__detail {
|
||||
|
||||
&__label {
|
||||
margin-right: 0.5em;
|
||||
opacity: 0.5;
|
||||
color: $torrent-details--detail--label--foreground;
|
||||
font-weight: 500;
|
||||
margin-right: $spacing-unit * 3/5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.torrent-details-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.torrent-details-enter-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.torrent-details-leave {
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
@@ -19,6 +19,9 @@ $torrent--background--hover: #f6f8fa;
|
||||
$torrent--background--selected: $blue;
|
||||
$torrent--background--error: #e95779;
|
||||
|
||||
$more-info--box-shadow--hue: #1a2f3d;
|
||||
$more-info--border: $textbox-repeater--button--border;
|
||||
|
||||
.torrents {
|
||||
display: flex;
|
||||
flex: 1 1 100px;
|
||||
@@ -91,6 +94,7 @@ $torrent--background--error: #e95779;
|
||||
.torrent {
|
||||
cursor: default;
|
||||
padding: 10px 20px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: background 0.25s;
|
||||
|
||||
@@ -101,6 +105,7 @@ $torrent--background--error: #e95779;
|
||||
|
||||
&__more-info {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -114,14 +119,38 @@ $torrent--background--error: #e95779;
|
||||
}
|
||||
|
||||
&__more-info {
|
||||
height: 20px;
|
||||
margin-top: -10px;
|
||||
border-radius: 32px 0 0 32px;
|
||||
box-shadow:
|
||||
0 0 30px rgba($more-info--box-shadow--hue, 0.11),
|
||||
0 0 0 1px rgba($more-info--box-shadow--hue, 0.07);
|
||||
height: 32px;
|
||||
margin-top: -16px;
|
||||
position: absolute;
|
||||
left: -7px;
|
||||
opacity: 0;
|
||||
right: -5px;
|
||||
top: 50%;
|
||||
transition: background 0.25s, box-shadow 0.25s, opacity 0.25s;
|
||||
width: 20px;
|
||||
transform: translateX(15px);
|
||||
transition: background 0.25s, box-shadow 0.25s, opacity 0.25s, transform 0.25s;
|
||||
width: 42px;
|
||||
|
||||
.icon {
|
||||
fill: rgba($foreground, 0.5);
|
||||
position: absolute;
|
||||
height: 16px;
|
||||
left: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $white;
|
||||
box-shadow:
|
||||
0 0 30px rgba($more-info--box-shadow--hue, 0.2),
|
||||
0 0 0 1px rgba($more-info--box-shadow--hue, 0.1);
|
||||
|
||||
.icon {
|
||||
fill: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user