subpy/main.tcss

.info {
    width: 30%;
    height: 100%;
}

#nowplaying {
    height: 100%;
}

#textinfo {
    height: 6;
}

#coverart {
    width: 100%;
    height: 100%;
}

#albumContainer {
    height: 100%;
}

#artistContainer {
    height: 100%;
}

.headerb {
    width: 20%;
    height: 1;
    background: #2c2e30;
    text-align: center;
}

#headerbs {
    height: 1;
}

.artistPanel {
    width: 20%;
    height: 100%;
    padding: 0 1;
}

.artistArt {
    height: 1fr;
    content-align: center middle;
}

.artistName {
    width: 100%;
    text-align: center;
}

.artistInfo {
    width: 1fr;
    height: 1.25fr;
}

.artistInfoArt {
    width: 1fr;
    height: 100%;
    content-align: center middle;
}

.artistInfoTextbox {
    width: 4fr;
}

.albumPanel {
    width: 1fr;
    height: 1fr;
    padding: 0 1;
}

.albumArt {
    height: 1fr;
    content-align: center middle;
}

.albumName {
    text-wrap: wrap;
    text-align: center;
    width: 100%;
}

.artistNameHeader {
    width: 100%;
    text-align: center;
}

# Player Screen

#playerTrackTitleBox {
    padding: 1 0 0 0;
}

#playerArtc {
    align: center middle;
    # width: 1fr;
}

.playerTrackinfo {
    # text-align: center;
    # content-align: center middle;
    height: 1;
    width: auto;
}

.playerArt {
    content-align: center middle;
    height: 1fr;
    width: 0.5fr;
    padding: 1 0 0 0;
}

#progressBarWrapper {
    height: 3;
    width: 0.75fr;
    padding: 1 0 0 0;
}

.playerProgressBarTime {
    width: 0.1fr;
    text-align: center;
}

.playerProgressBarTotalTime {
    width: 0.1fr;
    text-align: center;
}

#percentage {
    visibility: hidden;
}

#eta {
    visibility: hidden;
}

.playerProgressBar {
    height: 3;
    width: 0.75fr;
    content-align: center middle;
}

.playerProgressBar #bar {
    width: auto;
}

#playerButtons {
    height: 0.25fr;
    padding-bottom: 1;
    align: center middle;
}

.playerButton {
    height: 5;
    max-width: 12;
    max-height: 12;
}

QueueScreen {
    align: center middle;
}

#queueModal {
    height: 75%;
    width: 75%;
    border: grey;
}

PlaylistSelectionModal {
    align: center middle;
}

PlaylistSelectionModal Container {
    height: 75%;
    width: 75%;
    border: grey;
}

PlaylistSelectionModal Label {
    text-style: bold;
    color: #0073e6;
    width: 100%;
    text-align: center;
}

PlaylistNameForm {
    align: center middle;
}

#PSbutton {
    width: 100%;
    align: right middle;
}

PlaylistNameForm Button {
    background: #0080ff;
}

PlaylistNameForm Label {
    width: 100%;
    text-align: center;
}

#playlistFormModal {
    height: 30%;
    width: 70%;
    border: grey;
    align: center middle;
}

#songModeSelectorList {
    height: 100%;
    width: 0.2fr;
}

#songModeSelectorList Label {
    padding: 1 2;
}

#songDatatable {
    margin: 1 0 0 1;
    width: 1fr;
}

#albumModeSelectorList {
    height: 100%;
    width: 0.2fr;
}

#albumModeSelectorList Label {
    padding: 1 2;
}

#albumSearchBar {
    margin: 1 0;
}

#albumList {
    min-height: 1fr;
    height: 1fr;
    # border: white;
    margin: 1 1;
}

SongTable Input {
    display: none;
}

ShareLinkModal {
    align: center middle;
}

ShareLinkModal Horizontal {
    min-width: 30%;
    min-height: 3;
    max-height: 5;
    width: auto;
    height: auto;
    border: blue;
}

ShareLinkModal Label {
    content-align: center middle;
    padding: 1 2 1 2;
}

RatingModal {
    align: center middle;
}

RatingModal Vertical {
    max-width: 50%;
    width: auto;
    height: auto;
    padding: 2;
    border: blue;
    align: center middle;
}

RatingModal Label {
    content-align: center middle;
    width: 100%;
    padding-bottom: 2;
}

RatingModal Horizontal {
    align: center middle;
    height: auto;
}

RatingModal RadioSet {
    width: 40%;
}

RatingModal Button {
    
}