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 b81ae15030.

* Revert "CSS"

This reverts commit a0f4f769f1.

* css

* revert i18n
This commit is contained in:
maTh
2024-06-12 21:45:16 +02:00
committed by GitHub
parent 493d46759e
commit 35ee123dda
17 changed files with 35 additions and 11 deletions

View File

@@ -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);
}

View File

@@ -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);
}

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;
}

View File

@@ -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;
}

View File

@@ -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 {

View File

@@ -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 {

View File

@@ -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);
}

View File

@@ -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);
}

View File

@@ -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);
}

View File

@@ -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);
}

View File

@@ -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 {

View File

@@ -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 {

View File

@@ -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 {

View File

@@ -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 {

View File

@@ -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 {