Merge remote-tracking branch 'origin/qcast-pub' into dev

This commit is contained in:
minsik 2024-11-18 17:54:41 +09:00
commit 9eb61b3753

View File

@ -3,98 +3,27 @@
-moz-text-size-adjust:none;
-ms-text-size-adjust:none;
text-size-adjust: none;
box-sizing: content-box;
box-sizing: content-box
}
*,
::after,
::before {
*, ::after, ::before {
box-sizing: border-box;
}
html,
body {
html, body{
font-size: 16px;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
@ -106,38 +35,23 @@ video {
font-smooth: never;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1.4;
}
body:first-of-type caption {
display: none;
}
body:first-of-type caption { display:none;}
ol,
ul {
ol, ul {
list-style: none;
}
blockquote,
q {
blockquote, q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
@ -147,9 +61,7 @@ table {
border-spacing:0;
border:0 none;
}
caption,
th,
td {
caption, th, td {
text-align:left;
font-weight: normal;
border:0;
@ -159,38 +71,26 @@ a {
cursor:pointer;
color:#000;
}
a,
a:hover,
a:active {
a, a:hover, a:active {
text-decoration:none;
-webkit-tap-highlight-color: transparent;
}
/*form_style*/
input,
select,
textarea,
button,
a,
label {
input, select, textarea, button, a, label {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
button,
input[type='text'],
input[type='button'] {
button,input[type=text], input[type=button] {
-webkit-appearance: none;
-webkit-border-radius: 0;
-webkit-appearance:none;
appearance: none;
border-radius: 0;
border-radius: 0
}
input[type='checkbox'],
input[type='radio'] {
input[type=checkbox], input[type=radio] {
box-sizing: border-box;
padding: 0;
}
input,
select,
button {
input, select, button {
border:0 none;
outline:none;
margin:0;
@ -233,53 +133,24 @@ button {
}
// margin
.mt5 {
margin-top: 5px !important;
}
.mt10 {
margin-top: 10px !important;
}
.mt15 {
margin-top: 15px !important;
}
.mb5 {
margin-bottom: 5px !important;
}
.mb10 {
margin-bottom: 10px !important;
}
.mb15 {
margin-bottom: 15px !important;
}
.mr5 {
margin-right: 5px !important;
}
.mr10 {
margin-right: 10px !important;
}
.mr15 {
margin-right: 15px !important;
}
.ml5 {
margin-left: 5px !important;
}
.ml10 {
margin-left: 10px !important;
}
.ml15 {
margin-left: 15px !important;
}
.mt5{margin-top: 5px !important;}
.mt10{margin-top: 10px !important;}
.mt15{margin-top: 15px !important;}
.mb5{margin-bottom: 5px !important;}
.mb10{margin-bottom: 10px !important;}
.mb15{margin-bottom: 15px !important;}
.mr5{margin-right: 5px !important;}
.mr10{margin-right: 10px !important;}
.mr15{margin-right: 15px !important;}
.ml5{margin-left: 5px !important;}
.ml10{margin-left: 10px !important;}
.ml15{margin-left: 15px !important;}
// align
.al-l {
text-align: left !important;
}
.al-r {
text-align: right !important;
}
.al-c {
text-align: center !important;
}
.al-l{text-align: left !important;}
.al-r{text-align: right !important;}
.al-c{text-align: center !important;}
// button
.btn-frame{
@ -294,7 +165,7 @@ button {
border: 1px solid #000;
text-align: center;
font-family: 'Pretendard', sans-serif;
transition: all 0.17s ease-in-out;
transition: all .17s ease-in-out;
cursor: pointer;
&.block{
width: 100%;
@ -307,15 +178,15 @@ button {
}
&.deepgray{
background-color: #2c2c2c;
background-color: #2C2C2C;
border: 1px solid #484848;
}
&.gray{
background-color: #3c3c3c;
background-color: #3C3C3C;
border: 1px solid #545454;
}
&.dark{
background-color: #1c1c1c;
background-color: #1C1C1C;
border: 1px solid #484848;
}
&.modal{
@ -324,8 +195,8 @@ button {
border: 1px solid #484848;
color: #aaa;
&:hover{
background-color: #1083e3;
border: 1px solid #1083e3;
background-color: #1083E3;
border: 1px solid #1083E3;
color: #fff;
font-weight: 500;
}
@ -335,13 +206,13 @@ button {
padding: 0 10px;
line-height: 28px;
font-family: 'Noto Sans JP', sans-serif;
background-color: #2d2d2d;
background-color: #2D2D2D;
border: 1px solid #393939;
color: #aaa;
&.act,
&:hover{
background-color: #414e6c;
border: 1px solid #414e6c;
background-color: #414E6C;
border: 1px solid #414E6C;
color: #fff;
font-weight: 500;
}
@ -355,11 +226,11 @@ button {
border: 1px solid #484848;
color: #fff;
&.blue{
background-color: #414e6c;
border: 1px solid #414e6c;
background-color: #414E6C;
border: 1px solid #414E6C;
&:hover{
background-color: #414e6c;
border: 1px solid #414e6c;
background-color: #414E6C;
border: 1px solid #414E6C;
}
}
&.white{
@ -386,7 +257,7 @@ button {
font-family: 'Noto Sans JP', sans-serif;
background-color: transparent;
border: 1px solid #676767;
color: #aaaaaa;
color: #AAAAAA;
&:hover{
background-color: #272727;
border-color: #676767;
@ -395,8 +266,8 @@ button {
}
&:hover,
&.act{
background-color: #1083e3;
border: 1px solid #1083e3;
background-color: #1083E3;
border: 1px solid #1083E3;
color: #fff;
font-weight: 500;
}
@ -426,7 +297,7 @@ button {
color: #fff;
font-size: 13px;
font-weight: 400;
transition: all 0.15s ease-in-out;
transition: all .15s ease-in-out;
&.navy{
background-color: #304961;
&:hover{
@ -434,21 +305,21 @@ button {
}
}
&.grey{
background-color: #94a0ad;
background-color: #94A0AD;
&:hover{
background-color: #607f9a;
background-color: #607F9A;
}
}
&.green{
background-color: #a6bba8;
background-color: #A6BBA8;
&:hover{
background-color: #98af9b;
}
}
&.white{
border: 1px solid #94a0ad;
border: 1px solid #94A0AD;
background-color: #fff;
color: #94a0ad;
color: #94A0AD;
&:hover{
background-color: #fff;
}
@ -464,7 +335,7 @@ button {
line-height: 30px;
padding: 0 25px 0 10px;
background-color: #373737;
border: 1px solid #3f3f3f;
border: 1px solid #3F3F3F;
border-radius: 2px;
border-top-left-radius: 2px;
color: #fff;
@ -489,7 +360,7 @@ button {
max-height: 100px;
overflow-y: auto;
background-color: #373737;
border: 1px solid #3f3f3f;
border: 1px solid #3F3F3F;
border-radius: 2px;
transition: all 0.17s ease-in-out;
visibility: hidden;
@ -499,19 +370,20 @@ button {
align-items: center;
padding: 8px 20px;
line-height: 1.4;
transition: all 0.17s ease-in-out;
transition: all .17s ease-in-out;
button{
font-size: 12px;
color: #fff;
line-height: 1.4;
}
&:hover{
background-color: #2c2c2c;
background-color: #2C2C2C;
}
}
&::-webkit-scrollbar {
width: 2px;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #5a5a5a;
@ -531,7 +403,7 @@ button {
height: 6px;
background: url(/static/images/common/select-arr.svg) no-repeat center;
background-size: cover;
transition: all 0.17s ease-in-out;
transition: all .17s ease-in-out;
}
&.active{
.select-item-wrap{
@ -549,17 +421,17 @@ button {
display: block;
width: 100%;
height: 30px;
background: #fff url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
background-size: 10px 6px;
border: 1px solid #eee;
padding: 0 30px 0 10px;
font-size: 13px;
color: #45576f;
color: #45576F;
font-family: 'Noto Sans JP', sans-serif;
cursor: pointer;
&:disabled{
opacity: 1;
background-color: #fafafa;
background-color: #FAFAFA;
color: #999;
cursor: default;
}
@ -575,6 +447,7 @@ button {
}
}
// input
.form-input{
label{
@ -585,9 +458,9 @@ button {
margin-bottom: 10px;
}
}
input[type='password'],
input[type='number'],
input[type='text'] {
input[type=password],
input[type=number],
input[type=text]{
&.input-origin{
display: inline-block;
height: 30px;
@ -602,9 +475,9 @@ input[type='text'] {
padding: 0 10px;
letter-spacing: 0px;
text-align: right;
transition: border 0.15s ease-in-out;
transition: border .15s ease-in-out;
&:focus{
border: 1px solid #1083e3;
border: 1px solid #1083E3;
}
&::placeholder{
font-family: 'Noto Sans JP', sans-serif;
@ -616,7 +489,7 @@ input[type='text'] {
width: 100%;
}
&:read-only{
color: #aaa;
color: #AAA;
&:focus{
border: 1px solid #323234;
}
@ -637,15 +510,15 @@ input[type='text'] {
background-color: #fff;
font-family: 'Noto Sans JP', sans-serif;
font-size: 13px;
color: #45576f;
color: #45576F;
font-weight: normal;
transition: border-color 0.17s ease-in-out;
transition: border-color .17s ease-in-out;
text-align: left;
&:focus{
border-color: #94a0ad;
border-color: #94A0AD;
}
&:read-only{
background-color: #fafafa;
background-color: #FAFAFA;
color: #999999;
&:focus{
border-color: #eee;
@ -654,14 +527,16 @@ input[type='text'] {
}
}
// check-btn
.check-btn{
display: flex;
align-items: center;
height: 30px;
background-color: #3a3a3a;
background-color: #3A3A3A;
border-radius: 3px;
transition: all 0.17s ease-in-out;
transition: all .17s ease-in-out;
.check-area{
flex: none;
width: 30px;
@ -698,10 +573,10 @@ input[type='text'] {
display: block;
height: 30px;
border-radius: 3px;
background-color: #3a3a3a;
background-color: #3A3A3A;
padding: 0 11px;
text-align: left;
transition: all 0.17s ease-in-out;
transition: all .17s ease-in-out;
span{
position: relative;
font-size: 12px;
@ -735,15 +610,15 @@ input[type='text'] {
background-color: #272727;
border: 1px solid #484848;
span{
color: #fff;
color: #Fff;
&:after{
background: url(../../public/static/images/canvas/arr_btn_ico_white.svg)no-repeat center;
}
}
&:hover,
&.act{
background-color: #1083e3;
border: 1px solid #1083e3;
background-color: #1083E3;
border: 1px solid #1083E3;
}
}
}
@ -753,8 +628,8 @@ input[type='text'] {
.d-check-box{
line-height: 1.1;
cursor: pointer;
input[type='checkbox'],
input[type='radio'] {
input[type=checkbox],
input[type=radio]{
position: static;
margin-left: 0;
cursor: pointer;
@ -777,7 +652,7 @@ input[type='text'] {
}
&.light{
label{
color: #45576f;
color: #45576F;
}
}
&.no-text{
@ -791,7 +666,7 @@ input[type='text'] {
label{
&::before{
cursor: pointer;
content: '';
content: "";
display: inline-block;
position: absolute;
width: 17px;
@ -805,13 +680,11 @@ input[type='text'] {
text-align:center;
font-size:13px;
line-height:1.4;
transition:
border 0.15s ease-in-out,
color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
&::after{
cursor: pointer;
content: '';
content: "";
display: inline-block;
position: absolute;
width: 9px;
@ -827,22 +700,20 @@ input[type='text'] {
line-height:1.4;
opacity: 0;
visibility: hidden;
transition:
opacity 0.15s ease-in-out,
color 0.15s ease-in-out;
transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
}
}
&.light{
label{
&:before{
border-color: #d6d6d7;
border-color: #D6D6D7;
}
&:after{
background-color: #697c8f;
background-color: #697C8F;
}
}
}
input[type='radio']:checked + label::after {
input[type=radio]:checked + label::after{
opacity: 1;
visibility: visible;
}
@ -866,12 +737,10 @@ input[type='text'] {
// check-box
.d-check-box{
label{
&.red {
color: #ffcaca;
}
&.red{color: #FFCACA;}
&::before{
cursor: pointer;
content: '';
content: "";
display: inline-block;
position: absolute;
width: 17px;
@ -879,48 +748,50 @@ input[type='text'] {
top: 2px;
left: 0;
margin-left: -12px;
border: 1px solid #d6d6d7;
border: 1px solid #D6D6D7;
background-color: #fff;
transition:
border 0.15s ease-in-out,
color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
&:after{
cursor: pointer;
content: '';
content: "";
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
top:0;
left: 0;
margin-left: -0.8rem;
transition:
border 0.05s ease-in-out,
color 0.05s ease-in-out;
margin-left: -.8rem;
transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
}
}
input[type='checkbox']:checked + label::after {
content: '';
input[type=checkbox]:checked + label::after{
content: "";
display: inline-block;
position: absolute;
top: 1px;
left: -1px;
width: 5px;
height: 8px;
border: 2px solid #697c8f;
border: 2px solid #697C8F;
border-left: none;
border-top: none;
transform: translate(7.75px,4.5px) rotate(45deg);
-ms-transform: translate(7.75px,4.5px) rotate(45deg);
}
input[type=checkbox]:disabled + label::before{
background-color: #FAFAFA;
}
input[type=checkbox]:disabled + label::after{
border-color: #999;
}
&.pop{
label{
&:before{
background-color: transparent;
}
}
input[type='checkbox']:checked + label::after {
input[type=checkbox]:checked + label::after{
border-color: #fff;
}
&.no-text{
@ -930,25 +801,23 @@ input[type='text'] {
}
}
&.sel{
input[type='checkbox']:checked + label {
color: #d7c863;
input[type=checkbox]:checked + label{
color: #D7C863;
}
input[type='checkbox']:checked + label::before,
input[type='checkbox']:checked + label::after {
border-color: #d7c863;
input[type=checkbox]:checked + label::before,
input[type=checkbox]:checked + label::after{
border-color: #D7C863;
}
}
}
// date-picker
.date-picker{
svg {
display: none;
}
svg{display: none;}
.react-datepicker-wrapper{
width: 100%;
}
input[type='text'] {
input[type=text]{
display: block;
width: 100%;
height: 30px;
@ -956,7 +825,7 @@ input[type='text'] {
border-radius: 2px;
border: 1px solid #eee;
font-size: 13px;
color: #45576f;
color: #45576F;
font-weight: normal;
font-family: 'Noto Sans JP', sans-serif;
background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
@ -972,17 +841,18 @@ input[type='text'] {
height: 30px;
min-height: unset;
border-radius: 2px;
border-color: #eee;
border-color: #EEE;
background-color: #fff;
&:hover{
border-color: #eee;
border-color: #EEE;
}
}
.custom__control--is-focused{
border-color: #eee;
border-color: #EEE;
box-shadow: unset;
&:hover{
border-color: #eee;
border-color: #EEE;
}
}
.custom__value-container {
@ -995,7 +865,7 @@ input[type='text'] {
}
.custom__single-value{
font-size: 13px;
color: #45576f;
color: #45576F;
font-weight: 400;
}
.custom__placeholder{
@ -1032,7 +902,7 @@ input[type='text'] {
.custom__option{
font-size: 13px;
padding: 7px 10px;
color: #45576f;
color: #45576F;
}
.custom__option--is-selected{
color: #fff;
@ -1040,7 +910,7 @@ input[type='text'] {
// disable
&.custom--is-disabled{
.custom__control{
background-color: #fafafa;
background-color: #FAFAFA ;
}
.custom__single-value{
color: #999999;
@ -1066,7 +936,7 @@ input[type='text'] {
right: 0;
bottom: 0;
background-color: #454545;
transition: 0.4s;
transition: .4s;
border-radius: 10px;
text-align: center;
line-height: 20px;
@ -1083,18 +953,18 @@ input[type='text'] {
}
&:before {
position: absolute;
content: '';
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
transition: 0.4s;
transition: .4s;
border-radius: 50%;
}
}
input:checked + .slider {
background-color: #2563eb;
background-color: #2563EB;
&:after {
content: 'ON';
left: 10px;