chore(webui): switch to a homegrown css
This commit is contained in:
parent
26c5f9c5c7
commit
2da9d222b6
GPG key ID:
F92E51B86E07177E
10 changed files with 566 additions and 276 deletions
|
|
@ -1,62 +1,60 @@
|
|||
{{ define "main" }}
|
||||
<main class="responsive" id="main">
|
||||
<div>
|
||||
<div class="tabs">
|
||||
<a data-ui="#explorer"{{ if eq .ActiveTab 0 }} class="active"{{ end }}>User Accounts</a>
|
||||
<a data-ui="#new"{{ if eq .ActiveTab 1 }} class="active"{{ end }}>Create New User Account</a>
|
||||
</div>
|
||||
<div id="explorer" class="page padding{{ if eq .ActiveTab 0 }} active{{ end }}">
|
||||
<table class="clickable-rows no-space">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Created</th>
|
||||
<th>Last Login</th>
|
||||
<th>Is Admin</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range .Accounts }}
|
||||
<tr>
|
||||
<td><a href="/accounts/{{ .Id }}">{{ .Username }}</a></td>
|
||||
<td><a href="/accounts/{{ .Id }}">{{ .Created }}</a></td>
|
||||
<td><a href="/accounts/{{ .Id }}">{{ .LastLogin }}</a></td>
|
||||
<td><a href="/accounts/{{ .Id }}">{{ .IsAdmin }}</a></td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="new" class="page padding{{ if eq .ActiveTab 1 }} active{{ end }}">
|
||||
<form action="/accounts" enctype="multipart/form-data" method="post">
|
||||
<fieldset>
|
||||
<div class="field border label{{ if or .UsernameDuplicate .UsernameInvalid }} invalid{{ end }}">
|
||||
<input autofocus
|
||||
id="username"
|
||||
name="username"
|
||||
required
|
||||
type="text"
|
||||
value="{{ .Username }}">
|
||||
<label for="username">Username</label>
|
||||
{{ if .UsernameDuplicate }}
|
||||
<span class="error">This username already exist</span>
|
||||
{{ else if .UsernameInvalid }}
|
||||
<span class="error">Invalid username</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="field label">
|
||||
<label>
|
||||
<input {{ if .IsAdmin }} checked{{ end }}
|
||||
name="is-admin"
|
||||
type="checkbox"
|
||||
value="{{ .IsAdmin }}" />
|
||||
<span>Is Admin</span>
|
||||
</label>
|
||||
</div>
|
||||
<button class="small-round" type="submit" value="submit">Create User Account</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tabs">
|
||||
<a data-ui="#explorer"{{ if eq .ActiveTab 0 }} class="active"{{ end }}>User Accounts</a>
|
||||
<a data-ui="#new"{{ if eq .ActiveTab 1 }} class="active"{{ end }}>Create New User Account</a>
|
||||
</div>
|
||||
</main>
|
||||
<div id="explorer" class="page padding{{ if eq .ActiveTab 0 }} active{{ end }}">
|
||||
<table class="clickable-rows no-space">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Created</th>
|
||||
<th>Last Login</th>
|
||||
<th>Is Admin</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range .Accounts }}
|
||||
<tr>
|
||||
<td><a href="/accounts/{{ .Id }}">{{ .Username }}</a></td>
|
||||
<td><a href="/accounts/{{ .Id }}">{{ .Created }}</a></td>
|
||||
<td><a href="/accounts/{{ .Id }}">{{ .LastLogin }}</a></td>
|
||||
<td><a href="/accounts/{{ .Id }}">{{ .IsAdmin }}</a></td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="new" class="page padding{{ if eq .ActiveTab 1 }} active{{ end }}">
|
||||
<form action="/accounts" enctype="multipart/form-data" method="post">
|
||||
<fieldset>
|
||||
<div class="field border label{{ if or .UsernameDuplicate .UsernameInvalid }} invalid{{ end }}">
|
||||
<input autofocus
|
||||
id="username"
|
||||
name="username"
|
||||
required
|
||||
type="text"
|
||||
value="{{ .Username }}">
|
||||
<label for="username">Username</label>
|
||||
{{ if .UsernameDuplicate }}
|
||||
<span class="error">This username already exist</span>
|
||||
{{ else if .UsernameInvalid }}
|
||||
<span class="error">Invalid username</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="field label">
|
||||
<label>
|
||||
<input {{ if .IsAdmin }} checked{{ end }}
|
||||
name="is-admin"
|
||||
type="checkbox"
|
||||
value="{{ .IsAdmin }}" />
|
||||
<span>Is Admin</span>
|
||||
</label>
|
||||
</div>
|
||||
<button class="small-round" type="submit" value="submit">Create User Account</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,37 +1,3 @@
|
|||
{{ define "nav" }}
|
||||
<header>
|
||||
<nav>
|
||||
<a href="/">
|
||||
<h6>TFSTATED</h6>
|
||||
</a>
|
||||
</nav>
|
||||
</header>
|
||||
{{ if eq .Page.Section "login" }}
|
||||
<a href="/login" class="active">
|
||||
<i>login</i>
|
||||
<span>Login</span>
|
||||
</a>
|
||||
{{ else }}
|
||||
<a href="/states"{{ if eq .Page.Section "states" }} class="fill"{{ end}}>
|
||||
<i>home_storage</i>
|
||||
<span>States</span>
|
||||
</a>
|
||||
<a href="/settings"{{ if eq .Page.Section "settings" }} class="fill"{{ end}}>
|
||||
<i>settings</i>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
{{ if .Page.IsAdmin }}
|
||||
<a href="/accounts"{{ if eq .Page.Section "accounts" }} class="fill"{{ end}}>
|
||||
<i>person</i>
|
||||
<span>User Accounts</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
<a href="/logout">
|
||||
<i>logout</i>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
|
@ -39,26 +5,47 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" href="/static/favicon.svg">
|
||||
<link href="/static/main.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/beercss@3.8.0/dist/cdn/beer.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
|
||||
<title>TFSTATED - {{ .Page.Title }}</title>
|
||||
</head>
|
||||
<body class="{{ if .Page.LightMode }}light{{ else }}dark{{ end }}">
|
||||
<nav class="left drawer l">{{ template "nav" . }}</nav>
|
||||
<nav class="left m">{{ template "nav" . }}</nav>
|
||||
<nav class="bottom s">{{ template "nav" . }}</nav>
|
||||
<body class="{{ if .Page.LightMode }}light-theme{{ else }}black-theme{{ end }}">
|
||||
<header>
|
||||
<nav>
|
||||
{{ if ne .Page.Precedent "" }}
|
||||
<a href="{{ .Page.Precedent }}" class="button circle chip">
|
||||
<i>arrow_back</i>
|
||||
</a>
|
||||
{{ end }}
|
||||
<h5 class="max center-align">{{ .Page.Title }}</h5>
|
||||
</nav>
|
||||
<h6>TFSTATED</h6>
|
||||
</header>
|
||||
{{ template "main" . }}
|
||||
<div id="main">
|
||||
<aside>
|
||||
{{ if eq .Page.Section "login" }}
|
||||
<a href="/login" class="active">
|
||||
<i class="material-symbols-outlined">login</i>
|
||||
<span>Login</span>
|
||||
</a>
|
||||
{{ else }}
|
||||
<a href="/states"{{ if eq .Page.Section "states" }} class="active"{{ end}}>
|
||||
<i class="material-symbols-outlined">home_storage</i>
|
||||
<span>States</span>
|
||||
</a>
|
||||
<a href="/settings"{{ if eq .Page.Section "settings" }} class="active"{{ end}}>
|
||||
<i class="material-symbols-outlined">settings</i>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
{{ if .Page.IsAdmin }}
|
||||
<a href="/accounts"{{ if eq .Page.Section "accounts" }} class="active"{{ end}}>
|
||||
<i class="material-symbols-outlined">person</i>
|
||||
<span>User Accounts</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
<hr>
|
||||
<a href="/logout">
|
||||
<i class="material-symbols-outlined">logout</i>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
</aside>
|
||||
<main>
|
||||
{{ template "main" . }}
|
||||
</main>
|
||||
</div>
|
||||
<footer>
|
||||
</footer>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.8.0/dist/cdn/beer.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
{{ define "main" }}
|
||||
<main class="responsive">
|
||||
<h5>{{ .Status }} - {{ .StatusText }}</h5>
|
||||
<p>{{ .Err }}</p>
|
||||
</main>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,25 @@
|
|||
{{ define "main" }}
|
||||
<main class="responsive">
|
||||
<form action="/login" method="post">
|
||||
<fieldset>
|
||||
<div class="field border label{{ if .Forbidden }} invalid{{ end }}">
|
||||
<input autofocus
|
||||
id="username"
|
||||
name="username"
|
||||
type="text"
|
||||
value="{{ .Username }}"
|
||||
required>
|
||||
<label for="username">Username</label>
|
||||
{{ if .Forbidden }}<span class="error">Invalid username or password</span>{{ end }}
|
||||
</div>
|
||||
<div class="field border label{{ if .Forbidden }} invalid{{ end}}">
|
||||
<input id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
required>
|
||||
<label for="password">Password</label>
|
||||
{{ if .Forbidden }}<span class="error">Invalid username or password</span>{{ end }}
|
||||
</div>
|
||||
<button class="small-round" type="submit" value="login">Login</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</main>
|
||||
<form action="/login" method="post">
|
||||
<fieldset>
|
||||
<div class="field border label{{ if .Forbidden }} invalid{{ end }}">
|
||||
<input autofocus
|
||||
id="username"
|
||||
name="username"
|
||||
type="text"
|
||||
value="{{ .Username }}"
|
||||
required>
|
||||
<label for="username">Username</label>
|
||||
{{ if .Forbidden }}<span class="error">Invalid username or password</span>{{ end }}
|
||||
</div>
|
||||
<div class="field border label{{ if .Forbidden }} invalid{{ end}}">
|
||||
<input id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
required>
|
||||
<label for="password">Password</label>
|
||||
{{ if .Forbidden }}<span class="error">Invalid username or password</span>{{ end }}
|
||||
</div>
|
||||
<button class="small-round" type="submit" value="login">Login</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
{{ define "main" }}
|
||||
<main class="responsive">
|
||||
<h5>Logout successful</h5>
|
||||
</main>
|
||||
<h5>Logout successful</h5>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,23 @@
|
|||
{{ define "main" }}
|
||||
<main class="responsive">
|
||||
<form action="/settings" method="post">
|
||||
<fieldset>
|
||||
<div class="field middle-align">
|
||||
<nav>
|
||||
<div class="max">
|
||||
<h6>Dark Mode</h6>
|
||||
</div>
|
||||
<label class="switch icon">
|
||||
<input {{ if not .Settings.LightMode }} checked{{ end }}
|
||||
name="dark-mode"
|
||||
type="checkbox"
|
||||
value="1" />
|
||||
<span>
|
||||
<i>dark_mode</i>
|
||||
</span>
|
||||
</label>
|
||||
</nav>
|
||||
</div>
|
||||
<button class="small-round" type="submit" value="login">Save</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</main>
|
||||
<form action="/settings" method="post">
|
||||
<fieldset>
|
||||
<div class="field middle-align">
|
||||
<nav>
|
||||
<div class="max">
|
||||
<h6>Dark Mode</h6>
|
||||
</div>
|
||||
<label class="switch icon">
|
||||
<input {{ if not .Settings.LightMode }} checked{{ end }}
|
||||
name="dark-mode"
|
||||
type="checkbox"
|
||||
value="1" />
|
||||
<span>
|
||||
<i>dark_mode</i>
|
||||
</span>
|
||||
</label>
|
||||
</nav>
|
||||
</div>
|
||||
<button class="small-round" type="submit" value="login">Save</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,71 +1,69 @@
|
|||
{{ define "main" }}
|
||||
<main class="responsive" id="main">
|
||||
<div>
|
||||
<div class="tabs">
|
||||
<a data-ui="#explorer"{{ if eq .ActiveTab 0 }} class="active"{{ end }}>States</a>
|
||||
<a data-ui="#new"{{ if eq .ActiveTab 1 }} class="active"{{ end }}>Create New State</a>
|
||||
</div>
|
||||
<div id="explorer" class="page padding{{ if eq .ActiveTab 0 }} active{{ end }}">
|
||||
<table class="clickable-rows no-space">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Path</th>
|
||||
<th>Updated</th>
|
||||
<th>Locked</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range .States }}
|
||||
<tr>
|
||||
<td><a href="/states/{{ .Id }}">{{ .Path }}</a></td>
|
||||
<td><a href="/states/{{ .Id }}">{{ .Updated }}</a></td>
|
||||
<td>
|
||||
<a href="/states/{{ .Id }}">
|
||||
{{ if eq .Lock nil }}no{{ else }}
|
||||
<span>yes</span>
|
||||
<div class="tooltip left max">
|
||||
<b>Lock</b>
|
||||
<p>{{ .Lock }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="new" class="page padding{{ if eq .ActiveTab 1 }} active{{ end }}">
|
||||
<form action="/states" enctype="multipart/form-data" method="post">
|
||||
<fieldset>
|
||||
<div class="field border label{{ if .PathError }} invalid{{ end }}">
|
||||
<input autofocus
|
||||
id="path"
|
||||
name="path"
|
||||
required
|
||||
type="text"
|
||||
value="{{ .Path }}">
|
||||
<label for="path">Path</label>
|
||||
{{ if .PathDuplicate }}
|
||||
<span class="error">This path already exist</span>
|
||||
{{ else if .PathError }}
|
||||
<span class="error">Invalid path</span>
|
||||
{{ else }}
|
||||
<span class="helper">Valid URL path beginning with a /</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="field label border">
|
||||
<input name="file"
|
||||
required
|
||||
type="file">
|
||||
<input type="text">
|
||||
<label>File</label>
|
||||
<span class="helper">JSON state file</span>
|
||||
</div>
|
||||
<button class="small-round" type="submit" value="submit">New</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tabs">
|
||||
<a data-ui="#explorer"{{ if eq .ActiveTab 0 }} class="active"{{ end }}>States</a>
|
||||
<a data-ui="#new"{{ if eq .ActiveTab 1 }} class="active"{{ end }}>Create New State</a>
|
||||
</div>
|
||||
</main>
|
||||
<div id="explorer" class="page padding{{ if eq .ActiveTab 0 }} active{{ end }}">
|
||||
<table class="clickable-rows no-space">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Path</th>
|
||||
<th>Updated</th>
|
||||
<th>Locked</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range .States }}
|
||||
<tr>
|
||||
<td><a href="/states/{{ .Id }}">{{ .Path }}</a></td>
|
||||
<td><a href="/states/{{ .Id }}">{{ .Updated }}</a></td>
|
||||
<td>
|
||||
<a href="/states/{{ .Id }}">
|
||||
{{ if eq .Lock nil }}no{{ else }}
|
||||
<span>yes</span>
|
||||
<div class="tooltip left max">
|
||||
<b>Lock</b>
|
||||
<p>{{ .Lock }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="new" class="page padding{{ if eq .ActiveTab 1 }} active{{ end }}">
|
||||
<form action="/states" enctype="multipart/form-data" method="post">
|
||||
<fieldset>
|
||||
<div class="field border label{{ if .PathError }} invalid{{ end }}">
|
||||
<input autofocus
|
||||
id="path"
|
||||
name="path"
|
||||
required
|
||||
type="text"
|
||||
value="{{ .Path }}">
|
||||
<label for="path">Path</label>
|
||||
{{ if .PathDuplicate }}
|
||||
<span class="error">This path already exist</span>
|
||||
{{ else if .PathError }}
|
||||
<span class="error">Invalid path</span>
|
||||
{{ else }}
|
||||
<span class="helper">Valid URL path beginning with a /</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="field label border">
|
||||
<input name="file"
|
||||
required
|
||||
type="file">
|
||||
<input type="text">
|
||||
<label>File</label>
|
||||
<span class="helper">JSON state file</span>
|
||||
</div>
|
||||
<button class="small-round" type="submit" value="submit">New</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,30 +1,28 @@
|
|||
{{ define "main" }}
|
||||
<main class="responsive" id="main">
|
||||
<p>
|
||||
Locked:
|
||||
{{ if eq .State.Lock nil }}no{{ else }}
|
||||
<span>yes</span>
|
||||
<div class="tooltip left max">
|
||||
<b>Lock</b>
|
||||
<p>{{ .State.Lock }}</p>
|
||||
</div>
|
||||
<p>
|
||||
Locked:
|
||||
{{ if eq .State.Lock nil }}no{{ else }}
|
||||
<span>yes</span>
|
||||
<div class="tooltip left max">
|
||||
<b>Lock</b>
|
||||
<p>{{ .State.Lock }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</p>
|
||||
<table class="clickable-rows no-space">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>By</th>
|
||||
<th>Created</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range .Versions }}
|
||||
<tr>
|
||||
<td><a href="/versions/{{ .Id }}">{{ index $.Usernames .AccountId.String }}</a></td>
|
||||
<td><a href="/versions/{{ .Id }}">{{ .Created }}</a></td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</p>
|
||||
<table class="clickable-rows no-space">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>By</th>
|
||||
<th>Created</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range .Versions }}
|
||||
<tr>
|
||||
<td><a href="/versions/{{ .Id }}">{{ index $.Usernames .AccountId.String }}</a></td>
|
||||
<td><a href="/versions/{{ .Id }}">{{ .Created }}</a></td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
</tbody>
|
||||
</table>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,21 @@
|
|||
{{ define "main" }}
|
||||
<main class="responsive" id="main">
|
||||
<p>
|
||||
Created by
|
||||
<a href="/accounts/{{ .Account.Id }}" class="link underline">{{ .Account.Username }}</a>
|
||||
at {{ .Version.Created }}
|
||||
</p>
|
||||
<div>
|
||||
<div class="tabs">
|
||||
<a data-ui="#explorer" class="active">Explorer</a>
|
||||
<a data-ui="#raw">Raw</a>
|
||||
</div>
|
||||
<div id="explorer" class="page padding active">
|
||||
<article class="border medium no-padding center-align middle-align">
|
||||
<progress class="circle large"></progress>
|
||||
</article>
|
||||
</div>
|
||||
<div id="raw" class="page padding">
|
||||
<pre><code id="raw-state">{{ .VersionData }}</code></pre>
|
||||
</div>
|
||||
<p>
|
||||
Created by
|
||||
<a href="/accounts/{{ .Account.Id }}" class="link underline">{{ .Account.Username }}</a>
|
||||
at {{ .Version.Created }}
|
||||
</p>
|
||||
<div>
|
||||
<div class="tabs">
|
||||
<a data-ui="#explorer" class="active">Explorer</a>
|
||||
<a data-ui="#raw">Raw</a>
|
||||
</div>
|
||||
</main>
|
||||
<div id="explorer" class="page padding active">
|
||||
<article class="border medium no-padding center-align middle-align">
|
||||
<progress class="circle large"></progress>
|
||||
</article>
|
||||
</div>
|
||||
<div id="raw" class="page padding">
|
||||
<pre><code id="raw-state">{{ .VersionData }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,318 @@
|
|||
:root {
|
||||
/* Set sans-serif & mono fonts */
|
||||
--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
|
||||
"Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
|
||||
"Helvetica Neue", sans-serif;
|
||||
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
||||
--standard-border-radius: 5px;
|
||||
}
|
||||
.black-theme {
|
||||
--bg-0: #181818;
|
||||
--bg-1: #252525;
|
||||
--bg-2: #3b3b3b;
|
||||
--dim: #777777;
|
||||
--fg-0: #b9b9b9;
|
||||
--fg-1: #dedede;
|
||||
--red: #ed4a46;
|
||||
--green: #70b433;
|
||||
--yellow: #dbb32d;
|
||||
--blue: #368aeb;
|
||||
--magenta: #eb6eb7;
|
||||
--cyan: #3fc5b7;
|
||||
--orange: #e67f43;
|
||||
--violet: #a580e2;
|
||||
--br_red: #ff5e56;
|
||||
--br_green: #83c746;
|
||||
--br_yellow: #efc541;
|
||||
--br_blue: #4f9cfe;
|
||||
--br_magenta: #ff81ca;
|
||||
--br_cyan: #56d8c9;
|
||||
--br_orange: #fa9153;
|
||||
--br_violet: #b891f5;
|
||||
}
|
||||
.light-theme {
|
||||
--bg-0: #fbf3db;
|
||||
--bg-1: #ece3cc;
|
||||
--bg-2: #d5cdb6;
|
||||
--dim: #909995;
|
||||
--fg-0: #53676d;
|
||||
--fg-1: #3a4d53;
|
||||
--red: #d2212d;
|
||||
--green: #489100;
|
||||
--yellow: #ad8900;
|
||||
--blue: #0072d4;
|
||||
--magenta: #ca4898;
|
||||
--cyan: #009c8f;
|
||||
--orange: #c25d1e;
|
||||
--violet: #8762c6;
|
||||
--br_red: #cc1729;
|
||||
--br_green: #428b00;
|
||||
--br_yellow: #a78300;
|
||||
--br_blue: #006dce;
|
||||
--br_magenta: #c44392;
|
||||
--br_cyan: #00978a;
|
||||
--br_orange: #bc5819;
|
||||
--br_violet: #825dc0;
|
||||
}
|
||||
|
||||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
|
||||
border:0;
|
||||
font:inherit;
|
||||
font-size:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
vertical-align:baseline;
|
||||
}
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
textarea,
|
||||
select,
|
||||
input,
|
||||
progress {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: var(--sans-font);
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body {
|
||||
background-color: var(--bg-0);
|
||||
color: var(--fg-0);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-feature-settings: "kern" 1;
|
||||
font-kerning: normal;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
header {
|
||||
background-color: var(--bg-0);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
width: 960px;
|
||||
}
|
||||
#main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 8px 0px;
|
||||
}
|
||||
#main aside {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: auto;
|
||||
max-width: 176px;
|
||||
min-width: 176px;
|
||||
}
|
||||
#main aside a {
|
||||
align-items: center;
|
||||
background-color: var(--bg-1);
|
||||
border-radius: 16px;
|
||||
display: inline-flex;
|
||||
font-size: 16px;
|
||||
gap: 8px;
|
||||
margin: 4px 2px;
|
||||
padding: 4px 16px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
#main aside a.active {
|
||||
background-color: var(--bg-2);
|
||||
}
|
||||
main {
|
||||
background-color: var(--bg-1);
|
||||
margin-right: auto;
|
||||
overflow-wrap: anywhere;
|
||||
scrollbar-gutter: stable both-edges;
|
||||
max-width: 776px;
|
||||
min-width: 776px;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: open, serif;
|
||||
font-weight: 700;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
h1 {
|
||||
font-size: 33px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 21px;
|
||||
}
|
||||
h5 {
|
||||
font-size: 19px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 16px;
|
||||
}
|
||||
h1:not(:first-child) {
|
||||
margin-top: 28px;
|
||||
}
|
||||
h2:not(:first-child) {
|
||||
margin-top: 24px;
|
||||
}
|
||||
h3:not(:first-child) {
|
||||
margin-top: 21px;
|
||||
}
|
||||
h4:not(:first-child) {
|
||||
margin-top: 19px;
|
||||
}
|
||||
h5:not(:first-child) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
h6:not(:first-child) {
|
||||
margin-top: 14px;
|
||||
}
|
||||
h1:not(:last-child) {
|
||||
margin-bottom: 21px;
|
||||
}
|
||||
h2:not(:last-child) {
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
h3:not(:last-child) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
h4:not(:last-child) {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
h5:not(:last-child) {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
h6:not(:last-child) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
aside:not(:first-child) {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
hyphens: auto;
|
||||
text-justify: inter-character;
|
||||
}
|
||||
p:not(:last-child) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
pre,code {
|
||||
background-color: var(--bg-0);
|
||||
color: var(--fg-0);
|
||||
font-family: monospace;
|
||||
margin: 0;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
ul {
|
||||
padding-left: 32px;
|
||||
}
|
||||
ul li {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.fullwidth {
|
||||
width: 100%;
|
||||
}
|
||||
img[src*='#center'] {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--yellow);
|
||||
}
|
||||
a:visited {
|
||||
color: var(--orange);
|
||||
}
|
||||
h1, a:hover {
|
||||
color: var(--red);
|
||||
text-wrap: balance;
|
||||
}
|
||||
h2, h3, h4, h5, h6 {
|
||||
color: var(--green);
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: var(--bg-0);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
footer p {
|
||||
color: var(--green);
|
||||
text-align: center;
|
||||
}
|
||||
footer a {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
@media only screen and (640px <= width < 960px) { /*864*/
|
||||
header {
|
||||
width: calc(100vw - 16px);
|
||||
}
|
||||
#main {
|
||||
/* These 16px account for the vertical scrollbar */
|
||||
max-width: calc(100vw - 16px);
|
||||
min-width: calc(100vw - 16px);
|
||||
}
|
||||
#main aside {
|
||||
align-items: center;
|
||||
max-width: 64px;
|
||||
min-width: 64px;
|
||||
}
|
||||
#main aside a span {
|
||||
display: none;
|
||||
}
|
||||
main {
|
||||
max-width: calc(100vw - 16px - 64px);
|
||||
min-width: calc(100vw - 16px - 64px);
|
||||
}
|
||||
}
|
||||
@media only screen and (width < 640px) {
|
||||
header {
|
||||
width: calc(100vw - 16px);
|
||||
}
|
||||
#main {
|
||||
display: block;
|
||||
max-width: auto;
|
||||
min-width: auto;
|
||||
}
|
||||
main {
|
||||
max-width: calc(100vw - 16px);
|
||||
min-width: calc(100vw - 16px);
|
||||
}
|
||||
#main aside {
|
||||
bottom: 0;
|
||||
flex-direction: row;
|
||||
position: fixed;
|
||||
max-width: calc(100vw - 16px);
|
||||
min-width: calc(100vw - 16px);
|
||||
overflow: scroll;
|
||||
}
|
||||
#main aside a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
table tbody a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
|
|
@ -6,3 +321,7 @@ table tbody a {
|
|||
.clickable-rows tbody tr:hover a {
|
||||
background-color: var(--secondary-container);
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue