First commit
This commit is contained in:
commit
ed3ed8dab7
5 changed files with 733 additions and 0 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.idea/
|
||||
61
index.html
Normal file
61
index.html
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Larpix Client</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
</head>
|
||||
<body>
|
||||
<sidebar>
|
||||
<sidebarelement id="sidebar-home">
|
||||
<indicator class="active">
|
||||
</indicator>
|
||||
<button class="icon-button" aria-label="Homepage">
|
||||
<svg viewBox="-1 -1 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M1 6V15H6V11C6 9.89543 6.89543 9 8 9C9.10457 9 10 9.89543 10 11V15H15V6L8 0L1 6Z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.28"
|
||||
stroke-linejoin="round"
|
||||
stroke-linecap="round"
|
||||
transform="translate(0 0.5)"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</sidebarelement>
|
||||
<hr>
|
||||
<sidebarelement id="sidebar-add">
|
||||
<indicator>
|
||||
</indicator>
|
||||
<button class="icon-button" aria-label="Add space">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</sidebarelement>
|
||||
<hr>
|
||||
</sidebar>
|
||||
|
||||
<sidebar class="second">
|
||||
<button class="collapse-text-button" id="collapse-dms">
|
||||
<span>Direct messages</span>
|
||||
<svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
</sidebar>
|
||||
|
||||
<roomcontent>
|
||||
|
||||
</roomcontent>
|
||||
<sidebar class="second">
|
||||
</sidebar>
|
||||
</body>
|
||||
</html>
|
||||
<script src="main.js"></script>
|
||||
<script>
|
||||
|
||||
</script>
|
||||
245
login/index.html
Normal file
245
login/index.html
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Larpix - Authentication</title>
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<link rel="icon" type="image/svg+xml" href="../favicon.svg">
|
||||
<style>
|
||||
html {
|
||||
font-size: max(17px, calc(100vw / 100));
|
||||
}
|
||||
|
||||
body {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--main-bg-color);
|
||||
display: flex;
|
||||
height: 100dvh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
background-color: rgba(255, 255, 255, 0.015);
|
||||
border: var(--border-width) solid var(--light-border-color);
|
||||
border-radius: 1.2rem;
|
||||
width: 100%;
|
||||
max-width: 24rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.auth-container {
|
||||
display: flex;
|
||||
width: 200%;
|
||||
transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
|
||||
.auth-box {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2.5rem 2rem;
|
||||
}
|
||||
|
||||
.show-register {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.auth-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.auth-header h1 {
|
||||
font-size: 2.4rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 0.3rem;
|
||||
letter-spacing: -0.05rem;
|
||||
}
|
||||
|
||||
.auth-header p {
|
||||
opacity: 0.5;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.1rem;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.input-group label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 800;
|
||||
margin-left: 0.6rem;
|
||||
margin-bottom: -0.2rem;
|
||||
opacity: 0.4;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
.submit-button {
|
||||
margin: 1.5rem 0 0 0 !important;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
background-color: var(--text-color);
|
||||
color: var(--main-bg-color);
|
||||
font-weight: 800;
|
||||
border: none;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.footer-links {
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
font-size: 0.9rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer-link-toggle {
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.2s ease;
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.footer-link-toggle:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.footer-link-toggle strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.footer-link-toggle:hover strong {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="auth-card">
|
||||
<div class="auth-container" id="auth-container">
|
||||
|
||||
<div class="auth-box" id="login-box">
|
||||
<div class="auth-header">
|
||||
<h1>Larpix</h1>
|
||||
<p>Sign in to your secure instance.</p>
|
||||
</div>
|
||||
|
||||
<form id="form-login">
|
||||
<div class="input-group">
|
||||
<label for="login-host">Server Host</label>
|
||||
<input type="text" id="login-host" placeholder="example.com" autocomplete="url">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="login-username">Username</label>
|
||||
<input type="text" id="login-username" placeholder="vince_null" autocomplete="username">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="login-password">Password</label>
|
||||
<input type="password" id="login-password" placeholder="••••••••" autocomplete="current-password">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-button">
|
||||
Sign In
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="footer-links">
|
||||
<span class="footer-link-toggle" id="to-register">
|
||||
New here? <strong>Create an account</strong>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="auth-box" id="register-box">
|
||||
<div class="auth-header">
|
||||
<h1>Join Larpix</h1>
|
||||
<p>Start your encrypted journey today.</p>
|
||||
</div>
|
||||
|
||||
<form id="form-register">
|
||||
<div class="input-group">
|
||||
<label for="reg-host">Server Host</label>
|
||||
<input type="text" id="reg-host" placeholder="example.com" autocomplete="url">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="reg-username">Username</label>
|
||||
<input type="text" id="reg-username" placeholder="Choose username" autocomplete="username">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="reg-password">Password</label>
|
||||
<input type="password" id="reg-password" placeholder="Create password" autocomplete="new-password">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="reg-confirm">Confirm Password</label>
|
||||
<input type="password" id="reg-confirm" placeholder="Repeat password" autocomplete="new-password">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-button">
|
||||
Sign Up
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="footer-links">
|
||||
<span class="footer-link-toggle" id="to-login">
|
||||
Already a member? <strong>Back to Login</strong>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../main.js"></script>
|
||||
<script>
|
||||
const container = document.getElementById('auth-container');
|
||||
const toRegister = document.getElementById('to-register');
|
||||
const toLogin = document.getElementById('to-login');
|
||||
|
||||
toRegister.addEventListener('click', () => {
|
||||
container.classList.add('show-register');
|
||||
});
|
||||
|
||||
toLogin.addEventListener('click', () => {
|
||||
container.classList.remove('show-register');
|
||||
});
|
||||
|
||||
document.querySelectorAll('form').forEach(form => {
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
const formData = new FormData(form);
|
||||
console.log("Form submitted. Implement auth logic using main.js functions.");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
275
main.js
Normal file
275
main.js
Normal file
|
|
@ -0,0 +1,275 @@
|
|||
const collapseDmsBtn = document.getElementById("collapse-dms");
|
||||
|
||||
const sidebarHome = document.getElementById("sidebar-home");
|
||||
const sidebarHomeButton = sidebarHome.children.item(1);
|
||||
const sidebarHomeIndicator = sidebarHome.children.item(0);
|
||||
|
||||
const sidebarAdd = document.getElementById("sidebar-add");
|
||||
const sidebarAddButton = sidebarAdd.children.item(1);
|
||||
const sidebarAddIndicator = sidebarAdd.children.item(0);
|
||||
|
||||
|
||||
|
||||
function delay(time) {
|
||||
return new Promise(resolve => setTimeout(resolve, time));
|
||||
}
|
||||
async function packetEncPass(pass, key, username) {
|
||||
let nonce;
|
||||
let fetchRes = await fetchAsync(`${url}/nextnonce?u=${username}`);
|
||||
try {
|
||||
nonce = await decryptString(fetchRes, key);
|
||||
}
|
||||
catch(err) {
|
||||
nonce = await decryptString(fetchRes, "");
|
||||
}
|
||||
|
||||
return await encryptString(pass, nonce + key);
|
||||
}
|
||||
|
||||
async function calcCommunicationKeyClient(p, g, pubServer) {
|
||||
const secretClientBytes = window.crypto.getRandomValues(new Uint8Array(512));
|
||||
const secretClient = BigInt('0x' + Array.from(secretClientBytes).map(b => b.toString(16).padStart(2, '0')).join(''));
|
||||
const pubClient = power(BigInt(g), secretClient, BigInt(p));
|
||||
const sharedSecret = power(BigInt(pubServer), secretClient, BigInt(p));
|
||||
|
||||
let sharedSecretStr = sharedSecret.toString(16);
|
||||
|
||||
if (sharedSecretStr.length % 2 !== 0) {
|
||||
sharedSecretStr = '0' + sharedSecretStr;
|
||||
}
|
||||
|
||||
const sharedSecretBytes = new Uint8Array(sharedSecretStr.match(/.{1,2}/g).map(byte => parseInt(byte, 16)));
|
||||
|
||||
const hashBuffer = await window.crypto.subtle.digest('SHA-256', sharedSecretBytes);
|
||||
const aesKey = new Uint8Array(hashBuffer);
|
||||
|
||||
return [pubClient.toString(), aesKey];
|
||||
}
|
||||
|
||||
function keyDataFromServerJson(jsonFromServer) {
|
||||
const data = JSON.parse(jsonFromServer);
|
||||
|
||||
const p = BigInt(data.p);
|
||||
const g = BigInt(data.g);
|
||||
const pubServer = BigInt(data.pubServer);
|
||||
|
||||
return [p, g, pubServer, data.idKey]
|
||||
}
|
||||
|
||||
const base64ToUint8 = (base64) => Uint8Array.from(atob(base64), c => c.charCodeAt(0));
|
||||
const uint8ToBase64 = (uint8) => fixBase64Padding(btoa(String.fromCharCode(...uint8)));
|
||||
|
||||
async function encrypt(plainText, keyBytes) {
|
||||
const iv = window.crypto.getRandomValues(new Uint8Array(16));
|
||||
const encoder = new TextEncoder();
|
||||
const data = encoder.encode(plainText);
|
||||
|
||||
const cryptoKey = await window.crypto.subtle.importKey(
|
||||
"raw", keyBytes, "AES-CBC", false, ["encrypt"]
|
||||
);
|
||||
|
||||
const encryptedContent = await window.crypto.subtle.encrypt(
|
||||
{name: "AES-CBC", iv: iv},
|
||||
cryptoKey,
|
||||
data
|
||||
);
|
||||
const result = new Uint8Array(iv.length + encryptedContent.byteLength);
|
||||
result.set(iv);
|
||||
result.set(new Uint8Array(encryptedContent), iv.length);
|
||||
|
||||
return uint8ToBase64(result);
|
||||
}
|
||||
|
||||
async function decrypt(cipherTextBase64, keyBytes) {
|
||||
const fullData = base64ToUint8(cipherTextBase64);
|
||||
const iv = fullData.slice(0, 16);
|
||||
const cipherData = fullData.slice(16);
|
||||
|
||||
const cryptoKey = await window.crypto.subtle.importKey(
|
||||
"raw", keyBytes, "AES-CBC", false, ["decrypt"]
|
||||
);
|
||||
|
||||
const decrypted = await window.crypto.subtle.decrypt(
|
||||
{name: "AES-CBC", iv: iv},
|
||||
cryptoKey,
|
||||
cipherData
|
||||
);
|
||||
|
||||
return new TextDecoder().decode(decrypted);
|
||||
}
|
||||
|
||||
|
||||
async function getCryptoKey(passphrase) {
|
||||
const encoder = new TextEncoder();
|
||||
const data = encoder.encode(passphrase);
|
||||
const hash = await crypto.subtle.digest('SHA-256', data);
|
||||
return await crypto.subtle.importKey('raw', hash, {name: 'AES-CBC'}, false, ['encrypt', 'decrypt']);
|
||||
}
|
||||
|
||||
async function encryptBytes(plainBytes, passphrase) {
|
||||
const key = await getCryptoKey(passphrase);
|
||||
const iv = crypto.getRandomValues(new Uint8Array(16));
|
||||
|
||||
const encryptedContent = await crypto.subtle.encrypt(
|
||||
{name: 'AES-CBC', iv: iv},
|
||||
key,
|
||||
plainBytes
|
||||
);
|
||||
|
||||
const result = new Uint8Array(iv.length + encryptedContent.byteLength);
|
||||
result.set(iv);
|
||||
result.set(new Uint8Array(encryptedContent), iv.length);
|
||||
return result;
|
||||
}
|
||||
|
||||
async function decryptBytes(combinedBytes, passphrase) {
|
||||
const key = await getCryptoKey(passphrase);
|
||||
const iv = combinedBytes.slice(0, 16);
|
||||
const data = combinedBytes.slice(16);
|
||||
|
||||
const decryptedContent = await crypto.subtle.decrypt(
|
||||
{name: 'AES-CBC', iv: iv},
|
||||
key,
|
||||
data
|
||||
);
|
||||
|
||||
return new Uint8Array(decryptedContent);
|
||||
}
|
||||
|
||||
async function encryptString(plainText, passphrase) {
|
||||
const encoder = new TextEncoder();
|
||||
const data = encoder.encode(plainText);
|
||||
const pwHash = await crypto.subtle.digest('SHA-256', encoder.encode(passphrase));
|
||||
|
||||
const key = await crypto.subtle.importKey(
|
||||
'raw', pwHash, {name: 'AES-CBC'}, false, ['encrypt']
|
||||
);
|
||||
|
||||
const iv = crypto.getRandomValues(new Uint8Array(16));
|
||||
const encrypted = await crypto.subtle.encrypt(
|
||||
{name: 'AES-CBC', iv: iv},
|
||||
key,
|
||||
data
|
||||
);
|
||||
|
||||
const combined = new Uint8Array(iv.length + encrypted.byteLength);
|
||||
combined.set(iv);
|
||||
combined.set(new Uint8Array(encrypted), iv.length);
|
||||
|
||||
return fixBase64Padding(btoa(String.fromCharCode(...combined)));
|
||||
}
|
||||
|
||||
async function decryptString(base64Text, passphrase) {
|
||||
const encoder = new TextEncoder();
|
||||
const combined = new Uint8Array(atob(base64Text).split("").map(c => c.charCodeAt(0)));
|
||||
|
||||
const pwHash = await crypto.subtle.digest('SHA-256', encoder.encode(passphrase));
|
||||
const key = await crypto.subtle.importKey(
|
||||
'raw', pwHash, {name: 'AES-CBC'}, false, ['decrypt']
|
||||
);
|
||||
|
||||
const iv = combined.slice(0, 16);
|
||||
const data = combined.slice(16);
|
||||
|
||||
const decrypted = await crypto.subtle.decrypt(
|
||||
{name: 'AES-CBC', iv: iv},
|
||||
key,
|
||||
data
|
||||
);
|
||||
|
||||
return new TextDecoder().decode(decrypted);
|
||||
}
|
||||
|
||||
|
||||
async function fetchpost(url, value) {
|
||||
let response = await fetch(url, {
|
||||
method: "POST",
|
||||
credentials: "omit",
|
||||
body: value,
|
||||
headers: {
|
||||
"secret": passwordHash
|
||||
}
|
||||
});
|
||||
let data = await response.text();
|
||||
return data;
|
||||
}
|
||||
|
||||
async function fetchAsync(url, sendSecret) {
|
||||
let response;
|
||||
if (sendSecret) {
|
||||
response = await fetch(url, {
|
||||
method: "GET", credentials: "omit", headers: {
|
||||
"secret": passwordHash
|
||||
}
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
response = await fetch(url, {method: "GET", credentials: "omit"});
|
||||
}
|
||||
let data = await response.text();
|
||||
return data;
|
||||
}
|
||||
|
||||
async function fetchEncrypted(request, body)
|
||||
{
|
||||
return await decryptString(
|
||||
await fetchpost(`${url}/encryptedrequest?u=${username}`, await packetEncPass(
|
||||
|
||||
JSON.stringify({
|
||||
string1: request,
|
||||
string2: body
|
||||
})
|
||||
|
||||
, passwordHash, username))
|
||||
|
||||
, passwordHash);
|
||||
}
|
||||
|
||||
function power(base, exponent, mod) {
|
||||
let res = 1n;
|
||||
base = base % mod;
|
||||
while (exponent > 0n) {
|
||||
if (exponent % 2n === 1n) res = (res * base) % mod;
|
||||
base = (base * base) % mod;
|
||||
exponent = exponent / 2n;
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
function fixBase64Padding(base64String) {
|
||||
let str = base64String.replace(/-/g, '+').replace(/_/g, '/');
|
||||
const pad = str.length % 4;
|
||||
|
||||
if (pad) {
|
||||
if (pad === 1) {
|
||||
throw new Error("");
|
||||
}
|
||||
str += '='.repeat(4 - pad);
|
||||
}
|
||||
|
||||
return str;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
collapseDmsBtn.addEventListener("click", () => {
|
||||
collapseDmsBtn.classList.toggle("collapsed");
|
||||
});
|
||||
|
||||
sidebarHomeButton.addEventListener("mouseenter", () => {
|
||||
sidebarHomeIndicator.classList.add("hover");
|
||||
});
|
||||
sidebarHomeButton.addEventListener("mouseleave", () => {
|
||||
sidebarHomeIndicator.classList.remove("hover");
|
||||
});
|
||||
|
||||
sidebarAddButton.addEventListener("mouseenter", () => {
|
||||
sidebarAddIndicator.classList.add("hover");
|
||||
});
|
||||
sidebarAddButton.addEventListener("mouseleave", () => {
|
||||
sidebarAddIndicator.classList.remove("hover");
|
||||
});
|
||||
|
||||
151
style.css
Normal file
151
style.css
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: URL('Nunito-Regular.ttf') format('truetype');
|
||||
}
|
||||
:root {
|
||||
--main-bg-color: rgb(20, 20, 20);
|
||||
--text-color: rgb(240, 240, 245);
|
||||
--icon-button-size: 2rem;
|
||||
--press-scale: scale(0.92);
|
||||
--light-border-color: rgba(255, 255, 255, 0.08);
|
||||
--button-margin: 0.4rem;
|
||||
--icon-button-height: 3.4rem;
|
||||
--button-height: 2.4rem;
|
||||
--border-width: 0.09rem
|
||||
}
|
||||
html {
|
||||
font-size: max(16px, calc(100vw / 120));
|
||||
}
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
display: flex;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
}
|
||||
* {
|
||||
font-size: 1rem;
|
||||
scrollbar-width: none;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
transition: all 0.2s ease;
|
||||
color: var(--text-color);
|
||||
font-family: "Nunito", sans-serif;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
button, input {
|
||||
border-radius: 0.8rem;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
margin: var(--button-margin);
|
||||
padding: var(--button-margin);
|
||||
height: var(--button-height);
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
border: var(--border-width) solid var(--light-border-color);
|
||||
}
|
||||
|
||||
|
||||
|
||||
indicator {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
left: -0.08rem;
|
||||
border: 0.15rem solid transparent;
|
||||
border-radius: 0.8rem;
|
||||
transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.25rem));
|
||||
}
|
||||
indicator.notification {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0.5rem;
|
||||
left: -0.08rem;
|
||||
border: 0.15rem solid var(--text-color);
|
||||
border-radius: 0.8rem;
|
||||
transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.25rem));
|
||||
}
|
||||
indicator.hover {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 1.2rem;
|
||||
left: -0.08rem;
|
||||
border: 0.15rem solid var(--text-color);
|
||||
border-radius: 0.8rem;
|
||||
transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.6rem));
|
||||
}
|
||||
indicator.active {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 2rem;
|
||||
left: -0.08rem;
|
||||
border: 0.15rem solid var(--text-color);
|
||||
border-radius: 0.8rem;
|
||||
transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 1rem));
|
||||
}
|
||||
|
||||
|
||||
.icon-button {
|
||||
height: var(--icon-button-height);
|
||||
width: var(--icon-button-height);
|
||||
justify-content: center;
|
||||
}
|
||||
.icon-button svg {
|
||||
width: var(--icon-button-size);
|
||||
height: var(--icon-button-size);
|
||||
}
|
||||
button:hover, input:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
button:active, input:active {
|
||||
transform: var(--press-scale);
|
||||
}
|
||||
roomcontent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
height: 100dvh;
|
||||
width: calc(100vw - (var(--icon-button-height) + (var(--button-margin) * 2) + var(--border-width)) - 22rem);
|
||||
border-right: var(--border-width) solid var(--light-border-color);
|
||||
}
|
||||
sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
height: 100dvh;
|
||||
width: calc(var(--icon-button-height) + (var(--button-margin) * 2) + var(--border-width));
|
||||
border-right: var(--border-width) solid var(--light-border-color);
|
||||
}
|
||||
sidebar.second {
|
||||
width: 22rem;
|
||||
}
|
||||
.collapse-text-button {
|
||||
padding-left: calc(var(--button-margin) + 0.2rem);
|
||||
flex-shrink: 0;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
height: 2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.collapse-text-button .chevron {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.collapse-text-button.collapsed .chevron {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
hr {
|
||||
border: none;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
border-bottom: var(--border-width) solid var(--light-border-color);
|
||||
width: 60%;
|
||||
margin-left: 20%;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue