notion-enhancer/repo/littilepig-dark/styles.css

/*
 * littlepig
 * (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
 * (c) 2020 Lizishan
 * under the MIT license
 */

:root {
  --theme_dark--main: #1e1c26;
  --theme_dark--sidebar: #24222c;
  --theme_dark--dragarea: #19181f;

  --theme_dark--font_sans: 'JetBrains Mono';
  --theme_dark--font_mono: 'JetBrains Mono', iawriter-mono, Nitti, Menlo,
    Courier, monospace;
  --theme_dark--font_code: 'JetBrains Mono', SFMono-Regular, Consolas,
    'Liberation Mono', Menlo, Courier, monospace;

  --theme_dark--scrollbar: #221f29;
  /* --theme_dark--scrollbar-border: transparent; */
  --theme_dark--scrollbar_hover: #312d3c;

  --theme_dark--font_title-size: 40px;
  --theme_dark--font_heading1-size: 30px;
  --theme_dark--font_heading2-size: 24px;
  --theme_dark--font_heading3-size: 20px;
  --theme_dark--font_label-size: 14px;
  --theme_dark--font_body-size: 17px;
  --theme_dark--font_code-size: 16px;
  --theme_dark--font_sidebar-size: 14px;

  /* --theme_dark--card: rgb(53, 51, 58); */
  --theme_dark--gallery: rgba(162, 162, 162, 0.01);
  --theme_dark--table-border: rgba(148, 148, 184, 0.5);
  --theme_dark--interactive_hover: #282632;
  /* --theme_dark--interactive_hover-border: transparent;
   --theme_dark--button_close: #e81123;
   --theme_dark--button_close-fill: white; */

  --theme_dark--selected: #9500ff6b;
  --theme_dark--primary: rgb(106, 47, 200);
  --theme_dark--primary_hover: rgb(110, 48, 211);
  --theme_dark--primary_click: rgb(117, 65, 200);
  --theme_dark--primary_indicator: rgb(150, 84, 226);

  --theme_dark--option_hover-background: rgb(20, 0, 51);

  --theme_dark--danger_text: rgb(235, 87, 87);
  --theme_dark--danger_border: rgba(235, 87, 87, 0.5);

  --theme_dark--text: rgba(200, 200, 200, 0.8);
  --theme_dark--text_ui: rgba(255, 255, 255, 0.6);
  --theme_dark--text_ui_info: rgba(255, 255, 255, 0.4);

  /* 文本颜色 */
  --theme_dark--text_gray: rgba(151, 154, 155, 0.95);
  --theme_dark--text_brown: rgb(177, 144, 131);
  --theme_dark--text_orange: rgb(255, 163, 68);
  --theme_dark--text_yellow: rgb(255, 220, 73);
  --theme_dark--text_green: rgb(66, 222, 137);
  --theme_dark--text_blue: rgb(0, 157, 255);
  --theme_dark--text_purple: rgb(162, 94, 255);
  --theme_dark--text_pink: rgb(226, 85, 161);
  --theme_dark--text_red: rgb(240, 52, 38);

  /* 文本背景色 */
  --theme_dark--bg_gray: rgb(234, 234, 234);
  --theme_dark--bg_gray_text: rgb(17, 17, 17);

  --theme_dark--bg_brown: rgb(130, 118, 111);
  --theme_dark--bg_brown_text: rgb(85, 35, 1);

  --theme_dark--bg_orange: rgb(254, 214, 155);
  --theme_dark--bg_yellow_text: rgb(199, 110, 0);

  --theme_dark--bg_yellow: rgb(235, 227, 178);
  --theme_dark--bg_yellow_text: rgb(138, 118, 2);

  --theme_dark--bg_green: rgb(212, 237, 218);
  --theme_dark--bg_green_text: rgb(21, 87, 36);

  --theme_dark--bg_blue: rgb(204, 229, 255);
  --theme_dark--bg_blue_text: rgb(0, 64, 133);

  --theme_dark--bg_purple: rgb(199, 178, 230);
  --theme_dark--bg_purple_text: rgb(90, 49, 148);

  --theme_dark--bg_pink: rgb(255, 206, 228);
  --theme_dark--bg_pink_text: rgb(255, 0, 127);

  --theme_dark--bg_red: rgb(248, 215, 218);
  --theme_dark--bg_red_text: rgb(138, 0, 10);

  --theme_dark--select_gray: var(--theme_dark--bg_gray);
  --theme_dark--select_brown: var(--theme_dark--bg_brown);
  --theme_dark--select_orange: var(--theme_dark--bg_orange);
  --theme_dark--select_yellow: var(--theme_dark--bg_yellow);
  --theme_dark--select_green: var(--theme_dark--bg_green);
  --theme_dark--select_blue: var(--theme_dark--bg_blue);
  --theme_dark--select_purple: var(--theme_dark--bg_purple);
  --theme_dark--select_pink: var(--theme_dark--bg_pink);
  --theme_dark--select_red: var(--theme_dark--bg_red);

  --theme_dark--line_gray: rgb(69, 75, 78);
  --theme_dark--line_brown: rgb(78, 57, 48);
  --theme_dark--line_orange: rgb(136, 80, 48);
  --theme_dark--line_yellow: #fbe2287c;
  --theme_dark--line_red: rgb(151, 62, 62);

  --theme_dark--code_inline-text: #d9cbec;
  --theme_dark--code_inline-background: rgba(135, 131, 120, 0.15);
  --theme_dark--code_text: var(--theme_dark--text);
  --theme_dark--code-background: rgb(63, 68, 71);
  --theme_dark--code_function: rgb(179, 146, 240);
  --theme_dark--code_keyword: hsl(350, 100%, 69%);
  --theme_dark--code_tag: hsl(350, 40%, 70%);
  --theme_dark--code_operator: hsl(40, 90%, 60%);
  --theme_dark--code_important: #e90;
  --theme_dark--code_property: hsl(350, 40%, 70%);
  --theme_dark--code_builtin: hsl(75, 70%, 60%);
  --theme_dark--code_attr-name: hsl(75, 70%, 60%);
  --theme_dark--code_comment: hsl(30, 20%, 50%);
  --theme_dark--code_punctuation: rgba(255, 255, 255, 0.9);
  --theme_dark--code_doctype: hsl(30, 20%, 50%);
  --theme_dark--code_number: hsl(159, 69%, 39%);
  --theme_dark--code_string: hsl(75, 95%, 48%);
  --theme_dark--code_attr-value: hsl(350, 40%, 70%);

  /* 标题色 */
  --theme_dark--h1_text: #c264fe;
  --theme_dark--h2_text: #e2bafe;
  --theme_dark--h3_text: #7b08fa;

  /* todo */
  --theme_dark--option_active-color: #7b08fa;
  --theme_dark--option_active-background: #1d1c26;

  /* inline code */
  --theme_dark--code_inline-text: #e0dfe2;
  --theme_dark--code_inline-background: rgb(179, 39, 39);

  /* 标签颜色 + 文本背景色 */
  --theme_dark--bg_gray: rgb(234, 234, 234);
  --theme_dark--bg_gray_text: rgb(17, 17, 17);

  --theme_dark--bg_brown: rgb(206, 206, 206);
  --theme_dark--bg_brown_text: rgb(85, 35, 1);

  --theme_dark--bg_orange: rgb(254, 214, 155);
  --theme_dark--bg_orange_text: rgb(199, 110, 0);

  --theme_dark--bg_yellow: #fcffd8;
  --theme_dark--bg_yellow_text: #ff8c22;

  --theme_dark--bg_green: #d5fded;
  --theme_dark--bg_green_text: #006a00;

  --theme_dark--bg_blue: #e2f5ff;
  --theme_dark--bg_blue_text: #00b2ff;

  --theme_dark--bg_purple: #efe6ff;
  --theme_dark--bg_purple_text: #8334ff;

  --theme_dark--bg_pink: #ffe9f1;
  --theme_dark--bg_pink_text: rgb(255, 0, 127);

  --theme_dark--bg_red: rgb(251, 228, 228);
  --theme_dark--bg_red_text: rgb(138, 0, 10);

  /* callout 颜色 */

  --theme_dark--callout_bg_gray: #e2e3e5;
  --theme_dark--callout_text_gray: #383d41;

  --theme_dark--callout_bg_brown: rgb(130, 118, 111);
  --theme_dark--callout_text_brown: rgb(85, 35, 1);

  --theme_dark--callout_bg_orange: rgb(254, 214, 155);
  --theme_dark--callout_text_orange: rgb(255, 140, 0);

  --theme_dark--callout_bg_yellow: #fcffd8;
  --theme_dark--callout_text_yellow: #c76e00;

  --theme_dark--callout_bg_green: #d4edda;
  --theme_dark--callout_text_green: #155724;

  --theme_dark--callout_bg_blue: #cce5ff;
  --theme_dark--callout_text_blue: #004085;

  --theme_dark--callout_bg_purple: rgb(199, 178, 230);
  --theme_dark--callout_text_purple: rgb(90, 49, 148);

  --theme_dark--callout_bg_pink: rgb(255, 206, 228);
  --theme_dark--callout_text_pink: rgb(255, 0, 127);

  --theme_dark--callout_bg_red: #f8d7da;
  --theme_dark--callout_text_red: #721c24;
}

