update buttons with subtle inset shadows for depth

jantari · jantari · commit 7a301508aa77 · 2025-11-06T00:05:44.000+01:00
diff --git a/templates/reveal.html b/templates/reveal.html
@@ -34,7 +34,7 @@
         border-radius: 50vh;
         padding: 0.2em 0.6em 0.2em 0.6em;
         width: fit-content;
-        box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.22);
+        box-shadow: inset -2px -2px 6px 0px rgba(0,0,0,0.22), inset 2px 2px 6px 0px rgba(255,255,255,0.22), 2px 4px 6px 2px rgba(0,0,0,0.22);
         transition: background-position 0s, box-shadow 0.3s;
         background: linear-gradient(110deg, cadetblue 0 40%, darkturquoise, cadetblue 60% 100%);
         background-size: 250% auto;
@@ -44,8 +44,8 @@
 
       .button:hover {
         cursor: pointer;
-        transition: background-position 0.5s, box-shadow 0.6s;
-        box-shadow: 2px 6px 12px 4px rgba(0,0,0,0.2);
+        transition: background-position 0.5s, box-shadow 0.3s;
+        box-shadow: inset 0 0 0 0 transparent, inset 0 0 0 0 transparent, 2px 4px 12px 4px rgba(0,0,0,0.2);
         background-position: left 0%;
       }
 
@@ -83,11 +83,11 @@
         }
 
         .button {
-          box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.44);
+          box-shadow: inset -2px -2px 6px 0px rgba(0,0,0,0.22), inset 2px 2px 6px 0px rgba(255,255,255,0.22), 2px 4px 6px 2px rgba(0,0,0,0.44);
         }
 
         .button:hover {
-          box-shadow: 2px 6px 12px 4px rgba(0,0,0,0.4);
+          box-shadow: inset 0 0 0 0 transparent, inset 0 0 0 0 transparent, 2px 4px 12px 4px rgba(0,0,0,0.4);
         }
 
         #secret {
@@ -97,15 +97,15 @@
       }
 
       .button:active {
-        box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.22);
+        box-shadow: inset -2px -2px 6px 0px rgba(255,255,255,0.22), inset 2px 2px 6px 0px rgba(0,0,0,0.22), 2px 4px 6px 2px rgba(0,0,0,0.22);
         background: #568e8f;
         transition: box-shadow 0.1s;
       }
 
       /* Dark Theme overrides for active button */
       @media (prefers-color-scheme: dark) {
         .button:active {
-          box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.44);
+          box-shadow: inset -2px -2px 6px 0px rgba(255,255,255,0.22), inset 2px 2px 6px 0px rgba(0,0,0,0.22), 2px 4px 6px 2px rgba(0,0,0,0.44);
         }
       }
     </style>
diff --git a/templates/view.html b/templates/view.html
@@ -34,7 +34,7 @@
         border-radius: 50vh;
         padding: 0.2em 0.6em 0.2em 0.6em;
         width: fit-content;
-        box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.22);
+        box-shadow: inset -2px -2px 6px 0px rgba(0,0,0,0.22), inset 2px 2px 6px 0px rgba(255,255,255,0.22), 2px 4px 6px 2px rgba(0,0,0,0.22);
         transition: background-position 0s, box-shadow 0.3s;
         background: linear-gradient(110deg, cadetblue 0 40%, darkturquoise, cadetblue 60% 100%);
         background-size: 250% auto;
@@ -44,8 +44,8 @@
 
       .button:hover {
         cursor: pointer;
-        transition: background-position 0.5s, box-shadow 0.6s;
-        box-shadow: 2px 6px 12px 4px rgba(0,0,0,0.2);
+        transition: background-position 0.5s, box-shadow 0.3s;
+        box-shadow: inset 0 0 0 0 transparent, inset 0 0 0 0 transparent, 2px 4px 12px 4px rgba(0,0,0,0.2);
         background-position: left 0%;
       }
 
@@ -83,11 +83,11 @@
         }
 
         .button {
-          box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.44);
+          box-shadow: inset -2px -2px 6px 0px rgba(0,0,0,0.22), inset 2px 2px 6px 0px rgba(255,255,255,0.22), 2px 4px 6px 2px rgba(0,0,0,0.44);
         }
 
         .button:hover {
-          box-shadow: 2px 6px 12px 4px rgba(0,0,0,0.4);
+          box-shadow: inset 0 0 0 0 transparent, inset 0 0 0 0 transparent, 2px 4px 12px 4px rgba(0,0,0,0.4);
         }
 
         #secret {
