philipp/aef-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[TASK] add shadow on buttons except secondary button

Browse Source
This commit is contained in:
Marie Birner
2025-08-02 21:35:16 +02:00
parent 63a10d55fc
commit 50ba28fad0
1 changed files with 35 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
static/serve/style.css
View File

@@ -8,6 +8,8 @@
:root { :root {
--pico-typography-spacing-vertical: 2rem; --pico-typography-spacing-vertical: 2rem;
--pico-font-family: 'Arial', sans-serif; --pico-font-family: 'Arial', sans-serif;
--pico-form-element-spacing-vertical: .3rem;
--pico-form-element-spacing-horizontal: .8rem;
} }
h1 { h1 {
@@ -19,6 +21,39 @@ h1 {
text-align: center; text-align: center;
} }
input[type="submit"],
button:not([class="secondary"]) {
transition: margin-top 0.3s ease,
margin-left 0.3s ease,
box-shadow 0.3s ease;
background: var(--pico-primary);
border: solid 1px var(--pico-primary-hover-background);
box-shadow: 1px 0px 0px var(--pico-primary-hover-background),0px 1px 0px var(--pico-primary-hover-background),
2px 1px 0px var(--pico-primary-hover-background),1px 2px 0px var(--pico-primary-hover-background),
3px 2px 0px var(--pico-primary-hover-background),2px 3px 0px var(--pico-primary-hover-background),
4px 3px 0px var(--pico-primary-hover-background),3px 4px 0px var(--pico-primary-hover-background),
5px 4px 0px var(--pico-primary-hover-background),4px 5px 0px var(--pico-primary-hover-background),
6px 5px 0px var(--pico-primary-hover-background),5px 6px 0px var(--pico-primary-hover-background),
7px 6px 0px var(--pico-primary-hover-background),6px 7px 0px var(--pico-primary-hover-background),
8px 7px 0px var(--pico-primary-hover-background),7px 8px 0px var(--pico-primary-hover-background),
9px 8px 0px var(--pico-primary-hover-background),8px 9px 0px var(--pico-primary-hover-background);
}
/* When the button is clicked */
button:not([class="secondary"]):active,
input[type="submit"]:active {
transition: margin-top 0.3s ease;
margin-left 0.3s ease;
box-shadow 0.3s ease;
margin-left:9px;
margin-top:9px;
box-shadow: 0px 0px 0px var(--pico-primary-hover-background);
}
.font-headline { .font-headline {
font-family: 'Rubik Doodle Shadow', sans-serif; font-family: 'Rubik Doodle Shadow', sans-serif;
} }