1 files changed, 115 insertions, 0 deletions
diff --git a/src/css/dashboard.css b/src/css/dashboard.css
new file mode 100644
index 0000000..ba02d97
--- /dev/null
+++ b/src/css/dashboard.css
@@ -0,0 +1,115 @@
+html, body {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    justify-content: stretch;
+    overflow: hidden;
+    position: relative;
+    width: 100vw;
+    }
+body.notReady {
+    display: none;
+    }
+#dashboard-nav {
+    border: 0;
+    border-bottom: 1px solid var(--border-1);
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    overflow-x: hidden;
+    padding: 0;
+    position: sticky;
+    top: 0;
+    width: 100%;
+    z-index: 10;
+    }
+.tabButton {
+    background-color: transparent;
+    border: 0;
+    border-bottom: 3px solid transparent;
+    border-radius: 0;
+    color: var(--dashboard-tab-ink);
+        fill: var(--dashboard-tab-ink);
+    font-family: var(--font-family);
+    font-size: var(--font-size);
+    padding: 0.7em 1.4em calc(0.7em - 3px);
+    text-decoration: none;
+    white-space: nowrap;
+    }
+.tabButton:focus {
+    outline: 0;
+    }
+/* 
+ * TODO: support keyboard-driven navigation
+ * 
+.tabButton:not(:active):focus {
+    background-color: var(--dashboard-tab-focus-surface);
+    }
+ */
+.tabButton.selected {
+    background-color: var(--dashboard-tab-active-surface);
+    border-bottom: 3px solid var(--dashboard-tab-active-ink);
+    color: var(--dashboard-tab-active-ink);
+        fill: var(--dashboard-tab-active-ink);
+    }
+iframe {
+    background-color: transparent;
+    border: 0;
+    flex-grow: 1;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    }
+#unsavedWarning {
+    display: none;
+    left: 0;
+    position: absolute;
+    width: 100%;
+    z-index: 20;
+    }
+#unsavedWarning.on {
+    display: initial;
+    }
+#unsavedWarning > div:first-of-type {
+    padding: 0.5em;
+    }
+#unsavedWarning > div:last-of-type {
+    height: 100vh;
+    position: absolute;
+    width: 100vw;
+    }
+
+body .tabButton[data-pane="no-dashboard.html"] {
+    display: none;
+    }
+body.noDashboard #dashboard-nav {
+    display: none;
+    }
+
+/* high dpi devices */
+:root.hidpi .tabButton {
+    font-family: Metropolis, sans-serif;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    }
+
+/* hover-able devices */
+:root.desktop .tabButton {
+    cursor: default;
+    }
+:root.desktop .tabButton:not(.selected) {
+    cursor: pointer;
+    }
+:root.desktop .tabButton:not(.selected):hover {
+    background-color: var(--dashboard-tab-hover-surface);
+    border-bottom-color: var(--dashboard-tab-hover-border);
+    }
+
+/* touch-screen devices */
+:root.mobile #dashboard-nav {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    }
+:root.mobile #dashboard-nav .logo {
+    display: none;
+    }