dom manipulations uses elements

templates/panel/header/taskbar/main.scss

@@ -0,0 +1,61 @@
+/*
+ * Copyright (C) 2021  Aravinth Manivannan <realaravinth@batsense.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+@import '../../../reset';
+@import '../../../vars';
+@import '../../../components/button';
+
+.taskbar {
+  display: flex;
+  padding: 0px;
+  margin: 0px;
+  background-color: $white;
+}
+
+.taskbar__action {
+  display: inline-block;
+  padding: 10px 0px;
+  margin: auto;
+}
+
+.taskbar__spacer {
+  min-width: 250px;
+  flex: 6;
+}
+
+.taskbar__icon {
+  opacity: 0.8;
+  width: 1.5rem;
+  margin: auto 20px;
+}
+
+.taskbar__icon {
+  color: $light-text;
+}
+
+.taskbar__icon:hover {
+  cursor: grab;
+}
+
+.taskbar__add-site {
+  display: inline-block;
+  @include violet-button;
+}
+
+.taskbar__add-site:hover {
+  @include violet-button-hover;
+}