/* people.chrome.css
extension-root/
├── help/
│ ├── people.chrome.help.html
│ ├── people.chrome.help.js
│ ├── people.chrome.css
*/
@font-face {
font-family: 'SpoqaHanSansNeo';
src: url(${chrome.runtime.getURL("fonts/SpoqaHanSansNeo-Regular.woff2")}) format("woff2");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'D2Coding';
src: url(${chrome.runtime.getURL("fonts/D2Coding.woff2")}) format("woff2");
/*swap은 웹폰트가 로드되기 전에는 시스템 기본 폰트를 먼저 보여주고, 로딩이 끝나면 폰트를 즉시 교체하는 방식 */
font-display: swap;
font-weight: normal;
font-style: normal;
}
/* 기본 스타일
body {
background-color: #fff;
color: #212529;
}
body.dark-mode {
background-color: #212529;
color: #f8f9fa;
}
*/
/*=========== .custom-menu : */
.custom-menu {
min-width: 180px;
background-color: #202124; /* 어두운 배경 */
color: #e8eaed; /* 밝은 글자 */
padding: 0.5rem 0;
border-radius: 0.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
position: relative; /* 그냥 화면에 보이도록 */
z-index: 9999; /* 혹시 가려질 경우 대비 */
}
.custom-menu .list-group-item {
border: none;
border-radius: 0;
padding: 0.5rem 1rem;
background-color: transparent;
color: #e8eaed;
}
.custom-menu .list-group-item:hover {
background-color: #3c4043;
cursor: pointer;
}
.custom-divider {
height: 1px;
margin: 0.25rem 0;
background-color: #5f6368;
}
/* =========== .icon-button : 큰 버튼 */
.icon-button {
background-color: #444 ;
width : 55px;
height : 50px;
margin : 1px 4px;
display : flex;
cursor : pointer;
user-select: none;
transition : background-color 0.2s, color 0.2s;
flex-direction: column;
align-items: center;
justify-content: start ;
border: 1px solid ccc ;
border-radius: 6px;
}
.icon-button.active {
background-color: #0d6efd;
color: white;
}
.icon-button:hover {
background-color: #0d6efd;
color: white;
}
.icon-button .icon {
font-size: 24px;
line-height: 1.2 ;
}
.icon-button .label {
font-size: 12px;
margin-top: 1px;
font-weight: 500;
}
/* ============== 예쁜 details */
details, details summary {
font-family: 'Spoqa Han Sans Neo', 'Arial', sans-serif; /* 원하는 폰트명으로 변경 */
font-size: 1rem;
font-weight: 300;
color: #212529;
line-height: 1.5;
}
details {
border: 1px solid #dee2e6;
border-radius: 0.5rem;
background-color: #fdfdfd;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
margin-bottom: 0.5rem;
overflow: hidden;
}
details[open] {
background-color: #f8f9fa;
}
details summary {
position: relative;
padding: 0.3rem 1rem 0.3rem 1.3rem; /* ⬅ 왼쪽에 충분한 공간 확보 */
background-color: #f1f3f5;
cursor: pointer;
list-style: none;
user-select: none;
transition: background-color 0.3s ease;
}
details summary::before {
content: "▶" ;
font-size: 10px ;
position: absolute ;
left: 0.15rem ;
top: 50%;
transform: translateY(-50%);
color: #6c757d;
transition: transform 0.2s ease;
}
details summary:hover {
background-color: #e9ecef;
}
details[open] summary::before {
transform: translateY(-50%) rotate(90deg);
}
details > *:not(summary) {
padding: 0.5rem 0.75rem 0.5rem 2rem; /* summary와 같은 패딩 */
color: #343a40;
}
/*
✅ 2. summary와 details는 지정한 폰트를 상속받습니다
font-family: 'Spoqa Han Sans Neo'가 details, summary에 명시되어 있으면 잘 적용됩니다.
하지만 는 예외입니다.
✅ 해결 방법: 에도 font-family를 명시적으로 적용,아래처럼 CSS에 pre 전용 폰트 설정을 추가해 주세요:
*/
/*
pre {
font-family: 'Spoqa Han Sans Neo', 'Arial', sans-serif !important;
font-size: 1rem !important;
font-weight: 400 !important;
color: #343a40;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
background-color: #f8f9fa;
padding: 0.5rem 1rem;
border-radius: 0.3rem;
margin: 0;
}
*/
/* details > *:not(summary) pre { ==> 작동안함 */
details > pre {
font-family: 'Spoqa Han Sans Neo', 'Arial', sans-serif !important;
font-size: 1rem !important;
font-weight: 300 !important;
line-height: 1.5 !important;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
max-width: 100%;
padding: 0.8rem 0.5rem 0.5rem 1.7rem;
border-radius: 0.3rem;
margin: 0; /* pre 기본 마진 제거 */
}
/* 🌙 다크 모드 스타일 */
body[data-bs-theme="dark"] details {
background-color: #2e2e2e;
border-color: #333;
}
body[data-bs-theme="dark"] details summary {
background-color: #343a40;
color: #f8f9fa;
}
body[data-bs-theme="dark"] details summary:hover { background-color: #3a3a3a; }
body[data-bs-theme="dark"] details summary::before { color: #ccc; }
body[data-bs-theme="dark"] details > *:not(summary) { color: #e0e0e0; }
/*
body.dark-mode details {
background-color: #2e2e2e;
border-color: #444;
}
body.dark-mode details summary {
background-color: #343a40;
color: #f8f9fa;
}
body.dark-mode details summary:hover { background-color: #3a3a3a; }
body.dark-mode details summary::before { color: #ccc; }
body.dark-mode details > *:not(summary) { color: #e0e0e0; }
*/
.son-btn-big {
width : 130px ;
height : 90px ;
display : inline-block ;
margin : 6px 2px ; /* 버튼 간 여백 */
border-radius: 10px; /* 둥근 사각형 느낌 */
background-color: #f2f2f7; /* iOS 스타일의 연한 회색 */
border: 1px solid #d1d1d6;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7); /* 살짝 돋은 느낌 */
align-items: center;
justify-content: center;
font-size: 18px;
color: #000;
cursor: pointer;
transition: all 0.2s ease;
}
.son-btn-big:hover {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
background-color: #e5e5e5;
}
#son_mbox * {
all: unset;
font-family: SpoqaHanSansNeo, D2Coding, 'Noto Sans KR', sans-serif !important;
font-size: 16px !important;
box-sizing: border-box;
color: black ;
}
#son-mbox {
display: flex ;
flex-direction: column;
position: fixed;
top : 50%;
left : 50%;
width : 390px ;
height : 300px ;
min-height:100px ;
background: #d0d0d0;
box-shadow: 1px 1px 2px rgba(0,0,0,0.9);
transform: translate(-50%, -50%);
user-select: none;
z-index : 999999;
resize : both;
overflow: hidden;
}
/*=========== HEADER ==========*/
#son-mbox-header {
height : auto ;
background : #708080 ;
gap : 6px ;
padding : 3px 3px ;
display : flex ;
align-items : stretch ;
position : relative ;
flex-shrink : 0 ;
min-height : 0 ;
cursor : grab ;
justify-content: flex-start;
}
#son-mbox-header button {
padding : 1px 3px ;
font-size : 16px ;
min-width : 32px ;
cursor : pointer ;
user-select: none ;
background: none;
color: #eee;
border: none;
border-radius: 4px;
}
#son-mbox-header button:hover {
background: #333;
color: #fff;
}
#son-mbox-header button.active {
background: blue ;
color: #fff;
}
#son-mbox-btn-expand {
position: absolute;
top: 2px;
right: 36px;
width: 36px;
height: 24px;
line-height: 19px;
text-align: center;
background: #d9534f;
color: white;
border: none;
border-radius: 3px;
}
#son-mbox-btn-expand:hover {
background: #ddd;
}
#son-mbox-btn-close {
position: absolute;
top: 2px;
right: 5px;
width: 26px;
height: 24px;
line-height: 18px;
text-align: center;
font-weight: bold;
background: #d9534f;
color: white;
border: none;
border-radius: 3px;
}
#son-mbox-btn-close:hover {
background: #c9302c;
}
/*=========== TAB ==========*/
#son-mbox-tab-bar {
background : #c0c0c0 ;
height : 30px ;
}
/*========== TAB_0 ==========*/
#son-mbox-tab-0, #son-mbox-tab-1 {
display : flex ;
flex-direction: column ;
flex : 1 ;
min-height : 0 ;
height : auto ;
background : #c0c0c0 ;
}
/*=========== HEAD ==========*/
#son-mbox-head {
display : flex ;
flex-shrink: 0 ;
align-items: center ;
border : 1px solid red ;
gap : 6px ;
height : auto ;
padding : 2px 6px ;
background : #c0c0c0 ;
user-select: none ;
}
#son-mbox-head button {
padding : 1px 3px ;
font-size : 16px ;
min-width : 32px ;
cursor : pointer ;
user-select: none ;
}
/*=========== CONTENT ==========*/
#son-mbox-content {
flex : 1 ;
min-height : 0 ;
overflow : auto ;
color : black ;
background : #e0e0e0 ;
padding : 8px ;
outline : none ;
user-select: text ;
spellcheck : false ;
}
/*=========== FOOT ==========*/
#son-mbox-foot {
height: auto ;
flex-shrink: 0 ;
padding: 2px 4px ;
align-items: center ;
background: #b0b0b0 ;
color: #333 ;
font-size: 13px ;
user-select: none ;
}
/*========= MENU ==========*/
.son-menu {
display : none ; /* 기본 숨김, display: flex; */
overflow : hidden ;
width : max-content ;
min-width : 90px ;
min-height : 60px ;
box-sizing : border-box ;
border : 2px solid #ccc ;
border-radius : 4px ;
box-shadow : 0 4px 12px rgba(0, 0, 0, 0.3);
flex-direction : column ;
margin-bottom : 5px ;
background-color: #282828 ;
/* resize : both ; */ /* 수평+수직 리사이즈 허용 */
}
.son-menu--header {
display : flex;
align-items : center;
background-color: #4a4a4a;
border-bottom : 1px solid #888;
padding : 2px 8px ;
gap : 6px ;
}
.son-menu--title {
flex : 1 1 auto ;
min-width : 0 ;
overflow : hidden ;
white-space : nowrap ;
text-overflow: ellipsis ;
font-weight : bold ;
font-size : 15px ;
color : #fffbe6 ;
}
.son-menu--btn-close {
flex : 0 0 auto ;
width : 32px ;
height : 32px ;
background : none ;
border : none ;
color : #f0f0f0 ;
font-size : 20px ;
cursor : pointer ;
line-height : 32px ;
padding : 0 ;
text-align : center ;
}
.son-menu--btn-close:hover {
color: #ffcc66;
}
.son-menu--content {
display : block ;
overflow : auto ;
font-size : 14px ;
padding : 2px 2px 2px 2px ;
}
.son-menu--item {
display : block ;
width : 100% ;
box-sizing : border-box ;
text-align : left ;
word-break : break-word ; /* or break-all */
overflow-wrap: break-word ;
white-space : normal ; /* 줄바꿈 허용 */
font-size: 14px;
padding: 3px 6px;
background: none;
border: none;
text-align: left;
color: #f0f0f0;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
}
.son-menu--item.selected {
background-color: #5c513b;
color : #fffbe6;
font-weight: bold;
}
.son-menu--item:hover {
background-color: #5c513b;
color: #fffbe6;
}
.son-menu--item:focus {
outline: none;
background-color: #6e5f3a;
}
.son-menu--item-desc, .son-menu-item-hint {
white-space: normal;
word-break : break-word;
font-size : 0.85em;
color : #666;
}
.son-menu--footer {
display: flex;
justify-content: flex-end;
gap : 8px;
padding : 9px;
}
/* 버튼이 menu-item 이다
.son-menu button:not(.son-menu-btn-close) {
font-size: 14px;
padding: 2px 15px;
background: none;
border: none;
text-align: left;
width: 100%;
color: #f0f0f0;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
}
.son-menu button:not(.son-menu-btn-close):hover {
background-color: #5c513b;
color: #fffbe6;
}
.son-menu button:not(.son-menu-btn-close):focus {
outline: none;
background-color: #6e5f3a;
}
*/
.son-menu--divider {
/* flex 컨테이너 안의 빈 요소는 min-height 없으면 사라질 수 있다. */
height : 1px !important;
min-height: 1px !important; /* 이게 없으면 선이 안나타난다 */
background-color:#666 ;
margin : 5px 0 !important;
width : 100% ;
/*
flex : 0 0 auto !important;
display : block !important;
border : none !important;
width : 98% !important;
opacity : 1 !important;
z-index : 999999 !important;
*/
}
.son-menu button.selected {
background-color: #444;
color: #fffbe6;
font-weight: bold;
}
/* ========= BUTTON-GROUP ==========*/
.son-btn-g-text {
font-family: sans-serif;
font-size: 14px;
display: inline-flex;
gap: 0;
align-items: center;
}
.son-btn-g-text button {
background: none;
border: none;
padding: 4px 2px;
color: #007bff;
cursor: pointer;
font-size: 14px;
}
.son-btn-g-text button:hover {
text-decoration: underline;
}
.son-btn-g-text button + button::before,
.son-btn-g-text span + button::before {
content: "|";
margin: 0 3px;
color: #999;
}
.son-btn-g-text span {
display: inline-flex;
align-items: center;
padding: 4px 2px;
font-size: 14px;
color: #333;
}
/*----------------------------------------------------------------
listgroup 같은 radio-box.check-box
https://www.sliderrevolution.com/resources/styling-radio-buttons/ (59 Custom Examples)
built-in radio,checkbox 를 display none 시킨다
label 을 lis-group-item 처럼 나타나게 만든다
lebel 의 before,after 에 radio,checkbox 같은 모양을 만든다(동그라미는 사각형 border-radius 를 조절 하여 생성)
그 내부에 tick-mark 를 부착 한다
sample
-------------------------------------------------------------------*/
.son-radio , .son-checkbox {
position: relative ;
display : block ;
}
/* 마크 와 label의 간격은 padding-left(4번째) 로 조절 */
.son-radio label, .son-checkbox label {
display : block ;
background: #eed ; /* #fee8c3; */
color : #111 ; /* #444; */
padding : 1px 2px 2px 22px ; /* padding: 10px 40px; */
margin-bottom: 4px;
cursor: pointer;
border : solid 1px #ddd ; /* #fdd591 */
border-radius: 1px ;
box-shadow : 0 1px 1px rgba(0,0,0,.65);
}
.son-radio label:after, .son-radio label:before {
content : "";
position : absolute;
width : 16px; /* default= 18px?? */
height : 16px;
top : 4px;
left : 4px; /* 10px */
border-radius: 16px; /* 둥글게 둥글게..., 16px 이상은 거의 동일 */
background: #fdcb77;
}
/* :after 가 왜 필요한가?? */
.son-checkbox label:before, .son-checkbox label:after { /* border-radius 만 다르다 */
content: "";
position: absolute;
width : 16px ;
height : 16px ;
top : 4px ;
left : 4px ;
border-radius: 1px; /* 네모 box 모양 */
background: #fdcb77;
}
.son-radio label:before, .son-checkbox label:before {
background: transparent;
/* 우리 이제는 헤매지 말자... 아닌 밤중에 달이 밝아도 */
/* transition: 0.1s width cubic-bezier(0.075, 0.82, 0.165, 1) 0s, 0.3s height cubic-bezier(0.075, 0.82, 0.165, 2) 0.1s; */
z-index: 2;
overflow: hidden;
background-repeat: no-repeat;
background-size: 13px;
background-position: center;
width : 0 ;
height: 0 ;
/* check-mark , '✓' */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS4zIDEzLjIiPiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0LjcuOGwtLjQtLjRhMS43IDEuNyAwIDAgMC0yLjMuMUw1LjIgOC4yIDMgNi40YTEuNyAxLjcgMCAwIDAtMi4zLjFMLjQgN2ExLjcgMS43IDAgMCAwIC4xIDIuM2wzLjggMy41YTEuNyAxLjcgMCAwIDAgMi40LS4xTDE1IDMuMWExLjcgMS43IDAgMCAwLS4yLTIuM3oiIGRhdGEtbmFtZT0iUGZhZCA0Ii8+PC9zdmc+);
}
.son-radio input[type=radio], .son-checkbox input[type=checkbox] {
display : none ; /* 너는 아예 나타나지 마라 */
position: absolute ;
width: 100%;
left :20px ; /* 이 값을 변경해도 헛방이다, 작동 안한다 */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.son-radio input[type=radio]:checked + label, .son-checkbox input[type=checkbox]:checked + label {
background: #fdcb77;
/*
-webkit-animation-name: blink;
animation-name: blink;
-webkit-animation-duration: 1s;
animation-duration: 1s;
border-color: #fcae2c;
*/
}
/* check 된 녀석의 동그라미 색깔 */
.son-radio input[type=radio]:checked + label:after, .son-checkbox input[type=checkbox]:checked + label:after {
background: green ; /* #fcae2c; */
}
/* 동그래미/사각 안의 check-mark */
.son-radio input[type=radio]:checked + label:before , .son-checkbox input[type=checkbox]:checked + label:before{
width : 16px ;
height: 16px ;
}