.notion-dark-theme
  .notion-scroller.vertical.horizontal
  .notion-table-view
  .notion-selectable.notion-collection_view-block
  > :first-child {
  background: var(--theme--card) !important;
}

/* todo 颜色 */
.dark [style*='background: rgb(46, 170, 220)'],
.dark [style*='background-color: rgb(46, 170, 220)'] {
  background: var(--theme_dark--option_active-background) !important;
}
.notion-to_do-block > div [role='button']:not(:hover) .check {
  background: var(--theme_dark--option_active-background) !important;
}

.notion-to_do-block > div [role='button']:not(:hover) .check polygon {
  fill: var(--theme_dark--option_active-color) !important;
}

/*================================= 标签颜色 + 文本背景色 ===============================**/

/* 灰色 */
.dark [style*='background: rgba(151, 154, 155, 0.5)'] {
  display: inline-block;
  border-radius: 4px !important;
  padding: 10px 0.4em !important;
  font-weight: 500 !important;
  background: var(--theme_dark--bg_gray) !important;
  color: var(--theme_dark--bg_gray_text) !important;
}
.dark [style*='background:rgb(69,75,78)'] {
  display: inline-block;
  border-radius: 4px !important;
  padding: 0 0.4em !important;
  margin: 2px 0 !important;
  font-weight: 500 !important;
  background: var(--theme_dark--bg_gray) !important;
  color: var(--theme_dark--bg_gray_text) !important;
}

