style: removed some classes and ids; style: added typography.css; style: added vendor folder; wip: BaseAccordion component
This commit is contained in:
Roberto Tonino
parent
b8fbdcc9b3
commit
81f8ed0899
File diff suppressed because one or more lines are too long
@ -5,12 +5,13 @@ window.vol = {
|
||||
preview_max_volume: 100
|
||||
}
|
||||
|
||||
import '@/styles/css/material-icons.css'
|
||||
import '@/styles/css/OpenSans.css'
|
||||
import '@/styles/vendor/material-icons.css'
|
||||
import '@/styles/vendor/OpenSans.css'
|
||||
|
||||
import '@/styles/scss/style.scss'
|
||||
import '@/styles/css/components.css'
|
||||
import '@/styles/css/helpers.css'
|
||||
import '@/styles/css/typography.css'
|
||||
|
||||
import App from '@/App.vue'
|
||||
import i18n from '@/plugins/i18n'
|
||||
|
||||
@ -100,7 +100,6 @@ input[type='search']::-webkit-search-cancel-button {
|
||||
<script>
|
||||
import { isValidURL } from '@/utils/utils'
|
||||
import { sendAddToQueue } from '@/utils/downloads'
|
||||
import EventBus from '@/utils/EventBus'
|
||||
import { socket } from '@/utils/socket'
|
||||
|
||||
export default {
|
||||
@ -159,7 +158,6 @@ export default {
|
||||
this.$root.$emit('QualityModal:open', term)
|
||||
} else {
|
||||
if (isShowingAnalyzer) {
|
||||
// EventBus.$emit('linkAnalyzerTab:reset')
|
||||
socket.emit('analyzeLink', term)
|
||||
} else {
|
||||
// ? Open downloads tab ?
|
||||
|
||||
33
src/components/globals/BaseAccordion.vue
Normal file
33
src/components/globals/BaseAccordion.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template functional>
|
||||
<details :class="{ 'with-arrow': props.withArrow }">
|
||||
<summary class="mb-6 cursor-pointer">
|
||||
<slot name="title">Setting</slot>
|
||||
</summary>
|
||||
|
||||
<slot name="default">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos distinctio sint culpa, recusandae vel fugit esse hic
|
||||
tenetur autem. Debitis.
|
||||
</slot>
|
||||
</details>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
details > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
details.with-arrow > summary::-webkit-details-marker {
|
||||
display: initial;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
withArrow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="relative cover_container group">
|
||||
<div class="relative cover-container group">
|
||||
<img
|
||||
aria-hidden="true"
|
||||
class="block w-full opacity-100 coverart"
|
||||
:class="{ rounded: isRounded, circle: isCircle }"
|
||||
:class="{ rounded: isRounded, 'rounded-full': isCircle }"
|
||||
:src="cover"
|
||||
/>
|
||||
|
||||
@ -21,7 +21,11 @@
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cover_container {
|
||||
.cover-container {
|
||||
width: 156px;
|
||||
height: 156px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.coverart {
|
||||
backface-visibility: hidden;
|
||||
transition: 0.5s ease;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<h1 class="mb-8 text-5xl">{{ $t('charts.title') }}</h1>
|
||||
|
||||
<div v-if="country === ''">
|
||||
<div class="release_grid charts_grid">
|
||||
<div class="release-grid">
|
||||
<div
|
||||
v-for="release in countries"
|
||||
role="button"
|
||||
@ -31,16 +31,14 @@
|
||||
{{ track.position }}
|
||||
</td>
|
||||
<td class="table__icon table__icon--big">
|
||||
<a
|
||||
href="#"
|
||||
<span
|
||||
@click="playPausePreview"
|
||||
class="rounded"
|
||||
:class="{ 'single-cover': track.preview }"
|
||||
class="relative inline-block rounded cursor-pointer"
|
||||
:data-preview="track.preview"
|
||||
>
|
||||
<PreviewControls v-if="track.preview" />
|
||||
<img class="rounded coverart" :src="track.album.cover_small" />
|
||||
</a>
|
||||
</span>
|
||||
</td>
|
||||
<td class="table__cell--large">
|
||||
{{
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
<div v-if="playlists.length == 0">
|
||||
<h1>{{ $t('favorites.noPlaylists') }}</h1>
|
||||
</div>
|
||||
<div class="release_grid" v-if="playlists.length > 0 || spotifyPlaylists > 0">
|
||||
<div class="release-grid" v-if="playlists.length > 0 || spotifyPlaylists > 0">
|
||||
<div class="release" v-for="release in playlists" :key="release.id">
|
||||
<router-link tag="div" class="cursor-pointer" :to="{ name: 'Playlist', params: { id: release.id } }">
|
||||
<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
|
||||
@ -72,7 +72,7 @@
|
||||
<div v-if="albums.length == 0">
|
||||
<h1>{{ $t('favorites.noAlbums') }}</h1>
|
||||
</div>
|
||||
<div class="release_grid" v-if="albums.length > 0">
|
||||
<div class="release-grid" v-if="albums.length > 0">
|
||||
<router-link
|
||||
tag="div"
|
||||
class="release clickable"
|
||||
@ -91,7 +91,7 @@
|
||||
<div v-if="artists.length == 0">
|
||||
<h1>{{ $t('favorites.noArtists') }}</h1>
|
||||
</div>
|
||||
<div class="release_grid" v-if="artists.length > 0">
|
||||
<div class="release-grid" v-if="artists.length > 0">
|
||||
<router-link
|
||||
tag="div"
|
||||
class="release clickable"
|
||||
@ -115,17 +115,14 @@
|
||||
{{ track.position }}
|
||||
</td>
|
||||
<td>
|
||||
<a
|
||||
href="#"
|
||||
class="rounded"
|
||||
:class="{ 'single-cover': !!track.preview }"
|
||||
<span
|
||||
class="relative inline-block rounded cursor-pointer"
|
||||
@click="playPausePreview"
|
||||
:data-preview="track.preview"
|
||||
>
|
||||
<PreviewControls v-if="track.preview" />
|
||||
|
||||
<img class="rounded coverart" :src="track.album.cover_small" />
|
||||
</a>
|
||||
</span>
|
||||
</td>
|
||||
<td class="table__cell--large">
|
||||
{{
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
|
||||
<section v-if="playlists.length" class="py-6 border-0 border-t border-solid border-grayscale-500">
|
||||
<h2 class="mb-6 text-3xl">{{ $t('home.sections.popularPlaylists') }}</h2>
|
||||
<div class="release_grid">
|
||||
<div class="release-grid">
|
||||
<router-link
|
||||
tag="div"
|
||||
v-for="release in playlists"
|
||||
@ -37,7 +37,7 @@
|
||||
|
||||
<section v-if="albums.length" class="py-6 border-0 border-t border-solid border-grayscale-500">
|
||||
<h2 class="mb-6 text-3xl">{{ $t('home.sections.popularAlbums') }}</h2>
|
||||
<div class="release_grid">
|
||||
<div class="release-grid">
|
||||
<router-link
|
||||
tag="div"
|
||||
v-for="release in albums"
|
||||
|
||||
@ -1,15 +1,21 @@
|
||||
<template>
|
||||
<div id="settings_tab" class="fixed-footer" ref="root">
|
||||
<div class="fixed-footer" ref="root">
|
||||
<h1 class="mb-8 text-5xl">{{ $t('settings.title') }}</h1>
|
||||
|
||||
<div id="logged_in_info" v-if="isLoggedIn" ref="loggedInInfo">
|
||||
<img id="settings_picture" :src="pictureHref" alt="Profile Picture" ref="userpicture" class="circle" />
|
||||
<img
|
||||
id="settings_picture"
|
||||
class="w-32 h-32 rounded-full"
|
||||
:src="pictureHref"
|
||||
alt="Profile Picture"
|
||||
ref="userpicture"
|
||||
/>
|
||||
|
||||
<i18n path="settings.login.loggedIn" tag="p">
|
||||
<strong place="username" id="settings_username" ref="username">{{ user.name || 'not logged' }}</strong>
|
||||
</i18n>
|
||||
|
||||
<button class="btn btn-primary" id="settings_btn_logout" @click="logout">
|
||||
<button class="btn btn-primary" @click="logout">
|
||||
{{ $t('settings.login.logout') }}
|
||||
</button>
|
||||
|
||||
@ -18,10 +24,26 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- <BaseAccordion>
|
||||
<template v-slot:title>
|
||||
<h3 class="inline-flex items-center text-2xl">
|
||||
<i class="mr-4 material-icons">web</i>
|
||||
{{ $t('settings.appearance.title') }}
|
||||
</h3>
|
||||
</template>
|
||||
|
||||
<label class="with-checkbox">
|
||||
<input type="checkbox" v-model="changeSlimDownloads" />
|
||||
<span class="checkbox_text">{{ $t('settings.appearance.slimDownloadTab') }}</span>
|
||||
</label>
|
||||
<label class="with-checkbox">
|
||||
<input type="checkbox" v-model="changeSlimSidebar" />
|
||||
<span class="checkbox_text">{{ $t('settings.appearance.slimSidebar') }}</span>
|
||||
</label>
|
||||
</BaseAccordion> -->
|
||||
|
||||
<div class="settings-group">
|
||||
<h3 class="settings-group__header settings-group__header--with-icon">
|
||||
<i class="material-icons">person</i>{{ $t('settings.login.title') }}
|
||||
</h3>
|
||||
<h3 class="settings-group__header"><i class="material-icons">person</i>{{ $t('settings.login.title') }}</h3>
|
||||
<div class="flex items-center">
|
||||
<input
|
||||
autocomplete="off"
|
||||
@ -31,7 +53,7 @@
|
||||
ref="loginInput"
|
||||
placeholder="ARL"
|
||||
/>
|
||||
<button id="settings_btn_copyArl" class="ml-2 btn btn-primary btn-only-icon" @click="copyARLtoClipboard">
|
||||
<button class="ml-2 btn btn-primary btn-only-icon" @click="copyARLtoClipboard">
|
||||
<i class="material-icons">assignment</i>
|
||||
</button>
|
||||
</div>
|
||||
@ -40,18 +62,16 @@
|
||||
{{ $t('settings.login.arl.question') }}
|
||||
</RouterLink>
|
||||
|
||||
<a id="settings_btn_applogin" v-if="clientMode" href="#" @click="appLogin">
|
||||
<a v-if="clientMode" href="#" @click="appLogin">
|
||||
{{ $t('settings.login.login') }}
|
||||
</a>
|
||||
<button class="btn btn-primary" id="settings_btn_updateArl" @click="login" style="width: 100%">
|
||||
<button class="btn btn-primary" @click="login" style="width: 100%">
|
||||
{{ $t('settings.login.arl.update') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<h3 class="settings-group__header settings-group__header--with-icon">
|
||||
<i class="material-icons">language</i>{{ $t('settings.languages') }}
|
||||
</h3>
|
||||
<h3 class="settings-group__header"><i class="material-icons">language</i>{{ $t('settings.languages') }}</h3>
|
||||
<div>
|
||||
<span
|
||||
v-for="locale in locales"
|
||||
@ -67,9 +87,7 @@
|
||||
</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<h3 class="settings-group__header settings-group__header--with-icon">
|
||||
<i class="material-icons">web</i>{{ $t('settings.appearance.title') }}
|
||||
</h3>
|
||||
<h3 class="settings-group__header"><i class="material-icons">web</i>{{ $t('settings.appearance.title') }}</h3>
|
||||
<label class="with-checkbox">
|
||||
<input type="checkbox" v-model="changeSlimDownloads" />
|
||||
<span class="checkbox_text">{{ $t('settings.appearance.slimDownloadTab') }}</span>
|
||||
@ -81,24 +99,19 @@
|
||||
</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<h3 class="settings-group__header settings-group__header--with-icon">
|
||||
<h3 class="settings-group__header">
|
||||
<i class="material-icons">folder</i>{{ $t('settings.downloadPath.title') }}
|
||||
</h3>
|
||||
<div class="flex items-center">
|
||||
<input autocomplete="off" type="text" v-model="settings.downloadLocation" />
|
||||
<button
|
||||
id="select_downloads_folder"
|
||||
v-if="clientMode"
|
||||
class="ml-2 btn btn-primary btn-only-icon"
|
||||
@click="selectDownloadFolder"
|
||||
>
|
||||
<button v-if="clientMode" class="ml-2 btn btn-primary btn-only-icon" @click="selectDownloadFolder">
|
||||
<i class="material-icons">folder</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<h3 class="settings-group__header settings-group__header--with-icon">
|
||||
<h3 class="settings-group__header">
|
||||
<i class="material-icons">font_download</i>{{ $t('settings.templates.title') }}
|
||||
</h3>
|
||||
|
||||
@ -113,7 +126,7 @@
|
||||
</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<h3 class="settings-group__header settings-group__header--with-icon">
|
||||
<h3 class="settings-group__header">
|
||||
<i class="material-icons">create_new_folder</i>{{ $t('settings.folders.title') }}
|
||||
</h3>
|
||||
<div class="settings-container">
|
||||
@ -168,9 +181,7 @@
|
||||
</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<h3 class="settings-group__header settings-group__header--with-icon">
|
||||
<i class="material-icons">title</i>{{ $t('settings.trackTitles.title') }}
|
||||
</h3>
|
||||
<h3 class="settings-group__header"><i class="material-icons">title</i>{{ $t('settings.trackTitles.title') }}</h3>
|
||||
|
||||
<div class="settings-container">
|
||||
<div class="settings-container__third settings-container__third--only-checkbox">
|
||||
@ -195,9 +206,7 @@
|
||||
</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<h3 class="settings-group__header settings-group__header--with-icon">
|
||||
<i class="material-icons">get_app</i>{{ $t('settings.downloads.title') }}
|
||||
</h3>
|
||||
<h3 class="settings-group__header"><i class="material-icons">get_app</i>{{ $t('settings.downloads.title') }}</h3>
|
||||
|
||||
<div class="input_group">
|
||||
<p class="input_group_text">{{ $t('settings.downloads.queueConcurrency') }}</p>
|
||||
@ -272,9 +281,7 @@
|
||||
</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<h3 class="settings-group__header settings-group__header--with-icon">
|
||||
<i class="material-icons">album</i>{{ $t('settings.covers.title') }}
|
||||
</h3>
|
||||
<h3 class="settings-group__header"><i class="material-icons">album</i>{{ $t('settings.covers.title') }}</h3>
|
||||
|
||||
<label class="with-checkbox">
|
||||
<input type="checkbox" v-model="settings.saveArtwork" />
|
||||
@ -341,7 +348,7 @@
|
||||
</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<h3 class="settings-group__header settings-group__header--with-icon">
|
||||
<h3 class="settings-group__header">
|
||||
<i class="material-icons" style="width: 1em; height: 1em">bookmarks</i>{{ $t('settings.tags.head') }}
|
||||
</h3>
|
||||
|
||||
@ -455,9 +462,7 @@
|
||||
</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<h3 class="settings-group__header settings-group__header--with-icon">
|
||||
<i class="material-icons">list</i>{{ $t('settings.other.title') }}
|
||||
</h3>
|
||||
<h3 class="settings-group__header"><i class="material-icons">list</i>{{ $t('settings.other.title') }}</h3>
|
||||
|
||||
<label class="with-checkbox">
|
||||
<input type="checkbox" v-model="settings.tags.savePlaylistAsCompilation" />
|
||||
@ -599,8 +604,14 @@
|
||||
</div>
|
||||
|
||||
<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" xmlns="http://www.w3.org/2000/svg">
|
||||
<h3 class="settings-group__header">
|
||||
<svg
|
||||
class="w-6 h-6 mr-4"
|
||||
style="fill: #1db954"
|
||||
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"
|
||||
/>
|
||||
@ -675,7 +686,12 @@ import { toast } from '@/utils/toasts'
|
||||
import { socket } from '@/utils/socket'
|
||||
import { flags } from '@/utils/flags'
|
||||
|
||||
import BaseAccordion from '@/components/globals/BaseAccordion.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BaseAccordion
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
flags,
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<h1>{{ $t('search.noResultsAlbum') }}</h1>
|
||||
</div>
|
||||
|
||||
<div class="release_grid" v-else>
|
||||
<div class="release-grid" v-else>
|
||||
<div class="w-40 release" v-for="release in viewInfo.data.slice(0, itemsToShow)" :key="release.albumID">
|
||||
<router-link tag="div" class="cursor-pointer" :to="{ name: 'Album', params: { id: release.albumID } }">
|
||||
<CoverContainer
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<h1>{{ $t('search.noResultsArtist') }}</h1>
|
||||
</div>
|
||||
|
||||
<div v-else class="release_grid">
|
||||
<div v-else class="release-grid">
|
||||
<div class="w-40 release" v-for="release in viewInfo.data.slice(0, itemsToShow)" :key="release.artistID">
|
||||
<router-link tag="div" class="cursor-pointer" :to="{ name: 'Artist', params: { id: release.artistID } }">
|
||||
<CoverContainer
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div v-if="viewInfo.data.length === 0">
|
||||
<h1>{{ $t('search.noResultsPlaylist') }}</h1>
|
||||
</div>
|
||||
<div class="release_grid" v-else>
|
||||
<div class="release-grid" v-else>
|
||||
<div class="w-40 release" v-for="playlist in viewInfo.data.slice(0, itemsToShow)" :key="playlist.playlistID">
|
||||
<router-link tag="div" class="cursor-pointer" :to="{ name: 'Playlist', params: { id: playlist.playlistID } }">
|
||||
<CoverContainer
|
||||
|
||||
@ -23,17 +23,15 @@
|
||||
<tbody>
|
||||
<tr v-for="track in viewInfo.data.slice(0, itemsToShow)" :key="track.trackLink">
|
||||
<td class="table__icon table__icon--big">
|
||||
<a
|
||||
href="#"
|
||||
<span
|
||||
@click="playPausePreview($event)"
|
||||
class="rounded"
|
||||
:class="{ 'single-cover': !!track.trackPreview }"
|
||||
class="relative inline-block rounded cursor-pointer"
|
||||
:data-preview="track.trackPreview"
|
||||
>
|
||||
<PreviewControls v-if="track.trackPreview" />
|
||||
|
||||
<img class="rounded coverart" :src="track.albumPicture" />
|
||||
</a>
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td class="table__cell table__cell--large">
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import { socket } from '@/utils/socket'
|
||||
import EventBus from '@/utils/EventBus'
|
||||
|
||||
// Pages
|
||||
import About from '@components/pages/About.vue'
|
||||
@ -85,7 +84,7 @@ const routes = [
|
||||
component: About
|
||||
},
|
||||
{
|
||||
path: '/arl',
|
||||
path: '/info-arl',
|
||||
name: 'ARL',
|
||||
component: InfoArl
|
||||
},
|
||||
|
||||
11
src/styles/css/typography.css
Normal file
11
src/styles/css/typography.css
Normal file
@ -0,0 +1,11 @@
|
||||
.primary-text {
|
||||
@apply mb-1 transition-colors duration-200 ease-in-out;
|
||||
}
|
||||
|
||||
.primary-text:hover {
|
||||
@apply text-primary;
|
||||
}
|
||||
|
||||
.secondary-text {
|
||||
@apply mb-1 text-sm opacity-75;
|
||||
}
|
||||
@ -42,3 +42,17 @@
|
||||
--table-zebra: hsl(257, 61%, 10%);
|
||||
--table-highlight: hsl(257, 66%, 27%);
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: 'Open Sans', 'sans-serif';
|
||||
overflow: hidden;
|
||||
background: var(--main-background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
@ -57,6 +57,10 @@ button,
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
p {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
|
||||
@ -53,33 +53,9 @@ select {
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
p {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
img {
|
||||
&.rounded {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
&.circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.single-cover {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
a {
|
||||
color: dodgerblue;
|
||||
|
||||
// &:visited {
|
||||
// color: dodgerblue;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3,21 +3,6 @@
|
||||
@import '~tailwindcss/utilities';
|
||||
|
||||
@import './base/base';
|
||||
|
||||
html {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: 'Open Sans', 'sans-serif';
|
||||
overflow: hidden;
|
||||
background: var(--main-background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
@import './base/normalize';
|
||||
@import './base/animations';
|
||||
|
||||
|
||||
@ -1,17 +1,5 @@
|
||||
.release_grid {
|
||||
.release-grid {
|
||||
@apply gap-4 grid;
|
||||
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
}
|
||||
|
||||
.primary-text {
|
||||
@apply mb-1 transition-colors duration-200 ease-in-out;
|
||||
|
||||
&:hover {
|
||||
@apply text-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-text {
|
||||
@apply mb-1 text-sm opacity-75;
|
||||
}
|
||||
|
||||
@ -1,59 +1,23 @@
|
||||
#settings_picture {
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
}
|
||||
|
||||
#log_info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#open_login_prompt {
|
||||
margin: 8px 0px;
|
||||
}
|
||||
|
||||
.inline-flex input {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
#spotify_icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
fill: #1db954;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
/* Settings group */
|
||||
.settings-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@apply flex flex-col justify-center pt-5 pb-5;
|
||||
border-top: 1px solid theme('colors.grayscale.500'); /* Need less opacity */
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
> * {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Settings group header */
|
||||
.settings-group__header {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5625rem;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 25px;
|
||||
|
||||
&.settings-group__header--with-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
i.material-icons {
|
||||
margin-right: 15px;
|
||||
}
|
||||
i.material-icons {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Settings container */
|
||||
.settings-container {
|
||||
display: flex;
|
||||
|
||||
@ -67,8 +31,8 @@
|
||||
&--only-checkbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,10 +1,4 @@
|
||||
.release {
|
||||
display: inline-block;
|
||||
width: 156px;
|
||||
|
||||
.cover_container {
|
||||
width: 156px;
|
||||
height: 156px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user