File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
.login{
background-color: #EFF1FA;
height: 100vh;
.card{
padding-top: 30rem;
.card-body{
background-color: #fff;
margin: 0 auto;
width: 600px;
height: 450px;
padding: 5rem;
border-radius: 5rem;
display: flex;
gap: 30px;
flex-direction: column;
}
.card-title{
text-align: center;
}
.form-label{
display: flex
;
align-items: center;
font-weight: 700;
font-size: 15px;
margin-bottom: 10px;
img{margin-right: 3px;}
}
.box{margin-bottom: 30px;
button{width: 100%; background-color: #1F3F99;
img{margin-right: 10px;}
}
}
}
}
.sidemenu{
width: 350px;
margin-right: 20px;
.myinfo{
text-align: center;
padding: 25px 20px 20px 20px;
margin-bottom: 20px;
border-radius: 20px;
background: linear-gradient(to bottom, #1F3F99, #3354CE);
.name-box{
margin-bottom: 30px;
.img-area{
margin: 0 auto;
width: 165px;
.name{
font-size: 25px;
font-weight: 700;
color: #fff;
}
.info{
background-color: #0A216D;
border-radius: 100px;
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
p{color: #fff; font-size: 15px;}
}
}
}
.info-box{
background-color: #fff;
border-radius: 15px;
display: flex;
justify-content: space-between;
li{text-align: center; border-right: 1px solid #E7EAF4; width: 25%;
p{font-size: 35px; font-weight: 700; margin: 20px 0;}
}
li:last-child{border: 0;}
.name{
text-align: center;
display: flex;
justify-content: center;
justify-self: center;
margin-bottom: 12px;
width: 58px;
height: 25px;
font-size: 16px;
font-weight: 700;
background-color: #999999;
color: #fff;
border-radius: 100px;
}
.name.yellow{background-color:#EDAB0C;}
.name.blue{background-color:#1D75E1;}
.name.red{background-color:#E92727;}
}
}
.myinfo.profile{
background: #fff;
.name-box{margin: 20px 0;}
.img-area{
width: 100%;
.img{
position: relative;
width: 150px; height: 190px; border: 1px solid #D7DCF1;
padding: 10px;
margin: 0 auto;
.close-btn{position: absolute; top: 0; right: 10px;}
img{height: 100%; object-fit: cover; }
}
.info{
border-top: 1px solid #9498A94D;
margin: 0 auto;
padding-top: 30px;
margin-top: 30px;
width: 240px;
background-color: transparent;
border-radius: 0;
.file {
background-color: #EFF1FA; width: 120px; border: #213F9A 1px solid ; border-radius: 10px; padding: 7px 0;
margin-top: 10px;
}
.file-label {
display: flex;
gap: 5px;
justify-content: center;
cursor: pointer;
p{color: #000;}
}
input[type="file"] {
display: none;
}
}
}
}
.myinfo.simple{
background: transparent;
.img-area{
img{width: 75px;
height: 75px;}
.info{
background-color: #DEE2F5;
p{color: #000;}
.fa-bars{
width: 2px;
height: 14px;
background-color: #213F9A1A;
}
}
.name{color: #000;}
}
details[open] > summary {
background: #213F9A;
color: #fff;
.icon{display: block;}
}
}
.menu-box{
summary{
cursor: pointer;
border: 1px solid #213F9A;
color: #000;
display: flex;
justify-content: space-between;
font-size: 17px;
text-align: left;
padding: 10px 15px;
border-radius: 10px;
.icon{display: none;}
}
margin-top: 20px;
ul{padding: 10px 10px 0px 10px;}
li{
margin-bottom: 10px;
a{display: flex; justify-content: space-between;}
}
}
.boxs{
background-color: #fff; border-radius: 20px; padding: 20px; margin-bottom: 20px;
.box{display: flex; justify-content: space-between; margin-bottom: 15px;
h3{text-align: center;
color: #fff;
font-size: 16px;
font-weight: 700;}
}
.img-area{margin: 0 12.5px;}
h4{
font-size: 19px;
font-weight: 700;
text-align: center;
line-height: 22px;
img{margin-right: 10px;}
margin-bottom: 15px;
}
i.fa-bars{display: block; width: 2px; height: 14px; background-color: #D7DCF1;}
.sm-box{
width: 185px;
background-color: #F4F6FD;
border-radius: 10px;
text-align: center;
h3{
background-color: #213F9A;
border-radius: 10px;
height: 35px;
line-height: 35px;
}
p{
font-size: 30px;
font-weight: 700;
}
}
.bd-box{
border: 1px solid #D7DCF1;
border-radius: 10px;
padding: 19px 40px 19px 40px;
display: flex;
align-items: center;
gap: 30px;
div{font-size: 18px;
span{font-size: 18px; font-weight: 800; margin-left:23px;}
}
}
.color-boxs{
display: flex;
justify-content: space-between;
.box{
display: block;
text-align: center;
width: 96px;
background-color: #F9F9F9;
font-size: 30px;
font-weight: 700;
border-radius: 10px;
padding-bottom: 24px;
h3{background-color: #999999; border-top-left-radius: 10px; border-top-right-radius: 10px; width: 100%; height: 33px;
line-height: 33px;
margin-bottom: 17px;}
}
.box.red{
background-color: #FEF3F3;
h3{background-color: #E92727;}
}
.box.green{
background-color: #EFF9FB;
h3{background-color: #3C97AB;}
}
}
}
.router-link-active p {
color: #213F9A; /* 원하는 색상으로 변경 */
font-weight: 700;
}
}
.content{
.pagination{
margin-top: 20px;
margin-bottom: 5rem;
ul {
display: flex;
list-style: none;
padding: 0;
gap: 8px;
justify-content: center;
align-items: center;
}
li {
width: 35px;
height: 35px;
text-align: center;
line-height: 35px;
border: 1px solid #BDCBE8;
border-radius: 4px;
cursor: pointer;
background-color: #fff;
color: #333;
transition: 0.2s;
}
li:hover:not(.disabled) {
background-color: #f0f0f0;
}
li.active {
background-color: #1D75E1;
color: white;
font-weight: bold;
}
li.arrow {
font-weight: bold;
}
li.disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
.title{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
h2{font-size: 24px; font-weight: 700; display: flex; gap: 20px;
span{border: 1px solid #E92727; border-radius: 100px; color: #E92727; font-size: 15px; text-align: center; padding: 5px 20px;}
}
.sub{display: flex; align-items: center; gap: 3px;}
}
.top-content{display: flex; justify-content: space-between; gap: 40px; margin-bottom: 15px;}
.boxs{
// width: 550px;
.blue-box{
background-color: #D7DCF1;
border-radius: 10px;
padding: 30px;
.box{background-color: #fff; text-align: center;
padding: 29px 0;
border-radius: 10px;
.time{font-size: 35px; font-weight: 700;}
}
.buttons{
display: flex; gap: 25px;
align-items: center;
justify-content: center;
margin-top: 10px;
i.fa-bars{display: block; width: 1px; height: 40px; background-color: #fff;}
}
}
.board{
border: 1px solid #DDDDDD; border-radius: 10px;
table{
tr{ border-bottom: 1px solid #DDDDDD;}
tr:last-child{border: 0;}
td{
border-radius: 10px;
border: 0;
text-align: center;
p{
padding: 4px 0;
border-radius: 5px;
width: 85px;
}
}
.category-service p{
background-color: #FED9AC;
}
.category-internal p{
background-color: #EFF1FA;
}
.category-government p{
background-color: #DFD4F0;
}
.status p{
border: 2px solid #AAAAAA;
border-radius: 100px;
color: #AAAAAA;
font-size: 15px;
}
.status-in-progress p{ border-color: #1D75E1; color: #1D75E1;}
.status-complete p{ color: rgb(39, 96, 55); border-color: rgb(39, 96, 55); }
}
}
}
.card{
.color-boxs{
display: flex;
justify-content: space-between;
gap: 10px;
margin-bottom: 20px;
.box{
display: block;
text-align: center;
width: calc(100% / 6);
background-color: #F9F9F9;
font-size: 30px;
font-weight: 700;
border-radius: 10px;
padding-bottom: 24px;
h3{background-color: #333333; color: #fff; border-radius: 10px;width: 100%; height: 50px;
line-height: 50px;
margin-bottom: 17px; font-size: 20px;}
}
.box.red{
background-color: #FEF3F3;
h3{background-color: #E92727;}
}
.box.green{
background-color: #EFF9FB;
h3{background-color: #3C97AB;}
}
.box.blue{
background-color: #E9EFF8;
h3{background-color: #1D75E1;}
}
.box.purple{
background-color: #F5EFFA;
h3{background-color: #A36CD4;}
}
.box.orange{
background-color: #FFF8F3;
h3{background-color: #F7941C;}
}
}
.name-box{
margin-bottom: 20px;
.img-area{
flex-shrink: 0;
margin-right: 30px;
width: 300px;
height: 150px;
background-color: #EFF1FA;
border-radius: 20px;
text-align: center;
padding: 20px;
.img{
display: flex;
justify-self: center;
background-color: #fff;
width: 92px;
height: 110px;
padding: 8px;
img{object-fit: cover; width: 100%;
height: 100%;}
}
}
form{
input[readonly] {
border-color: #fff;
background-color: #fff !important;
cursor: context-menu;
}
.col-12 {
input{margin: 4px 10px;}
label{line-height: 48px;}
}
}
}
.sch-form-wrap {
justify-self: end;
margin-bottom: 20px;
.input-group{
.form-select, .form-control{
height: 40px;
border-color: #C7CFE3;
font-size: 16px;
}
.form-control{padding-right: 30px; padding-left: 10px;}
.ico-sch{right: 5px;}
}
}
.sch-form-wrap.title-wrap{justify-content: space-between; width: 100%;
h3{
img{margin: 5px 5px 0 0;}
}
.input-group{width: auto;
}
}
.tbl-wrap{
table.buseo{
tbody{
tr{cursor: pointer;}
}
}
th,td{text-align: center !important; font-size: 16px !important;}
.status-approved {
color: #1D75E1;
font-weight: 700;
}
.status-pending {
color: #E92727;
font-weight: 700;
}
.expired td{
background-color: #F6F6F6; /* 연회색 배경 */
filter: grayscale(50%);
opacity: 0.6;
}
}
p.require{
text-align: right;
img{margin-top: 9px;}
}
.card-body{
.flex{display: flex; align-items: center;}
.flex.sb{justify-content: space-between;}
.card-title{
margin-bottom: 20px;
}
.sub{
margin-right: 20px;
img{width: 50px; height: 50px;}
.date{margin-left: 10px;}
}
.sch-wrap{
border: 1px solid #213F9A;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
.buttons{gap: 5px; margin-top: 0;}
.sch-form-wrap{margin-bottom: 0;}
}
form{
border: 1px solid #C7CFE3;
border-radius: 10px; overflow: hidden;}
.col-12{
width: 100%;
display: flex;
border-bottom: 1px solid #C7CFE3;
label{width: 140px ;background: #EFF1FA; font-weight: 600; font-size: 16px; text-align: center; line-height: 70px; flex-shrink: 0; position: relative;}
p.require{
position: absolute;
right: 37px;
top: 23px;
}
.d-flex{display: flex; flex-shrink: 0;}
select, input{margin: 15px 10px; border-color: #DDDDDD; height: var(--tk-input-h-sm);}
.form-control[readonly]{background-color: #EFF1FA;}
.invalid-feedback{color: #E92727; font-size: 13px;}
.box{
margin: 15px 10px;
input{margin: 0;}
p{margin-top: 5px;}
}
.approval-container{
display: flex;
flex-direction: column;
gap: 8px;
margin: 15px 10px;
.addapproval{
gap: 5px;
align-items: center;
.form-control, .form-select{margin: 0 ;}
.delete-button{margin-left: 10px;}
}
}
}
.col-12.return{
.form-label{background-color: #FBC1C1;}
.form-control{background-color: #FFF2F2;}
}
.border-x{border: 0;}
.buttons{display: flex; gap: 10px; justify-content: end; margin-top:5rem;
.btn-red{border-color: #E92727; color: #E92727; background-color: #EFF1FA;}
}
.hyuga{
label{line-height: 40rem;}
input.textarea{min-height: 40rem;}
}
.chuljang{
label{line-height: 17rem;}
input.textarea{min-height: 17rem;}
}
.form-card{
position: relative;
border: 1px solid #CCCCCC;
border-radius: 10px;
padding: 30px;
h1{margin: 18px 0 48px 0; text-align: center;}
input[readonly] {
border-color: #fff;
background-color: #fff !important;
cursor: context-menu;
}
.hyuga{
label{line-height: 40rem;}
input.textarea{min-height: 40rem;}
}
.chuljang{
label{line-height: 17rem;}
input.textarea{min-height: 17rem;}
}
.tbl2{
width: 30rem;
table{
.thead{
.th{
writing-mode: vertical-rl; padding: 0; width: 50px;
}
}
}
}
.approval-box{position: absolute; right: 30px; top: 30px;}
}
.tbl2{
table{
table-layout: fixed;
margin-bottom: 10px;
.thead{
.th{background-color: #C7CFE3; }
td{background-color: #EFF1FA; height: 40px; font-weight: 700;}
}
td{padding: 0; border: 1px solid #C7CFE3; }
}
}
.datepicker-conts{
margin-bottom: 20px;
.datepicker-input{
display: flex;
justify-content: end;
align-items: center;
gap: 5px;
.form-control{
padding-right: 16px;
border-color: #C7CFE3;
}
mark{background-color: transparent;}
}
}
}
}
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-box {
background: white;
padding: 20px 30px;
border-radius: 8px;
text-align: center;
}
.modal-box button {
margin: 10px;
padding: 8px 16px;
font-size: 14px;
}
.modal-box .cancel {
background: #ccc;
}
.primary{background-color: #213F9A;}
a:focus{outline: 0;}
*:focus{outline: 0;}
.file {
background-color: #EFF1FA; width: 120px; border: #213F9A 1px solid ; border-radius: 10px; padding: 7px 0;
margin-top: 10px;
}
.file-label {
width: inherit !important;
display: flex;
gap: 5px;
justify-content: center;
line-height: 0 !important;
cursor: pointer;
p{color: #000;}
}
input[type="file"] {
display: none;
}