diff --git a/front/src/style/components/_track_table.scss b/front/src/style/components/_track_table.scss index 704a7b1988a292262852627d2c82d15d34adb32c..97fab8c473b875b43cee66a944c8a7b80033041e 100644 --- a/front/src/style/components/_track_table.scss +++ b/front/src/style/components/_track_table.scss @@ -1,3 +1,18 @@ +.artist-entries { + > div { + display: flex; + align-items: center; + justify-content: space-between; + height: 3.5rem; + } + .content { + flex-grow: 1; + } + .row { + border-bottom: 1px solid var(--border-color); + } +} + .artist-entry, .artist-entries.row { .ui.really.tiny.button.play-button { @@ -70,14 +85,9 @@ } .artist-entry, -.artist-entries -.channel-entry-card { +.artist-entries { border-radius: 5px; padding: 0.5em; - .meta { - text-align: right; - min-width: 7em; - } > div { padding: 0.25em; &:not(:last-child) { diff --git a/front/src/style/globals/_channels.scss b/front/src/style/globals/_channels.scss index 5f364184ea3b5d49c249a4d0ee64d0c976fa94f9..424b80efb35d147331fd69d857e1409d746b21e5 100644 --- a/front/src/style/globals/_channels.scss +++ b/front/src/style/globals/_channels.scss @@ -51,20 +51,15 @@ flex-grow: 1; } } -.album-entries, -.artist-entries { +.album-entries { > div { display: flex; align-items: center; justify-content: space-between; - height: 3.5rem; } .content { flex-grow: 1; } - .row { - border-bottom: 1px solid var(--border-color); - } } .ui.artist-label { .icon { @@ -81,99 +76,41 @@ } } -.album-entry, -.artist-entry, -.artist-entries.row, -.album-entries.row { - .ui.really.tiny.button.play-button { - visibility: hidden; - } - .ui.icon.really.tiny.button.play-button.paused { - color: var(--main-color); - visibility: visible; - display: contents; - left: auto; - right: auto; - } - .ui.floating.dropdown { - visibility: hidden; - } - .ui.favorite-icon { - visibility: hidden; - } - .ui.favorite-icon.pink { - visibility: visible; - } - .actions { - display: block; - max-width: 2rem; - width: 100%; - } - .actions.one.wide.left.floated.column { - width: 3% !important; - } - .content, - .meta, - .image { - user-select: none; - } - .helper { - display: inline-block; - height: 100%; - vertical-align: middle; - } - .ui.artist-track.mini.image { - top: 0; - bottom: 0; - position: absolute; - margin: auto; - } -} - -.album-entry:hover, -.artist-entry:hover { +.album-entry:hover { cursor: pointer; // explicitly style the button as if it was hovered itself - .ui.icon.really.tiny.button.play-button { - color: var(--main-color); - visibility: visible; - display: contents; - left: auto; - right: auto; - } - .ui.floating.dropdown { - visibility: visible; - } - .ui.favorite-icon { - visibility: visible; + .ui.inverted.vibrant.button { + background-color: var(--vibrant-hover-color); + color: white; + box-shadow: 0 0 0 2px var(--vibrant-color) inset; } } -.album-entry, .album-entries .artist-entry, .artist-entries .channel-entry-card { +.album-entry, .channel-entry-card { border-radius: 5px; padding: 0.5em; + .meta { + text-align: right; + min-width: 7em; + } > div { padding: 0.25em; &:not(:last-child) { margin-right: 0.25em; } } - .favorite-icon.tiny.button { - border: none !important; - padding: 0 !important; - margin: 0 0.5em; - transition: all ease-in-out; - } -} - -.album-entry, .artist-entry, .channel-entry-card { &.active { background: rgba(155, 155, 155, 0.2); } &:hover { background: rgba(155, 155, 155, 0.1); } + .favorite-icon.tiny.button { + border: none !important; + padding: 0 !important; + margin: 0 0.5em; + } } .channel-image { border: 1px solid rgba(0, 0, 0, 0.15);