/* 棕色 */
.dark [style*='background: rgba(147, 114, 100, 0.5)'] {
  display: inline-block;
  border-radius: 4px !important;
  padding: 10px 0.4em !important;
  font-weight: 500 !important;
  background: var(--theme_dark--bg_brown) !important;
  color: var(--theme_dark--bg_brown_text) !important;
}
.dark [style*='background:rgb(67,64,64)'] {
  display: inline-block;
  border-radius: 4px !important;
  padding: 0 0.4em !important;
  margin: 2px 0 !important;
  font-weight: 500 !important;
  background: var(--theme_dark--bg_brown) !important;
  color: var(--theme_dark--bg_brown_text) !important;
}

/* 橘黄色 */
.dark [style*='background: rgba(255, 163, 68, 0.5)'] {
  display: inline-block;
  border-radius: 4px !important;
  padding: 10px 0.4em !important;
  font-weight: 500 !important;
  background: var(--theme_dark--bg_orange) !important;
  color: var(--theme_dark--bg_orange_text) !important;
}

.dark [style*='background:rgb(89,74,58)'] {
  display: inline-block;
  border-radius: 4px !important;
  padding: 0 0.4em !important;
  margin: 2px 0 !important;
  font-weight: 500 !important;
  background: var(--theme_dark--bg_orange) !important;
  color: var(--theme_dark--bg_orange_text) !important;
}

