feat(readwise): init

scripts/userstyles.yml

@@ -138,6 +138,8 @@ collaborators:
     url: https://github.com/stellophiliac
   - &neongamerbot
     url: https://github.com/NeonGamerBot-QK
+  - &goooseman
+    url: https://github.com/goooseman
 
 userstyles:
   advent-of-code:
@@ -770,6 +772,13 @@ userstyles:
     readme:
       app-link: "https://app.raindrop.io"
     current-maintainers: [*thismoon]
+  readwise:
+    name: Readwise
+    categories: [note_taking, education]
+    color: blue
+    readme:
+      app-link: "https://readwise.io"
+    current-maintainers: [*goooseman]
   reddit:
     name: Reddit
     categories: [discussion_forum, social_networking, entertainment]

styles/readwise/catppuccin.user.css

@@ -0,0 +1,297 @@
+/* ==UserStyle==
+@name Readwise Catppuccin
+@namespace github.com/catppuccin/userstyles/styles/readwise
+@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/readwise
+@version 0.0.1
+@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/readwise/catppuccin.user.css
+@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Areadwise
+@description Soothing pastel theme for Readwise
+@author Catppuccin
+@license MIT
+
+@preprocessor less
+@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
+@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
+@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
+==/UserStyle== */
+
+@-moz-document url-prefix('https://readwise.io/')
+{
+  @media (prefers-color-scheme: light) {
+    :root {
+      #catppuccin(@lightFlavor, @accentColor);
+    }
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      #catppuccin(@darkFlavor, @accentColor);
+    }
+  }
+
+  :root.theme--dark {
+    #catppuccin(@darkFlavor, @accentColor);
+    .readwise-header-logo {
+      filter: none;
+    }
+  }
+  :root.theme--light {
+    #catppuccin(@lightFlavor, @accentColor);
+  }
+
+  #catppuccin(@lookup, @accent) {
+    @rosewater: @catppuccin[@@lookup][@rosewater];
+    @flamingo: @catppuccin[@@lookup][@flamingo];
+    @pink: @catppuccin[@@lookup][@pink];
+    @mauve: @catppuccin[@@lookup][@mauve];
+    @red: @catppuccin[@@lookup][@red];
+    @maroon: @catppuccin[@@lookup][@maroon];
+    @peach: @catppuccin[@@lookup][@peach];
+    @yellow: @catppuccin[@@lookup][@yellow];
+    @green: @catppuccin[@@lookup][@green];
+    @teal: @catppuccin[@@lookup][@teal];
+    @sky: @catppuccin[@@lookup][@sky];
+    @sapphire: @catppuccin[@@lookup][@sapphire];
+    @blue: @catppuccin[@@lookup][@blue];
+    @lavender: @catppuccin[@@lookup][@lavender];
+    @text: @catppuccin[@@lookup][@text];
+    @subtext1: @catppuccin[@@lookup][@subtext1];
+    @subtext0: @catppuccin[@@lookup][@subtext0];
+    @overlay2: @catppuccin[@@lookup][@overlay2];
+    @overlay1: @catppuccin[@@lookup][@overlay1];
+    @overlay0: @catppuccin[@@lookup][@overlay0];
+    @surface2: @catppuccin[@@lookup][@surface2];
+    @surface1: @catppuccin[@@lookup][@surface1];
+    @surface0: @catppuccin[@@lookup][@surface0];
+    @base: @catppuccin[@@lookup][@base];
+    @mantle: @catppuccin[@@lookup][@mantle];
+    @crust: @catppuccin[@@lookup][@crust];
+    @accent-color: @catppuccin[@@lookup][@@accent];
+
+    color-scheme: if(@lookup = latte, light, dark);
+
+    ::selection {
+      background-color: fade(@accent-color, 30%);
+    }
+
+    input,
+    textarea {
+      &::placeholder {
+        color: @subtext0 !important;
+      }
+    }
+
+    /* General theming */
+    body {
+      background-color: @base;
+    }
+
+    /* Text colors */
+    --text: @text;
+    --text-strong: @text;
+    --text-dark-grey: @subtext0;
+    --text-grey: @accent-color;
+    --text-light-grey: @subtext1;
+
+    /* Background colors */
+    --body-background: @base;
+    --card-background: @surface0;
+    --box-background: @surface0;
+    --input-background-color: @surface0;
+    --input-border-color: @surface1;
+    --input-placeholder-color: @subtext0;
+    --scrollbar-color: @overlay0;
+
+    /* Table colors */
+    --grey-dark: @surface1;
+    --grey-lightest: @surface2;
+
+    .card-content,
+    .standard-modal-content {
+      background-color: var(--card-background);
+    }
+
+    /* Placeholder colors */
+    --subscribe-modal-input-bg: @surface1;
+    --subscribe-modal-input-color: @text;
+    --subscribe-modal-input-color-placeholder: @overlay1;
+
+    /* Replacing colors specifically for theming correctness */
+    --primary: @accent-color;
+    --primary-dark: mix(@accent-color, @mantle, 10%);
+    --secondary-orange: @peach;
+    --beta-purple: @mauve;
+    --red: @red;
+    --background-interactive: @blue;
+    --secondary-button-background-hover: fade(@surface2, 70%);
+    --is-white-button-background-hover: fade(@surface1, 90%);
+    --is-transparent-button-background-hover: fade(@surface1, 10%);
+    --subscribe-modal-purchase-btn-background: @blue;
+    --subscribe-modal-plan-border-color: @surface2;
+    --subscribe-modal-form-invalid: @red;
+    --subscribe-modal-label-color: @overlay1;
+    --subscribe-modal-input-color-border: @overlay0;
+    --subscribe-modal-input-color-border-focus: fade(@blue, 50%);
+    --subscribe-modal-input-color-border-focus-box-shadow: 0px 1px 1px
+        rgba(0, 0, 0, 0.03),
+      0px 3px 6px rgba(0, 0, 0, 0.02), 0 0 0 3px fade(@blue, 25%),
+      0 1px 1px 0 rgba(0, 0, 0, 0.08);
+
+    @accent-gradient-from-color: fade(@accent-color, 85);
+    @accent-gradient-to-color: fade(@accent-color, 100);
+
+    --primary-gradient: linear-gradient(
+      180deg,
+      @accent-gradient-from-color 0%,
+      @accent-gradient-to-color 50%
+    );
+
+    .select select:focus,
+    .textarea:focus,
+    .input:focus,
+    .select select.is-focused,
+    .is-focused.textarea,
+    .is-focused.input,
+    .select select:active,
+    .textarea:active,
+    .input:active,
+    .select select.is-active,
+    .is-active.textarea,
+    .is-active.input {
+      border-color: @accent-color;
+    }
+
+    .readwise-header-logo,
+    [alt="readwise logo"] {
+      @svg: escape(
+        '<svg width="1858" height="304" viewBox="0 0 1858 304" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M268.123 254.817c11.234 17.498 20.397 23.297 39.139 25.419v17.499H214.85l-86.613-135.33h-21.64v88.684c0 23.711 6.264 27.077 32.874 29.147v17.499H0v-17.499c26.662-2.07 32.875-5.436 32.875-29.147V52.909c0-24.125-5.436-27.076-32.875-29.147V6.264h143.665c86.613 0 136.986 17.084 136.986 77.035 0 45.403-28.733 67.044-76.207 74.499zM119.074 34.583c-7.507 0-12.477 5.021-12.477 12.476v87.028h35.825c37.068 0 59.123-12.477 59.123-50.788 0-38.725-22.055-48.716-57.88-48.716zm251.911 166.965c0 49.131 15.013 74.55 51.615 74.55 24.126 0 46.646-16.67 61.194-46.231l22.883 12.89c-17.913 36.654-44.109 61.194-91.998 61.194-68.7 0-109.495-42.866-109.495-102.403 0-59.123 41.624-101.99 102.817-101.99 59.951 0 92.826 34.998 92.826 91.17h-129.48c-.362 3.727-.362 7.455-.362 10.82m69.528-37.483c0-24.539-12.477-39.553-31.218-39.553-22.883 0-32.874 13.305-36.654 39.553zm141.55 139.053c-34.117 0-56.223-19.156-56.223-47.474 0-49.545 62.436-66.216 121.973-77.036v-19.569c0-25.834-3.728-34.998-22.055-34.998-15.842 0-24.539 8.336-30.804 27.905-5.85 17.499-17.498 25.006-32.46 25.006-13.72 0-23.711-8.336-23.711-25.834 0-30.804 39.139-51.616 93.705-51.616 42.453 0 79.521 15.842 79.521 62.436v96.191c0 11.234 4.141 15.842 11.234 15.842 2.899 0 7.093-.415 12.063-2.9v21.227c-11.649 7.092-24.126 10.406-42.867 10.406-21.64 0-38.724-6.265-43.28-25.834-17.551 13.357-41.262 26.248-67.096 26.248m65.801-100.333c-33.703 6.679-56.223 16.671-56.223 39.553 0 15.428 10.406 22.469 22.883 22.469s23.297-5.022 33.289-12.063v-49.959zM936.437 0h23.711v261.91c0 12.477 4.141 16.256 23.297 18.327v17.499c-29.562 0-58.294 1.656-87.442 6.264v-19.569C883.527 296.907 865.614 304 842.317 304c-52.03 0-88.684-39.967-88.684-102.403 0-62.022 36.654-101.99 88.684-101.99 23.297 0 41.21 7.507 53.686 19.57V63.782c0-8.75-2.899-12.477-10.406-12.477H873.12V35.05zm-40.434 146.564c-7.506-11.648-18.741-17.499-32.874-17.499-30.804 0-43.695 23.297-43.695 72.428s12.891 72.428 43.695 72.428c14.133 0 25.419-5.436 32.874-17.084zm218.217 151.12h-45.41l-54.56-145.321c-6.27-17.913-9.99-27.077-25.836-29.148v-17.498h109.906v17.498c-19.98 2.071-23.71 7.507-15.84 29.148l27.49 74.136 28.32-76.621c-6.26-15.842-11.23-24.54-22.47-26.663v-17.498h108.26v17.498c-19.99 2.071-25.01 7.093-17.09 29.148l27.08 73.256 27.49-73.256c7.92-21.641 0-27.077-19.16-29.148v-17.498h77.04v17.498c-14.55 2.071-20.4 9.992-27.49 29.148l-53.69 145.321h-44.99l-40.38-107.839zm210.66-17.446c18.74-2.071 23.29-5.85 23.29-18.327v-98.676c0-8.749-2.9-12.477-10.4-12.477h-12.89v-16.256l63.67-34.997h23.3v162.354c0 12.477 4.14 16.256 23.3 18.327v17.499h-110.33v-17.447zm93.7-241.098c0 17.084-13.72 34.117-37.07 34.117-24.12 0-37.06-17.084-37.06-34.117 0-17.499 12.89-34.997 37.06-34.997 23.3.051 37.07 17.498 37.07 34.997m218.99 196.106c0 43.695-37.89 68.7-86.2 68.7-25.42 0-51.61-9.163-64.56-17.913l-4.97 11.649H1466l-15.01-68.286 14.13-3.728c21.64 35.412 55.4 53.687 84.13 53.687 17.08 0 29.98-7.921 29.98-22.469 0-16.256-20.4-22.883-45.82-30.389-33.71-10.406-75.8-24.126-75.8-65.387 0-36.24 35.83-61.608 80.35-61.608 27.91 0 44.11 8.335 56.64 17.084l4.97-10.82H1615l12.48 60.78-15.43 4.555c-17.91-31.632-44.99-48.302-67.46-48.302-16.26 0-25 7.921-25 19.155 0 15.014 18.32 21.226 42.03 28.319 38.47 12.115 75.95 25.006 75.95 64.973m84.13-33.698c0 49.131 15.01 74.55 51.62 74.55 24.12 0 46.64-16.67 61.19-46.231l22.88 12.89c-17.91 36.654-44.11 61.194-92 61.194-68.7 0-109.49-42.866-109.49-102.403 0-59.123 41.62-101.99 102.82-101.99 59.95 0 92.82 34.998 92.82 91.17h-129.48c-.36 3.727-.36 7.455-.36 10.82m69.53-37.483c0-24.539-12.48-39.553-31.22-39.553-22.88 0-32.87 13.305-36.65 39.553z" fill="@{accent-color}"/></svg>'
+      );
+      content: url("data:image/svg+xml,@{svg}");
+    }
+
+    .streak-icon {
+      @svg: escape(
+        '<svg width="39" height="49" viewBox="0 0 39 49" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M26.2 7.775 9.376 24.488l8.949 3.061-5.583 13.07 16.825-16.713-8.949-3.062z" fill="@{accent-color}"/></svg>'
+      );
+      content: url("data:image/svg+xml,@{svg}");
+    }
+
+    .source-beta-flag img {
+      @svg: escape(
+        '<svg xmlns="http://www.w3.org/2000/svg" width="70" height="71" viewBox="0 0 70 71" fill="none"><path d="M0 1.053 59.856.626c5.579-.04 10.111 4.492 10.071 10.07L69.5 70.554z" fill="@{blue}"/></svg>'
+      );
+      content: url("data:image/svg+xml,@{svg}");
+    }
+
+    .statistics__tile-main-text {
+      color: var(--text-grey);
+    }
+
+    .statistics__tile {
+      color: @text;
+    }
+
+    a {
+      color: @text;
+    }
+
+    .statistics__day {
+      color: @text;
+      border-color: @base;
+    }
+
+    .statistics__day.statistics__day--reviewed {
+      color: @accent-color;
+    }
+
+    .statistics__day.statistics__day--future {
+      color: @base;
+    }
+    .statistics__day--recoverable::after,
+    .statistics__legend-icon--recoverable::after {
+      border-color: @peach;
+    }
+    .statistics__day--recoverable,
+    .statistics__legend-icon--recoverable {
+      color: @text;
+    }
+
+    .statistics__table th {
+      color: @text;
+    }
+
+    .book-gallery-card .book-gallery-card-footer {
+      background: @surface2;
+    }
+
+    .book-gallery-card-content {
+      border-color: @surface1;
+    }
+    .statistics__legend-item,
+    .statistics__legend-suffix {
+      border-color: @base;
+    }
+    .statistics__highlights-week {
+      color: @accent-color;
+      border-color: @base;
+    }
+
+    .statistics__legend-icon--intensity-0,
+    .statistics__highlights-week--intensity-0 {
+      color: @overlay0;
+    }
+
+    .statistics__legend-icon--intensity-1,
+    .statistics__legend-icon--intensity-2,
+    .statistics__legend-icon--intensity-3,
+    .statistics__legend-icon--intensity-4 {
+      color: @accent-color;
+    }
+
+    .statistics__most-highlighted-contents--empty {
+      color: @surface1;
+    }
+
+    .signup-with-amazon {
+      /* brand color */
+      color: black !important;
+    }
+
+    .tile.is-primary {
+      background-image: none;
+      background-color: @surface2;
+    }
+    .button.is-white:hover,
+    .button.is-text:hover,
+    .button.is-black-text:hover,
+    .button.is-text:focus,
+    .button.is-black-text:focus,
+    .button.is-text:active,
+    .button.is-black-text:active {
+      color: @accent-color;
+    }
+
+    .button.has-arrow.is-white .button-arrow,
+    .button.has-arrow.is-white .button-arrow-hover,
+    .button.has-arrow .button-arrow {
+      filter: none;
+
+      & > path {
+        stroke: @accent-color;
+      }
+    }
+
+    .themed-review-carousel .button.is-white {
+      color: @accent-color;
+    }
+  }
+}
+
+/* prettier-ignore */
+@catppuccin: {
+  @latte:     { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; };
+  @frappe:    { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; };
+  @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; };
+  @mocha:     { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; };
+}
+
+// vim:ft=less