CSS Refactor

assets/page/actions.js

@@ -36,7 +36,7 @@ function postReplace(action, body, target) {
 function promptPageName(title, initial, confirmLabel, onName) {
     var input = document.createElement('input');
     input.type = 'text';
-    input.className = 'modal-input';
+    input.className = 'input';
     input.placeholder = 'Page name';
     if (initial) input.value = initial;
     openModal({
@@ -89,7 +89,7 @@ function movePage() {
         onSelect: function (newParent) {
             var input = document.createElement('input');
             input.type = 'text';
-            input.className = 'modal-input';
+            input.className = 'input';
             input.placeholder = 'Page name';
             input.value = currentName;
 
@@ -99,7 +99,7 @@ function movePage() {
 
             var linksLabel = document.createElement('label');
             linksLabel.htmlFor = linksCheckbox.id;
-            linksLabel.className = 'modal-checkbox';
+            linksLabel.className = 'row';
             linksLabel.appendChild(linksCheckbox);
             linksLabel.appendChild(document.createTextNode('Update links'));
 

assets/page/anchors.js

@@ -42,7 +42,7 @@
   function addTask(sectionIndex, headingId) {
     var input = document.createElement('input');
     input.type = 'text';
-    input.className = 'modal-input';
+    input.className = 'input';
     input.placeholder = 'Task description';
     var ctrl = openModal({
       title: 'Add task',

assets/page/main.html

@@ -9,7 +9,7 @@
 {{end}}
 {{if .Entries}}
 <h2 id="files">Files <button class="btn btn-small" data-companion-reveal hidden title="Open folder in file manager">open</button></h2>
-<div class="listing">
+<div class="listing panel">
     {{range .Entries}}
     <div class="listing-item" data-path="{{.URL}}">
         <span class="icon">{{.Icon}}</span>
@@ -35,7 +35,7 @@
 <script src="/_/page/sidebar-fab.js"></script>
 {{end}}
 
-{{define "sidebar"}}{{if .CanEdit}}<nav class="actions">
+{{define "sidebar"}}{{if .CanEdit}}<nav class="actions panel panel-sidebar">
     <div class="panel-header">ACTIONS</div>
     <button class="btn btn-block" onclick="newPage()" title="New page (N)">NEW PAGE</button>
     <a class="btn btn-block" href="?edit" title="Edit page (E)">EDIT PAGE</a>

assets/page/toc.js

@@ -6,7 +6,7 @@ document.addEventListener("DOMContentLoaded", function () {
   if (headings.length < 2) return;
 
   var nav = document.createElement("nav");
-  nav.className = "toc";
+  nav.className = "toc panel panel-sidebar";
 
   var header = document.createElement("div");
   header.className = "panel-header";