diff --git a/src/components/NoteFreshnessBadge.vue b/src/components/NoteFreshnessBadge.vue index 9920d1c..be01e36 100644 --- a/src/components/NoteFreshnessBadge.vue +++ b/src/components/NoteFreshnessBadge.vue @@ -171,7 +171,6 @@ const isBusy = computed(() => props.status === "checking") /> - {{ label }} diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue index c3a256d..bd9551e 100644 --- a/src/components/StackedNote.vue +++ b/src/components/StackedNote.vue @@ -269,27 +269,13 @@ const onBadgeClick = async () => { [`note-${sha}`]: true }" > - - - -
+ +
@@ -389,7 +387,6 @@ $border-color: rgba(18, 19, 58, 0.2); background-color: var(--color-base-100); color: var(--color-base-content); font-size: 0.8em; - overflow: hidden; ul, li { @@ -415,12 +412,15 @@ $border-color: rgba(18, 19, 58, 0.2); align-items: center; justify-content: flex-end; gap: 0.25rem; - margin: 0.2rem 0; } .action { margin: 0; + &:hover { + cursor: pointer; + } + img { vertical-align: bottom; } @@ -452,7 +452,7 @@ $border-color: rgba(18, 19, 58, 0.2); } .title-stacked-note { - padding: 0 1rem; + padding: 0; transform-origin: 0 0; transform: rotate(90deg); } @@ -460,6 +460,12 @@ $border-color: rgba(18, 19, 58, 0.2); a { white-space: nowrap; } + + .action-bar { + .action { + transform: rotate(-90deg); + } + } } @media print { diff --git a/src/components/StackedPublicNote.vue b/src/components/StackedPublicNote.vue index 20ae1bd..1a68746 100644 --- a/src/components/StackedPublicNote.vue +++ b/src/components/StackedPublicNote.vue @@ -144,7 +144,6 @@ $border-color: rgba(18, 19, 58, 0.2); background-color: var(--color-base-100); color: var(--color-base-content); font-size: 0.8em; - overflow: hidden; ul, li { diff --git a/src/styles/app.css b/src/styles/app.css index 22c5ceb..2552ee1 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -13,7 +13,11 @@ --light-link: lighten(#445fb9, 45%); --background-color: #ffffff; --note-width: 500px; - --note-canvas-bg: color-mix(in oklch, var(--color-base-100) 60%, var(--color-base-200)); + --note-canvas-bg: color-mix( + in oklch, + var(--color-base-100) 60%, + var(--color-base-200) + ); --note-sheet-shadow: 1px 0 8px rgb(0 0 0 / 6%); --color-contrast-content: var(--color-success); --notyf-margin: 0.5rem; @@ -91,18 +95,35 @@ a { } } -a.title-stacked-note-link { +.title-stacked-note { color: var(--color-base-content); - display: block; text-decoration: none; position: sticky; top: 0; + overflow: visible; + display: flex; + gap: 0.5rem; + align-items: center; +} +a.title-stacked-note-link { + display: block; + overflow: visible; &:hover { cursor: pointer; } } +.title-stacked-note ul, +.title-stacked-note li { + margin-top: 0; + margin-bottom: 0; + padding-left: 0; + text-decoration: none; + display: flex; + gap: 1rem; +} + .notyf__toast { border-radius: revert-layer; border: none;