HANYANG_REACT/www/ksvc/inc/css_old/_backup/common.css

703 lines
18 KiB
CSS

:root {
--color_icon_main : #1770e3; /* 메인 아이콘 Color */
--color_icon_sub : #528cec; /* 서브 아이콘 Color */
--color_bg_icon : #6292cf; /* 서브 아이콘 Color */
--color_text_title : #3782e5; /* 문자 타이틀 Color */
--color_text_impt : #0d4194; /* 문자 강조 Color */
--color_text_sub : #666666; /* 문자 보조 Color */
--color_text_dsub : #555555; /* 문자 보조 Color */
--color_text_tsub : #f00; /* 문자 보조 Color */
--color_text_del : #bac5d7; /* 문자 보조 Color */
--color_border_table_top : #629dfe; /* 메인테이블 상단선 Color */
--color_border_table_bottom : #959595; /* 메인테이블 하단선 Color */
--color_border_table_bline : #dee2e6; /* 테이블 전체 구분선(하단) Color */
--color_border_table_rline : #c8c8c8; /* 테이블 전체 구분선(오른쪽) Color */
--color_border_table_selbline : #b1b1b1; /* 테이블 선택 Row 구분선(하단) Color */
--color_bg_table_main : #fff; /*테이블 전체 배경 Color*/
--color_border_main : #3660d5; /* 메인테이블 임시 Color */
--color_border_table_hbottom : #bdc3c7; /* 메인테이블 타이틀 구분선(하단) Color */
--color_border_table_hright : #b5d1ff; /* 메인테이블 타이틀 구분선(오른쪽) Color */
--color_bg_table_title : #eef4fe; /* 메인테이블 타이틀 배경색 */
--color_check_table_label : #2D7EE8; /* 메인테이블 토글Label 색상 */
--color_sort_table_asc : #090; /* 메인테이블 정렬아이콘 (ASC) */
--color_sort_table_desc : #f00; /* 메인테이블 정렬아이콘 (DESC) */
--color_text_table_next : #999999; /* 메인테이블 설명 */
--color_bg_table_hover : #EFEFEF; /* 메인테이블 Row hover 배경 */
--color_bg_table_selected : #d6e59a; /* 메인테이블 선택Row 배경 */
--color_bg_table_hselected : #eef9cd; /* 메인테이블 선택 hover Row 배경 */
--color_bg_table_selected_sub : #eee; /*#ffca8e; /* 메인테이블 선택Row 배경 */
--color_bg_table_hselected_sub : #ffe08e; /* 메인테이블 선택 hover Row 배경 */
--color_bg_table_checked : #ffe8b7; /* 메인테이블 checked Row 배경 */
--color_bg_table_hchecked : #e8c58d; /* 메인테이블 checked hover Row 배경 */
--color_bg_table_checked_u : #ddeeff; /* 메인테이블 사용자 checked Row 배경 */
--color_bg_table_checked_usub : #ccddee; /* 메인테이블 사용자 checked Row 배경 */
/*--color_bg_editable_column : #fff5e277; /* 텍스트필드 수정 색상 */
--color_bg_editable_column : #ffe29354; /*#dfff9377; /*#f0ffcd77; /* 텍스트필드 수정 색상 */
--color_bg_menu_main : #ffffff44; /* 사이드메뉴 기본 배경 */
--color_bg_menu_smain : #00000011; /* 사이드메뉴 기본 배경 */
--color_bg_menu_ssmain : #ededed; /* 사이드메뉴 기본 배경 */
--color_bg_menu_block : #ffffff66; /* 사이드메뉴 Block Select 배경 */
--color_bg_menu_impt : #255198; /* 사이드메뉴 Item Select 배경 */
--color_bg_menu_simpt : #4c7fd7; /* 사이드메뉴 Item Select 배경w */
--color_text_main : #5094ce; /* 사이드메뉴 기본 텍스트 */
--color_text_menu_impt : #fff; /* 사이드메뉴 Item Select 텍스트 */
--color_select_impt : #1b7be9; /* 사이드메뉴 강조색상 */
--color_bg_del : #fff4f4; /* 삭제 배경 */
--color_bg_select_block : #f5f5f5; /* 선택 Block 배경 */
--color_bg_sunday : #fbf1f1; /* 선택 Block 배경 */
--color_bg_saturday : #f2f6fd; /* 선택 Block 배경 */
--btn_bg_main : #979797; /* 메인 버튼 Color */
--btn_bd_main : #6c6c6c; /* 메인 버튼 Border Color */
--btn_bg_prim : #1770e3;
--btn_bd_prim : #3564af;
--btn_bg_numG : #35af7a;
--btn_bd_numG : #32a181;
--btn_bg_numR : #e53737; /* RED 버튼 Color */
--btn_bd_numR : #ad2b2b; /* RED 버튼 Border Color */
--btn_bg_numO : #ff821b; /* Orange 버튼 Color */
--btn_bd_numO : #f17a03; /* Orange 버튼 Border Color */
--btn_bg_numB : #3782e5; /* BLUE 버튼 Color */
--btn_bd_numB : #3660d5; /* BLUE 버튼 Border Color */
--btn_bg_numS : #4db5ef; /* Sky BLUE 버튼 Color */
--btn_bd_numS : #0387d2; /* Sky BLUE 버튼 Color */
--head_logo_height: 120px; /* 사이드 로고 박스 높이 */
--head_logo_sheight: 80px; /* 사이드 로고 박스 높이2 */
--main_title_height: 70px; /* 콘텐츠 title 박스 높이 */
--main_search_height: 60px; /* 콘텐츠 search 박스 높이 */
--color_bg_scroll_main: #eee; /* 스크롤바 배경*/
--color_bg_scroll_float: #bbb; /* 스크롤바 float thumb */
--color_bg_scroll_smain: var(--frame_bgcolor_sidebar); /*#eee;*/ /* 스크롤바 배경*/
--color_bg_scroll_sfloat: #71a1ee; /* 스크롤바 float thumb */
}
a {
text-decoration: none;
color: inherit;
cursor: pointer;
}
img {
max-width: 100%;
height: auto;
}
table {
border-spacing:0;
box-sizing: border-box;
}
.w20 { width: 20px !important; }
.w30 { width: 30px !important; }
.w50 { width: 50px !important; }
.w60 { width: 50px !important; }
.w70 { width: 50px !important; }
.w80 { width: 80px !important; }
.w100 { width: 100px !important; }
.w120 { width: 120px !important; }
.w150 { width: 150px !important; }
.w200 { width: 200px !important; }
.w250 { width: 250px !important; }
.w300 { width: 300px !important; }
.w400 { width: 400px !important; }
.w500 { width: 500px !important; }
.w600 { width: 600px !important; }
.w700 { width: 700px !important; }
.w800 { width: 800px !important; }
.w900 { width: 900px !important; }
.h20 { height: 20px !important; }
.h30 { height: 30px !important; }
.h50 { height: 50px !important; }
.h80 { height: 80px !important; }
.h100 { height: 100px !important; }
.h120 { height: 120px !important; }
.h150 { height: 150px !important; }
.h200 { height: 200px !important; }
.h250 { height: 250px !important; }
.h300 { height: 300px !important; }
.h400 { height: 400px !important; }
.h500 { height: 500px !important; }
.h600 { height: 600px !important; }
.h700 { height: 700px !important; }
.h800 { height: 800px !important; }
.h900 { height: 900px !important; }
/** 상단 Badge 용 tippy **/
.tippy-box {
background-color: #ffffff;
color: initial;
border-radius: 8px;
box-shadow: 0px 1px 6px #00000029;
}
.tippy-arrow {
color: #ffffff;
}
.alarm_box {
width: 410px;
max-height: 300px;
padding: 10px;
overflow-y: auto;
}
.alarm_box .alarm_title {
width: 100%;
font-weight: bold;
}
.alarm_box .alarm_cont {
position: relative;
display: flex;
padding: 16px 0;
border-bottom: 1px solid #efefef;
justify-content: space-between;
align-items: center;
}
.alarm_box .alarm_cont:last-child {
border-bottom: 0;
}
.alarm_box .alarm_cont .alarm_txt .alarm_type,
.alarm_box .alarm_cont .alarm_txt .alarm_msg {
font-size: 0.9rem;
color: var(--color_text_sub);
}
.alarm_box .alarm_cont .alarm_txt .alarm_sec {
font-size: 0.9rem;
font-weight: bold;
color: #3d76e8;
padding-top: 5px;
margin: 0;
}
.alarm_box .btnAlarmClose {
display: inline-block;
position: absolute;
right: 10px;
top: 1.8rem;
width: 24px;
height: 24px;
background-image: url(/ksvc/inc/img/x.svg);
background-repeat: no-repeat;
background-position: center center;
}
.s_icon {
vertical-align: baseline;
font-size: 0.8em;
}
.st_icon {
color: var(--color_icon_main);
vertical-align: middle;
}
.frame_topmode .st_icon {
color: var(--color_text_menu_impt);
vertical-align: middle;
}
.frame_topmode .member_info a:hover {
color: var(--color_text_menu_impt);
}
.font05 {
font-size:0.5em;
}
.font06 {
font-size:0.6em;
}
.font07 {
font-size:0.7em;
}
.font08 {
font-size:0.8em;
}
.font09 {
font-size:0.9em;
}
.font10 {
font-size:1em;
}
.font11 {
font-size:1.1em;
}
.font12 {
font-size:1.2em;
}
.font13 {
font-size:1.3em;
}
.font14 {
font-size:1.4em;
}
.font15 {
font-size:1.5em;
}
/* Checkbox && Radio && Toggle */
label.form_checkbox, label.form_radio, label.form_toggle,
label.form_checkbox_before, label.form_radio_before, label.form_toggle_before {
position: relative;
margin-bottom: 0;
cursor: pointer;
}
label.form_checkbox > input,
label.form_radio > input,
label.form_toggle > input,
label.form_checkbox_before > input,
label.form_radio_before > input,
label.form_toggle_before > input {
position: absolute;
top: -1000px;
left: -1000px;
}
label.form_checkbox::after,
label.form_radio::after,
label.form_checkbox_before::before,
label.form_radio_before::before {
font-size: 1.2em;
line-height: 100%;
font-weight: 100 !important;
vertical-align: text-bottom;
margin-left:3px;
font-family: bootstrap-icons !important;
}
label.form_toggle::after,
label.form_toggle_before::before {
font-size: 1.8em;
font-weight: 100 !important;
line-height: 100%;
vertical-align: middle;
margin-left:3px;
font-family: bootstrap-icons !important;
}
/* Checkbox */
label.form_checkbox::after,
label.form_checkbox_before::before {
content:'\F584';
}
label.form_checkbox:has(input:checked)::after,
label.form_checkbox_before:has(input:checked)::before {
content:'\F26C';
color: var(--color_icon_main);
font-weight: 900;
}
label.rev.form_checkbox:has(input:checked)::after,
label.rev.form_checkbox_before:has(input:checked)::before {
content:'\F26C';
color: var(--color_text_tsub);
font-weight: 900;
}
label.green.form_checkbox:has(input:checked)::after,
label.green.form_checkbox_before:has(input:checked)::before {
content:'\F26C';
color: var(--btn_bg_numG);
font-weight: 900;
}
/* Radio */
label.form_radio::after,
label.form_radio_before::before {
content:'\F28A';
}
label.form_radio:has(input:checked)::after,
label.form_radio_before:has(input:checked)::before {
content:'\F26A';
color: var(--color_icon_main);
font-weight: 900;
}
label.rev.form_radio:has(input:checked)::after,
label.rev.form_radio_before:has(input:checked)::before {
content:'\F26A';
color: var(--color_text_tsub);
font-weight: 900;
}
label.green.form_radio:has(input:checked)::after,
label.green.form_radio_before:has(input:checked)::before {
content:'\F26A';
color: var(--btn_bg_numG);
font-weight: 900;
}
/* Toggle */
label.form_toggle::after,
label.form_toggle_before::before {
content:'\F5D5';
}
label.form_toggle:has(input:checked)::after,
label.form_toggle_before:has(input:checked)::before {
content:'\F5D6';
color: var(--color_icon_main);
}
label.rev.form_toggle:has(input:checked)::after,
label.rev.form_toggle_before:has(input:checked)::before {
content:'\F5D6';
color: var(--color_text_tsub);
}
label.green.form_toggle:has(input:checked)::after,
label.green.form_toggle_before:has(input:checked)::before {
content:'\F5D6';
color: var(--btn_bg_numG);
}
.opacity-30 {
opacity: .30!important;
}
.opacity-35 {
opacity: .35!important;
}
.opacity-40 {
opacity: .40!important;
}
.opacity-45 {
opacity: .45!important;
}
.opacity-55 {
opacity: .55!important;
}
.opacity-60 {
opacity: .65!important;
}
.just_table {
}
.just_table th,
.just_table .th,
.sg-gantt .sg-table-header-cell,
.sg-gantt .sg-table-cell .sg-cell-inner {
text-align: justify;
padding: 10px 10px 0 10px;
line-height: 0;
vertical-align: top;
color: #666;
}
.sg-gantt .sg-table-header-cell {
white-space: initial;
display: inline;
padding: 26px 30px 0 30px;
font-weight: bold !important;
}
.sg-gantt .sg-table-cell {
display: block;
white-space: initial;
}
.sg-gantt .sg-table-cell .sg-cell-inner {
padding: 10% 24px !important;
display: block;
text-align: center;
}
.just_table th:after,
.just_table th:before,
.just_table .th:after,
.just_table .th:before,
.sg-gantt .sg-table-header-cell:after,
.sg-gantt .sg-table-header-cell:before,
.sg-gantt .sg-table-cell .sg-cell-inner:after,
.sg-gantt .sg-table-cell .sg-cell-inner:before {
content: "";
display: inline-block;
width: 100%;
}
.sg-gantt .sg-task.cell-dragging-disabled {
opacity: .50!important;
}
.sg-gantt .sg-task.cell-dragging-disabled.svelte-6l5eiz:hover::before,
.sg-gantt .sg-task.cell-dragging-disabled.svelte-6l5eiz:hover::after {
top: -10000px;
}
.sg-gantt .sg-task.cell-dragging-disabled:hover,
.sg-gantt .sg-task.cell-dragging-disabled .sg-task-content.svelte-6l5eiz {
cursor: default;
}
.btn {
}
.btn_main {
min-width: 86px;
padding: 4px;
background-color: var(--btn_bg_main);
border: 1px solid var(--btn_bd_main);
color: var(--color_text_menu_impt);
}
.btn_main:hover {
color: var(--color_text_menu_impt) !important;
background-color: var(--btn_bd_main) !important;
}
.btn:first-child:hover, :not(.btn-check)+.btn:hover {
border: 1px solid var(--btn_bd_main);
}
.btn_main_sm {
min-width: 40px;
}
.btn_prim {
/*min-width: 86px;*/
padding-left: 10px;
padding-right: 10px;
background-color: var(--btn_bg_prim);
border: 1px solid var(--btn_bd_prim);
color: var(--color_text_menu_impt);
}
.btn_prim:hover {
color: var(--color_icon_main);
background-color: #fff !important;
}
.btn_prim_sm {
min-width: 40px;
}
.btn_prim:hover, :not(.btn-check)+.btn_prim:hover {
border: 1px solid var(--color_border_table_top);
}
.btn_sucs {
/*min-width: 86px;*/
padding-left: 10px;
padding-right: 10px;
background-color: var(--btn_bg_numG);
border: 1px solid var(--btn_bd_numG);
color: var(--color_text_menu_impt);
}
.btn_sucs:hover {
color: var(--btn_bd_numG);
background-color: #fff !important;
}
.btn_sucs_sm {
min-width: 40px;
}
.btn_info {
/*min-width: 86px;*/
padding-left: 10px;
padding-right: 10px;
background-color: var(--btn_bg_numS);
border: 1px solid var(--btn_bd_numS);
color: var(--color_text_menu_impt);
}
.btn_info:hover {
color: var(--btn_bd_numS);
background-color: #fff !important;
}
.btn_info_sm {
min-width: 40px;
}
.btn_warn {
/*min-width: 86px;*/
padding-left: 10px;
padding-right: 10px;
background-color: var(--btn_bg_numO);
border: 1px solid var(--btn_bd_numO);
color: var(--color_text_menu_impt);
}
.btn_warn:hover {
color: var(--btn_bd_numO);
background-color: #fff !important;
}
.btn_warn_sm {
min-width: 40px;
}
.btn_pcolor {
width: 20px;
height: 20px;
background-color: #eceff1;
border: 1px solid silver;
}
.form-control-xs {
height: calc(1.3em + 0.4rem + 2px);
padding: 0.1rem 0.3rem;
font-size: .74375rem;
line-height: 1.3;
border-radius: 0.2rem;
min-height: calc(1.3em + 0.4rem + 2px);
}
.btn.btn-nobd {
border: 1px solid var(--color_border_table_top);
color: var(--color_icon_main);
font-weight: bold;
}
.btn.btn-nobd:disabled {
border: 1px solid var(--color_text_dsub);
color: var(--color_text_sub);
font-weight: bold;
}
.btn.btn-nobd:hover {
color: var(--color_text_menu_impt);
background-color: var(--color_icon_main);
}
.btn.btn-nobd2 {
border: 1px solid var(--btn_bd_numR);
color: var(--btn_bg_numR);
font-weight: bold;
}
.btn.btn-nobd2:disabled {
border: 1px solid var(--color_text_dsub);
color: var(--color_text_sub);
font-weight: bold;
}
.btn.btn-nobd2:hover {
border: 1px solid var(--btn_bg_numR);
color: var(--color_text_menu_impt);
background-color: var(--btn_bg_numR);
}
/*********** login ************/
#login {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
/*background-color: #F4F5F7;*/
}
#login-box {
display: flex;
flex-direction: row;
/*padding: 20px;*/
width: 66%;
height: 80%;
min-width: 600px;
border-radius: 6px;
}
#login-info {
display: flex;
align-items: center;
justify-content: center;
flex:1;
height: 75vh;
min-height: 360px;
border-radius: 30px;
margin-right: 10px;
background-image: url("/inc/img/steel_korea.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
box-shadow: 1px 1px 10px #666;
}
#login-form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex:1;
height: 100%;
min-height: 360px;
margin-left: 10px;
font-family: Montserrat;
}
#login-form .login_title {
font-family: Montserrat;
font-size: 20px;
}
#login-form input[type=text],
#login-form input[type=password] {
background-color: #f2f2f2;
border:none;
outline: none;
width: 100%;
padding: 16px;
border-radius: 10px;
margin: 20px 0;
padding-left: 60px;
}
#login-form input[type=text]:focus-visible,
#login-form input[type=password]:focus-visible {
border:none;
outline: none;
}
#login-form .loginBox {
width: 80%;
}
#login-form .loginBox .login-put-field {
position: relative;
}
#login-form .loginBox .login-put-field i {
position: absolute;
font-size: 1.6em;
color: #1770e3;
left: 15px;
top: 30px;
background: #fff;
padding: 6px;
border-radius: 6px;
}
#login-form .loginBox .login_button {
height: 50px;
background-color: #1770e3 !important;
}
#scalendar .selDiv {
text-align: center;
margin-bottom: 0.5em;
}
#scalendar .selDiv a i {
display: inline-block;
font-size: 1.6em;
margin: 0 0.5em;
vertical-align: middle;
}
#awn-popup-wrapper {
z-index: 1001;
}
.xdsoft_datetimepicker .xdsoft_label i, .xdsoft_datetimepicker .xdsoft_next, .xdsoft_datetimepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_today_button {
background-image: url('/inc/img/dpicker_icon.png');
}
ul.pagination {
margin-bottom: 2px;
}
.pagination .npage {
margin-left: 5px;
}
@media (max-width: 640px) {
#login-box {
display: block;
padding: 20px;
width: 90%;
min-width: 90%;
border-radius: 6px;
}
#login-info {
height: 10vh;
min-height: 10vh;
}
#login-form {
border:none;
border-top: solid 1px #BAC5D7;
}
}