@@ -97,15 +97,15 @@
       }
 
       .button:active {
-        box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.22);
+        box-shadow: inset -2px -2px 6px 0px rgba(255,255,255,0.22), inset 2px 2px 6px 0px rgba(0,0,0,0.22), 2px 4px 6px 2px rgba(0,0,0,0.22);
         background: #568e8f;
         transition: box-shadow 0.1s;
       }
 
       /* Dark Theme overrides for active button */
       @media (prefers-color-scheme: dark) {
         .button:active {
-          box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.44);
+          box-shadow: inset -2px -2px 6px 0px rgba(255,255,255,0.22), inset 2px 2px 6px 0px rgba(0,0,0,0.22), 2px 4px 6px 2px rgba(0,0,0,0.44);
         }
       }
     </style>

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@`
`34`	`34`	`border-radius: 50vh;`
`35`	`35`	`padding: 0.2em 0.6em 0.2em 0.6em;`
`36`	`36`	`width: fit-content;`
`37`		`- box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.22);`
	`37`	`+ box-shadow: inset -2px -2px 6px 0px rgba(0,0,0,0.22), inset 2px 2px 6px 0px rgba(255,255,255,0.22), 2px 4px 6px 2px rgba(0,0,0,0.22);`
`38`	`38`	`transition: background-position 0s, box-shadow 0.3s;`
`39`	`39`	`background: linear-gradient(110deg, cadetblue 0 40%, darkturquoise, cadetblue 60% 100%);`
`40`	`40`	`background-size: 250% auto;`
`@@ -44,8 +44,8 @@`
`44`	`44`
`45`	`45`	`.button:hover {`
`46`	`46`	`cursor: pointer;`
`47`		`- transition: background-position 0.5s, box-shadow 0.6s;`
`48`		`- box-shadow: 2px 6px 12px 4px rgba(0,0,0,0.2);`
	`47`	`+ transition: background-position 0.5s, box-shadow 0.3s;`
	`48`	`+ box-shadow: inset 0 0 0 0 transparent, inset 0 0 0 0 transparent, 2px 4px 12px 4px rgba(0,0,0,0.2);`
`49`	`49`	`background-position: left 0%;`
`50`	`50`	`}`
`51`	`51`
`@@ -83,11 +83,11 @@`
`83`	`83`	`}`
`84`	`84`
`85`	`85`	`.button {`
`86`		`- box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.44);`
	`86`	`+ box-shadow: inset -2px -2px 6px 0px rgba(0,0,0,0.22), inset 2px 2px 6px 0px rgba(255,255,255,0.22), 2px 4px 6px 2px rgba(0,0,0,0.44);`
`87`	`87`	`}`
`88`	`88`
`89`	`89`	`.button:hover {`
`90`		`- box-shadow: 2px 6px 12px 4px rgba(0,0,0,0.4);`
	`90`	`+ box-shadow: inset 0 0 0 0 transparent, inset 0 0 0 0 transparent, 2px 4px 12px 4px rgba(0,0,0,0.4);`
`91`	`91`	`}`
`92`	`92`
`93`	`93`	`#secret {`
`@@ -97,15 +97,15 @@`
`97`	`97`	`}`
`98`	`98`
`99`	`99`	`.button:active {`
`100`		`- box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.22);`
	`100`	`+ box-shadow: inset -2px -2px 6px 0px rgba(255,255,255,0.22), inset 2px 2px 6px 0px rgba(0,0,0,0.22), 2px 4px 6px 2px rgba(0,0,0,0.22);`
`101`	`101`	`background: #568e8f;`
`102`	`102`	`transition: box-shadow 0.1s;`
`103`	`103`	`}`
`104`	`104`
`105`	`105`	`/* Dark Theme overrides for active button */`
`106`	`106`	`@media (prefers-color-scheme: dark) {`
`107`	`107`	`.button:active {`
`108`		`- box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.44);`
	`108`	`+ box-shadow: inset -2px -2px 6px 0px rgba(255,255,255,0.22), inset 2px 2px 6px 0px rgba(0,0,0,0.22), 2px 4px 6px 2px rgba(0,0,0,0.44);`
`109`	`109`	`}`
`110`	`110`	`}`
`111`	`111`	`</style>`