You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

553 lines
11 KiB

@import './Attachments/index.scss';
@import './Book/index.scss';
@import './Comment/index.scss';
@import './LessonPlayList/index.scss';
.video-tube {
&__content {
margin-left: 15px;
&--display {
border-bottom: 1px solid $gray8;
padding-bottom: 30px;
video{
border: 1px solid $gray8;
}
span{
color: $green4;
padding: 15px 0px;
}
h1{
color: white;
margin-bottom: 20px;
}
p{
color: white;
}
}
&--comments{
color: white;
border-bottom: 1px solid $gray8;
padding-bottom: 30px;
header{
padding: 20px 0px;
h2{
margin: 0px;
}
}
button{
background-color: inherit;
border: none;
color: $green;
}
}
&--addComment{
padding: 15px 0px;
textarea{
width: 100%;
border-radius: 12px;
background-color: $gray8;
padding: 10px;
color: white;
&:focus{
outline: none;
}
&::placeholder{
color: $gray4;
}
}
}
}
&__sidebar {
&--playlist {
border: 1px solid $gray8;
margin-bottom: 30px;
header {
width: 100%;
color: white;
h2,
p {
margin: 0px;
}
p {
margin-top: 5px;
}
}
&___list {
padding-top: 10px;
overflow-y: scroll;
&::-webkit-scrollbar {
width: 8px;
}
/* Track */
&::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px inherit;
border-radius: 10px;
}
/* Handle */
&::-webkit-scrollbar-thumb {
background: $gray;
border-radius: 10px;
}
/* Handle on hover */
&::-webkit-scrollbar-thumb:hover {
background: white;
}
}
}
&--attachments {
border: 1px solid $gray8;
margin-bottom: 30px;
header {
width: 100%;
color: white;
h2,
p {
margin: 0px;
}
p {
margin-top: 5px;
}
}
&___list {
overflow-y: scroll;
&::-webkit-scrollbar {
width: 8px;
}
/* Track */
&::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px inherit;
border-radius: 10px;
}
/* Handle */
&::-webkit-scrollbar-thumb {
background: $gray10;
border-radius: 10px;
}
/* Handle on hover */
&::-webkit-scrollbar-thumb:hover {
background: white;
}
}
}
&--suggests {
border: 1px solid $gray8;
header {
width: 100%;
color: white;
h2{
margin: 0px;
}
span{
background-color: #00fff74f;
color: $blue2;
padding: 5px 8px;
}
}
}
}
}
@media screen and (min-width: 1441px) {
.video-tube {
main {
max-width: 1350px;
margin-top: 10px;
}
&__content {
flex: 8;
&--display {
span{
font-size: 16px;
}
h1{
font-size: 24px;
}
p{
font-size: 16px;
}
}
&--comments{
header{
h2{
font-size: 20px;
}
}
button{
font-size: 14px;
}
}
&--addComment{
width: 60%;
textarea{
font-size: 14px;
&::placeholder{
font-size: 14px;
}
}
}
}
&__sidebar {
flex: 4;
&--playlist {
max-height: calc(100vh - 140px);
header {
padding: 12px;
background-color: #2c2c2c;
img {
transform: translateY(-5px);
}
h2 {
font-size: 16px;
}
p {
font-size: 10px;
}
}
}
&--attachments {
max-height: 320px;
header {
padding: 14px 12px;
background-color: rgba(#ebebeb, 0.21);
h2 {
font-size: 16px;
}
p {
font-size: 10px;
}
}
}
&--suggests {
background-color: #001702;
header {
padding: 20px 12px;
// background-color: #8bd09746;
h2 {
font-size: 16px;
}
span{
font-size: 11px;
}
}
&___list{
padding: 15px 12px;
// background-color: #08793d58;
}
}
}
}
}
@media screen and (min-width: 1008px) and (max-width: 1440px) {
.video-tube {
main {
max-width: 1250px;
margin-top: 10px;
padding: 0px 10px;
}
&__content {
flex: 8;
&--display {
video{
width: 100%;
}
span{
font-size: calc(100vw / 100);
}
h1{
font-size: calc(100vw / 60);
}
p{
font-size: calc(100vw / 100);
}
}
&--comments{
header{
h2{
font-size: calc(100vw / 80);
}
}
button{
font-size: calc(100vw / 90);
}
}
&--addComment{
width: 60%;
button{
font-size: calc(100vw / 110);
}
textarea{
font-size: calc(100vw / 90);
&::placeholder{
font-size: calc(100vw / 90);
}
}
}
}
&__sidebar {
flex: 4;
&--playlist {
max-height: calc(100vh - 140px);
header {
padding: 14px 12px;
background-color: #2c2c2c;
img {
transform: translateY(-5px);
}
h2 {
font-size: calc(100vw / 85);
}
p {
font-size: calc(100vw / 120);
}
}
}
&--attachments {
max-height: 250px;
header {
padding: 14px 12px;
background-color: rgba(#ebebeb, 0.21);
h2 {
font-size: calc(100vw / 85);
}
p {
font-size: calc(100vw / 120);
}
}
}
&--suggests {
background-color: #001702;
header {
padding: 26px 12px;
background-color: rgba(#ebebeb, 0.21);
h2 {
font-size: calc(100vw / 85);
}
span{
font-size: calc(100vw / 120);
}
}
&___list{
padding: 15px 12px;
background-color: #ffffff00;
}
}
}
}
}
@media screen and (min-width: 641px) and (max-width: 1007px) {
.video-tube {
background : black;
main {
max-width: 900px;
margin-top: 10px;
padding: 0px 10px;
flex-direction: column;
}
&__content {
flex: 8;
margin: 0px;
&--display {
padding: 0px;
video{
width: 100%;
margin-bottom: 10px;
}
span{
font-size: calc(100vw / 40);
}
h1{
font-size: calc(100vw / 30);
}
p{
font-size: calc(100vw / 40);
}
}
&--comments{
header{
h2{
font-size: calc(100vw / 40);
}
}
button{
font-size: calc(100vw / 50);
}
}
&--addComment{
width: 100%;
button{
font-size: calc(100vw / 45);
}
textarea{
font-size: calc(100vw / 45);
&::placeholder{
font-size: calc(100vw / 45);
}
}
}
}
&__sidebar {
flex: 4;
&--playlist {
max-height: 450px;
header {
padding: 12px 12px;
background-color: #2c2c2c;
img {
transform: translateY(-5px);
width : 40px;
}
h2 {
font-size: calc(100vw / 40);
}
p {
font-size: calc(100vw / 55);
}
}
}
&--attachments {
max-height: 250px;
header {
padding: 14px 12px;
background-color: #2c2c2c;
h2 {
font-size: calc(100vw / 40);
}
p {
font-size: calc(100vw / 55);
}
}
}
&--suggests {
header {
padding: 14px 12px;
background-color: #8bd09746;
h2 {
font-size: calc(100vw / 40);
}
span{
font-size: calc(100vw / 55);
}
}
&___list{
padding: 15px 12px;
background-color: #ffffff00;
}
}
}
}
}
@media screen and (max-width: 640px) {
.video-tube {
background : black;
margin-top: 20px;
main {
max-width: 500px;
margin-top: 0px;
padding: 0px 10px;
flex-direction: column;
}
&__content {
flex: 8;
margin: 0px;
&--display {
padding: 0px;
video{
width: 100%;
margin-bottom: 10px;
}
span{
font-size: calc(100vw / 40);
}
h1{
font-size: calc(100vw / 30);
}
p{
font-size: calc(100vw / 40);
}
}
&--comments{
header{
h2{
font-size: calc(100vw / 30);
}
}
button{
font-size: calc(100vw / 37);
}
}
&--addComment{
width: 100%;
button{
font-size: calc(100vw / 40);
}
textarea{
font-size: calc(100vw / 35);
&::placeholder{
font-size: calc(100vw / 35);
}
}
}
}
&__sidebar {
flex: 4;
&--playlist {
max-height: calc(60vh);
header {
padding: 8px 12px;
background-color: #2c2c2c;
img {
transform: translateY(-5px);
width : 30px;
}
h2 {
font-size: calc(100vw / 30);
}
p {
font-size: calc(100vw / 45);
}
}
}
&--attachments {
max-height: 200px;
header {
padding: 14px 12px;
background-color: #2c2c2c;
h2 {
font-size: calc(100vw / 30);
}
p {
font-size: calc(100vw / 45);
}
}
}
&--suggests {
header {
padding: 10px 12px;
background-color: #8bd09746;
h2 {
font-size: calc(100vw / 30);
}
span{
font-size: calc(100vw / 45);
}
}
&___list{
padding: 15px 12px;
background-color: #08793d58;
}
}
}
}
}