mirror of
https://github.com/fromchat-messenger/web.git
synced 2026-09-22 19:15:08 +03:00
Add platform detection, fix styles
This commit is contained in:
@@ -7,6 +7,18 @@
|
|||||||
|
|
||||||
import { PRODUCT_NAME } from "./config";
|
import { PRODUCT_NAME } from "./config";
|
||||||
import { enableMapSet } from "immer";
|
import { enableMapSet } from "immer";
|
||||||
|
import type { Platform } from "../../electron.d";
|
||||||
|
|
||||||
|
function detectPlatform(): Platform {
|
||||||
|
const userAgent = navigator.userAgent.toLowerCase();
|
||||||
|
if (userAgent.includes("win")) return "win32";
|
||||||
|
if (userAgent.includes("mac")) return "darwin";
|
||||||
|
return "linux";
|
||||||
|
}
|
||||||
|
|
||||||
document.title = PRODUCT_NAME;
|
document.title = PRODUCT_NAME;
|
||||||
enableMapSet();
|
enableMapSet();
|
||||||
|
|
||||||
|
// Add platform class to body
|
||||||
|
const platform = detectPlatform();
|
||||||
|
document.body.classList.add(`platform-${platform}`);
|
||||||
@@ -1,11 +1,10 @@
|
|||||||
@use "../../../css/colors" as *;
|
@use "../../../css/colors" as *;
|
||||||
@use "../../../css/material" as *;
|
@use "../../../css/material" as *;
|
||||||
@use "sass:color";
|
@use "sass:color";
|
||||||
@use "right-panel" as *;
|
|
||||||
|
|
||||||
.chat-input-wrapper {
|
.chat-input-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 10px - $scrollbar-width 10px 10px;
|
margin: 0 10px 10px 10px;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|||||||
@@ -2,8 +2,6 @@
|
|||||||
@use "../../../css/material" as *;
|
@use "../../../css/material" as *;
|
||||||
@use "sass:color";
|
@use "sass:color";
|
||||||
|
|
||||||
$scrollbar-width: 8px;
|
|
||||||
|
|
||||||
.chat-wrapper {
|
.chat-wrapper {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -17,31 +15,9 @@ $scrollbar-width: 8px;
|
|||||||
position: relative;
|
position: relative;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
// Fancy floating thin scrollbar with invisible transparent margin
|
|
||||||
scrollbar-width: thin;
|
|
||||||
scrollbar-color: rgba($color-dark-primary, 0.3) transparent;
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width: $scrollbar-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-track {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background: rgba($color-dark-primary, 0.3);
|
|
||||||
border-radius: 4px;
|
|
||||||
margin: 2px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgba($color-dark-primary, 0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-header {
|
.chat-header {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
margin: 10px 10px - $scrollbar-width 0 10px;
|
margin: 10px 10px 0 10px;
|
||||||
background: rgba($color-dark-surface-container, 0.7);
|
background: rgba($color-dark-surface-container, 0.7);
|
||||||
backdrop-filter: blur(20px);
|
backdrop-filter: blur(20px);
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
|
|||||||
Reference in New Issue
Block a user