/* * 손그림 테마 (spec 7장 테마 구조. 왕코털의 그림으로 만든 기본 테마) * * 이루는 것: 이 CSS 파일 하나 + 그림 폴더 하나(img/). 테마를 바꾸는 것은 이 파일을 부르는 한 줄을 바꾸는 것으로 끝난다. * 사이트에 붙이는 법은 docs/usage.md, 변수와 한계는 docs/theming.md. * * - 그림 주소는 절대 경로다 (상대 경로는 Firefox·Safari에서 페이지 주소 기준으로 풀린다). 저장소 안에서는 /static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/로 적고, * npm run release가 배포 경로(/assets/components/kotul-ui-component/<버전>/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/)로 바꿔 적는다. * 그래서 이 파일의 /static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/ 은 손으로 바꾸지 않는다. * - 컴포넌트는 공개 CSS 변수(--kot-*)로만 꾸민다. 안쪽 클래스는 건드리지 않는다. * - 목록 머리 기호·라디오·체크박스 등 본문 기본 요소는 테마가 꾸민다 (spec 7장). * - .theme-choice(라디오·체크박스 줄), .theme-box-light(연한 네모 틀 고르기), .theme-icon-search(검색 아이콘)는 테마가 주는 보조 클래스다. * - 다크 모드: 시스템 설정을 따르고, 로 고정할 수 있다. 페이지 일부만 바꾸려면 그 요소에 data-theme. * - 사이트별 강조색은 이 파일 뒤에 --kot-color-accent 한 줄짜리 CSS를 더 부른다. * 선(틀·빗금)은 가족 사이트가 같이 쓰는 연필 회색이고, 링크와 1단계 목록 머리 기호는 글자용 강조색(--kot-color-accent-text, * 없으면 --kot-color-accent)이다 (spec 7장, 결정 0010). * - 알려진 한계 (docs/theming.md): 빗금은 좁은 곳에만, 빗금 위 화살표는 묻힐 수 있음. */ /* ---------- 색 (테마 안에서만 쓰는 --hd-* 변수) ---------- */ :root, [data-theme='light'] { --hd-line: #3a3a3a; --hd-paper: #fffdf7; --hd-ink: #2b2b2b; --hd-note-paper: #fffce7; --hd-note-heading: #b4561c; --hd-hatch: #4a4a4a; /* 빗금: 연필 회색 (2015년 레이아웃처럼, 강조색을 따라가지 않음) */ --hd-fill: #f2cf7a; --hd-pressed: rgb(0 0 0 / 0.1); /* 버튼이 눌린 동안 덧칠 */ --hd-backdrop: rgb(43 43 43 / 0.45); /* 대화상자 뒤 오버레이 (연필 회색) */ --hd-invalid: #fbe1dc; /* 잘못된 입력칸의 속 (옅은 빨강) */ --hd-autofill: #e8f0fe; /* 브라우저 자동 완성으로 채운 입력칸의 속 (옅은 파랑, 크롬 자동 완성 색과 같음. 글자 #2b2b2b 위 12.36:1) */ --hd-tab-muted: #75706a; /* 옛 탭(folder)의 나머지 탭 글자 (종이색 위 4.82:1) */ --hd-danger: #a45139; /* 오류 글자·점선: 벽돌색 (종이색 위 5.41:1) */ --hd-tape: rgb(232 214 160 / 0.72); /* 마스킹 테이프 속 (반투명 베이지) */ color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --hd-line: #e9e4d8; --hd-paper: #23262b; --hd-ink: #eeeae0; --hd-note-paper: #3a3527; --hd-note-heading: #f0a46a; --hd-hatch: #cfc9bb; --hd-fill: #8a6d2b; --hd-pressed: rgb(255 255 255 / 0.14); --hd-backdrop: rgb(0 0 0 / 0.6); --hd-invalid: #4d2420; --hd-autofill: #2e3746; --hd-tab-muted: #959085; --hd-danger: #e0896f; --hd-tape: rgb(226 210 165 / 0.75); color-scheme: dark; } } [data-theme='dark'] { --hd-line: #e9e4d8; --hd-paper: #23262b; --hd-ink: #eeeae0; --hd-note-paper: #3a3527; --hd-note-heading: #f0a46a; --hd-hatch: #cfc9bb; --hd-fill: #8a6d2b; --hd-pressed: rgb(255 255 255 / 0.14); --hd-backdrop: rgb(0 0 0 / 0.6); --hd-invalid: #4d2420; /* 어두운 빨강 */ --hd-autofill: #2e3746; /* 어두운 파랑 (글자 #eeeae0 위 9.98:1) */ --hd-tab-muted: #959085; /* 어두운 바탕 위 4.77:1 */ --hd-danger: #e0896f; /* 밝은 벽돌색 (어두운 바탕 위 5.77:1) */ --hd-tape: rgb(226 210 165 / 0.75); /* 어두운 바탕에서는 덜 비치게 (많이 비치면 바탕이 섞여 탁해진다) */ color-scheme: dark; } /* * ---------- 컴포넌트 변수 ---------- * 다른 변수를 쓰는 변수는 값을 정한 요소에서 계산되므로, data-theme으로 일부만 바꾼 요소에서도 다시 정한다. */ :root, [data-theme] { /* 오류 색과 고정폭 글꼴 (kot-guru). 글꼴은 내장하지 않고 기기에 있는 것을 부른다 (아이폰·맥 Safari: ui-monospace = SF Mono, 맥: Menlo, 윈도우: Consolas. spec 7장) */ --kot-color-danger: var(--hd-danger); --kot-font-mono: ui-monospace, Menlo, Consolas, monospace; --hd-hatch-tile: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/hatch.png); --hd-hatch-size: 409.5px; /* 그림 819px의 반. 높이는 그림 비율대로 */ --hd-eraser-width: 2px; --hd-eraser-shadow: 0 0 var(--hd-eraser-width) var(--hd-paper), var(--hd-eraser-width) 0 var(--hd-eraser-width) var(--hd-paper), calc(-1 * var(--hd-eraser-width)) 0 var(--hd-eraser-width) var(--hd-paper), 0 var(--hd-eraser-width) var(--hd-eraser-width) var(--hd-paper), 0 calc(-1 * var(--hd-eraser-width)) var(--hd-eraser-width) var(--hd-paper), 0 0 calc(2 * var(--hd-eraser-width)) var(--hd-paper), 0 0 calc(3 * var(--hd-eraser-width)) var(--hd-paper); /* 상자 공통: 옛 테두리를 끄고 손그림 틀(진한 네모)을 켠다 */ --kot-box-border-width: 0px; --kot-box-radius: 0px; --kot-box-padding: 22px; --kot-box-frame-color: var(--hd-line); --kot-box-frame-corner-tl: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/box-dark-corner-tl.png); --kot-box-frame-corner-tr: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/box-dark-corner-tr.png); --kot-box-frame-corner-bl: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/box-dark-corner-bl.png); --kot-box-frame-corner-br: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/box-dark-corner-br.png); --kot-box-frame-edge-top: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/box-dark-edge-top.png); --kot-box-frame-edge-bottom: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/box-dark-edge-bottom.png); --kot-box-frame-edge-left: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/box-dark-edge-left.png); --kot-box-frame-edge-right: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/box-dark-edge-right.png); --kot-box-frame-corner-size: 18px; --kot-box-frame-edge-length: 64px; --kot-box-frame-inset: 5px; --kot-section-box-bg: transparent; --kot-note-box-bg: var(--hd-note-paper); --kot-note-box-color: var(--hd-ink); --kot-note-box-heading-color: var(--hd-note-heading); --kot-foldable-box-bg: transparent; --kot-foldable-box-body-bg: transparent; --kot-foldable-box-inset: 10px; --kot-foldable-box-head-padding: 4px; --kot-card-image-bg: transparent; --kot-card-image-border-width: 0px; /* 카드도 손그림 틀 (위의 --kot-box-frame-*) */ --kot-card-image-border-color: var(--hd-line); --kot-card-image-heading-color: var(--hd-ink); --kot-card-image-thumb-bg: var(--hd-paper); --kot-card-image-thumb-border-color: transparent; /* 썸네일 칸의 가는 회색 테두리는 지운다 (손그림 틀만) */ --kot-card-image-shadow: none; /* 빗금·지우개 (foldable 제목줄) */ --kot-hatch-image: var(--hd-hatch-tile); --kot-hatch-color: var(--hd-hatch); --kot-hatch-size: var(--hd-hatch-size); --kot-eraser-color: var(--hd-paper); --kot-eraser-width: var(--hd-eraser-width); /* foldable 손그림 화살표: 펼침 ∨ / 접힘 ∧ (큰 것) */ --kot-foldable-box-arrow-image: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/arrow-down-large.png); --kot-foldable-box-arrow-folded-image: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/arrow-up-large.png); } /* * foldable 제목줄 글자색은 요소에서 정한다 (kot-button과 같음). 사이트색 파일이 :root에 거는 값 * (예: kotul.net은 노랑 제목줄 위 짙은 글자)이 투명한 손그림 제목줄을 덮지 않게 하려고. */ kot-foldable-box { --kot-foldable-box-head-color: var(--hd-ink); } /* 연한 네모: note와 내려받기 항목의 기본 틀. 다른 상자도 이 클래스로 고를 수 있다 */ kot-note-box, kot-download-item, .theme-box-light { --kot-box-frame-corner-tl: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/box-light-corner-tl.png); --kot-box-frame-corner-tr: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/box-light-corner-tr.png); --kot-box-frame-corner-bl: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/box-light-corner-bl.png); --kot-box-frame-corner-br: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/box-light-corner-br.png); --kot-box-frame-edge-top: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/box-light-edge-top.png); --kot-box-frame-edge-bottom: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/box-light-edge-bottom.png); --kot-box-frame-edge-left: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/box-light-edge-left.png); --kot-box-frame-edge-right: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/box-light-edge-right.png); } .theme-box-light { --kot-section-box-bg: var(--hd-note-paper); } /* ---------- 바탕 ---------- */ body, [data-theme]:not(:root) { background: var(--hd-paper); color: var(--hd-ink); } a { color: var(--kot-color-accent-text, var(--kot-color-accent)); } /* * ---------- 본문 기본 요소: 입력칸 글자 크기 ---------- * 글을 쓰는 입력칸의 글자는 16px 이상 (iOS Safari는 글자가 16px보다 작은 입력칸에 포커스가 가면 화면을 멋대로 확대한다). * viewport의 maximum-scale로 막지 않는다: 손가락으로 확대하는 것까지 막힌다. 부모 글자가 더 크면 그 크기를 따른다. */ input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), select, textarea { font-size: max(16px, 1em); } /* * ---------- 본문 기본 요소: 목록 머리 기호 ---------- * 겹친 단계마다 다른 그림: 1 ◉, 2 •, 3 −. 그림(52×39)을 1/3로 쓴다. 1단계는 글자용 강조색, 나머지는 선 색. */ ul { list-style: none; padding-inline-start: 1.5em; } ul li { --hd-bullet: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/bullet-level1.png); --hd-bullet-color: var(--kot-color-accent-text, var(--kot-color-accent)); position: relative; } ul ul li { --hd-bullet: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/bullet-level2.png); --hd-bullet-color: var(--hd-line); } ul ul ul li { --hd-bullet: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/bullet-level3.png); } ul li::before { content: ''; position: absolute; inset-inline-start: -1.3em; top: calc(0.8em - 6.5px); width: 17.3px; height: 13px; background: var(--hd-bullet-color); -webkit-mask: var(--hd-bullet) center / contain no-repeat; mask: var(--hd-bullet) center / contain no-repeat; } /* * ---------- 본문 기본 요소: 라디오·체크박스 (진짜 input + appearance: none + mask) ---------- * 상태마다 그림이 다르다. 못 쓰는 상태는 빗금·테두리를 모두 --kot-disabled-opacity로 연하게 (spec 7장, kot-button과 같은 값). * 못 쓰는 + 선택 안 됨 = 빗금 그림, 못 쓰는 + 선택됨 = 선택 그림을 연하게. */ input[type='radio'], input[type='checkbox'] { -webkit-appearance: none; appearance: none; flex: none; margin: 0; border: 0; background: var(--hd-line); vertical-align: middle; cursor: pointer; -webkit-mask: var(--hd-input-image) left bottom / 100% 100% no-repeat; mask: var(--hd-input-image) left bottom / 100% 100% no-repeat; } input:disabled { opacity: var(--kot-disabled-opacity, 0.4); cursor: not-allowed; } input[type='radio']:focus-visible, input[type='checkbox']:focus-visible { outline: 2px dashed var(--hd-line); outline-offset: 2px; } /* 라디오 그림 71×71을 1/3로 */ input[type='radio'] { --hd-input-image: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/radio-unchecked.png); width: 23.7px; height: 23.7px; } input[type='radio']:checked { --hd-input-image: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/radio-checked.png); } input[type='radio']:disabled:not(:checked) { --hd-input-image: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/radio-disabled.png); } /* * 체크박스 그림 96×103을 1/4로. 체크가 상자 위·오른쪽으로 삐져나오는 그림이라 * input을 그림 크기만큼 키우고, 음수 바깥 여백으로 줄 배치에서는 상자(그림의 x 4~81, y 12~99)만큼만 차지하게 한다. * (mask는 요소 밖을 칠할 수 없고, input은 ::before를 가질 수 없다) */ input[type='checkbox'] { --hd-input-image: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/checkbox-unchecked.png); width: 24px; height: 25.75px; margin: -3px -3.75px -1px -1px; } input[type='checkbox']:checked { --hd-input-image: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/checkbox-checked.png); } input[type='checkbox']:disabled:not(:checked) { --hd-input-image: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/checkbox-disabled.png); } /* * 체크박스·라디오를 감싼 label: 빠르게 두 번 눌러도 글자가 선택되지 않게. 안에 글 입력칸이 있으면 걸지 않는다 * (입력칸의 조상에 user-select: none을 걸면 WebKit에서 입력칸 안 선택이 꼬인다) */ label:has(> input:is([type='checkbox'], [type='radio'])):not(:has(textarea, input:not([type='checkbox'], [type='radio'], [type='hidden']))) { -webkit-user-select: none; user-select: none; } .theme-choice { display: flex; align-items: center; gap: 8px; margin-block: 6px; } /* * ---------- kot-button ---------- * 둥근 모서리 작은 틀 그림 (결정 0009. 원본 조각을 1/2로: 모서리 32 → 16, 가로 변 64 → 32, 세로 변 24 → 12). * 강조는 바탕 없이 연필 회색 빗금(위의 --kot-hatch-*)과 지우개. 이 요소에서 정해야 data-theme 영역의 색을 따라간다. */ kot-button { --kot-button-border-width: 0px; --kot-button-radius: 10px; /* 그린 틀의 둥글기에 맞춤. 눌림 표시가 선 밖으로 나가지 않게 */ --kot-button-padding: 8px 24px; --kot-button-color: var(--hd-ink); --kot-button-emphasis-bg: transparent; --kot-button-emphasis-color: var(--hd-ink); --kot-button-focus-color: var(--hd-line); --kot-button-pressed-shade: var(--hd-pressed); --kot-button-frame-color: var(--hd-line); --kot-button-frame-corner-tl: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/button-round-corner-tl.png); --kot-button-frame-corner-tr: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/button-round-corner-tr.png); --kot-button-frame-corner-bl: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/button-round-corner-bl.png); --kot-button-frame-corner-br: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/button-round-corner-br.png); --kot-button-frame-edge-top: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/button-round-edge-top.png); --kot-button-frame-edge-bottom: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/button-round-edge-bottom.png); --kot-button-frame-edge-left: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/button-round-edge-left.png); --kot-button-frame-edge-right: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/button-round-edge-right.png); --kot-button-frame-corner-size: 16px; --kot-button-frame-edge-length: 32px; --kot-button-frame-edge-length-block: 12px; --kot-button-frame-inset: 4px; /* 그림 바깥 끝에서 연필 선까지 */ } /* * ---------- kot-dialog ---------- * 틀은 위의 상자 틀(진한 네모)을 그대로 물려받는다. 이 요소에서 정해야 data-theme 영역의 색을 따라간다. */ kot-dialog { --kot-dialog-bg: var(--hd-paper); --kot-dialog-color: var(--hd-ink); --kot-dialog-border-color: var(--hd-line); --kot-dialog-backdrop: var(--hd-backdrop); } /* * ---------- kot-tag ---------- * 짐 꼬리표: 평평한 끝 / 가운데 반복 / 뾰족한 끝과 끈 구멍. 원본 조각(높이 113, 24 / 64 / 68)을 1/3로 쓴다. * 속 모양(tag-fill-*)은 자르는 스크립트가 만든 것이다 (끈 구멍은 뚫림, 선 안쪽으로 줄임. 결정 0014). * 속 색은 정하지 않는다: 상징색(--kot-color-accent)을 따라간다. 글자색도 정하지 않는다 (상징색이 밝은 사이트가 사이트색 파일에서 정한다). * 이 요소에서 정해야 data-theme 영역의 선 색을 따라간다. */ kot-tag { --kot-tag-block-size: 38px; --kot-tag-border-width: 0px; --kot-tag-radius: 0px; --kot-tag-padding-inline: 4px; --kot-tag-focus-color: var(--hd-line); --kot-tag-frame-color: var(--hd-line); --kot-tag-frame-start: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/tag-left.png); --kot-tag-frame-middle: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/tag-middle.png); --kot-tag-frame-end: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/tag-right.png); --kot-tag-fill-start: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/tag-fill-left.png); --kot-tag-fill-middle: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/tag-fill-middle.png); --kot-tag-fill-end: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/tag-fill-right.png); --kot-tag-frame-start-width: calc(38px * 24 / 113); --kot-tag-frame-middle-width: calc(38px * 64 / 113); --kot-tag-frame-end-width: calc(38px * 68 / 113); } /* * ---------- kot-text-field ---------- * 입력칸: 둥근 끝 / 가운데 반복 / 둥근 끝. 원본 조각(높이 90, 40 / 64 / 40)을 1/2로 쓴다 (높이 45px, 버튼 최소 44px와 맞음). * 그림은 자르는 스크립트가 손봤다: 비스듬한 변을 곧게 펴고, 연하게 그린 긴 변을 양 끝 진하기에 맞춤 (spec 16장). * 속 모양(input-fill-*)도 스크립트가 만든 것이다. 속은 종이색이라 빗금 위(리본)에 놓여도 빗금을 가린다. * 잘못된 입력은 선은 그대로, 속만 옅은 빨강 (다크 모드는 어두운 빨강). * ▼▲는 큰 올림·내림 그림(51×44를 1/2로)을 옆으로 나란히. 이 요소에서 정해야 data-theme 영역의 색을 따라간다. */ kot-text-field { --kot-text-field-block-size: 45px; --kot-text-field-border-width: 0px; --kot-text-field-radius: 22.5px; /* 포커스 점선이 둥근 끝을 따르게 */ --kot-text-field-padding-inline: 2px; --kot-text-field-bg: var(--hd-paper); --kot-text-field-invalid-bg: var(--hd-invalid); --kot-text-field-autofill-bg: var(--hd-autofill); --kot-text-field-color: var(--hd-ink); --kot-text-field-focus-color: var(--hd-line); --kot-text-field-frame-color: var(--hd-line); --kot-text-field-frame-start: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/input-left.png); --kot-text-field-frame-middle: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/input-middle.png); --kot-text-field-frame-end: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/input-right.png); --kot-text-field-fill-start: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/input-fill-left.png); --kot-text-field-fill-middle: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/input-fill-middle.png); --kot-text-field-fill-end: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/input-fill-right.png); --kot-text-field-frame-start-width: 20px; --kot-text-field-frame-middle-width: 32px; --kot-text-field-frame-end-width: 20px; --kot-text-field-step-up-image: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/icon-spinner-up-large.png); --kot-text-field-step-down-image: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/icon-spinner-down-large.png); --kot-text-field-step-inline-size: 25.5px; --kot-text-field-step-block-size: 22px; } /* 검색 아이콘 (보조 클래스): kot-text-field의 slot="start" 등에. 작은 검색 그림(54×58)을 1/2로, 색은 선 색 */ .theme-icon-search { display: inline-block; inline-size: 27px; block-size: 29px; vertical-align: middle; background: var(--hd-line); -webkit-mask: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/icon-search-small.png) center / contain no-repeat; mask: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/icon-search-small.png) center / contain no-repeat; } /* * ---------- kot-tag-input ---------- * 칩은 kot-tag 그림(꼬리표), 입력칸은 kot-text-field 그림(알약) 그대로. 제안 목록은 종이색 바탕 + 연필 선 (손그림 틀은 아직 없음). * 이 요소에서 정해야 data-theme 영역의 색을 따라간다. */ kot-tag-input { --kot-tag-input-focus-color: var(--hd-line); --kot-tag-input-popup-bg: var(--hd-paper); --kot-tag-input-popup-color: var(--hd-ink); --kot-tag-input-popup-border-color: var(--hd-line); --kot-tag-input-popup-radius: 4px; --kot-tag-input-error-color: var(--hd-danger); } /* * ---------- kot-ribbon ---------- * 2015년 레이아웃처럼 종이색 알약에 연필 회색 빗금 (상징색을 쓰지 않음, spec 7장). 띠 높이 60px. * 틀은 입력칸 알약(원본 높이 90, 40 / 64 / 40)을 60px로 늘려 쓴다. 리본 전용 그림은 그리지 않는다 (2026-11-10 확정, spec 13.1.1·결정 0017). * 안에 들어가는 검색칸(45px, 같은 알약)보다 커서 두 알약의 선이 겹치지 않는다. * 이 요소에서 정해야 data-theme 영역의 색을 따라간다. */ kot-ribbon { --kot-ribbon-block-size: 60px; --kot-ribbon-radius: 0px; --kot-ribbon-padding-inline: 12px; --kot-ribbon-gap: 20px; --kot-ribbon-row-gap: 12px; --kot-ribbon-bg: var(--hd-paper); --kot-ribbon-color: var(--hd-ink); --kot-ribbon-frame-color: var(--hd-line); --kot-ribbon-frame-start: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/input-left.png); --kot-ribbon-frame-middle: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/input-middle.png); --kot-ribbon-frame-end: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/input-right.png); --kot-ribbon-fill-start: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/input-fill-left.png); --kot-ribbon-fill-middle: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/input-fill-middle.png); --kot-ribbon-fill-end: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/input-fill-right.png); --kot-ribbon-frame-start-width: calc(60px * 40 / 90); --kot-ribbon-frame-middle-width: calc(60px * 64 / 90); --kot-ribbon-frame-end-width: calc(60px * 40 / 90); --kot-eraser-color: var(--hd-paper); } /* 메뉴 목록에는 본문 목록 머리 기호(위 "본문 기본 요소")를 그리지 않는다 */ kot-ribbon li::before { content: none; } /* 띠 위 링크: 띠 글자색, 밑줄 없음. 지금 페이지는 굵게 + 글자용 강조색 밑줄 (색만으로 알리지 않음) */ kot-ribbon a { color: inherit; text-decoration: none; } kot-ribbon a:hover { text-decoration: underline; } kot-ribbon a[aria-current='page'] { font-weight: bold; text-decoration: underline; text-decoration-color: var(--kot-color-accent-text, var(--kot-color-accent)); text-decoration-thickness: 3px; text-underline-offset: 4px; } /* 띠 위 아이콘의 지우개 (spec 7장): 둘레에 종이색을 둘러 빗금을 지운 것처럼 */ kot-ribbon img { filter: drop-shadow(var(--hd-eraser-width) 0 0 var(--hd-paper)) drop-shadow(calc(-1 * var(--hd-eraser-width)) 0 0 var(--hd-paper)) drop-shadow(0 var(--hd-eraser-width) 0 var(--hd-paper)) drop-shadow(0 calc(-1 * var(--hd-eraser-width)) 0 var(--hd-paper)); } /* * ---------- kot-reactions ---------- * 반응 여섯: 따봉(빈 엄지 → 눌리면 찬 엄지)과 얼굴 다섯. 그림 칸 48px (원본 약 95×111의 1/2 안팎). * 이모지는 숨기고 그림을 쓴다. 눌림은 속 모양을 상징색으로 채운다 (선 위에 얹음). 버튼 칸 바탕은 깔지 않는다. * 눌린 속(상징색) 위의 선 색(--kot-reactions-pressed-color, 기본 흰색)은 테마가 정하지 않는다. 상징색이 밝은 사이트가 사이트색 파일에서 짙게 정한다. * 이 요소에서 정해야 data-theme 영역의 색을 따라간다. */ kot-reactions { --kot-reactions-icon-size: 48px; --kot-reactions-emoji-size: 0px; --kot-reactions-gap: 4px; --kot-reactions-color: var(--hd-line); --kot-reactions-pressed-button-bg: transparent; --kot-reactions-count-color: var(--hd-ink); --kot-reactions-error-color: var(--kot-color-accent-text, var(--kot-color-accent)); --kot-reactions-icon-like: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/thumb-up-outline.png); --kot-reactions-fill-like: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/thumb-up-outline-fill.png); --kot-reactions-icon-like-pressed: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/thumb-up-filled.png); --kot-reactions-fill-like-pressed: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/thumb-up-filled-fill.png); --kot-reactions-icon-love: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/face-love.png); --kot-reactions-fill-love: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/face-love-fill.png); --kot-reactions-icon-angry: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/face-angry.png); --kot-reactions-fill-angry: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/face-angry-fill.png); --kot-reactions-icon-meh: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/face-meh.png); --kot-reactions-fill-meh: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/face-meh-fill.png); --kot-reactions-icon-thinking: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/face-thinking.png); --kot-reactions-fill-thinking: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/face-thinking-fill.png); --kot-reactions-icon-sad: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/face-sad.png); --kot-reactions-fill-sad: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/face-sad-fill.png); } /* * ---------- kot-download-item ---------- * 틀은 연한 네모 (위 kot-note-box와 같은 그림). 내려받기 목록에는 본문 목록 머리 기호를 그리지 않는다. * 크기 글자는 선 색으로 조금 옅게. */ kot-download-item { --kot-download-item-size-color: var(--hd-line); } kot-download-item [slot='files'] > li::before { content: none; } /* * ---------- kot-tabs · kot-tab-nav ---------- * 모양 둘 (variant). 새 그림 없음. * - folder (기본, 옛 탭): 지금 탭만 버튼의 둥근 틀 조각(button-round-*)에서 아래 모서리·아래 변을 뺀 틀 + 굵은 글자, * 속은 종이색으로 칠해 그 아래의 아래 선을 덮는다 (아래가 열려 아래 선과 이어짐). 나머지 탭은 틀 없이 연한 글자. * 아래 선은 연한 상자 위 변 조각(box-light-edge-top, 64×18px, 선은 위에서 약 5px)을 올려 탭 아래 끝에 맞춘다. * - hatch (빗금 탭): 지금 탭은 연필 회색 빗금(위 공통 --kot-hatch-*) + 굵게, 아래 선은 진한 상자 위 변 조각. * 이 요소에서 정해야 data-theme 영역의 색을 따라간다. */ kot-tabs, kot-tab-nav { --kot-tabs-color: var(--hd-ink); --kot-tabs-selected-color: var(--hd-ink); --kot-tabs-focus-color: var(--hd-line); --kot-tabs-line-color: var(--hd-line); --kot-tabs-line-width: 0px; --kot-tabs-line-image: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/box-light-edge-top.png); --kot-tabs-line-length: 64px; --kot-tabs-line-height: 18px; --kot-tabs-line-offset: 6px; /* folder */ --kot-tabs-folder-color: var(--hd-tab-muted); --kot-tabs-folder-bg: var(--hd-paper); --kot-tabs-folder-border-width: 0px; --kot-tabs-folder-frame-corner-tl: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/button-round-corner-tl.png); --kot-tabs-folder-frame-corner-tr: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/button-round-corner-tr.png); --kot-tabs-folder-frame-edge-top: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/button-round-edge-top.png); --kot-tabs-folder-frame-edge-left: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/button-round-edge-left.png); --kot-tabs-folder-frame-edge-right: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/button-round-edge-right.png); --kot-tabs-folder-frame-corner-size: 16px; --kot-tabs-folder-frame-edge-length: 32px; --kot-tabs-folder-frame-edge-length-block: 12px; --kot-tabs-folder-cover-inset: 6px; /* 그림 바깥 끝에서 연필 선(4px) + 선 굵기만큼 안쪽 */ --kot-tabs-folder-cover-depth: 4px; /* 탭 아래 끝에서 아래 선을 덮는 깊이 */ /* hatch */ --kot-tabs-selected-bar-color: transparent; } kot-tabs[variant='hatch'], kot-tab-nav[variant='hatch'] { --kot-tabs-line-image: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/box-dark-edge-top.png); --kot-tabs-line-offset: 0px; } /* 탭 링크 목록에는 본문 목록 머리 기호를 그리지 않는다 */ kot-tab-nav li::before { content: none; } /* * ---------- kot-guru ---------- * 종이색 바탕, 벽돌색 손그림 점선 틀(sketch-04의 점선 네모, guru-frame-*), 위 가운데에 마스킹 테이프 한 조각(tape-2). * 점선은 윤곽이 열려 있어 속 모양이 없다. 바탕은 선 가운데(바깥에서 5px)까지 들인 네모. * 테이프는 선(tape-N.png, 연필 회색) + 속 모양(tape-N-fill.png, 반투명 베이지). 그림에 그린 기울기 그대로 (돌리지 않음). 크기는 원본의 반. * 셋을 모두 정하고(--kot-guru-tape-N-*), 사이트가 tape="1|2|3|none"으로 고른다. 기본 테이프(tape 없음)는 2. * 1(길고 기울어진 것)과 2는 위 가운데, 3(짧은 것)은 위 시작 쪽 모서리에 걸친다. 셋 다 상자 안으로 25~27px만 들어와 * 위 여백 1.75em(28px)이면 첫 줄을 덮지 않는다. * 오류 색(--kot-color-danger)과 고정폭 글꼴(--kot-font-mono)은 위 :root에서. */ kot-guru { --kot-guru-bg: var(--hd-paper); --kot-guru-text-color: var(--hd-ink); --kot-guru-focus-color: var(--hd-line); --kot-guru-border-width: 0px; --kot-guru-frame-corner-tl: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/guru-frame-corner-tl.png); --kot-guru-frame-corner-tr: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/guru-frame-corner-tr.png); --kot-guru-frame-corner-bl: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/guru-frame-corner-bl.png); --kot-guru-frame-corner-br: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/guru-frame-corner-br.png); --kot-guru-frame-edge-top: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/guru-frame-edge-top.png); --kot-guru-frame-edge-bottom: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/guru-frame-edge-bottom.png); --kot-guru-frame-edge-left: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/guru-frame-edge-left.png); --kot-guru-frame-edge-right: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/guru-frame-edge-right.png); --kot-guru-frame-corner-size: 18px; --kot-guru-frame-edge-length: 64px; --kot-guru-frame-inset: 5px; --kot-guru-padding: 1.75em 1.5em 1.25em; /* 위는 테이프가 첫 줄을 덮지 않게 (테이프가 상자 안으로 들어오는 25~27px + 틈) */ --kot-guru-tape-color: var(--hd-tape); --kot-guru-tape-line-color: var(--hd-line); /* 1: 길고 기울어진 것 (원본 243 × 121). 높아서 조금 올려 붙인다 */ --kot-guru-tape-1-image: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/tape-1.png); --kot-guru-tape-1-fill: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/tape-1-fill.png); --kot-guru-tape-1-width: 121.5px; --kot-guru-tape-1-height: 60.5px; --kot-guru-tape-1-x: 50%; --kot-guru-tape-1-y: -4px; /* 2: 덜 기운 긴 것 (원본 243 × 95) */ --kot-guru-tape-2-image: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/tape-2.png); --kot-guru-tape-2-fill: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/tape-2-fill.png); --kot-guru-tape-2-width: 121.5px; --kot-guru-tape-2-height: 47.5px; --kot-guru-tape-2-x: 50%; --kot-guru-tape-2-y: 0px; /* 3: 짧은 것 (원본 97 × 108). "/"로 기운 짧은 조각이라 위 시작 쪽 모서리를 비스듬히 누른다 */ --kot-guru-tape-3-image: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/tape-3.png); --kot-guru-tape-3-fill: url(/static/ui/kotul-ui-component/0.3.0/themes/hand-drawn/img/tape-3-fill.png); --kot-guru-tape-3-width: 48.5px; --kot-guru-tape-3-height: 54px; --kot-guru-tape-3-x: 16px; --kot-guru-tape-3-y: -2px; /* 기본 테이프 (tape 없음) = 2 */ --kot-guru-tape-image: var(--kot-guru-tape-2-image); --kot-guru-tape-fill: var(--kot-guru-tape-2-fill); --kot-guru-tape-width: var(--kot-guru-tape-2-width); --kot-guru-tape-height: var(--kot-guru-tape-2-height); --kot-guru-tape-x: var(--kot-guru-tape-2-x); --kot-guru-tape-y: var(--kot-guru-tape-2-y); } /* 테이프를 떼면 위 여백을 원래대로, 대화상자 안 작은 상자에 테이프를 붙이면 위 여백을 늘린다 */ kot-guru[tape='none'] { --kot-guru-padding: 1.25em 1.5em; } kot-guru[variant='inline']:is([tape='1'], [tape='2'], [tape='3']) { --kot-guru-inline-padding: 1.75em 1em 0.75em; }