aljaz/mutiny-web
1
0
Fork 0
mirror of https://github.com/aljazceru/mutiny-web.git synced 2026-02-23 15:14:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

remove bad "dark" mode for spinner

Browse Source
This commit is contained in:
Paul Miller
2023-06-14 10:16:08 -05:00
parent 0df586051e
commit 6765a59c4a
2 changed files with 107 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/layout/Button.tsx
View File

@@ -5,7 +5,7 @@ import { A } from "solid-start";
import { LoadingSpinner } from ".";
const button = cva(
"p-3 rounded-xl font-semibold disabled:opacity-20 disabled:grayscale transition",
"p-3 rounded-xl font-semibold transition disabled:bg-neutral-400/10 disabled:text-white/20 disabled:shadow-inner-button-disabled",
{
variants: {
// TODO: button hover has to work different than buttonlinks (like disabled state)

209
tailwind.config.cjs
View File

@@ -2,107 +2,110 @@ const plugin = require('tailwindcss/plugin')
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
safelist: [
'grid-cols-1',
'grid-cols-2',
'gap-2',
'gap-4',
'outline-m-red',
'outline-m-blue',
],
variants: {
extend: {
borderWidth: ['responsive', 'last', 'hover', 'focus'],
}
},
theme: {
extend: {
colors: {
"half-black": "rgba(0, 0, 0, 0.5)",
"faint-white": "rgba(255, 255, 255, 0.1)",
"light-text": "rgba(250, 245, 234, 0.5)",
"m-green": "hsla(163, 70%, 38%, 1)",
"m-green-dark": "hsla(163, 70%, 28%, 1)",
"m-blue": "hsla(220, 59%, 52%, 1)",
"m-blue-dark": "hsla(220, 59%, 42%, 1)",
"m-red": "hsla(343, 92%, 54%, 1)",
"m-red-dark": "hsla(343, 92%, 44%, 1)",
"sidebar-gray": "hsla(222, 15%, 7%, 1)"
},
backgroundImage: {
'fade-to-blue': 'linear-gradient(1.63deg, #0B215B 32.05%, rgba(11, 33, 91, 0) 84.78%)',
'subtle-fade': 'linear-gradient(180deg, #060A13 0%, #131E39 100%)',
'richer-fade': 'linear-gradient(180deg, hsla(224, 20%, 8%, 1) 0%, hsla(224, 20%, 15%, 1) 100%)'
},
dropShadow: {
'blue-glow': '0px 0px 32px rgba(11, 33, 91, 0.5)',
},
boxShadow: {
'inner-button': '2px 2px 4px rgba(0, 0, 0, 0.1), inset 2px 2px 4px rgba(255, 255, 255, 0.1), inset -2px -2px 6px rgba(0, 0, 0, 0.2)',
'fancy-card': '0px 4px 4px rgba(0, 0, 0, 0.1)',
'above': '0px -4px 10px rgba(0, 0, 0, 0.25)',
},
textShadow: {
'button': '1px 1px 0px rgba(0, 0, 0, 0.4)'
},
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
safelist: [
"grid-cols-1",
"grid-cols-2",
"gap-2",
"gap-4",
"outline-m-red",
"outline-m-blue"
],
variants: {
extend: {
borderWidth: ["responsive", "last", "hover", "focus"]
}
},
},
plugins: [
// default prefix is "ui"
require("@kobalte/tailwindcss"),
plugin(function ({ addUtilities }) {
const newUtilities = {
".safe-top": {
paddingTop: "constant(safe-area-inset-top)",
paddingTop: "env(safe-area-inset-top)"
},
".safe-left": {
paddingLeft: "constant(safe-area-inset-left)",
paddingLeft: "env(safe-area-inset-left)"
},
".safe-right": {
paddingRight: "constant(safe-area-inset-right)",
paddingRight: "env(safe-area-inset-right)"
},
".safe-bottom": {
paddingBottom: "constant(safe-area-inset-bottom)",
paddingBottom: "env(safe-area-inset-bottom)"
},
".disable-scrollbars": {
scrollbarWidth: "none",
"-ms-overflow-style": "none",
"&::-webkit-scrollbar": {
width: "0px",
background: "transparent",
display: "none"
},
"& *::-webkit-scrollbar": {
width: "0px",
background: "transparent",
display: "none"
},
"& *": {
scrollbarWidth: "none",
"-ms-overflow-style": "none"
}
}
};
addUtilities(newUtilities);
}),
// Text shadow!
plugin(function ({ matchUtilities, theme }) {
matchUtilities(
{
'text-shadow': (value) => ({
textShadow: value,
}),
},
{ values: theme('textShadow') }
)
}),
],
}
theme: {
extend: {
colors: {
"half-black": "rgba(0, 0, 0, 0.5)",
"faint-white": "rgba(255, 255, 255, 0.1)",
"light-text": "rgba(250, 245, 234, 0.5)",
"m-green": "hsla(163, 70%, 38%, 1)",
"m-green-dark": "hsla(163, 70%, 28%, 1)",
"m-blue": "hsla(220, 59%, 52%, 1)",
"m-blue-dark": "hsla(220, 59%, 42%, 1)",
"m-red": "hsla(343, 92%, 54%, 1)",
"m-red-dark": "hsla(343, 92%, 44%, 1)",
"sidebar-gray": "hsla(222, 15%, 7%, 1)"
},
backgroundImage: {
"fade-to-blue":
"linear-gradient(1.63deg, #0B215B 32.05%, rgba(11, 33, 91, 0) 84.78%)",
"subtle-fade":
"linear-gradient(180deg, #060A13 0%, #131E39 100%)",
"richer-fade":
"linear-gradient(180deg, hsla(224, 20%, 8%, 1) 0%, hsla(224, 20%, 15%, 1) 100%)"
},
dropShadow: {
"blue-glow": "0px 0px 32px rgba(11, 33, 91, 0.5)"
},
boxShadow: {
"inner-button":
"2px 2px 4px rgba(0, 0, 0, 0.1), inset 2px 2px 4px rgba(255, 255, 255, 0.1), inset -2px -2px 6px rgba(0, 0, 0, 0.2)",
"inner-button-disabled":
"2px 2px 4px rgba(0, 0, 0, 0.05), inset 2px 2px 4px rgba(255, 255, 255, 0.05), inset -2px -2px 6px rgba(0, 0, 0, 0.1)",
"fancy-card": "0px 4px 4px rgba(0, 0, 0, 0.1)",
above: "0px -4px 10px rgba(0, 0, 0, 0.25)"
},
textShadow: {
button: "1px 1px 0px rgba(0, 0, 0, 0.4)"
}
}
},
plugins: [
// default prefix is "ui"
require("@kobalte/tailwindcss"),
plugin(function ({ addUtilities }) {
const newUtilities = {
".safe-top": {
paddingTop: "constant(safe-area-inset-top)",
paddingTop: "env(safe-area-inset-top)"
},
".safe-left": {
paddingLeft: "constant(safe-area-inset-left)",
paddingLeft: "env(safe-area-inset-left)"
},
".safe-right": {
paddingRight: "constant(safe-area-inset-right)",
paddingRight: "env(safe-area-inset-right)"
},
".safe-bottom": {
paddingBottom: "constant(safe-area-inset-bottom)",
paddingBottom: "env(safe-area-inset-bottom)"
},
".disable-scrollbars": {
scrollbarWidth: "none",
"-ms-overflow-style": "none",
"&::-webkit-scrollbar": {
width: "0px",
background: "transparent",
display: "none"
},
"& *::-webkit-scrollbar": {
width: "0px",
background: "transparent",
display: "none"
},
"& *": {
scrollbarWidth: "none",
"-ms-overflow-style": "none"
}
}
};
addUtilities(newUtilities);
}),
// Text shadow!
plugin(function ({ matchUtilities, theme }) {
matchUtilities(
{
"text-shadow": (value) => ({
textShadow: value
})
},
{ values: theme("textShadow") }
);
})
]
};