Sticky buttons (#6304)

* make it sticky

* Origine theme

* fix

* config option

* i18n

* CSS

* fix category config

* some themes and some fixes

* grey behind the buttons

* more themes

* Revert "config option"

This reverts commit b81ae15030979ebfcfdce070ce8b36c4b9444155.

* Revert "CSS"

This reverts commit a0f4f769f17298f10cc2279c57c0688d47844d83.

* css

* revert i18n

p/themes/Alternative-Dark/adark.css

@@ -4,6 +4,7 @@
 /*============*/
 :root {
 	--background-color-dark: #171717;
+	--background-color-dark-transparent: #171717aa;
 	--background-color-middle: #1f1f1f;
 	--background-color-light: #262626;
 	--background-color-hover: #1d242f;
@@ -140,7 +141,7 @@ th {
 /*=== Forms */
 .form-group.form-actions {
 	padding: 5px 0;
-	background: var(--background-color-dark);
+	background-color: var(--background-color-dark-transparent);
 	border-top: 1px solid var(--border-color-dark);
 }
 

p/themes/Alternative-Dark/adark.rtl.css

@@ -4,6 +4,7 @@
 /*============*/
 :root {
 	--background-color-dark: #171717;
+	--background-color-dark-transparent: #171717aa;
 	--background-color-middle: #1f1f1f;
 	--background-color-light: #262626;
 	--background-color-hover: #1d242f;
@@ -140,7 +141,7 @@ th {
 /*=== Forms */
 .form-group.form-actions {
 	padding: 5px 0;
-	background: var(--background-color-dark);
+	background-color: var(--background-color-dark-transparent);
 	border-top: 1px solid var(--border-color-dark);
 }
 

p/themes/Dark/dark.css

@@ -14,6 +14,7 @@
 	/** Origine **/
 	--background-color-light: #1c1c1c;
 	--background-color-light-shadowed: inherit;
+	--background-color-light-shadowed-transparent: #262626aa;
 	--background-color-grey: #1c1c1c;
 	--background-color-hover: #26303f;
 	--background-color-flux-hover: #111;

p/themes/Dark/dark.rtl.css

@@ -14,6 +14,7 @@
 	/** Origine **/
 	--background-color-light: #1c1c1c;
 	--background-color-light-shadowed: inherit;
+	--background-color-light-shadowed-transparent: #262626aa;
 	--background-color-grey: #1c1c1c;
 	--background-color-hover: #26303f;
 	--background-color-flux-hover: #111;

p/themes/Flat/flat.css

@@ -112,7 +112,7 @@ th {
 .form-group.form-actions {
 	margin: 15px 0 25px;
 	padding: 5px 0;
-	background: #ecf0f1;
+	background-color: #e6ecedaa;
 	border-top: 3px solid #bdc3c7;
 	border-radius: 5px 5px 0 0;
 }

p/themes/Flat/flat.rtl.css

@@ -112,7 +112,7 @@ th {
 .form-group.form-actions {
 	margin: 15px 0 25px;
 	padding: 5px 0;
-	background: #ecf0f1;
+	background-color: #e6ecedaa;
 	border-top: 3px solid #bdc3c7;
 	border-radius: 5px 5px 0 0;
 }

p/themes/Nord/nord.css

@@ -31,6 +31,7 @@
 	--nord15-aurora: #b48ead;
 
 	--main-background: var(--nordX-background);
+	--main-background-transparent: #242933cc;
 	--accent-bg: var(--nord0-polarnight);
 	--accent-border: var(--nord0-polarnight);
 	--light-bg: var(--nord1-polarnight);
@@ -190,6 +191,7 @@ table th, table td {
 
 .form-group.form-actions {
 	margin: 2rem 0 5rem 0;
+	background-color: var(--main-background-transparent);
 }
 
 .form-group .group-name {

p/themes/Nord/nord.rtl.css

@@ -31,6 +31,7 @@
 	--nord15-aurora: #b48ead;
 
 	--main-background: var(--nordX-background);
+	--main-background-transparent: #242933cc;
 	--accent-bg: var(--nord0-polarnight);
 	--accent-border: var(--nord0-polarnight);
 	--light-bg: var(--nord1-polarnight);
@@ -190,6 +191,7 @@ table th, table td {
 
 .form-group.form-actions {
 	margin: 2rem 0 5rem 0;
+	background-color: var(--main-background-transparent);
 }
 
 .form-group .group-name {

p/themes/Origine/origine.css

@@ -9,6 +9,7 @@
 	--background-color-light-gradient2: #eee;
 	--background-color-light: #fff;
 	--background-color-light-shadowed: #f6f6f6;
+	--background-color-light-shadowed-transparent: #f0f0f0a8;
 	--background-color-grey: #f0f0f0;
 	--background-color-hover: #f6f6f6;
 
@@ -177,7 +178,7 @@ th {
 .form-group.form-actions {
 	margin-bottom: 40px;
 	padding: 5px 0;
-	background-color: var(--background-color-light-shadowed);
+	background-color: var(--background-color-light-shadowed-transparent);
 	border-top: 1px solid var(--border-color);
 }
 

p/themes/Origine/origine.rtl.css

@@ -9,6 +9,7 @@
 	--background-color-light-gradient2: #eee;
 	--background-color-light: #fff;
 	--background-color-light-shadowed: #f6f6f6;
+	--background-color-light-shadowed-transparent: #f0f0f0a8;
 	--background-color-grey: #f0f0f0;
 	--background-color-hover: #f6f6f6;
 
@@ -177,7 +178,7 @@ th {
 .form-group.form-actions {
 	margin-bottom: 40px;
 	padding: 5px 0;
-	background-color: var(--background-color-light-shadowed);
+	background-color: var(--background-color-light-shadowed-transparent);
 	border-top: 1px solid var(--border-color);
 }
 

p/themes/Pafat/pafat.css

@@ -21,6 +21,7 @@
 	--background-color-white: #fff;
 	--background-color-grey-light: #fafafa;
 	--background-color-grey: #f4f4f4;
+	--background-color-grey-transparent: #f3f3f3bb;
 	--background-color-grey-hover: #f0f0f0;
 	--background-color-grey-button-active: #eee;
 
@@ -164,7 +165,7 @@ th {
 /*=== Forms */
 .form-group.form-actions {
 	padding: 5px 0;
-	background-color: var(--background-color-grey);
+	background-color: var(--background-color-grey-transparent);
 	border-top: 1px solid var(--border-color-grey-light);
 }
 

p/themes/Pafat/pafat.rtl.css

@@ -21,6 +21,7 @@
 	--background-color-white: #fff;
 	--background-color-grey-light: #fafafa;
 	--background-color-grey: #f4f4f4;
+	--background-color-grey-transparent: #f3f3f3bb;
 	--background-color-grey-hover: #f0f0f0;
 	--background-color-grey-button-active: #eee;
 
@@ -164,7 +165,7 @@ th {
 /*=== Forms */
 .form-group.form-actions {
 	padding: 5px 0;
-	background-color: var(--background-color-grey);
+	background-color: var(--background-color-grey-transparent);
 	border-top: 1px solid var(--border-color-grey-light);
 }
 

p/themes/Swage/swage.css

@@ -17,6 +17,7 @@
 	--color-border-bad: #b0425b;
 	--color-background-light: #fcfcfc;
 	--color-background-light-darker: #e3e3e3;
+	--color-background-light-darker-transparent: rgba(217, 217, 217, 0.7333333333);
 	--color-background-dark: #181621;
 	--color-background-nav: #0062be;
 	--color-background-nav-darker: #00488b;
@@ -181,7 +182,7 @@ form th {
 .form-group.form-actions {
 	margin: 15px 0 25px;
 	padding: 5px 0;
-	background-color: var(--color-background-light-darker);
+	background-color: var(--color-background-light-darker-transparent);
 	border-top: 3px solid var(--color-border-light-darker);
 }
 .form-group.form-actions .btn {

p/themes/Swage/swage.rtl.css

@@ -17,6 +17,7 @@
 	--color-border-bad: #b0425b;
 	--color-background-light: #fcfcfc;
 	--color-background-light-darker: #e3e3e3;
+	--color-background-light-darker-transparent: rgba(217, 217, 217, 0.7333333333);
 	--color-background-dark: #181621;
 	--color-background-nav: #0062be;
 	--color-background-nav-darker: #00488b;
@@ -181,7 +182,7 @@ form th {
 .form-group.form-actions {
 	margin: 15px 0 25px;
 	padding: 5px 0;
-	background-color: var(--color-background-light-darker);
+	background-color: var(--color-background-light-darker-transparent);
 	border-top: 3px solid var(--color-border-light-darker);
 }
 .form-group.form-actions .btn {

p/themes/Swage/swage.scss

@@ -11,6 +11,7 @@ $color_alert:	#fa8052;
 $color_good:	#5eaabf;
 $color_bad:		#b0425b;
 $color_grey:	#e3e3e3;
+$color_grey_transparent: #d9d9d9bb;
 $color_stared:	#fff6da;
 $color_unread:	#fff3ed;
 $color_hover:	#fff;
@@ -37,6 +38,7 @@ $color_hover:	#fff;
 
 	--color-background-light: #{$color_light};
 	--color-background-light-darker: #{color.adjust(  $color_light,  $lightness: -10%)};
+	--color-background-light-darker-transparent: #{$color_grey_transparent};
 	--color-background-dark: #{$color_text};
 	--color-background-nav: #{$color_nav};
 	--color-background-nav-darker: #{color.adjust(  $color_nav,  $lightness: -10%)};
@@ -223,7 +225,7 @@ form {
 	&.form-actions {
 		margin: 15px 0 25px;
 		padding: 5px 0;
-		background-color: var(--color-background-light-darker);
+		background-color: var(--color-background-light-darker-transparent);
 		border-top: 3px solid var(--color-border-light-darker);
 
 		.btn {

p/themes/base-theme/frss.css

@@ -431,7 +431,11 @@ td.numeric {
 }
 
 .form-group.form-actions {
+	position: sticky;
+	bottom: 0;
+	backdrop-filter: blur(2px) grayscale(1);
 	min-width: 250px;
+	z-index: 80;
 }
 
 .form-group .group-name {

p/themes/base-theme/frss.rtl.css

@@ -431,7 +431,11 @@ td.numeric {
 }
 
 .form-group.form-actions {
+	position: sticky;
+	bottom: 0;
+	backdrop-filter: blur(2px) grayscale(1);
 	min-width: 250px;
+	z-index: 80;
 }
 
 .form-group .group-name {