261 lines
8.4 KiB
CSS
261 lines
8.4 KiB
CSS
:root {
|
|
--frame_top_height: 60px;
|
|
--frame_side_panel_width: 240px;
|
|
--frame_bgcolor_top: /*#234164*/#fff;
|
|
--frame_bgcolor_sidebar: #FFFFFF;
|
|
--frame_bgcolor_contents: #EFEFEF;
|
|
|
|
--bgcolor_frame : #ffffff; /* 프레임 배경색 */
|
|
--bgcolor_body : #EFEFEF; /* 페이지 기본 배경색 */
|
|
--bgcolor_leftmenu : #FFFFFF; /* 좌측메뉴 배경색 */
|
|
--bgcolor_main_title : #234164; /* 페이지 메인 타이틀 */
|
|
--bgcolor_sub_title : #F5F5F5; /* 페이지 서브 타이틀 */
|
|
--bgcolor_impt_title : #D9D9D9; /* 페이지 서브 타이틀 */
|
|
|
|
--bdcolor_base : #DEDEDE; /* 기본 Border 색상 */
|
|
--radius_base : 8px;
|
|
|
|
--width_leftmenu : 220px; /* 좌측메뉴 넓이 */
|
|
--small_leftmenu : 75px; /*축소된 메뉴 넓이*/
|
|
--height_main_title : 60px; /* 페이지 메인 타이틀 높이 */
|
|
--height_sub_title : 60px; /* 페이지 서브 타이틀 높이 */
|
|
--padding_base : 20px; /* main padding */
|
|
--margin_base : 24px; /* main margin */
|
|
--margin_sub : 3px; /* sub margin */
|
|
--height_logo_block : 60px; /* 로고 영역 높이 */
|
|
--height_menu_block : 65px; /* 메뉴 / 기능 영역 높이 */
|
|
|
|
--color_font_base : #545454; /* 기본폰트 색상 */
|
|
--color_font_impt : #E5E5E5; /* 강조폰트 색상 */
|
|
--color_font_impt2 : #F7941D; /* 강조폰트 색상2 */
|
|
--color_font_impt3 : #2bbfd4; /* 강조폰트 색상2 */
|
|
--color_font_impt4 : #125bbb; /* 강조폰트 색상2 */
|
|
--color_font_red : #FF0000; /* 강조폰트 색상 */
|
|
--color_font_orange : #d2801b; /* 강조폰트 색상 */
|
|
--color_logo_text : #126E91; /* 로고 색상 */
|
|
|
|
--color_icon_main : #1770e3; /* 메인 아이콘 Color */
|
|
--color_icon_sub : #528cec; /* 서브 아이콘 Color */
|
|
--color_bg_icon : #6292cf; /* 서브 아이콘 Color */
|
|
|
|
--color_text_main : #545454; /* 문자 기본 Color */
|
|
--color_text_title : #3782e5; /* 문자 타이틀 Color */
|
|
--color_text_impt : #413C31; /* 문자 강조 Color */
|
|
--color_text_sub : #666666; /* 문자 보조 Color */
|
|
--color_text_dsub : #555555; /* 문자 보조 Color */
|
|
--color_text_tsub : #7fa5f8; /* 문자 보조 Color */
|
|
--color_text_bsub : #ECF1FC; /* 문자 보조 Color */
|
|
--color_text_del : #bac5d7; /* 문자 보조 Color */
|
|
--color_text_link : #294C95; /* 문자 보조 Color */
|
|
|
|
/* 테이블 Color */
|
|
--color_border_table_top : #a0a0a0; /* 메인테이블 상단선 Color */
|
|
--color_border_table_bottom : #959595; /* 메인테이블 하단선 Color */
|
|
--color_border_table_bline : #e8e8e8; /* 테이블 전체 구분선(하단) Color */
|
|
--color_border_table_rline : #e8e8e8; /* 테이블 전체 구분선(오른쪽) Color */
|
|
--color_border_table_selbline : #e8e8e8; /* 테이블 선택 Row 구분선(하단) Color */
|
|
--color_bg_table_main : #fff; /*테이블 전체 배경 Color*/
|
|
--color_border_main : #3660d5; /* 메인테이블 임시 Color */
|
|
--color_border_table_hbottom : #a0a0a0; /* 메인테이블 타이틀 구분선(하단) Color */
|
|
--color_border_table_hright : #DEDEDE; /* 메인테이블 타이틀 구분선(오른쪽) Color */
|
|
--color_bg_table_title : #FFFFFF; /* 메인테이블 타이틀 배경색 */
|
|
--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 : white; /* 메인테이블 Row hover 배경 */
|
|
--color_bg_table_selected : #d6e59a; /* 메인테이블 선택Row 배경 */
|
|
--color_bg_table_hselected : #eef9cd; /* 메인테이블 선택 hover Row 배경 */
|
|
--color_bg_table_selected_sub : #EEFAFC; /*#ffca8e; /* 메인테이블 선택Row 배경 */
|
|
--color_bg_table_hselected_sub : #EEFAFC; /* 메인테이블 선택 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*/
|
|
--color_bg_scroll_main : #eee; /* 스크롤바 배경*/
|
|
--color_bg_scroll_float : var(--frame_bgcolor_sidebar); /* 스크롤바 float thumb */
|
|
--color_bg_scroll_smain : #eee; /*#eee;*/ /* 스크롤바 배경*/
|
|
--color_bg_scroll_sfloat : #71a1ee; /* 스크롤바 float thumb */
|
|
--color_bg_select_block : #f5f5f5; /* 선택 Block 배경 */
|
|
--btn_bd_main : #c0c0c0; /* 메인 버튼 Border Color */
|
|
|
|
}
|
|
|
|
body {
|
|
padding:0;
|
|
margin:0;
|
|
color: var(--color_text_main);
|
|
}
|
|
|
|
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; }
|
|
.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: #666;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Checkbox && Radio && Toggle */
|
|
label.form_checkbox, label.form_radio, label.form_toggle {
|
|
position: relative;
|
|
margin-bottom: 0;
|
|
cursor: pointer;
|
|
}
|
|
label.form_checkbox > input,
|
|
label.form_radio > input,
|
|
label.form_toggle > input {
|
|
position: absolute;
|
|
top: -1000px;
|
|
left: -1000px;
|
|
}
|
|
label.form_checkbox::after,
|
|
label.form_radio::after {
|
|
font-size: 1.2em;
|
|
line-height: 100%;
|
|
font-weight: 100 !important;
|
|
vertical-align: middle;
|
|
margin-left:3px;
|
|
font-family: bootstrap-icons !important;
|
|
}
|
|
label.form_toggle::after {
|
|
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 {
|
|
content:'\F584';
|
|
}
|
|
label.form_checkbox:has(input:checked)::after {
|
|
content:'\F26C';
|
|
color: #1770e3;
|
|
font-weight: 900;
|
|
}
|
|
/* Radio */
|
|
label.form_radio::after {
|
|
content:'\F28A';
|
|
}
|
|
label.form_radio:has(input:checked)::after {
|
|
content:'\F26A';
|
|
color: #1770e3;
|
|
font-weight: 900;
|
|
}
|
|
/* Toggle */
|
|
label.form_toggle::after {
|
|
content:'\F5D5';
|
|
}
|
|
label.form_toggle:has(input:checked)::after {
|
|
content:'\F5D6';
|
|
color: #1770e3;
|
|
}
|