init

css/main.less

@@ -0,0 +1,144 @@
+/* DisKort
+ * (c) Er2 2022 <er2@dismail.de>
+ * Zlib License
+ */
+
+// needed
+body { margin: 0; }
+
+#app,
+#title,
+#side,
+.wrapper {
+  display: flex;
+  overflow: hidden;
+}
+
+#app, .wrapper.ext {
+  width: 100%;
+  height: 100%;
+}
+
+#app, .wrapper.vert {
+  flex-direction: column;
+}
+
+#title {
+  min-height: 48px;
+  height: 48px;
+  padding: 0 16px;
+
+  button {
+    width: 32px;
+    height: 32px;
+    margin-right: 32px;
+  }
+}
+
+#title, .wrapper.vcenter {
+  align-items: center;
+}
+
+.wrapper.hcenter {
+  justify-content: center;
+}
+
+.bord-bot(@r: var(--radius)) {
+  border-bottom-left-radius: @r;
+  border-bottom-right-radius: @r;
+}
+
+.bord-top(@r: var(--radius)) {
+  border-top-left-radius: @r;
+  border-top-right-radius: @r;
+}
+
+.hscroll
+{ overflow-x: auto; }
+.vscroll
+{ overflow-y: auto; }
+
+#side {
+  #serv {
+    width: 60px;
+    height: 100%;
+  }
+
+  #serv button, #add {
+    width: 48px;
+    height: 48px;
+    min-width: 48px;
+    min-height: 48px;
+    margin: 6px; //0 12px 8px 12px;
+  }
+
+  #add {
+    padding: 2px;
+    color: #04cc40;
+  }
+
+  #eside {
+    width: 240px;
+    max-width: 240px;
+    transition: width .1s ease-in;
+
+    #chan {
+      margin-left: 8px;
+      height: 100%;
+    }
+
+    #info {
+      min-height: 52px;
+      height: 52px;
+      .bord-bot();
+
+      button
+      { margin: 8px; }
+      :nth-child(1)
+      { margin-right: auto; }
+    }
+  }
+}
+
+#cont {
+  flex-grow: 1;
+  padding: 8px;
+}
+
+div, p, button {
+  font-family: sans-serif, Segoe UI;
+  scrollbar-width: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--text-col);
+}
+
+button {
+  background-color: transparent;
+  padding: 0;
+  cursor: pointer;
+  font-size: 20pt;
+  border: none;
+  border-radius: 50%;
+
+  transition: background-color .1s ease-out, border-radius .1s ease-out;
+
+  width:  32px;
+  height: 32px;
+
+  & > .ext {
+    width:  100%;
+    height: 100%
+  }
+  & > :not(.ext) {
+    width:  50%;
+    height: 50%;
+  }
+
+  &.close {
+    position: absolute;
+    align-self: end;
+  }
+}
+
+@import "theme";

css/theme.less

@@ -0,0 +1,60 @@
+/* Themes
+ * (c) Er2 2022 <er2@dismail.de>
+ * Zlib License
+ */
+
+:root, .thm-dis {
+  --pic-filt:  invert(100%);
+  --radius:    16px;
+  --bg-col:    #202225;
+  --light-col: #36393f;
+  --lhter-col: #585b5f;
+  --drker-col: #2f3136;
+  --dark-col:  #292b2f;
+  --text-col:  #ffffff;
+  --sep-color: rgba(255, 255, 255, 0.06);
+}
+
+.thm-disl {
+  --pic-filt:  invert(0%);
+  --bg-col:    #e3e5e8;
+  --light-col: #ffffff;
+  --lhter-col: #ffffff;
+  --drker-col: #f2f3f5;
+  --dark-col:  #ebedef;
+  --text-col:  #222222;
+  --sep-color: rgba(0,0,0, 0.06);
+}
+
+.thm-amol {
+  --bg-col:    #000000;
+  --light-col: #000000;
+  --lhter-col: #222222;
+  --drker-col: #000000;
+  --dark-col:  #000000;
+  --text-col:  #ffffff;
+}
+
+#app {
+  background-color: var(--bg-col);
+}
+
+#cont, button:not(.nofill) {
+  background-color: var(--light-col);
+}
+
+#info {
+  background-color: var(--dark-col);
+}
+
+button:hover, .selected {
+  background-color: var(--lhter-col);
+}
+
+#cont, button:hover, .selected {
+  border-radius: var(--radius);
+}
+
+img.mono, svg {
+  filter: var(--pic-filt);
+}