finished writing scss declarations with SASS synthax. Now the repo is a bit lighter

This commit is contained in:
Roberto Tonino 2020-06-22 21:07:51 +02:00
parent 85e0525a1b
commit 657f02c7d5
21 changed files with 678 additions and 699 deletions

File diff suppressed because one or more lines are too long

View File

@ -1139,7 +1139,7 @@ <h3 class="settings-group__header settings-group__header--with-icon">
<div class="settings-group">
<h3 class="settings-group__header settings-group__header--with-icon">
<svg id="spotify-icon" enable-background="new 0 0 24 24" viewBox="0 0 24 24"
<svg id="spotify_icon" enable-background="new 0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
d="m12 24c6.624 0 12-5.376 12-12s-5.376-12-12-12-12 5.376-12 12 5.376 12 12 12zm4.872-6.344v.001c-.807 0-3.356-2.828-10.52-1.36-.189.049-.436.126-.576.126-.915 0-1.09-1.369-.106-1.578 3.963-.875 8.013-.798 11.467 1.268.824.526.474 1.543-.265 1.543zm1.303-3.173c-.113-.03-.08.069-.597-.203-3.025-1.79-7.533-2.512-11.545-1.423-.232.063-.358.126-.576.126-1.071 0-1.355-1.611-.188-1.94 4.716-1.325 9.775-.552 13.297 1.543.392.232.547.533.547.953-.005.522-.411.944-.938.944zm-13.627-7.485c4.523-1.324 11.368-.906 15.624 1.578 1.091.629.662 2.22-.498 2.22l-.001-.001c-.252 0-.407-.063-.625-.189-3.443-2.056-9.604-2.549-13.59-1.436-.175.048-.393.125-.625.125-.639 0-1.127-.499-1.127-1.142 0-.657.407-1.029.842-1.155z" />
@ -1308,7 +1308,7 @@ <h1>{{ title }}</h1>
<header
:style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\''+image+'\')' }">
<h1 class="inline-flex">{{ title }} <i v-if="explicit"
class="material-icons explicit_tracklist">explicit</i></h1>
class="material-icons explicit_icon explicit_icon--right">explicit</i></h1>
<h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="right"
v-if="release_date">{{ release_date }}</span></h2>
</header>

View File

