init
This commit is contained in:
commit
42d1cbd371
9 changed files with 265 additions and 0 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
css/main.css
|
||||
144
css/main.less
Normal file
144
css/main.less
Normal 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
60
css/theme.less
Normal 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
1
img/close.svg
Normal 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
1
img/home.svg
Normal 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
1
img/menu.svg
Normal 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
1
img/pref.svg
Normal 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
45
index.html
Normal 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
11
readme.org
Normal 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~
|
||||
Loading…
Reference in a new issue