1
0
mirror of https://github.com/mwalbeck/nextcloud-breeze-dark.git synced 2024-11-09 01:46:51 +00:00
nextcloud-breeze-dark/css/apps/thirdparty/_music.scss
Magnus Walbeck a58dc593c2
Rewrite core styling #133 (#163)
Complete rewrite of core styling to realign with current Nextcloud, and rely more on CSS4 variable for theming.
2020-10-06 19:12:45 +02:00

135 lines
2.8 KiB
SCSS

/***
* @copyright Copyright (c) 2017, Magnus Walbeck <mw@mwalbeck.org>
*
* @license GNU AGPL version 3 or any later version, see COPYING file for more.
*/
/* Music -------------------------------------------------------------------- */
.app-music #app-navigation {
.app-navigation-separator {
border-bottom-color: var(--color-border);
}
li.drag-hover {
background-color: var(--color-background-hover);
}
}
.app-music #app-content {
#emptycontent,
.emptycontent {
background-color: var(--color-main-background);
}
#toScan:hover * {
color: var(--color-main-text);
}
.alphabet-navigation a {
opacity: 0.2;
&.available {
opacity: 0.7;
&:hover {
opacity: 1;
}
}
}
#controls {
border-bottom: 1px solid var(--color-border);
.progress,
.seek-bar {
background-color: var(--color-background-darker);
}
.buffer-bar {
background-color: var(--color-background-hover);
opacity: 1;
}
.play-bar {
background-color: var(--color-primary-element);
}
}
#app-sidebar {
.close,
#follow-playback {
background-color: unset;
}
}
#music-user .warning a {
color: var(--color-text-link) !important;
}
}
#music-controls {
background-color: var(--color-main-background) !important;
border-top: 1px solid var(--color-border);
#albumart {
border: none !important;
}
.seek-bar {
background-color: var(--color-background-darker) !important;
}
.buffer-bar {
background-color: var(--color-background-hover) !important;
opacity: 1;
}
.play-bar {
background-color: var(--color-primary-element) !important;
}
}
/* Icons -------------------------------------------------------------------- */
.app-music {
//follow-playback icon
#app-sidebar #follow-playback {
filter: invert(95%);
}
// Play button on album covers
img.play.svg {
filter: invert(95%);
}
// Settings icon
.music-nav-settings img.svg {
filter: invert(95%);
}
// play-pause button on hover in nav sidebar
#app-navigation .play-pause {
filter: invert(95%);
}
}
// Music app: icons for Music player controls in files and in app
#music-controls img.control,
.app-music img.control {
filter: invert(95%);
}
// Music App: Mini play button
.current.playing .play-pause,
.current:not(.playing) .play-pause,
#app-view :hover > .play-pause,
#app-view .current.playing div:hover .play-pause {
filter: invert(95%);
}
// Music app: Play option in file action menu in Files App
.fileActionsMenu .action-music-play img.icon {
filter: invert(95%);
}