/* 黄色 */
.dark [style*='background: rgba(255, 220, 73, 0.5)'] {
  display: inline-block;
  border-radius: 4px !important;
  padding: 10px 0.4em !important;
  font-weight: 500 !important;
  background: var(--theme_dark--bg_yellow) !important;
  color: var(--theme_dark--bg_yellow_text) !important;
}
.dark [style*='background:rgb(89,86,59)'] {
  display: inline-block;
  border-radius: 4px !important;
  padding: 0 0.4em !important;
  margin: 2px 0 !important;
  font-weight: 500 !important;
  background: var(--theme_dark--bg_yellow) !important;
  color: var(--theme_dark--bg_yellow_text) !important;
}

/* 绿色 */
.dark [style*='background: rgba(77, 171, 154, 0.5)'] {
  display: inline-block;
  border-radius: 4px !important;
  padding: 10px 0.4em !important;
  font-weight: 500 !important;
  background: var(--theme_dark--bg_green) !important;
  color: var(--theme_dark--bg_green_text) !important;
}
.dark [style*='background:rgb(53,76,75)'] {
  display: inline-block;
  border-radius: 4px !important;
  padding: 0 0.4em !important;
  margin: 2px 0 !important;
  font-weight: 500 !important;
  background: var(--theme_dark--bg_green) !important;
  color: var(--theme_dark--bg_green_text) !important;
}

/*  蓝色 */
.dark [style*='background: rgba(82, 156, 202, 0.5)'] {
  display: inline-block;
  border-radius: 4px !important;
  padding: 10px 0.4em !important;
  font-weight: 500 !important;
  background: var(--theme_dark--bg_blue) !important;
  color: var(--theme_dark--bg_blue_text) !important;
}
.dark [style*='background:rgb(54,73,84)'] {
  display: inline-block;
  border-radius: 4px !important;
  padding: 0 0.4em !important;
  margin: 2px 0 !important;
  font-weight: 500 !important;
  background: var(--theme_dark--bg_blue) !important;
  color: var(--theme_dark--bg_blue_text) !important;
}

/*  紫色 */
.dark [style*='background: rgba(154, 109, 215, 0.5)'] {
  display: inline-block;
  border-radius: 4px !important;
  padding: 10px 0.4em !important;
  font-weight: 500 !important;
  background: var(--theme_dark--bg_purple) !important;
  color: var(--theme_dark--bg_purple_text) !important;
}
.dark [style*='background:rgb(68,63,87)'] {
  display: inline-block;
  border-radius: 4px !important;
  padding: 0 0.4em !important;
  margin: 2px 0 !important;
  font-weight: 500 !important;
  background: var(--theme_dark--bg_purple) !important;
  color: var(--theme_dark--bg_purple_text) !important;
}

/*  粉红色 */
.dark [style*='background: rgba(226, 85, 161, 0.5)'] {
  display: inline-block;
  border-radius: 4px !important;
  padding: 10px 0.4em !important;
  font-weight: 500 !important;
  background: var(--theme_dark--bg_pink) !important;
  color: var(--theme_dark--bg_pink_text) !important;
}
.dark [style*='background:rgb(83,59,76)'] {
  display: inline-block;
  border-radius: 4px !important;
  padding: 0 0.4em !important;
  margin: 2px 0 !important;
  font-weight: 500 !important;
  background: var(--theme_dark--bg_pink) !important;
  color: var(--theme_dark--bg_pink_text) !important;
}

/* 红色 */
.dark [style*='background: rgba(255, 115, 105, 0.5);'] {
  display: inline-block;
  border-radius: 4px !important;
  padding: 10px 0.4em !important;
  font-weight: 500 !important;
  background: var(--theme_dark--bg_red) !important;
  color: var(--theme_dark--bg_red_text) !important;
}
.dark [style*='background:rgb(89,65,65)'] {
  display: inline-block;
  border-radius: 4px !important;
  padding: 0 0.4em !important;
  margin: 2px 0 !important;
  font-weight: 500 !important;
  background: var(--theme_dark--bg_red) !important;
  color: var(--theme_dark--bg_red_text) !important;
}

