admin/Cozytile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Darkkal44
2022-09-17 23:28:50 +05:30
committed by GitHub
parent a6d3527b0a
commit 2bbafa4dcb
4 changed files with 542 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.config/spicetify/Themes/Comfy/assets/_navbar.scss
+356
View File
@@ -0,0 +1,356 @@
:root .Root__nav-bar {
overflow: hidden;
ul.main-navBar-entryPoints {
&#spicetify-sticky-list {
white-space: nowrap;
border-radius: var(--border-radius);
> div {
display: inline-block;
margin-right: 18px;
}
}
column-gap: 16px;
padding: 0 12px;
box-sizing: content-box;
transition: 350ms background-color;
border-radius: var(--border-radius) var(--border-radius) 0 0;
margin: 24px 12px 0 12px;
background-color: rgba(0, 0, 0, 0.1);
& > li {
padding: 0;
margin: 0 -12px;
a {
padding: 0 12px;
border-radius: 0;
background-color: transparent;
&.main-navBar-navBarLinkActive {
background-color: rgba(
var(--spice-rgb-pagelink-active),
0.1647058824
);
}
}
&:first-child a {
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
}
& > div {
padding: 0;
margin: 2px 0;
& > *.active {
background: none;
}
button,
a {
padding: 0;
div {
margin-right: 0;
border-radius: var(--border-radius);
&.main-rootlist-statusIcons {
display: none;
}
&.main-likedSongsButton-likedSongsIcon {
background: linear-gradient(
135deg,
var(--spice-liked-left),
var(--spice-liked-right)
);
border-style: solid;
border-width: 2px;
}
}
span {
display: none;
}
}
}
a[href="/"] {
.home-icon {
background: url("https://i.imgur.com/jqDH9TQ.png") center/cover
no-repeat;
}
.home-active-icon {
background: url("https://i.imgur.com/60h58oZ.png") center/cover
no-repeat;
}
svg > * {
display: none;
}
}
a[href="/search"] {
.search-icon {
background: url("https://i.imgur.com/UV5JQpE.png") center/cover
no-repeat;
}
.search-active-icon {
background: url("https://i.imgur.com/CTVdQ3d.png") center/cover
no-repeat;
}
svg > * {
display: none;
}
}
a[href="/collection"] {
.collection-icon {
background: url("https://i.imgur.com/alXGfxW.png") center/cover
no-repeat;
}
.collection-active-icon {
background: url("https://i.imgur.com/SzvrAfr.png") center/cover
no-repeat;
}
svg > * {
display: none;
}
}
a[href="/lyrics-plus"] {
.collection-icon {
background: url("https://i.imgur.com/91fuU3P.png") center/cover
no-repeat;
}
.collection-active-icon {
background: url("https://i.imgur.com/EgRCYe8.png") center/cover
no-repeat;
}
svg > * {
display: none;
}
}
a[href="/reddit"] {
.collection-icon {
background: url("https://i.imgur.com/6N6ev2V.png") center/cover
no-repeat;
}
.collection-active-icon {
background: url("https://i.imgur.com/UENFDdo.png") center/cover
no-repeat;
}
svg > * {
display: none;
}
}
a[href="/new-releases"] {
.collection-icon {
background: url("https://i.imgur.com/BgkCeDG.png") center/cover
no-repeat;
}
.collection-active-icon {
background: url("https://i.imgur.com/CTRVDwF.png") center/cover
no-repeat;
}
svg > * {
display: none;
}
}
a[href$="marketplace"] {
.collection-icon {
background: url("https://i.imgur.com/2pWNa48.png") center/cover
no-repeat;
}
.collection-active-icon {
background: url("https://i.imgur.com/rKmXQ6V.png") center/cover
no-repeat;
}
svg > * {
display: none;
}
}
&:not(#spicetify-sticky-list) + .main-rootlist-rootlist {
& > div {
display: grid;
grid-template-areas:
"add tracks episodes"
"playlists playlists playlists";
grid-template-columns: 25px 25px 1fr;
grid-template-rows: 25px 1fr;
column-gap: 16px;
margin: 12px 12px 0 12px;
& > div:first-child {
grid-area: add;
margin: -6px 0 0 12px;
&::before {
content: "";
position: absolute;
width: calc(100% - 24px);
height: 40px;
margin: -6px 0 0 -12px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 0 0 var(--border-radius) var(--border-radius);
}
button {
padding: 0;
.main-createPlaylistButton-createPlaylistIcon {
border-radius: var(--border-radius);
}
}
}
& > div:nth-child(2) {
grid-area: tracks;
margin: -6px 0 0 12px;
a {
padding: 0;
.main-likedSongsButton-likedSongsIcon {
border-radius: var(--border-radius);
}
}
}
& > div:nth-child(3) {
grid-area: episodes;
margin: -6px 0 0 12px;
a {
padding: 0;
.main-yourEpisodesButton-yourEpisodesIcon {
border-radius: var(--border-radius);
}
.main-collectionLinkButton-collectionLinkText {
display: none;
}
}
}
& > div:last-child {
grid-area: playlists;
}
}
}
}
.main-rootlist-rootlistDividerContainer {
display: none;
}
.main-rootlist-rootlist {
margin-top: 0;
.os-content {
padding-top: 16px !important;
&::before {
content: "Playlists";
visibility: visible;
width: unset;
height: unset;
line-height: unset;
display: block;
font-size: 16px;
text-align: center;
font-weight: bold;
}
& > ul[tabindex="0"] {
margin: 12px;
&:not(#spicetify-playlist-list) {
margin: 12px 0 0 0;
}
& > div {
contain: unset;
& > div:nth-child(2) {
background-color: rgba(0, 0, 0, 0.1);
border-radius: var(--border-radius);
.main-rootlist-rootlistItem {
padding: 0;
.main-rootlist-rootlistItemLink {
padding-top: 4px;
padding-bottom: 4px;
padding-left: calc(
12px + var(--indentation) *
var(--left-sidebar-item-indentation-width)
);
padding-right: var(--left-sidebar-padding-right);
box-sizing: content-box;
transition: color 350ms ease, background-color 150ms;
& + button {
border-radius: 0 !important;
}
& + div > button {
margin-left: 0;
}
&:hover,
&:hover + * {
transition: 350ms color;
cursor: pointer;
}
&Active,
&:focus,
&Active + *,
&:focus + * {
background-color: rgba(
var(--spice-rgb-pagelink-active),
0.1647058824
);
cursor: default !important;
}
}
.main-rootlist-statusIcons:not(:empty) {
margin-inline-start: 0;
padding: 4px 12px;
transition: 150ms background-color;
}
.main-rootlist-expandArrow {
height: unset;
margin-left: 0;
padding: 4px 12px;
transition: 150ms background-color;
}
}
.main-rootlist-rootlistItemOverlay {
display: none;
}
}
}
}
}
}
// Cover art expanded
.main-coverSlotExpanded-container .cover-art .cover-art-image {
border-radius: 0;
}
// Scrollbar
.os-scrollbar {
display: none;
}
}
.config/spicetify/Themes/Comfy/assets/_now_playing.scss
+97
View File
@@ -0,0 +1,97 @@
:root .Root__now-playing-bar {
.main-nowPlayingBar-container {
position: relative;
border-top: none;
.main-nowPlayingBar-nowPlayingBar {
box-sizing: content-box;
padding-bottom: 16px;
// Cover-art
.main-nowPlayingWidget-nowPlaying {
&.main-nowPlayingWidget-coverExpanded {
transform: translateX(-100px);
}
.main-coverSlotCollapsed-container {
top: -20px;
.cover-art {
width: 84px !important;
height: 84px !important;
border-radius: var(--border-radius);
overflow: hidden;
}
}
}
}
.main-connectBar-connectBar {
position: absolute;
top: -15px;
right: 15px;
padding: 4px 8px;
box-sizing: content-box;
border-radius: var(--border-radius);
color: #fff;
background-color: var(--spice-sidebar);
&::after {
content: none;
}
}
}
.playback-bar {
position: absolute;
display: grid;
grid-template-columns: auto auto;
grid-template-areas:
"time-left time-right"
"bar bar";
bottom: 0;
.saber-hilt {
height: 0;
}
.playback-progressbar {
grid-column: 1/3;
grid-area: bar;
& > div {
--bg-color: rgba(var(--spice-rgb-progress-bg), 0.3);
--fg-color: var(--spice-progress-fg);
& > div {
--progress-bar-height: 12px;
--progress-bar-radius: 0;
& > div > div {
width: 105%;
background-color: transparent;
background-image: linear-gradient(
90deg,
var(--spice-progress-fg) 93%,
transparent 100%
);
}
}
.progress-bar__slider {
display: none;
}
}
}
& > div:first-of-type {
grid-area: time-left;
}
& > div:last-of-type {
grid-area: time-right;
}
// Cursor
button {
width: 0;
}
}
}
.config/spicetify/Themes/Comfy/assets/_settings.scss
+7
View File
@@ -0,0 +1,7 @@
.x-settings-container {
max-width: unset;
.x-toggle-indicatorWrapper {
border-radius: var(--border-radius);
}
}
.config/spicetify/Themes/Comfy/assets/_top_bar.scss
+82
View File
@@ -0,0 +1,82 @@
:root .Root__top-bar header {
button {
border-radius: var(--border-radius);
&[title="Popup Lyrics"] {
background-image: url("https://i.imgur.com/91fuU3P.png");
background-size: 60%;
background-position: center;
background-repeat: no-repeat;
svg {
display: none;
}
}
}
.main-entityHeader-topbarTitle {
padding: 0 0px;
}
.main-playButton-PlayButton {
display: none !important;
}
.main-topBar-background {
background-color: rgba(var(--spice-rgb-sidebar), 0.95) !important;
}
.main-topBar-overlay {
background-color: transparent !important;
}
.main-topBar-historyButtons button,
.lyrics-tabBar-active {
background-color: rgba(11, 11, 17, 0.32);
}
.main-topBar-UpgradeButton {
font-size: 0;
overflow: hidden;
background: url("https://i.imgur.com/nzAfcIL.png") 50% / contain no-repeat;
border: none;
padding: 5px;
box-sizing: content-box;
width: 12px;
}
.main-userWidget-box {
height: unset;
padding: 0;
gap: 12px;
> div {
&:last-child {
display: none;
}
}
.main-avatar-avatar {
width: 40px !important;
height: 40px !important;
display: flex;
@media (min-width: 1024px) {
.main-avatar-image {
border-radius: var(--border-radius) 0 0 var(--border-radius);
}
}
& > div {
width: unset !important;
height: unset !important;
}
}
.main-userWidget-displayName {
padding-right: 12px;
}
.main-userWidget-chevron {
display: none;
}
}
}