qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- 스타일 추가 / 수정

Browse Source
This commit is contained in:
minsik 2024-09-11 18:05:15 +09:00
parent 1908432913
commit f9d1f8e2e0
6 changed files with 511 additions and 423 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/styles/_contents.scss
View File

@ -3,6 +3,7 @@
height: calc(100vh - 47px); height: calc(100vh - 47px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #fff;
.canvas-content { .canvas-content {
flex: 1 1 auto; flex: 1 1 auto;

264
src/styles/_fonts.scss
View File

@ -1,199 +1,199 @@
@font-face { @font-face {
font-family: 'Noto Sans JP'; font-family: 'Noto Sans JP';
src: url('/fonts/NotoSansJP-ExtraBold.woff2') format('woff2'), src: url('/fonts/NotoSansJP-ExtraBold.woff2') format('woff2'),
url('/fonts/NotoSansJP-ExtraBold.woff') format('woff'); url('/fonts/NotoSansJP-ExtraBold.woff') format('woff');
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Noto Sans JP'; font-family: 'Noto Sans JP';
src: url('/fonts/NotoSansJP-Bold.woff2') format('woff2'), src: url('/fonts/NotoSansJP-Bold.woff2') format('woff2'),
url('/fonts/NotoSansJP-Bold.woff') format('woff'); url('/fonts/NotoSansJP-Bold.woff') format('woff');
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Noto Sans JP'; font-family: 'Noto Sans JP';
src: url('/fonts/NotoSansJP-Black.woff2') format('woff2'), src: url('/fonts/NotoSansJP-Black.woff2') format('woff2'),
url('/fonts/NotoSansJP-Black.woff') format('woff'); url('/fonts/NotoSansJP-Black.woff') format('woff');
font-weight: 900; font-weight: 900;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Noto Sans JP'; font-family: 'Noto Sans JP';
src: url('/fonts/NotoSansJP-ExtraLight.woff2') format('woff2'), src: url('/fonts/NotoSansJP-ExtraLight.woff2') format('woff2'),
url('/fonts/NotoSansJP-ExtraLight.woff') format('woff'); url('/fonts/NotoSansJP-ExtraLight.woff') format('woff');
font-weight: 200; font-weight: 200;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Noto Sans JP'; font-family: 'Noto Sans JP';
src: url('/fonts/NotoSansJP-Light.woff2') format('woff2'), src: url('/fonts/NotoSansJP-Light.woff2') format('woff2'),
url('/fonts/NotoSansJP-Light.woff') format('woff'); url('/fonts/NotoSansJP-Light.woff') format('woff');
font-weight: 300; font-weight: 300;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Noto Sans JP'; font-family: 'Noto Sans JP';
src: url('/fonts/NotoSansJP-Medium.woff2') format('woff2'), src: url('/fonts/NotoSansJP-Medium.woff2') format('woff2'),
url('/fonts/NotoSansJP-Medium.woff') format('woff'); url('/fonts/NotoSansJP-Medium.woff') format('woff');
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Noto Sans JP'; font-family: 'Noto Sans JP';
src: url('/fonts/NotoSansJP-Regular.woff2') format('woff2'), src: url('/fonts/NotoSansJP-Regular.woff2') format('woff2'),
url('/fonts/NotoSansJP-Regular.woff') format('woff'); url('/fonts/NotoSansJP-Regular.woff') format('woff');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Noto Sans JP'; font-family: 'Noto Sans JP';
src: url('/fonts/NotoSansJP-SemiBold.woff2') format('woff2'), src: url('/fonts/NotoSansJP-SemiBold.woff2') format('woff2'),
url('/fonts/NotoSansJP-SemiBold.woff') format('woff'); url('/fonts/NotoSansJP-SemiBold.woff') format('woff');
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Noto Sans JP'; font-family: 'Noto Sans JP';
src: url('/fonts/NotoSansJP-Thin.woff2') format('woff2'), src: url('/fonts/NotoSansJP-Thin.woff2') format('woff2'),
url('/fonts/NotoSansJP-Thin.woff') format('woff'); url('/fonts/NotoSansJP-Thin.woff') format('woff');
font-weight: 100; font-weight: 100;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
// pretendard // pretendard
@font-face { @font-face {
font-family: 'Pretendard'; font-family: 'Pretendard';
src: url('/fonts/Pretendard-Bold.woff2') format('woff2'), src: url('/fonts/Pretendard-Bold.woff2') format('woff2'),
url('/fonts/Pretendard-Bold.woff') format('woff'); url('/fonts/Pretendard-Bold.woff') format('woff');
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Pretendard'; font-family: 'Pretendard';
src: url('/fonts/Pretendard-ExtraBold.woff2') format('woff2'), src: url('/fonts/Pretendard-ExtraBold.woff2') format('woff2'),
url('/fonts/Pretendard-ExtraBold.woff') format('woff'); url('/fonts/Pretendard-ExtraBold.woff') format('woff');
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Pretendard'; font-family: 'Pretendard';
src: url('/fonts/Pretendard-ExtraBold.woff2') format('woff2'), src: url('/fonts/Pretendard-ExtraBold.woff2') format('woff2'),
url('/fonts/Pretendard-ExtraBold.woff') format('woff'); url('/fonts/Pretendard-ExtraBold.woff') format('woff');
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Pretendard'; font-family: 'Pretendard';
src: url('/fonts/Pretendard-ExtraLight.woff2') format('woff2'), src: url('/fonts/Pretendard-ExtraLight.woff2') format('woff2'),
url('/fonts/Pretendard-ExtraLight.woff') format('woff'); url('/fonts/Pretendard-ExtraLight.woff') format('woff');
font-weight: 200; font-weight: 200;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Pretendard'; font-family: 'Pretendard';
src: url('/fonts/Pretendard-ExtraLight.woff2') format('woff2'), src: url('/fonts/Pretendard-ExtraLight.woff2') format('woff2'),
url('/fonts/Pretendard-ExtraLight.woff') format('woff'); url('/fonts/Pretendard-ExtraLight.woff') format('woff');
font-weight: 200; font-weight: 200;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Pretendard'; font-family: 'Pretendard';
src: url('/fonts/Pretendard-Light.woff2') format('woff2'), src: url('/fonts/Pretendard-Light.woff2') format('woff2'),
url('/fonts/Pretendard-Light.woff') format('woff'); url('/fonts/Pretendard-Light.woff') format('woff');
font-weight: 300; font-weight: 300;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Pretendard'; font-family: 'Pretendard';
src: url('/fonts/Pretendard-Light.woff2') format('woff2'), src: url('/fonts/Pretendard-Light.woff2') format('woff2'),
url('/fonts/Pretendard-Light.woff') format('woff'); url('/fonts/Pretendard-Light.woff') format('woff');
font-weight: 300; font-weight: 300;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Pretendard'; font-family: 'Pretendard';
src: url('/fonts/Pretendard-Medium.woff2') format('woff2'), src: url('/fonts/Pretendard-Medium.woff2') format('woff2'),
url('/fonts/Pretendard-Medium.woff') format('woff'); url('/fonts/Pretendard-Medium.woff') format('woff');
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Pretendard'; font-family: 'Pretendard';
src: url('/fonts/Pretendard-Medium.woff2') format('woff2'), src: url('/fonts/Pretendard-Medium.woff2') format('woff2'),
url('/fonts/Pretendard-Medium.woff') format('woff'); url('/fonts/Pretendard-Medium.woff') format('woff');
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Pretendard'; font-family: 'Pretendard';
src: url('/fonts/Pretendard-Regular.woff2') format('woff2'), src: url('/fonts/Pretendard-Regular.woff2') format('woff2'),
url('/fonts/Pretendard-Regular.woff') format('woff'); url('/fonts/Pretendard-Regular.woff') format('woff');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Pretendard'; font-family: 'Pretendard';
src: url('/fonts/Pretendard-Black.woff2') format('woff2'), src: url('/fonts/Pretendard-Black.woff2') format('woff2'),
url('/fonts/Pretendard-Black.woff') format('woff'); url('/fonts/Pretendard-Black.woff') format('woff');
font-weight: 900; font-weight: 900;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Pretendard'; font-family: 'Pretendard';
src: url('/fonts/Pretendard-Black.woff2') format('woff2'), src: url('/fonts/Pretendard-Black.woff2') format('woff2'),
url('/fonts/Pretendard-Black.woff') format('woff'); url('/fonts/Pretendard-Black.woff') format('woff');
font-weight: 900; font-weight: 900;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Pretendard'; font-family: 'Pretendard';
src: url('/fonts/Pretendard-Bold.woff2') format('woff2'), src: url('/fonts/Pretendard-Bold.woff2') format('woff2'),
url('/fonts/Pretendard-Bold.woff') format('woff'); url('/fonts/Pretendard-Bold.woff') format('woff');
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }

452
src/styles/_layout.scss
View File

@ -1,216 +1,250 @@
.wrap{ .wrap {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 1600px; min-width: 1600px;
min-height: 100vh; min-height: 100vh;
overflow-x: hidden; overflow-x: hidden;
} }
.content{
flex: 1 1 auto; .content {
padding-top: 46px; position: relative;
flex: 1 1 auto;
padding-top: 46px;
background-color: #F4F4F7;
} }
// header // header
// nav item 공통 // nav item 공통
@mixin navitem(){ @mixin navitem() {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
height: 100%; height: 100%;
padding-right: 12px; padding-right: 12px;
transition: color .17s ease-in-out; transition: color .17s ease-in-out;
} }
header{
position: fixed; header {
top: 0; position: fixed;
left: 0; top: 0;
width: 100%; left: 0;
min-width: 1600px; width: 100%;
height: 46px; min-width: 1600px;
background-color: #1C1C1C; height: 46px;
border-bottom: 1px solid #000; background-color: #1C1C1C;
z-index: 9999; border-bottom: 1px solid #000;
.header-inner{ z-index: 9999;
display: flex;
align-items: center; .header-inner {
height: 100%; display: flex;
padding: 0 40px; align-items: center;
.header-right{ height: 100%;
display: flex; padding: 0 40px;
height: 100%;
align-items: center; .header-right {
.logo{ display: flex;
a{ height: 100%;
display: block; align-items: center;
width: 232px;
height: 30px; .logo {
background: url(/static/images/common/Logo.svg)no-repeat center; a {
background-size: contain; display: block;
} width: 232px;
} height: 30px;
nav{ background: url(/static/images/common/Logo.svg) no-repeat center;
margin-left: 50px; background-size: contain;
height: 100%; }
.nav-list{ }
display: flex;
align-items: center; nav {
height: 100%; margin-left: 50px;
.nav-item{ height: 100%;
position: relative;
margin-right: 62px; .nav-list {
height: 100%; display: flex;
a{ align-items: center;
@include navitem; height: 100%;
}
button{ .nav-item {
@include navitem; position: relative;
&:after{ margin-right: 62px;
content: ''; height: 100%;
position: absolute;
top: 50%; a {
right: 0; @include navitem;
transform: translateY(-50%); }
width: 6px;
height: 10px; button {
background: url(/static/images/common/nav-arr.svg)no-repeat center; @include navitem;
transition: all .17s ease-in-out;
} &:after {
} content: '';
&:last-child{ position: absolute;
margin-right: 0; top: 50%;
} right: 0;
.nav-depth2{ transform: translateY(-50%);
position: absolute; width: 6px;
top: calc(100% - 2px); height: 10px;
left: 50%; background: url(/static/images/common/nav-arr.svg) no-repeat center;
transform: translateX(-50%); transition: all .17s ease-in-out;
min-width: 100px; }
background-color: #1C1C1C; }
border: 1px solid #464646;
padding: 24px; &:last-child {
opacity: 0; margin-right: 0;
visibility: hidden; }
transition: all .17s ease-in-out;
.nav-depth2-item{ .nav-depth2 {
margin-bottom: 10px; position: absolute;
transition: all .17s ease-in-out; top: calc(100% - 2px);
a{ left: 50%;
font-size: 13px; transform: translateX(-50%);
font-weight: normal; min-width: 100px;
white-space: nowrap; background-color: #1C1C1C;
} border: 1px solid #464646;
&:last-child{ padding: 24px;
margin-bottom: 0; opacity: 0;
} visibility: hidden;
&.mouse{ transition: all .17s ease-in-out;
opacity: 0.55;
} .nav-depth2-item {
} margin-bottom: 10px;
&::before{ transition: all .17s ease-in-out;
content: '';
position: absolute; a {
top: -5px; font-size: 13px;
left: 50%; font-weight: normal;
transform: translateX(-50%) rotate(45deg); white-space: nowrap;
width: 8px; }
height: 8px;
background-color: #1c1c1c; &:last-child {
border-top: 1px solid #464646; margin-bottom: 0;
border-left: 1px solid #464646; }
}
} &.mouse {
&.mouse{ opacity: 0.55;
> a{ }
color: rgba(255, 255, 255, 0.30); }
}
> button{ &::before {
color: rgba(255, 255, 255, 0.30); content: '';
&:after{ position: absolute;
opacity: 0.3; top: -5px;
} left: 50%;
} transform: translateX(-50%) rotate(45deg);
} width: 8px;
&:hover{ height: 8px;
.nav-depth2{ background-color: #1c1c1c;
opacity: 1; border-top: 1px solid #464646;
visibility: visible; border-left: 1px solid #464646;
} }
> button{ }
&:after{
transform: translateY(-50%) rotate(90deg); &.mouse {
} > a {
} color: rgba(255, 255, 255, 0.30);
} }
}
} > button {
} color: rgba(255, 255, 255, 0.30);
}
.header-left{ &:after {
margin-left: auto; opacity: 0.3;
height: 100%; }
display: flex; }
align-items: center; }
.profile-box{
position: relative; &:hover {
padding-left: 30px; .nav-depth2 {
height: 100%; opacity: 1;
display: flex; visibility: visible;
align-items: center; }
margin-right: 20px;
cursor: pointer; > button {
.profile{ &:after {
font-size: 13px; transform: translateY(-50%) rotate(90deg);
font-weight: normal; }
color: #fff; }
} }
&::after{ }
content: ''; }
position: absolute; }
top: 50%; }
transform: translateY(-50%);
left: 0; .header-left {
width: 24px; margin-left: auto;
height: 24px; height: 100%;
background: url(/static/images/common/profile_icon.svg)no-repeat center; display: flex;
background-size: cover; align-items: center;
}
} .profile-box {
.sign-out-box{ position: relative;
position: relative; padding-left: 30px;
padding-left: 30px; height: 100%;
height: 100%; display: flex;
display: flex; align-items: center;
align-items: center; margin-right: 20px;
margin-right: 20px; cursor: pointer;
cursor: pointer;
.sign-out{ .profile {
font-size: 13px; font-size: 13px;
font-weight: normal; font-weight: normal;
color: #fff; color: #fff;
} }
&::after{
content: ''; &::after {
position: absolute; content: '';
top: 50%; position: absolute;
transform: translateY(-50%); top: 50%;
left: 0; transform: translateY(-50%);
width: 24px; left: 0;
height: 24px; width: 24px;
background: url(../../public/static/images/common/signout_icon.svg)no-repeat center; height: 24px;
background-size: cover; background: url(/static/images/common/profile_icon.svg) no-repeat center;
} background-size: cover;
} }
.select-box{ }
min-width: 165px;
margin-right: 8px; .sign-out-box {
>div{ position: relative;
width: 100%; padding-left: 30px;
} height: 100%;
} display: flex;
} align-items: center;
} margin-right: 20px;
cursor: pointer;
.sign-out {
font-size: 13px;
font-weight: normal;
color: #fff;
}
&::after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 24px;
height: 24px;
background: url(../../public/static/images/common/signout_icon.svg) no-repeat center;
background-size: cover;
}
}
.select-box {
min-width: 165px;
margin-right: 8px;
> div {
width: 100%;
}
}
}
}
} }

0
src/styles/_main.scss Normal file
View File

213
src/styles/_modal.scss
View File

@ -1,91 +1,146 @@
@keyframes mountpop{ @keyframes mountpop {
from{opacity: 0; scale: 0.95;} from {
to{opacity: 1; scale: 1;} opacity: 0;
} scale: 0.95;
@keyframes unmountpop{ }
from{opacity: 1; scale: 1;} to {
to{opacity: 0; scale: 0.95;} opacity: 1;
scale: 1;
}
} }
.modal-pop-wrap{ @keyframes unmountpop {
position: fixed; from {
top: 200px; opacity: 1;
right: 100px; scale: 1;
width: 100%; }
min-width: 380px; to {
max-width: fit-content; opacity: 0;
height: -webkit-fit-content; scale: 0.95;
height: -moz-fit-content; }
height: fit-content;
border: 1px solid #000;
border-radius: 4px;
background-color: #272727;
z-index: 9999999;
&.sm{
max-width: 450px;
}
&.mount{
animation: mountpop .17s ease-in-out forwards;
}
&.unmount{
animation: unmountpop .17s ease-in-out forwards;
}
} }
.modal-head{
.modal-pop-wrap {
position: fixed;
top: 200px;
right: 100px;
width: 100%;
min-width: 380px;
max-width: fit-content;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
border: 1px solid #000;
border-radius: 4px;
background-color: #272727;
z-index: 9999999;
&.sm {
max-width: 450px;
}
&.ssm {
max-width: 380px;
}
&.mount {
animation: mountpop .17s ease-in-out forwards;
}
&.unmount {
animation: unmountpop .17s ease-in-out forwards;
}
}
.modal-head {
display: flex;
align-items: center;
padding: 10px 24px;
background-color: #000;
cursor: pointer;
h1.title {
font-size: 13px;
color: #fff;
font-weight: 700;
}
.modal-close {
margin-left: auto;
color: #fff;
text-indent: -999999999px;
width: 10px;
height: 10px;
background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
}
}
.modal-body {
padding: 15px;
.modal-btn-wrap {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 10px 24px; gap: 5px;
background-color: #000;
cursor: pointer; button {
h1.title{ flex: 1;
font-size: 13px;
color: #fff;
font-weight: 700;
} }
.modal-close{ }
margin-left: auto;
color: #fff; .modal-check-btn-wrap {
text-indent: -999999999px; margin-top: 15px;
width: 10px;
height: 10px; .check-wrap-title {
background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center; font-size: 12px;
color: #fff;
font-weight: 600;
&.light {
font-weight: 400;
}
} }
}
.modal-body{ .flex-check-box {
padding: 15px; display: flex;
.modal-btn-wrap{ flex-wrap: wrap;
display: flex; gap: 10px;
align-items: center; margin-top: 15px;
gap: 5px;
button{ &.for2 {
flex: 1; button {
width: calc(50% - 5px);
} }
}
.modal-check-btn-wrap{ &.btn {
margin-top: 15px; gap: 5px;
.check-wrap-title{
font-size: 12px; button {
color: #fff; width: calc(50% - 2.5px);
font-weight: 600; }
&.light{
font-weight: 400;
}
} }
.flex-check-box{ }
display: flex;
flex-wrap: wrap; &.for-line {
gap: 10px; button {
margin-top: 15px; flex: 1;
&.for2{
button{
width: calc(50% - 5px);
}
}
&.for-line{
button{
flex: 1;
}
}
} }
}
} }
}
.outer-line-wrap {
border-top: 1px solid #3C3C3C;
margin-top: 10px;
padding-top: 15px;
margin-bottom: 15px;
> div {
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
}
}
} }

4
src/styles/style.scss
View File

@ -1,3 +1 @@
@import '_layout.scss'; @import '_main.scss';
@import '_contents.scss';
@import '_modal.scss';