mirror of
https://github.com/xiaoqidun/ofdgo.git
synced 2026-10-30 01:27:26 +08:00
4375 lines
76 KiB
CSS
4375 lines
76 KiB
CSS
:root {
|
|
color-scheme: light;
|
|
font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
|
|
background: #eef1f4;
|
|
color: #1f2428;
|
|
--line: #cfd7dd;
|
|
--line-strong: #aab7c1;
|
|
--panel: #f8fafb;
|
|
--page: #ffffff;
|
|
--text-muted: #66737f;
|
|
--accent: #0f7b68;
|
|
--accent-soft: rgba(15, 123, 104, 0.12);
|
|
--accent-strong: #095c4e;
|
|
--focus: #0f7b68;
|
|
--sidebar-width: clamp(220px, 20vw, 292px);
|
|
--bar-bg: #fbfcfd;
|
|
--titlebar-background: #e8edf0;
|
|
--titlebar-foreground: #1f2428;
|
|
--titlebar-inactive-background: #eef1f4;
|
|
--titlebar-inactive-foreground: #66737f;
|
|
--bar-height: 40px;
|
|
--bar-pad: 5px 10px;
|
|
--control-height: 28px;
|
|
--page-space: clamp(14px, 2.5vw, 28px);
|
|
--shadow-soft: 0 10px 28px rgba(31, 36, 40, 0.12);
|
|
--shadow-page: 0 14px 30px rgba(31, 36, 40, 0.16);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.document-titlebar {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: stretch;
|
|
height: var(--titlebar-height, 36px);
|
|
min-height: 0;
|
|
flex: 0 0 auto;
|
|
padding-left: var(--titlebar-left, 8px);
|
|
padding-right: var(--titlebar-right, 8px);
|
|
background: var(--titlebar-background);
|
|
color: var(--titlebar-foreground);
|
|
user-select: none;
|
|
}
|
|
|
|
.document-tabs {
|
|
display: flex;
|
|
min-width: 0;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.document-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 0 0 210px;
|
|
width: 210px;
|
|
min-width: 100px;
|
|
max-width: 240px;
|
|
gap: 8px;
|
|
padding: 0 8px 0 12px;
|
|
border: 0;
|
|
border-right: 1px solid var(--line);
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.document-tab[data-selected="true"] {
|
|
background: var(--bar-bg);
|
|
color: var(--titlebar-foreground);
|
|
box-shadow: inset 0 2px var(--accent);
|
|
}
|
|
|
|
.document-tab-name {
|
|
min-width: 0;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.document-titlebar[data-active="false"] {
|
|
background: var(--titlebar-inactive-background);
|
|
color: var(--titlebar-inactive-foreground);
|
|
}
|
|
|
|
.document-titlebar[data-active="false"] .document-tab {
|
|
color: var(--titlebar-inactive-foreground);
|
|
}
|
|
|
|
.document-tab-close,
|
|
.document-new-tab {
|
|
display: grid;
|
|
place-items: center;
|
|
flex: 0 0 28px;
|
|
width: 28px;
|
|
min-width: 28px;
|
|
align-self: center;
|
|
height: min(26px, calc(var(--titlebar-height, 36px) - 6px));
|
|
border: 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.document-tab-close:hover,
|
|
.document-new-tab:hover {
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.document-title-drag {
|
|
flex: 1;
|
|
min-width: 32px;
|
|
}
|
|
|
|
html {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
width: 100%;
|
|
min-width: 320px;
|
|
min-height: 100dvh;
|
|
overflow: hidden;
|
|
background: #eef1f4;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea,
|
|
select {
|
|
font: inherit;
|
|
}
|
|
|
|
select,
|
|
option {
|
|
text-align: left;
|
|
text-align-last: left;
|
|
}
|
|
|
|
button {
|
|
border: 1px solid var(--line-strong);
|
|
background: #ffffff;
|
|
color: #1f2428;
|
|
cursor: pointer;
|
|
transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
|
|
}
|
|
|
|
button:disabled,
|
|
input:disabled,
|
|
textarea:disabled,
|
|
select:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.48;
|
|
}
|
|
|
|
button:focus-visible,
|
|
input:focus-visible,
|
|
textarea:focus-visible,
|
|
select:focus-visible,
|
|
a:focus-visible {
|
|
outline: 2px solid var(--focus);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.app {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
|
width: 100%;
|
|
height: 100dvh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.app:has(.editor-toolbar:not([hidden])) {
|
|
grid-template-rows: auto auto auto minmax(0, 1fr) auto;
|
|
}
|
|
|
|
.editor-toolbar {
|
|
--editor-control-width: 58px;
|
|
display: flex;
|
|
max-height: 40dvh;
|
|
overflow: auto;
|
|
padding: 8px 10px 6px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: var(--panel);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.editor-toolbar[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.editor-group {
|
|
display: grid;
|
|
flex: 1 0 auto;
|
|
justify-content: center;
|
|
grid-template-columns: repeat(3, var(--editor-control-width));
|
|
grid-template-rows: repeat(2, var(--control-height)) 16px;
|
|
column-gap: 4px;
|
|
row-gap: 4px;
|
|
padding: 0 8px;
|
|
border-right: 1px solid var(--line);
|
|
}
|
|
|
|
.editor-image {
|
|
grid-template-columns: repeat(2, var(--editor-control-width));
|
|
}
|
|
|
|
.editor-actions,
|
|
.editor-transform,
|
|
.editor-erase {
|
|
grid-template-columns: var(--editor-control-width);
|
|
}
|
|
|
|
.editor-group > .button,
|
|
.editor-group > select {
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.editor-group > select {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
height: var(--control-height);
|
|
padding: 0 12px 0 4px;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 0;
|
|
background: #fff;
|
|
color: #1f2428;
|
|
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
|
|
background-position: right 7px center, right 4px center;
|
|
background-size: 3px 3px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.editor-paragraph > .editor-field,
|
|
.editor-group:has(#textFont) > .editor-field {
|
|
grid-column: auto;
|
|
}
|
|
|
|
.editor-objects {
|
|
grid-template-columns: repeat(4, var(--editor-control-width));
|
|
}
|
|
|
|
.editor-group:has(#penTool) {
|
|
grid-template-columns: repeat(4, var(--editor-control-width));
|
|
}
|
|
|
|
.object-picker-list {
|
|
display: grid;
|
|
gap: 4px;
|
|
margin-bottom: 12px;
|
|
max-height: 55vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.object-picker-list .button {
|
|
text-align: left;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.editor-field {
|
|
display: grid;
|
|
align-items: center;
|
|
grid-column: 1 / -1;
|
|
grid-template-columns: 2em minmax(0, 1fr);
|
|
gap: 6px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.editor-number {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
height: var(--control-height);
|
|
border: 1px solid var(--line);
|
|
background: #fff;
|
|
}
|
|
|
|
.editor-number:focus-within {
|
|
outline: 2px solid var(--focus);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.editor-number input {
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: 100%;
|
|
padding: 0 6px;
|
|
border: 0;
|
|
outline: 0;
|
|
background: transparent;
|
|
color: #1f2428;
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.editor-number > span {
|
|
padding-right: 6px;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.editor-number:has(input:disabled) {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.editor-number input:disabled {
|
|
opacity: 1;
|
|
}
|
|
|
|
.editor-group:has(#textFont) {
|
|
grid-template-columns: repeat(7, 44px);
|
|
}
|
|
|
|
.editor-group:has(#textFont) > .text-font {
|
|
grid-column: 1 / 6;
|
|
grid-template-columns: minmax(0, 1fr) 32px;
|
|
column-gap: 4px;
|
|
}
|
|
|
|
.editor-group:has(#textFont) > .editor-field { grid-column: 6 / 8; }
|
|
|
|
.editor-paragraph {
|
|
grid-template-columns: var(--editor-control-width) 120px;
|
|
}
|
|
|
|
.editor-group:has(#textFont) .button {
|
|
padding: 0;
|
|
font-family: Arial, sans-serif;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.text-format-bold { font-weight: 700; }
|
|
.text-format-italic { font-style: italic; }
|
|
.text-format-underline { text-decoration: underline; }
|
|
.text-format-strikeout { text-decoration: line-through; }
|
|
.text-format-shadow { text-shadow: 2px 2px 1px #888; }
|
|
|
|
.editor-group:has(#textFont) [data-pressed="mixed"] {
|
|
background: #edf1f4;
|
|
box-shadow: inset 0 -3px var(--text-muted);
|
|
}
|
|
|
|
.text-highlight {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 12px;
|
|
height: var(--control-height);
|
|
}
|
|
|
|
.text-highlight .button { min-width: 0; }
|
|
.text-highlight .button span { border-bottom: 3px solid var(--highlight-color, #ffff00); }
|
|
.text-highlight .color-input { min-width: 0; width: 12px; height: 100%; padding: 0; }
|
|
|
|
.editor-group:has(#shapeFill) {
|
|
grid-template-columns: repeat(2, 84px);
|
|
}
|
|
|
|
.font-picker {
|
|
display: flex;
|
|
min-width: 0;
|
|
height: var(--control-height);
|
|
border: 1px solid var(--line);
|
|
background: #fff;
|
|
}
|
|
|
|
.font-picker #textFont {
|
|
flex: 1 1 0;
|
|
width: 0;
|
|
min-width: 0;
|
|
text-overflow: ellipsis;
|
|
padding: 0 6px;
|
|
border: 0;
|
|
outline: 0;
|
|
background: transparent;
|
|
color: #1f2428;
|
|
}
|
|
|
|
.font-picker:focus-within {
|
|
border-color: var(--focus);
|
|
outline: 2px solid var(--focus);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
#textFontToggle {
|
|
width: 24px;
|
|
min-width: 24px;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
#textFontToggle::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-right: 1px solid currentColor;
|
|
border-bottom: 1px solid currentColor;
|
|
transform: translateY(-2px) rotate(45deg);
|
|
}
|
|
|
|
.font-listbox {
|
|
position: fixed;
|
|
margin: 0;
|
|
padding: 4px;
|
|
border: 1px solid var(--line);
|
|
background: var(--panel);
|
|
color: #1f2428;
|
|
box-shadow: 0 5px 18px rgba(20, 40, 50, 0.14);
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.font-listbox .font-option {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 6px 8px;
|
|
line-height: 1.4;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.font-listbox .font-option > span:first-child {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.font-option-source {
|
|
flex: none;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.font-listbox .font-option:hover,
|
|
.font-listbox [data-selected="true"] {
|
|
background: var(--accent-soft);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.font-listbox [data-disabled="true"],
|
|
.font-search-empty {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.font-search-empty {
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
#textColor {
|
|
width: 100%;
|
|
}
|
|
|
|
.shape-paint {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.shape-paint .color-input {
|
|
width: 32px;
|
|
}
|
|
|
|
.shape-paint,
|
|
.shape-paint label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.shape-paint input[type="checkbox"] {
|
|
margin: 0;
|
|
accent-color: var(--accent);
|
|
}
|
|
|
|
.editor-group:first-child {
|
|
flex-grow: 0.5;
|
|
justify-content: start;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.editor-group:last-child {
|
|
flex-grow: 0.5;
|
|
justify-content: end;
|
|
padding-right: 0;
|
|
border-right: 0;
|
|
}
|
|
|
|
.editor-group > span,
|
|
.editor-group-action {
|
|
grid-column: 1 / -1;
|
|
grid-row: 3;
|
|
align-self: end;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.editor-group-action {
|
|
justify-self: center;
|
|
padding: 0 8px;
|
|
height: 16px;
|
|
min-height: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
line-height: 16px;
|
|
text-decoration: underline dotted;
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
.mixed-color::-webkit-color-swatch {
|
|
background: repeating-linear-gradient(135deg, #fff 0 4px, #aeb7bc 4px 8px);
|
|
}
|
|
|
|
.mixed-color::-moz-color-swatch {
|
|
background: repeating-linear-gradient(135deg, #fff 0 4px, #aeb7bc 4px 8px);
|
|
}
|
|
|
|
.app-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
gap: 8px;
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: var(--bar-height);
|
|
min-height: var(--bar-height);
|
|
flex: 0 0 var(--bar-height);
|
|
padding: var(--bar-pad);
|
|
background: var(--bar-bg);
|
|
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.68) inset;
|
|
}
|
|
|
|
.toolbar-frame {
|
|
display: flex;
|
|
min-width: 0;
|
|
background: var(--bar-bg);
|
|
border-top: 1px solid var(--line);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.toolbar-frame > .toolbar {
|
|
flex: 1 1 auto;
|
|
border-bottom: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.app-update {
|
|
order: 2;
|
|
flex: 0 0 auto;
|
|
align-self: center;
|
|
margin: 0 10px 0 0;
|
|
border-color: var(--accent);
|
|
background: #e4f3ef;
|
|
color: var(--accent-strong);
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.app-update:not(:disabled):hover {
|
|
border-color: var(--accent);
|
|
background: #f2faf7;
|
|
}
|
|
|
|
.toolbar-frame:has(.app-update:not([hidden]))::before {
|
|
order: 1;
|
|
flex: 0 0 1px;
|
|
align-self: center;
|
|
width: 1px;
|
|
height: 22px;
|
|
margin: 0 12px 0 2px;
|
|
background: var(--line);
|
|
content: "";
|
|
}
|
|
|
|
.app-update[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.toolbar {
|
|
--tool-gap: 8px;
|
|
position: relative;
|
|
z-index: 12;
|
|
border-bottom: 1px solid var(--line);
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
gap: var(--tool-gap);
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.toolbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.file-input {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
}
|
|
|
|
.button,
|
|
.icon-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: var(--control-height);
|
|
border-radius: 0;
|
|
}
|
|
|
|
.button {
|
|
padding: 0 10px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
button:not(:disabled):hover {
|
|
border-color: var(--accent);
|
|
background: #f2faf7;
|
|
}
|
|
|
|
.button[data-pressed="true"],
|
|
.icon-button[data-pressed="true"] {
|
|
border-color: var(--accent);
|
|
background: #e4f3ef;
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
.icon-button {
|
|
width: var(--control-height);
|
|
padding: 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.arrow-prev::before,
|
|
.arrow-next::before {
|
|
width: 5px;
|
|
height: 8px;
|
|
background: currentColor;
|
|
clip-path: polygon(100% 0, 100% 20%, 30% 50%, 100% 80%, 100% 100%, 0 50%);
|
|
content: "";
|
|
}
|
|
|
|
.arrow-next::before {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.open-icon,
|
|
.close-icon,
|
|
.new-icon,
|
|
.save-icon,
|
|
.save-as-icon,
|
|
.edit-icon,
|
|
.convert-icon,
|
|
.pages-icon,
|
|
.info-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex: 0 0 16px;
|
|
background: currentColor;
|
|
}
|
|
|
|
.open-icon {
|
|
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V4h6l3 3h9v13H3Z'/%3E%3C/svg%3E") center / contain no-repeat;
|
|
}
|
|
|
|
.close-icon {
|
|
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 3 18 18M21 3 3 21'/%3E%3C/svg%3E") center / contain no-repeat;
|
|
}
|
|
|
|
.new-icon {
|
|
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M3 12h18'/%3E%3C/svg%3E") center / contain no-repeat;
|
|
}
|
|
|
|
.save-icon {
|
|
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z'/%3E%3Cpath d='M17 21v-8H7v8M7 3v5h8'/%3E%3C/svg%3E") center / contain no-repeat;
|
|
}
|
|
|
|
.edit-icon {
|
|
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14 5 5 5M3 21l2-7L15 4a3.5 3.5 0 0 1 5 5L10 19Z'/%3E%3C/svg%3E") center / contain no-repeat;
|
|
}
|
|
|
|
.save-as-icon {
|
|
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v3M7 3v5h8M7 21v-8h4m3 8 7-7m-7 0h7v7'/%3E%3C/svg%3E") center / contain no-repeat;
|
|
}
|
|
|
|
.convert-icon {
|
|
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18l-4-4M21 17H3l4 4'/%3E%3C/svg%3E") center / contain no-repeat;
|
|
}
|
|
|
|
.pages-icon {
|
|
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h18M3 12h18M3 21h18'/%3E%3C/svg%3E") center / contain no-repeat;
|
|
}
|
|
|
|
.info-icon {
|
|
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7h.01'/%3E%3C/svg%3E") center / contain no-repeat;
|
|
}
|
|
|
|
.toolbar-space {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.tool-group {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--tool-gap);
|
|
flex: 0 0 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.tool-group + .tool-group::before {
|
|
flex: 0 0 1px;
|
|
width: 1px;
|
|
height: 22px;
|
|
margin: 0 calc(12px - var(--tool-gap));
|
|
background: var(--line);
|
|
content: "";
|
|
}
|
|
|
|
.page-control {
|
|
display: inline-grid;
|
|
grid-template-columns: max(4ch, var(--page-width, 4ch)) auto max(4ch, var(--page-width, 4ch));
|
|
align-items: center;
|
|
gap: 6px;
|
|
height: var(--control-height);
|
|
padding: 0 7px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 0;
|
|
background: #ffffff;
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.page-control input {
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: 100%;
|
|
padding: 0;
|
|
border: 0;
|
|
outline: 0;
|
|
text-align: center;
|
|
color: #1f2428;
|
|
background: transparent;
|
|
}
|
|
|
|
.page-control input,
|
|
.editor-number input {
|
|
appearance: textfield;
|
|
}
|
|
|
|
.page-control input::-webkit-inner-spin-button,
|
|
.page-control input::-webkit-outer-spin-button,
|
|
.editor-number input::-webkit-inner-spin-button,
|
|
.editor-number input::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.format-select,
|
|
.order-select {
|
|
width: 58px;
|
|
height: var(--control-height);
|
|
min-width: 0;
|
|
padding: 0 4px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 0;
|
|
background: #ffffff;
|
|
color: #1f2428;
|
|
}
|
|
|
|
.toolbar-select,
|
|
.form-select {
|
|
position: relative;
|
|
display: inline-flex;
|
|
}
|
|
|
|
.toolbar-select .format-select {
|
|
width: calc(2em + 22px);
|
|
border-color: var(--line-strong);
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
color: transparent;
|
|
}
|
|
|
|
.toolbar-select option,
|
|
.form-select option {
|
|
color: #1f2428;
|
|
}
|
|
|
|
.toolbar-select > span,
|
|
.form-select > span {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding-left: 4px;
|
|
padding-right: 12px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.toolbar-select::after,
|
|
.form-select::after {
|
|
position: absolute;
|
|
right: 7px;
|
|
top: calc(50% - 2px);
|
|
border: 4px solid transparent;
|
|
border-bottom: 0;
|
|
border-top-color: currentColor;
|
|
pointer-events: none;
|
|
content: "";
|
|
}
|
|
|
|
.toolbar-select select:disabled + span,
|
|
.toolbar-select:has(select:disabled)::after,
|
|
.form-select select:disabled + span,
|
|
.form-select:has(select:disabled)::after {
|
|
opacity: 0.48;
|
|
}
|
|
|
|
.form-dialog {
|
|
inset: 0;
|
|
width: 320px;
|
|
max-width: calc(100% - 24px);
|
|
max-height: calc(100dvh - 24px);
|
|
margin: auto;
|
|
padding: 0;
|
|
border: 1px solid var(--line);
|
|
background: var(--panel);
|
|
color: #1f2428;
|
|
box-shadow: var(--shadow-soft);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.form-dialog::backdrop {
|
|
top: var(--titlebar-height, 36px);
|
|
background: rgb(31 36 40 / 18%);
|
|
}
|
|
|
|
.form-dialog > form {
|
|
padding: 12px;
|
|
}
|
|
|
|
.form-title {
|
|
margin: -12px -12px 12px;
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: #eef1f4;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.confirm-message {
|
|
margin: 0 0 16px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.confirm-dialog .form-actions {
|
|
grid-template-columns: repeat(3, max-content);
|
|
justify-content: end;
|
|
}
|
|
|
|
.convert-dialog {
|
|
--convert-control-width: 64px;
|
|
width: 720px;
|
|
}
|
|
|
|
.convert-dialog .form-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.convert-options {
|
|
flex: none;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
grid-column: 1 / -1;
|
|
grid-row: 1;
|
|
width: 100%;
|
|
gap: 12px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.convert-options:has(#convertDPIRow[hidden]):has(#convertFontRow[hidden]) {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.convert-options:has(#convertDPIRow:not([hidden])):has(#convertFontRow:not([hidden])) {
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
}
|
|
|
|
.convert-options .form-row {
|
|
gap: 8px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.convert-options .form-select > span {
|
|
padding-left: 6px;
|
|
}
|
|
|
|
#convertCount {
|
|
margin-left: auto;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.convert-table {
|
|
max-height: 40dvh;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
border: 1px solid var(--line);
|
|
background: #fff;
|
|
}
|
|
|
|
.convert-table table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.convert-table th,
|
|
.convert-table td {
|
|
padding: 8px;
|
|
border-bottom: 1px solid var(--line);
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.convert-table th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
background: #eef1f4;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.convert-table tbody td:first-child {
|
|
text-align: left;
|
|
}
|
|
|
|
.convert-table td[data-status] {
|
|
height: calc(3em + 16px);
|
|
white-space: pre;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.convert-table th:nth-child(2),
|
|
.convert-table th:nth-child(3),
|
|
.convert-table th:nth-child(4) {
|
|
width: calc(var(--convert-control-width) + 16px);
|
|
}
|
|
|
|
.convert-table th:last-child {
|
|
width: 48px;
|
|
}
|
|
|
|
.convert-table select,
|
|
.convert-table input {
|
|
width: var(--convert-control-width);
|
|
min-width: 0;
|
|
height: var(--control-height);
|
|
padding: 0 6px;
|
|
vertical-align: middle;
|
|
font: inherit;
|
|
border: 1px solid var(--line);
|
|
border-radius: 0;
|
|
background: #fff;
|
|
color: inherit;
|
|
}
|
|
|
|
.convert-table .icon-button {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.convert-table input {
|
|
text-align: center;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.convert-format {
|
|
position: relative;
|
|
display: inline-flex;
|
|
width: var(--convert-control-width);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.convert-format select {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.convert-format::after {
|
|
position: absolute;
|
|
right: 6px;
|
|
top: calc(50% - 2px);
|
|
border: 3px solid transparent;
|
|
border-bottom: 0;
|
|
border-top-color: currentColor;
|
|
pointer-events: none;
|
|
content: "";
|
|
}
|
|
|
|
.convert-format:has(select:disabled)::after {
|
|
opacity: 0.48;
|
|
}
|
|
|
|
.convert-table tbody tr:last-child td {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.convert-name {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.convert-table tr:has(+ .convert-details) > td {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.convert-table .convert-details > td {
|
|
width: auto;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.convert-table .convert-details details {
|
|
margin: 0;
|
|
color: var(--text-muted);
|
|
overflow-wrap: anywhere;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.convert-table .convert-details details[open] > summary {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.convert-messages {
|
|
max-height: min(180px, 24dvh);
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: auto;
|
|
list-style: none;
|
|
line-height: 1.5;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.convert-messages > li + li {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.convert-table td[data-status="failed"] {
|
|
color: #b42318;
|
|
}
|
|
|
|
.convert-table td[data-status="done"] {
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
.convert-empty {
|
|
padding: 28px 12px;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.convert-progress {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.convert-progress:has(#convertStatus:empty) {
|
|
display: none;
|
|
}
|
|
|
|
.convert-dialog .form-actions {
|
|
display: grid;
|
|
grid-template-columns: auto auto minmax(0, 1fr) auto auto;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.convert-dialog .form-actions .button {
|
|
min-width: 3.5em;
|
|
grid-row: 2;
|
|
}
|
|
|
|
#convertAdd { grid-column: 1; }
|
|
#convertClear { grid-column: 2; }
|
|
#convertClose { grid-column: 4; justify-self: end; }
|
|
#convertCancel, #convertStart { grid-column: 5; justify-self: end; }
|
|
|
|
.convert-progress progress {
|
|
display: block;
|
|
width: 100%;
|
|
height: 6px;
|
|
accent-color: var(--accent);
|
|
}
|
|
|
|
#convertStatus {
|
|
min-height: 1.5em;
|
|
margin-top: 12px;
|
|
line-height: 1.5;
|
|
overflow-wrap: anywhere;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
#convertButton[data-running] {
|
|
color: var(--accent-strong);
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.convert-dialog { --control-height: 36px; }
|
|
.convert-dialog > form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: calc(100dvh - 26px);
|
|
}
|
|
.convert-dialog .form-title,
|
|
.convert-progress,
|
|
.convert-dialog .form-actions { flex-shrink: 0; }
|
|
.convert-table {
|
|
max-height: 50dvh;
|
|
}
|
|
.convert-dialog .form-actions {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
row-gap: 12px;
|
|
}
|
|
.convert-dialog .form-actions > .button { grid-row: 2; width: 100%; }
|
|
#convertClose { grid-column: 3; }
|
|
#convertCancel, #convertStart { grid-column: 4; }
|
|
.convert-options {
|
|
grid-column: 1 / -1;
|
|
grid-row: 1;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
.convert-options:has(#convertDPIRow[hidden]):has(#convertFontRow[hidden]) {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
.convert-options:has(#convertDPIRow:not([hidden])):has(#convertFontRow:not([hidden])) {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
.convert-options:has(#convertDPIRow[hidden]):has(#convertFontRow[hidden]) .form-row:last-child,
|
|
.convert-options:has(#convertDPIRow:not([hidden])):has(#convertFontRow:not([hidden])) .form-row:last-child {
|
|
grid-column: 1 / -1;
|
|
}
|
|
.convert-options .form-row {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 6px;
|
|
text-align: left;
|
|
}
|
|
.convert-options label { width: auto; }
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.convert-table table,
|
|
.convert-table tbody { display: block; }
|
|
.convert-table thead { display: none; }
|
|
.convert-table tr {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
align-items: center;
|
|
gap: 10px 12px;
|
|
padding: 12px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.convert-table tr:last-child { border-bottom: 0; }
|
|
.convert-table tr:has(+ .convert-details) { padding-bottom: 0; border-bottom: 0; }
|
|
.convert-table td { min-width: 0; padding: 0; border: 0; }
|
|
.convert-table td:first-child {
|
|
grid-column: 1 / -1;
|
|
grid-row: 1;
|
|
padding-right: calc(var(--control-height) + 12px);
|
|
}
|
|
.convert-name {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: var(--control-height);
|
|
overflow-wrap: anywhere;
|
|
white-space: normal;
|
|
line-height: 1.5;
|
|
}
|
|
.convert-table td:last-child {
|
|
grid-column: 3;
|
|
grid-row: 1;
|
|
align-self: start;
|
|
justify-self: end;
|
|
}
|
|
.convert-table td[data-label] {
|
|
display: grid;
|
|
grid-row: 2;
|
|
grid-template-rows: auto max(3em, var(--control-height));
|
|
justify-items: center;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.convert-table td[data-label]::before {
|
|
content: attr(data-label);
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
}
|
|
.convert-table td[data-status] {
|
|
height: auto;
|
|
}
|
|
.convert-table input,
|
|
.convert-format,
|
|
.convert-format select { width: 100%; }
|
|
.convert-table .convert-details > td {
|
|
grid-column: 1 / -1;
|
|
justify-self: stretch;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
|
|
.seal-position-options,
|
|
.seal-position-options label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.seal-picking .page-surface {
|
|
cursor: crosshair;
|
|
touch-action: none;
|
|
}
|
|
|
|
.seal-picking .edit-layer {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.seal-position-layer {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.seal-position-stamp {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
outline: 1px solid var(--accent);
|
|
}
|
|
|
|
.seal-position-stamp img {
|
|
position: absolute;
|
|
max-width: none;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.security-dialog {
|
|
width: 360px;
|
|
}
|
|
|
|
.security-dialog .form-row {
|
|
grid-template-columns: 4em minmax(0, 1fr);
|
|
}
|
|
|
|
#verifyForm .form-row {
|
|
grid-template-columns: 5em minmax(0, 1fr);
|
|
}
|
|
|
|
.security-dialog .form-row > label,
|
|
.security-dialog .form-row > span {
|
|
text-align-last: justify;
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: 2em minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.form-pair {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.encryption-current {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
min-height: var(--control-height);
|
|
}
|
|
|
|
.encryption-current > span {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.encryption-current > button {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.annotation-placement {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 12px;
|
|
}
|
|
|
|
.form-row input[type="checkbox"] {
|
|
justify-self: start;
|
|
margin: 0;
|
|
accent-color: var(--accent);
|
|
}
|
|
|
|
.form-options {
|
|
display: flex;
|
|
}
|
|
|
|
.form-options label {
|
|
position: relative;
|
|
flex: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-options input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
|
|
.form-options span {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: var(--control-height);
|
|
border: 1px solid var(--line);
|
|
background: #ffffff;
|
|
}
|
|
|
|
.form-options label + label span {
|
|
border-left: 0;
|
|
}
|
|
|
|
.form-options input:checked + span {
|
|
background: #e4f3ef;
|
|
color: var(--accent-strong);
|
|
box-shadow: 0 0 0 1px var(--accent) inset;
|
|
}
|
|
|
|
.form-options input:focus-visible + span {
|
|
outline: 2px solid var(--focus);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.info-custom-row input,
|
|
.gradient-stop-row input[type="number"],
|
|
.structure-attribute > input,
|
|
.form-row input[type="text"],
|
|
.form-row input[type="password"],
|
|
.form-row input[type="number"],
|
|
.form-row input[type="file"],
|
|
.form-row select,
|
|
.form-row textarea {
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: var(--control-height);
|
|
padding: 0 6px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 0;
|
|
background: #ffffff;
|
|
color: #1f2428;
|
|
}
|
|
|
|
.form-row .form-select select {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
color: transparent;
|
|
}
|
|
|
|
.form-row textarea {
|
|
height: auto;
|
|
min-height: var(--control-height);
|
|
padding: 6px;
|
|
line-height: 1.5;
|
|
resize: vertical;
|
|
}
|
|
|
|
.form-dialog details {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.form-dialog details > summary {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-dialog details[open] > summary {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
#infoCustomRows {
|
|
max-height: 240px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.info-custom-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) var(--control-height);
|
|
gap: 8px;
|
|
margin: 8px 0;
|
|
}
|
|
|
|
#infoCustomRows > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.gradient-stop-row {
|
|
display: grid;
|
|
grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) var(--control-height);
|
|
gap: 8px;
|
|
margin: 8px 0;
|
|
align-items: center;
|
|
}
|
|
|
|
.gradient-stop-head {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.gradient-stop-head,
|
|
#gradientStops {
|
|
overflow-y: auto;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
#gradientStops {
|
|
max-height: 180px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
#gradientStops > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
#gradientStops > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.gradient-stop-row .color-input {
|
|
width: 100%;
|
|
}
|
|
|
|
#infoCustomRows :focus-visible,
|
|
#gradientStops :focus-visible {
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.color-input {
|
|
width: calc(2em + 22px);
|
|
height: var(--control-height);
|
|
padding: 3px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 0;
|
|
background: #ffffff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.color-input::-webkit-color-swatch-wrapper {
|
|
padding: 0;
|
|
}
|
|
|
|
.color-input::-webkit-color-swatch {
|
|
border: 0;
|
|
}
|
|
|
|
.color-input::-moz-color-swatch {
|
|
border: 0;
|
|
}
|
|
|
|
#borderColor {
|
|
width: 100%;
|
|
}
|
|
|
|
#borderColorOriginal {
|
|
grid-column: 2;
|
|
}
|
|
|
|
.form-row input[type="file"] {
|
|
padding: 0;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.form-row input[type="file"]::file-selector-button {
|
|
height: 100%;
|
|
margin: 0 8px 0 0;
|
|
padding: 0 8px;
|
|
border: 0;
|
|
border-right: 1px solid var(--line);
|
|
border-radius: 0;
|
|
background: var(--panel);
|
|
color: #1f2428;
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-row input[type="file"]::file-selector-button:hover {
|
|
background: #e4f3ef;
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
.form-unit {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 2em;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.form-unit > span {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
#objectLinkFields .object-link-target {
|
|
min-width: 0;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
}
|
|
|
|
.text-font {
|
|
display: grid;
|
|
min-width: 0;
|
|
grid-template-columns: subgrid;
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.text-font .icon-button {
|
|
width: 32px;
|
|
}
|
|
|
|
.form-row input[data-invalid="true"] {
|
|
border-color: #b14343;
|
|
}
|
|
|
|
.form-status {
|
|
min-width: 0;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
font-variant-numeric: tabular-nums;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.form-actions {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.form-actions > button:only-child,
|
|
.form-actions > button:has(+ button[hidden]) {
|
|
grid-column: -2;
|
|
}
|
|
|
|
.form-actions button[type="submit"] {
|
|
border-color: var(--accent);
|
|
background: var(--accent);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.form-actions button[type="submit"]:not(:disabled):hover {
|
|
background: var(--accent-strong);
|
|
}
|
|
|
|
.format-select:focus,
|
|
.format-select:focus-visible,
|
|
.order-select:focus,
|
|
.order-select:focus-visible {
|
|
border-color: var(--accent);
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.format-select option:checked,
|
|
.order-select option:checked {
|
|
background-color: #e4f3ef;
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
.zoom-label {
|
|
min-width: 42px;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.workspace {
|
|
display: grid;
|
|
grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--sidebar-width);
|
|
min-height: 0;
|
|
}
|
|
|
|
body[data-hide-pages] .workspace {
|
|
grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
|
|
}
|
|
|
|
body[data-hide-meta] .workspace {
|
|
grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
|
|
}
|
|
|
|
body[data-hide-pages][data-hide-meta] .workspace {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
body[data-hide-pages] .page-list-panel,
|
|
body[data-hide-meta] .meta-panel {
|
|
display: none;
|
|
}
|
|
|
|
.navigation-content,
|
|
.viewer-panel,
|
|
.search-results,
|
|
.editor-toolbar,
|
|
.document-list,
|
|
.meta-panel {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--line-strong) transparent;
|
|
}
|
|
|
|
.page-list-panel,
|
|
.meta-panel {
|
|
min-height: 0;
|
|
padding: 12px;
|
|
border-right: 1px solid var(--line);
|
|
background: var(--panel);
|
|
overflow: auto;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.page-list-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.navigation-content {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.page-selection-tools {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.page-selection-tools > span {
|
|
flex: 1;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.meta-panel {
|
|
border-right: 0;
|
|
border-left: 1px solid var(--line);
|
|
}
|
|
|
|
.panel-title {
|
|
margin-bottom: 10px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.panel-title.compact {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.panel-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
margin-bottom: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.panel-actions {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.small-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 26px;
|
|
padding: 0 6px;
|
|
border-radius: 0;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.document-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.document-select {
|
|
flex: 1;
|
|
width: 0;
|
|
min-width: 0;
|
|
height: 28px;
|
|
padding: 0 6px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.document-dialog {
|
|
width: 440px;
|
|
}
|
|
|
|
.resource-dialog {
|
|
width: 600px;
|
|
}
|
|
|
|
.resource-heading,
|
|
.resource-option {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 90px 50px;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 10px;
|
|
text-align: left;
|
|
}
|
|
|
|
.resource-heading {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
background: #eef1f4;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.resource-list-container {
|
|
max-height: 260px;
|
|
overflow: auto;
|
|
scroll-padding-top: 40px;
|
|
border: 1px solid var(--line);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.resource-list-body {
|
|
position: relative;
|
|
}
|
|
|
|
.resource-empty {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
color: var(--text-muted);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.resource-empty[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.resource-list {
|
|
--resource-row-height: 40px;
|
|
position: relative;
|
|
min-height: 80px;
|
|
}
|
|
|
|
#resourceReferenceGroup {
|
|
flex: 0 0 110px;
|
|
width: 110px;
|
|
}
|
|
|
|
.resource-option {
|
|
position: absolute;
|
|
left: 0;
|
|
height: var(--resource-row-height);
|
|
width: 100%;
|
|
border: 0;
|
|
border-bottom: 1px solid var(--line);
|
|
background: #fff;
|
|
color: inherit;
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.resource-option span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.resource-heading > :not(:first-child),
|
|
.resource-option > :not(:first-child) {
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.resource-option[data-selected="true"] {
|
|
background: #e4f3f0;
|
|
color: #087f70;
|
|
}
|
|
|
|
.resource-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.resource-actions > button {
|
|
min-height: 28px;
|
|
}
|
|
|
|
.resource-actions > #resourceClose {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.resource-actions > [hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.resource-target {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.resource-target select {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.resource-target button {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.resource-picking,
|
|
.resource-picking .edit-object {
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.resource-binding {
|
|
border-top: 1px solid var(--line);
|
|
margin-top: 12px;
|
|
padding-top: 12px;
|
|
}
|
|
|
|
.resource-binding .form-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.resource-binding .form-actions > button {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.resource-viewer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 180px;
|
|
margin-top: 12px;
|
|
overflow: auto;
|
|
background: white;
|
|
}
|
|
|
|
.resource-viewer[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.resource-viewer img,
|
|
.resource-viewer video {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.resource-viewer audio {
|
|
width: 100%;
|
|
}
|
|
|
|
.document-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.document-actions > .button {
|
|
min-width: 0;
|
|
padding-inline: 6px;
|
|
}
|
|
|
|
.document-actions > .button,
|
|
.resource-actions > .button {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.document-actions > .form-status,
|
|
.resource-actions > .form-status {
|
|
flex: 1 1 0;
|
|
min-width: 4em;
|
|
max-height: 6em;
|
|
overflow: auto;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.document-actions > button:last-child {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.settings-dialog {
|
|
width: 560px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.settings-dialog.invoice-dialog {
|
|
width: 820px;
|
|
max-width: calc(100vw - 26px);
|
|
}
|
|
|
|
.panel-tabs {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
min-width: 0;
|
|
gap: 16px;
|
|
margin-bottom: 12px;
|
|
border-bottom: 1px solid var(--line);
|
|
overflow-x: auto;
|
|
overscroll-behavior-x: contain;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.panel-tabs[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.panel-tabs > .button {
|
|
flex: none;
|
|
min-width: 2em;
|
|
padding: 8px 0;
|
|
border: 0;
|
|
border-bottom: 2px solid transparent;
|
|
background: transparent;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.panel-tabs > .button[data-selected="true"] {
|
|
border-bottom-color: currentColor;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.invoice-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-block: 8px;
|
|
}
|
|
|
|
.invoice-group-title {
|
|
margin: 12px 0 8px;
|
|
font-size: 1em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.invoice-advanced {
|
|
margin-block: 12px 0;
|
|
border-top: 1px solid var(--line);
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.invoice-advanced > summary {
|
|
cursor: pointer;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.invoice-advanced > .button {
|
|
margin: 0 8px 8px 0;
|
|
}
|
|
|
|
.invoice-unit {
|
|
padding-block: 8px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.invoice-table-scroll {
|
|
max-width: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.invoice-table {
|
|
width: 100%;
|
|
min-width: 720px;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.invoice-table th,
|
|
.invoice-table td {
|
|
padding: 4px;
|
|
border-bottom: 1px solid var(--line);
|
|
text-align: left;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.invoice-table th:first-child {
|
|
width: 3em;
|
|
}
|
|
|
|
.invoice-table th:nth-child(2) {
|
|
width: 8em;
|
|
}
|
|
|
|
.invoice-table input:not([type="radio"]) {
|
|
width: 100%;
|
|
min-width: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.invoice-dialog #settingsInvoiceXML {
|
|
font-family: monospace;
|
|
white-space: pre;
|
|
}
|
|
|
|
.invoice-dialog .settings-footer {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.invoice-dialog #settingsStatus {
|
|
order: 1;
|
|
min-width: 0;
|
|
max-height: 6em;
|
|
overflow: auto;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.invoice-dialog #settingsActions {
|
|
display: contents;
|
|
}
|
|
|
|
.invoice-dialog #settingsActions .settings-close {
|
|
order: 2;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.invoice-dialog #settingsActions .button {
|
|
min-width: calc(2em + 18px);
|
|
padding-inline: 8px;
|
|
}
|
|
|
|
.invoice-dialog #settingsStatus {
|
|
order: 3;
|
|
flex-basis: 100%;
|
|
}
|
|
}
|
|
|
|
.settings-dialog :focus-visible {
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.settings-dialog > form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: calc(100dvh - 26px);
|
|
padding: 0;
|
|
}
|
|
|
|
.settings-dialog > form > .panel-tabs {
|
|
margin: 0 12px;
|
|
}
|
|
|
|
.settings-header {
|
|
display: flex;
|
|
flex: none;
|
|
align-items: baseline;
|
|
gap: 8px 16px;
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: #eef1f4;
|
|
}
|
|
|
|
.settings-header .form-title {
|
|
flex: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
background: none;
|
|
}
|
|
|
|
.settings-location {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
min-width: 0;
|
|
margin-left: auto;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
overflow: hidden;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.settings-location:empty,
|
|
.settings-location[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.settings-dialog > form > .form-row {
|
|
flex: none;
|
|
margin: 0;
|
|
padding: 12px;
|
|
}
|
|
|
|
.settings-body {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
padding: 12px;
|
|
overflow: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.settings-body:has(> #settingsContext:empty):has(> #settingsContent:empty) {
|
|
display: none;
|
|
}
|
|
|
|
.settings-dialog .settings-section {
|
|
min-width: 0;
|
|
padding-block: 12px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.settings-dialog .settings-section:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.settings-dialog .settings-section-title {
|
|
margin-bottom: 12px;
|
|
font-weight: 600;
|
|
line-height: 1.5;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.settings-dialog .settings-section-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.settings-dialog .settings-section-actions > .button,
|
|
#settingsActions .button {
|
|
flex: 0 0 auto;
|
|
min-width: calc(2em + 22px);
|
|
padding-inline: 10px;
|
|
}
|
|
|
|
.settings-dialog .settings-section[hidden],
|
|
.settings-dialog .settings-section-actions[hidden],
|
|
.settings-dialog .settings-section-actions > [hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.settings-dialog .form-row {
|
|
grid-template-columns: 4em minmax(0, 1fr);
|
|
}
|
|
|
|
.settings-pick {
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
}
|
|
|
|
.settings-control-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.settings-control-row > .form-row {
|
|
flex: 1;
|
|
min-width: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.settings-control-row > .button {
|
|
flex: none;
|
|
}
|
|
|
|
.settings-dialog details.settings-section {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.settings-dialog details.settings-section:not([open]) > summary {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.settings-dialog .form-row > label,
|
|
.settings-dialog .form-row > span:not(.form-unit):not(.settings-readonly) {
|
|
min-width: 0;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
line-height: 1.5;
|
|
text-align-last: justify;
|
|
}
|
|
|
|
.settings-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
column-gap: 16px;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.settings-grid { grid-template-columns: minmax(0, 1fr); }
|
|
}
|
|
|
|
.settings-footer {
|
|
display: flex;
|
|
flex: none;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
#settingsStatus {
|
|
flex: 1 1 120px;
|
|
}
|
|
|
|
#settingsStatus:empty {
|
|
display: none;
|
|
}
|
|
|
|
.settings-dialog .info-line {
|
|
grid-template-columns: 4em minmax(0, 1fr);
|
|
align-items: start;
|
|
gap: 12px;
|
|
min-height: var(--control-height);
|
|
margin-bottom: 12px;
|
|
font-size: inherit;
|
|
}
|
|
|
|
.settings-dialog .info-label {
|
|
min-width: 0;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
text-align-last: justify;
|
|
}
|
|
|
|
.settings-dialog .info-value {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.settings-dialog .settings-readonly {
|
|
display: block;
|
|
min-width: 0;
|
|
min-height: var(--control-height);
|
|
padding-block: 4px;
|
|
color: inherit;
|
|
font: inherit;
|
|
line-height: 1.5;
|
|
text-align: left;
|
|
text-align-last: auto;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
cursor: text;
|
|
-webkit-user-select: text;
|
|
user-select: text;
|
|
}
|
|
|
|
.settings-dialog .form-row:has(.settings-readonly) {
|
|
align-items: baseline;
|
|
}
|
|
|
|
.settings-dialog .settings-detail {
|
|
min-width: 0;
|
|
padding-block: 10px;
|
|
border-bottom: 1px solid var(--line);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.settings-dialog .settings-detail pre {
|
|
max-width: 100%;
|
|
margin-block: 8px 0;
|
|
white-space: pre-wrap;
|
|
font: inherit;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.settings-dialog .settings-detail .info-label {
|
|
text-align-last: auto;
|
|
}
|
|
|
|
.settings-dialog .settings-binding {
|
|
margin-block: 12px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
#settingsActions {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
#settingsActions .settings-section-actions:not([hidden]) {
|
|
display: contents;
|
|
}
|
|
|
|
#settingsActions .settings-close {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.document-list {
|
|
max-height: 45dvh;
|
|
min-height: 80px;
|
|
margin-bottom: 12px;
|
|
border: 1px solid var(--line);
|
|
overflow: auto;
|
|
}
|
|
|
|
.document-entry {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 4em;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
min-height: 38px;
|
|
padding: 8px 10px;
|
|
border: 0;
|
|
border-bottom: 1px solid var(--line);
|
|
text-align: left;
|
|
}
|
|
|
|
#importDocuments {
|
|
min-height: 0;
|
|
}
|
|
|
|
#importDocuments label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#importDocuments label:hover {
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
#importDocuments input {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
#importDocuments span {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.document-entry:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.document-entry:hover,
|
|
.document-entry[data-selected="true"] {
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.document-entry[data-selected="true"] {
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
.document-entry:focus-visible {
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.document-name {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.document-pages {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.document-pages {
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.navigation-tabs {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
gap: 16px;
|
|
margin-bottom: 12px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.annotation-summary-list {
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.annotation-summary {
|
|
min-width: 0;
|
|
padding: 8px 4px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.annotation-summary-target {
|
|
display: grid;
|
|
gap: 3px;
|
|
width: 100%;
|
|
height: auto;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.annotation-summary-target span {
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.annotation-summary-target span:first-child {
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.annotation-summary-target + .info-line {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.annotation-summary .small-button {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
#annotationsPanel select {
|
|
min-width: 0;
|
|
border: 1px solid var(--line);
|
|
background: #fff;
|
|
font: inherit;
|
|
}
|
|
|
|
#annotationsStatus {
|
|
flex-shrink: 0;
|
|
margin: 8px 0 0;
|
|
}
|
|
|
|
#annotationsStatus:empty {
|
|
display: none;
|
|
}
|
|
|
|
.navigation-tabs button {
|
|
height: 28px;
|
|
padding: 0 0 6px;
|
|
border: 0;
|
|
border-bottom: 2px solid transparent;
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.navigation-tabs button[data-selected="true"] {
|
|
border-bottom-color: var(--accent);
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
.outline-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.navigation-content:has(#searchPanel:not([hidden])),
|
|
.navigation-content:has(#annotationsPanel:not([hidden])),
|
|
#searchPanel:not([hidden]),
|
|
#annotationsPanel:not([hidden]) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#searchPanel,
|
|
#annotationsPanel {
|
|
flex: 1;
|
|
}
|
|
|
|
#searchPanel :focus-visible,
|
|
#annotationsPanel :focus-visible {
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.search-results {
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.search-form {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.search-form input {
|
|
width: 0;
|
|
min-width: 0;
|
|
flex: 1;
|
|
height: var(--control-height);
|
|
padding: 0 6px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 0;
|
|
background: #ffffff;
|
|
color: #1f2428;
|
|
font-size: 13px;
|
|
appearance: none;
|
|
}
|
|
|
|
.search-form button {
|
|
flex-shrink: 0;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.search-tools {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin: 8px 0;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
#searchStatus {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.search-tools button {
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 0;
|
|
}
|
|
|
|
.search-result {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
padding: 8px 4px;
|
|
border: 0;
|
|
border-bottom: 1px solid var(--line);
|
|
background: transparent;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
text-align: left;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.search-result[data-current="true"] {
|
|
background: #e4f3ef;
|
|
}
|
|
|
|
.search-page {
|
|
display: block;
|
|
margin-bottom: 3px;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.search-result mark {
|
|
background: #c9e6de;
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
.search-highlight {
|
|
position: absolute;
|
|
background: rgba(15, 123, 104, 0.24);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.outline-list .outline-list {
|
|
padding-left: 14px;
|
|
}
|
|
|
|
.outline-list summary {
|
|
margin-left: 14px;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
list-style-position: outside;
|
|
}
|
|
|
|
.outline-list:has(> li > details) .outline-leaf {
|
|
padding-left: 14px;
|
|
}
|
|
|
|
.outline-link {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
width: 100%;
|
|
min-height: 30px;
|
|
height: auto;
|
|
padding: 5px 4px;
|
|
border: 0;
|
|
background: transparent;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.outline-link > :first-child {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.outline-page {
|
|
flex-shrink: 0;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
button.outline-link:hover {
|
|
background: #e4f3ef;
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
.page-list {
|
|
--thumb-gap: 12px;
|
|
display: grid;
|
|
gap: var(--thumb-gap);
|
|
}
|
|
|
|
.virtual-pages {
|
|
position: relative;
|
|
display: block;
|
|
overflow-y: clip;
|
|
overflow-anchor: none;
|
|
}
|
|
|
|
.page-list.virtual-pages > .page-list-item,
|
|
.svg-host.virtual-pages > .page-shell {
|
|
position: absolute;
|
|
}
|
|
|
|
.svg-host.virtual-pages > .page-shell {
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.page-list.virtual-pages > .page-list-item {
|
|
grid-template-rows: minmax(0, 1fr) 20px 18px;
|
|
}
|
|
|
|
.page-list.virtual-pages .thumb-paper {
|
|
aspect-ratio: auto;
|
|
}
|
|
|
|
.page-list.grouped-pages .thumb-paper {
|
|
width: var(--thumb-paper-width);
|
|
height: var(--thumb-paper-height);
|
|
justify-self: center;
|
|
align-self: start;
|
|
}
|
|
|
|
.page-list.grouped-pages .page-list-item[data-pressed] .thumb-label,
|
|
.page-list.grouped-pages .page-list-item[data-pressed] .thumb-size {
|
|
padding-right: 24px;
|
|
}
|
|
|
|
.page-list.virtual-pages .thumb-label {
|
|
line-height: 20px;
|
|
}
|
|
|
|
.page-list.virtual-pages .thumb-size {
|
|
line-height: 18px;
|
|
}
|
|
|
|
.page-list-item {
|
|
display: grid;
|
|
gap: 6px;
|
|
width: 100%;
|
|
height: auto;
|
|
padding: 8px;
|
|
font-variant-numeric: tabular-nums;
|
|
text-align: left;
|
|
transition: border-color 0.16s ease, background-color 0.16s ease;
|
|
}
|
|
|
|
.page-list-item:not(:disabled):hover {
|
|
border-color: var(--line-strong);
|
|
background: #f0f5f4;
|
|
}
|
|
|
|
.page-list-item[data-current],
|
|
.page-list-item[data-current]:hover {
|
|
border-color: var(--accent);
|
|
color: var(--accent-strong);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.page-list-item[data-pressed] {
|
|
user-select: none;
|
|
-webkit-touch-callout: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.page-list-item[data-current]:not([data-pressed="false"]),
|
|
.page-list-item[data-pressed="true"],
|
|
.page-list-item[data-pressed="true"]:hover {
|
|
border-color: var(--accent);
|
|
background: #e4f3ef;
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
.thumb-paper {
|
|
position: relative;
|
|
box-sizing: content-box;
|
|
display: grid;
|
|
place-items: center;
|
|
aspect-ratio: var(--thumb-ratio, 0.707 / 1);
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
background: #ffffff;
|
|
box-shadow: 0 2px 7px rgba(31, 36, 40, 0.1);
|
|
color: #9aa6b1;
|
|
font-size: 20px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.thumb-paper.pending,
|
|
.thumb-paper.error {
|
|
background:
|
|
linear-gradient(90deg, rgba(31, 36, 40, 0.04) 1px, transparent 1px),
|
|
linear-gradient(0deg, rgba(31, 36, 40, 0.04) 1px, transparent 1px),
|
|
#ffffff;
|
|
background-size: 12px 12px;
|
|
}
|
|
|
|
.thumb-svg {
|
|
display: block;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: var(--thumb-width, 100%);
|
|
height: var(--thumb-height, 100%);
|
|
transform: translate(-50%, -50%) rotate(var(--thumb-rotation, 0deg));
|
|
}
|
|
|
|
.thumb-label,
|
|
.thumb-size {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.thumb-label {
|
|
font-size: 13px;
|
|
color: #1f2428;
|
|
}
|
|
|
|
.thumb-size {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.viewer-panel {
|
|
position: relative;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
overflow-anchor: none;
|
|
background:
|
|
linear-gradient(90deg, rgba(31, 36, 40, 0.05) 1px, transparent 1px),
|
|
linear-gradient(0deg, rgba(31, 36, 40, 0.05) 1px, transparent 1px),
|
|
#e5e9ed;
|
|
background-size: 24px 24px;
|
|
}
|
|
|
|
.viewer-panel.single-page-fits-height {
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.viewer-panel:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.viewer-panel.keyboard-focus:focus-visible {
|
|
outline: 2px solid var(--focus);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.viewer-panel.pan-mode,
|
|
.pan-mode .text-run > span {
|
|
cursor: grab;
|
|
}
|
|
|
|
.viewer-panel.panning,
|
|
.panning .text-layer,
|
|
.panning .text-run > span {
|
|
cursor: grabbing;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.empty-state {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 24px;
|
|
color: var(--text-muted);
|
|
font-size: 14px;
|
|
text-align: center;
|
|
}
|
|
|
|
.empty-state[hidden],
|
|
.editor-group > [hidden],
|
|
.panel-row > [hidden],
|
|
.panel-actions > [hidden],
|
|
.document-row[hidden],
|
|
.document-row > [hidden],
|
|
.meta-list > [hidden],
|
|
.navigation-tabs[hidden],
|
|
.page-selection-tools[hidden],
|
|
.form-row[hidden],
|
|
.form-pair[hidden],
|
|
.form-actions > [hidden],
|
|
.document-actions > [hidden],
|
|
.annotation-detail[hidden],
|
|
.tool-group[hidden],
|
|
.page-list[hidden],
|
|
.page-frame[hidden],
|
|
.progress-panel > [hidden],
|
|
.progress-panel[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.progress-panel {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: calc(var(--bar-height) + 14px);
|
|
z-index: 20;
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 8px 10px;
|
|
width: min(420px, calc(100vw - 32px));
|
|
padding: 10px 12px;
|
|
border: 1px solid rgba(170, 183, 193, 0.82);
|
|
background: rgba(251, 252, 253, 0.96);
|
|
box-shadow: var(--shadow-soft);
|
|
transform: translateX(-50%);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.progress-panel:has(> button:not([hidden])) {
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
}
|
|
|
|
.progress-spinner {
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid #d5dde3;
|
|
border-top-color: var(--accent);
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
.progress-label {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: #1f2428;
|
|
font-size: 13px;
|
|
font-variant-numeric: tabular-nums;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.progress-track {
|
|
grid-column: 1 / -1;
|
|
width: 100%;
|
|
height: 4px;
|
|
overflow: hidden;
|
|
background: #dbe2e7;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 0;
|
|
height: 100%;
|
|
background: var(--accent);
|
|
transition: width 0.18s ease;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.progress-spinner,
|
|
.region-highlight {
|
|
animation: none;
|
|
}
|
|
|
|
.progress-bar {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
.page-frame {
|
|
display: grid;
|
|
align-items: safe center;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
padding: var(--page-space);
|
|
padding-block: var(--fit-space, var(--page-space));
|
|
}
|
|
|
|
.page-frame.continuous {
|
|
--page-space: 0px;
|
|
align-items: start;
|
|
}
|
|
|
|
.svg-host {
|
|
display: grid;
|
|
justify-items: center;
|
|
gap: var(--fit-gap, var(--fit-space, var(--page-space)));
|
|
width: max-content;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.svg-host.virtual-pages {
|
|
display: block;
|
|
}
|
|
|
|
.page-shell {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(170, 183, 193, 0.55);
|
|
box-shadow: var(--shadow-page);
|
|
background: var(--page);
|
|
}
|
|
|
|
.page-frame.continuous .page-shell {
|
|
border: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.page-frame.continuous .page-shell::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-right: 1px solid rgba(170, 183, 193, 0.55);
|
|
border-bottom: 1px solid rgba(170, 183, 193, 0.55);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.page-shell.error {
|
|
background: #fff8f7;
|
|
}
|
|
|
|
.page-surface {
|
|
position: relative;
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
.edit-layer {
|
|
display: none;
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.edit-text-source {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.edit-text {
|
|
position: absolute;
|
|
overflow: visible;
|
|
z-index: 1;
|
|
margin: -2px;
|
|
padding: 1px;
|
|
border: 1px dashed var(--accent);
|
|
border-radius: 0;
|
|
background: #fff;
|
|
outline: none;
|
|
transform-origin: 0 0;
|
|
font-kerning: none;
|
|
font-variant-ligatures: none;
|
|
letter-spacing: 0;
|
|
cursor: text;
|
|
touch-action: auto;
|
|
}
|
|
|
|
.edit-text div,
|
|
.edit-text p {
|
|
margin: 0;
|
|
text-indent: inherit;
|
|
}
|
|
|
|
.edit-text span[data-glyph] {
|
|
position: relative;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.edit-text span[data-glyph]::after {
|
|
content: attr(data-glyph);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
-webkit-text-fill-color: currentColor;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.edit-text:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
.editing-select .edit-layer {
|
|
display: block;
|
|
}
|
|
|
|
.editing .svg-host,
|
|
.editing .page-shell,
|
|
.editing .page-surface > .ofd-svg {
|
|
overflow: visible;
|
|
}
|
|
|
|
.editing-select .text-run > span {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.editing-draw {
|
|
cursor: crosshair;
|
|
touch-action: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.editing-draw .edit-layer,
|
|
.editing-draw .page-surface > :not(.edit-preview) {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.editing-draw .edit-object {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.edit-preview {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
.edit-object {
|
|
position: absolute;
|
|
pointer-events: auto;
|
|
touch-action: none;
|
|
user-select: none;
|
|
cursor: move;
|
|
}
|
|
|
|
.edit-object:hover {
|
|
outline: calc(1px / var(--surface-scale)) dashed var(--accent);
|
|
}
|
|
|
|
.edit-object.selected,
|
|
.edit-object.erasing,
|
|
.edit-selection,
|
|
.edit-crop {
|
|
outline: calc(1px / var(--surface-scale)) solid var(--accent);
|
|
}
|
|
|
|
.edit-object.read-only {
|
|
cursor: default;
|
|
}
|
|
|
|
.edit-object.edit-contour,
|
|
.edit-object.edit-contour.selected,
|
|
.edit-object.edit-contour.erasing {
|
|
outline: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.edit-outline {
|
|
display: none;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 1px;
|
|
min-height: 1px;
|
|
overflow: visible;
|
|
pointer-events: none;
|
|
fill: none;
|
|
stroke: var(--accent);
|
|
stroke-width: calc(1px / var(--surface-scale));
|
|
}
|
|
|
|
.edit-outline > * {
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
|
|
.edit-object:hover > .edit-outline,
|
|
.edit-object.selected > .edit-outline,
|
|
.edit-object.erasing > .edit-outline {
|
|
display: block;
|
|
}
|
|
|
|
.edit-object.erasing > .edit-outline {
|
|
stroke-dasharray: 3 2;
|
|
}
|
|
|
|
.outline-tools {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.form-format {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.form-format > button {
|
|
flex: 1;
|
|
}
|
|
|
|
.form-check {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.outline-link.selected {
|
|
background: var(--accent-soft);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.page-list-item {
|
|
position: relative;
|
|
}
|
|
|
|
.thumb-grip {
|
|
position: absolute;
|
|
right: 8px;
|
|
bottom: 8px;
|
|
width: 24px;
|
|
height: 28px;
|
|
cursor: grab;
|
|
touch-action: none;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.thumb-grip::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 7px;
|
|
top: 7px;
|
|
width: 3px;
|
|
height: 3px;
|
|
background: currentColor;
|
|
box-shadow: 6px 0 currentColor, 0 6px currentColor, 6px 6px currentColor, 0 12px currentColor, 6px 12px currentColor;
|
|
}
|
|
|
|
.page-list-item.reordering {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.page-list-item.drop-before::before,
|
|
.page-list-item.drop-after::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: var(--accent);
|
|
}
|
|
|
|
.page-list-item.drop-before::before { top: -6px; }
|
|
.page-list-item.drop-after::after { bottom: -6px; }
|
|
|
|
.grouped-pages .page-list-item.drop-before::before,
|
|
.grouped-pages .page-list-item.drop-after::after {
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
height: auto;
|
|
}
|
|
|
|
.grouped-pages .page-list-item.drop-before::before { left: calc(-1px - var(--thumb-gap) / 2); right: auto; }
|
|
.grouped-pages .page-list-item.drop-after::after { right: calc(-1px - var(--thumb-gap) / 2); left: auto; }
|
|
|
|
.edit-object.erasing {
|
|
background: var(--accent-soft);
|
|
outline-style: dashed;
|
|
}
|
|
|
|
.edit-handle {
|
|
display: none;
|
|
position: absolute;
|
|
z-index: 1;
|
|
width: calc(9px / var(--surface-scale));
|
|
height: calc(9px / var(--surface-scale));
|
|
border: calc(1px / var(--surface-scale)) solid var(--accent);
|
|
background: #fff;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.selected .edit-handle,
|
|
.edit-selection .edit-handle,
|
|
.edit-crop .edit-handle {
|
|
display: block;
|
|
}
|
|
|
|
.multi-selected .edit-handle {
|
|
display: none;
|
|
}
|
|
|
|
.edit-selection .edit-handle,
|
|
.edit-crop .edit-handle {
|
|
pointer-events: auto;
|
|
touch-action: none;
|
|
}
|
|
|
|
.edit-crop {
|
|
pointer-events: auto;
|
|
touch-action: none;
|
|
cursor: move;
|
|
}
|
|
|
|
.cropping .edit-object {
|
|
pointer-events: none;
|
|
outline: none;
|
|
background: none;
|
|
}
|
|
|
|
.cropping .edit-object .edit-handle {
|
|
display: none;
|
|
}
|
|
|
|
.edit-handle::before {
|
|
position: absolute;
|
|
inset: calc(-8px / var(--surface-scale));
|
|
content: "";
|
|
}
|
|
|
|
.edit-nw {
|
|
left: 0;
|
|
top: 0;
|
|
cursor: var(--resize-diagonal, nwse-resize);
|
|
}
|
|
|
|
.edit-ne {
|
|
left: 100%;
|
|
top: 0;
|
|
cursor: var(--resize-antidiagonal, nesw-resize);
|
|
}
|
|
|
|
.edit-sw {
|
|
left: 0;
|
|
top: 100%;
|
|
cursor: var(--resize-antidiagonal, nesw-resize);
|
|
}
|
|
|
|
.edit-se {
|
|
left: 100%;
|
|
top: 100%;
|
|
cursor: var(--resize-diagonal, nwse-resize);
|
|
}
|
|
|
|
.edit-n,
|
|
.edit-s {
|
|
left: 50%;
|
|
cursor: var(--resize-vertical, ns-resize);
|
|
}
|
|
|
|
.edit-n {
|
|
top: 0;
|
|
}
|
|
|
|
.edit-s {
|
|
top: 100%;
|
|
}
|
|
|
|
.edit-w,
|
|
.edit-e {
|
|
top: 50%;
|
|
cursor: var(--resize-horizontal, ew-resize);
|
|
}
|
|
|
|
.edit-w {
|
|
left: 0;
|
|
}
|
|
|
|
.edit-e {
|
|
left: 100%;
|
|
}
|
|
|
|
.edit-start,
|
|
.edit-end {
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.page-surface.sideways {
|
|
--resize-diagonal: nesw-resize;
|
|
--resize-antidiagonal: nwse-resize;
|
|
--resize-vertical: ew-resize;
|
|
--resize-horizontal: ns-resize;
|
|
}
|
|
|
|
.text-layer {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
color: transparent;
|
|
opacity: 0.24;
|
|
pointer-events: none;
|
|
-webkit-user-select: text;
|
|
user-select: text;
|
|
text-size-adjust: none;
|
|
}
|
|
|
|
.text-run > span {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
font: 100px/1 sans-serif;
|
|
white-space: pre;
|
|
transform-origin: 0 0;
|
|
cursor: text;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.text-run > span::selection {
|
|
color: transparent;
|
|
background: var(--accent);
|
|
}
|
|
|
|
.page-link {
|
|
position: absolute;
|
|
}
|
|
|
|
.page-media {
|
|
position: absolute;
|
|
z-index: 1;
|
|
object-fit: contain;
|
|
}
|
|
|
|
audio.page-media {
|
|
height: 32px;
|
|
}
|
|
|
|
.page-surface video.page-media {
|
|
transform: scale(calc(1 / var(--surface-scale, 1)));
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
.media-dialog {
|
|
position: fixed;
|
|
z-index: 100;
|
|
width: 640px;
|
|
}
|
|
|
|
.media-dialog .form-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin: 0;
|
|
}
|
|
|
|
.media-dialog .page-media {
|
|
position: static;
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
max-height: calc(100dvh - 100px);
|
|
aspect-ratio: 16 / 9;
|
|
background: #000;
|
|
}
|
|
|
|
.media-dialog audio.page-media {
|
|
height: 54px;
|
|
aspect-ratio: auto;
|
|
}
|
|
|
|
.editing .page-media {
|
|
display: none;
|
|
}
|
|
|
|
.page-link:hover,
|
|
.page-link:focus-visible {
|
|
background: rgba(15, 123, 104, 0.08);
|
|
}
|
|
|
|
.page-region-link,
|
|
.page-region-link:hover,
|
|
.page-region-link:focus-visible {
|
|
pointer-events: none;
|
|
background: none;
|
|
}
|
|
|
|
.page-region-link > svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.page-region-link path {
|
|
pointer-events: fill;
|
|
fill: transparent;
|
|
}
|
|
|
|
.page-region-link:hover path,
|
|
.page-region-link:focus-visible path {
|
|
fill: rgba(15, 123, 104, 0.08);
|
|
}
|
|
|
|
.annotation-note {
|
|
position: absolute;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
width: 22px;
|
|
height: 22px;
|
|
padding: 0;
|
|
border: 1px solid var(--line-strong);
|
|
background: var(--panel);
|
|
color: var(--accent-strong);
|
|
font-size: 16px;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
transform-origin: 0 0;
|
|
transform: rotate(var(--note-rotation, 0deg)) scale(var(--note-scale, 1)) translateX(-100%);
|
|
}
|
|
|
|
.annotation-note.active,
|
|
.annotation-note.located,
|
|
.annotation-note:focus {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.annotation-note.no-zoom {
|
|
--note-scale: calc(1 / var(--surface-scale, 1));
|
|
}
|
|
|
|
.annotation-note.no-rotate {
|
|
--note-rotation: calc(-1 * var(--surface-rotation, 0deg));
|
|
}
|
|
|
|
.edit-note-icon {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 1px solid var(--line-strong);
|
|
background: var(--panel);
|
|
color: var(--accent-strong);
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.annotation-detail {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.editing .annotation-note,
|
|
.editing .page-link {
|
|
display: none;
|
|
}
|
|
|
|
.page-placeholder {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
background:
|
|
linear-gradient(90deg, rgba(31, 36, 40, 0.04) 1px, transparent 1px),
|
|
linear-gradient(0deg, rgba(31, 36, 40, 0.04) 1px, transparent 1px),
|
|
#ffffff;
|
|
background-size: 18px 18px;
|
|
}
|
|
|
|
.page-shell.rendered .page-placeholder {
|
|
display: none;
|
|
}
|
|
|
|
.region-highlight {
|
|
position: absolute;
|
|
z-index: 4;
|
|
border: 2px solid var(--accent);
|
|
background: rgba(15, 123, 104, 0.08);
|
|
box-shadow: 0 0 0 3px rgba(15, 123, 104, 0.16);
|
|
pointer-events: none;
|
|
animation: regionPulse 0.9s ease-in-out 2;
|
|
}
|
|
|
|
@keyframes regionPulse {
|
|
50% {
|
|
border-color: var(--accent-strong);
|
|
box-shadow: 0 0 0 5px rgba(15, 123, 104, 0.18);
|
|
}
|
|
}
|
|
|
|
.ofd-svg {
|
|
display: block;
|
|
max-width: none;
|
|
transform-origin: 0 0;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.meta-list {
|
|
display: grid;
|
|
gap: 12px;
|
|
margin: 0;
|
|
}
|
|
|
|
.meta-list div {
|
|
display: grid;
|
|
gap: 3px;
|
|
}
|
|
|
|
.meta-list dt {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.meta-list dd {
|
|
margin: 0;
|
|
overflow-wrap: anywhere;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.font-panel,
|
|
.doc-font-panel,
|
|
.signature-panel,
|
|
.structure-panel,
|
|
.security-panel {
|
|
margin-top: 18px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.conversion-notice {
|
|
margin-block: 12px;
|
|
}
|
|
|
|
.conversion-notice > summary {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.conversion-notice p {
|
|
margin-block: 8px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.panel-detail {
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.count-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 28px;
|
|
height: 26px;
|
|
padding: 0 7px;
|
|
border: 1px solid var(--line);
|
|
background: #ffffff;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.doc-font-list,
|
|
.signature-list {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.doc-font-row,
|
|
.signature-row {
|
|
display: grid;
|
|
gap: 6px;
|
|
padding: 9px;
|
|
border: 1px solid var(--line);
|
|
background: #ffffff;
|
|
transition: border-color 0.16s ease, background-color 0.16s ease;
|
|
}
|
|
|
|
.doc-font-row:hover,
|
|
.signature-row:hover,
|
|
.font-row:hover {
|
|
border-color: var(--line-strong);
|
|
background: #ffffff;
|
|
}
|
|
|
|
.doc-font-row.missing {
|
|
border-color: #e2c7c4;
|
|
background: #fffdfc;
|
|
}
|
|
|
|
.doc-font-row.fallback {
|
|
border-color: #ded0a6;
|
|
background: #fffdf7;
|
|
}
|
|
|
|
.signature-row.valid {
|
|
border-color: #bdd8cc;
|
|
background: #fbfefd;
|
|
}
|
|
|
|
.signature-row.invalid {
|
|
border-color: #e2c7c4;
|
|
background: #fffdfc;
|
|
}
|
|
|
|
.doc-font-head,
|
|
.signature-head {
|
|
display: flow-root;
|
|
}
|
|
|
|
.doc-font-name,
|
|
.signature-name {
|
|
color: #1f2428;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.doc-font-head:has(.font-binding-action) {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto auto;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.doc-font-head:has(.font-binding-action) .doc-font-name {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.doc-font-head:has(.font-binding-action) .doc-font-badges {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
margin: 0;
|
|
}
|
|
|
|
.font-binding-action {
|
|
grid-column: 3;
|
|
grid-row: 1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#fontBindingName {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
#fontBindingHint {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.info-name-button {
|
|
display: inline;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
font-weight: inherit;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
|
|
.info-name-button:not(:disabled):hover {
|
|
background: transparent;
|
|
color: var(--accent-strong);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.signature-stamp-group {
|
|
color: var(--text-muted);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.signature-stamp-item {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.signature-stamp-link {
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--accent-strong);
|
|
font: inherit;
|
|
font-weight: 400;
|
|
line-height: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.signature-stamp-link:not(:disabled):hover {
|
|
background: transparent;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.doc-font-badges,
|
|
.signature-badges {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 4px;
|
|
float: right;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.font-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 30px;
|
|
padding: 3px 6px;
|
|
background: #eef1f4;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
line-height: 1.35;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.doc-font-head .font-badge,
|
|
.font-binding-action {
|
|
width: 36px;
|
|
height: 24px;
|
|
padding: 0;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.font-badge.embedded,
|
|
.font-badge.matched,
|
|
.font-badge.valid {
|
|
background: #e4f3ef;
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
.font-badge.fallback {
|
|
background: #fbefd3;
|
|
color: #705719;
|
|
}
|
|
|
|
.font-badge.missing,
|
|
.font-badge.invalid {
|
|
background: #f9e8e5;
|
|
color: #803f38;
|
|
}
|
|
|
|
.info-line {
|
|
display: grid;
|
|
grid-template-columns: 2em minmax(0, 1fr);
|
|
align-items: start;
|
|
gap: 7px;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.info-label {
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.meta-panel .info-line {
|
|
grid-template-columns: 4em minmax(0, 1fr);
|
|
}
|
|
|
|
.meta-panel .info-label {
|
|
text-align-last: justify;
|
|
}
|
|
|
|
.signature-row details {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.signature-row summary {
|
|
cursor: pointer;
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
.signature-row details[open] > .info-line {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.info-value {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.structure-list,
|
|
.structure-content {
|
|
display: grid;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.structure-node {
|
|
min-width: 0;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.structure-node > summary {
|
|
cursor: pointer;
|
|
color: var(--accent-strong);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.structure-content {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.structure-content > .structure-node {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.structure-content .info-label {
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.structure-links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.structure-dialog {
|
|
width: min(560px, calc(100vw - 32px));
|
|
}
|
|
|
|
.structure-dialog .form-row {
|
|
grid-template-columns: 4em minmax(0, 1fr);
|
|
}
|
|
|
|
.structure-dialog .form-row > label {
|
|
text-align-last: justify;
|
|
}
|
|
|
|
.structure-dialog .panel-row {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.structure-dialog .panel-row > span {
|
|
width: 4em;
|
|
text-align-last: justify;
|
|
}
|
|
|
|
.structure-dialog .panel-actions {
|
|
gap: 8px;
|
|
}
|
|
|
|
.structure-dialog .form-actions {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.structure-edit-list {
|
|
display: grid;
|
|
gap: 12px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.structure-edit-list:empty {
|
|
display: none;
|
|
}
|
|
|
|
.structure-attribute {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--control-height);
|
|
gap: 8px;
|
|
}
|
|
|
|
.structure-attribute .structure-attribute-value {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.structure-attribute > button {
|
|
grid-column: -2;
|
|
grid-row: 1;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.structure-attribute {
|
|
grid-template-columns: minmax(0, 1fr) var(--control-height);
|
|
}
|
|
|
|
.structure-attribute > input[name="namespace"] {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|
|
|
|
.structure-reference + .structure-reference {
|
|
border-top: 1px solid var(--line);
|
|
padding-top: 12px;
|
|
}
|
|
|
|
.structure-reference .form-row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.structure-reference .form-unit {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) var(--control-height);
|
|
min-width: 0;
|
|
gap: 8px;
|
|
}
|
|
|
|
.structure-reference .form-unit > input,
|
|
.structure-reference .form-unit > select,
|
|
.structure-attribute > input {
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.info-line.ok .info-value {
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
.info-line.fail .info-value {
|
|
color: #803f38;
|
|
}
|
|
|
|
.doc-font-detail {
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.font-list {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.font-permission-hint {
|
|
margin: 0 0 8px;
|
|
padding: 7px 8px;
|
|
border: 1px solid var(--line);
|
|
background: #ffffff;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.font-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px;
|
|
border: 1px solid var(--line);
|
|
background: #ffffff;
|
|
}
|
|
|
|
.font-main {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 7px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.font-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 5px;
|
|
min-width: max-content;
|
|
}
|
|
|
|
.font-row input[type="checkbox"] {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: 0;
|
|
accent-color: var(--accent);
|
|
}
|
|
|
|
.font-name-input {
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: 26px;
|
|
padding: 0 6px;
|
|
border: 1px solid var(--line);
|
|
background: #ffffff;
|
|
color: #1f2428;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.font-source {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 32px;
|
|
height: 20px;
|
|
padding: 0 6px;
|
|
border: 1px solid var(--line);
|
|
background: #f8fafb;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.font-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
height: 26px;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.font-delete {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
width: 26px;
|
|
height: 26px;
|
|
padding: 0;
|
|
color: #7c3333;
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.font-empty {
|
|
padding: 10px;
|
|
border: 1px dashed var(--line-strong);
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
text-align: center;
|
|
}
|
|
|
|
.app-footer {
|
|
z-index: 12;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
border-top: 1px solid var(--line);
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.footer-brand {
|
|
flex: 0 0 var(--sidebar-width);
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.status-text {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--text-muted);
|
|
line-height: 1.35;
|
|
text-align: center;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.footer-links {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex: 0 0 var(--sidebar-width);
|
|
justify-content: flex-end;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.app-footer a {
|
|
color: var(--accent-strong);
|
|
font-weight: 400;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.app-footer a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@media (display-mode: standalone) {
|
|
body {
|
|
min-height: 100svh;
|
|
}
|
|
|
|
.app {
|
|
height: 100svh;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 901px) and (max-width: 1900px) {
|
|
.editor-toolbar {
|
|
--editor-control-width: 44px;
|
|
}
|
|
|
|
.editor-group {
|
|
padding-inline: 3px;
|
|
column-gap: 3px;
|
|
}
|
|
|
|
.editor-toolbar .button {
|
|
padding-inline: 6px;
|
|
}
|
|
|
|
.editor-group > select {
|
|
padding-inline: 2px 10px;
|
|
background-position: right 5px center, right 2px center;
|
|
}
|
|
|
|
.editor-group:has(#textFont) {
|
|
grid-template-columns: repeat(7, 44px);
|
|
}
|
|
|
|
.editor-paragraph {
|
|
grid-template-columns: var(--editor-control-width) 100px;
|
|
}
|
|
|
|
.editor-group:has(#shapeFill) {
|
|
grid-template-columns: repeat(2, 76px);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 901px) and (max-width: 1900px) {
|
|
.toolbar {
|
|
--tool-gap: 4px;
|
|
}
|
|
|
|
.toolbar .button {
|
|
padding-inline: 6px;
|
|
}
|
|
|
|
.toolbar .tool-group + .tool-group::before {
|
|
margin-inline: 4px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 901px) and (max-width: 1400px) {
|
|
.toolbar {
|
|
--tool-gap: 3px;
|
|
}
|
|
|
|
.toolbar .button {
|
|
padding-inline: 4px;
|
|
}
|
|
|
|
.toolbar .tool-group + .tool-group::before {
|
|
margin-inline: 0;
|
|
}
|
|
|
|
.toolbar .page-control {
|
|
grid-template-columns: max(3ch, var(--page-width, 3ch)) auto max(3ch, var(--page-width, 3ch));
|
|
gap: 4px;
|
|
padding-inline: 4px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
:root {
|
|
--sidebar-width: min(78vw, 292px);
|
|
}
|
|
|
|
.toolbar {
|
|
--tool-gap: 6px;
|
|
}
|
|
|
|
.toolbar > * {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.toolbar-space {
|
|
display: none;
|
|
}
|
|
|
|
.footer-brand,
|
|
.footer-links {
|
|
flex: 0 1 auto;
|
|
}
|
|
|
|
.workspace {
|
|
position: relative;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
overflow: clip;
|
|
}
|
|
|
|
body[data-hide-pages] .workspace,
|
|
body[data-hide-meta] .workspace,
|
|
body[data-hide-pages][data-hide-meta] .workspace {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.page-list-panel,
|
|
.meta-panel {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 8;
|
|
width: var(--sidebar-width);
|
|
box-shadow: 0 16px 32px rgba(31, 36, 40, 0.18);
|
|
transition: transform 0.18s ease;
|
|
}
|
|
|
|
body[data-hide-meta] .meta-panel {
|
|
display: block;
|
|
}
|
|
|
|
body[data-hide-pages] .page-list-panel {
|
|
display: flex;
|
|
}
|
|
|
|
.page-list-panel {
|
|
left: 0;
|
|
}
|
|
|
|
.meta-panel {
|
|
right: 0;
|
|
}
|
|
|
|
body[data-hide-pages] .page-list-panel {
|
|
transform: translateX(-100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
body[data-hide-meta] .meta-panel {
|
|
transform: translateX(100%);
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.app-update {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
:root {
|
|
--bar-height: 42px;
|
|
--control-height: 28px;
|
|
--bar-pad: 5px 8px;
|
|
}
|
|
|
|
.workspace {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.document-actions {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.tool-group + .tool-group::before,
|
|
.toolbar-frame:has(.app-update:not([hidden]))::before {
|
|
display: none;
|
|
}
|
|
|
|
.button {
|
|
padding: 0 7px;
|
|
}
|
|
|
|
.button[data-short] {
|
|
min-width: var(--control-height);
|
|
font-size: 0;
|
|
}
|
|
|
|
.button[data-short]::after {
|
|
content: attr(data-short);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.icon-button {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.page-control {
|
|
grid-template-columns: max(3ch, var(--page-width, 3ch)) auto max(3ch, var(--page-width, 3ch));
|
|
gap: 4px;
|
|
padding: 0 6px;
|
|
}
|
|
|
|
.zoom-label {
|
|
min-width: 34px;
|
|
}
|
|
|
|
.toolbar-select .format-select {
|
|
width: var(--control-height);
|
|
padding: 0;
|
|
}
|
|
|
|
.toolbar-select::after {
|
|
display: none;
|
|
}
|
|
|
|
.toolbar-select > span {
|
|
padding: 0;
|
|
justify-content: center;
|
|
font-size: 11px;
|
|
}
|
|
#compressionValue { font-size: 0; }
|
|
#compressionValue::after { content: attr(data-short); font-size: 12px; }
|
|
}
|