mirror of https://github.com/Radarr/Radarr
225 lines
3.0 KiB
CSS
225 lines
3.0 KiB
CSS
.innerContentBody {
|
|
padding: 0;
|
|
}
|
|
|
|
.header {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 375px;
|
|
}
|
|
|
|
.errorMessage {
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.backdrop {
|
|
position: absolute;
|
|
z-index: -1;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: cover;
|
|
}
|
|
|
|
.backdropOverlay {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--black);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.headerContent {
|
|
display: flex;
|
|
padding: 30px;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: var(--white);
|
|
}
|
|
|
|
.poster {
|
|
flex-shrink: 0;
|
|
margin-right: 35px;
|
|
width: 217px;
|
|
height: 319px;
|
|
}
|
|
|
|
.info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.titleRow {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.titleContainer {
|
|
display: flex;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.title {
|
|
font-weight: 300;
|
|
font-size: 50px;
|
|
line-height: 60px;
|
|
}
|
|
|
|
.toggleMonitoredContainer {
|
|
align-self: center;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.monitorToggleButton {
|
|
composes: toggleButton from '~Components/MonitorToggleButton.css';
|
|
|
|
width: 40px;
|
|
|
|
&:hover {
|
|
color: var(--iconButtonHoverLightColor);
|
|
}
|
|
}
|
|
|
|
.alternateTitlesIconContainer {
|
|
align-self: flex-end;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.filterIcon {
|
|
float: right;
|
|
}
|
|
|
|
.movieNavigationButtons {
|
|
position: absolute;
|
|
right: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.movieNavigationButton {
|
|
composes: button from '~Components/Link/IconButton.css';
|
|
|
|
margin-left: 5px;
|
|
width: 30px;
|
|
color: #e1e2e3;
|
|
white-space: nowrap;
|
|
|
|
&:hover {
|
|
color: var(--iconButtonHoverLightColor);
|
|
}
|
|
}
|
|
|
|
.details {
|
|
margin-bottom: 8px;
|
|
padding-left: 7px;
|
|
font-weight: 300;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.links,
|
|
.rating,
|
|
.year,
|
|
.runtime {
|
|
margin-right: 14px;
|
|
}
|
|
|
|
.certification {
|
|
margin-right: 15px;
|
|
padding: 0 5px;
|
|
border: 1px solid;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.detailsLabel {
|
|
composes: label from '~Components/Label.css';
|
|
|
|
margin: 5px 10px 5px 0;
|
|
}
|
|
|
|
.detailsInfoLabel {
|
|
composes: label from '~Components/InfoLabel.css';
|
|
|
|
margin: 5px 10px 5px 0;
|
|
}
|
|
|
|
.path,
|
|
.sizeOnDisk,
|
|
.qualityProfileName,
|
|
.statusName,
|
|
.studio,
|
|
.collection,
|
|
.genres {
|
|
font-weight: 300;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.overview {
|
|
flex: 1 0 auto;
|
|
margin-top: 8px;
|
|
padding-left: 7px;
|
|
min-height: 0;
|
|
font-size: $intermediateFontSize;
|
|
}
|
|
|
|
.contentContainer {
|
|
padding: 20px;
|
|
}
|
|
|
|
.tabList {
|
|
margin: 0;
|
|
padding: 0;
|
|
border-bottom: 1px solid var(--lightGray);
|
|
}
|
|
|
|
.tab {
|
|
position: relative;
|
|
bottom: -1px;
|
|
display: inline-block;
|
|
padding: 6px 12px;
|
|
border: 1px solid transparent;
|
|
border-top: none;
|
|
list-style: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.selectedTab {
|
|
border-bottom: 4px solid var(--linkColor);
|
|
}
|
|
|
|
.tabContent {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
@media only screen and (max-width: $breakpointSmall) {
|
|
.contentContainer {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.headerContent {
|
|
padding: 15px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: $breakpointLarge) {
|
|
.poster,
|
|
.movieNavigationButtons {
|
|
display: none;
|
|
}
|
|
|
|
.certification,
|
|
.links,
|
|
.rating,
|
|
.year,
|
|
.runtime {
|
|
margin-right: 9px;
|
|
}
|
|
|
|
.details {
|
|
font-size: 19px;
|
|
}
|
|
}
|