fixes in styles
This commit is contained in:
Mateusz Gruszczyński
+118
-62
@@ -152,6 +152,8 @@
|
||||
--overlay-82: rgba(4, 6, 9, .82);
|
||||
--glass-92: rgba(13, 16, 21, .92);
|
||||
--glass-toolbar: rgba(17, 21, 28, .88);
|
||||
--top-header-height: 54px;
|
||||
--top-header-control-height: 34px;
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
@@ -362,7 +364,7 @@ a {
|
||||
|
||||
.site-header {
|
||||
width: min(720px, calc(100% - 32px));
|
||||
min-height: 64px;
|
||||
min-height: var(--top-header-height);
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -550,12 +552,29 @@ textarea:focus {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
min-height: 70px;
|
||||
padding: 0 20px;
|
||||
min-height: var(--top-header-height);
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--surface-inset);
|
||||
}
|
||||
|
||||
.pad-page .app-header {
|
||||
min-height: var(--top-header-height);
|
||||
padding-block: 6px;
|
||||
}
|
||||
|
||||
.header-divider {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.app-header .secondary-button,
|
||||
.public-header .secondary-button,
|
||||
.pad-page .header-actions>.secondary-button,
|
||||
.pad-page .page-settings>summary.secondary-button {
|
||||
min-height: var(--top-header-control-height);
|
||||
padding-inline: 10px;
|
||||
}
|
||||
|
||||
.app-header__main,
|
||||
.header-actions {
|
||||
display: flex;
|
||||
@@ -566,7 +585,6 @@ textarea:focus {
|
||||
|
||||
.header-divider {
|
||||
width: 1px;
|
||||
height: 30px;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
@@ -1169,7 +1187,7 @@ dialog::backdrop {
|
||||
.app-header {
|
||||
align-items: flex-start;
|
||||
min-height: auto;
|
||||
padding: 12px 14px;
|
||||
padding: 8px 14px;
|
||||
}
|
||||
|
||||
.app-header__main,
|
||||
@@ -1222,6 +1240,12 @@ dialog::backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-header .secondary-button,
|
||||
.public-header .secondary-button,
|
||||
.pad-page .page-settings>summary.secondary-button {
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@@ -1244,15 +1268,6 @@ dialog::backdrop {
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-toggle {
|
||||
border: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.markdown-toggle.active {
|
||||
background: var(--surface-3) !important;
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
.preview--raw {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
@@ -1621,7 +1636,7 @@ dialog::backdrop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 64px;
|
||||
min-height: var(--top-header-height);
|
||||
padding: 0 max(20px, calc((100vw - 900px) / 2));
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--glass-92);
|
||||
@@ -2880,15 +2895,20 @@ dialog::backdrop {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.markdown-more>summary {
|
||||
display: flex;
|
||||
.markdown-more>summary,
|
||||
.pad-page .toolbar-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 34px;
|
||||
padding: 0 9px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 7px;
|
||||
color: var(--text-tertiary);
|
||||
font-size: .78rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -4854,6 +4874,37 @@ dialog::backdrop {
|
||||
}
|
||||
}
|
||||
|
||||
/* Keep the view controls visible on Full HD displays using 125% scaling.
|
||||
Only the formatting group becomes horizontally scrollable. */
|
||||
@media (min-width: 1500px) and (max-width: 1699px) {
|
||||
.pad-page .editor-toolbar {
|
||||
flex-wrap: nowrap;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.pad-page .toolbar-group {
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding-bottom: 2px;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.pad-page .toolbar-group:has(>.emoji-picker[open]),
|
||||
.pad-page .toolbar-group:has(>.markdown-more[open]) {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.pad-page :is(.editor-controls, .toolbar-action, .line-toggle, .view-switch) {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.pad-page .toolbar-fill {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive note editor -------------------------------------------------- */
|
||||
@media (max-width: 1499px) {
|
||||
.pad-page {
|
||||
@@ -4869,7 +4920,7 @@ dialog::backdrop {
|
||||
.pad-page .app-header {
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.pad-page .app-header__main {
|
||||
@@ -4893,9 +4944,9 @@ dialog::backdrop {
|
||||
|
||||
.pad-page .header-menu-toggle {
|
||||
display: inline-flex;
|
||||
width: 42px;
|
||||
min-width: 42px;
|
||||
height: 42px;
|
||||
width: 36px;
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
@@ -4994,7 +5045,7 @@ dialog::backdrop {
|
||||
|
||||
.pad-page .editor-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
gap: 8px;
|
||||
min-height: 0;
|
||||
padding: 8px;
|
||||
@@ -5012,19 +5063,41 @@ dialog::backdrop {
|
||||
.pad-page .editor-controls,
|
||||
.pad-page .toolbar-action,
|
||||
.pad-page .line-toggle,
|
||||
.pad-page .toolbar-fill,
|
||||
.pad-page #mode-toggle {
|
||||
.pad-page .toolbar-fill {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pad-page #mode-toggle {
|
||||
display: inline-flex;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
align-self: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pad-page .toolbar-group:has(>.emoji-picker[open]),
|
||||
.pad-page .toolbar-group:has(>.markdown-more[open]) {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.pad-page .view-switch {
|
||||
position: sticky;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
align-self: center;
|
||||
justify-self: end;
|
||||
flex: 0 0 auto;
|
||||
background: var(--surface-inset);
|
||||
}
|
||||
|
||||
.pad-page .view-switch button {
|
||||
min-width: 56px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pad-page textarea,
|
||||
.pad-page .preview,
|
||||
.pad-page .authorship-layer {
|
||||
@@ -5055,19 +5128,25 @@ dialog::backdrop {
|
||||
}
|
||||
|
||||
.pad-page .editor-toolbar {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pad-page #mode-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pad-page .view-switch {
|
||||
position: static;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
display: inline-flex;
|
||||
width: max-content;
|
||||
justify-self: end;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pad-page .view-switch button {
|
||||
width: 100%;
|
||||
width: auto;
|
||||
min-width: 62px;
|
||||
}
|
||||
|
||||
.pad-page .view-switch button[data-view="split"] {
|
||||
@@ -5159,12 +5238,21 @@ dialog::backdrop {
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1500px) {
|
||||
@media (min-width: 1921px) {
|
||||
.pad-page .workspace.view-split {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.document-read-only .preview-editable {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.document-read-only .task-checkbox {
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Per-note author color override */
|
||||
.use-global-color {
|
||||
display: inline-grid;
|
||||
@@ -5719,38 +5807,6 @@ dialog::backdrop {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* Make secondary editor actions read clearly as buttons. */
|
||||
.markdown-more>summary,
|
||||
.pad-page .toolbar-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 30px;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 7px;
|
||||
background: var(--surface-strong, var(--surface-strong-2));
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
box-shadow: inset 0 1px 0 var(--wash-medium);
|
||||
}
|
||||
|
||||
.markdown-more>summary:hover,
|
||||
.pad-page .toolbar-action:hover {
|
||||
border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
|
||||
filter: brightness(1.08);
|
||||
}
|
||||
|
||||
.markdown-more>summary {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.markdown-more>summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* Final UI fixes: opaque Page settings and per-note authorship controls. */
|
||||
.page-settings-menu {
|
||||
background: var(--surface-card);
|
||||
|
||||
Reference in New Issue
Block a user