Django Allauth (#201) (#274)

Django Allauth (#201)

2 files changed, 117 insertions, 0 deletions

diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css
index ce1503a3..3ca6b2a7 100644
--- a/pydis_site/static/css/base/base.css
+++ b/pydis_site/static/css/base/base.css
@@ -70,3 +70,21 @@ div.card.has-equal-height {
 #pydis-text {
     font-weight: bold;
 }
+
+
+/* Navbar "more" menu should be on top of messages. I could not figure
+ * out a better way to fix this one without just applying a high z-index
+ * to everything - anyone have any better ideas? Does it matter since the
+ * navbar should be above everything anyway?
+ */
+
+.navbar, .navbar * {
+    z-index: 1001;
+}
+
+/* Fix for logout form submit button in navbar */
+
+button.is-size-navbar-menu {
+    font-size: 14px;
+}
+
diff --git a/pydis_site/static/css/base/notification.css b/pydis_site/static/css/base/notification.css
new file mode 100644
index 00000000..b2824641
--- /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 */
+
+.messages .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 */
+}
+
+.messages .notification.is-primary {
+    background-color: #fdfdfd;
+    border-left-color: #7289DA;
+    color: #4a4a4a;  /* Bulma default colour */
+}
+
+.messages .notification.is-info {
+    background-color: #fdfdfd;
+    border-left-color: #1c8ad3;  /* Bulma default colour */
+    color: #4a4a4a;  /* Bulma default colour */
+}
+
+.messages .notification.is-success {
+    background-color: #fdfdfd;
+    border-left-color: #21c65c;
+    color: #4a4a4a;  /* Bulma default colour */
+}
+
+.messages .notification.is-warning {
+    background-color: #fdfdfd;
+    border-left-color: #ffdd57;  /* Bulma default colour */
+    color: #4a4a4a;  /* Bulma default colour */
+}
+
+.messages .notification.is-danger {
+    background-color: #fdfdfd;
+    border-left-color: #ff3860;  /* Bulma default colour */
+    color: #4a4a4a;  /* Bulma default colour */
+}
+
+/* Discord dark theme inspired notifications */
+
+.messages .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 */
+}
+
+.messages .notification.is-dark.is-primary {
+    background-color: #33353C;
+    border-left-color: #7289DA;
+    color: #fff;  /* Bulma default colour */
+}
+
+.messages .notification.is-dark.is-info {
+    background-color: #33353C;
+    border-left-color: #1c8ad3;  /* Bulma default colour */
+    color: #fff;  /* Bulma default colour */
+}
+
+.messages .notification.is-dark.is-success {
+    background-color: #33353C;
+    border-left-color: #21c65c;
+    color: #fff;  /* Bulma default colour */
+}
+
+.messages .notification.is-dark.is-warning {
+    background-color: #33353C;
+    border-left-color: #ffdd57;  /* Bulma default colour */
+    color: #fff;  /* Bulma default colour */
+}
+
+.messages .notification.is-dark.is-danger {
+    background-color: #33353C;
+    border-left-color: #ff3860;  /* Bulma default colour */
+    color: #fff;  /* Bulma default colour */
+}