e3f0ec56a2
Places that used alert() now use a custom dialog. Also the change username modal has been remade. Also styles some elements. These aren't final, more just to actually style them. I would like to use jsx or osmething instead of stuffing these in the html, especially since it would allow us to single-source-of-truth i18n (removing our second-source-of-truth in the i18n module that statically replace stuff) in a lot more places. and make other code a lot less iffy. we do NOT need react or some shit if we do that. just nano-jsx, or something even simpler is more than good enough, and should keep us in our "100 kb smaller" track
45 lines
790 B
SCSS
45 lines
790 B
SCSS
// for our new <dialog> based modals
|
|
@import 'colors-dark';
|
|
|
|
/* a bit of a "lazy" curve. should probably be in a shared file */
|
|
@keyframes dialogFadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
35% {
|
|
opacity: 0.75;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// don't really know how i can animate "out",
|
|
// at least without hacks, but oh well
|
|
//
|
|
// this will also probably be snappier than the mess that is
|
|
// the bootstrap modals..
|
|
|
|
dialog::backdrop {
|
|
animation: dialogFadeIn 0.3s;
|
|
background-color: rgba(0, 0, 0, 0.65);
|
|
}
|
|
|
|
dialog {
|
|
@extend .root;
|
|
|
|
color: inherit;
|
|
background-color: $root-fg-color $card-background-color;
|
|
border: none;
|
|
border-radius: 4px;
|
|
box-shadow: 0px 0px 8px 0px $root-fg-color $card-box-shadow-color;
|
|
}
|
|
|
|
:modal {
|
|
animation: dialogFadeIn 0.2s;
|
|
}
|
|
|
|
.dialog-alignright {
|
|
float: right;
|
|
}
|