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="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="style.css">
|
||||||
<link rel="stylesheet" type="text/css" href="css/st-tailwind.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/tags.css">
|
||||||
<link rel="stylesheet" type="text/css" href="css/rm-groups.css">
|
<link rel="stylesheet" type="text/css" href="css/rm-groups.css">
|
||||||
<link rel="stylesheet" type="text/css" href="css/group-avatars.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);
|
box-shadow: inset 0 0 5px var(--SmartThemeQuoteColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes flash {
|
|
||||||
|
|
||||||
20%,
|
|
||||||
60%,
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
0%,
|
|
||||||
40%,
|
|
||||||
80% {
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.flash {
|
.flash {
|
||||||
animation-name: flash;
|
animation-name: flash;
|
||||||
}
|
}
|
||||||
|
|
@ -1167,18 +1152,6 @@ select {
|
||||||
transition: clip-path 200ms;
|
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 {
|
#form_sheld.isExecutingCommandsFromChatInput.script_paused #send_textarea {
|
||||||
animation-name: script_progress_pulse;
|
animation-name: script_progress_pulse;
|
||||||
animation-duration: 1500ms;
|
animation-duration: 1500ms;
|
||||||
|
|
@ -3049,116 +3022,6 @@ grammarly-extension {
|
||||||
overflow-x: hidden;
|
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 {
|
.rm_stat_block {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
@ -3204,8 +3067,7 @@ dialog {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#dialogue_popup_controls,
|
#dialogue_popup_controls {
|
||||||
.dialogue_popup_controls {
|
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
|
|
@ -3214,18 +3076,14 @@ dialog {
|
||||||
|
|
||||||
#bulk_tag_popup_reset,
|
#bulk_tag_popup_reset,
|
||||||
#bulk_tag_popup_remove_mutual,
|
#bulk_tag_popup_remove_mutual,
|
||||||
#dialogue_popup_ok,
|
#dialogue_popup_ok {
|
||||||
.dialogue_popup_ok,
|
|
||||||
.menu_button.dialogue_popup_ok {
|
|
||||||
background-color: var(--crimson70a);
|
background-color: var(--crimson70a);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
#bulk_tag_popup_reset:hover,
|
#bulk_tag_popup_reset:hover,
|
||||||
#bulk_tag_popup_remove_mutual:hover,
|
#bulk_tag_popup_remove_mutual:hover,
|
||||||
#dialogue_popup_ok:hover,
|
#dialogue_popup_ok:hover {
|
||||||
.dialogue_popup_ok:hover,
|
|
||||||
.menu_button.dialogue_popup_ok:hover {
|
|
||||||
background-color: var(--crimson-hover);
|
background-color: var(--crimson-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -3233,15 +3091,13 @@ dialog {
|
||||||
max-height: 70vh;
|
max-height: 70vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
#dialogue_popup_input,
|
#dialogue_popup_input {
|
||||||
.dialogue_popup_input {
|
|
||||||
margin: 10px 0 0 0;
|
margin: 10px 0 0 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#bulk_tag_popup_cancel,
|
#bulk_tag_popup_cancel,
|
||||||
#dialogue_popup_cancel,
|
#dialogue_popup_cancel {
|
||||||
.dialogue_popup_cancel {
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -3283,15 +3139,6 @@ dialog {
|
||||||
text-align: center;
|
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,
|
.avatar_div .menu_button,
|
||||||
.form_create_bottom_buttons_block .menu_button {
|
.form_create_bottom_buttons_block .menu_button {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
@ -4188,17 +4035,6 @@ h5 {
|
||||||
animation: infinite-spinning 1s ease-out 0s infinite normal;
|
animation: infinite-spinning 1s ease-out 0s infinite normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* HEINOUS */
|
|
||||||
@keyframes infinite-spinning {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#export_character_div {
|
#export_character_div {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 340px auto;
|
grid-template-columns: 340px auto;
|
||||||
|
|
@ -4352,24 +4188,6 @@ body.big-avatars .missing-avatar {
|
||||||
margin: 5px 0;
|
margin: 5px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes ellipsis {
|
|
||||||
0% {
|
|
||||||
content: ""
|
|
||||||
}
|
|
||||||
|
|
||||||
25% {
|
|
||||||
content: "."
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
content: ".."
|
|
||||||
}
|
|
||||||
|
|
||||||
75% {
|
|
||||||
content: "..."
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.warning {
|
.warning {
|
||||||
color: var(--warning);
|
color: var(--warning);
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue