butterfly/projects
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

desktop: global styles (scrollbar, reset, animations), update index.html with Butterfly branding

Browse Source
This commit is contained in:
Butterfly Dev 2026-04-07 03:41:11 +00:00
parent 8a9429c946
commit b792b36eae
2 changed files with 75 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
desktop/src/index.html
View File

@ -2,10 +2,15 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Desktop</title> <title>Butterfly Desktop</title>
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Butterfly — Browser-based remote desktop environment">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<style>
body { margin: 0; background: #0d1b2a; }
app-root { display: block; width: 100vw; height: 100vh; }
</style>
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>

70
desktop/src/styles.scss
View File

@ -1 +1,69 @@
/* You can add global styles to this file, and also import other style files */ /* ── Butterfly Desktop — Global Styles ──────────────────────────────────── */
/* Reset */
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #0d1b2a;
color: #e0e0e0;
user-select: none;
-webkit-user-select: none;
}
/* Scrollbar styling */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #1e1e1e;
}
::-webkit-scrollbar-thumb {
background: #555;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #666;
}
/* Selection */
::selection {
background: #264f78;
color: #fff;
}
/* Focus outline */
:focus-visible {
outline: 2px solid #0078d4;
outline-offset: -2px;
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}