Reza_ashrafi
3 years ago
parent
5ee952357e
commit
25d6080fd7
27 changed files with 343 additions and 1486 deletions
|
After Width: | Height: | Size: 379 B |
@ -0,0 +1,36 @@ |
||||
// gray |
||||
$gray : #aaa; |
||||
$gray1 : #383838; |
||||
$gray2 : #6c6c6c; |
||||
$gray3 : rgb(143, 142, 142); |
||||
$gray4 : #666666; |
||||
$gray5 : #555; |
||||
$gray6 : #ddd; |
||||
$gray7 : #797979; |
||||
$gray8 : #272727; |
||||
$gray9 : #b3b3b3; |
||||
$gray10 : #cccccc; |
||||
$gray11 : #969696; |
||||
$gray12 : #e9e9e9; |
||||
$gray13 : #f6f6f6; |
||||
// green |
||||
$green : #4dd35b; |
||||
$green1 : #81C342; |
||||
$green2 : #6cbe44; |
||||
$green3 : #00cc69; |
||||
$green4 : #84de56; |
||||
$green5 : #9cdf52; |
||||
$green6 : #08793d; |
||||
// blue |
||||
$blue : #a2b4cb; |
||||
$blue1 : #505a82; |
||||
$blue2 : #00FFF8; |
||||
// red |
||||
$red : red; |
||||
$red1 : rgb(255, 115, 115); |
||||
|
||||
//yellow |
||||
$yellow : #FFD70F; |
||||
|
||||
//orange |
||||
$orange : orange; |
||||
@ -1,15 +1,23 @@ |
||||
import React from "react"; |
||||
import { BrowserRouter, Routes, Route } from "react-router-dom"; |
||||
import Home from "./views/Home/index"; |
||||
import Home from "./views/Home"; |
||||
import VideoTube from "./views/Home/VideoTube"; |
||||
|
||||
export default function router() { |
||||
return ( |
||||
<BrowserRouter> |
||||
<Routes> |
||||
<Route path="/" element={<Home />} /> |
||||
<Route path="*" element={<main><h1>No matches routes.</h1></main>} /> |
||||
<Route path="/vod" element={<VideoTube />} /> |
||||
<Route |
||||
path="*" |
||||
element={ |
||||
<main> |
||||
<h1>No matches routes.</h1> |
||||
</main> |
||||
} |
||||
/> |
||||
</Routes> |
||||
</BrowserRouter> |
||||
|
||||
); |
||||
} |
||||
|
||||
@ -1,28 +0,0 @@ |
||||
import React, { useState, useEffect } from "react"; |
||||
import _ from "lodash"; |
||||
import scroll from "../../../utils/scroll"; |
||||
|
||||
|
||||
export default function Page5({ list, page }) { |
||||
const [top, setTop] = useState(window.innerHeight); |
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", (e) => { |
||||
setTop(scroll.homeScrollHandler(page)); |
||||
}); |
||||
}, []); |
||||
return ( |
||||
<div |
||||
className={_.join( |
||||
[ |
||||
"fixed left-0 h-screen w-full pt-20 bg-gray-500", |
||||
], |
||||
" " |
||||
)} |
||||
style={{ top: top }} |
||||
> |
||||
|
||||
</div> |
||||
); |
||||
} |
||||
|
||||
@ -1,28 +0,0 @@ |
||||
import React, { useState, useEffect } from "react"; |
||||
import _ from "lodash"; |
||||
import scroll from "../../../utils/scroll"; |
||||
|
||||
|
||||
export default function Page6({ list, page }) { |
||||
const [top, setTop] = useState(window.innerHeight); |
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", (e) => { |
||||
setTop(scroll.homeScrollHandler(page)); |
||||
}); |
||||
}, []); |
||||
return ( |
||||
<div |
||||
className={_.join( |
||||
[ |
||||
"fixed left-0 h-screen w-full pt-20 bg-gray-600", |
||||
], |
||||
" " |
||||
)} |
||||
style={{ top: top }} |
||||
> |
||||
|
||||
</div> |
||||
); |
||||
} |
||||
|
||||
@ -1,27 +0,0 @@ |
||||
import React, { useState, useEffect } from "react"; |
||||
import _ from "lodash"; |
||||
import scroll from "../../../utils/scroll"; |
||||
|
||||
export default function Page7({ list, page }) { |
||||
const [top, setTop] = useState(window.innerHeight); |
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", (e) => { |
||||
setTop(scroll.homeScrollHandler(page)); |
||||
}); |
||||
}, []); |
||||
return ( |
||||
<div |
||||
className={_.join( |
||||
[ |
||||
"fixed left-0 h-screen w-full pt-20 bg-gray-700", |
||||
], |
||||
" " |
||||
)} |
||||
style={{ top: top }} |
||||
> |
||||
|
||||
</div> |
||||
); |
||||
} |
||||
|
||||
@ -1,13 +1,15 @@ |
||||
import React from 'react'; |
||||
import React from "react"; |
||||
|
||||
export default function Attachments({ file, num }) { |
||||
return ( |
||||
<div className="download-attachments d-flex justify-content-between align-items-center"> |
||||
<div className="d-flex"> |
||||
<div className="my-0 mx-auto border-b-2 flex justify-between items-center"> |
||||
<div className="flex"> |
||||
<span>{num}</span> |
||||
<h4>{file.name}</h4> |
||||
<h4 className="m-0">{file.name}</h4> |
||||
</div> |
||||
<a href={file.file} download>دریافت</a> |
||||
<a href={file.file} download className="py-1 px-4 border rounded-md"> |
||||
دریافت |
||||
</a> |
||||
</div> |
||||
) |
||||
); |
||||
} |
||||
|
||||
@ -1,70 +0,0 @@ |
||||
.download-attachments{ |
||||
color: white; |
||||
margin: 0px auto; |
||||
border-bottom: 1px solid $gray8; |
||||
span{ |
||||
|
||||
} |
||||
h4{ |
||||
margin: 0px; |
||||
} |
||||
a{ |
||||
padding: 5px 15px; |
||||
border: 1px solid $gray7; |
||||
color: white; |
||||
text-decoration: none; |
||||
border-radius: 8px; |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1441px) { |
||||
.download-attachments{ |
||||
width: calc(100% - 20px); |
||||
padding: 20px 0px; |
||||
a{ |
||||
font-size: 13px; |
||||
} |
||||
h4{ |
||||
font-size: 15px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||
.download-attachments{ |
||||
width: calc(100% - 20px); |
||||
padding: 10px 0px; |
||||
a{ |
||||
font-size: calc(100vw / 100); |
||||
} |
||||
h4{ |
||||
font-size: calc(100vw / 100); |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 641px) and (max-width: 1007px) { |
||||
.download-attachments{ |
||||
width: calc(100% - 20px); |
||||
padding: 10px 0px; |
||||
a{ |
||||
font-size: calc(100vw / 50); |
||||
} |
||||
h4{ |
||||
font-size: calc(100vw / 50); |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width: 640px) { |
||||
.download-attachments{ |
||||
width: calc(100% - 20px); |
||||
padding: 10px 0px; |
||||
a{ |
||||
font-size: calc(100vw / 40); |
||||
} |
||||
h4{ |
||||
font-size: calc(100vw / 40); |
||||
} |
||||
} |
||||
} |
||||
@ -1,82 +0,0 @@ |
||||
.video-tube-suggest{ |
||||
color: white; |
||||
img{ |
||||
border-top-right-radius: 10px; |
||||
border-top-left-radius: 10px; |
||||
border-bottom-right-radius: 10px; |
||||
border-bottom-left-radius: 24px; |
||||
margin-bottom: 10px; |
||||
transition: all 0.5s; |
||||
} |
||||
&:hover{ |
||||
color: white; |
||||
img{ |
||||
transform: translateY(-10px); |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1441px) { |
||||
.video-tube-suggest{ |
||||
width: 30%; |
||||
img{ |
||||
width: 130px; |
||||
height: 180px; |
||||
} |
||||
h4{ |
||||
font-size: 15px; |
||||
} |
||||
p{ |
||||
font-size: 11px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||
.video-tube-suggest{ |
||||
width: 30%; |
||||
img{ |
||||
width: 100%; |
||||
// height: 180px; |
||||
} |
||||
h4{ |
||||
font-size: calc(100vw / 90); |
||||
} |
||||
p{ |
||||
font-size: calc(100vw / 110); |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 641px) and (max-width: 1007px) { |
||||
.video-tube-suggest{ |
||||
width: 30%; |
||||
img{ |
||||
width: 200px; |
||||
// height: 180px; |
||||
} |
||||
h4{ |
||||
font-size: calc(100vw / 43); |
||||
} |
||||
p{ |
||||
font-size: calc(100vw / 52); |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width: 640px) { |
||||
.video-tube-suggest{ |
||||
width: 30%; |
||||
img{ |
||||
width: 100px; |
||||
// height: 180px; |
||||
} |
||||
h4{ |
||||
font-size: calc(100vw / 36); |
||||
} |
||||
p{ |
||||
font-size: calc(100vw / 43); |
||||
} |
||||
} |
||||
} |
||||
@ -1,92 +0,0 @@ |
||||
.video-tube-comment{ |
||||
padding: 10px 0px; |
||||
color: white; |
||||
div{ |
||||
} |
||||
button{ |
||||
background-color: inherit; |
||||
color: $green; |
||||
border: none; |
||||
margin-left: 20px; |
||||
} |
||||
p{ |
||||
line-height: 1.5; |
||||
margin-bottom: 15px; |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1441px){ |
||||
.video-tube-comment{ |
||||
width: 90%; |
||||
p{ |
||||
font-size: 13px; |
||||
strong{ |
||||
font-size: 15px; |
||||
margin-left: 5px; |
||||
} |
||||
} |
||||
button{ |
||||
font-size: 13px; |
||||
} |
||||
span{ |
||||
font-size: 15px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||
.video-tube-comment{ |
||||
width: 90%; |
||||
p{ |
||||
font-size: calc(100vw / 105); |
||||
strong{ |
||||
font-size: calc(100vw / 90); |
||||
margin-left: 5px; |
||||
} |
||||
} |
||||
button{ |
||||
font-size: calc(100vw / 100) !important; |
||||
} |
||||
span{ |
||||
font-size: calc(100vw / 90); |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 641px) and (max-width: 1007px) { |
||||
.video-tube-comment{ |
||||
width: 95%; |
||||
p{ |
||||
font-size: calc(100vw / 50); |
||||
strong{ |
||||
font-size: calc(100vw / 45); |
||||
margin-left: 5px; |
||||
} |
||||
} |
||||
button{ |
||||
font-size: calc(100vw / 50) !important; |
||||
} |
||||
span{ |
||||
font-size: calc(100vw / 45); |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width: 640px) { |
||||
.video-tube-comment{ |
||||
width: 95%; |
||||
p{ |
||||
font-size: calc(100vw / 38); |
||||
strong{ |
||||
font-size: calc(100vw / 35); |
||||
margin-left: 5px; |
||||
} |
||||
} |
||||
button{ |
||||
font-size: calc(100vw / 40) !important; |
||||
} |
||||
span{ |
||||
font-size: calc(100vw / 35); |
||||
} |
||||
} |
||||
} |
||||
@ -1,265 +0,0 @@ |
||||
.lesson-playlist { |
||||
width: 100%; |
||||
padding-bottom: 10px; |
||||
&-light { |
||||
header { |
||||
background-color: inherit !important; |
||||
h3 { |
||||
background-color: $gray12; |
||||
} |
||||
} |
||||
.lesson-playlist { |
||||
&__item { |
||||
* { |
||||
color: black !important; |
||||
} |
||||
&--active{ |
||||
background-color: $gray13; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&-dark { |
||||
header { |
||||
background-color: inherit !important; |
||||
h3 { |
||||
background-color: $gray7; |
||||
} |
||||
span { |
||||
background-color: $gray7; |
||||
} |
||||
} |
||||
.lesson-playlist { |
||||
|
||||
&__item { |
||||
&--count { |
||||
color: white; |
||||
} |
||||
&--active { |
||||
background: rgba($gray12, 0.21); |
||||
} |
||||
&--text { |
||||
h4 { |
||||
color: white; |
||||
} |
||||
p { |
||||
color: $gray7; |
||||
} |
||||
} |
||||
&--video { |
||||
span { |
||||
background-color: #0000006d; |
||||
color: white; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
header { |
||||
margin-bottom: 5px; |
||||
h3 { |
||||
padding: 5px 10px; |
||||
margin: 0px; |
||||
} |
||||
span { |
||||
display: flex; |
||||
flex: 1; |
||||
height: 1px; |
||||
} |
||||
} |
||||
&__item { |
||||
&--text { |
||||
padding: 15px 10px; |
||||
h4 { |
||||
margin: 0px; |
||||
} |
||||
p { |
||||
margin: 0px; |
||||
} |
||||
} |
||||
&--video { |
||||
span { |
||||
padding: 0px 5px; |
||||
position: absolute; |
||||
left: 5px; |
||||
bottom: 10px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1441px) { |
||||
.lesson-playlist { |
||||
width: 100%; |
||||
header { |
||||
padding: 10px 40px 0px 0px !important; |
||||
h3 { |
||||
font-size: 16px; |
||||
} |
||||
span { |
||||
} |
||||
} |
||||
&__item { |
||||
padding: 10px 0px 5px 0px; |
||||
cursor: pointer; |
||||
&--count { |
||||
font-size: 18px; |
||||
width: 40px; |
||||
text-align: center; |
||||
} |
||||
&--text { |
||||
max-width: 55%; |
||||
h4 { |
||||
font-size: 17px; |
||||
} |
||||
p { |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
&--video { |
||||
width: 142px; |
||||
height: 90px; |
||||
position: relative; |
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
span { |
||||
font-size: 18px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||
.lesson-playlist { |
||||
width: 100%; |
||||
header { |
||||
padding: 10px 40px 0px 0px !important; |
||||
h3 { |
||||
font-size: calc(100vw / 95); |
||||
} |
||||
span { |
||||
} |
||||
} |
||||
&__item { |
||||
padding: 10px 0px 5px 0px; |
||||
cursor: pointer; |
||||
&--count { |
||||
font-size: calc(100vw / 72); |
||||
width: 40px; |
||||
text-align: center; |
||||
} |
||||
&--text { |
||||
max-width: 55%; |
||||
h4 { |
||||
font-size: calc(100vw / 90); |
||||
} |
||||
p { |
||||
font-size: calc(100vw / 100); |
||||
} |
||||
} |
||||
&--video { |
||||
width: 132px; |
||||
height: 90px; |
||||
position: relative; |
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
span { |
||||
font-size: calc(100vw / 100); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 641px) and (max-width: 1007px) { |
||||
.lesson-playlist { |
||||
width: 100%; |
||||
header { |
||||
padding: 10px 50px 0px 0px !important; |
||||
h3 { |
||||
font-size: calc(100vw / 45); |
||||
} |
||||
span { |
||||
} |
||||
} |
||||
&__item { |
||||
padding: 10px 0px 5px 0px; |
||||
cursor: pointer; |
||||
&--count { |
||||
font-size: calc(100vw / 35); |
||||
width: 50px; |
||||
text-align: center; |
||||
} |
||||
&--text { |
||||
max-width: 55%; |
||||
h4 { |
||||
font-size: calc(100vw / 45); |
||||
} |
||||
p { |
||||
font-size: calc(100vw / 50); |
||||
} |
||||
} |
||||
&--video { |
||||
width: 182px; |
||||
// height: 90px; |
||||
position: relative; |
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
span { |
||||
font-size: calc(100vw / 45); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width: 640px) { |
||||
.lesson-playlist { |
||||
width: 100%; |
||||
header { |
||||
padding: 10px 40px 0px 0px !important; |
||||
h3 { |
||||
font-size: calc(100vw / 38); |
||||
} |
||||
span { |
||||
} |
||||
} |
||||
&__item { |
||||
padding: 10px 0px 5px 0px; |
||||
cursor: pointer; |
||||
&--count { |
||||
font-size: calc(100vw / 25); |
||||
width: 40px; |
||||
text-align: center; |
||||
} |
||||
&--text { |
||||
max-width: 55%; |
||||
h4 { |
||||
font-size: calc(100vw / 35); |
||||
} |
||||
p { |
||||
font-size: calc(100vw / 40); |
||||
} |
||||
} |
||||
&--video { |
||||
width: 132px; |
||||
height: 90px; |
||||
position: relative; |
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
span { |
||||
font-size: calc(100vw / 40); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,672 +0,0 @@ |
||||
@import "./Attachments/index.scss"; |
||||
@import "./Book/index.scss"; |
||||
@import "./Comment/index.scss"; |
||||
@import "./LessonPlayList/index.scss"; |
||||
|
||||
.video-tube { |
||||
&-light { |
||||
background-color: white; |
||||
h1, |
||||
p { |
||||
color: black !important; |
||||
} |
||||
.video-tube { |
||||
&__content { |
||||
&--comments { |
||||
color: black !important; |
||||
header{ |
||||
background-color: inherit !important; |
||||
h2{ |
||||
color: $green !important; |
||||
} |
||||
} |
||||
button{ |
||||
color: $green !important; |
||||
background-color: inherit; |
||||
} |
||||
} |
||||
&--addComment { |
||||
textarea { |
||||
background-color: $gray13; |
||||
color: black !important; |
||||
border: none; |
||||
} |
||||
} |
||||
} |
||||
&__sidebar { |
||||
header { |
||||
background-color: $gray12; |
||||
* { |
||||
color: black !important; |
||||
} |
||||
} |
||||
&--playlist{ |
||||
border: 1px solid $gray7; |
||||
border-top: none; |
||||
} |
||||
&--suggests{ |
||||
border : none; |
||||
&__list{ |
||||
background-color: inherit; |
||||
} |
||||
} |
||||
&--attachments{ |
||||
border: none; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&-dark { |
||||
.video-tube{ |
||||
&__content { |
||||
&--display { |
||||
border-bottom: 1px solid $gray8; |
||||
video { |
||||
border: 1px solid $gray8; |
||||
} |
||||
span { |
||||
color: $green4; |
||||
} |
||||
h1 { |
||||
color: white; |
||||
} |
||||
p { |
||||
color: white; |
||||
} |
||||
} |
||||
&--comments { |
||||
color: white; |
||||
border-bottom: 1px solid $gray8; |
||||
header { |
||||
h2 { |
||||
color: white; |
||||
} |
||||
} |
||||
button { |
||||
background-color: inherit; |
||||
color: $green; |
||||
} |
||||
} |
||||
&--addComment { |
||||
textarea { |
||||
background-color: $gray8; |
||||
color: white; |
||||
&::placeholder { |
||||
color: $gray4; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&__sidebar { |
||||
&--playlist { |
||||
border: 1px solid $gray8; |
||||
header { |
||||
color: white; |
||||
} |
||||
&___list { |
||||
/* Track */ |
||||
&::-webkit-scrollbar-track { |
||||
box-shadow: inset 0 0 5px inherit; |
||||
} |
||||
|
||||
/* Handle */ |
||||
&::-webkit-scrollbar-thumb { |
||||
background: $gray; |
||||
} |
||||
|
||||
/* Handle on hover */ |
||||
&::-webkit-scrollbar-thumb:hover { |
||||
background: white; |
||||
} |
||||
} |
||||
} |
||||
&--attachments { |
||||
border: 1px solid $gray8; |
||||
header { |
||||
color: white; |
||||
} |
||||
&___list { |
||||
/* Track */ |
||||
&::-webkit-scrollbar-track { |
||||
box-shadow: inset 0 0 5px inherit; |
||||
} |
||||
/* Handle */ |
||||
&::-webkit-scrollbar-thumb { |
||||
background: $gray10; |
||||
} |
||||
/* Handle on hover */ |
||||
&::-webkit-scrollbar-thumb:hover { |
||||
background: white; |
||||
} |
||||
} |
||||
} |
||||
&--suggests { |
||||
border: 1px solid $gray8; |
||||
header { |
||||
color: white; |
||||
span { |
||||
background-color: #00fff74f; |
||||
color: $blue2; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&__content { |
||||
margin-left: 15px; |
||||
|
||||
&--display { |
||||
padding-bottom: 30px; |
||||
video { |
||||
} |
||||
span { |
||||
padding: 15px 0px; |
||||
} |
||||
h1 { |
||||
margin-bottom: 20px; |
||||
} |
||||
p { |
||||
} |
||||
} |
||||
&--comments { |
||||
padding-bottom: 30px; |
||||
header { |
||||
padding: 20px 0px; |
||||
h2 { |
||||
margin: 0px; |
||||
} |
||||
} |
||||
button { |
||||
border: none; |
||||
} |
||||
} |
||||
&--addComment { |
||||
padding: 15px 0px; |
||||
|
||||
textarea { |
||||
width: 100%; |
||||
border-radius: 12px; |
||||
padding: 10px; |
||||
&:focus { |
||||
outline: none; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&__sidebar { |
||||
&--playlist { |
||||
margin-bottom: 30px; |
||||
header { |
||||
width: 100%; |
||||
h2, |
||||
p { |
||||
margin: 0px; |
||||
} |
||||
p { |
||||
margin-top: 5px; |
||||
} |
||||
} |
||||
&___list { |
||||
padding-top: 10px; |
||||
overflow-y: scroll; |
||||
&::-webkit-scrollbar { |
||||
width: 8px; |
||||
} |
||||
|
||||
/* Track */ |
||||
&::-webkit-scrollbar-track { |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
/* Handle */ |
||||
&::-webkit-scrollbar-thumb { |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
/* Handle on hover */ |
||||
&::-webkit-scrollbar-thumb:hover { |
||||
} |
||||
} |
||||
} |
||||
&--attachments { |
||||
margin-bottom: 30px; |
||||
header { |
||||
width: 100%; |
||||
h2, |
||||
p { |
||||
margin: 0px; |
||||
} |
||||
p { |
||||
margin-top: 5px; |
||||
} |
||||
} |
||||
&___list { |
||||
overflow-y: scroll; |
||||
&::-webkit-scrollbar { |
||||
width: 8px; |
||||
} |
||||
|
||||
/* Track */ |
||||
&::-webkit-scrollbar-track { |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
/* Handle */ |
||||
&::-webkit-scrollbar-thumb { |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
/* Handle on hover */ |
||||
&::-webkit-scrollbar-thumb:hover { |
||||
} |
||||
} |
||||
} |
||||
&--suggests { |
||||
background-color: inherit; |
||||
header { |
||||
width: 100%; |
||||
h2 { |
||||
margin: 0px; |
||||
} |
||||
span { |
||||
padding: 5px 8px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1441px) { |
||||
.video-tube { |
||||
main { |
||||
max-width: $maxWidth; |
||||
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 { |
||||
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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue