Shiny pill style

This commit is contained in:
Lim Chee Aun 2023-02-23 15:56:58 +08:00
parent 6af689835d
commit 732244b4b3
4 changed files with 15 additions and 16 deletions

View file

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

View file

@ -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',

View file

@ -275,7 +275,7 @@ function Timeline({
!hiddenUI &&
showNew && (
<button
class="updates-button"
class="updates-button shiny-pill"
type="button"
onClick={() => {
loadItems(true);

View file

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