mirror of
https://github.com/morpheusthewhite/spicetify-themes.git
synced 2024-11-22 10:52:48 +01:00
finish
This commit is contained in:
Steve Lee
parent
e03071102e
commit
7896f61c37
13
Flatten/README.md
Normal file
13
Flatten/README.md
Normal file
@ -0,0 +1,13 @@
|
||||
# Flatten
|
||||
|
||||
## Screenshots
|
||||
|
||||
|
||||
|
||||
## More
|
||||
This theme is based on original Spotify theme.
|
||||
Feel free to report broken UI.
|
||||
|
||||
## Credits
|
||||
|
||||
Theme created by qwersteve07
|
||||
12
Flatten/color.ini
Normal file
12
Flatten/color.ini
Normal file
@ -0,0 +1,12 @@
|
||||
[Base]
|
||||
main_fg = 999999
|
||||
secondary_fg = d8d8d8
|
||||
main_bg = 1b1b1b
|
||||
|
||||
sidebar_and_player_bg = 1b1b1b
|
||||
slider_bg = 1b1b1b
|
||||
sidebar_indicator_and_hover_button_bg = 1fc167
|
||||
indicator_fg_and_button_bg = 1fc167
|
||||
|
||||
miscellaneous_hover_bg = 333333
|
||||
miscellaneous_bg = 333333
|
||||
BIN
Flatten/flatten.png
Normal file
BIN
Flatten/flatten.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 401 KiB |
173
Flatten/user.css
Normal file
173
Flatten/user.css
Normal file
@ -0,0 +1,173 @@
|
||||
.LeftSidebar__scroll-section::-webkit-scrollbar, .scrollbar-style-visible-mac.body-container--mac::-webkit-scrollbar, #view-content > .embedded-app::-webkit-scrollbar, .context-menu::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
.LeftSidebar__scroll-section::-webkit-scrollbar-thumb, .scrollbar-style-visible-mac.body-container--mac::-webkit-scrollbar-thumb, #view-content > .embedded-app::-webkit-scrollbar-thumb, .context-menu::-webkit-scrollbar-thumb {
|
||||
background: #1fc167;
|
||||
}
|
||||
.LeftSidebar__scroll-section::-webkit-scrollbar-track-piece, .scrollbar-style-visible-mac.body-container--mac::-webkit-scrollbar-track-piece, #view-content > .embedded-app::-webkit-scrollbar-track-piece, .context-menu::-webkit-scrollbar-track-piece {
|
||||
background: #131313;
|
||||
}
|
||||
|
||||
.LeftSidebarNewPlaylistButton__button {
|
||||
background: #b3b3b3;
|
||||
border: 0;
|
||||
border-radius: 30px;
|
||||
height: auto;
|
||||
color: #1b1b1b;
|
||||
padding: 14px 25px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.LeftSidebarNewPlaylistButton__button:focus, .LeftSidebarNewPlaylistButton__button:hover {
|
||||
color: #1b1b1b;
|
||||
background-color: #d8d8d8;
|
||||
transition: all ease 0.2s;
|
||||
}
|
||||
|
||||
.LeftSidebarNewPlaylistButton__text {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.SidebarListItem--is-active:after {
|
||||
left: 8px;
|
||||
background-color: #1fc167;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#new-playlist-button-mount-point {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.Button--style-icon:not(.Button--is-drop-target-active), .added .button.button-icon-only.button-add {
|
||||
color: #444444;
|
||||
}
|
||||
|
||||
.Button--style-green {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.button.button-green {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.tl-explicit .label, .tl-premium .label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tl-row:hover .tl-explicit .label, .tl-row:hover .tl-premium .label, .tl-row.selection-focus .tl-explicit .label, .tl-row.selection-focus .tl-premium .label {
|
||||
border-color: white !important;
|
||||
}
|
||||
|
||||
.tl-row .tl-cell {
|
||||
border-color: #131313;
|
||||
}
|
||||
.tl-row.selected .tl-cell, .tl-row .TableRow--is-selected {
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
.tl-row:hover .tl-cell, .tl-row.contextmenu-active .tl-cell, .TableRow--is-hover-forced, .TableRow:hover {
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
.TableCell {
|
||||
border-color: #131313;
|
||||
}
|
||||
|
||||
.TableRow--is-hover-forced, .TableRow:hover {
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
.TableCellSong__label, .TableRow--is-hover-enabled:hover .TableCellSong__label, .TableRow--is-selected .TableCellSong__label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.TableRow:hover .TableCellSong__label, TableRow--is-hover-enabled:hover .TableCellSong__label, .TableRow--is-selected .TableCellSong__label {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.player-controls-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#player-progressbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
#player-progressbar .progress-bar {
|
||||
background: #131313;
|
||||
}
|
||||
#player-progressbar .progress-bar-wrapper {
|
||||
height: auto;
|
||||
}
|
||||
#player-progressbar .inner {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.view-player .player-controls-container .progress-container .progress-bar .inner {
|
||||
background-color: #1fc167;
|
||||
}
|
||||
.view-player .player-controls-container .controls, .view-player .player-controls-container .progress-container {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.view-player {
|
||||
height: 70px;
|
||||
}
|
||||
.view-player .now-playing .cover-image-link-wrapper {
|
||||
height: 40px;
|
||||
flex: 0 1 64px;
|
||||
}
|
||||
.view-player .now-playing .cover-image-link {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
.view-player .now-playing .cover-image-link figure {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
.view-player .now-playing .cover-image-link .toggle-cover-size {
|
||||
right: 9px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.view-player .now-playing .cover-image-container .cover-image {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.slider {
|
||||
background: #131313;
|
||||
}
|
||||
.slider > div, .slider.enabled > div {
|
||||
background-color: #1fc167;
|
||||
}
|
||||
.slider:hover > div {
|
||||
background-color: #1fc167;
|
||||
}
|
||||
.slider.enabled {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
background: #2b2b2b;
|
||||
}
|
||||
.context-menu .item.hover:not(.disabled) {
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
.Header__content-wrapper {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
|
||||
.glue-page-header__content .glue-page-header__title, .glue-page-header__sticky, .glue-page-header__title, .Header__content .Header__title-text {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.friend .user-play-button .card-image {
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=user.css.map */
|
||||
131
Flatten/user.sass
Normal file
131
Flatten/user.sass
Normal file
@ -0,0 +1,131 @@
|
||||
// left sidebar css
|
||||
.LeftSidebar__scroll-section,.scrollbar-style-visible-mac.body-container--mac,#view-content>.embedded-app,.context-menu
|
||||
&::-webkit-scrollbar
|
||||
width: 5px
|
||||
&::-webkit-scrollbar-thumb
|
||||
background: #1fc167
|
||||
&::-webkit-scrollbar-track-piece
|
||||
background: #131313
|
||||
.LeftSidebarNewPlaylistButton__button
|
||||
background: #b3b3b3
|
||||
border: 0
|
||||
border-radius: 30px
|
||||
height: auto
|
||||
color: #1b1b1b
|
||||
padding: 14px 25px
|
||||
display: flex
|
||||
justify-content: center
|
||||
&:focus,&:hover
|
||||
color: #1b1b1b
|
||||
background-color: #d8d8d8
|
||||
transition: all ease 0.2s
|
||||
.LeftSidebarNewPlaylistButton__text
|
||||
flex: 0 0 auto
|
||||
.SidebarListItem--is-active:after
|
||||
left: 8px
|
||||
background-color: #1fc167
|
||||
border-radius: 2px
|
||||
#new-playlist-button-mount-point
|
||||
padding: 15px
|
||||
|
||||
|
||||
// button css
|
||||
.Button--style-icon:not(.Button--is-drop-target-active),.added .button.button-icon-only.button-add
|
||||
color: #444444
|
||||
.Button--style-green
|
||||
color: #ffffff
|
||||
.button.button-green
|
||||
color: #ffffff
|
||||
|
||||
|
||||
// table css
|
||||
.tl-explicit .label, .tl-premium .label
|
||||
color: white
|
||||
|
||||
.tl-row:hover .tl-explicit .label, .tl-row:hover .tl-premium .label, .tl-row.selection-focus .tl-explicit .label, .tl-row.selection-focus .tl-premium .label
|
||||
border-color: white !important
|
||||
|
||||
.tl-row
|
||||
.tl-cell
|
||||
border-color: #131313
|
||||
&.selected .tl-cell,.TableRow--is-selected
|
||||
background-color: #222222
|
||||
|
||||
.tl-row:hover .tl-cell, .tl-row.contextmenu-active .tl-cell,.TableRow--is-hover-forced, .TableRow:hover
|
||||
background-color: #222222
|
||||
|
||||
.TableCell
|
||||
border-color: #131313
|
||||
|
||||
.TableRow--is-hover-forced, .TableRow:hover
|
||||
background-color: #222222
|
||||
|
||||
.TableCellSong__label,.TableRow--is-hover-enabled:hover .TableCellSong__label, .TableRow--is-selected .TableCellSong__label
|
||||
color: white
|
||||
|
||||
.TableRow:hover .TableCellSong__label,TableRow--is-hover-enabled:hover .TableCellSong__label, .TableRow--is-selected .TableCellSong__label
|
||||
border-color: white
|
||||
|
||||
// player css
|
||||
.player-controls-container
|
||||
display: flex
|
||||
justify-content: center
|
||||
#player-progressbar
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
height: auto
|
||||
.progress-bar
|
||||
background: #131313
|
||||
.progress-bar-wrapper
|
||||
height: auto
|
||||
.inner
|
||||
border-radius: 0
|
||||
.view-player .player-controls-container
|
||||
.progress-container .progress-bar .inner
|
||||
background-color: #1fc167
|
||||
.controls, .progress-container
|
||||
margin: 0
|
||||
.view-player
|
||||
height: 70px
|
||||
.now-playing
|
||||
.cover-image-link-wrapper
|
||||
height: 40px
|
||||
flex: 0 1 64px
|
||||
.cover-image-link
|
||||
height: 40px
|
||||
width: 40px
|
||||
figure
|
||||
height: 40px
|
||||
width: 40px
|
||||
.toggle-cover-size
|
||||
right: 9px
|
||||
top: 10px
|
||||
.view-player .now-playing .cover-image-container .cover-image
|
||||
border-radius: 50%
|
||||
.slider
|
||||
background: #131313
|
||||
&> div,&.enabled> div
|
||||
background-color: #1fc167
|
||||
&:hover>div
|
||||
background-color: #1fc167
|
||||
&.enabled
|
||||
background-color: white
|
||||
|
||||
// right-click menu css
|
||||
.context-menu
|
||||
background: #2b2b2b
|
||||
.item.hover:not(.disabled)
|
||||
background-color: #222222
|
||||
|
||||
// background css
|
||||
.Header__content-wrapper
|
||||
background-color: #1b1b1b
|
||||
.glue-page-header__content .glue-page-header__title,.glue-page-header__sticky ,.glue-page-header__title,.Header__content .Header__title-text
|
||||
color: #ffffff
|
||||
|
||||
|
||||
// friend sidebar css
|
||||
.friend .user-play-button .card-image
|
||||
filter: grayscale(1)
|
||||
Loading…
Reference in New Issue
Block a user