2.8 auto-tag-update + help + tabs

2 files changed, 141 insertions, 31 deletions

diff --git a/public/css/stylebase.css b/public/css/stylebase.css
index c733e79..017b075 100644
--- a/public/css/stylebase.css
+++ b/public/css/stylebase.css
@@ -5,14 +5,32 @@
     --color4: grey;
 }
 
+
+@keyframes alert {
+    from {top: 30px;}
+    to {top: -50px;}
+}
+
 body {
     margin: 0;
-    font-family: monospace;
+    font-family: sans-serif;
     background-color: var(--color4);
 }
 
 
-
+span.alert {
+    position: fixed;
+    background-color: var(--color1);
+    z-index: 100;
+    border: ridge red;
+    width: 200px;
+    text-align: center;
+    padding: 5px;
+    top: 30px;
+    font-weight: bold;
+    left: calc(50% - 100px);
+    animation: alert 1s linear 2s forwards;
+}
 
 
 form{
diff --git a/public/css/styleedit.css b/public/css/styleedit.css
index 3a868c3..fe6745f 100644
--- a/public/css/styleedit.css
+++ b/public/css/styleedit.css
@@ -25,37 +25,25 @@ details {
 
 
 
-
-
-
-details#editinfo {
-    position:  fixed;
-	top: 0;
-	left: 10%;
-    width:  40%;
-}
-
-details#editcss {
-    position:  fixed;
-	top: 0;
-	left: 50%;
-    width:  40%;
+.sidebar {
+	position: fixed;
+	width: 250px;
+	height: 100%;
+	overflow: scroll;
+	overflow-x: hidden;
 }
 
 div#submit {
-    position:  fixed;
-    top: 0;
-    width:  10%;
+    position:  relative;
 }
 
-textarea#html {
-	width: 100%;
+textarea {
+	position: fixed;
+	width: calc(100% - 250px);
+	right: 0px;
 	height: 100%;
 	font-size: 1em;
-	padding-top: 40px;
-	padding-bottom: 40px;
-    font-family: serif;
-    padding-left:  2%;
+	padding: 2%;
 	padding-right: calc(50% - 500px);
 	resize: none;
 	
@@ -96,19 +84,25 @@ div#roll ul {
 
 
 details label {
-	display:  block;	
 	margin-top: 4px;
 }
 
-textarea#css {
-    width:  100%;
-    height:  200px;
-}
 
 details select, details input, details label, details textarea#css {
 	width: 100%;
 }
 
+details input[type="checkbox"]
+{
+	width: auto;
+}
+
+ul {
+    list-style: none;
+    padding: 0;
+    margin: 2px;
+}
+
 fieldset {
     margin:  0;
     padding:  0;
@@ -120,6 +114,104 @@ summary, div#linklist, div#copy, div#submit {
 
 }
 
+span#headid {
+    font-weight: bold;
+    padding-left: 1%;
+    padding-right: 1%;
+	border: ridge;
+    background-color: var(--color3);
+
+}
+
+input#fontsize {
+    width: 40px;
+}
+
+summary {
+    background-color: var(--color1);
+    border: outset;
+    font-weight: bold;
+}
+
+summary:focus {
+    outline: none;
+}
+
+div#help {
+    padding: 2px;
+}
+
+div#help pre {
+    background-color: white;
+	margin-bottom: 2px;
+}
+
+div#help p {
+    background-color: var(--color3);
+    margin-top: 4px;
+}
+
+div#help h3 {margin-bottom: 8px;}
+
+span.i {
+    background-color: var(--color2);
+    color: white;
+}
+
+
+
+/* ------------------------------ TABS ----------------------------- */
+
+
+
+.tabs
+{
+	position: absolute;
+	left: 250px;
+	top: 28px;
+}
+
+.tabs .tab
+{
+	float: left;
+}
+
+.tabs .tab .content
+{
+	position: absolute;
+	background-color: white;
+	left: 0px;
+	width: 100%;
+	border: 1px #000 solid;
+}
+
+.checkboxtab
+{
+	display: none;
+}
+
+.tab label
+{
+	margin-right: 10px;
+	border: outset;
+	background-color: var(--color1);
+}
+
+.checkboxtab:checked ~ label
+{
+	border: inset;
+}
+
+.checkboxtab:checked ~ .content
+{
+	z-index: 1;
+}
+
+
+
+
+
+
 
 @media (max-width: 600px) {
     details#editinfo, details#editcss, div#copy, div#linklist {