FreeTube/src/renderer/views/Channel/Channel.css

137 lines
2.2 KiB
CSS

.card {
position: relative;
width: 85%;
margin: 0 auto 20px;
}
.channelBanner {
width: 100%;
max-height: 200px;
}
.defaultChannelBanner {
width: 100%;
max-height: 200px;
height:200px;
background-color: black;
background-image: url("images/defaultBanner.png");
}
.channelInfoContainer {
width: 100%;
position: relative;
background-color: var(--card-bg-color);
}
.channelInfo {
display: flex;
flex-flow: row wrap;
width: 100%;
justify-content: space-between;
}
.channelThumbnail {
width: 100px;
height: 100px;
border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
}
.channelName {
font-weight: bold;
width: 100%;
font-size: 25px;
}
.channelSubCount {
color: var(--tertiary-text-color);
top: 50px;
left: 120px;
}
.subscribeButton {
height: 50px;
min-width: 150px;
align-self: center
}
.channelSearch {
width: 200px;
align-self: flex-end;
}
.sortSelect {
align-self: flex-end;
}
.channelInfoTabs {
position: relative;
width: 100%;
}
.tab {
padding: 15px;
font-size: 15px;
cursor: pointer;
text-decoration: underline;
align-self: flex-end;
-webkit-transition: background 0.2s ease-out;
-moz-transition: background 0.2s ease-out;
-o-transition: background 0.2s ease-out;
transition: background 0.2s ease-out;
}
.tab:hover {
background-color: var(--side-nav-hover-color);
-moz-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
transition: background 0.2s ease-in;
}
.aboutTab {
background-color: var(--card-bg-color);
position: relative;
margin-top: 0px;
padding: 10px;
z-index: 1;
}
.aboutInfo {
font-family: 'Roboto', sans-serif;
font-size: 17px;
white-space: pre-wrap;
}
.elementList {
margin-top: 15px;
}
.elementListLoading {
margin-top: 200px;
}
.message {
color: var(--tertiary-text-color);
}
.getNextPage {
background-color: var(--search-bar-color);
width: 100%;
height: 45px;
line-height: 45px;
text-align: center;
cursor: pointer;
margin-top: 16px;
}
.thumbnailContainer {
display: flex
}
.channelLineContainer {
display: flex;
justify-content: center;
flex-direction: column;
padding-left: 1em;
}