Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

refactor(web): update shadows for material specs

Browse Source
This commit is contained in:
Paul Armstrong 2021-02-04 10:49:14 -08:00 committed by Blake Blackshear
parent 0cac2fec2a
commit 15ae3bee55
3 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/AppBar.jsx
View File

@ -73,7 +73,7 @@ export default function AppBar({ title }) {
<div <div
className={`w-full border-b border-gray-200 dark:border-gray-700 flex items-center align-middle p-4 space-x-2 fixed left-0 right-0 z-10 bg-white dark:bg-gray-900 transform transition-all duration-200 translate-y-0 ${ className={`w-full border-b border-gray-200 dark:border-gray-700 flex items-center align-middle p-4 space-x-2 fixed left-0 right-0 z-10 bg-white dark:bg-gray-900 transform transition-all duration-200 translate-y-0 ${
!show ? '-translate-y-full' : '' !show ? '-translate-y-full' : ''
} ${!atZero ? 'shadow' : ''}`} } ${!atZero ? 'shadow-sm' : ''}`}
> >
<div className="lg:hidden"> <div className="lg:hidden">
<Button color="black" className="rounded-full w-12 h-12" onClick={handleShowDrawer} type="text"> <Button color="black" className="rounded-full w-12 h-12" onClick={handleShowDrawer} type="text">

4
web/src/components/Card.jsx
View File

@ -17,7 +17,9 @@ export default function Box({
const Element = href ? 'a' : 'div'; const Element = href ? 'a' : 'div';
return ( return (
<div className={`bg-white dark:bg-gray-800 shadow-md hover:shadow-xl rounded-lg overflow-hidden ${className}`}> <div
className={`bg-white dark:bg-gray-800 shadow-md hover:shadow-lg transition-shadow rounded-lg overflow-hidden ${className}`}
>
<Element href={href} {...props}> <Element href={href} {...props}>
{media} {media}
<div class="p-4 pb-2">{header ? <Heading size="base">{header}</Heading> : null}</div> <div class="p-4 pb-2">{header ? <Heading size="base">{header}</Heading> : null}</div>

17
web/tailwind.config.js
View File

@ -4,16 +4,23 @@ module.exports = {
purge: ['./public/**/*.html', './src/**/*.jsx'], purge: ['./public/**/*.html', './src/**/*.jsx'],
darkMode: 'class', darkMode: 'class',
theme: { theme: {
extend: {}, extend: {
screens: { screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px', '2xl': '1536px',
'3xl': '1720px', '3xl': '1720px',
}, },
}, },
boxShadow: {
sm: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
DEFAULT: '0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);',
md: '0px 2px 2px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);',
lg: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
xl: '0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
'2xl': '0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)',
'3xl': '',
none: '',
},
},
variants: { variants: {
extend: {}, extend: {},
}, },