style(footnotes): improve for readonly notes

src/public/stylesheets/style.css

@@ -810,6 +810,56 @@ div[data-notify="container"] {
     text-decoration: underline;
 }
 
+.ck-content .footnote-section {
+    border: 1px solid #c4c4c4;
+    border-radius: 2px;
+    counter-reset: footnote-counter;
+    margin: 1em 0;
+    padding: 10px
+}
+
+.ck-content .footnote-item {
+    counter-increment: footnote-counter;
+    display: flex;
+    list-style: none;
+    margin-left: .5em
+}
+
+.ck-content .footnote-item>* {
+    vertical-align: text-top
+}
+
+.ck-content .footnote-back-link {
+    margin-right: .1em;
+    position: relative;
+    top: -.2em
+}
+
+.ck-content .footnotes .footnote-back-link>sup {
+    margin-right: 0
+}
+
+.ck-content .footnote-item:before {
+    content: counter(footnote-counter) ". ";
+    display: inline-block;
+    min-width: fit-content;
+    position: relative;
+    right: .2em;
+    text-align: right;
+}
+
+.ck-content .footnote-content {
+    border-radius: 2px;
+    display: inline-block;
+    flex-grow: 1;
+    padding: 0 .3em;
+    width: 95%
+}
+
+.ck-content .ck-content-widget.footnote-section .ck-content-widget__type-around__button_after {
+    display: none
+}
+
 #options-dialog input[type=number] {
     text-align: right;
 }

src/public/stylesheets/theme-next/notes/text.css

@@ -117,6 +117,6 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
 }
 
 .ck-content .footnote-section {
-    border: 0;
-    border-top: 1px solid var(--main-border-color);
+    border: 0 !important;
+    border-top: 1px solid var(--main-border-color) !important;
 }