39 خطوط
3.8 KiB
CSS
39 خطوط
3.8 KiB
CSS
body { display: flex; flex-direction: column; font-family: system-ui,sans-serif; color: #233431; background: #f4f6f5; }
|
|
* { box-sizing: border-box; }
|
|
header { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; min-height: 60px; padding: 12px 16px 12px 60px; border-bottom: 1px solid #d6dfda; }
|
|
header > a { color: #244d49; font-size: 15px; font-weight: 650; text-decoration: none; }
|
|
#summary, .controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; }
|
|
.controls { margin-left: auto; }
|
|
label { display: inline-flex; gap: 4px; align-items: center; }
|
|
button, select { border: 1px solid #cbd5ce; border-radius: 4px; padding: 5px 9px; background: white; color: inherit; font: inherit; cursor: pointer; }
|
|
button:focus-visible, select:focus-visible, .surface:focus-visible { outline: 2px solid #2676c5; outline-offset: -2px; }
|
|
#scope { margin: 0; padding: 7px 16px; font-size: 11px; color: #60716b; border-bottom: 1px solid #d6dfda; }
|
|
.workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
|
|
.menu-open .workspace { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 270px; }
|
|
body:not(.menu-open) header, body:not(.menu-open) #scope, body:not(.menu-open) aside, body:not(.menu-open) .pane h2 { display: none; }
|
|
#menu-toggle { position: fixed; top: 12px; left: 12px; z-index: 10; width: 36px; height: 36px; display: grid; place-items: center; padding: 6px; box-shadow: 0 2px 6px #00000014; }
|
|
#menu-toggle[aria-expanded="true"] { background: #e5eee9; }
|
|
.pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid #d6dfda; }
|
|
h2 { margin: 0; padding: 9px 12px; font-size: 12px; font-weight: 650; background: #edf1ee; display: flex; gap: 10px; }
|
|
h2 span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: normal; color: #61746b; }
|
|
.surface { flex: 1; min-height: 0; width: 100%; overflow: hidden; background: white; touch-action: none; user-select: none; cursor: grab; }
|
|
.surface:active { cursor: grabbing; }
|
|
.surface > svg { display: block; width: 100%; height: 100%; }
|
|
aside { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: #fafcfb; }
|
|
.change-controls { display: flex; align-items: center; gap: 6px; padding: 10px; font-size: 12px; }
|
|
.change-controls label { margin-right: auto; }
|
|
#changes { flex: 1; min-height: 0; overflow: auto; padding: 0 8px; }
|
|
#changes button { display: flex; text-align: left; align-items: center; gap: 8px; width: 100%; margin-bottom: 5px; border-left: 3px solid currentColor; font-size: 12px; padding: 10px; }
|
|
#changes button small { margin-left: auto; color: #64756d; font-size: 10px; }
|
|
#changes button[aria-current="true"] { background: #e5eee9; box-shadow: inset 0 0 0 1px #8daba0; }
|
|
.added { color: #16854b; }.removed { color: #cf3545; }.modified { color: #b87b09; }.moved { color: #2676c5; }
|
|
#details { max-height: 35%; overflow: auto; margin: 0; padding: 10px; white-space: pre-wrap; overflow-wrap: anywhere; border-top: 1px solid #d6dfda; font-size: 11px; }
|
|
#details:empty { display: none; }
|
|
[data-diff-hidden] { display: none; }
|
|
.no-highlights [data-diff-box] { display: none; }
|
|
[data-diff-box][data-selected] { stroke-width: 3; fill-opacity: .18; }
|
|
@media (max-width: 900px) { .menu-open .workspace { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: minmax(0,1fr) 180px; } aside { grid-column: 1/-1; } #details { max-height: 40%; } }
|
|
@media (max-width: 550px) { .workspace { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) minmax(0,1fr); } .menu-open .workspace { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) minmax(0,1fr) 140px; } aside { grid-column: auto; } header { gap: 8px; }.controls { margin-left: 0; } }
|
|
|
|
#changes button[hidden] { display: none; }
|