Create popup and animation css files
This commit is contained in:
Wolfsblvt
parent
1c6671df31
commit
d3327f7829
|
|
@ -0,0 +1,109 @@
|
|||
/* Fade animations with opacity */
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pop animations with opacity and vertical scaling */
|
||||
@keyframes pop-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
/* Make the scaling faster on pop-in, otherwise it looks a bit weird */
|
||||
33% {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pop-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Flashing for highlighting animation */
|
||||
@keyframes flash {
|
||||
|
||||
20%,
|
||||
60%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
0%,
|
||||
40%,
|
||||
80% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ellipsis animation */
|
||||
@keyframes ellipsis {
|
||||
0% {
|
||||
content: ""
|
||||
}
|
||||
|
||||
25% {
|
||||
content: "."
|
||||
}
|
||||
|
||||
50% {
|
||||
content: ".."
|
||||
}
|
||||
|
||||
75% {
|
||||
content: "..."
|
||||
}
|
||||
}
|
||||
|
||||
/* HEINOUS */
|
||||
@keyframes infinite-spinning {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* STscript animation */
|
||||
@keyframes script_progress_pulse {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
border-top-color: var(--progColor);
|
||||
}
|
||||
|
||||
50% {
|
||||
border-top-color: var(--progFlashColor);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
dialog {
|
||||
color: var(--SmartThemeBodyColor);
|
||||
}
|
||||
|
||||
/* Closed state of the dialog */
|
||||
.dialogue_popup {
|
||||
width: 500px;
|
||||
text-align: center;
|
||||
box-shadow: 0px 0px 14px var(--black70a);
|
||||
border: 1px solid var(--SmartThemeBorderColor);
|
||||
padding: 4px 14px;
|
||||
background-color: var(--SmartThemeBlurTintColor);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/* Overflow visible so elements (like toasts) can appear outside of the dialog. '.popup_content' is hiding overflow for the real content. */
|
||||
overflow: visible;
|
||||
|
||||
/* Fix weird animation issue with font-scaling during popup open */
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0);
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
|
||||
.dialogue_popup .popup_content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dialogue_popup .dialogue_popup_text {
|
||||
padding: 0 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dialogue_popup.vertical_scrolling_dialogue_popup .dialogue_popup_text {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dialogue_popup.horizontal_scrolling_dialogue_popup .dialogue_popup_text {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* Open state of the dialog */
|
||||
.dialogue_popup[open] {
|
||||
animation: pop-in var(--animation-duration-slow) ease-in-out;
|
||||
}
|
||||
|
||||
.dialogue_popup[closing] {
|
||||
animation: pop-out var(--animation-duration-slow) ease-in-out;
|
||||
}
|
||||
|
||||
.dialogue_popup[open]::backdrop {
|
||||
animation: fade-in var(--animation-duration-slow) ease-in-out;
|
||||
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
|
||||
-webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
|
||||
background-color: var(--black30a);
|
||||
}
|
||||
|
||||
.dialogue_popup[closing]::backdrop {
|
||||
animation: fade-out var(--animation-duration-slow) ease-in-out;
|
||||
}
|
||||
|
||||
/* Fix toastr in dialogs by actually placing it at the top of the screen via transform */
|
||||
.dialogue_popup #toast-container {
|
||||
height: 100svh;
|
||||
top: calc(50% + var(--topBarBlockSize));
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.dialogue_popup_input {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.dialogue_popup_controls {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.menu_button.menu_button_default {
|
||||
box-shadow: 0 0 5px var(--white20a);
|
||||
}
|
||||
|
||||
.menu_button.dialogue_popup_ok {
|
||||
background-color: var(--crimson70a);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu_button.menu_button_custom {
|
||||
/** Custom buttons should not scale to smallest size, otherwise they will always break to multiline */
|
||||
width: unset;
|
||||
}
|
||||
|
|
@ -32,6 +32,8 @@
|
|||
<link rel="apple-touch-icon" sizes="144x144" href="img/apple-icon-144x144.png" />
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/st-tailwind.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/animations.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/popup.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/tags.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/rm-groups.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/group-avatars.css">
|
||||
|
|
|
|||
192
public/style.css
192
public/style.css
|
|
@ -207,21 +207,6 @@ table.responsiveTable {
|
|||
box-shadow: inset 0 0 5px var(--SmartThemeQuoteColor);
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
|
||||
20%,
|
||||
60%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
0%,
|
||||
40%,
|
||||
80% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.flash {
|
||||
animation-name: flash;
|
||||
}
|
||||
|
|
@ -1167,18 +1152,6 @@ select {
|
|||
transition: clip-path 200ms;
|
||||
}
|
||||
|
||||
@keyframes script_progress_pulse {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
border-top-color: var(--progColor);
|
||||
}
|
||||
|
||||
50% {
|
||||
border-top-color: var(--progFlashColor);
|
||||
}
|
||||
}
|
||||
|
||||
#form_sheld.isExecutingCommandsFromChatInput.script_paused #send_textarea {
|
||||
animation-name: script_progress_pulse;
|
||||
animation-duration: 1500ms;
|
||||
|
|
@ -3049,116 +3022,6 @@ grammarly-extension {
|
|||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
dialog {
|
||||
color: var(--SmartThemeBodyColor);
|
||||
}
|
||||
|
||||
/* Closed state of the dialog */
|
||||
.dialogue_popup {
|
||||
width: 500px;
|
||||
text-align: center;
|
||||
box-shadow: 0px 0px 14px var(--black70a);
|
||||
border: 1px solid var(--SmartThemeBorderColor);
|
||||
padding: 4px 14px;
|
||||
background-color: var(--SmartThemeBlurTintColor);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/* Overflow visible so elements (like toasts) can appear outside of the dialog. '.popup_content' is hiding overflow for the real content. */
|
||||
overflow: visible;
|
||||
|
||||
/* Fix weird animation issue with font-scaling during popup open */
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0);
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
|
||||
.dialogue_popup .popup_content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dialogue_popup .dialogue_popup_text {
|
||||
padding: 0 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dialogue_popup.vertical_scrolling_dialogue_popup .dialogue_popup_text {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dialogue_popup.horizontal_scrolling_dialogue_popup .dialogue_popup_text {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* Open state of the dialog */
|
||||
.dialogue_popup[open] {
|
||||
animation: pop-in var(--animation-duration-slow) ease-in-out;
|
||||
}
|
||||
|
||||
.dialogue_popup[closing] {
|
||||
animation: pop-out var(--animation-duration-slow) ease-in-out;
|
||||
}
|
||||
|
||||
.dialogue_popup[open]::backdrop {
|
||||
animation: fade-in var(--animation-duration-slow) ease-in-out;
|
||||
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
|
||||
-webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
|
||||
background-color: var(--black30a);
|
||||
}
|
||||
|
||||
.dialogue_popup[closing]::backdrop {
|
||||
animation: fade-out var(--animation-duration-slow) ease-in-out;
|
||||
}
|
||||
|
||||
/* Animation keyframes */
|
||||
@keyframes fade-in {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
@keyframes fade-out {
|
||||
0% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
@keyframes pop-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
/* Make the scaling faster on pop-in, otherwise it looks a bit weird */
|
||||
33% {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pop-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Fix toastr in dialogs by actually placing it at the top of the screen via transform */
|
||||
.dialogue_popup #toast-container {
|
||||
height: 100svh;
|
||||
top: calc(50% + var(--topBarBlockSize));
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.rm_stat_block {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -3204,8 +3067,7 @@ dialog {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
#dialogue_popup_controls,
|
||||
.dialogue_popup_controls {
|
||||
#dialogue_popup_controls {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
|
|
@ -3214,18 +3076,14 @@ dialog {
|
|||
|
||||
#bulk_tag_popup_reset,
|
||||
#bulk_tag_popup_remove_mutual,
|
||||
#dialogue_popup_ok,
|
||||
.dialogue_popup_ok,
|
||||
.menu_button.dialogue_popup_ok {
|
||||
#dialogue_popup_ok {
|
||||
background-color: var(--crimson70a);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#bulk_tag_popup_reset:hover,
|
||||
#bulk_tag_popup_remove_mutual:hover,
|
||||
#dialogue_popup_ok:hover,
|
||||
.dialogue_popup_ok:hover,
|
||||
.menu_button.dialogue_popup_ok:hover {
|
||||
#dialogue_popup_ok:hover {
|
||||
background-color: var(--crimson-hover);
|
||||
}
|
||||
|
||||
|
|
@ -3233,15 +3091,13 @@ dialog {
|
|||
max-height: 70vh;
|
||||
}
|
||||
|
||||
#dialogue_popup_input,
|
||||
.dialogue_popup_input {
|
||||
#dialogue_popup_input {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#bulk_tag_popup_cancel,
|
||||
#dialogue_popup_cancel,
|
||||
.dialogue_popup_cancel {
|
||||
#dialogue_popup_cancel {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -3283,15 +3139,6 @@ dialog {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.menu_button.menu_button_default {
|
||||
box-shadow: 0 0 5px var(--white20a);
|
||||
}
|
||||
|
||||
.menu_button.menu_button_custom {
|
||||
/** Custom buttons should not scale to smallest size, otherwise they will always break to multiline */
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.avatar_div .menu_button,
|
||||
.form_create_bottom_buttons_block .menu_button {
|
||||
font-weight: bold;
|
||||
|
|
@ -4188,17 +4035,6 @@ h5 {
|
|||
animation: infinite-spinning 1s ease-out 0s infinite normal;
|
||||
}
|
||||
|
||||
/* HEINOUS */
|
||||
@keyframes infinite-spinning {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#export_character_div {
|
||||
display: grid;
|
||||
grid-template-columns: 340px auto;
|
||||
|
|
@ -4352,24 +4188,6 @@ body.big-avatars .missing-avatar {
|
|||
margin: 5px 0;
|
||||
}
|
||||
|
||||
@keyframes ellipsis {
|
||||
0% {
|
||||
content: ""
|
||||
}
|
||||
|
||||
25% {
|
||||
content: "."
|
||||
}
|
||||
|
||||
50% {
|
||||
content: ".."
|
||||
}
|
||||
|
||||
75% {
|
||||
content: "..."
|
||||
}
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: var(--warning);
|
||||
font-weight: bolder;
|
||||
|
|
|
|||
Loading…
Reference in New Issue