/* -----------------------------callout 样式 start------------------------ */

/* notion-callout-block gray */
.notion-dark-theme
  .notion-callout-block
  [style*='background: rgba(69, 75, 78, 0.3)'] {
  /* color: var(--theme_dark--callout_text_gray) !important; */
  background: var(--theme_dark--callout_bg_gray) !important;
  border-radius: 3px !important;
}

.notion-dark-theme
  .notion-callout-block
  [style*='background: rgba(69, 75, 78, 0.3)']
  [style*='color: rgba(255, 255, 255, 0.9)'] {
  color: var(--theme_dark--callout_text_gray) !important;
}

/* notion-callout-block brown */
.notion-dark-theme
  .notion-callout-block
  [style*='background: rgba(67, 64, 64, 0.3)'] {
  /* color: var(--theme_dark--callout_text_brown) !important; */
  background: var(--theme_dark--callout_bg_brown) !important;
  border-radius: 3px !important;
}

.notion-dark-theme
  .notion-callout-block
  [style*='background: rgba(67, 64, 64, 0.3)']
  [style*='color: rgba(255, 255, 255, 0.9)'] {
  color: var(--theme_dark--callout_text_brown) !important;
}

/* notion-callout-block orange */
.notion-dark-theme
  .notion-callout-block
  [style*='background: rgba(89, 74, 58, 0.3)'] {
  /* color: var(--theme_dark--callout_text_orange) !important; */
  background: var(--theme_dark--callout_bg_orange) !important;
  border-radius: 3px !important;
}

.notion-dark-theme
  .notion-callout-block
  [style*='background: rgba(89, 74, 58, 0.3)']
  [style*='color: rgba(255, 255, 255, 0.9)'] {
  color: var(--theme_dark--callout_text_orange) !important;
}

/* notion-callout-block yellow */
.notion-dark-theme
  .notion-callout-block
  [style*='background: rgba(89, 86, 59, 0.3)'] {
  /* color: var(--theme_dark--callout_text_yellow) !important; */
  background: var(--theme_dark--callout_bg_yellow) !important;
  border-radius: 3px !important;
}

.notion-dark-theme
  .notion-callout-block
  [style*='background: rgba(89, 86, 59, 0.3)']
  [style*='color: rgba(255, 255, 255, 0.9)'] {
  color: var(--theme_dark--callout_text_yellow) !important;
}

/* notion-callout-block green */
.notion-dark-theme
  .notion-callout-block
  [style*='background: rgba(53, 76, 75, 0.3)'] {
  /* color: var(--theme_dark--callout_text_green) !important; */
  background: var(--theme_dark--callout_bg_green) !important;
  border-radius: 3px !important;
}

.notion-dark-theme
  .notion-callout-block
  [style*='background: rgba(53, 76, 75, 0.3)']
  [style*='color: rgba(255, 255, 255, 0.9)'] {
  color: var(--theme_dark--callout_text_green) !important;
}

/* notion-callout-block blue */
.notion-dark-theme
  .notion-callout-block
  [style*='background: rgba(54, 73, 84, 0.3)'] {
  /* color: var(--theme_dark--callout_text_blue) !important; */
  background: var(--theme_dark--callout_bg_blue) !important;
  border-radius: 3px !important;
}

.notion-dark-theme
  .notion-callout-block
  [style*='background: rgba(54, 73, 84, 0.3)']
  [style*='color: rgba(255, 255, 255, 0.9)'] {
  color: var(--theme_dark--callout_text_blue) !important;
}

/* notion-callout-block purple */
.notion-dark-theme
  .notion-callout-block
  [style*='background: rgba(68, 63, 87, 0.3)'] {
  /* color: var(--theme_dark--callout_text_purple) !important; */
  background: var(--theme_dark--callout_bg_purple) !important;
  border-radius: 3px !important;
}

