@import "tailwindcss"; @import "trix/dist/trix.css"; @theme { --color-longhorn-50: #fffbea; --color-longhorn-100: #fff5c4; --color-longhorn-200: #ffe984; --color-longhorn-300: #ffd744; --color-longhorn-400: #ffc419; --color-longhorn-500: #ffa600; --color-longhorn-600: #e47f00; --color-longhorn-700: #bf5700; --color-longhorn-800: #994207; --color-longhorn-900: #7e3609; --color-longhorn-950: #481b00; } /* Profile accent themes — override the longhorn-* palette so every longhorn utility class in the app reskins by setting data-theme on . "texas" is the @theme default above. Selectors are html[data-theme=...] for specificity over the :root theme vars. */ html[data-theme="florida"] { --color-longhorn-50: #ebf1ff; --color-longhorn-100: #d7e3ff; --color-longhorn-200: #aec6ff; --color-longhorn-300: #7d9ff7; --color-longhorn-400: #4a73ea; --color-longhorn-500: #2350d6; --color-longhorn-600: #0f34bd; --color-longhorn-700: #0021a5; --color-longhorn-800: #001c87; --color-longhorn-900: #001566; --color-longhorn-950: #000b3a; } html[data-theme="aggie"] { --color-longhorn-50: #fbeaea; --color-longhorn-100: #f6d4d4; --color-longhorn-200: #e9a3a3; --color-longhorn-300: #d97272; --color-longhorn-400: #c24545; --color-longhorn-500: #9e2727; --color-longhorn-600: #771414; --color-longhorn-700: #500000; --color-longhorn-800: #420000; --color-longhorn-900: #330000; --color-longhorn-950: #1f0000; } /* Silver & black */ html[data-theme="spurs"] { --color-longhorn-50: #f5f6f7; --color-longhorn-100: #e7eaec; --color-longhorn-200: #cfd5d9; --color-longhorn-300: #aab2b8; --color-longhorn-400: #7c858c; --color-longhorn-500: #565e64; --color-longhorn-600: #3d4348; --color-longhorn-700: #2a2e32; --color-longhorn-800: #1c1f22; --color-longhorn-900: #101214; --color-longhorn-950: #000000; } /* Navy blue */ html[data-theme="cowboys"] { --color-longhorn-50: #e9f0fc; --color-longhorn-100: #cdddf8; --color-longhorn-200: #9bbbf0; --color-longhorn-300: #6493e4; --color-longhorn-400: #356fd4; --color-longhorn-500: #1450b8; --color-longhorn-600: #06409c; --color-longhorn-700: #003594; --color-longhorn-800: #002a76; --color-longhorn-900: #001f57; --color-longhorn-950: #001236; } /* Deep steel blue */ html[data-theme="texans"] { --color-longhorn-50: #eef4f6; --color-longhorn-100: #d3e3e8; --color-longhorn-200: #a8c6d0; --color-longhorn-300: #74a0ae; --color-longhorn-400: #46798b; --color-longhorn-500: #2e6070; --color-longhorn-600: #234e5c; --color-longhorn-700: #1b3e4a; --color-longhorn-800: #122d37; --color-longhorn-900: #0a1f27; --color-longhorn-950: #03141b; } /* Crimson red */ html[data-theme="rockets"] { --color-longhorn-50: #fdebef; --color-longhorn-100: #fbccd6; --color-longhorn-200: #f59bac; --color-longhorn-300: #ef6178; --color-longhorn-400: #e43253; --color-longhorn-500: #d51444; --color-longhorn-600: #ce1141; --color-longhorn-700: #a90d36; --color-longhorn-800: #850b2b; --color-longhorn-900: #5f071e; --color-longhorn-950: #3a0412; } /* Orange & navy (700 darkened from Broncos orange #fb4f14 so white nav text clears contrast) */ html[data-theme="broncos"] { --color-longhorn-50: #fff3ec; --color-longhorn-100: #ffe2d2; --color-longhorn-200: #ffc0a3; --color-longhorn-300: #fd9a6a; --color-longhorn-400: #fb6f33; --color-longhorn-500: #fb4f14; --color-longhorn-600: #e2400b; --color-longhorn-700: #c2410c; --color-longhorn-800: #9a330b; --color-longhorn-900: #7c2c0d; --color-longhorn-950: #431306; } /* Scarlet & gray — scarlet (#bb0000 @700) accent ramp. */ html[data-theme="buckeyes"] { --color-longhorn-50: #fef2f2; --color-longhorn-100: #fde0e0; --color-longhorn-200: #fbc4c4; --color-longhorn-300: #f79a9a; --color-longhorn-400: #ef5f5f; --color-longhorn-500: #e23535; --color-longhorn-600: #c81a1a; --color-longhorn-700: #bb0000; --color-longhorn-800: #9a0808; --color-longhorn-900: #7f0d0d; --color-longhorn-950: #460303; } /* Crimson & white — deep crimson (#9e1b32 @700) accent ramp. */ html[data-theme="alabama"] { --color-longhorn-50: #fcebee; --color-longhorn-100: #f7d2da; --color-longhorn-200: #eea6b4; --color-longhorn-300: #e2768c; --color-longhorn-400: #d04a66; --color-longhorn-500: #ba2945; --color-longhorn-600: #ab1e39; --color-longhorn-700: #9e1b32; --color-longhorn-800: #821628; --color-longhorn-900: #65111f; --color-longhorn-950: #3f0a13; } /* Halloween — pumpkin orange (700 darkened to #b83d0b so white-on-accent text clears contrast). Pairs with the dark color scheme for the classic orange-on-black look. */ html[data-theme="halloween"] { --color-longhorn-50: #fff5ec; --color-longhorn-100: #ffe8d2; --color-longhorn-200: #fecba0; --color-longhorn-300: #fda85f; --color-longhorn-400: #fb7e2d; --color-longhorn-500: #f6600a; --color-longhorn-600: #dd4e05; --color-longhorn-700: #b83d0b; --color-longhorn-800: #93330f; --color-longhorn-900: #762c11; --color-longhorn-950: #401206; } /* ── Dark color scheme ──────────────────────────────────────────────────────── A SECOND, independent axis from the accent theme above. Tailwind v4 emits every neutral utility as var(--color-*) (e.g. .bg-white → var(--color-white), .text-gray-900 → var(--color-gray-900)), so remapping the neutral palette darkens the whole app with no view edits. The gray ramp is inverted (50 = darkest page, 900 = lightest ink); white becomes an elevated surface. --color-white is shared by bg-white (surface, must darken) and text-white (on accents, must stay light), so text-white / ring-white are compensated back to light afterwards. Applied when the member chooses Dark, or chooses System and the OS is dark. */ html[data-scheme="dark"] { color-scheme: dark; --color-white: #1c2128; --color-gray-50: #0d1117; --color-gray-100: #161b22; --color-gray-200: #2d333b; --color-gray-300: #444c56; --color-gray-400: #6e7681; --color-gray-500: #8b949e; --color-gray-600: #adbac7; --color-gray-700: #c9d1d9; --color-gray-800: #dde4ec; --color-gray-900: #f0f6fc; --color-gray-950: #ffffff; } html[data-scheme="dark"] .text-white { color: #f0f6fc; } html[data-scheme="dark"] .ring-white { --tw-ring-color: #1c2128; } @media (prefers-color-scheme: dark) { html[data-scheme="system"] { color-scheme: dark; --color-white: #1c2128; --color-gray-50: #0d1117; --color-gray-100: #161b22; --color-gray-200: #2d333b; --color-gray-300: #444c56; --color-gray-400: #6e7681; --color-gray-500: #8b949e; --color-gray-600: #adbac7; --color-gray-700: #c9d1d9; --color-gray-800: #dde4ec; --color-gray-900: #f0f6fc; --color-gray-950: #ffffff; } html[data-scheme="system"] .text-white { color: #f0f6fc; } html[data-scheme="system"] .ring-white { --tw-ring-color: #1c2128; } } /* ── Trix rich-text editor (social feed) ────────────────────────────────────── Match the longhorn form controls and give the toolbar an underlined "U" button (added by app/javascript/lib/trix_setup.js). `.trix-content` styles the rendered, sanitized post body. */ trix-editor { border-radius: 0.5rem; border: 1px solid var(--color-gray-300); background: var(--color-white); padding: 0.625rem 0.875rem; font-size: 0.875rem; color: var(--color-gray-900); min-height: 6rem; } trix-editor:focus { outline: none; border-color: var(--color-longhorn-500); box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-longhorn-500) 40%, transparent); } trix-editor:empty:not(:focus)::before { color: var(--color-gray-400); } trix-toolbar .trix-button-group { border-color: var(--color-gray-300); } trix-toolbar .trix-button--icon { height: 1.6rem; } /* The injected Underline button is a plain text button — render a bold, underlined "U". */ trix-toolbar .trix-button[data-trix-attribute="underline"] { text-decoration: underline; font-weight: 700; } /* Rendered post body */ .trix-content { color: var(--color-gray-800); word-break: break-word; } .trix-content strong { font-weight: 700; } .trix-content em { font-style: italic; } .trix-content a { color: var(--color-longhorn-700); text-decoration: underline; } .trix-content ul { list-style: disc; padding-left: 1.25rem; } .trix-content ol { list-style: decimal; padding-left: 1.25rem; } .trix-content blockquote { border-left: 3px solid var(--color-gray-300); padding-left: 0.75rem; color: var(--color-gray-600); margin: 0.25rem 0; } .trix-content pre { background: var(--color-gray-100); border-radius: 0.375rem; padding: 0.5rem 0.75rem; font-size: 0.8125rem; overflow-x: auto; } /* ── Emoji picker (social posts & comments) ─────────────────────────────────── Toggle button + floating palette (app/javascript/controllers/emoji_picker_controller.js). The panel keeps `display: grid` behind :not([hidden]) so the [hidden] attribute still wins and toggles visibility. */ .emoji-picker__toggle { font-size: 1.125rem; line-height: 1; padding: 0.25rem 0.45rem; border-radius: 0.375rem; border: 1px solid var(--color-gray-300); background: var(--color-white); cursor: pointer; } .emoji-picker__toggle:hover { background: var(--color-gray-50); } .emoji-picker__panel { position: absolute; right: 0; top: 100%; z-index: 30; margin-top: 0.375rem; width: 15rem; max-height: 12rem; overflow-y: auto; padding: 0.5rem; background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: 0.5rem; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); } .emoji-picker__panel:not([hidden]) { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.125rem; } .emoji-picker__item { font-size: 1.125rem; line-height: 1; padding: 0.25rem; border-radius: 0.375rem; background: transparent; cursor: pointer; } .emoji-picker__item:hover { background: var(--color-gray-100); }