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;