.notion-dark-theme
  .notion-callout-block
  [style*='background: rgba(68, 63, 87, 0.3)']
  [style*='color: rgba(255, 255, 255, 0.9)'] {
  color: var(--theme_dark--callout_text_purple) !important;
}

/* notion-callout-block pink */
.notion-dark-theme
  .notion-callout-block
  [style*='background: rgba(83, 59, 76, 0.3)'] {
  /* color: var(--theme_dark--callout_text_pink) !important; */
  background: var(--theme_dark--callout_bg_pink) !important;
  border-radius: 3px !important;
}

.notion-dark-theme
  .notion-callout-block
  [style*='background: rgba(83, 59, 76, 0.3)']
  [style*='color: rgba(255, 255, 255, 0.9)'] {
  color: var(--theme_dark--callout_text_pink) !important;
}

/* notion-callout-block red */
.notion-dark-theme
  .notion-callout-block
  [style*='background: rgba(89, 65, 65, 0.3)'] {
  /* color: var(--theme_dark--callout_text_red) !important; */
  background: var(--theme_dark--callout_bg_red) !important;
  border-radius: 3px !important;
}

.notion-dark-theme
  .notion-callout-block
  [style*='background: rgba(89, 65, 65, 0.3)']
  [style*='color: rgba(255, 255, 255, 0.9)'] {
  color: var(--theme_dark--callout_text_red) !important;
}

/* -----------------------------callout 样式 end---------------------------- */

/* ===================== header =========================== */
.notion-dark-theme [placeholder*='Heading 1'] {
  color: var(--theme_dark--h1_text) !important;
}

.notion-dark-theme [placeholder*='Heading 2'] {
  margin-bottom: 16px;
  border-bottom: 4px solid var(--theme_dark--h2_text);
  display: inline-block;
  color: var(--theme_dark--h2_text) !important;
  width: auto !important;
  padding: 6px 12px 6px 0 !important;
  position: relative;
}

.notion-dark-theme [placeholder*='Heading 2']::before {
  content: '🔥 ';
}

.notion-dark-theme [placeholder*='Heading 3'] {
  width: fit-content !important;
  padding: 4px 10px !important;
  border-radius: 10px;
  border: 2px solid var(--theme_dark--h3_text);
  color: var(--theme_dark--h3_text) !important;
  background-color: #fbf8e7;
  display: inline-block;
  margin-bottom: 14px;
}

.notion-dark-theme [placeholder*='Heading 3']::before {
  content: '📌 ';
}

/* list 样式 */
.notion-dark-theme
  [style*='font-size: 1.5em; line-height: 1; margin-bottom: 0.1em;'] {
  color: #a830fd !important;
}

/* quoteblock 样式 */
.notion-dark-theme
  .notion-quote-block
  [style*='caret-color: rgba(255, 255, 255, 0.9);'] {
  font-size: 0.85em !important;
  border-left: none !important;
  padding: 0.5em 0.5em 0.5em 1.9em !important;
  position: relative;
  margin: 10px 0;
  background: #9494942e;
  border-radius: 3px;
}

.notion-dark-theme
  .notion-quote-block
  [style*='caret-color: rgba(255, 255, 255, 0.9);']::before {
  content: '\201C';
  font-family: Georgia, serif;
  font-size: 44px;
  font-weight: bold;
  color: #7b08fa;
  position: absolute;
  left: 0px;
  top: -24px;
}

/* link style */
.notion-dark-theme .notion-link-token span {
  border-bottom: 0.05em solid;
  border-color: rgb(233, 51, 38) !important;
  border-width: 3px !important;
  opacity: 1 !important;
}

.notion-dark-theme .notion-link-token span:hover {
  color: rgb(233, 51, 38) !important;
}

/* code */
.dark [style*='color:#EB5757'] {
  color: var(--theme_dark--code_inline-text) !important;
  background: var(--theme_dark--code_inline-background) !important;
}