diff options
| author |  Sebastiaan Zeeff <[email protected]> | 2019-10-18 12:34:09 +0200 |
|---|---|---|
| committer | Sebastiaan Zeeff <[email protected]> | 2019-10-18 12:34:09 +0200 |
| commit | 6670a3ba48dad0b2e6e79d77d780c5ee77773e3e (patch) | |
| tree | 30fdc507353e902f194fa84bfcb7516ea72903fd /pydis_site/static/css/base/notification.css | |
| parent | Prevent double active infractions with constraint (diff) | |
| parent | Add Code of Conduct to navbar submenu (diff) | |
Merge branch 'master' into active-infractions-validation
Diffstat (limited to 'pydis_site/static/css/base/notification.css')
| -rw-r--r-- | pydis_site/static/css/base/notification.css | 99 |
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..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 */ +} |