Add missing CSS for notifications

1 files changed, 99 insertions, 0 deletions

diff --git a/pydis_site/static/css/base/notification.css b/pydis_site/static/css/base/notification.css
new file mode 100644
index 00000000..398379f1
--- /dev/null
+++ b/pydis_site/static/css/base/notification.css
@@ -0,0 +1,99 @@
+/* On-page message styling */
+
+@keyframes message-slide-in {
+    0% {
+        transform: translateX(100%);
+    }
+
+    100% {
+        transform: translateX(0);
+    }
+}
+
+div.messages {
+    animation: 0.5s ease-out 0s 1 message-slide-in;
+    padding: 0.5rem;
+    position: fixed;
+    right: 0;
+    top: 76px;
+
+    z-index: 1000;  /* On top of everything else */
+}
+
+/* Discord light theme inspired notifications */
+
+.notification {
+    background-color: #fdfdfd;  /* Discord embed background */
+    border: #eeeeee 1px solid;  /* Discord embed border */
+    border-left: #4f545c 4px solid;  /* Discord default embed colour */
+    color: #4a4a4a;  /* Bulma default colour */
+}
+
+.notification.is-primary {
+    background-color: #fdfdfd;
+    border-left-color: #7289DA;
+    color: #4a4a4a;  /* Bulma default colour */
+}
+
+.notification.is-info {
+    background-color: #fdfdfd;
+    border-left-color: #1c8ad3;  /* Bulma default colour */
+    color: #4a4a4a;  /* Bulma default colour */
+}
+
+.notification.is-success {
+    background-color: #fdfdfd;
+    border-left-color: #21c65c;
+    color: #4a4a4a;  /* Bulma default colour */
+}
+
+.notification.is-warning {
+    background-color: #fdfdfd;
+    border-left-color: #ffdd57;  /* Bulma default colour */
+    color: #4a4a4a;  /* Bulma default colour */
+}
+
+.notification.is-danger {
+    background-color: #fdfdfd;
+    border-left-color: #ff3860;  /* Bulma default colour */
+    color: #4a4a4a;  /* Bulma default colour */
+}
+
+/* Discord dark theme inspired notifications */
+
+.notification.is-dark {
+    background-color: #33353C;  /* Discord embed background */
+    border: #36393f 1px solid;  /* Discord embed border */
+    border-left: #4f545c 4px solid;  /* Discord default embed colour */
+    color: #fff;  /* Bulma default colour */
+}
+
+.notification.is-dark.is-primary {
+    background-color: #33353C;
+    border-left-color: #7289DA;
+    color: #fff;  /* Bulma default colour */
+}
+
+.notification.is-dark.is-info {
+    background-color: #33353C;
+    border-left-color: #1c8ad3;  /* Bulma default colour */
+    color: #fff;  /* Bulma default colour */
+}
+
+.notification.is-dark.is-success {
+    background-color: #33353C;
+    border-left-color: #21c65c;
+    color: #fff;  /* Bulma default colour */
+}
+
+.notification.is-dark.is-warning {
+    background-color: #33353C;
+    border-left-color: #ffdd57;  /* Bulma default colour */
+    color: #fff;  /* Bulma default colour */
+}
+
+.notification.is-dark.is-danger {
+    background-color: #33353C;
+    border-left-color: #ff3860;  /* Bulma default colour */
+    color: #fff;  /* Bulma default colour */
+}