pmret/website
1
0
Fork 0
mirror of https://github.com/pmret/website.git synced 2024-09-18 23:02:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

improve shadow-box

Browse Source
This commit is contained in:
Alex Bates 2021-01-07 18:11:14 +00:00
parent 83d7b83268
commit 67cca4f3ea
No known key found for this signature in database
GPG Key ID: 7531C5E1D6B1CA9A
2 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/ProgressPane.jsx
View File

@ -102,14 +102,14 @@ function DataView({ data, captionPortal, nonce }) {
</table>*/}
<div className="shadow-box flex-grow">
<div className="shadow-box-inner" style={{ paddingRight: ".7em", paddingTop: ".7em", "--text-outline": "transparent" }}>
<div className="shadow-box-inner" style={{ paddingRight: ".7em", paddingTop: ".7em", "--text-outline": "transparent", background: "#e2e1d8" }}>
<div className="progress-chart">
<ResponsiveContainer>
<AreaChart data={data}>
<XAxis dataKey="timestamp" type="number" scale={scale} domain={["dataMin", Date.now()/1000]} ticks={monthDates} tickFormatter={formatTimestampMonth} interval={0}/>
<YAxis type="number" unit="%" domain={[0, maxPercent]} tickCount={maxPercent / 5 + 1}/>
<CartesianGrid stroke="#eee"/>
<CartesianGrid stroke="#d9d0c9"/>
<Area
type="linear"

23
src/index.css
View File

@ -163,27 +163,34 @@ main > * {
}
.shadow-box {
background: #ffffff66;
background: #ffffff44;
padding: 1em;
margin: .5em;
margin-bottom: 1em;
border-radius: 16px;
box-shadow: .3em .5em 16px -.2em rgba(0, 0, 0, 0.4);
backdrop-filter: blur(3px);
border-top: 4px solid #ffffff33;
border-radius: 16px;
box-shadow: .4em .4em rgba(0, 0, 0, 0.15);
border-top: 4px solid #ffffffaa;
padding-top: calc(1em - 2px);
border-left: 2px solid #ffffff33;
border-right: 2px solid #00000055;
border-bottom: 2px solid #00000055;
border-left: 4px solid #ffffffaa;
border-right: 4px solid #00000055;
border-bottom: 4px solid #00000055;
position: relative;
}
.shadow-box-inner {
border-radius: 12px;
box-shadow: inset .3em .3em 3px #00000033;
box-shadow: inset .4em .4em rgba(0, 0, 0, 0.15);
border-top: 4px solid #00000055;
border-left: 4px solid #00000055;
border-bottom: 4px solid #ffffffaa;
border-right: 4px solid #ffffffaa;
width: 100%;
height: 100%;