dashboard-ui/dashboard/dashboard.css
2023-08-31 18:24:09 +02:00

218 lines
4.0 KiB
CSS

:root {
--dashboardColumnGap: 3em;
}
.dashboardFooter {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-column-gap: 2em;
column-gap: 2em;
}
.dashboardSections {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-column-gap: var(--dashboardColumnGap);
column-gap: var(--dashboardColumnGap);
}
.dashboardSection {
-webkit-flex-shrink: 0;
flex-shrink: 0;
margin: 0 0 1em;
max-width: 100%;
min-width: min(90ch,80%);
-webkit-flex-basis: 50%;
flex-basis: 50%;
-webkit-flex-basis: calc(50% - var(--dashboardColumnGap));
flex-basis: calc(50% - var(--dashboardColumnGap));
-webkit-flex-grow: 1;
flex-grow: 1;
margin-bottom: 1.5em;
}
.dashboardSection h2 {
margin-top: .5em;
margin-bottom: .5em;
}
.dashboardSection-mini {
min-width: min(65ch,80%);
-webkit-flex-basis: 33.334%;
flex-basis: 33.334%;
-webkit-flex-basis: calc(33.334% - var(--dashboardColumnGap));
flex-basis: calc(33.334% - var(--dashboardColumnGap));
}
.dashboardBreakLineSection {
-webkit-flex-basis: 100%;
flex-basis: 100%;
height: 0;
margin-bottom: 0;
}
@media not all and (min-width:80em) {
.dashboardBreakLineSection {
display: none;
}
}
.nowPlayingSessions {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(22em,1fr));
grid-gap: 0;
}
.activeSession {
width: initial!important;
max-width: 100%;
}
.activeSession .innerCardFooter {
top: 5.4em;
bottom: initial;
z-index: 1;
}
.sessionTranscodingProgress .itemProgressBarForeground {
background: #dd4919!important;
}
.activeSession .cardBox-sideFooter {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.activeSession .cardFooterContent {
box-sizing: border-box;
max-width: calc(100% - 6em);
}
.activeSession-bottomsections {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
font-size: 92%;
text-align: start;
}
.activeSession-bottomsection {
padding: 1em 1em;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.activeSession-bottomsection-title {
margin-top: 0;
margin-bottom: 0;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: 1em;
margin-inline-end: 1em;
font-weight: 700;
}
.activeSession-commandsection {
-webkit-justify-content: center;
justify-content: center;
}
.activeSessionStreamIcon {
-webkit-margin-end: .5em;
margin-inline-end: .5em;
font-size: 1.2em;
}
.activeSessionUserImage {
height: 1.82em;
border-radius: 100%;
-webkit-margin-end: .5em;
margin-inline-end: .5em;
}
.activeSession-hwaccelIcon {
font-size: 1.3em;
color: #52b54b;
-webkit-margin-start: .25em;
margin-inline-start: .25em;
}
.activeSession-deviceSection,.activeSession-usersection {
cursor: pointer;
}
.activeSession-deviceimage {
width: 2.8em;
height: 4.4em;
-webkit-margin-end: 1em;
margin-inline-end: 1em;
border-radius: .42em;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-shrink: 0;
flex-shrink: 0;
background-position: center center;
background-size: auto 60%;
background-repeat: no-repeat;
}
.activeSession-deviceimage-icon {
font-size: 300%;
}
.serverNameHeader {
-webkit-margin-end: .5em;
margin-inline-end: .5em;
}
.supporterIconContainer {
-webkit-margin-start: .75em;
margin-inline-start: .75em;
}
.serverRestartIcon {
-webkit-margin-end: .25em;
margin-inline-end: .25em;
}
.supporterPromotionContainer {
margin: 0 0 2em;
}
@media all and (min-width:48em) {
.supporterPromotionContainer {
display: none;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
}
.serverUpToDateCheckIcon {
background-color: #52b54b;
border-radius: .25em;
color: #fff;
-webkit-margin-end: .5em;
margin-inline-end: .5em;
padding: .25em;
font-size: 110%;
}~