From 662c461c94b309df021adcb53cfe86a5e87066a7 Mon Sep 17 00:00:00 2001 From: ashastral Date: Wed, 18 Sep 2024 21:33:04 -0700 Subject: [PATCH] even more CSS --- cohost-wc.css | 203 ++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 195 insertions(+), 8 deletions(-) diff --git a/cohost-wc.css b/cohost-wc.css index 229a0c1..d0837f1 100644 --- a/cohost-wc.css +++ b/cohost-wc.css @@ -142,7 +142,42 @@ cohost-post p, cohost-post pre { margin: 0; } -.prose { +cohost-post img, +cohost-post video { + max-width: 100%; + height: auto; +} +cohost-post img, +cohost-post svg, +cohost-post video, +cohost-post canvas, +cohost-post audio, +cohost-post iframe, +cohost-post embed, +cohost-post object { + display: block; +} +cohost-post button, +cohost-post input, +cohost-post optgroup, +cohost-post select, +cohost-post textarea { + font-family: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + font-size: 100%; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; + color: inherit; + margin: 0; + padding: 0; +} +cohost-post button, +cohost-post select { + text-transform: none; +} +cohost-post .prose { color: light-dark(#191919, #fff9f2); --tw-prose-body: light-dark(#374151, #fff9f2); --tw-prose-headings: light-dark(#111827, #fff9f2); @@ -236,6 +271,32 @@ cohost-post .co-embed { cohost-post .co-ui-text { color: light-dark(rgb(25 25 25), rgb(255 249 242)); } +cohost-post .mask { + -webkit-mask-size: contain; + mask-size: contain; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; +} +cohost-post .mask-squircle { + -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==); + mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==); +} +cohost-post .mask-roundrect { + border-radius: 12.5%; +} +cohost-post .mask-circle { + border-radius: 9999px; +} +cohost-post .co-embedded-ask { + border-color: rgb(229 107 111); + background-color: light-dark(rgb(255 249 242), rgb(25 25 25)); + color: light-dark(rgb(25 25 25), rgb(255 249 242)); +} +cohost-post .co-attribution { + color: light-dark(rgb(130 127 124), rgb(160 156 152)); +} /* Hide interactive UI */ cohost-post button.co-link-button { @@ -244,11 +305,72 @@ cohost-post button.co-link-button { /* Tailwind properties */ -cohost-post .text-right { - text-align: right; +cohost-post .align-middle { + vertical-align: middle; } -cohost-post .p-3 { - padding: 0.75rem; +cohost-post .aspect-square { + aspect-ratio: 1 / 1; +} +cohost-post .border { + border-width: 1px; +} +cohost-post .break-words { + overflow-wrap: break-word; +} +cohost-post .col-start-1 { + grid-column-start: 1; +} +cohost-post .col-start-2 { + grid-column-start: 2; +} +cohost-post .content-start { + align-content: flex-start; +} +cohost-post .flex { + display: flex; +} +cohost-post .flex-initial { + flex: 0 1 auto; +} +cohost-post .flex-nowrap { + flex-wrap: nowrap; +} +cohost-post .font-bold { + font-weight: 700; +} +cohost-post .gap-x-3 { + -moz-column-gap: 0.75rem; + column-gap: 0.75rem; +} +cohost-post .gap-y-2 { + row-gap: 0.5rem; +} +cohost-post .grid { + display: grid; +} +cohost-post .grid-rows-\[2rem_1fr\] { + grid-template-rows: 2rem 1fr; +} +cohost-post .grid-cols-\[2rem_1fr\] { + grid-template-columns: 2rem 1fr; +} +cohost-post .h-8 { + height: 2rem; +} +cohost-post .h-full { + height: 100%; +} +cohost-post .hover\:underline:hover { + text-decoration: underline; +} +cohost-post .justify-between { + justify-content: space-between; +} +cohost-post .leading-8 { + line-height: 2rem; +} +cohost-post .m-3 { + margin: 0.75rem; } cohost-post .mt-0 { margin-top: 0px; @@ -257,18 +379,81 @@ cohost-post .my-4 { margin-top: 1rem; margin-bottom: 1rem; } +cohost-post .object-cover { + -o-object-fit: cover; + object-fit: cover; +} cohost-post .overflow-hidden { overflow: hidden; } -cohost-post .break-words { - overflow-wrap: break-word; +cohost-post .p-3 { + padding: 0.75rem; } cohost-post .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } +cohost-post .relative { + position: relative; +} +cohost-post .rounded-lg { + border-radius: 0.5rem; +} +cohost-post .row-start-1 { + grid-row-start: 1; +} +cohost-post .text-right { + text-align: right; +} +cohost-post .w-8 { + width: 2rem; +} +cohost-post .w-full { + width: 100%; +} + +/* CSS variables */ +cohost-post { + --color-notWhite: 255 249 242; + --color-notBlack: 25 25 25; + --color-cherry: 131 37 79; + --color-strawberry: 229 107 111; + --color-mango: 255 171 92; + --color-longan: 255 216 168; + --color-text: var(--color-notWhite); + --color-bg-text: var(--color-notBlack); + --color-foreground-100: 253 206 224; + --color-foreground-200: 238 173 199; + --color-foreground-300: 211 116 155; + --color-foreground-400: 174 68 115; + --color-foreground-500: 131 37 79; + --color-foreground-600: 103 26 61; + --color-foreground-700: 81 17 46; + --color-foreground-800: 59 9 32; + --color-foreground: var(--color-cherry); + --color-secondary-200: 244 187 187; + --color-secondary-300: 238 153 155; + --color-secondary-400: 229 107 111; + --color-secondary-600: 164 42 47; + --color-secondary-700: 123 27 31; + --color-secondary: var(--color-strawberry); + --color-tertiary: var(--color-longan); + --color-tertiary-200: 255 229 196; + --color-tertiary-300: 255 216 168; + --color-tertiary-400: 255 202 122; + --color-tertiary-500: 183 133 61; + --color-tertiary-600: 183 133 61; + --color-tertiary-700: 132 94 38; + --color-accent: var(--color-mango); + --color-background: var(--color-notWhite); + --color-sidebar-bg: var(--color-notWhite); + --color-sidebar-text: var(--color-notBlack); + --color-sidebar-accent: var(--color-cherry); + --color-compose-button: var(--color-foreground); + --color-compose-button-400: var(--color-foreground-400); + --color-compose-button-600: var(--color-foreground-600); +} -/* TODO: light */ @media (prefers-color-scheme: dark) { cohost-post { --color-notWhite: 255 249 242; @@ -310,5 +495,7 @@ cohost-post .px-3 { --color-compose-button-400: var(--color-foreground-400); --color-compose-button-600: var(--color-foreground-600); --emoji-scale: 1.25em; + --tw-border-opacity: 1; + --tw-bg-opacity: 1; } }