Reza_ashrafi
/
danovin_vod
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

reza added some light mode

Browse Source
master
Reza 3 years ago
parent 952355c1cd
commit fcb57a8c66
23 changed files with 721 additions and 359 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/icons/document-green.png
  2. BIN
      src/assets/icons/play-green.png
  3. 4
      src/components/Navbar/index.scss
  4. 2
      src/components/Navbar/index.tsx
  5. 25
      src/components/StyledRating/index.tsx
  6. 2
      src/constants/colors.scss
  7. 8
      src/custom.scss
  8. 105
      src/views/Course/Lesson/index.scss
  9. 24
      src/views/Course/Lesson/index.tsx
  10. 145
      src/views/Course/index.scss
  11. 4
      src/views/Course/index.tsx
  12. 70
      src/views/Faq/index.scss
  13. 2
      src/views/Faq/index.tsx
  14. 3
      src/views/Home/index.scss
  15. 24
      src/views/Home/index.tsx
  16. 232
      src/views/Subscription/SubscribeRadio/index.scss
  17. 2
      src/views/Subscription/SubscribeRadio/index.tsx
  18. 28
      src/views/Subscription/index.scss
  19. 1
      src/views/Subscription/index.tsx
  20. 232
      src/views/VideoTube/LessonPlayList/index.scss
  21. 2
      src/views/VideoTube/LessonPlayList/index.tsx
  22. 163
      src/views/VideoTube/index.scss
  23. 2
      src/views/VideoTube/index.tsx

BIN
src/assets/icons/document-green.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 712 B

BIN
src/assets/icons/play-green.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

4
src/components/Navbar/index.scss
Unescape View File

@ -7,7 +7,6 @@
left: 0px;
z-index: 150;
&-light{
background-color: white;
.nav___share{
background-color: inherit !important;
border: 1px solid $green1 !important;
@ -20,9 +19,6 @@
color: $gray5 !important;
}
}
&-dark{
background-color: black;
}
&__container{
width: 100%;
font-family: numeralLight;

2
src/components/Navbar/index.tsx
Unescape View File

@ -70,7 +70,7 @@ function Navbar(props: any) {
className={_.join(
[
"nav align-items-center justify-content-center",
theme === "light" ? "nav-light" : "nav-dark",
theme === "light" ? "nav-light bg-white" : "nav-dark bg-black",
],
" "
)}

25
src/components/StyledRating/index.tsx
Unescape View File

@ -1,19 +1,24 @@
import React from 'react'
import StarIcon from '@mui/icons-material/Star';
import Rating from '@mui/material/Rating';
import React from "react";
import StarIcon from "@mui/icons-material/Star";
import Rating from "@mui/material/Rating";
export default function StyledRating({rate} : any) {
export default function StyledRating({ rate, theme }: any) {
return (
<>
<Rating
<Rating
name="customized-color"
defaultValue={rate}
precision={0.5}
icon={<StarIcon style={{ fontSize : 25, color : '#FFED00' }} />}
emptyIcon={<StarIcon style={{ fontSize : 25, color : '#494949' }} />}
icon={<StarIcon style={{ fontSize: 25, color: "#FFED00" }} />}
emptyIcon={
<StarIcon
style={{
fontSize: 25,
color: theme === "dark" ? "#494949" : "#777",
}}
/>
}
/>
</>
)
);
}

2
src/constants/colors.scss
Unescape View File

@ -20,7 +20,7 @@ $green2 : #6cbe44;
$green3 : #00cc69;
$green4 : #84de56;
$green5 : #9cdf52;
$green6 : #08793d;
// blue
$blue : #a2b4cb;
$blue1 : #505a82;

8
src/custom.scss
Unescape View File

@ -31,6 +31,14 @@
display: flex;
}
.bg-black{
background-color: black !important;
}
.bg-white{
background-color: white !important;
}
p {
line-height: 1.5;
}

105
src/views/Course/Lesson/index.scss
Unescape View File

@ -2,32 +2,87 @@
transition: all 0.3s;
overflow : hidden;
border-bottom: 1px solid $gray9;
&__light{
header{
background-color : white !important;
&-light {
header {
background-color : $gray13;
border: 1px solid $gray9;
h4 {
color: $green6;
}
div {
color: $gray5;
}
}
.lesson{
&__files{
border-left: 1px solid $gray9;
border-right: 1px solid $gray9;
p{
color: $gray5;
background-color: $gray12;
}
&--sample{
&:hover{
background-color: $gray12;
}
color: $gray5;
a{
color: $gray5;
}
}
&--active{
// border-bottom: 1px solid $gray11;
}
}
}
}
&-dark{
header {
background-color: #414141;
h4 {
color: $green;
}
div {
color: $gray10;
}
}
.lesson__files *{
color: black !important;
.lesson{
&__files{
border-left: 1px solid $gray9;
border-right: 1px solid $gray9;
p{
color: white;
background-color: $gray1;
}
&--sample{
&:hover{
background-color: rgb(58, 58, 58);
}
color: white;
a{
color: white;
}
}
&--active{
// border-bottom: 1px solid $gray9;
}
}
}
}
&__active{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
// border-bottom-left-radius: 10px;
// border-bottom-right-radius: 10px;
}
header {
background-color: #414141;
// border: 1px solid $gray9 !important;
border-top-right-radius: 5px !important;
border-top-left-radius: 5px;
padding: 5px 15px !important;
cursor: pointer;
h4 {
color: $green;
margin: 0px;
}
div {
color: $gray10;
}
img{
width: 40px;
@ -35,14 +90,10 @@
}
&__files{
padding : 0px !important;
border-left: 1px solid $gray9;
border-right: 1px solid $gray9;
transition: all 0.4s ease-in;
transition: all 0.15s ease-in;
overflow: hidden;
p{
color: white;
padding: 10px 20px;
background-color: $gray1;
margin: 0px !important;
}
& img{
@ -53,17 +104,10 @@
transition: all 0.5s;
cursor: pointer;
padding: 5px 0px;
&:hover{
background-color: rgb(58, 58, 58);
}
&___active{
transition: all 0.5s;
transform: scale(1.3);
}
color: white;
a{
color: white;
}
li{
text-align: center;
}
@ -72,9 +116,6 @@
margin-bottom: 0px;
}
}
&--active{
border-bottom: 1px solid $gray9;
}
}
}
@ -196,7 +237,7 @@
@media screen and (max-width: 640px) {
.lesson {
border-radius: 10px;
// border-radius: 10px;
margin-bottom: 15px;
header {
border-top-right-radius: 10px;
@ -216,8 +257,8 @@
text-align: center;
}
&__files{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
// border-bottom-left-radius: 10px;
// border-bottom-right-radius: 10px;
padding: 0px !important;
&--sample{
img{

24
src/views/Course/Lesson/index.tsx
Unescape View File

@ -1,6 +1,8 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import whiteDropdown from "../../../assets/icons/white-dropdown.png";
import greenPlay from "../../../assets/icons/play-green.png";
import greenDocument from "../../../assets/icons/document-green.png";
import whitePlay from "../../../assets/icons/white-play.png";
import document from "../../../assets/icons/document.png";
import { connect } from "react-redux";
@ -33,10 +35,10 @@ function Lesson({
const light = theme === "light";
return (
<div
className={_.join([
"lesson d-flex flex-column",
light ? "lesson__light" : "lesson__dark",
], " ")}
className={_.join(
["lesson d-flex flex-column", light ? "lesson-light" : "lesson-dark"],
" "
)}
>
<header
className="desktop justify-content-between align-items-center"
@ -107,8 +109,18 @@ function Lesson({
}
>
<div className="d-flex align-items-center">
{data.type === "video" && <img src={whitePlay} alt="" />}
{data.type === "pdf" && <img src={document} alt="" />}
{data.type === "video" &&
(light ? (
<img src={greenPlay} alt="" />
) : (
<img src={whitePlay} alt="" />
))}
{data.type === "pdf" &&
(light ? (
<img src={greenDocument} alt="" />
) : (
<img src={document} alt="" />
))}
<img
className={
selectedLesson === data.id

145
src/views/Course/index.scss
Unescape View File

@ -1,18 +1,119 @@
@import "./Lesson/index.scss";
.course {
&__light {
.course__options--rate {
color: black;
&-light{
.course{
&__header {
border-bottom: 2px solid $gray12;
}
&__info {
&--description {
a {
color: $gray5;
}
li {
color: $gray5;
}
h1 {
color: $gray5;
}
p {
color: $gray6;
}
.course-info-items {
background-color: #9cdf5222;
i {
color: $green;
}
}
}
}
&__options {
&--rate {
border: none;
background-color: $gray12;
box-shadow: none;
color: $gray5;
}
&--button {
background-color: $gray12;
border: none;
color: $gray5;
transition: all 0.3s;
&:hover {
color: $gray5;
background-color: $gray;
}
}
}
&__list {
&--header {
h2 {
color: $green;
}
p {
color: $gray7;
}
}
}
}
.course__options--button {
background-color: white !important;
color: black;
}
&-dark{
.course{
&__header {
border-bottom: 2px solid $gray5;
}
&__info {
&--description {
a {
color: $gray5;
}
h1{
color: white;
}
li {
color: $gray5;
}
p {
color: $gray6;
}
.course-info-items {
background-color: #08793d23;
i {
color: $green;
}
}
}
}
&__options {
&--rate {
border: 2px solid $gray7;
box-shadow: 0px 0px 20px #f7ff0179;
color: white;
}
&--button {
background-color: #313131;
border: 1px solid $gray7;
color: white;
&:hover {
color: white;
}
}
}
&__list {
&--header {
h2 {
color: $green;
}
p {
color: $gray7;
}
}
}
}
}
&__header {
padding: 30px 0px 45px;
border-bottom: 2px solid $gray5;
}
&__info {
&--image {
@ -26,63 +127,35 @@
}
&--description {
padding-top: 5px;
a {
color: $gray5;
}
li {
color: $gray5;
}
h1 {
color: white;
margin-top: 12px;
}
p {
color: $gray6;
margin-top: 25px;
}
.course-info-items {
padding: 10px;
background-color: #08793d23;
border-radius: 10px;
i {
color: $green;
}
}
}
}
&__options {
&--rate {
border: 2px solid $gray7;
box-shadow: 0px 0px 20px #f7ff0179;
border-radius: 15px;
padding-top: 20px;
color: white;
}
&--button {
background-color: #313131;
border: 1px solid $gray7;
color: white;
padding: 8px;
text-align: center;
margin-top: 15px;
&:hover {
color: white;
}
}
}
&__list {
margin-bottom: 30px;
border-radius: 10px;
&--header {
padding: 20px 0px 20px !important;
border: 0px !important;
h2 {
color: $green;
}
p {
color: $gray7;
}
}
}
}
@ -266,7 +339,6 @@
@media screen and (min-width: 641px) and (max-width: 1007px) {
.course {
background: black;
main {
max-width: 900px;
padding: 0px 20px;
@ -364,7 +436,6 @@
@media screen and (max-width: 640px) {
.course {
background: black;
margin-top: 20px;
&__header {
padding: 0px;

4
src/views/Course/index.tsx
Unescape View File

@ -43,7 +43,7 @@ function Course({ getInfo, info, categories, loading, theme }: any) {
className={_.join(
[
"course main d-flex flex-column",
light ? "course__light" : "course__dark",
light ? "course-light bg-white" : "course-dark bg-black",
],
" "
)}
@ -96,7 +96,7 @@ function Course({ getInfo, info, categories, loading, theme }: any) {
</div>
<span>از 288 رای</span>
</div>
<StyledRating rate={info?.rate} />
<StyledRating rate={info?.rate} theme={theme} />
<h2>میانگین رای کاربران</h2>
</div>
<button className="course__options--button d-flex align-items-center justify-content-between">

70
src/views/Faq/index.scss
Unescape View File

@ -1,41 +1,84 @@
.faq {
&__light{
&-light{
header{
h1{
color: $gray5;
}
input{
background-color: $gray12;
}
button{
background-color: $gray1;
border-radius: 5px;
}
}
.faq{
&__list{
li{
background-color: white !important;
border: 1px solid black !important;
background-color: $gray13 !important;
p{
color: black !important;
color: $gray5 !important;
}
strong{
color: $green6;
}
}
}
}
}
&-dark{
header {
h1 {
color: white;
}
p {
color: $gray11;
}
input {
background-color: $gray5;
color: white;
&::placeholder {
color: $gray11;
}
}
button {
background-color: $gray1;
}
}
&__list {
li{
background-color: $gray5;
}
&--itemHeader {
strong {
color: $green;
}
}
&--itemBody {
p {
color: white;
}
}
}
}
header {
width: 100%;
margin: 0px auto;
padding-top: 40px;
h1 {
color: white;
margin-bottom: 15px;
}
p {
color: $gray11;
}
input {
background-color: $gray5;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border: none;
color: white;
flex: 1;
&::placeholder {
color: $gray11;
}
}
button {
background-color: $gray1;
border: none;
margin-right: 2px;
width: 70px;
@ -49,7 +92,6 @@
margin: 0px auto !important;
padding-top: 30px !important;
li{
background-color: $gray5;
margin-bottom: 15px;
cursor: pointer;
border-radius: 5px;
@ -58,9 +100,6 @@
border-top-right-radius: 5px;
border-top-left-radius: 5px;
padding: 10px;
strong {
color: $green;
}
img{
width: 30px;
}
@ -69,9 +108,6 @@
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
padding:0px 10px 30px;
p {
color: white;
}
}
}
}

2
src/views/Faq/index.tsx
Unescape View File

@ -28,7 +28,7 @@ function Faq({
<div
className={_.join([
"faq main d-flex flex-column",
light ? "faq__light" : "faq__dark",
light ? "faq-light bg-white" : "faq-dark bg-black",
], " ")}
>
<Navbar />

3
src/views/Home/index.scss
Unescape View File

@ -5,9 +5,6 @@
@import './Footer/index.scss';
@import './Header/index.scss';
.home {
}
@media screen and (min-width: 641px) and (max-width: 1007px){
.home{

24
src/views/Home/index.tsx
Unescape View File

@ -13,7 +13,7 @@ import scroll from "../../util/scroll";
import Loader from "../../components/Loader";
import { connect } from "react-redux";
import { book, publicApi } from "../../redux/actions";
import _ from 'lodash';
import _ from "lodash";
function Home({
courseList,
@ -28,7 +28,7 @@ function Home({
getHeader,
bookLoading,
publicLoading,
theme
theme,
}: any) {
const [grade, setGrade] = useState(null);
const [vocal, setVocal] = useState(false);
@ -49,7 +49,13 @@ function Home({
return (
<>
<div
className={_.join(["home main d-flex flex-column", theme === 'dark' ? 'main__dark' : 'main__light'], " ")}
className={_.join(
[
"home main d-flex flex-column",
theme === "dark" ? "home-dark bg-black" : "home-light bg-white",
],
" "
)}
style={{
filter: vocal || bookLoading || publicLoading ? "blur(8px)" : "",
}}
@ -65,7 +71,10 @@ function Home({
setInputValue={setInputValue}
theme={theme}
/>
<Courses courses={sortFilterCourse ? sortFilterCourse : courseList} theme={theme} />
<Courses
courses={sortFilterCourse ? sortFilterCourse : courseList}
theme={theme}
/>
<GradeFilter
grades={grades}
grade={grade}
@ -74,7 +83,10 @@ function Home({
setGradeDropdown={setGradeDropdown}
theme={theme}
/>
<Books list={gradeFilterBooks ? gradeFilterBooks : courseList} theme={theme} />
<Books
list={gradeFilterBooks ? gradeFilterBooks : courseList}
theme={theme}
/>
<Blogs theme={theme} />
<AppDownload theme={theme} />
<Footer />
@ -100,7 +112,7 @@ export default connect(
headerData: state.publicApi.header,
bookLoading: state.book.loading,
publicLoading: state.publicApi.loading,
theme : state.publicApi.theme,
theme: state.publicApi.theme,
}),
{
getCourseList: book.list,

232
src/views/Subscription/SubscribeRadio/index.scss
Unescape View File

@ -1,111 +1,165 @@
.subscribe-radio{
.subscribe-radio {
width: 100%;
border : 1px solid $gray7;
border: 1px solid $gray7;
margin-bottom: 15px;
border-radius: 10px;
cursor: pointer;
transition: all 0.5s;
&__name{
&-active {
box-shadow: 0px 0px 6px $green !important;
background-color: $green !important;
border: none;
.subscribe-radio__factor {
background-color: rgba(255, 255, 255, 0.18);
}
h2,p,b, strong,i {
color: white !important;
}
}
&-light {
.subscribe-radio {
&__name {
h2 {
color: $gray5;
}
}
&__factor {
background-color: rgba(255, 255, 255, 0.18);
strong,
b {
color: $gray5;
}
&--tag {
background-color: $yellow;
}
&--finalPrice {
i {
color: $gray5;
}
}
&--off {
color: #707070;
b {
color: #707070;
span {
background-color: rgb(211, 211, 211);
}
}
}
}
}
}
&-dark {
.subscribe-radio {
&__name {
h2 {
color: white;
}
}
&__factor {
background-color: rgba(255, 255, 255, 0.18);
strong,
b {
color: white;
}
&--tag {
background-color: $yellow;
}
&--finalPrice {
i {
color: white;
}
}
&--off {
color: #707070;
b {
color: #707070;
span {
background-color: rgb(211, 211, 211);
}
}
}
}
&-active {
box-shadow: 0px 0px 6px $green;
background-color: $green;
.subscribe-radio__factor {
background-color: rgba(255, 255, 255, 0.18);
}
}
}
}
&__name {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
h2{
color: white;
h2 {
margin-bottom: 0px;
}
}
&__factor{
&__factor {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
background-color: rgba(255, 255, 255, 0.18);
strong, b{
color: white;
}
&--tag{
background-color: $yellow;
&--tag {
padding: 4px 20px;
border-radius: 30px;
width: fit-content;
letter-spacing: -1px;
}
&--finalPrice{
i{
color: white;
&--finalPrice {
i {
margin-right: 10px;
}
}
&--off{
color: #707070;
b{
color: #707070;
&--off {
b {
position: relative;
span{
span {
position: absolute;
width: 100%;
height: 2px;
top: 50%;
left: 0px;
transform: translateY(-50%) rotate(-15deg);
background-color: rgb(211, 211, 211);
opacity: 0.5;
}
}
i{
i {
margin-right: 10px;
}
}
}
&-active{
box-shadow: 0px 0px 6px $green;
background-color: $green;
.subscribe-radio__factor{
background-color: rgba(255, 255, 255, 0.18);
}
}
&__light{
h2{
color: black !important;
}
.subscribe-radio{
&-active{
h2{
color: white !important;
}
}
}
}
}
@media screen and (min-width: 1441px) {
.subscribe-radio{
.subscribe-radio {
min-height: 60px;
&__name{
&__name {
flex: 7;
h2{
h2 {
font-size: 20px;
margin-right: 40px;
}
}
&__factor{
&__factor {
flex: 3;
&--tag{
&--tag {
font-size: 11px;
}
&--off{
b{
&--off {
b {
font-size: 16px;
}
i{
i {
font-size: 10px;
}
}
&--finalPrice{
i{
&--finalPrice {
i {
font-size: 12px;
}
strong{
strong {
font-size: 26px;
}
}
@ -114,33 +168,33 @@
}
@media screen and (min-width: 1008px) and (max-width: 1440px) {
.subscribe-radio{
.subscribe-radio {
min-height: 60px;
&__name{
&__name {
flex: 7;
h2{
h2 {
font-size: calc(100vw / 70);
margin-right: 40px;
}
}
&__factor{
&__factor {
flex: 3;
&--tag{
&--tag {
font-size: calc(100vw / 130);
}
&--off{
b{
&--off {
b {
font-size: calc(100vw / 80);
}
i{
i {
font-size: calc(100vw / 115);
}
}
&--finalPrice{
i{
&--finalPrice {
i {
font-size: calc(100vw / 125);
}
strong{
strong {
font-size: calc(100vw / 74);
}
}
@ -149,33 +203,33 @@
}
@media screen and (min-width: 641px) and (max-width: 1007px) {
.subscribe-radio{
.subscribe-radio {
min-height: 70px;
&__name{
&__name {
flex: 7;
h2{
h2 {
font-size: calc(100vw / 40);
margin-right: 10px;
}
}
&__factor{
&__factor {
flex: 3;
&--tag{
&--tag {
font-size: calc(100vw / 55);
}
&--off{
b{
&--off {
b {
font-size: calc(100vw / 50);
}
i{
i {
font-size: calc(100vw / 60);
}
}
&--finalPrice{
i{
&--finalPrice {
i {
font-size: calc(100vw / 45);
}
strong{
strong {
font-size: calc(100vw / 38);
}
}
@ -184,36 +238,36 @@
}
@media screen and (max-width: 640px) {
.subscribe-radio{
.subscribe-radio {
min-height: 70px;
&__name{
&__name {
flex: 7;
h2{
h2 {
font-size: calc(100vw / 25);
margin-right: 10px;
}
}
&__factor{
&__factor {
flex: 3;
&--tag{
&--tag {
font-size: calc(100vw / 45);
}
&--off{
b{
&--off {
b {
font-size: calc(100vw / 30);
}
i{
i {
font-size: calc(100vw / 45);
}
}
&--finalPrice{
i{
&--finalPrice {
i {
font-size: calc(100vw / 45);
}
strong{
strong {
font-size: calc(100vw / 20);
}
}
}
}
}
}

2
src/views/Subscription/SubscribeRadio/index.tsx
Unescape View File

@ -21,7 +21,7 @@ function SubscribeRadio({ data, selectedVOD, selectVOD, theme }: any) {
[
"subscribe-radio d-flex",
selectedVOD?.id === data.id ? "subscribe-radio-active" : "",
light ? "subscribe-radio__light" : "subscribe-radio__dark",
light ? "subscribe-radio-light" : "subscribe-radio-dark",
],
" "
)}

28
src/views/Subscription/index.scss
Unescape View File

@ -2,15 +2,29 @@
@import './SubscribeRadio/index.scss';
.subscription {
main {
h1,h2{
color: $gray;
&-dark{
main {
h1,h2{
color: $gray;
}
p{
color : $gray;
margin : 10px 0px 35px;
}
}
p{
color : $gray;
margin : 10px 0px 35px;
}
&-light{
main {
h1,h2{
color: $gray5;
}
p{
color : $gray5;
margin : 10px 0px 35px;
}
}
}
}
@media screen and (min-width : 1441px) {
@ -33,7 +47,7 @@
main{
margin-top: 20px;
max-width: 700px;
transform: scale(0.8) translateY(-80px);
transform: scale(0.9) translateY(-30px);
h1{
font-size: calc(100vw / 50);
}

1
src/views/Subscription/index.tsx
Unescape View File

@ -28,6 +28,7 @@ function Subscription({
className={_.join(
[
"subscription main d-flex flex-column",
light ? 'subscription-light bg-white' : 'subscription-dark bg-black'
],
" "
)}

232
src/views/VideoTube/LessonPlayList/index.scss
Unescape View File

@ -1,105 +1,130 @@
.lesson-playlist{
.lesson-playlist {
width: 100%;
padding-bottom : 10px;
&__light{
.lesson-playlist{
h3{
background-color : inherit !important;
border: 1px solid $gray9 !important;
}
&__item{
*{
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{
background-color: inherit !important;
header {
margin-bottom: 5px;
h3{
background-color : $gray7;
h3 {
padding: 5px 10px;
margin: 0px;
}
span{
background-color : $gray7;
span {
display: flex;
flex: 1;
height : 1px;
height: 1px;
}
}
&__item{
&--count{
color: white;
}
&--active{
background: rgba($gray12, 0.21);
}
&--text{
&__item {
&--text {
padding: 15px 10px;
h4{
color: white;
h4 {
margin: 0px;
}
p{
color: $gray7;
p {
margin: 0px;
}
}
&--video{
span{
background-color : #0000006d;
&--video {
span {
padding: 0px 5px;
position: absolute;
left: 5px;
bottom: 10px;
color: white;
}
}
}
}
@media screen and (min-width: 1441px) {
.lesson-playlist{
.lesson-playlist {
width: 100%;
header{
padding: 10px 40px 0px 0px !important;
h3{
header {
padding: 10px 40px 0px 0px !important;
h3 {
font-size: 16px;
}
span{
span {
}
}
&__item{
&__item {
padding: 10px 0px 5px 0px;
cursor: pointer;
&--count{
&--count {
font-size: 18px;
width : 40px;
width: 40px;
text-align: center;
}
&--text{
&--text {
max-width: 55%;
h4{
h4 {
font-size: 17px;
}
p{
p {
font-size: 14px;
}
}
&--video{
&--video {
width: 142px;
height: 90px;
position: relative;
img{
img {
width: 100%;
height: 100%;
}
span{
span {
font-size: 18px;
}
}
@ -108,44 +133,43 @@
}
@media screen and (min-width: 1008px) and (max-width: 1440px) {
.lesson-playlist{
.lesson-playlist {
width: 100%;
header{
padding: 10px 40px 0px 0px !important;
h3{
header {
padding: 10px 40px 0px 0px !important;
h3 {
font-size: calc(100vw / 95);
}
span{
span {
}
}
&__item{
&__item {
padding: 10px 0px 5px 0px;
cursor: pointer;
&--count{
&--count {
font-size: calc(100vw / 72);
width : 40px;
width: 40px;
text-align: center;
}
&--text{
&--text {
max-width: 55%;
h4{
h4 {
font-size: calc(100vw / 90);
}
p{
p {
font-size: calc(100vw / 100);
}
}
&--video{
&--video {
width: 132px;
height: 90px;
position: relative;
img{
width : 100%;
height : 100%;
img {
width: 100%;
height: 100%;
}
span{
font-size: calc(100vw / 100);
span {
font-size: calc(100vw / 100);
}
}
}
@ -153,44 +177,43 @@
}
@media screen and (min-width: 641px) and (max-width: 1007px) {
.lesson-playlist{
.lesson-playlist {
width: 100%;
header{
padding: 10px 50px 0px 0px !important;
h3{
header {
padding: 10px 50px 0px 0px !important;
h3 {
font-size: calc(100vw / 45);
}
span{
span {
}
}
&__item{
&__item {
padding: 10px 0px 5px 0px;
cursor: pointer;
&--count{
&--count {
font-size: calc(100vw / 35);
width : 50px;
width: 50px;
text-align: center;
}
&--text{
&--text {
max-width: 55%;
h4{
h4 {
font-size: calc(100vw / 45);
}
p{
p {
font-size: calc(100vw / 50);
}
}
&--video{
&--video {
width: 182px;
// height: 90px;
position: relative;
img{
width : 100%;
height : 100%;
img {
width: 100%;
height: 100%;
}
span{
font-size: calc(100vw / 45);
span {
font-size: calc(100vw / 45);
}
}
}
@ -198,46 +221,45 @@
}
@media screen and (max-width: 640px) {
.lesson-playlist{
.lesson-playlist {
width: 100%;
header{
padding: 10px 40px 0px 0px !important;
h3{
header {
padding: 10px 40px 0px 0px !important;
h3 {
font-size: calc(100vw / 38);
}
span{
span {
}
}
&__item{
&__item {
padding: 10px 0px 5px 0px;
cursor: pointer;
&--count{
&--count {
font-size: calc(100vw / 25);
width : 40px;
width: 40px;
text-align: center;
}
&--text{
&--text {
max-width: 55%;
h4{
h4 {
font-size: calc(100vw / 35);
}
p{
p {
font-size: calc(100vw / 40);
}
}
&--video{
&--video {
width: 132px;
height: 90px;
position: relative;
img{
width : 100%;
height : 100%;
img {
width: 100%;
height: 100%;
}
span{
font-size: calc(100vw / 40);
span {
font-size: calc(100vw / 40);
}
}
}
}
}
}

2
src/views/VideoTube/LessonPlayList/index.tsx
Unescape View File

@ -43,7 +43,7 @@ function LessonPlayList({
className={_.join(
[
"lesson-playlist d-flex flex-column",
light ? "lesson-playlist__light" : "lesson-playlist__dark",
light ? "lesson-playlist-light" : "lesson-playlist-dark",
],
" "
)}

163
src/views/VideoTube/index.scss
Unescape View File

@ -4,7 +4,8 @@
@import "./LessonPlayList/index.scss";
.video-tube {
&__light {
&-light {
background-color: white;
h1,
p {
color: black !important;
@ -13,21 +14,142 @@
&__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: white !important;
background-color: $gray13;
color: black !important;
border: none;
}
}
}
&__sidebar{
header{
background-color: white !important;
*{
&__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;
}
}
}
}
}
}
@ -35,26 +157,19 @@
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;
@ -63,9 +178,7 @@
}
}
button {
background-color: inherit;
border: none;
color: $green;
}
}
&--addComment {
@ -74,25 +187,18 @@
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;
@ -110,28 +216,23 @@
/* 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;
@ -148,33 +249,26 @@
/* 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;
}
}
@ -571,7 +665,6 @@
}
&___list {
padding: 15px 12px;
background-color: #08793d58;
}
}
}

2
src/views/VideoTube/index.tsx
Unescape View File

@ -52,7 +52,7 @@ function VodTube({
className={_.join(
[
"video-tube main d-flex flex-column",
light ? "video-tube__light" : "video-tube__dark",
light ? "video-tube-light bg-white" : "video-tube-dark bg-black",
],
" "
)}

Write Preview
Loading…
Cancel
Save