@ -8,6 +8,7 @@
/* Center section */
$icon-dimension: 2rem;
$searchbar-height: calc(2rem + 1em);
#search {
background-color: var(--secondary-background);
@ -23,20 +24,12 @@ $icon-dimension: 2rem;
.search__icon {
width: $icon-dimension;
height: $icon-dimension;
// cursor: pointer;
i {
font-size: $icon-dimension;
transition: color 250ms ease-in-out;
color: var(--foreground);
@include removeSelectionBackground;
}
&:hover {
i {
// color: var(--accent-color);
}
@include remove-selection-background;
}
}
@ -44,8 +37,6 @@ $icon-dimension: 2rem;
border: 1px solid var(--foreground);
}
$searchbar-height: calc(2rem + 1em);
#searchbar {
height: $searchbar-height;
padding-left: 0.5em;
@ -74,11 +65,12 @@ $icon-dimension: 2rem;
#content {
background-color: var(--main-background);
width: calc(100% - 10px);
// width: calc(100% - 10px);
width: 100%;
height: calc(100% - 93px);
overflow-y: scroll;
overflow-x: hidden;
padding-left: 10px;
// padding-left: 10px;
&::-webkit-scrollbar {
width: 10px;
@ -96,60 +88,62 @@ $icon-dimension: 2rem;
}
}
#container {
--container-width: 95%;
@media only screen and (min-width: $small) {
--container-width: 85%;
}
@media only screen and (min-width: $medium) {
--container-width: 70%;
}
}
#container {
margin: 0 auto;
max-width: 1280px;
width: 90%;
width: var(--container-width);
}
/* The Modal (background) */
.smallmodal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1250; /* Sit on top */
display: none;
position: fixed;
z-index: 1250;
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
animation-duration: 0.3s;
}
/* Modal Content */
.smallmodal-content {
background-color: none;
--modal-content-width: 95%;
@media only screen and (min-width: $small) {
--modal-content-width: 85%;
}
@media only screen and (min-width: $medium) {
--modal-content-width: 70%;
}
}
.smallmodal-content {
background-color: transparent;
margin: auto;
width: 30%;
align-items: center;
width: var(--modal-content-width);
position: relative;
top: 50%;
transform: translateY(-50%);
& button {
button {
width: 100%;
margin-bottom: 8px;
}
}
@media only screen and (min-width: 601px) {
#container,
.smallmodal-content {
width: 85%;
}
}
@media only screen and (min-width: 993px) {
#container,
.smallmodal-content {
width: 70%;
}
}
@media only screen and (max-width: 600px) {
#container,
.smallmodal-content {
width: 100%;
}
}

View File

@ -48,102 +48,3 @@
}
}
}
@-webkit-keyframes indeterminate {
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
@keyframes indeterminate {
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
@-webkit-keyframes indeterminate-short {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}
@keyframes indeterminate-short {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}
.toast-icon {
display: inline-block;
margin-right: 8px;
}
.circle-loader {
display: inline-block;
border: 2px solid var(--accent-color);
border-radius: 50%;
border-bottom: 2px solid var(--secondary-background);
width: 16px;
height: 16px;
-webkit-animation: spin 1s linear infinite; /* Safari */
animation: spin 1s linear infinite;
}
.toastify .circle-loader {
border-bottom-color: var(--toast-secondary);
}
/* Safari */
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

View File

@ -58,7 +58,7 @@ $sidebar-delay: 75ms;
cursor: default;
}
@include removeSelectionBackground;
@include remove-selection-background;
}
&:hover {

View File

@ -0,0 +1,26 @@
.toast-icon {
display: inline-block;
margin-right: 8px;
}
.circle-loader {
display: inline-block;
border: 2px solid var(--accent-color);
border-radius: 50%;
border-bottom: 2px solid var(--secondary-background);
width: 16px;
height: 16px;
animation: spin 1s linear infinite;
}
.toastify {
display: flex;
align-items: center;
box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(0, 0, 0, 0.3);
background: var(--toast-background);
color: var(--toast-text);
.circle-loader {
border-bottom-color: var(--toast-secondary);
}
}

View File

@ -16,9 +16,3 @@
.preview_playlist_controls {
cursor: pointer;
}
a.single-cover {
position: relative;
display: inline-block;
color: white;
}

View File

@ -40,23 +40,43 @@
}
}
/* ====== */
@keyframes spin {
from {
0% {
transform: rotate(0deg);
}
to {
100% {
transform: rotate(360deg);
}
}
// You can find a better name, I have no ideas
@keyframes grayscalize {
from {
filter: grayscale(0);
@keyframes indeterminate {
0% {
left: -35%;
right: 100%;
}
to {
filter: grayscale(1);
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
@keyframes indeterminate-short {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}

View File

@ -1,6 +1,4 @@
html {
height: 100vh;
--main-scroll: hsl(0, 0%, 33%);
--panels-scroll: hsl(180, 2%, 17%);
--tag-background: hsl(210, 100%, 38%);
@ -9,8 +7,6 @@ html {
--toast-secondary: hsla(0, 0%, 100%, 0.133);
--toast-text: hsla(0, 0%, 100%, 0.871);
--separator: hsl(0, 0%, 50%);
--explicit-separator: 0.3125em;
}
html[data-theme='light'] {
@ -67,6 +63,10 @@ html[data-theme='purple'] {
--table-highlight: hsl(257, 66%, 27%);
}
html {
height: 100vh;
}
body {
margin: 0px;
width: 100%;

View File

@ -0,0 +1,17 @@
// https://css-tricks.com/using-custom-property-stacks-to-tame-the-cascade/
@function vars($stack...) {
$output: null;
$close: '';
$length: length($stack);
@each $var in $stack {
@if (str-index('#{$var}', '--') == 1) {
$var: 'var(#{$var}';
$close: '#{$close})';
}
$output: if($output, '#{$output}, #{$var}', $var);
}
@return unquote($output + $close);
}

View File

@ -1,4 +1,4 @@
@mixin removeSelectionBackground {
@mixin remove-selection-background {
&::selection {
background: none;
}

View File

@ -1 +1,7 @@
// Breakpoints (@todo change them in more proper values)
$small: 601px;
$medium: 993px;
// Static variables (not an oxymoron)
$sidebar-width: 48px;
$explicit-separator: 0.3125em;

View File

@ -32,18 +32,18 @@ input[type='checkbox'] {
margin: 3px;
display: inline-block;
position: relative;
}
input[type='checkbox']:checked {
opacity: 1;
background-color: var(--accent-color);
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='3 3 18 18' width='18'%3E%3Cpath fill='%23ffffff' d='M 10,17 5,12 6.41,10.59 10,14.17 17.59,6.58 19,8 Z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
background-position: center center;
border: 0px solid var(--accent-color);
border-radius: 2px;
padding: 9px;
margin: 3px;
color: var(--accent-text);
&:checked {
opacity: 1;
background-color: var(--accent-color);
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='3 3 18 18' width='18'%3E%3Cpath fill='%23ffffff' d='M 10,17 5,12 6.41,10.59 10,14.17 17.59,6.58 19,8 Z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
background-position: center center;
border: 0px solid var(--accent-color);
border-radius: 2px;
padding: 9px;
margin: 3px;
color: var(--accent-text);
}
}
select {
@ -85,6 +85,31 @@ button {
cursor: pointer;
transition: transform 50ms ease-in-out, background-color 200ms ease;
&[disabled] {
background-color: var(--secondary-background);
color: var(--foreground);
opacity: 0.75;
}
&.selective {
background-color: var(--main-background);
color: var(--foreground);
&.active {
background-color: var(--accent-color);
color: var(--accent-text);
}
}
&.with_icon {
display: flex;
align-items: center;
i {
margin-left: 8px;
}
}
&:active {
background-color: var(--accent-color);
transform: scale(0.95);
@ -96,139 +121,62 @@ button {
}
}
#main_content {
margin-left: $sidebar-width;
width: calc(100% - $sidebar-width);
height: 100%;
display: flex;
img {
&.rounded {
border-radius: 5px;
}
&.circle {
border-radius: 50%;
}
}
img.rounded {
border-radius: 5px;
i {
&.disabled {
opacity: 0.5;
cursor: default;
}
&.explicit_icon {
color: hsl(3, 100%, 59%);
margin-right: $explicit-separator;
&.explicit_icon--right {
margin-left: $explicit-separator;
margin-right: 0px;
}
}
}
img.circle {
border-radius: 50%;
span {
&.tag {
background-color: var(--tag-background);
border-radius: 2px;
color: var(--tag-text);
display: inline-block;
font-size: 10px;
padding: 3px 6px;
}
}
.coverart {
background-color: var(--secondary-background);
}
.cover_container {
position: relative;
}
.cover_container .coverart {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: 0.5s ease;
backface-visibility: hidden;
}
.cover_container .download_overlay {
transition: 0.5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.cover_container .download_overlay i {
background-color: #000000;
color: white;
border-radius: 50%;
padding: 10px;
cursor: pointer;
}
.cover_container:hover .coverart {
opacity: 0.75;
}
.cover_container:hover .download_overlay {
opacity: 1;
}
i.disabled {
opacity: 0.5;
cursor: default;
}
i.explicit_icon {
color: #ff3b30;
margin-right: var(--explicit-separator);
}
span.tag {
background-color: var(--tag-background);
border-radius: 2px;
color: var(--tag-text);
display: inline-block;
font-size: 10px;
padding: 3px 6px;
}
a,
a:visited {
a {
color: dodgerblue;
&.single-cover {
position: relative;
display: inline-block;
color: white;
}
&:visited {
color: dodgerblue;
}
}
.clickable {
cursor: pointer !important;
}
.toastify {
display: flex;
align-items: center;
box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(0, 0, 0, 0.3);
background: var(--toast-background);
color: var(--toast-text);
}
.inline-flex {
display: flex;
align-items: center;
}
.inline-flex .right {
margin-left: auto;
}
button[disabled] {
background-color: var(--secondary-background);
color: var(--foreground);
opacity: 0.75;
}
button.selective {
background-color: var(--main-background);
color: var(--foreground);
}
button.selective.active {
background-color: var(--accent-color);
color: var(--accent-text);
}
button.with_icon {
display: flex;
align-items: center;
}
button.with_icon i {
margin-left: 8px;
}
.right {
float: right;
}
.fixed_footer footer {
position: sticky;
display: flex;
@ -242,10 +190,6 @@ button.with_icon i {
margin-top: 24px;
}
.tab {
margin: 16px 0px;
}
.fab {
width: 56px;
height: 56px;
@ -254,33 +198,27 @@ button.with_icon i {
background-color: var(--accent-color);
color: var(--accent-text);
cursor: pointer;
}
.fab i {
font-size: 24px;
padding: 16px;
i {
font-size: 24px;
padding: 16px;
}
}
.with_checkbox {
display: flex;
align-items: center;
}
.with_checkbox [type='checkbox'] {
cursor: pointer;
}
[type='checkbox'] {
cursor: pointer;
}
.with_checkbox .checkbox_text {
margin-left: 10px;
cursor: pointer;
}
.checkbox_text {
margin-left: 10px;
cursor: pointer;
.with_checkbox .checkbox_text::selection {
background: none;
}
.hide {
display: none !important;
@include remove-selection-background;
}
}
.loading_placeholder {
@ -313,3 +251,74 @@ button.with_icon i {
z-index: 1000;
}
}
.coverart {
background-color: var(--secondary-background);
}
.cover_container {
position: relative;
.coverart {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: 0.5s ease;
backface-visibility: hidden;
}
.download_overlay {
transition: 0.5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
i {
background-color: #000000;
color: white;
border-radius: 50%;
padding: 10px;
cursor: pointer;
}
}
&:hover {
.coverart {
opacity: 0.75;
}
.download_overlay {
opacity: 1;
}
}
}
#main_content {
margin-left: $sidebar-width;
width: calc(100% - $sidebar-width);
height: 100%;
display: flex;
}
// @todo Remove
.inline-flex {
display: flex;
align-items: center;
.right {
margin-left: auto;
}
}
// @todo Remove
.right {
float: right;
}
.hide {
display: none !important;
}

View File

@ -1,10 +1,11 @@
$vertical-separator: 7px;
$table-border-radius: 3px;
.table {
width: 100%;
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
--vertical-separator: 7px;
tbody {
tr:not(.table__row-no-highlight):hover {
background: var(--table-highlight);
@ -55,14 +56,14 @@
}
td {
padding: var(--vertical-separator) 10px;
padding: $vertical-separator 10px;
&:first-child {
padding: var(--vertical-separator) 10px var(--vertical-separator) 20px;
padding: $vertical-separator 10px $vertical-separator 20px;
}
&:last-child {
padding: var(--vertical-separator) 20px var(--vertical-separator) 10px;
padding: $vertical-separator 20px $vertical-separator 10px;
}
img {
@ -70,6 +71,85 @@
}
}
/* === Tracks Table === */
&--tracks {
border-collapse: collapse;
thead {
border-bottom: 2px solid var(--table-highlight);
}
th {
padding-bottom: 10px;
height: 45px;
}
td {
height: 35px;
&.breakline {
word-break: break-word;
}
}
tr {
&:first-child {
td {
&:first-child {
border-top-left-radius: $table-border-radius;
}
&:last-child {
border-top-right-radius: $table-border-radius;
}
}
}
&:last-child {
td {
&:first-child {
border-bottom-left-radius: $table-border-radius;
}
&:last-child {
border-bottom-right-radius: $table-border-radius;
}
}
}
}
}
/* === Tracklist Table === */
&--tracklist {
thead {
border-bottom: 2px solid var(--table-highlight);
}
th {
height: 45px;
padding: $vertical-separator 10px;
&:first-child {
padding: $vertical-separator 10px $vertical-separator 20px;
}
&:last-child {
padding: $vertical-separator 20px $vertical-separator 10px;
}
}
td {
height: 35px;
}
}
/* === Charts Table === */
&--charts {
td {
height: 35px;
}
}
.table__icon {
box-sizing: content-box;
width: 32px;
@ -134,95 +214,21 @@
}
}
.track_row > td > img {
width: 32px;
height: 32px;
}
.track_row > td > a > img {
width: 56px;
height: 56px;
.track_row {
> td > img {
width: 32px;
height: 32px;
}
> td > a > img {
width: 56px;
height: 56px;
}
}
// @todo Remove
.top-tracks-position {
padding: 12px;
text-align: center;
cursor: default;
}
/* === Tracks Table === */
.table--tracks {
border-collapse: collapse;
--radius: 3px;
}
.table--tracks thead {
border-bottom: 2px solid var(--table-highlight);
}
.table--tracks th {
padding-bottom: 10px;
height: 45px;
}
.table--tracks td {
height: 35px;
}
.table--tracks td.breakline {
word-break: break-word;
}
.table--tracks tr:first-child td:first-child {
border-top-left-radius: var(--radius);
}
.table--tracks tr:first-child td:last-child {
border-top-right-radius: var(--radius);
}
.table--tracks tr:last-child td:first-child {
border-bottom-left-radius: var(--radius);
}
.table--tracks tr:last-child td:last-child {
border-bottom-right-radius: var(--radius);
}
/* === Tracklist Table === */
/* .table--tracklist {} */
.table--tracklist thead {
border-bottom: 2px solid var(--table-highlight);
}
.table--tracklist th {
height: 45px;
padding: var(--vertical-separator) 10px;
}
.table--tracklist th:first-child {
padding: var(--vertical-separator) 10px var(--vertical-separator) 20px;
}
.table--tracklist th:last-child {
padding: var(--vertical-separator) 20px var(--vertical-separator) 10px;
}
.table--tracklist td {
height: 35px;
}
.explicit_tracklist {
margin-left: var(--explicit-separator);
}
/* === Charts Table === */
/* .table--charts {} */
.table--charts td {
height: 35px;
}

View File

@ -24,3 +24,4 @@
@import './sidebar';
@import './stackedTabs';
@import './track-preview';
@import './toasts';

View File

@ -1,4 +1,8 @@
.charts_grid .release .coverart {
width: 156px;
height: 156px;
.charts_grid {
.release {
.coverart {
width: 156px;
height: 156px;
}
}
}

View File

@ -1,23 +1,64 @@
#download_tab_container {
/* width: 300px; */
height: 100%;
background-color: var(--panels-background);
color: var(--panels-text);
display: block;
flex-direction: column;
&.tab_hidden {
width: 32px;
#toggle_download_tab {
margin-left: 4px;
&::before {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
content: 'chevron_left';
}
}
#download_tab_drag_handler {
display: none;
}
#queue_buttons {
opacity: 0;
visibility: hidden;
}
#download_list {
display: none;
}
#download_tab_label {
opacity: 1;
visibility: visible;
}
&::after {
content: 'downloads';
display: flex;
align-items: center;
text-transform: capitalize;
writing-mode: vertical-rl;
line-height: 32px;
}
}
}
#toggle_download_tab {
width: 25px;
height: 25px;
margin-left: 20px;
}
#toggle_download_tab::before {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
content: 'chevron_right';
&::before {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
content: 'chevron_right';
}
}
.download_bar_icon {
@ -31,167 +72,127 @@
height: calc(100% - 32px);
padding: 0px 8px 0px 28px;
overflow-y: scroll;
> .download_object {
padding-bottom: 8px;
.download_info {
display: flex;
align-items: center;
img {
width: 75px;
height: 75px;
display: inline-block;
flex-shrink: 0;
}
.download_line {
display: block;
}
.download_slim_separator {
display: none;
}
}
.download_info_data {
width: 100%;
margin-left: 8px;
}
.download_info_status {
margin-left: 8px;
width: 80px;
}
}
&.slim {
> .download_object {
.download_info {
display: block;
img {
display: none;
}
.download_line {
display: inline-block;
}
.download_slim_separator {
display: inline-block;
}
}
.download_info_data {
width: calc(80% - 16px);
display: inline-block;
padding-left: 0px;
}
.download_info_status {
width: 20%;
display: inline-block; // ignored due tu float
float: right;
}
}
}
&::-webkit-scrollbar {
width: 10px;
}
&::-webkit-scrollbar-track {
background: var(--panels-background);
}
&::-webkit-scrollbar-thumb {
background: var(--panels-scroll);
border-radius: 4px;
width: 6px;
padding: 0px 2px;
}
}
#download_list::-webkit-scrollbar {
width: 10px;
.download_object {
> .download_bar {
display: flex;
align-items: center;
height: 24px;
> .queue_icon {
cursor: default;
margin-left: 8px;
}
> .progress {
margin: 0px;
}
}
}
#download_list::-webkit-scrollbar-track {
background: var(--panels-background);
}
#download_tab_container {
#queue_buttons {
position: absolute;
top: 0;
right: 0;
opacity: 1;
visibility: visible;
transition: all 250ms ease-in-out;
}
#download_list::-webkit-scrollbar-thumb {
background: var(--panels-scroll);
border-radius: 4px;
width: 6px;
padding: 0px 2px;
}
#download_list > .download_object {
padding-bottom: 8px;
}
#download_list > .download_object .download_info {
display: flex;
align-items: center;
}
#download_list > .download_object .download_info img {
width: 75px;
height: 75px;
display: inline-block;
flex-shrink: 0;
}
#download_list > .download_object .download_info .download_line {
display: block;
}
#download_list > .download_object .download_info .download_slim_separator {
display: none;
}
#download_list > .download_object .download_info_data {
width: 100%;
margin-left: 8px;
}
#download_list > .download_object .download_info_status {
margin-left: 8px;
width: 80px;
}
#download_list.slim > .download_object .download_info img {
display: none;
}
#download_list.slim > .download_object .download_info .download_line {
display: inline-block;
}
#download_list.slim > .download_object .download_info .download_slim_separator {
display: inline-block;
}
#download_list.slim > .download_object .download_info_data {
width: calc(80% - 16px);
display: inline-block;
padding-left: 0px;
}
#download_list.slim > .download_object .download_info_status {
width: 20%;
display: inline-block;
float: right;
}
#download_list.slim > .download_object .download_info {
display: block;
}
.download_object > .download_bar > .queue_icon {
cursor: default;
margin-left: 8px;
}
.download_object > .download_bar {
display: flex;
align-items: center;
height: 24px;
}
.download_object > .download_bar > .progress {
margin: 0px;
}
#download_tab_container #queue_buttons {
position: absolute;
top: 0;
right: 0;
opacity: 1;
visibility: visible;
transition: all 250ms ease-in-out;
}
#download_tab_container #download_list {
/* width: 300px; */
}
#download_tab_container #download_tab_label {
opacity: 0;
visibility: hidden;
transition: all 250ms ease-in-out;
#download_tab_label {
opacity: 0;
visibility: hidden;
transition: all 250ms ease-in-out;
}
}
#download_tab_drag_handler {
width: 15px;
height: 100%;
position: absolute;
background-color: #333;
background-color: hsl(0, 0%, 20%);
cursor: ew-resize;
}
/* ===== Hidden tab styles ===== */
#download_tab_container.tab_hidden {
width: 32px;
}
#download_tab_container.tab_hidden #toggle_download_tab {
margin-left: 4px;
}
#download_tab_container.tab_hidden #download_tab_drag_handler {
display: none;
}
#download_tab_container.tab_hidden #toggle_download_tab::before {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
content: 'chevron_left';
}
#download_tab_container.tab_hidden::after {
content: 'downloads';
display: flex;
align-items: center;
text-transform: capitalize;
writing-mode: vertical-rl;
line-height: 32px;
}
#download_tab_container.tab_hidden #queue_buttons {
opacity: 0;
visibility: hidden;
}
#download_tab_container.tab_hidden #download_list {
display: none;
}
#download_tab_container.tab_hidden #download_tab_label {
/* display: inline; */
opacity: 1;
visibility: visible;
}

