Shiny pill style
This commit is contained in:
parent
6af689835d
commit
732244b4b3
26
src/app.css
26
src/app.css
|
@ -745,14 +745,6 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
margin-top: 16px;
|
||||
transform: translate(-50%, 0);
|
||||
font-size: 90%;
|
||||
background-color: var(--button-bg-color);
|
||||
background-image: linear-gradient(
|
||||
160deg,
|
||||
rgba(255, 255, 255, 0.5),
|
||||
rgba(255, 255, 255, 0) 50%
|
||||
);
|
||||
box-shadow: 0 3px 8px -1px var(--drop-shadow-color),
|
||||
0 10px 36px -4px var(--button-bg-blur-color);
|
||||
}
|
||||
.updates-button .icon {
|
||||
vertical-align: top;
|
||||
|
@ -1161,20 +1153,26 @@ meter.donut:is(.danger, .explode):after {
|
|||
color: var(--red-color);
|
||||
}
|
||||
|
||||
/* TOAST */
|
||||
/* SHINY PILL */
|
||||
|
||||
:root .toastify {
|
||||
.shiny-pill {
|
||||
color: var(--button-text-color);
|
||||
text-shadow: 0 -1px var(--drop-shadow-color);
|
||||
background-color: var(--button-bg-color);
|
||||
background-image: linear-gradient(
|
||||
160deg,
|
||||
rgba(255, 255, 255, 0.5),
|
||||
rgba(255, 255, 255, 0) 50%
|
||||
);
|
||||
color: var(--button-text-color);
|
||||
border-radius: 10em;
|
||||
padding: 8px 16px;
|
||||
box-shadow: 0 3px 8px -1px var(--drop-shadow-color),
|
||||
0 10px 36px -4px var(--button-bg-blur-color);
|
||||
0 10px 36px -4px var(--button-bg-blur-color),
|
||||
inset var(--hairline-width) var(--hairline-width) rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* TOAST */
|
||||
|
||||
:root .toastify {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
.toastify-bottom {
|
||||
margin-bottom: env(safe-area-inset-bottom);
|
||||
|
|
|
@ -325,6 +325,7 @@ function App() {
|
|||
states.reloadStatusPage++;
|
||||
setTimeout(() => {
|
||||
const toast = Toastify({
|
||||
className: 'shiny-pill',
|
||||
text: 'Status posted. Check it out.',
|
||||
duration: 10_000, // 10 seconds
|
||||
gravity: 'bottom',
|
||||
|
|
|
@ -275,7 +275,7 @@ function Timeline({
|
|||
!hiddenUI &&
|
||||
showNew && (
|
||||
<button
|
||||
class="updates-button"
|
||||
class="updates-button shiny-pill"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
loadItems(true);
|
||||
|
|
|
@ -165,7 +165,7 @@ function Notifications() {
|
|||
</div>
|
||||
{snapStates.notificationsShowNew && uiState !== 'loading' && (
|
||||
<button
|
||||
class="updates-button"
|
||||
class="updates-button shiny-pill"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
loadNotifications(true);
|
||||
|
|
Loading…
Reference in a new issue