Something went wrong. Try again.
Bluesky app fork with some witchin' additions 💫 forked from jollywhoppers.com/witchsky.app
Something went wrong. Try again.
8.7 kB · 430 lines
CSS
at prod
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431/** * IMPORTANT * * Some of these styles are duplicated in the `web/index.html` and * `bskyweb/templates/base.html` files. Depending on what you're updating, you * may need to touch all three. Ask Eric if you aren't sure. */
/** * BEGIN STYLES * * HTML & BODY STYLES IN `web/index.html` and `bskyweb/templates/base.html` */:root { --text: black; --background: #fefbfb; --backgroundLight: #fefbfb;}@media (prefers-color-scheme: dark) { :root { color-scheme: dark; --text: white; --background: #222020; --backgroundLight: #222020; }}
html.theme--light { --text: black; --background: #fefbfb; --backgroundLight: #fefbfb; background-color: #fefbfb;}html.theme--dark { color-scheme: dark; background-color: #000000; --text: white; --background: #000000; --backgroundLight: #000000;}html.theme--dim { color-scheme: dark; background-color: #222020; --text: white; --background: #222020; --backgroundLight: #222020;}/* Buttons and inputs have a font set by UA, so we'll have to reset that */button,input,textarea { font: inherit; line-height: inherit;}
/* Remove autofill styles on Webkit */input:autofill,input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active { -webkit-background-clip: text; -webkit-text-fill-color: var(--text); transition: background-color 5000s ease-in-out 0s; box-shadow: inset 0 0 20px 20px var(--background); background: var(--background); color: var(--text);}/* Force left-align date/time inputs on iOS mobile */input::-webkit-date-and-time-value { text-align: left;}
/* Remove default link styling */a { color: inherit;}a[role='link']:hover { text-decoration: underline;}a[role='link'][data-no-underline='1']:hover { text-decoration: none;}
/* Styling hacks */*[data-word-wrap] { word-break: break-word;}*[data-stable-gutters] { scrollbar-gutter: stable both-edges;}
/* ProseMirror */.ProseMirror { min-height: inherit;}.ProseMirror-dark { color: white;}.ProseMirror p { margin: 0;}.ProseMirror p.is-editor-empty:first-child::before { color: #8d8e96; content: attr(data-placeholder); float: left; height: 0; pointer-events: none;}.ProseMirror .mention { color: var(--mention-color, #ed5345);}.ProseMirror a,.ProseMirror .autolink { color: var(--mention-color, #ed5345);}/* OLLIE: TODO -- this is not accessible *//* Remove focus state on inputs */.ProseMirror-focused { outline: 0;}textarea:focus,input:focus { outline: 0;}.tippy-content .items { width: fit-content;}
/* Tooltips */[data-tooltip] { position: relative; z-index: 10;}[data-tooltip]::after { content: attr(data-tooltip); display: none; position: absolute; bottom: 0; left: 50%; transform: translateY(100%) translateY(8px) translateX(-50%); padding: 4px 10px; border-radius: 10px; background: var(--backgroundLight); color: var(--text); text-align: center; white-space: nowrap; font-size: 12px; z-index: 10; /* HACK: promote to its own layer so Safari's compositor doesn't latch the bubble's `display: block` state when SubtleHover (also promoted) sits in the same stacking context. Without this, hovering certain notification items can leave the bubble visible permanently until a relayout. -sfn */ will-change: transform;}[data-tooltip]::before { content: ''; display: none; position: absolute; border-bottom: 6px solid var(--backgroundLight); border-left: 6px solid transparent; border-right: 6px solid transparent; bottom: 0; left: 50%; transform: translateY(100%) translateY(2px) translateX(-50%); z-index: 10;}[data-tooltip]:hover::after,[data-tooltip]:hover::before { display: block;}
/* NativeDropdown component */.radix-dropdown-item:focus,.nativeDropdown-item:focus { outline: none;}
/* Spinner component */@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}.rotate-500ms { position: absolute; inset: 0; animation: rotate 500ms linear infinite;}
/* animations for atoms */@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }}
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; }}
@keyframes zoomIn { from { transform: scale(0.95); } to { transform: scale(1); }}
@keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); }}
@keyframes slideOutLeft { from { transform: translateX(0); } to { transform: translateX(-100%); }}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); }}
@keyframes slideDown { from { transform: translateY(0); } to { transform: translateY(100%); }}
/* suppress native touch gestures on PWA bottom bar and dialogs */@media (pointer: coarse) { [role='navigation'], [role='navigation'] * { -webkit-touch-callout: none !important; -webkit-user-select: none !important; user-select: none !important; } [role='dialog'], [role='dialog'] * { -webkit-touch-callout: none !important; -webkit-user-select: none !important; user-select: none !important; }}
/* animating radix dropdowns requires knowing the data attributes */.dropdown-menu-transform-origin > * { transform-origin: var(--radix-dropdown-menu-content-transform-origin);}.dropdown-menu-constrain-size > * { max-height: var(--radix-dropdown-menu-content-available-height);}
.force-no-clicks > *,.force-no-clicks * { pointer-events: none !important;}
input[type='range'][orient='vertical'] { writing-mode: vertical-lr; direction: rtl; width: 16px; vertical-align: bottom; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;}
input[type='range'][orient='vertical']::-webkit-slider-runnable-track { background: white; height: 100%; width: 4px; border-radius: 4px;}
input[type='range'][orient='vertical']::-moz-range-track { background: white; height: 100%; width: 4px; border-radius: 4px;}
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; border-radius: 50%; background-color: white; height: 16px; width: 16px; margin-left: -6px;}
input[type='range'][orient='vertical']::-moz-range-thumb { border: none; border-radius: 50%; background-color: white; height: 16px; width: 16px; margin-left: -6px;}
/* * EmojiReactionPicker dropdown elements, within Radix components */.EmojiReactionPicker__Pressable { cursor: pointer; border: 1px solid transparent;}.EmojiReactionPicker__Pressable:focus { outline: none; border-color: var(--text);}.EmojiReactionPicker__Pressable:hover { outline: none; transform: scale(1.1); border-color: transparent;}.EmojiReactionPicker__Pressable:not(.__selected).__disabled { transform: scale(1) !important; border-color: transparent !important; opacity: 0.7;}.EmojiReactionPicker__Pressable ~ button { cursor: pointer; border: 1px solid transparent;}.EmojiReactionPicker__Pressable ~ button:focus { outline: none; border-color: var(--text);}.EmojiReactionPicker__Pressable ~ button:hover { outline: none; background-color: var(--backgroundLight); border-color: transparent;}
/* #/components/Select/index.web.tsx */.radix-select-content { box-shadow: 0px 6px 24px -10px rgba(22, 23, 24, 0.25), 0px 6px 12px -12px rgba(22, 23, 24, 0.15); min-width: var(--radix-select-trigger-width); max-height: var(--radix-select-content-available-height);}
/* * #/components/Tooltip/index.web.tsx */.radix-popover-content { animation-duration: 300ms; animation-timing-function: cubic-bezier(0.17, 0.73, 0.14, 1);}.radix-popover-content[data-state='open'] { will-change: transform, opacity;}.radix-popover-content[data-state='open'][data-side='top'] { animation-name: radixPopoverSlideUpAndFade;}.radix-popover-content[data-state='open'][data-side='bottom'] { animation-name: radixPopoverSlideDownAndFade;}@keyframes radixPopoverSlideUpAndFade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); }}@keyframes radixPopoverSlideDownAndFade { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); }}
/* * #/components/Toast/index.web.tsx */@keyframes toastFadeIn { from { opacity: 0; } to { opacity: 1; }}@keyframes toastFadeOut { from { opacity: 1; } to { opacity: 0; }}