View File

@ -1,7 +1,3 @@
.favorites_tablinks.active {
color: var(--accent-text);
}
.reload-button {
&.reload-button--inline {
display: inline-block;

View File

@ -1,11 +1,20 @@
#main_search .search_section {
float: none;
padding-top: 20px;
padding-bottom: 20px;
}
#main_search {
.search_section {
float: none;
padding-top: 20px;
padding-bottom: 20px;
#main_search .search_section:not(:first-child) {
border-top: 1px solid var(--separator);
&:not(:first-child) {
border-top: 1px solid var(--separator);
}
}
.top_result_header {
display: block;
cursor: default;
font-size: 2rem;
text-align: center;
}
}
.search_header {
@ -13,94 +22,83 @@
cursor: pointer;
font-size: 1.75rem;
margin-bottom: 25px;
}
.search_header:not(.top_result_header) {
transition: color 200ms ease-in-out;
}
&:not(.top_result_header) {
transition: color 200ms ease-in-out;
.search_header:not(.top_result_header):hover {
color: var(--accent-color);
}
/* Tab links */
.search_tablinks.active {
color: var(--foreground-inverted);
&:hover {
color: var(--accent-color);
}
}
}
/* Top Result */
#main_search .top_result_header {
display: block;
cursor: default;
font-size: 2rem;
text-align: center;
}
.top_result {
display: flex;
align-items: center;
flex-direction: column;
}
.top_result > .cover_container {
width: 156px;
height: 156px;
}
> .cover_container {
width: 156px;
height: 156px;
}
.top_result .info_box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 15px;
}
.info_box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 15px;
.top_result .info_box .primary-text,
.top_result .info_box .secondary-text {
font-size: 18px;
text-align: center;
}
.primary-text,
.secondary-text {
font-size: 18px;
text-align: center;
}
.top_result .info_box .primary-text {
margin-bottom: 5px;
}
.primary-text {
margin-bottom: 5px;
}
.top_result .info_box .secondary-text {
margin-bottom: 10px;
}
.secondary-text {
margin-bottom: 10px;
}
.top_result .info_box .tag {
width: 40px;
text-align: center;
.tag {
width: 40px;
text-align: center;
}
}
}
/* Releases */
.release .primary-text,
.release .secondary-text {
margin: 0px;
margin-bottom: 4px;
}
.release {
.primary-text,
.secondary-text {
margin: 0px;
margin-bottom: 4px;
}
.release .secondary-text {
opacity: 0.75;
font-size: 14px;
}
.secondary-text {
opacity: 0.75;
font-size: 14px;
.release .secondary-text .material-icons {
font-size: 17px !important;
margin-left: 4px;
.material-icons {
font-size: 17px !important;
margin-left: 4px;
}
}
}
.release_grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
grid-gap: 1rem;
}
.release_grid.firstrow_only {
grid-template-rows: 1fr;
grid-auto-rows: 0;
grid-row-gap: 0px;
overflow-y: hidden;
&.firstrow_only {
grid-template-rows: 1fr;
grid-auto-rows: 0;
grid-row-gap: 0px;
overflow-y: hidden;
}
}

