Commit e2ddfc93 authored by SpinShare's avatar SpinShare

added small fixes

parent 495aa454
body {
background: #f1f1f1;
color: #000;
}
::-webkit-scrollbar {
background: rgba(0, 0, 0, 0.1);
width: 5px;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.4);
}
main aside {
background: #fff;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}
main aside nav .item {
color: #000;
}
main aside nav .item .indicator {
background: #e22c78;
color: #fff;
}
main aside nav .item > .mdi {
opacity: 0.4;
}
main aside nav .item-notifications .notification-box {
background: #fff;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
}
main aside nav .item-notifications .notification-box .notification-list {
background: #fff;
}
main aside nav .item-notifications .notification-box .notification-list .notification-item {
color: #000;
}
main aside nav .item-notifications .notification-box .notification-list .notification-item:hover {
background: rgba(0, 0, 0, 0.05);
}
main aside nav .item-notifications .notification-box:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
}
main aside nav .item-user .user-actions {
background: #fff;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
}
main aside nav .item-user .user-actions .user-action-item {
color: #000;
}
main aside nav .item-user .user-actions .user-action-item .mdi {
opacity: 0.4;
}
main aside nav .item-user .user-actions .user-action-item:hover {
background: rgba(0, 0, 0, 0.05);
}
main aside nav .item-user .user-actions:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
}
main aside .search input {
color: #000;
background: rgba(0, 0, 0, 0.03);
}
main aside .search input:hover {
background: rgba(0, 0, 0, 0.06);
color: #000;
}
main aside .search input:focus {
background: rgba(0, 0, 0, 0.06);
}
main aside .search input::placeholder {
color: rgba(0, 0, 0, 0.5);
}
button,
.button {
color: #000;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.1));
}
button:hover,
.button:hover {
opacity: 0.6;
}
button.button-label:hover,
.button.button-label:hover {
background: rgba(0, 0, 0, 0.15);
color: #000;
}
button.button-label:active,
.button.button-label:active {
background: rgba(0, 0, 0, 0.3);
color: #000;
}
input[type='range'] {
background-color: #ddd;
}
input[type='range']::-webkit-slider-runnable-track {
color: #13bba4;
}
input[type='range']::-webkit-slider-thumb {
background: #000;
box-shadow: -800px 0 0 800px #e22c78;
}
/** FF*/
input[type="range"]::-moz-range-progress {
background-color: #e22c78;
}
input[type="range"]::-moz-range-track {
background-color: #ddd;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
background-color: #e22c78;
}
.song-row .song-header .row-controls .item {
color: #000;
}
.song-row .song-header .row-controls .item.disabled {
opacity: 0.4;
}
.song-row .song-header .row-controls .item:not(.disabled):hover {
background: rgba(0, 0, 0, 0.125);
}
.song-row .song-list-noresults {
background: #ffffff;
opacity: 1;
}
.song-item {
background: #ffffff;
color: #000;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}
.song-item .song-cover .song-charter {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
color: #fff;
}
.song-item .song-metadata .song-artist {
opacity: 0.5;
}
.song-item .song-metadata .song-difficulties img {
opacity: 0.3;
}
.song-item .song-metadata .song-difficulties img.active {
opacity: 1;
}
.song-item:not(.inactive):hover {
box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4);
}
.song-item.inactive {
box-shadow: 0px 2px 10px 5px rgba(0, 0, 0, 0.2);
}
.user-item {
background: #383c3f;
color: #fff;
}
.user-item .user-avatar {
background: rgba(255, 255, 255, 0.1);
}
.user-item:not(.inactive):hover {
box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4);
}
.user-item.inactive {
box-shadow: 0px 2px 10px 5px rgba(0, 0, 0, 0.2);
}
body {
background: #f1f1f1;
color: #000;
}
::-webkit-scrollbar {
background: rgba(0,0,0,0.1);
width: 5px;
}
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.4);
}
main {
& aside {
background: #fff;
box-shadow: 0px 4px 12px rgba(0,0,0,0.1);
& nav {
& .item {
color :#000;
& .indicator {
background: rgb(226, 44, 120);
color: #fff;
}
& > .mdi {
opacity: 0.4;
}
}
& .item-notifications {
& .notification-box {
background: #fff;
box-shadow: 0px 4px 12px rgba(0,0,0,0.2);
& .notification-list {
background: #fff;
& .notification-item {
color: #000;
&:hover {
background: rgba(0,0,0,0.05);
}
}
}
&:after {
border-color: rgba(255,255,255, 0);
border-bottom-color: #fff;
}
}
}
& .item-user {
& .user-actions {
background: #fff;
box-shadow: 0px 4px 12px rgba(0,0,0,0.2);
& .user-action-item {
color: #000;
& .mdi {
opacity: 0.4;
}
&:hover {
background: rgba(0,0,0,0.05);
}
}
&:after {
border-color: rgba(255,255,255, 0);
border-bottom-color: #fff;
}
}
}
}
& .search {
input {
color: #000;
background: rgba(0,0,0,0.03);
&:hover {
background: rgba(0,0,0,0.06);
color: #000;
}
&:focus {
background: rgba(0,0,0,0.06);
}
&::placeholder {
color: rgba(0,0,0,0.5);
}
}
}
}
}
button, .button {
color: #000;
background: linear-gradient(135deg, rgba(0,0,0,0.025), rgba(0,0,0,0.1));
&:hover {
opacity: 0.6;
}
&.button-label {
&:hover {
background: rgba(0,0,0,0.15);
color: #000;
}
&:active {
background: rgba(0,0,0,0.3);
color: #000;
}
}
}
input[type='range'] {
background-color: #ddd;
}
input[type='range']::-webkit-slider-runnable-track {
color: #13bba4;
}
input[type='range']::-webkit-slider-thumb {
background: #000;
box-shadow: -800px 0 0 800px rgb(226, 44, 120);
}
/** FF*/
input[type="range"]::-moz-range-progress {
background-color: rgb(226, 44, 120);
}
input[type="range"]::-moz-range-track {
background-color: #ddd;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
background-color: rgb(226, 44, 120);
}
.song-row {
& .song-header {
& .row-controls {
& .item {
color: #000;
&.disabled {
opacity: 0.4;
}
&:not(.disabled):hover {
background: rgba(0,0,0,0.125);
}
}
}
}
& .song-list-noresults {
background: rgba(255,255,255,1);
opacity: 1;
}
}
& .song-item {
background: rgba(255,255,255,1);
color: #000;
box-shadow: 0px 2px 8px rgba(0,0,0,0.1);
& .song-cover {
& .song-charter {
background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.8));
color: #fff;
}
}
& .song-metadata {
& .song-artist {
opacity: 0.5;
}
& .song-difficulties {
& img {
opacity: 0.3;
&.active {
opacity: 1;
}
}
}
}
&:not(.inactive):hover {
box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4);
}
&.inactive {
box-shadow: 0px 2px 10px 5px rgba(0, 0, 0, 0.2);
}
}
.user-item {
background: #383c3f;
color: #fff;
& .user-avatar {
background: rgba(255,255,255,0.1);
}
&:not(.inactive):hover {
box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4);
}
&.inactive {
box-shadow: 0px 2px 10px 5px rgba(0, 0, 0, 0.2);
}
}
\ No newline at end of file
.section-startup .tabs a {
opacity: 0.4;
}
.section-startup .tabs a:hover {
background: rgba(0, 0, 0, 0.15);
}
.section-startup .tabs a.active {
opacity: 1;
}
.section-startup .tabs a.active:after {
background: linear-gradient(135deg, #fd2f85, #7a34ec);
}
.social-buttons .item:hover {
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
}
.section-startup {
& .tabs {
& a {
opacity: 0.4;
&:hover {
background: rgba(0,0,0,0.15);
}
&.active {
opacity: 1;
&:after {
background: linear-gradient(135deg, #fd2f85, #7a34ec);
}
}
}
}
}
.social-buttons {
& .item {
&:hover {
box-shadow: 0px 4px 16px rgba(0,0,0,0.2);
}
}
}
\ No newline at end of file
......@@ -21,7 +21,7 @@ body {
}
::-webkit-scrollbar {
background: #212529;
width: 5px;
width: 10px;
}
::-webkit-scrollbar-thumb {
background: #fff;
......@@ -490,8 +490,8 @@ input[type="range"]::-ms-fill-lower {
opacity: 1;
}
.song-item:not(.inactive):hover {
transform: scale(1.1);
cursor: pointer;
background: rgba(255, 255, 255, 0.2);
box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4);
}
.song-item:not(.inactive):hover .song-cover .song-charter {
......@@ -557,8 +557,8 @@ input[type="range"]::-ms-fill-lower {
margin-left: 10px;
}
.user-item:not(.inactive):hover {
transform: scale(1.1);
cursor: pointer;
background: rgba(255, 255, 255, 0.2);
box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4);
}
.user-item.inactive {
......
......@@ -19,7 +19,7 @@ body {
}
::-webkit-scrollbar {
background: #212529;
width: 5px;
width: 10px;
}
::-webkit-scrollbar-thumb {
background: #fff;
......@@ -525,8 +525,8 @@ input[type="range"]::-ms-fill-lower {
}
}
&:not(.inactive):hover {
transform: scale(1.1);
cursor: pointer;
background: rgba(255,255,255,0.2);
box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4);
& .song-cover {
......@@ -602,8 +602,8 @@ input[type="range"]::-ms-fill-lower {
}
&:not(.inactive):hover {
transform: scale(1.1);
cursor: pointer;
background: rgba(255,255,255,0.2);
box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4);
}
&.inactive {
......
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
<g>
<path d="M122.9,100L74.4,16c-4.6-8-16.2-8-20.8,0L5.1,100c-4.6,8,1.2,18,10.4,18h97C121.7,118,127.5,108,122.9,100z M77.6,59.2
H58.5v10h17.2v7.7H58.5v10h19.1v7.7H50.4v-43h27.2V59.2z"/>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
<g>
<path d="M120.9,43.1L71.1,6.8c-4.2-3.1-9.9-3.1-14.1,0L7.1,43.1c-4.2,3.1-6,8.5-4.4,13.4l19.1,58.7c1.6,4.9,6.2,8.3,11.4,8.3h61.7
c5.2,0,9.8-3.3,11.4-8.3l19.1-58.7C126.9,51.6,125.2,46.2,120.9,43.1z M56.9,56.5H37.8v10H55v7.7H37.8v10h19.1v7.7H29.7v-43h27.2
V56.5z M90.3,91.8l-9.4-15.5h-0.5l-9.4,15.5H61l14.1-22.4l-13-20.5h10l8.3,14h0.5l8.3-14h10l-13,20.5l14.1,22.4H90.3z"/>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
<g>
<path d="M120.9,43.1L71.1,6.8c-4.2-3.1-9.9-3.1-14.1,0L7.1,43.1c-4.2,3.1-6,8.5-4.4,13.4l19.1,58.7c1.6,4.9,6.2,8.3,11.4,8.3h61.7
c5.2,0,9.8-3.3,11.4-8.3l19.1-58.7C126.9,51.6,125.2,46.2,120.9,43.1z M81.1,92.5H73V74.4H55v18.1h-8.1v-43H55v17.2H73V49.5h8.1
V92.5z"/>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
<g>
<path d="M119.5,55.5l-47-47c-4.7-4.7-12.3-4.7-17,0l-47,47c-4.7,4.7-4.7,12.3,0,17l47,47c4.7,4.7,12.3,4.7,17,0l47-47
C124.2,67.8,124.2,60.2,119.5,55.5z M81.4,85.5h-8.5L54.6,55.1h-0.5l0.5,8.3v22.1h-8v-43h9.4l17.3,28.8h0.5L73.3,63V42.5h8V85.5z"
/>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
<g>
<g>
<path d="M113.4,28.4L70,3.3c-3.7-2.1-8.3-2.1-12,0L14.6,28.4c-3.7,2.1-6,6.1-6,10.4v50.1c0,4.3,2.3,8.3,6,10.4L58,124.3
c3.7,2.1,8.3,2.1,12,0l43.4-25.1c3.7-2.1,6-6.1,6-10.4V38.7C119.4,34.5,117.1,30.5,113.4,28.4z M52.7,85.3l-9.4-15.5h-0.5
l-9.4,15.5H23.4l14.1-22.4l-13-20.5h10l8.3,14h0.5l8.3-14h10l-13,20.5l14.1,22.4H52.7z M103.1,72.6c-1,2.6-2.5,4.9-4.4,6.8
c-1.9,1.9-4.2,3.3-7,4.4s-5.8,1.6-9.2,1.6H68v-43h14.5c3.4,0,6.5,0.5,9.2,1.6s5,2.5,7,4.4s3.4,4.2,4.4,6.8c1,2.6,1.5,5.5,1.5,8.7
C104.6,67,104.1,69.9,103.1,72.6z"/>
</g>
<g>
<path d="M92.9,53.8c-1.2-1.2-2.7-2.1-4.5-2.8s-3.9-1-6.2-1h-6.1v27.6h6.1c2.4,0,4.4-0.3,6.2-1s3.3-1.6,4.5-2.8s2.1-2.7,2.7-4.3
s0.9-3.6,0.9-5.7s-0.3-4-0.9-5.7S94.1,55,92.9,53.8z"/>
</g>
</g>
</svg>
......@@ -61,6 +61,11 @@
*/
private $userNotifications;
/**
* @ORM\Column(type="integer")
*/
private $theme;
public function __construct()
{
parent::__construct();
......@@ -251,4 +256,16 @@
return $this;
}
public function getTheme(): ?int
{
return $this->theme;
}
public function setTheme(int $theme): self
{
$this->theme = $theme;
return $this;
}
}
\ No newline at end of file
......@@ -17,6 +17,11 @@
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Oswald:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.0.45/css/materialdesignicons.min.css" />
<link rel="stylesheet" href="{{ asset('assets/css/main.css?v=' ~ date().timestamp) }}" />
{% if is_granted("ROLE_USER") %}
{% if app.user.theme == 1 %}
<link rel="stylesheet" href="{{ asset('assets/css-theme1/main.css?v=' ~ date().timestamp) }}" />
{% endif %}
{% endif %}
{% block styles %}{% endblock %}
</head>
<body>
......@@ -24,7 +29,15 @@
<aside>
<nav class="items-left">
<div class="logo">
<a href="{{ path('index.index') }}"><img src="{{ asset('assets/img/logo_colored_ondark.svg') }}" alt="SpinShare Logo" /></a>
{% if is_granted("ROLE_USER") %}
{% if app.user.theme == 1 %}
<a href="{{ path('index.index') }}"><img src="{{ asset('assets/img/logo_colored_onwhite.svg') }}" alt="SpinShare Logo" /></a>
{% else %}
<a href="{{ path('index.index') }}"><img src="{{ asset('assets/img/logo_colored_ondark.svg') }}" alt="SpinShare Logo" /></a>
{% endif %}
{% else %}
<a href="{{ path('index.index') }}"><img src="{{ asset('assets/img/logo_colored_ondark.svg') }}" alt="SpinShare Logo" /></a>
{% endif %}
</div>
<a class="item {% if app.request.attributes.get('_route') == 'index.index' %}active{% endif %}" href="{{ path('index.index') }}"><i class="mdi mdi-home-outline"></i></a>
<a class="item {% if app.request.attributes.get('_route') == 'index.client' %}active{% endif %}" href="{{ path('index.client') }}" title="Download Client"><i class="mdi mdi-desktop-tower-monitor"></i></a>
......
......@@ -17,4 +17,10 @@
{% block styles %}
<link rel="stylesheet" href="{{ asset('assets/css/startup.css?v=' ~ date().timestamp) }}" />
{% if is_granted("ROLE_USER") %}
{% if app.user.theme == 1 %}
<link rel="stylesheet" href="{{ asset('assets/css-theme1/startup.css?v=' ~ date().timestamp) }}" />
{% endif %}
{% endif %}
{% endblock %}
\ No newline at end of file
......@@ -25,11 +25,27 @@
<div class="song-title">{{ song.title|default('Untitles') }}</div>
<div class="song-artist">{{ song.artist|default('Unknown') }}</div>
<div class="song-difficulties">
<img src="{{ asset('assets/img/difficultyEasy.svg') }}" class="{{ song.hasEasyDifficulty ? "active" : "" }}" alt="Easy Difficulty" />
<img src="{{ asset('assets/img/difficultyNormal.svg') }}" class="{{ song.hasNormalDifficulty ? "active" : "" }}" alt="Normal Difficulty" />
<img src="{{ asset('assets/img/difficultyHard.svg') }}" class="{{ song.hasHardDifficulty ? "active" : "" }}" alt="Hard Difficulty" />
<img src="{{ asset('assets/img/difficultyExtreme.svg') }}" class="{{ song.hasExtremeDifficulty ? "active" : "" }}" alt="Extreme Difficulty" />
<img src="{{ asset('assets/img/difficultyXD.svg') }}" class="{{ song.hasXDDifficulty ? "active" : "" }}" alt="xD Difficulty" />
{% if is_granted("ROLE_USER") %}
{% if app.user.theme == 1 %}
<img src="{{ asset('assets/img/difficultyEasy_dark.svg') }}" class="{{ song.hasEasyDifficulty ? "active" : "" }}" alt="Easy Difficulty" />
<img src="{{ asset('assets/img/difficultyNormal_dark.svg') }}" class="{{ song.hasNormalDifficulty ? "active" : "" }}" alt="Normal Difficulty" />
<img src="{{ asset('assets/img/difficultyHard_dark.svg') }}" class="{{ song.hasHardDifficulty ? "active" : "" }}" alt="Hard Difficulty" />
<img src="{{ asset('assets/img/difficultyExtreme_dark.svg') }}" class="{{ song.hasExtremeDifficulty ? "active" : "" }}" alt="Extreme Difficulty" />
<img src="{{ asset('assets/img/difficultyXD_dark.svg') }}" class="{{ song.hasXDDifficulty ? "active" : "" }}" alt="xD Difficulty" />
{% else %}
<img src="{{ asset('assets/img/difficultyEasy.svg') }}" class="{{ song.hasEasyDifficulty ? "active" : "" }}" alt="Easy Difficulty" />
<img src="{{ asset('assets/img/difficultyNormal.svg') }}" class="{{ song.hasNormalDifficulty ? "active" : "" }}" alt="Normal Difficulty" />
<img src="{{ asset('assets/img/difficultyHard.svg') }}" class="{{ song.hasHardDifficulty ? "active" : "" }}" alt="Hard Difficulty" />
<img src="{{ asset('assets/img/difficultyExtreme.svg') }}" class="{{ song.hasExtremeDifficulty ? "active" : "" }}" alt="Extreme Difficulty" />
<img src="{{ asset('assets/img/difficultyXD.svg') }}" class="{{ song.hasXDDifficulty ? "active" : "" }}" alt="xD Difficulty" />
{% endif %}
{% else %}
<img src="{{ asset('assets/img/difficultyEasy.svg') }}" class="{{ song.hasEasyDifficulty ? "active" : "" }}" alt="Easy Difficulty" />
<img src="{{ asset('assets/img/difficultyNormal.svg') }}" class="{{ song.hasNormalDifficulty ? "active" : "" }}" alt="Normal Difficulty" />
<img src="{{ asset('assets/img/difficultyHard.svg') }}" class="{{ song.hasHardDifficulty ? "active" : "" }}" alt="Hard Difficulty" />
<img src="{{ asset('assets/img/difficultyExtreme.svg') }}" class="{{ song.hasExtremeDifficulty ? "active" : "" }}" alt="Extreme Difficulty" />
<img src="{{ asset('assets/img/difficultyXD.svg') }}" class="{{ song.hasXDDifficulty ? "active" : "" }}" alt="xD Difficulty" />
{% endif %}
</div>
</div>
</a>
......
......@@ -25,11 +25,27 @@
<div class="song-title">{{ song.title|default('Untitles') }}</div>
<div class="song-artist">{{ song.artist|default('Unknown') }}</div>
<div class="song-difficulties">
<img src="{{ asset('assets/img/difficultyEasy.svg') }}" class="{{ song.hasEasyDifficulty ? "active" : "" }}" alt="Easy Difficulty" />
<img src="{{ asset('assets/img/difficultyNormal.svg') }}" class="{{ song.hasNormalDifficulty ? "active" : "" }}" alt="Normal Difficulty" />
<img src="{{ asset('assets/img/difficultyHard.svg') }}" class="{{ song.hasHardDifficulty ? "active" : "" }}" alt="Hard Difficulty" />
<img src="{{ asset('assets/img/difficultyExtreme.svg') }}" class="{{ song.hasExtremeDifficulty ? "active" : "" }}" alt="Extreme Difficulty" />
<img src="{{ asset('assets/img/difficultyXD.svg') }}" class="{{ song.hasXDDifficulty ? "active" : "" }}" alt="xD Difficulty" />
{% if is_granted("ROLE_USER") %}
{% if app.user.theme == 1 %}
<img src="{{ asset('assets/img/difficultyEasy_dark.svg') }}" class="{{ song.hasEasyDifficulty ? "active" : "" }}" alt="Easy Difficulty" />
<img src="{{ asset('assets/img/difficultyNormal_dark.svg') }}" class="{{ song.hasNormalDifficulty ? "active" : "" }}" alt="Normal Difficulty" />
<img src="{{ asset('assets/img/difficultyHard_dark.svg') }}" class="{{ song.hasHardDifficulty ? "active" : "" }}" alt="Hard Difficulty" />
<img src="{{ asset('assets/img/difficultyExtreme_dark.svg') }}" class="{{ song.hasExtremeDifficulty ? "active" : "" }}" alt="Extreme Difficulty" />
<img src="{{ asset('assets/img/difficultyXD_dark.svg') }}" class="{{ song.hasXDDifficulty ? "active" : "" }}" alt="xD Difficulty" />
{% else %}
<img src="{{ asset('assets/img/difficultyEasy.svg') }}" class="{{ song.hasEasyDifficulty ? "active" : "" }}" alt="Easy Difficulty" />
<img src="{{ asset('assets/img/difficultyNormal.svg') }}" class="{{ song.hasNormalDifficulty ? "active" : "" }}" alt="Normal Difficulty" />
<img src="{{ asset('assets/img/difficultyHard.svg') }}" class="{{ song.hasHardDifficulty ? "active" : "" }}" alt="Hard Difficulty" />
<img src="{{ asset('assets/img/difficultyExtreme.svg') }}" class="{{ song.hasExtremeDifficulty ? "active" : "" }}" alt="Extreme Difficulty" />
<img src="{{ asset('assets/img/difficultyXD.svg') }}" class="{{ song.hasXDDifficulty ? "active" : "" }}" alt="xD Difficulty" />
{% endif %}
{% else %}
<img src="{{ asset('assets/img/difficultyEasy.svg') }}" class="{{ song.hasEasyDifficulty ? "active" : "" }}" alt="Easy Difficulty" />
<img src="{{ asset('assets/img/difficultyNormal.svg') }}" class="{{ song.hasNormalDifficulty ? "active" : "" }}" alt="Normal Difficulty" />
<img src="{{ asset('assets/img/difficultyHard.svg') }}" class="{{ song.hasHardDifficulty ? "active" : "" }}" alt="Hard Difficulty" />
<img src="{{ asset('assets/img/difficultyExtreme.svg') }}" class="{{ song.hasExtremeDifficulty ? "active" : "" }}" alt="Extreme Difficulty" />
<img src="{{ asset('assets/img/difficultyXD.svg') }}" class="{{ song.hasXDDifficulty ? "active" : "" }}" alt="xD Difficulty" />
{% endif %}
</div>
</div>
</a>
......
......@@ -25,11 +25,27 @@
<div class="song-title">{{ song.title|default('Untitles') }}</div>
<div class="song-artist">{{ song.artist|default('Unknown') }}</div>
<div class="song-difficulties">
<img src="{{ asset('assets/img/difficultyEasy.svg') }}" class="{{ song.hasEasyDifficulty ? "active" : "" }}" alt="Easy Difficulty" />
<img src="{{ asset('assets/img/difficultyNormal.svg') }}" class="{{ song.hasNormalDifficulty ? "active" : "" }}" alt="Normal Difficulty" />
<img src="{{ asset('assets/img/difficultyHard.svg') }}" class="{{ song.hasHardDifficulty ? "active" : "" }}" alt="Hard Difficulty" />
<img src="{{ asset('assets/img/difficultyExtreme.svg') }}" class="{{ song.hasExtremeDifficulty ? "active" : "" }}" alt="Extreme Difficulty" />
<img src="{{ asset('assets/img/difficultyXD.svg') }}" class="{{ song.hasXDDifficulty ? "active" : "" }}" alt="xD Difficulty" />
{% if is_granted("ROLE_USER") %}
{% if app.user.theme == 1 %}
<img src="{{ asset('assets/img/difficultyEasy_dark.svg') }}" class="{{ song.hasEasyDifficulty ? "active" : "" }}" alt="Easy Difficulty" />
<img src="{{ asset('assets/img/difficultyNormal_dark.svg') }}" class="{{ song.hasNormalDifficulty ? "active" : "" }}" alt="Normal Difficulty" />
<img src="{{ asset('assets/img/difficultyHard_dark.svg') }}" class="{{ song.hasHardDifficulty ? "active" : "" }}" alt="Hard Difficulty" />
<img src="{{ asset('assets/img/difficultyExtreme_dark.svg') }}" class="{{ song.hasExtremeDifficulty ? "active" : "" }}" alt="Extreme Difficulty" />
<img src="{{ asset('assets/img/difficultyXD_dark.svg') }}" class="{{ song.hasXDDifficulty ? "active" : "" }}" alt="xD Difficulty" />
{% else %}
<img src="{{ asset('assets/img/difficultyEasy.svg') }}" class="{{ song.hasEasyDifficulty ? "active" : "" }}" alt="Easy Difficulty" />
<img src="{{ asset('assets/img/difficultyNormal.svg') }}" class="{{ song.hasNormalDifficulty ? "active" : "" }}" alt="Normal Difficulty" />
<img src="{{ asset('assets/img/difficultyHard.svg') }}" class="{{ song.hasHardDifficulty ? "active" : "" }}" alt="Hard Difficulty" />
<img src="{{ asset('assets/img/difficultyExtreme.svg') }}" class="{{ song.hasExtremeDifficulty ? "active" : "" }}" alt="Extreme Difficulty" />
<img src="{{ asset('assets/img/difficultyXD.svg') }}" class="{{ song.hasXDDifficulty ? "active" : "" }}" alt="xD Difficulty" />
{% endif %}
{% else %}
<img src="{{ asset('assets/img/difficultyEasy.svg') }}" class="{{ song.hasEasyDifficulty ? "active" : "" }}" alt="Easy Difficulty" />
<img src="{{ asset('assets/img/difficultyNormal.svg') }}" class="{{ song.hasNormalDifficulty ? "active" : "" }}" alt="Normal Difficulty" />
<img src="{{ asset('assets/img/difficultyHard.svg') }}" class="{{ song.hasHardDifficulty ? "active" : "" }}" alt="Hard Difficulty" />
<img src="{{ asset('assets/img/difficultyExtreme.svg') }}" class="{{ song.hasExtremeDifficulty ? "active" : "" }}" alt="Extreme Difficulty" />
<img src="{{ asset('assets/img/difficultyXD.svg') }}" class="{{ song.hasXDDifficulty ? "active" : "" }}" alt="xD Difficulty" />
{% endif %}
</div>
</div>
</a>
......
......@@ -35,7 +35,7 @@
<i class="mdi mdi-play"></i>
</div>
<div class="volume">
<input type="range" min="0" max="100" value="50" class="playerVolume" onChange="UpdateVolume()" />
<input type="range" min="0" max="100" value="50" class="playerVolume" onInput="UpdateVolume()" />
</div>
</div>
<a href="spinshare-song://{{ song.id }}" class="action">
......
......@@ -12,7 +12,7 @@
{% if app.user.id == user.id %}
<form method="post" action="" enctype="multipart/form-data" class="user-avatar-change">
<input typoe="hidden" name="save" value="changeAvatar" />
<input type="file" name="newAvatar" onchange="document.querySelector('form').submit()" />
<input type="file" name="newAvatar" onchange="document.querySelector('.user-avatar-change').submit()" />
<i class="mdi mdi-image-edit"></i>
</form>
{% endif %}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment