This commit is contained in:
Er2 2022-04-02 10:49:36 +03:00
commit 42d1cbd371
9 changed files with 265 additions and 0 deletions

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
css/main.css

144
css/main.less Normal file
View File

@ -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";

60
css/theme.less Normal file
View File

@ -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);
}

1
img/close.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="m9.108 7.776 4.709-4.709a.626.626 0 0 0-.884-.885L8.244 6.871h-.488L3.067 2.183a.625.625 0 1 0-.884.885L6.87 7.754v.491l-4.687 4.687a.626.626 0 0 0 .884.885L7.754 9.13h.491l4.687 4.687a.627.627 0 0 0 .885 0 .626.626 0 0 0 0-.885L9.108 8.223v-.447z"/></svg>

After

Width:  |  Height:  |  Size: 329 B

1
img/home.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M14.817 7.507 8.852 1.542a1.918 1.918 0 0 0-2.703 0L.183 7.507A.618.618 0 0 0 1 8.436V14a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8.436a.62.62 0 0 0 .375.139.626.626 0 0 0 .442-1.068zM8.75 14.75h-2.5v-4l.5-.5h1.5l.5.5v4zm4-.581-.6.581H10V11a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v3.75H2.85l-.6-.581-.001-6.96 4.783-4.783a.663.663 0 0 1 .936 0L12.75 7.21v6.959z"/></svg>

After

Width:  |  Height:  |  Size: 422 B

1
img/menu.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M13.375 4.25H2.625a.625.625 0 0 1 0-1.25h10.75a.625.625 0 0 1 0 1.25zM13.375 8.25H2.625a.625.625 0 0 1 0-1.25h10.75a.625.625 0 0 1 0 1.25zM13.375 12.25H2.625a.625.625 0 0 1 0-1.25h10.75a.625.625 0 0 1 0 1.25z"/></svg>

After

Width:  |  Height:  |  Size: 290 B

1
img/pref.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M10.791 20H9.217a2.009 2.009 0 0 1-1.922-1.448l-.51-1.777a7.641 7.641 0 0 1-1.037-.604l-1.801.448a2.01 2.01 0 0 1-2.215-.94l-.787-1.364a2.012 2.012 0 0 1 .281-2.377l1.299-1.37A6.652 6.652 0 0 1 2.528 9.4L1.241 8.067a2.008 2.008 0 0 1-.293-2.389l.787-1.363a2.009 2.009 0 0 1 2.199-.945l1.84.442c.326-.225.664-.42 1.01-.586l.51-1.777A2.011 2.011 0 0 1 9.217 0h1.574c.879 0 1.668.589 1.918 1.432l.535 1.805c.334.162.663.354.981.574l1.84-.442a2.02 2.02 0 0 1 2.199.945l.787 1.363c.444.768.323 1.75-.293 2.389L17.472 9.4a6.606 6.606 0 0 1 .003 1.168l1.299 1.37a2.01 2.01 0 0 1 .281 2.376l-.787 1.363a2.005 2.005 0 0 1-2.215.94l-1.801-.448a7.558 7.558 0 0 1-1.009.593l-.535 1.805A2.01 2.01 0 0 1 10.791 20zm-5.066-5.37.637.132c.423.323.872.585 1.336.778l.432.485.606 2.112a.503.503 0 0 0 .481.362h1.574c.22 0 .417-.147.479-.358l.632-2.134.428-.478c.45-.19.89-.448 1.307-.768l.637-.132 2.141.533a.504.504 0 0 0 .554-.236l.787-1.363a.503.503 0 0 0-.07-.594l-1.537-1.621-.201-.608c.031-.241.052-.488.052-.74a5.94 5.94 0 0 0-.056-.771l.204-.617 1.531-1.587a.5.5 0 0 0 .073-.596l-.787-1.364a.503.503 0 0 0-.55-.236l-2.175.522-.627-.131a6.042 6.042 0 0 0-1.283-.75l-.427-.478-.632-2.133a.503.503 0 0 0-.48-.359H9.217a.503.503 0 0 0-.481.362L8.13 3.974l-.433.485a5.972 5.972 0 0 0-1.31.759l-.628.133-2.175-.522a.504.504 0 0 0-.55.236l-.787 1.363a.503.503 0 0 0 .073.597l1.531 1.587.204.617A6.123 6.123 0 0 0 4 10c0 .252.021.499.051.742l-.2.608-1.537 1.621a.503.503 0 0 0-.07.594l.787 1.363a.503.503 0 0 0 .554.235l2.14-.533z"/><path d="M10 13.5c-1.93 0-3.5-1.57-3.5-3.5S8.07 6.5 10 6.5s3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5zM10 8c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2z"/></svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

45
index.html Normal file
View File

@ -0,0 +1,45 @@
<html>
<head>
<title>DisKort</title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body class="thm-dis">
<div id="app">
<div id="title">
<button id="menu" class="nofill"><img class="mono" src="./img/menu.svg" /></button>
<p>DisKort</p>
</div>
<div class="ext wrapper">
<div id="side">
<div class="vert wrapper">
<div id="serv" class="vscroll">
<button class="selected"><img class="mono" src="./img/home.svg" /></button>
</div>
<button id="add">+</button>
</div>
<div id="eside" class="vert wrapper">
<div id="chan" class="vscroll"></div>
<div id="info" class="vcenter wrapper">
<button><img class="ext" src="https://cdn.discordapp.com/avatars/785219544364351499/df51c2fb82974d1c12e008ee6712cdeb.webp?size=40" /></button>
<button><img class="mono" src="./img/pref.svg" /></button>
</div>
</div>
</div>
<div id="cont">
<div class="vert vscroll vcenter wrapper">
<button class="close"><img class="mono" src="./img/close.svg" /></button>
<p>Create a server</p>
</div>
</div>
</div>
</div>
<script>
// Shit begins
var menu = document.getElementById("menu");
var eside = document.getElementById("eside");
menu.addEventListener("click", function() {
eside.style.width = eside.style.width? null: 0;
});
</script>
</body>
</html>

11
readme.org Normal file
View File

@ -0,0 +1,11 @@
* DisKort
This is custom web Discord client
extends ideas from [[https://gitdab.com/er2/diskort][DisKort]].
Codenamed DisKortIe.
It is *VERY WIP!*
To compile css, install less from npm
and run ~lessc css/main.less > css/main.css~