Added new banning system.

it actually works and isn't confusing this time around!

assets/misuzu.css/manage/_manage.css

@@ -24,6 +24,8 @@
     }
 }
 
+@include manage/ban.css;
+@include manage/bans.css;
 @include manage/blacklist.css;
 @include manage/changelog-actions-tags.css;
 @include manage/emote.css;

assets/misuzu.css/manage/ban.css

@@ -0,0 +1,77 @@
+.manage__ban {
+    /**/
+}
+
+.manage__ban__field {
+    margin: 2px;
+    margin-bottom: 8px;
+}
+
+.manage__ban__title {
+    font-size: 1.4em;
+    line-height: 1.5em;
+    padding: 0 4px;
+}
+
+.manage__ban__desc {
+    font-size: .9em;
+    line-height: 1.5em;
+    font-style: italic;
+    border-bottom: 1px solid var(--accent-colour);
+    padding: 2px 4px;
+    margin-bottom: 1px;
+}
+
+.manage__ban__duration {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 5px;
+    gap: 5px;
+}
+.manage__ban__duration__value__custom--hidden {
+    display: none;
+    visibility: hidden;
+}
+
+.manage__ban__severity {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 5px;
+    gap: 5px;
+}
+.manage__ban__severity__slider {
+    max-width: 200px;
+    width: 100%;
+}
+.manage__ban__severity__slider input {
+    width: 100%;
+    margin-top: 2px;
+}
+.manage__ban__severity__display {
+    max-width: 80px;
+    width: 100%;
+}
+.manage__ban__severity__display input {
+    width: 100%;
+    margin-bottom: 2px;
+}
+
+.manage__ban__reason {
+    padding: 2px;
+    width: 100%;
+}
+.manage__ban__reason textarea {
+    min-width: 100%;
+    max-width: 100%;
+    width: 100%;
+    min-height: 100px;
+}
+
+.manage__ban__actions {
+    display: flex;
+    justify-content: center;
+    padding: 10px;
+    padding-top: 0;
+}

assets/misuzu.css/manage/bans.css

@@ -0,0 +1,122 @@
+.manage__bans__pagination {
+    margin: 2px;
+}
+
+.manage__bans__actions {
+    display: flex;
+    gap: 2px;
+    margin: 2px;
+}
+
+.manage__bans__item {
+    padding: 0 2px;
+    margin: 2px;
+    border-top: 1px solid var(--accent-colour);
+}
+.manage__bans__item:not(:last-child) {
+    border-bottom: 1px solid var(--accent-colour);
+}
+
+.manage__bans__item__header {
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+}
+
+.manage__bans__item__attributes {
+    flex-grow: 1;
+    flex-shrink: 1;
+    display: flex;
+    gap: 12px;
+    margin: 0 4px;
+    flex-wrap: wrap;
+}
+
+.manage__bans__item__attribute {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+}
+.manage__bans__item__created__icon,
+.manage__bans__item__expires__icon,
+.manage__bans__item__permanent__icon {
+    font-size: 16px;
+}
+.manage__bans__item__expires__status span {
+    padding: 2px 4px;
+    border-radius: 2px;
+}
+.manage__bans__item__expires__status--active span {
+    background: rgba(255, 100, 100, 0.2);
+    font-weight: 700;
+}
+.manage__bans__item__expires__status--expired span {
+    background: rgba(100, 255, 100, 0.2);
+}
+.manage__bans__item__permanent {
+    background: rgba(255, 200, 100, 0.2);
+    border-radius: 2px;
+    padding: 0 4px;
+}
+.manage__bans__item__permanent__time {
+    font-weight: 700;
+}
+
+.manage__bans__item__actions {
+    display: flex;
+    flex-grow: 0;
+    flex-shrink: 0;
+    gap: 1px;
+    padding: 1px;
+    margin: 1px;
+}
+.manage__bans__item__action {
+    width: 36px;
+    height: 36px;
+}
+
+.manage__bans__item__author a,
+.manage__bans__item__user a {
+    color: inherit;
+    text-decoration: none;
+}
+.manage__bans__item__author__name a,
+.manage__bans__item__user__name a {
+    font-weight: bold;
+    display: inline-block;
+    padding-top: 2px;
+    border-bottom: 2px solid var(--user-colour, #fff);
+}
+.manage__bans__item__user__filter a {
+    padding: 2px 4px;
+    border-radius: 2px;
+    background: rgba(255, 255, 255, 0.2);
+    transition: background .2s;
+}
+.manage__bans__item__user__filter a:hover,
+.manage__bans__item__user__filter a:focus {
+    background: rgba(255, 255, 255, 0.4);
+}
+.manage__bans__item__user__filter a:active {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.manage__bans__item__reason {
+    margin: 1px 4px;
+    padding: 2px 4px;
+    border-top: 1px solid var(--accent-colour);
+}
+.manage__bans__item__reason__title {
+    font-size: .9em;
+    line-height: 1.5em;
+    font-style: italic;
+}
+.manage__bans__item__reason__body {
+    padding-left: 4px;
+    border-left: 2px solid var(--accent-colour);
+}
+
+.manage__bans__item__noreason {
+    font-size: .9em;
+    font-style: italic;
+}

assets/misuzu.css/warning.css

@@ -9,10 +9,21 @@
     color: #fff;
     text-align: center;
 }
+.warning--red {
+    --start-colour: #ff3d3d;
+    --end-colour: #f00;
+}
+.warning--bigger {
+    font-size: 1.4em;
+    line-height: 1.5em;
+}
 .warning__content {
     background-color: rgba(17, 17, 17, .9);
     padding: 2px 5px;
 }
+.warning--bigger .warning__content {
+    padding: 8px 20px;
+}
 .warning__link {
     color: inherit;
     text-decoration: underline dotted;