sample editor; this is before backtracking on contiguous mode

1 files changed, 93 insertions, 0 deletions

diff --git a/sample_editor/topbar.css b/sample_editor/topbar.css
new file mode 100644
index 0000000..88ec5be
--- /dev/null
+++ b/sample_editor/topbar.css
@@ -0,0 +1,93 @@
+:root {
+    --highlight-hue: 0;
+}
+body {
+    background: white;
+    font-family: 'Barlow Condensed', sans-serif;
+    font-size: 12px;
+    margin: 0;
+}
+.top-menu-bar {
+    width: 100vw;
+    height: 24px;
+    display: flex;
+}
+.tab {
+    height: 23px;
+    display: flex;
+    align-items: center;
+    border: 1px solid hsl(var(--highlight-hue), 100%, 50%);
+    border-right: none;
+    background: hsl(var(--highlight-hue), 100%, 50%);
+    color: white;
+    cursor: pointer;
+    transition: background 0.3s;
+    flex-grow: 1;
+}
+.tab:last-child {
+    border-right: 1px solid hsl(var(--highlight-hue), 100%, 50%);
+}
+.tab:hover {
+    background: lightgrey;
+}
+.tab.selected {
+    background: white;
+    color: hsl(var(--highlight-hue), 100%, 50%);
+}
+.burger-menu {
+    width: 24px;
+    justify-content: center;
+    flex-shrink: 0;
+    flex-grow: 0;
+}
+.burger-menu-icon {
+    font-size: 16px;
+    color: white;
+}
+.dropdown-menu {
+    display: none;
+    position: absolute;
+    top: 24px;
+    left: 0;
+    background: white;
+    border: 1px solid hsl(var(--highlight-hue), 100%, 50%);
+    z-index: 1;
+}
+.dropdown-menu.open {
+    display: block;
+}
+.dropdown-item {
+    padding: 4px 8px;
+    border-bottom: 1px solid hsl(var(--highlight-hue), 100%, 50%);
+    cursor: pointer;
+    font-size: 14px;
+}
+.dropdown-item:last-child {
+    border-bottom: none;
+}
+.dropdown-item:hover {
+    background: lightgrey;
+}
+.circle {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: white;
+    color: hsl(var(--highlight-hue), 100%, 50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 5px;
+    margin-left: 2px;
+    transition: background 0.3s, color 0.3s;
+}
+.tab.selected .circle {
+    background: hsl(var(--highlight-hue), 100%, 50%);
+    color: white;
+}
+.minicanvas-container {
+    flex-grow: 1;
+    width: 22px;
+    height: 22px;
+    opacity: 0.25;
+}