mirror of
https://git.srhtnin.garden/sarah/SaraView.git
synced 2026-10-15 02:43:17 +02:00
Initial commit
This commit is contained in:
sarah committed
commit
8aa223bc7b
40 files changed
+4320
No files matched your search
@@ -0,0 +1,794 @@
|
||||
@font-face {
|
||||
font-family: "Fixedsys Excelsior";
|
||||
src: url("/Fonts/FSEX302.ttf") format("truetype");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/*
|
||||
* Palette roles below are DEFAULTS ONLY. The active theme's actual values
|
||||
* are applied at runtime (see App.jsx), which sets these same custom
|
||||
* property names on :root via JS after fetching the chosen theme from the
|
||||
* backend. Any theme file just needs to supply this same set of roles.
|
||||
*/
|
||||
:root {
|
||||
--Background: #1e1e2e;
|
||||
--Surface: #181825;
|
||||
--SurfaceAlt: #313244;
|
||||
--Border: #45475a;
|
||||
--Text: #cdd6f4;
|
||||
--TextMuted: #6c7086;
|
||||
--Black: #11111b;
|
||||
--White: #cdd6f4;
|
||||
--Red: #f38ba8;
|
||||
--Orange: #fab387;
|
||||
--Yellow: #f9e2af;
|
||||
--Green: #a6e3a1;
|
||||
--Blue: #89b4fa;
|
||||
--Purple: #cba6f7;
|
||||
|
||||
--FontFamily: "Fixedsys Excelsior", "Cascadia Mono", monospace;
|
||||
--FontSize: 14px;
|
||||
|
||||
--HeaderHeight: 45px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#Root {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--Background);
|
||||
color: var(--Text);
|
||||
font-family: var(--FontFamily);
|
||||
font-size: var(--FontSize);
|
||||
font-smooth: never;
|
||||
-webkit-font-smoothing: none;
|
||||
}
|
||||
|
||||
img,
|
||||
.PixelIcon {
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.AppShell {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Sidebar / file tree */
|
||||
|
||||
.Sidebar {
|
||||
width: 260px;
|
||||
flex-shrink: 0;
|
||||
background: var(--Surface);
|
||||
border-right: 1px solid var(--Border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.SidebarTree {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.SidebarNewEntry {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
border-top: 1px solid var(--Border);
|
||||
}
|
||||
|
||||
.SidebarNewEntryTop {
|
||||
border-top: none;
|
||||
border-bottom: 1px solid var(--Border);
|
||||
}
|
||||
|
||||
.SidebarNewEntry button {
|
||||
flex: 1;
|
||||
background: var(--SurfaceAlt);
|
||||
color: var(--Text);
|
||||
border: 1px solid var(--Purple);
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.SidebarNewEntry button:hover {
|
||||
background: var(--Border);
|
||||
}
|
||||
|
||||
.SidebarHeader {
|
||||
height: var(--HeaderHeight);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
color: var(--Purple);
|
||||
font-size: 18px;
|
||||
border-bottom: 1px solid var(--Purple);
|
||||
}
|
||||
|
||||
.SidebarHeaderLink {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.SidebarHeaderLink:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.SidebarHeaderRight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.UserBadge {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.UserBadgeAvatar {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--Border);
|
||||
}
|
||||
|
||||
.UserBadgeInitial {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: var(--Background);
|
||||
}
|
||||
|
||||
.SettingsButton {
|
||||
background: none;
|
||||
border: 1px solid var(--Purple);
|
||||
color: var(--Purple);
|
||||
border-radius: 4px;
|
||||
padding: 2px 8px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.SettingsButton:hover {
|
||||
background: var(--SurfaceAlt);
|
||||
}
|
||||
|
||||
.SidebarError {
|
||||
padding: 10px 16px;
|
||||
color: var(--Red);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.TreeRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.TreeRow:hover {
|
||||
background: var(--SurfaceAlt);
|
||||
}
|
||||
|
||||
.TreeRowSelected {
|
||||
background: var(--Border);
|
||||
color: var(--Purple);
|
||||
}
|
||||
|
||||
.TreeRowCurrentDirectory {
|
||||
border-left: 2px solid var(--Purple);
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
.TreeIcon {
|
||||
width: 12px;
|
||||
text-align: center;
|
||||
color: var(--TextMuted);
|
||||
}
|
||||
|
||||
.TreeLabel {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.TreeRowActions {
|
||||
display: none;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.TreeRow:hover .TreeRowActions,
|
||||
.DirectoryEntry:hover .TreeRowActions {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.TreeRowActionButton {
|
||||
background: none;
|
||||
border: 1px solid var(--Border);
|
||||
color: var(--TextMuted);
|
||||
border-radius: 3px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 1;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.TreeRowActionButton:hover {
|
||||
border-color: var(--Purple);
|
||||
color: var(--Purple);
|
||||
}
|
||||
|
||||
.TreeChildren {
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
/* Main column */
|
||||
|
||||
.MainColumn {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.TopBar {
|
||||
height: var(--HeaderHeight);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--Border);
|
||||
}
|
||||
|
||||
.Breadcrumb {
|
||||
padding: 0 16px;
|
||||
color: var(--TextMuted);
|
||||
}
|
||||
|
||||
.BreadcrumbLink {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.BreadcrumbLink:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.BreadcrumbSegment {
|
||||
color: var(--Purple);
|
||||
}
|
||||
|
||||
.BreadcrumbDivider {
|
||||
margin: 0 6px;
|
||||
color: var(--TextMuted);
|
||||
}
|
||||
|
||||
.RootSwitcher {
|
||||
margin-right: 16px;
|
||||
background: var(--SurfaceAlt);
|
||||
color: var(--Text);
|
||||
border: 1px solid var(--Purple);
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.MainBody {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.PreviewEmpty {
|
||||
margin: auto;
|
||||
color: var(--TextMuted);
|
||||
}
|
||||
|
||||
.DirectoryPane {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.DirectoryList {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.DirectoryEntry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.DirectoryEntry:hover {
|
||||
background: var(--SurfaceAlt);
|
||||
}
|
||||
|
||||
.DirectoryEmpty {
|
||||
padding: 12px 16px;
|
||||
color: var(--TextMuted);
|
||||
}
|
||||
|
||||
.PreviewMarkdown,
|
||||
.PreviewEditor,
|
||||
.PreviewFrame,
|
||||
.PreviewMedia {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.PreviewToolbar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px solid var(--Border);
|
||||
}
|
||||
|
||||
.PreviewToolbarSticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
background: var(--Background);
|
||||
}
|
||||
|
||||
.PreviewToolbar button {
|
||||
background: var(--SurfaceAlt);
|
||||
color: var(--Text);
|
||||
border: 1px solid var(--Purple);
|
||||
border-radius: 4px;
|
||||
padding: 4px 10px;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.PreviewToolbar button:hover {
|
||||
background: var(--Border);
|
||||
}
|
||||
|
||||
.PreviewToolbar button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.SaveErrorText {
|
||||
color: var(--Red);
|
||||
align-self: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.MarkdownBody {
|
||||
padding: 24px;
|
||||
max-width: 720px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.MarkdownBody h1,
|
||||
.MarkdownBody h2,
|
||||
.MarkdownBody h3 {
|
||||
color: var(--Purple);
|
||||
}
|
||||
|
||||
.MarkdownBody a {
|
||||
color: var(--Blue);
|
||||
}
|
||||
|
||||
.MarkdownBody code {
|
||||
background: var(--SurfaceAlt);
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.MarkdownBody img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.MarkdownBody ul.contains-task-list {
|
||||
list-style: none;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.MarkdownBody .task-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.PreviewText {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.TextBody {
|
||||
margin: 0;
|
||||
padding: 24px;
|
||||
max-width: 720px;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.BlameGutter {
|
||||
background: var(--Surface);
|
||||
border-right: 1px solid var(--Border);
|
||||
}
|
||||
|
||||
.BlameGutterMarker {
|
||||
display: inline-block;
|
||||
padding: 0 6px;
|
||||
font-size: 11px;
|
||||
color: var(--TextMuted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.PreviewMedia img,
|
||||
.PreviewMedia video {
|
||||
margin: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.PreviewFrame iframe {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* Tag panel — bordered box style, mirroring the Statistics panel look */
|
||||
|
||||
.TagPanel {
|
||||
width: 280px;
|
||||
flex-shrink: 0;
|
||||
margin: 16px;
|
||||
height: fit-content;
|
||||
background: var(--Surface);
|
||||
border: 1px solid var(--Purple);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.TagPanelHeader {
|
||||
padding: 10px 16px;
|
||||
color: var(--Purple);
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid var(--Purple);
|
||||
}
|
||||
|
||||
.TagPanelBody {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.TagPanelEmpty {
|
||||
padding: 12px 16px;
|
||||
color: var(--TextMuted);
|
||||
}
|
||||
|
||||
.TagRow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 6px 16px;
|
||||
border-bottom: 1px solid var(--SurfaceAlt);
|
||||
}
|
||||
|
||||
.TagRow:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.TagName {
|
||||
color: var(--Text);
|
||||
}
|
||||
|
||||
.TagValue {
|
||||
color: var(--Orange);
|
||||
}
|
||||
|
||||
/* Settings modal */
|
||||
|
||||
.SettingsOverlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.SettingsModal {
|
||||
width: 420px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
background: var(--Surface);
|
||||
border: 1px solid var(--Purple);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.SettingsHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 16px;
|
||||
color: var(--Purple);
|
||||
font-size: 18px;
|
||||
border-bottom: 1px solid var(--Purple);
|
||||
}
|
||||
|
||||
.SettingsClose {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--TextMuted);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.SettingsClose:hover {
|
||||
color: var(--Text);
|
||||
}
|
||||
|
||||
.SettingsBody {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.SettingsRow {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.SettingsRowInline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.SettingsLabel {
|
||||
color: var(--TextMuted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.SettingsRow input[type="text"],
|
||||
.SettingsRow input[type="number"],
|
||||
.SettingsRow select {
|
||||
background: var(--SurfaceAlt);
|
||||
color: var(--Text);
|
||||
border: 1px solid var(--Border);
|
||||
border-radius: 4px;
|
||||
padding: 6px 8px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.SettingsRow input[type="checkbox"] {
|
||||
accent-color: var(--Purple);
|
||||
}
|
||||
|
||||
.Switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.Switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.SwitchTrack {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--SurfaceAlt);
|
||||
border: 1px solid var(--Border);
|
||||
border-radius: 999px;
|
||||
transition: background 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.SwitchThumb {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: var(--TextMuted);
|
||||
transition: transform 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
|
||||
.Switch input:checked + .SwitchTrack {
|
||||
background: var(--Purple);
|
||||
border-color: var(--Purple);
|
||||
}
|
||||
|
||||
.Switch input:checked + .SwitchTrack .SwitchThumb {
|
||||
transform: translateX(16px);
|
||||
background: var(--Text);
|
||||
}
|
||||
|
||||
.SettingsBody button,
|
||||
.SettingsFooter button {
|
||||
background: var(--SurfaceAlt);
|
||||
color: var(--Text);
|
||||
border: 1px solid var(--Purple);
|
||||
border-radius: 4px;
|
||||
padding: 4px 10px;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.SettingsBody button:hover,
|
||||
.SettingsFooter button:hover {
|
||||
background: var(--Border);
|
||||
}
|
||||
|
||||
.SettingsSection {
|
||||
border-top: 1px solid var(--Border);
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.SettingsSectionTitle {
|
||||
color: var(--Purple);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.PaletteGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.PaletteSwatchRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.PaletteSwatchRow input[type="color"] {
|
||||
width: 28px;
|
||||
height: 22px;
|
||||
padding: 0;
|
||||
border: 1px solid var(--Border);
|
||||
border-radius: 3px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ColourSwatchPicker {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ColourSwatch {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ColourSwatch:hover {
|
||||
border-color: var(--Border);
|
||||
}
|
||||
|
||||
.ColourSwatchSelected {
|
||||
border-color: var(--Text);
|
||||
}
|
||||
|
||||
.ColourSwatchSmall {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.AvatarUploadRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.AvatarPreview {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--Border);
|
||||
}
|
||||
|
||||
.SettingsFooter {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid var(--Border);
|
||||
}
|
||||
|
||||
.SettingsSaveError {
|
||||
color: var(--Red);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Login screen */
|
||||
|
||||
.LoginScreen {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--Background);
|
||||
}
|
||||
|
||||
.LoginBox {
|
||||
width: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
padding: 20px;
|
||||
background: var(--Surface);
|
||||
border: 1px solid var(--Purple);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.LoginTitle {
|
||||
color: var(--Purple);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.LoginSubtitle {
|
||||
color: var(--TextMuted);
|
||||
font-size: 13px;
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
.LoginBox button {
|
||||
background: var(--SurfaceAlt);
|
||||
color: var(--Text);
|
||||
border: 1px solid var(--Purple);
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.LoginBox button:hover {
|
||||
background: var(--Border);
|
||||
}
|
||||
Reference in new issue
Block a user