add help window, accessible via `?`

[apps/outliner/.git] / public / assets / style.css

diff --git a/public/assets/style.css b/public/assets/style.css
index c803f9cf962108c518a158bbaef2c51ba0d90a37..4493c65ad44bfe231be1d68706633ae59a7211d9 100644 (file)
--- a/public/assets/style.css
+++ b/public/assets/style.css
@@ -6,13 +6,33 @@ body {
   width: 780px;
   padding: 2rem 1rem;
 }
+
+.modal {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.modal-content {
+  position: relative;
+  top: 5px;
+  margin: 5rem auto;
+  width: 50%;
+  background-color: #fff;
+  border: solid 1px #ddd;
+  padding: 1rem;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
+}
+.modal-content > h1 {
+  margin-bottom: 1rem;
+}
+
 #outliner {
   background-color: #fff;
   border: solid 1px #ddd;
   padding: 2rem 1rem;
   margin: 2rem 0;
 }
-
 .node {
   margin: 0 1rem;
   color: #222;
@@ -57,7 +77,7 @@ footer {
 }
 
 
-/* default styles */
+/* text styles */
 
 em {
   font-style: italic;
@@ -65,3 +85,28 @@ em {
 strong, b {
   font-weight: bold;
 }
+h1 {
+  font-size: 1.7rem;
+}
+table {
+  border: solid 1px #ddd;
+}
+th {
+  font-weight: bold;
+  background-color: #666;
+  color: #fff;
+}
+th, td {
+  padding: 0.7rem;
+}
+tr:nth-child(even) {
+  background-color: #eee;
+}
+kbd {
+  border: solid 1px #aaa;
+  background-color: #d2d2d2;
+  padding: 0 5px;
+  line-height: 1rem;
+  white-space: nowrap;
+}
+