From 4907f5c10935f02e18f4bf8f63d112be93c050a5 Mon Sep 17 00:00:00 2001
From: Jason McBrayer <jmcbray@carcosa.net>
Date: Thu, 1 Nov 2018 10:24:59 -0400
Subject: [PATCH] Make toot modal work in brutalist themes

---
 brutaldon/static/css/fullbrutalism.css  | 39 +++++++++++++++++++++++++
 brutaldon/static/css/minimal-large.css  | 37 +++++++++++++++++++++++
 brutaldon/static/css/vt240don-amber.css | 36 +++++++++++++++++++++++
 brutaldon/static/css/vt240don-green.css | 35 ++++++++++++++++++++++
 4 files changed, 147 insertions(+)

diff --git a/brutaldon/static/css/fullbrutalism.css b/brutaldon/static/css/fullbrutalism.css
index 841ee7f..854af7b 100644
--- a/brutaldon/static/css/fullbrutalism.css
+++ b/brutaldon/static/css/fullbrutalism.css
@@ -300,3 +300,42 @@ img.emoji
     max-width: 1.5rem;
     vertical-align: text-bottom;
 }
+
+.modal {
+	  -webkit-box-align: center;
+	  -ms-flex-align: center;
+	  align-items: center;
+	  display: none;
+	  -webkit-box-pack: center;
+	  -ms-flex-pack: center;
+	  justify-content: center;
+	  overflow: hidden;
+	  position: fixed;
+    z-index: 40;
+}
+.modal-background {
+	  position: absolute;
+	  background-color: rgba(10,10,10,.86);
+}
+.modal, .modal-background {
+	  bottom: 0;
+	  left: 0;
+	  right: 0;
+	  top: 0;
+}
+
+.modal-content
+{
+    z-index: 60;
+    background-color: #CCC;
+    color: #000;
+    padding: 1ex;
+    border: 8px ridge #CCC;
+    max-height: 90vh;
+    overflow: auto;
+}
+
+.modal.is-active {
+	  display: flex;
+}
+
diff --git a/brutaldon/static/css/minimal-large.css b/brutaldon/static/css/minimal-large.css
index 5f5bb14..770324f 100644
--- a/brutaldon/static/css/minimal-large.css
+++ b/brutaldon/static/css/minimal-large.css
@@ -227,4 +227,41 @@ hr.is-hidden
     border: 1px solid #000;
     padding: 1.5em;
     margin-bottom: 1.5em;
+    background-color: white;
+    color: black;
 }
+
+.modal {
+	  -webkit-box-align: center;
+	  -ms-flex-align: center;
+	  align-items: center;
+	  display: none;
+	  -webkit-box-pack: center;
+	  -ms-flex-pack: center;
+	  justify-content: center;
+	  overflow: hidden;
+	  position: fixed;
+    z-index: 40;
+}
+.modal-background {
+	  position: absolute;
+	  background-color: rgba(10,10,10,.86);
+}
+.modal, .modal-background {
+	  bottom: 0;
+	  left: 0;
+	  right: 0;
+	  top: 0;
+}
+
+.modal-content
+{
+    height: 90vh;
+    overflow: auto;
+    z-index: 60;
+}
+
+.modal.is-active {
+	  display: flex;
+}
+
diff --git a/brutaldon/static/css/vt240don-amber.css b/brutaldon/static/css/vt240don-amber.css
index 66051cc..c317462 100644
--- a/brutaldon/static/css/vt240don-amber.css
+++ b/brutaldon/static/css/vt240don-amber.css
@@ -167,6 +167,42 @@ img.emoji
     vertical-align: text-bottom;
 }
 
+.modal {
+	  -webkit-box-align: center;
+	  -ms-flex-align: center;
+	  align-items: center;
+	  display: none;
+	  -webkit-box-pack: center;
+	  -ms-flex-pack: center;
+	  justify-content: center;
+	  overflow: hidden;
+	  position: fixed;
+    z-index: 40;
+}
+.modal-background {
+	  position: absolute;
+	  background-color: rgba(10,10,10,.86);
+}
+.modal, .modal-background {
+	  bottom: 0;
+	  left: 0;
+	  right: 0;
+	  top: 0;
+}
+
+.modal-content
+{
+    z-index: 60;
+    max-height: 90vh;
+    overflow: auto;
+}
+
+.modal.is-active {
+	  display: flex;
+}
+
+
+
 @media screen and (max-width: 768px) {
     .media {
         display: block;
diff --git a/brutaldon/static/css/vt240don-green.css b/brutaldon/static/css/vt240don-green.css
index 58aea86..db9fa81 100644
--- a/brutaldon/static/css/vt240don-green.css
+++ b/brutaldon/static/css/vt240don-green.css
@@ -170,6 +170,41 @@ img.emoji
     vertical-align: text-bottom;
 }
 
+.modal {
+	  -webkit-box-align: center;
+	  -ms-flex-align: center;
+	  align-items: center;
+	  display: none;
+	  -webkit-box-pack: center;
+	  -ms-flex-pack: center;
+	  justify-content: center;
+	  overflow: hidden;
+	  position: fixed;
+    z-index: 40;
+}
+.modal-background {
+	  position: absolute;
+	  background-color: rgba(10,10,10,.86);
+}
+.modal, .modal-background {
+	  bottom: 0;
+	  left: 0;
+	  right: 0;
+	  top: 0;
+}
+
+.modal-content
+{
+    z-index: 60;
+    max-height: 90vh;
+    overflow: auto;
+}
+
+.modal.is-active {
+	  display: flex;
+}
+
+
 @media screen and (max-width: 768px) {
     .media {
         display: block;