Files
fizzy/app/assets/stylesheets/web/base.css
T
Adrien Maston a770f614c0 Merge branch 'main' into mobile-app/scoped-stylesheets
* main: (85 commits)
  Fix crash when inserting an emoji into a max length reaction
  change the object type in the example code (#1824)
  We can't hide public boards like this
  Consistent breakpoints for min- and max-width
  Repair tooltip z-index selector
  Fix bin/setup to explicitly use bash syntax for mise hook-env (#1813)
  Update AGENTS.md (#1818)
  Bundler: normalize platforms (#1822)
  Robots, begone (#1812)
  Account for input padding on autoresize pseudo-element
  Updated database.sqlite.yml
  (account): encode external_account_id in slug
  Allow typing magic links on mobile
  Add contributing guide
  Disconnect action cable when user is deactivated
  Disable ARM image builds
  Disable image builds for PRs
  Add libssl-dev
  Add automated Docker image builds
  Make the jump nav hotkeys look like the others
  ...
2025-12-03 10:57:27 +01:00

117 lines
2.5 KiB
CSS

@layer base {
html {
font-size: 100%;
@media (min-width: 100ch) {
font-size: 1.1875rem;
}
}
body {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
background: var(--color-canvas);
color: var(--color-ink);
font-family: var(--font-sans);
interpolate-size: allow-keywords;
line-height: 1.375;
max-inline-size: 100vw;
scroll-behavior: auto;
text-rendering: optimizeLegibility;
text-size-adjust: none;
}
a {
text-decoration: none;
&:not([class]) {
color: var(--color-link);
text-decoration: underline;
text-decoration-skip-ink: auto;
}
}
:is(a, button, input, textarea, .switch, .btn) {
transition: 100ms ease-out;
transition-property: background-color, border-color, box-shadow, filter, outline;
touch-action: manipulation;
/* Keyboard navigation */
&:where(:focus-visible) {
border-radius: 0.25ch;
outline: var(--focus-ring-size) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
/* Default disabled styles */
&:where([disabled]) {
cursor: not-allowed;
opacity: 0.5;
pointer-events: none;
}
}
::selection {
background: var(--color-selected);
@media (prefers-color-scheme: dark) {
background-color: var(--color-selected-dark);
}
}
:where(ul, ol):where([role="list"]) {
margin: 0;
padding: 0;
list-style: none;
}
kbd {
border: 1px solid;
border-radius: 0.3em;
box-shadow: 0 0.1em 0 currentColor;
font-family: var(--font-mono);
font-size: 0.8em;
font-weight: 600;
opacity: 0.7;
padding: 0 0.4em;
text-transform: uppercase;
vertical-align: middle;
white-space: nowrap;
}
video {
max-inline-size: 100%;
}
/* Printing */
@page {
margin: 1in;
}
@media print {
.no-print {
display: none;
}
}
/* Turbo */
turbo-frame {
display: contents;
}
.turbo-progress-bar {
visibility: hidden;
}
/* Nicer scrollbars on Chrome 29+. This is intended for Windows machines, but */
/* there's not a way to target Windows using CSS, so Chrome on Mac will have */
/* slightly thinner scrollbars than normal. #C1C1C1 is the default color on Macs. */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
* {
scrollbar-color: #C1C1C1 transparent;
scrollbar-width: thin;
}
}
}