diff --git a/static/serve/style.css b/static/serve/style.css index f583c49..ae8f291 100644 --- a/static/serve/style.css +++ b/static/serve/style.css @@ -8,6 +8,8 @@ :root { --pico-typography-spacing-vertical: 2rem; --pico-font-family: 'Arial', sans-serif; + --pico-form-element-spacing-vertical: .3rem; + --pico-form-element-spacing-horizontal: .8rem; } h1 { @@ -19,6 +21,39 @@ h1 { 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-family: 'Rubik Doodle Shadow', sans-serif; }