fade-in window transition + faded bg overlay

assets/scss/styles/components/CenteredPage.scss

@@ -12,6 +12,7 @@ $base-height: 1080;
     bottom: 0;
     left: 0;
     padding: space($page-margin);
+    background-color: $color-border-soft;
 }
 
 .centered-page__modal {

assets/scss/styles/global.scss

@@ -14,6 +14,16 @@ body
 	font-family: $font-stack;
 }
 
+.rmlui-window {
+    opacity: 1;
+    transition: opacity 0.1s quadratic-in-out;
+
+    &--hidden {
+        opacity: 0;
+        transition: none;
+    }
+}
+
 *, *:before, *:after {
     box-sizing: border-box;
 }

src/ui/ui_renderer.cpp

@@ -650,6 +650,10 @@ struct {
 
         void swap_document(recomp::Menu menu) {
             if (current_document != nullptr) {
+                Rml::Element* window_el = current_document->GetElementById("window");
+                if (window_el != nullptr) {
+                    window_el->SetClassNames("rmlui-window rmlui-window--hidden");
+                }
                 current_document->Hide();
             }
 
@@ -657,6 +661,10 @@ struct {
             if (find_it != documents.end()) {
                 assert(find_it->second && "Document for menu not loaded!");
                 current_document = find_it->second;
+                Rml::Element* window_el = current_document->GetElementById("window");
+                if (window_el != nullptr) {
+                    window_el->SetClassNames("rmlui-window");
+                }
                 current_document->Show();
             }
             else {