feat: updated colors and label/button styles (#5897)
This commit is contained in:
Rukario
GitHub
parent
de889c93b8
commit
f0009a8373
|
|
@ -12,8 +12,6 @@ $green-400: #67c87f;
|
|||
$green-500: #34dc70;
|
||||
$grey-200: #e1e4e8;
|
||||
$grey-500: #828282;
|
||||
$grey-700: #373737;
|
||||
$grey-800: #292929;
|
||||
$grey-900: #191919;
|
||||
$red-500: #d73a49;
|
||||
$white: #fff;
|
||||
|
|
@ -22,11 +20,11 @@ $dark-mode-white: #c9d1d9;
|
|||
$yellow-300: #ffea7f;
|
||||
$grey-40: #666;
|
||||
$nice-grey: #f8f8f8;
|
||||
$nice-grey-darker: #f0f0f0;
|
||||
$dark-mode-black: #121212;
|
||||
$default-accent-color-dark: #0c2d6b;
|
||||
$default-border-dark: #575757;
|
||||
$default-border-light: #aeaeae;
|
||||
$default-tinted: rgba(128, 128, 144, 0.125);
|
||||
|
||||
// Z-INDEX ENUM
|
||||
// $z-index-progressbar: 1;
|
||||
|
|
@ -81,31 +79,27 @@ $image-play-circle-idle: '../img/play-circle-idle.svg';
|
|||
--color-progressbar-paused: #{$grey-200};
|
||||
--color-progressbar-leech: #{$blue-200};
|
||||
--color-progressbar-queued: #{$blue-400};
|
||||
--color-bg-even: #{$default-tinted};
|
||||
--color-toolbar-background: #{$default-tinted};
|
||||
--color-bg-tabs: #{$default-tinted};
|
||||
|
||||
color-scheme: light dark;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--color-bg-odd: #{$black};
|
||||
--color-bg-primary: #{$black};
|
||||
--color-bg-popup: #{$black};
|
||||
--color-bg-hover: #{$grey-40};
|
||||
--color-fg-primary: #{$dark-mode-white};
|
||||
--color-bg-primary: #{$grey-800};
|
||||
--color-bg-primary-hover: #{$grey-700};
|
||||
--color-bg-odd: #{$grey-900};
|
||||
--color-bg-even: #{$grey-800};
|
||||
--color-bg-menu: #{$grey-800};
|
||||
--color-fg-secondary: #{$nice-grey};
|
||||
--color-fg-on-popup: #{$nice-grey};
|
||||
--color-fg-disabled: #{$dark-mode-white};
|
||||
--color-bg-popup: #{$grey-800};
|
||||
--color-bg-warn: #cf6679;
|
||||
--color-fg-warn: #{$dark-mode-black};
|
||||
--color-border: #{$dark-mode-white};
|
||||
--color-border-selected: #{$grey-500};
|
||||
--color-fg-tertiary: #{$grey-500};
|
||||
--color-toolbar-background: #{$grey-800};
|
||||
--color-inspector-background: #{$grey-800};
|
||||
--color-inspector-tabs: #{$nice-grey};
|
||||
--color-bg-selected: #{$default-accent-color-dark};
|
||||
--color-bg-tabs: #{$grey-700};
|
||||
--color-default-border: #{$default-border-dark};
|
||||
--color-progressbar-seed-1: #{$green-100};
|
||||
--color-progressbar-seed-2: #{$green-400};
|
||||
|
|
@ -119,23 +113,16 @@ $image-play-circle-idle: '../img/play-circle-idle.svg';
|
|||
--color-fg-port-open: #{$green-100};
|
||||
--color-bg-hover: #{$grey-40};
|
||||
--color-fg-primary: #{$white};
|
||||
--color-bg-primary: #{$black};
|
||||
--color-bg-primary-hover: #{$black};
|
||||
--color-bg-odd: #{$black};
|
||||
--color-bg-even: #{$black};
|
||||
--color-bg-menu: #{$black};
|
||||
--color-fg-secondary: #{$white};
|
||||
--color-fg-on-popup: #{$white};
|
||||
--color-fg-disabled: #{$white};
|
||||
--color-bg-popup: #{$black};
|
||||
--color-bg-warn: #cf6679;
|
||||
--color-fg-warn: #{$black};
|
||||
--color-border: #{$white};
|
||||
--color-border-selected: #{$white};
|
||||
--color-fg-tertiary: #{$white};
|
||||
--color-toolbar-background: #{$black};
|
||||
--color-inspector-background: #{$black};
|
||||
--color-inspector-tabs: #{$white};
|
||||
--color-bg-selected: #{$blue-300};
|
||||
--color-bg-tabs: #{$black};
|
||||
--color-fg-tabs: #{$white};
|
||||
|
|
@ -152,7 +139,9 @@ $image-play-circle-idle: '../img/play-circle-idle.svg';
|
|||
}
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
--progress: 100%;
|
||||
--color-bg-odd: #{$white};
|
||||
--color-bg-primary: #{$white};
|
||||
--color-bg-popup: #{$white};
|
||||
--color-fg-error: #{$red-500};
|
||||
--color-fg-port-closed: #{$red-500};
|
||||
--color-fg-port-open: #{$green-400};
|
||||
|
|
@ -163,12 +152,7 @@ $image-play-circle-idle: '../img/play-circle-idle.svg';
|
|||
--color-progressbar-queued: #{$blue-400};
|
||||
--color-bg-hover: #{$nice-grey};
|
||||
--color-fg-primary: #404040;
|
||||
--color-bg-primary: #{$white};
|
||||
--color-bg-even: #{$white};
|
||||
--color-bg-odd: #{$nice-grey};
|
||||
--color-bg-menu: #{$nice-grey};
|
||||
--color-fg-on-popup: #{$grey-900};
|
||||
--color-bg-popup: #{$white};
|
||||
--color-fg-secondary: #{$grey-500};
|
||||
--color-border: #{$grey-500};
|
||||
--color-border-selected: #d0d7de;
|
||||
|
|
@ -176,10 +160,6 @@ $image-play-circle-idle: '../img/play-circle-idle.svg';
|
|||
--color-bg-warn: #e4606d5b;
|
||||
--color-fg-warn: #cf212e;
|
||||
--color-fg-disabled: #{$grey-500};
|
||||
--color-toolbar-background: #{$nice-grey};
|
||||
--color-inspector-background: #{$white};
|
||||
--color-bg-tabs: #{$nice-grey-darker};
|
||||
--color-inspector-tabs: #{$nice-grey};
|
||||
--color-bg-selected: #{$blue-300};
|
||||
--color-default-border: #{$default-border-light};
|
||||
--color-dialog-border: #{$nice-grey};
|
||||
|
|
@ -193,23 +173,16 @@ $image-play-circle-idle: '../img/play-circle-idle.svg';
|
|||
--color-fg-port-open: #{$green-400};
|
||||
--color-bg-hover: #{$grey-40};
|
||||
--color-fg-primary: #{$black};
|
||||
--color-bg-primary: #{$white};
|
||||
--color-bg-primary-hover: #{$white};
|
||||
--color-bg-odd: #{$white};
|
||||
--color-bg-even: #{$white};
|
||||
--color-bg-menu: #{$white};
|
||||
--color-fg-secondary: #{$black};
|
||||
--color-fg-on-popup: #{$black};
|
||||
--color-fg-disabled: #{$black};
|
||||
--color-bg-popup: #{$white};
|
||||
--color-bg-warn: #cf6679;
|
||||
--color-fg-warn: #{$white};
|
||||
--color-border: #{$black};
|
||||
--color-border-selected: #{$black};
|
||||
--color-fg-tertiary: #{$black};
|
||||
--color-toolbar-background: #{$white};
|
||||
--color-inspector-background: #{$white};
|
||||
--color-inspector-tabs: #{$black};
|
||||
--color-bg-selected: #{$blue-300};
|
||||
--color-bg-tabs: #{$white};
|
||||
--color-fg-tabs: #{$black};
|
||||
|
|
@ -227,8 +200,20 @@ $image-play-circle-idle: '../img/play-circle-idle.svg';
|
|||
}
|
||||
}
|
||||
|
||||
/* If browser can support using 'system color' keywords (i.e. way to inherit browser colors), use these variables instead */
|
||||
@supports (background-color: Canvas) {
|
||||
:root {
|
||||
.contrast-less {
|
||||
--color-bg-odd: Canvas;
|
||||
--color-bg-primary: Canvas;
|
||||
--color-bg-popup: Canvas;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
background-color: var(--color-bg-primary);
|
||||
color: var(--color-fg-primary);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
|
||||
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
|
|
@ -250,14 +235,6 @@ a {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.even {
|
||||
background-color: var(--color-bg-even);
|
||||
}
|
||||
|
||||
.odd {
|
||||
background-color: var(--color-bg-odd);
|
||||
}
|
||||
|
||||
.mainwin {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -479,6 +456,14 @@ $video-image: '../img/film.svg';
|
|||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
.torrent:nth-child(even) {
|
||||
background-color: var(--color-bg-even);
|
||||
}
|
||||
|
||||
.torrent:nth-child(odd) {
|
||||
background-color: var(--color-bg-odd);
|
||||
}
|
||||
|
||||
.torrent {
|
||||
border-bottom: 1px solid var(--color-default-border);
|
||||
user-select: none;
|
||||
|
|
@ -545,6 +530,7 @@ $video-image: '../img/film.svg';
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding: 1px 0;
|
||||
|
||||
&.compact {
|
||||
flex: 1;
|
||||
|
|
@ -552,6 +538,13 @@ $video-image: '../img/film.svg';
|
|||
}
|
||||
}
|
||||
|
||||
.torrent-label {
|
||||
padding: 0 8px;
|
||||
margin: 0 2px;
|
||||
border-radius: 1em;
|
||||
border: 1px solid var(--color-default-border);
|
||||
}
|
||||
|
||||
.torrent-progress-details.error,
|
||||
.torrent-peer-details.error {
|
||||
color: var(--color-fg-error);
|
||||
|
|
@ -600,9 +593,9 @@ $video-image: '../img/film.svg';
|
|||
grid-column-gap: 12px;
|
||||
grid-template-areas:
|
||||
'icon name labels'
|
||||
'icon peers peers'
|
||||
'icon progress-text progress-text'
|
||||
'icon progressbar progressbar'
|
||||
'icon progress-text progress-text';
|
||||
'icon peers peers';
|
||||
grid-template-columns: $icon-size auto 1fr;
|
||||
padding: 6px 12px;
|
||||
|
||||
|
|
@ -796,7 +789,7 @@ $video-image: '../img/film.svg';
|
|||
}
|
||||
|
||||
#prefs-dialog {
|
||||
$background-color: var(--color-inspector-background);
|
||||
$background-color: var(--color-bg-primary);
|
||||
background: $background-color;
|
||||
bottom: 0;
|
||||
box-shadow:
|
||||
|
|
@ -946,7 +939,7 @@ $video-image: '../img/film.svg';
|
|||
|
||||
.tabs-container {
|
||||
align-items: stretch;
|
||||
background: var(--color-inspector-background);
|
||||
background: var(--color-bg-primary);
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -1003,7 +996,7 @@ $video-image: '../img/film.svg';
|
|||
}
|
||||
|
||||
.tabs-button {
|
||||
background-color: var(--color-bg-tabs);
|
||||
background: none;
|
||||
border: 1px solid transparent;
|
||||
font-size: 14px;
|
||||
padding: 3px 8px;
|
||||
|
|
@ -1011,9 +1004,9 @@ $video-image: '../img/film.svg';
|
|||
&:active,
|
||||
&:checked,
|
||||
&.selected {
|
||||
background-color: var(--color-bg-even);
|
||||
background-color: var(--color-bg-odd);
|
||||
border: 1px solid var(--color-fg-primary);
|
||||
border-radius: 6px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1087,6 +1080,14 @@ $video-image: '../img/film.svg';
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.inspector-torrent-file-list-entry:nth-child(even) {
|
||||
background-color: var(--color-bg-even);
|
||||
}
|
||||
|
||||
.inspector-torrent-file-list-entry:nth-child(odd) {
|
||||
background-color: var(--color-bg-odd);
|
||||
}
|
||||
|
||||
.inspector-torrent-file-list-entry {
|
||||
display: grid;
|
||||
grid-column-gap: 5px;
|
||||
|
|
@ -1155,6 +1156,14 @@ $video-image: '../img/film.svg';
|
|||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.tier-list-row:nth-child(even) {
|
||||
background-color: var(--color-bg-even);
|
||||
}
|
||||
|
||||
.tier-list-row:nth-child(odd) {
|
||||
background-color: var(--color-bg-odd);
|
||||
}
|
||||
|
||||
.tier-list-torrent {
|
||||
color: var(--color-fg-primary);
|
||||
font-weight: bolder;
|
||||
|
|
@ -1279,10 +1288,6 @@ $video-image: '../img/film.svg';
|
|||
/// FILE PRIORITY BUTTONS
|
||||
|
||||
.file-priority-radiobox {
|
||||
$size-number: 20;
|
||||
$size: $size-number * 1px;
|
||||
$halfsize: math.floor(math.div($size-number, 2)) * 1px;
|
||||
|
||||
grid-area: priority;
|
||||
|
||||
> * {
|
||||
|
|
@ -1290,12 +1295,13 @@ $video-image: '../img/film.svg';
|
|||
background-color: var(--color-border-selected);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: $halfsize, $size;
|
||||
background-size: 10px, 20px;
|
||||
border: 1px solid var(--color-border);
|
||||
height: $size;
|
||||
border-radius: 0;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: $size;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
> .low {
|
||||
|
|
|
|||
|
|
@ -96,12 +96,9 @@ export class FileRow extends EventTarget {
|
|||
this.dispatchEvent(e);
|
||||
}
|
||||
|
||||
createRow(torrent, depth, name, even) {
|
||||
createRow(torrent, depth, name) {
|
||||
const root = document.createElement('li');
|
||||
root.classList.add(
|
||||
'inspector-torrent-file-list-entry',
|
||||
even ? 'even' : 'odd',
|
||||
);
|
||||
root.classList.add('inspector-torrent-file-list-entry');
|
||||
|
||||
this.elements.root = root;
|
||||
|
||||
|
|
@ -175,7 +172,7 @@ export class FileRow extends EventTarget {
|
|||
return this.elements.root;
|
||||
}
|
||||
|
||||
constructor(torrent, depth, name, indices, even) {
|
||||
constructor(torrent, depth, name, indices) {
|
||||
super();
|
||||
|
||||
this.fields = {
|
||||
|
|
@ -195,6 +192,6 @@ export class FileRow extends EventTarget {
|
|||
progress: null,
|
||||
root: null,
|
||||
};
|
||||
this.createRow(torrent, depth, name, even);
|
||||
this.createRow(torrent, depth, name);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -753,13 +753,13 @@ export class Inspector extends EventTarget {
|
|||
rows.push(title);
|
||||
}
|
||||
|
||||
for (const [index, tracker] of tor.getTrackers().entries()) {
|
||||
for (const tracker of tor.getTrackers()) {
|
||||
const announceState = Inspector.getAnnounceState(tracker);
|
||||
const lastAnnounceStatusHash = Inspector.lastAnnounceStatus(tracker);
|
||||
const lastScrapeStatusHash = Inspector.lastScrapeStatus(tracker);
|
||||
|
||||
const tier_div = document.createElement('div');
|
||||
tier_div.classList.add('tier-list-row', index % 2 ? 'odd' : 'even');
|
||||
tier_div.classList.add('tier-list-row');
|
||||
|
||||
let element = document.createElement('div');
|
||||
const site = Inspector._getOrigin(tracker);
|
||||
|
|
@ -913,14 +913,8 @@ export class Inspector extends EventTarget {
|
|||
return tree;
|
||||
}
|
||||
|
||||
addNodeToView(tor, parent, sub, index) {
|
||||
const row = new FileRow(
|
||||
tor,
|
||||
sub.depth,
|
||||
sub.name,
|
||||
sub.file_indices,
|
||||
index % 2,
|
||||
);
|
||||
addNodeToView(tor, parent, sub) {
|
||||
const row = new FileRow(tor, sub.depth, sub.name, sub.file_indices);
|
||||
row.addEventListener('wantedToggled', this._onFileWantedToggled.bind(this));
|
||||
row.addEventListener(
|
||||
'priorityToggled',
|
||||
|
|
@ -930,16 +924,15 @@ export class Inspector extends EventTarget {
|
|||
parent.append(row.getElement());
|
||||
}
|
||||
|
||||
addSubtreeToView(tor, parent, sub, index) {
|
||||
addSubtreeToView(tor, parent, sub) {
|
||||
if (sub.parent) {
|
||||
this.addNodeToView(tor, parent, sub, index++);
|
||||
this.addNodeToView(tor, parent, sub);
|
||||
}
|
||||
if (sub.children) {
|
||||
for (const value of Object.values(sub.children)) {
|
||||
index = this.addSubtreeToView(tor, parent, value, index);
|
||||
this.addSubtreeToView(tor, parent, value);
|
||||
}
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
_updateFiles() {
|
||||
|
|
@ -962,7 +955,7 @@ export class Inspector extends EventTarget {
|
|||
this.file_rows = [];
|
||||
const fragment = document.createDocumentFragment();
|
||||
const tree = Inspector.createFileTreeModel(tor);
|
||||
this.addSubtreeToView(tor, fragment, tree, 0);
|
||||
this.addSubtreeToView(tor, fragment, tree);
|
||||
list.append(fragment);
|
||||
} else {
|
||||
// ...refresh the already-existing file list
|
||||
|
|
|
|||
|
|
@ -18,11 +18,15 @@ const TorrentRendererHelper = {
|
|||
}
|
||||
return `ETA: ${Formatter.timeInterval(eta)}`;
|
||||
},
|
||||
formatLabels: (t) => {
|
||||
if (t.getLabels().length > 0) {
|
||||
return `🏷 ${t.getLabels().join(', ')}`;
|
||||
formatLabels: (t, label) => {
|
||||
const labels = t.getLabels();
|
||||
label.innerHTML = '';
|
||||
for (const label_ of labels) {
|
||||
const s = document.createElement('span');
|
||||
s.classList.add('torrent-label');
|
||||
s.textContent = label_;
|
||||
label.append(s);
|
||||
}
|
||||
return '';
|
||||
},
|
||||
formatUL: (t) => {
|
||||
return `▲ ${Formatter.speedBps(t.getUploadSpeed())}`;
|
||||
|
|
@ -222,8 +226,11 @@ export class TorrentRendererFull {
|
|||
e.classList.toggle('paused', is_stopped);
|
||||
|
||||
// labels
|
||||
e = root._labels_container;
|
||||
setTextContent(e, TorrentRendererHelper.formatLabels(t));
|
||||
TorrentRendererHelper.formatLabels(t, root._labels_container);
|
||||
|
||||
// progress details
|
||||
e = root._progress_details_container;
|
||||
setTextContent(e, TorrentRendererFull.getProgressDetails(controller, t));
|
||||
|
||||
// progressbar
|
||||
TorrentRendererHelper.renderProgressbar(controller, t, root._progressbar);
|
||||
|
|
@ -235,10 +242,6 @@ export class TorrentRendererFull {
|
|||
e.classList.toggle('error', has_error);
|
||||
setTextContent(e, TorrentRendererFull.getPeerDetails(t));
|
||||
|
||||
// progress details
|
||||
e = root._progress_details_container;
|
||||
setTextContent(e, TorrentRendererFull.getProgressDetails(controller, t));
|
||||
|
||||
// pause/resume button
|
||||
e = root._toggle_running_button;
|
||||
e.alt = is_stopped ? 'Resume' : 'Pause';
|
||||
|
|
@ -260,38 +263,34 @@ export class TorrentRendererFull {
|
|||
|
||||
const name = document.createElement('div');
|
||||
name.className = 'torrent-name';
|
||||
|
||||
const labels = document.createElement('div');
|
||||
labels.className = 'torrent-labels';
|
||||
|
||||
const peers = document.createElement('div');
|
||||
peers.className = 'torrent-peer-details';
|
||||
|
||||
const details = document.createElement('div');
|
||||
details.className = 'torrent-progress-details';
|
||||
const progress = document.createElement('div');
|
||||
progress.classList.add('torrent-progress');
|
||||
const progressbar = document.createElement('div');
|
||||
progressbar.classList.add('torrent-progress-bar', 'full');
|
||||
progress.append(progressbar);
|
||||
const peers = document.createElement('div');
|
||||
peers.className = 'torrent-peer-details';
|
||||
const button = document.createElement('a');
|
||||
button.className = 'torrent-pauseresume-button';
|
||||
progress.append(button);
|
||||
|
||||
const details = document.createElement('div');
|
||||
details.className = 'torrent-progress-details';
|
||||
|
||||
root.append(icon);
|
||||
root.append(name);
|
||||
root.append(labels);
|
||||
root.append(peers);
|
||||
root.append(progress);
|
||||
root.append(details);
|
||||
root.append(progress);
|
||||
root.append(peers);
|
||||
|
||||
root._icon = icon;
|
||||
root._name_container = name;
|
||||
root._labels_container = labels;
|
||||
root._peer_details_container = peers;
|
||||
root._progress_details_container = details;
|
||||
root._progressbar = progressbar;
|
||||
root._peer_details_container = peers;
|
||||
root._toggle_running_button = button;
|
||||
|
||||
return root;
|
||||
|
|
@ -339,18 +338,17 @@ export class TorrentRendererCompact {
|
|||
setTextContent(e, t.getName());
|
||||
|
||||
// labels
|
||||
e = root._labels_container;
|
||||
setTextContent(e, TorrentRendererHelper.formatLabels(t));
|
||||
TorrentRendererHelper.formatLabels(t, root._labels_container);
|
||||
|
||||
// progressbar
|
||||
TorrentRendererHelper.renderProgressbar(controller, t, root._progressbar);
|
||||
root._progressbar.classList.add('compact');
|
||||
|
||||
// peer details
|
||||
const has_error = t.getError() !== Torrent._ErrNone;
|
||||
e = root._details_container;
|
||||
e.classList.toggle('error', has_error);
|
||||
setTextContent(e, TorrentRendererCompact.getPeerDetails(t));
|
||||
|
||||
// progressbar
|
||||
TorrentRendererHelper.renderProgressbar(controller, t, root._progressbar);
|
||||
root._progressbar.classList.add('compact');
|
||||
}
|
||||
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
|
|
|
|||
Loading…
Reference in New Issue