extract centered title bar to snippet, add fades and better centering

bobheadxi · bobheadxi · commit cc0b8d03bdff · 2021-07-22T15:20:33.000+08:00
diff --git a/preview-hovers.css b/preview-hovers.css
@@ -1,6 +1,7 @@
 /* reasonably sized hovers */
 .popover.hover-popover {
     width: 30rem !important;
+    overflow: scroll;
 }
 .popover.hover-popover .markdown-embed {
     height: fit-content;
diff --git a/preview-vertical.css b/preview-vertical.css
@@ -6,5 +6,5 @@
         push down: 40 + 20 - (20/2) = 50
     */
     padding-bottom: 20vh !important;
-    transform: translateY(clamp(0px, calc(50vh - 50%), 40vh));
+    transform: translateY(clamp(0px, calc(50vh - 45%), 40vh));
 }
diff --git a/theme-minimal.css b/theme-minimal.css
@@ -15,30 +15,6 @@
     opacity: 1 !important;
 }
 
-.view-header-icon {
-    opacity: 0.25;
-    transition: opacity 0.25s ease-in-out;
-}
-.focus-mode .view-header-icon {
-    opacity: 0;
-}
-.view-header-icon:hover {
-    color: var(--text-muted);
-    opacity: 1 !important;
-}
-.view-header-title-container {
-    position: absolute;
-    width: 100%;
-}
-.view-header-title {
-    font-size: 0.9rem;
-    opacity: 0.75;
-    text-align: center;
-    padding-left: 1.5rem !important;
-    padding-right: 1.5rem !important;
-    position: relative;
-}
-
 .workspace-ribbon-collapse-btn {
     padding: 20px 6px;
 }
diff --git a/view-centered-header.css b/view-centered-header.css
@@ -0,0 +1,56 @@
+.view-header-icon {
+    opacity: 0.25;
+    transition: opacity 0.25s ease-in-out;
+}
+.focus-mode .view-header-icon {
+    opacity: 0;
+}
+.view-header-icon:hover {
+    color: var(--text-muted);
+    opacity: 1 !important;
+}
+.view-header-title-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+.view-header-title {
+    font-size: 0.9rem;
+    opacity: 0.75;
+
+    display: flex;
+    height: 100%;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+
+    padding-left: 1.5rem !important;
+    padding-right: 1.5rem !important;
+}
+.is-mobile .view-header-title {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.view-header-title:before {
+    background: linear-gradient(-90deg, var(--background-transparent) 0%, var(--background-primary) 80%);
+    width: 30px;
+    content: " ";
+    height: 100%;
+    display: inline-block;
+    vertical-align: bottom;
+    pointer-events: none;
+    position: absolute;
+    left: 0px;
+}
+.view-header-title:after {
+    background: linear-gradient(90deg, var(--background-transparent) 0%, var(--background-primary) 80%);
+    width: 30px;
+    content: " ";
+    height: 100%;
+    display: inline-block;
+    vertical-align: bottom;
+    pointer-events: none;
+    position: absolute;
+    right: 0px;
+}

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`/* reasonably sized hovers */`
`2`	`2`	`.popover.hover-popover {`
`3`	`3`	`width: 30rem !important;`
	`4`	`+ overflow: scroll;`
`4`	`5`	`}`
`5`	`6`	`.popover.hover-popover .markdown-embed {`
`6`	`7`	`height: fit-content;`
Original file line number	Diff line number	Diff line change
`@@ -6,5 +6,5 @@`
`6`	`6`	`push down: 40 + 20 - (20/2) = 50`
`7`	`7`	`*/`
`8`	`8`	`padding-bottom: 20vh !important;`
`9`		`- transform: translateY(clamp(0px, calc(50vh - 50%), 40vh));`
	`9`	`+ transform: translateY(clamp(0px, calc(50vh - 45%), 40vh));`
`10`	`10`	`}`