mirror of
https://github.com/FreshRSS/FreshRSS.git
synced 2026-03-11 02:47:44 -04:00
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 commitb81ae15030. * Revert "CSS" This reverts commita0f4f769f1. * css * revert i18n
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user