@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; } } } } }