Skip to content

Instantly share code, notes, and snippets.

@alienlebarge

alienlebarge/workflowy.css

Last active September 25, 2024 04:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save alienlebarge/ed852ce6b9ddb36098f814cf917a10c6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save alienlebarge/ed852ce6b9ddb36098f814cf917a10c6 to your computer and use it in GitHub Desktop.
Download ZIP
Custom Workflowy Style
Raw
workflowy.css
/**
* alb's Workflowy style
* More info: https://workflowy.com/s/albs-workflowy-style/WmvlNzBwLb6IAkLc
*
* TODO: Make comments and chapters easier to read
*/
:root {
/* red */
--color-red-shade-1: hsl(8.36, 99.84%, 98.32%);
--color-red-shade-2: hsl(8.16, 99.91%, 92.38%);
--color-red-shade-3: hsl(359.7, 100%, 63.73%);
--color-red-shade-4: hsl(348.63, 99.98%, 44%);
--color-red-shade-5: hsl(350.67, 99.96%, 25.69%);
--color-red-shade-6: hsl(357.65, 99.99%, 16.18%);
/* orange */
--color-orange-shade-1: hsl(17.05, 99.76%, 98.01%);
--color-orange-shade-2: hsl(17.3, 99.97%, 90.92%);
--color-orange-shade-3: hsl(18.2, 99.99%, 49.52%);
--color-orange-shade-4: hsl(17.68, 99.98%, 40.12%);
--color-orange-shade-5: hsl(17.02, 99.98%, 23.02%);
--color-orange-shade-6: hsl(20.77, 99.94%, 12.58%);
/* yellow */
--color-yellow-shade-1: hsl(46, 99.99%, 94.95%);
--color-yellow-shade-2: hsl(51.81, 100%, 62.08%);
--color-yellow-shade-3: hsl(53.34, 99.93%, 30.68%);
--color-yellow-shade-4: hsl(53.2, 99.99%, 24.58%);
--color-yellow-shade-5: hsl(52.64, 99.98%, 13.72%);
--color-yellow-shade-6: hsl(51.45, 99.93%, 8.1%);
/* green */
--color-green-shade-1: hsl(109.97, 99.98%, 92.62%);
--color-green-shade-2: hsl(117.73, 100%, 71.17%);
--color-green-shade-3: hsl(131.49, 99.86%, 31.77%);
--color-green-shade-4: hsl(130.54, 99.9%, 25.48%);
--color-green-shade-5: hsl(126.84, 99.95%, 14.25%);
--color-green-shade-6: hsl(110.87, 99.97%, 7.84%);
/* teal */
--color-teal-shade-1: hsl(167.47, 100%, 92.17%);
--color-teal-shade-2: hsl(173.64, 99.94%, 49.99%);
--color-teal-shade-3: hsl(173.43, 99.95%, 30.9%);
--color-teal-shade-4: hsl(173.28, 99.82%, 24.24%);
--color-teal-shade-5: hsl(172.72, 99.88%, 13.34%);
--color-teal-shade-6: hsl(171.81, 99.98%, 7.68%);
/* sky */
--color-sky-shade-1: hsl(196.72, 99.94%, 94.54%);
--color-sky-shade-2: hsl(195.99, 99.97%, 84.14%);
--color-sky-shade-3: hsl(190.84, 99.77%, 35.38%);
--color-sky-shade-4: hsl(191.03, 99.95%, 28.22%);
--color-sky-shade-5: hsl(191.83, 99.82%, 15.53%);
--color-sky-shade-6: hsl(193.54, 99.91%, 7.91%);
/* blue */
--color-blue-shade-1: hsl(224.63, 99.87%, 97%);
--color-blue-shade-2: hsl(223.56, 99.9%, 91.61%);
--color-blue-shade-3: hsl(207.29, 99.89%, 49.39%);
--color-blue-shade-4: hsl(207.65, 99.86%, 39.64%);
--color-blue-shade-5: hsl(209.15, 99.94%, 21.47%);
--color-blue-shade-6: hsl(212.22, 99.94%, 11.14%);
/* purple */
--color-purple-shade-1: hsl(288.22, 99.8%, 97.75%);
--color-purple-shade-2: hsl(287.36, 99.93%, 92.48%);
--color-purple-shade-3: hsl(284.08, 100%, 65.71%);
--color-purple-shade-4: hsl(284.55, 77.53%, 50.42%);
--color-purple-shade-5: hsl(285.23, 99.99%, 26.48%);
--color-purple-shade-6: hsl(284.23, 99.98%, 15.4%);
/* pink */
--color-pink-shade-1: hsl(332.82, 99.54%, 98.48%);
--color-pink-shade-2: hsl(331.79, 99.98%, 93.07%);
--color-pink-shade-3: hsl(322.24, 100%, 59.31%);
--color-pink-shade-4: hsl(319.09, 99.94%, 41.2%);
--color-pink-shade-5: hsl(319.97, 99.95%, 23.72%);
--color-pink-shade-6: hsl(321.26, 99.94%, 14.63%);
/* grey */
--color-gray-shade-1: hsl(0deg 0% 96% / 100%);
--color-gray-shade-2: hsl(0deg 0% 89% / 100%);
--color-gray-shade-3: hsl(0deg 0% 55% / 100%);
--color-gray-shade-4: hsl(0deg 0% 44% / 100%);
--color-gray-shade-5: hsl(0deg 0% 24% / 100%);
--color-gray-shade-6: hsl(0deg 0% 13% / 100%);
/* primary */
--color-primary-shade-1: hsl(154.47deg 99.98% 92.65% / 100%);
--color-primary-shade-2: hsl(161.94deg 100% 62.84% / 100%);
--color-primary-shade-3: hsl(165.15deg 99.85% 31.18% / 100%);
--color-primary-shade-4: hsl(164.85deg 99.87% 25% / 100%);
--color-primary-shade-5: hsl(163.67deg 99.87% 13.96% / 100%);
--color-primary-shade-6: hsl(161.53deg 99.95% 7.77% / 100%);
/* states */
--color-focus: hsl(51.81deg 100% 62.08% / 100%);
}
/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
--step--2: clamp(0.6944rem, 0.6577rem + 0.1836vw, 0.8rem);
--step--1: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem);
--step-0: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
--step-1: clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem);
--step-2: clamp(1.44rem, 1.2615rem + 0.8924vw, 1.9531rem);
--step-3: clamp(1.728rem, 1.4799rem + 1.2407vw, 2.4414rem);
--step-4: clamp(2.0736rem, 1.7334rem + 1.7011vw, 3.0518rem);
--step-5: clamp(2.4883rem, 2.027rem + 2.3067vw, 3.8147rem);
}
/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
--space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
--space-2xs: clamp(0.5rem, 0.4565rem + 0.2174vw, 0.625rem);
--space-xs: clamp(0.75rem, 0.6848rem + 0.3261vw, 0.9375rem);
--space-s: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
--space-m: clamp(1.5rem, 1.3696rem + 0.6522vw, 1.875rem);
--space-l: clamp(2rem, 1.8261rem + 0.8696vw, 2.5rem);
--space-xl: clamp(3rem, 2.7391rem + 1.3043vw, 3.75rem);
--space-2xl: clamp(4rem, 3.6522rem + 1.7391vw, 5rem);
--space-3xl: clamp(6rem, 5.4783rem + 2.6087vw, 7.5rem);
/* One-up pairs */
--space-3xs-2xs: clamp(0.25rem, 0.1196rem + 0.6522vw, 0.625rem);
--space-2xs-xs: clamp(0.5rem, 0.3478rem + 0.7609vw, 0.9375rem);
--space-xs-s: clamp(0.75rem, 0.5761rem + 0.8696vw, 1.25rem);
--space-s-m: clamp(1rem, 0.6957rem + 1.5217vw, 1.875rem);
--space-m-l: clamp(1.5rem, 1.1522rem + 1.7391vw, 2.5rem);
--space-l-xl: clamp(2rem, 1.3913rem + 3.0435vw, 3.75rem);
--space-xl-2xl: clamp(3rem, 2.3043rem + 3.4783vw, 5rem);
--space-2xl-3xl: clamp(4rem, 2.7826rem + 6.087vw, 7.5rem);
/* Custom pairs */
--space-s-l: clamp(1rem, 0.4783rem + 2.6087vw, 2.5rem);
}
:root {
--font-family-system: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-family-mono: "AT Name Mono Variable", "MD IO Variable", "Andale Mono", Menlo, monospace;
--font-family-sans: "AT Name Sans Variable", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
/* Typography */
body {
font-family: var(--font-family-sans);
}
body,
.page,
.pageContainer,
.header,
.boardColumn,
.help-button,
.leftBar > div {
background: var(--color-gray-shade-6) !important;
color: var(--color-gray-shade-2) !important;
}
.leftBar * {
color: var(--color-gray-shade-2) !important;
}
i,
b {
color: var(--color-gray-shade-1) !important;
}
.boardCard {
background: var(--color-gray-shade-5) !important;
border-color: var(--color-gray-shade-4) var(--color-gray-shade-4) var(--color-gray-shade-4) var(--color-gray-shade-3) !important;
}
a.contentLink {
color: var(--color-primary-shade-2) !important;
}
.contentLink,
.contentTagText {
text-underline-offset: .15em !important;
}
.contentTag {
color: var(--color-gray-shade-2) !important;
}
/* Done items */
.done .innerContentContainer,
.done .monolith-pill .content-wrapper {
color: var(--color-gray-shade-3) !important;
}
/* Date's pill background */
.monolith-pill .content-wrapper {
background-color: var(--color-gray-shade-5) !important;
}
/* colors */
/* red */
.c-red {
color: var(--color-red-shade-3) !important;
text-decoration-color: var(--color-red-shade-3) !important;
}
.bc-red {
background-color: var(--color-red-shade-4) !important;
}
/* orange */
.c-orange {
color: var(--color-orange-shade-3) !important;
text-decoration-color: var(--color-orange-shade-3) !important;
}
.bc-orange {
background-color: var(--color-orange-shade-4) !important;
}
/* yellow */
.c-yellow {
color: var(--color-yellow-shade-3) !important;
text-decoration-color: var(--color-yellow-shade-3) !important;
}
.bc-yellow {
background-color: var(--color-yellow-shade-4) !important;
}
/* green */
.c-green {
color: var(--color-green-shade-3) !important;
text-decoration-color: var(--color-green-shade-3) !important;
}
.bc-green {
background-color: var(--color-green-shade-4) !important;
}
/* teal */
.c-teal {
color: var(--color-teal-shade-3) !important;
text-decoration-color: var(--color-teal-shade-3) !important;
}
.bc-teal {
background-color: var(--color-teal-shade-4) !important;
}
/* sky */
.c-sky {
color: var(--color-sky-shade-3) !important;
text-decoration-color: var(--color-sky-shade-3) !important;
}
.bc-sky {
background-color: var(--color-sky-shade-4) !important;
}
/* blue */
.c-blue {
color: var(--color-blue-shade-3) !important;
text-decoration-color: var(--color-blue-shade-3) !important;
}
.bc-blue {
background-color: var(--color-blue-shade-4) !important;
}
/* purple */
.c-purple {
color: var(--color-purple-shade-3) !important;
text-decoration-color: var(--color-purple-shade-3) !important;
}
.bc-purple {
background-color: var(--color-purple-shade-4) !important;
}
/* pink */
.c-pink {
color: var(--color-pink-shade-3) !important;
text-decoration-color: var(--color-pink-shade-3) !important;
}
.bc-pink {
background-color: var(--color-pink-shade-4) !important;
}
/* grey */
.c-grey {
color: var(--color-grey-shade-3) !important;
text-decoration-color: var(--color-grey-shade-3) !important;
}
.bc-grey {
background-color: var(--color-grey-shade-4) !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment