123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254 |
- //TODO Clean up this component A LOT. Could definitly use Modal in multiple places.
- @import './StyleConstants';
- .bs-viewer-frame{
- border: none;
- }
- #song-details {
- display: flex;
- flex-flow: row nowrap;
- padding: 15px;
- height: calc(100vh - 85px);
- animation: song-details-fade-in .2s forwards;
- #preview {
- width: 350px;
- margin-top: 5px;
- &:not([src]) {
- opacity: 0.8;
- animation: song-details-loading-mask .7s alternate infinite;
- }
- }
- .cover-image {
- width: 15vw;
- height: 15vw;
- filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.25));
- border-radius: 5px;
- }
- .close-icon {
- cursor: pointer;
- position: absolute;
- transform: translateX(calc(100vw - 280px));
- width: 25px;
- height: 25px;
- background: url(../assets/close.png);
- background-size: 25px;
- }
- .details-info {
- margin: 10px 20px;
- }
- .details-title {
- display: inline-block;
- font-size: 20pt;
- font-weight: 900;
- margin-top: 3px;
- margin-bottom: -3px;
- max-width: calc(62vw - 300px);
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .details-artist {
- font-size: 14pt;
- opacity: 0.8;
- }
- .details-uploader {
- margin-bottom: 10px;
- }
-
- .details-description {
- margin-bottom: 10px;
- max-width: 60%;
- max-height: 20%;
- overflow-y: scroll;
- }
- .details-difficulties {
- margin-top: 5px;
- margin-bottom: 10px;
- }
- .details-ratings {
- position: absolute;
- right: 6vw;
- display: flex;
- align-items: flex-start;
- width: 200px;
- flex-flow: row wrap;
- }
- .action-buttons {
- margin: 15px 0;
- .action-button {
- margin: 0 3px;
- padding: 5px 10px;
- border-radius: 20px;
- font-size: 8pt;
- font-weight: 900;
- color: white;
- background-color: rgba($beatdrop-blue, 0.8);
- cursor: pointer;
- display: inline-flex;
- align-items: center;
- &:hover {
- background: $beatdrop-blue;
- }
- &.download-button {
- padding: 2px 7px;
- width: 90px;
- background: rgba($beatdrop-blue, 0.3);
- border: 3px solid rgba($beatdrop-blue, 0.8);
- display: inline-flex;
- flex-flow: row nowrap;
- justify-content: flex-start;
- position: relative;
- margin-top: -1px;
- span:first-child {
- display: inline-block;
- position: absolute;
- left: -1px;
- top: -1px;
- height: 110%;
- background: rgba($beatdrop-blue, 0.8);
- z-index: -1;
- border-radius: 10px;
- }
- &:hover {
- border: 3px solid $beatdrop-blue;
- span:first-child {
- background: $beatdrop-blue;
- }
- }
- }
- &:not(.more-button) img {
- width: 15px;
- height: 15px;
- margin-right: 5px;
- }
- &.playlist-add-button {
- width: 110px;
- }
- &.disabled {
- opacity: 0.5;
- cursor: not-allowed;
- }
- &.more-button img {
- width: 15px;
- height: 15px;
- }
- }
- }
- .song-in-library {
- font-weight: bold;
- color: $beatdrop-blue;
- margin-top: 5px;
- }
- }
- #song-details.loading {
- .cover-image {
- display: block;
- background-color: silver;
- width: 150px;
- height: 150px;
- }
- .details-title {
- display: inline-block;
- height: 30px;
- width: 30vw;
- background-color: silver;
- }
- .details-subtitle {
- height: 15px;
- width: 15vw;
- background-color: silver;
- }
- .details-artist {
- height: 20px;
- width: 15vw;
- background-color: silver;
- margin-top: 5px;
- }
- .action-button {
- opacity: 0.4;
- cursor: not-allowed;
- }
- .details-description {
- background-color: silver;
- width: 50%;
- height: 16.8vw;
- }
- }
- .sidebar-collapsed #song-details {
- .close-icon {
- transform: translateX(calc(100vw - 120px));
- }
- .details-title {
- max-width: calc(70vw - 250px);
- }
- }
- .theme-hc {
- .action-buttons .action-button {
- background-color: rgba($theme-hc-accent-color, 0.8) !important;
- &:hover {
- background: $theme-hc-accent-color !important;
- }
- &.download-button {
- background: rgba($theme-hc-accent-color, 0.3) !important;
- border: 3px solid rgba($theme-hc-accent-color, 0.8) !important;
- span:first-child {
- background: rgba($theme-hc-accent-color, 0.8) !important;
- }
- &:hover {
- border: 3px solid $theme-hc-accent-color !important;
- span:first-child {
- background: $theme-hc-accent-color !important;
- }
- }
- }
- }
- }
- @keyframes song-details-fade-in {
- from {
- opacity: 0;
- }
- }
- @keyframes song-details-loading-mask {
- to {
- opacity: 0.2;
- }
- }
|