notion-enhancer/mods/littlepig-light/app.css

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

:root {
  --theme_light--font_sans: 'JetBrains Mono';
  --theme_light--font_serif: 'JetBrains Mono';
  --theme_light--font_mono: 'JetBrains Mono';
  --theme_light--font_code: 'JetBrains Mono';

  --theme_light--selected: rgba(177, 24, 24, 0.22);
  --theme_light--primary: rgb(177, 24, 24);
  --theme_light--primary_hover: rgb(202, 26, 26);
  --theme_light--primary_click: rgb(219, 41, 41);
  --theme_light--primary_indicator: rgb(202, 26, 26);

  /* 文本颜色 */
  --theme_light--text_gray: rgba(151, 154, 155, 0.95);
  --theme_light--text_brown: rgb(167, 126, 100);
  --theme_light--text_orange: rgb(255, 134, 0);
  --theme_light--text_yellow: rgb(255, 195, 0);
  --theme_light--text_green: rgb(0, 171, 0);
  --theme_light--text_blue: rgb(0, 121, 255);
  --theme_light--text_purple: rgb(126, 0, 255);
  --theme_light--text_pink: rgb(255, 0, 208);
  --theme_light--text_red: rgb(255, 0, 0);

  /* 文本背景色 */
  --theme_light--bg_gray: rgb(234, 234, 234);
  --theme_light--bg_gray-text: rgb(17, 17, 17);
  --theme_light--bg_brown: rgb(206, 206, 206);
  --theme_light--bg_brown-text: rgb(85, 35, 1);
  --theme_light--bg_orange: rgb(254, 214, 155);
  --theme_light--bg_orange-text: rgb(199, 110, 0);
  --theme_light--bg_yellow: #fcffd8;
  --theme_light--bg_yellow-text: #ff8c22;
  --theme_light--bg_green: #d5fded;
  --theme_light--bg_green-text: #006a00;
  --theme_light--bg_blue: #e2f5ff;
  --theme_light--bg_blue-text: #00b2ff;
  --theme_light--bg_purple: #efe6ff;
  --theme_light--bg_purple-text: #8334ff;
  --theme_light--bg_pink: #ffe9f1;
  --theme_light--bg_pink-text: rgb(255, 0, 127);
  --theme_light--bg_red: rgb(248, 215, 218);
  --theme_light--bg_red-text: rgb(138, 0, 10);

  --theme_light--select_gray: rgb(234, 234, 234);
  --theme_light--select_gray-text: rgb(17, 17, 17);
  --theme_light--select_brown: rgb(206, 206, 206);
  --theme_light--select_brown-text: rgb(85, 35, 1);
  --theme_light--select_orange: rgb(254, 214, 155);
  --theme_light--select_orange-text: rgb(199, 110, 0);
  --theme_light--select_yellow: #fcffd8;
  --theme_light--select_yellow-text: #ff8c22;
  --theme_light--select_green: #d5fded;
  --theme_light--select_green-text: #006a00;
  --theme_light--select_blue: #e2f5ff;
  --theme_light--select_blue-text: #00b2ff;
  --theme_light--select_purple: #efe6ff;
  --theme_light--select_purple-text: #8334ff;
  --theme_light--select_pink: #ffe9f1;
  --theme_light--select_pink-text: rgb(255, 0, 127);
  --theme_light--select_red: rgb(248, 215, 218);
  --theme_light--select_red-text: rgb(138, 0, 10);

  /* 标题色 */
  --littlepig_light--h1_text: #008800;
  --littlepig_light--h2_text: #006a00;
  --littlepig_light--h3_text: #003e00;

  /* todo */
  --theme_light--option_active-color: #008800;
  --theme_light--option_active-background: #ffffff;

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

  /* callout 颜色 */
  --theme_light--callout_gray: #e2e3e5;
  --theme_light--callout_gray-text: #383d41;
  --theme_light--callout_brown: rgb(130, 118, 111);
  --theme_light--callout_brown-text: rgb(85, 35, 1);
  --theme_light--callout_orange: rgb(254, 214, 155);
  --theme_light--callout_orange-text: rgb(255, 140, 0);
  --theme_light--callout_yellow: #fcffd8;
  --theme_light--callout_yellow-text: #c76e00;
  --theme_light--callout_green: #d4edda;
  --theme_light--callout_green-text: #155724;
  --theme_light--callout_blue: #cce5ff;
  --theme_light--callout_blue-text: #004085;
  --theme_light--callout_purple: rgb(199, 178, 230);
  --theme_light--callout_purple-text: rgb(90, 49, 148);
  --theme_light--callout_pink: rgb(255, 206, 228);
  --theme_light--callout_pink-text: rgb(255, 0, 127);
  --theme_light--callout_red: #f8d7da;
  --theme_light--callout_red-text: #721c24;
}

/* todo 颜色 */
.notion-body:not(.dark)
  .notion-light-theme
  [style*='background: rgb(46, 170, 220)'],
.notion-body:not(.dark)
  .notion-light-theme
  [style*='background-color: rgb(46, 170, 220)'] {
  background: var(--theme_dark--option_active-background) !important;
}
.notion-body:not(.dark) [style*='background: rgb(46, 170, 220)'][role='button'],
.notion-body:not(.dark)
  [style*='background: rgb(46, 170, 220);'][style*='width: 26px'] {
  background: var(--theme_light--primary) !important;
}

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

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

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

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

/* quoteblock 样式 */
.notion-body:not(.dark) .notion-quote-block [style*='rgb(55, 53, 47);'] {
  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: var(--theme_light--card);
  border-radius: 3px;
}
.notion-body:not(.dark)
  .notion-quote-block
  [style*='caret-color: rgb(55, 53, 47);']::before {
  content: '\201C';
  font-family: Georgia, serif;
  font-size: 44px;
  font-weight: bold;
  color: #42b983;
  position: absolute;
  left: 0px;
  top: -24px;
}

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