From 097eee18a35e93ba8ab11b2f83237144a2be1e70 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Thu, 14 Mar 2024 14:51:53 +0800
Subject: [PATCH] youtube cover

---
 styles/notion.css | 170 ++++++++++++++++++++++++----------------------
 1 file changed, 87 insertions(+), 83 deletions(-)

diff --git a/styles/notion.css b/styles/notion.css
index b78ab06b..e231c45f 100644
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -116,7 +116,6 @@
   }
 }
 
-
 .notion-page-content-inner {
   position: relative;
   display: flex;
@@ -179,7 +178,6 @@
   color: var(--select-color-2) !important;
 }
 
-
 .notion-app {
   position: relative;
   background: var(--bg-color);
@@ -211,17 +209,17 @@
   /* width: auto !important; */
 }
 
-@media (max-width: 768px){
-    .medium-zoom-image--opened {
-        object-fit: fill !important;
-        height: auto !important;
-    }
+@media (max-width: 768px) {
+  .medium-zoom-image--opened {
+    object-fit: fill !important;
+    height: auto !important;
+  }
 }
 
-@media (min-width: 768px){
-    .medium-zoom-image--opened {
-        object-fit: scale-down !important;
-    }
+@media (min-width: 768px) {
+  .medium-zoom-image--opened {
+    object-fit: scale-down !important;
+  }
 }
 
 .notion-frame {
@@ -405,13 +403,13 @@ summary > .notion-h {
 .notion-h1 {
   font-size: 1.575em;
   margin-top: 1.08em;
-  @apply border-b w-full
+  @apply border-b w-full;
 }
 .notion-h2 {
-  @apply w-full
+  @apply w-full;
 }
 .notion-h3 {
-  @apply w-full
+  @apply w-full;
 }
 
 .notion-header-anchor {
@@ -443,7 +441,7 @@ summary > .notion-h {
 
 .notion-h:hover .notion-hash-link {
   opacity: 1;
-  @apply dark:fill-gray-200
+  @apply dark:fill-gray-200;
 }
 
 .notion-hash-link {
@@ -560,10 +558,12 @@ summary > .notion-h {
   color: inherit;
   word-break: break-word;
   text-decoration: inherit;
-  border-bottom: .05em solid !important;
+  border-bottom: 0.05em solid !important;
   border-color: var(--fg-color-2);
   opacity: 0.7;
-  transition: border-color 100ms ease-in, opacity 100ms ease-in;
+  transition:
+    border-color 100ms ease-in,
+    opacity 100ms ease-in;
 }
 
 .notion-link:hover {
@@ -601,7 +601,7 @@ summary > .notion-h {
   margin: 2px 4px 0 2px;
   fill: var(--fg-color-6);
   color: var(--fg-color-icon);
-  @apply dark:fill-gray-200
+  @apply dark:fill-gray-200;
 }
 
 img.notion-page-icon,
@@ -667,12 +667,12 @@ svg.notion-page-icon {
 }
 
 .notion-list-numbered > .notion-list-numbered {
- list-style-type: lower-alpha;
+  list-style-type: lower-alpha;
 }
 
 .notion-list-numbered > .notion-list-numbered > .notion-list-numbered {
-    list-style-type: lower-roman;
-   }
+  list-style-type: lower-roman;
+}
 
 .notion-list-disc li {
   padding-left: 0.1em;
@@ -701,7 +701,7 @@ svg.notion-page-icon {
 }
 
 .notion-asset-wrapper-image > div {
-    height: auto !important;
+  height: auto !important;
 }
 
 .notion-asset-wrapper-full {
@@ -709,7 +709,7 @@ svg.notion-page-icon {
 }
 
 .notion-asset-wrapper img {
-  width: 90%;
+  /* width: 90%; */
   /* height: 100%; */
   height: auto !important;
   max-height: 100%;
@@ -851,7 +851,7 @@ code[class*='language-'] {
 .notion-bookmark-link {
   display: flex;
   margin-top: 6px;
-  @apply w-52 md:w-80
+  @apply w-52 md:w-80;
 }
 
 .notion-bookmark-link > img {
@@ -919,7 +919,7 @@ code[class*='language-'] {
   font-size: 14px;
   line-height: 1.4;
   color: var(--fg-color-3);
-  @apply dark:text-gray-300
+  @apply dark:text-gray-300;
 }
 
 .notion-callout {
@@ -1122,7 +1122,7 @@ code[class*='language-'] {
 .notion-table-of-contents {
   width: 100%;
   margin: 4px 0;
-  @apply bg-gray-50 dark:bg-gray-900 p-2
+  @apply bg-gray-50 dark:bg-gray-900 p-2;
 }
 
 .notion-table-of-contents-item {
@@ -1142,8 +1142,7 @@ code[class*='language-'] {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  @apply dark:text-white
-
+  @apply dark:text-white;
 }
 
 .notion-table-of-contents-item:hover {
@@ -1296,8 +1295,8 @@ code[class*='language-'] {
   transition: background 20ms ease-in 0s;
   color: inherit;
   text-decoration: none;
-  
-  @apply dark:stroke-slate-200
+
+  @apply dark:stroke-slate-200;
 }
 
 .notion-file-link:hover {
@@ -1337,7 +1336,7 @@ code[class*='language-'] {
   line-height: 16px;
   margin-left: 6px;
 
-  @apply dark:text-gray-400 !important
+  @apply dark:text-gray-400 !important;
 }
 
 .notion-audio {
@@ -1396,8 +1395,8 @@ code[class*='language-'] {
   white-space: normal;
 }
 
-.katex-display>.katex>.katex-html>.tag {
-    position: inherit !important;
+.katex-display > .katex > .katex-html > .tag {
+  position: inherit !important;
 }
 
 .notion-page-title {
@@ -1424,13 +1423,13 @@ code[class*='language-'] {
   @apply max-w-0;
 }
 
-.notion-collection-card{
+.notion-collection-card {
   /* cursor: default !important; */
 }
 
 .notion-collection-card-property .notion-link {
   border-bottom: 0 none;
-  cursor: pointer
+  cursor: pointer;
 }
 
 .notion-collection-card-property .notion-page-title {
@@ -1469,7 +1468,7 @@ code[class*='language-'] {
 }
 
 .notion-collection-row {
-  @apply hidden
+  @apply hidden;
 }
 
 .notion-collection-row-body {
@@ -1612,7 +1611,8 @@ code[class*='language-'] {
 }
 
 .lazy-image-real.medium-zoom-image {
-  transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1),
+  transition:
+    transform 0.3s cubic-bezier(0.2, 0, 0.2, 1),
     opacity 400ms ease-out !important;
   will-change: opacity, transform;
 }
@@ -1700,12 +1700,16 @@ svg + .notion-page-title-text {
   @apply text-gray-600 dark:text-gray-300;
 }
 
-.notion-gray_background,.notion-brown_background,
-.notion-orange_background,.notion-yellow_background,
-.notion-blue_background,.notion-purple_background,
-.notion-teal_background,.notion-red_background,
-.notion-pink_background{
-  @apply dark:text-black
+.notion-gray_background,
+.notion-brown_background,
+.notion-orange_background,
+.notion-yellow_background,
+.notion-blue_background,
+.notion-purple_background,
+.notion-teal_background,
+.notion-red_background,
+.notion-pink_background {
+  @apply dark:text-black;
 }
 
 .notion-bookmark:hover {
@@ -1737,7 +1741,7 @@ svg + .notion-page-title-text {
   padding: 4px 2px;
   white-space: nowrap;
   overflow: hidden;
-  @apply px-0 !important
+  @apply px-0 !important;
 }
 
 .notion-collection-header-title {
@@ -1791,7 +1795,7 @@ svg + .notion-page-title-text {
   /* fill: var(--fg-color); */
   fill: rgba(55, 53, 47);
   margin-right: 6px;
-  @apply dark:fill-gray-200
+  @apply dark:fill-gray-200;
 }
 
 .notion-collection-view-type-title {
@@ -1799,13 +1803,13 @@ svg + .notion-page-title-text {
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--fg-color);
-  @apply dark:text-gray-200
+  @apply dark:text-gray-200;
 }
 
 .notion-table {
   align-self: center;
   overflow: auto hidden;
-  @apply w-full !important
+  @apply w-full !important;
 }
 
 .notion-table-view {
@@ -1814,13 +1818,13 @@ svg + .notion-page-title-text {
   min-width: var(--notion-max-width);
   padding-left: 0;
   transition: padding 200ms ease-out;
-  @apply px-0 !important
+  @apply px-0 !important;
 }
 
 .notion-table-header {
   display: flex;
   position: absolute;
-  z-index:30;
+  z-index: 30;
   height: 33px;
   color: var(--fg-color-3);
   min-width: var(--notion-max-width);
@@ -1872,7 +1876,7 @@ svg + .notion-page-title-text {
   line-height: 120%;
   min-width: 0;
   font-size: 14px;
-  @apply dark:text-gray-200
+  @apply dark:text-gray-200;
 }
 
 .notion-collection-column-title-icon {
@@ -1883,12 +1887,11 @@ svg + .notion-page-title-text {
   min-height: 14px;
   fill: var(--fg-color-2);
   margin-right: 6px;
-  @apply dark:text-gray-200 dark:fill-gray-200
-
+  @apply dark:text-gray-200 dark:fill-gray-200;
 }
 
 .notion-collection-view-tabs-content-item-active {
-    @apply dark:border-gray-300
+  @apply dark:border-gray-300;
 }
 
 .notion-collection-column-title-body {
@@ -1947,12 +1950,12 @@ svg + .notion-page-title-text {
   padding: 7px 8px 0;
 }
 
-.notion-simple-table  {
+.notion-simple-table {
   @apply whitespace-nowrap overflow-x-auto block w-full border-0 !important;
 }
 
 .notion-asset-wrapper-pdf > div {
-    display: block !important;
+  display: block !important;
 }
 
 /* https://github.com/kchen0x */
@@ -1972,47 +1975,49 @@ svg + .notion-page-title-text {
   /* color: var(--notion-gray); */
 }
 
-.notion-asset-wrapper-pdf>div{
-    width:unset!important
+.notion-asset-wrapper-pdf > div {
+  width: unset !important;
 }
 
 /* pdf预览适配页面 */
-.react-pdf__Page__canvas,.react-pdf__Page__textContent{
-    width: 100% !important;
-    height: auto !important;
+.react-pdf__Page__canvas,
+.react-pdf__Page__textContent {
+  width: 100% !important;
+  height: auto !important;
 }
 
-
 /* simple table设置 */
-table,thead,tbody{
-    display:block
+table,
+thead,
+tbody {
+  display: block;
 }
 
-thead, tbody tr {
-    display:table;
-    width:100%;
-    table-layout:fixed;
+thead,
+tbody tr {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
 }
 
-.notion-collection-card{
-    @apply dark:text-gray-200 dark:bg-gray-800 dark:hover:bg-black
+.notion-collection-card {
+  @apply dark:text-gray-200 dark:bg-gray-800 dark:hover:bg-black;
 }
 
-.notion-code-copy{
-    display: none;
+.notion-code-copy {
+  display: none;
 }
 
-
-pre[class*="language-mermaid"] {
-    @apply bg-gray-50 dark:bg-gray-200 !important;
+pre[class*='language-mermaid'] {
+  @apply bg-gray-50 dark:bg-gray-200 !important;
 }
 
 /* mermaid 原文隐藏 */
 code.language-mermaid {
-    display:none
+  display: none;
 }
 
-.code-toolbar{
+.code-toolbar {
   @apply w-full shadow-md pb-0;
 }
 
@@ -2036,7 +2041,7 @@ code.language-mermaid {
   @apply dark:border-gray-200 !important;
 }
 
-.notion-external-image > svg > g > path{
+.notion-external-image > svg > g > path {
   @apply dark:fill-gray-200 !important;
 }
 
@@ -2049,17 +2054,16 @@ code.language-mermaid {
 }
 
 /* 表格头 */
-.notion-simple-table tr:first-child td{
+.notion-simple-table tr:first-child td {
   background-color: #f5f6f8;
   @apply text-center font-bold dark:bg-gray-800 !important;
-
 }
 
-.notion-simple-table td{
-  border: 1px solid var(#eee) !important
+.notion-simple-table td {
+  border: 1px solid var(#eee) !important;
 }
 
 /* 竖屏视频高度bug */
-figure.notion-asset-wrapper.notion-asset-wrapper-video>div {
-    height: 100% !important;
+figure.notion-asset-wrapper.notion-asset-wrapper-video > div {
+  height: 100% !important;
 }