View File

@ -30,13 +30,13 @@
width: 48px;
margin: 0px 0px 0px 8px;
padding: 0px 4px;
i {
padding: 6px 0px;
}
}
#settings_btn_copyArl i {
padding: 6px 0px;
}
#spotify-icon {
#spotify_icon {
width: 24px;
height: 24px;
fill: #1db954;
@ -51,61 +51,61 @@
border-top: 1px solid var(--separator); /* Need less opacity */
padding-top: 20px;
padding-bottom: 20px;
}
.settings-group > * {
margin-bottom: 15px;
> * {
margin-bottom: 15px;
}
}
/* Settings group header */
.settings-group__header {
font-size: 1.5rem;
margin-bottom: 25px;
}
.settings-group__header--with-icon {
display: inline-flex;
align-items: center;
}
&.settings-group__header--with-icon {
display: inline-flex;
align-items: center;
.settings-group__header--with-icon i.material-icons {
margin-right: 15px;
i.material-icons {
margin-right: 15px;
}
}
}
/* Settings container */
.settings-container {
display: flex;
}
.settings-container__half > *,
.settings-container__third > * {
margin-bottom: 15px;
}
&__half {
width: 50%;
}
.settings-container__half {
width: 50%;
}
&__third {
width: 33%;
.settings-container__third {
width: 33%;
}
&--only-checkbox {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
}
}
.settings-container__third--only-checkbox {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
&__half > *,
&__third > * {
margin-bottom: 15px;
}
}
/* Input group */
.input_group {
margin-bottom: 25px;
}
.input_group .input_group_text {
margin-bottom: 7px;
}
.input_group_text {
margin-bottom: 7px;
}
.with_checkbox + .input_group {
margin-top: 10px;
.with_checkbox + & {
margin-top: 10px;
}
}

View File

@ -4,28 +4,34 @@
display: none;
}
.main_tabcontent h1 {
margin-bottom: 12px;
.main_tabcontent {
h1 {
margin-bottom: 12px;
}
}
.tab button {
background-color: var(--main-background);
color: var(--foreground);
}
.tab {
margin: 16px 0px;
.tab button.active {
background-color: var(--accent-color);
button {
background-color: var(--main-background);
color: var(--foreground);
&.active {
background-color: var(--accent-color);
}
}
}
.release {
display: inline-block;
width: 156px;
}
.release .cover_container {
width: 156px;
height: 156px;
margin-bottom: 10px;
.cover_container {
width: 156px;
height: 156px;
margin-bottom: 10px;
}
}
.section-tabs {