diff --git a/bootserver/static/stylesheets/main.css b/bootserver/static/stylesheets/main.css index 7dc4799..d11e3ca 100644 --- a/bootserver/static/stylesheets/main.css +++ b/bootserver/static/stylesheets/main.css @@ -1,55 +1,108 @@ :root { - --page-background: #000000; - --background: #121212; - --surface: #181818; - --surface-active: #303030; - --surface-hover: #aaaaaa; - --primary: #3b80c9; - --primary-variant: #c9953b; - --secondary: #c94e3b; - --text-main: #ffffff; - --text-variant: #9B9B9B; + /* Base colours */ + --base: #1e1e2e; + --mantle: #181825; + --crust: #11111b; + + /* Surface colours */ + --surface0: #313244; + --surface1: #45475a; + --surface2: #585b70; + --overlay0: #6c7086; + --overlay1: #7f849c; + --overlay2: #9399b2; + + /* Text colours */ + --text: #cdd6f4; + --subtext0: #a6adc8; + --subtext1: #bac2de; + + /* Main colours */ + --rosewater: #f5e0dc; + --flamingo: #f2cdcd; + --pink: #f5c2e7; + --mauve: #cba6f7; + --red: #f38ba8; + --maroon: #eba0ac; + --peach: #fab387; + --yellow: #f9e2af; + --green: #a6e3a1; + --teal: #94e2d5; + --sky: #89dceb; + --sapphire: #74c7ec; + --blue: #89b4fa; + --lavender: #b4befe; } body { - background-color: var(--page-background); - color: var(--text-main); + background-color: var(--crust); + color: var(--text); } .page-content { - width: 90%; - max-width: 1200px; + max-width: 1500px; margin: auto; } .container { - border-radius: 5px; - background-color: var(--surface); - padding: 5px; - border-radius: 5px 5px; + border-radius: 20px; + background-color: var(--base); + padding: 5px 10px; margin: 5px auto; } +.header-grid { + display: grid; + grid-template-columns: 1fr 3fr; + align-items: stretch; + justify-items: stretch; + column-gap: 10px; + margin: 5px auto; + + .container { + padding: 10px; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + } +} + +.client-list-grid { + display: grid; + grid-template-columns: 1fr; + justify-items: stretch; + margin: 5px auto; + row-gap: 5px; + + .container { + margin: 0; + } +} + +.stat-container { + h2 { + margin: auto; + width: 100%; + vertical-align: middle; + } +} + .main-container { padding: 20px; } .title-container { - background-color: var(--primary); -} + color: var(--blue); -.client-list-container { - border-radius: 0px 0px 5px 5px; - padding: 10px; - background-color: var(--surface); -} -.client-container { - border-radius: 5px; - padding: 4px; - margin-top: 2px; - margin-bottom: 2px; + h1 { + margin: auto; + padding: auto; + vertical-align: middle; + width: 100%; + } } .client-header { @@ -60,7 +113,7 @@ body { .client-uuid { font-size: smaller; - color: var(--text-variant); + color: var(--subtext1); } } @@ -75,12 +128,12 @@ body { cursor: pointer; &.selected { - background-color: var(--surface-active); + background-color: var(--overlay0); cursor: default; } &:hover { - background-color: var(--surface-hover); + background-color: var(--overlay2); --text-variant: #000000; } } @@ -92,7 +145,7 @@ body { .boot-option-uuid { font-size: smaller; - color: var(--text-variant); + color: var(--subtext0); } .boot-option-path { diff --git a/bootserver/templates/index.html b/bootserver/templates/index.html index f45d03f..949de20 100644 --- a/bootserver/templates/index.html +++ b/bootserver/templates/index.html @@ -11,41 +11,45 @@
-
-

HTTP boot server admin page

-
+
-
-
+

{{len .Clients}} enrolled clients

+
- {{range .Clients}} -
-
- {{.Name}} - {{.ID}} -
-
-
- {{$cid := .ID}}{{range .BootOptions}} -
-
- {{.Name}} - {{.ID}} -
-
- {{.Path}} -
-
- {{end}} -
-
-
- {{end}} +
+

HTTP boot server admin page

+ +
+ {{range .Clients}} +
+
+ {{.Name}} + {{.ID}} +
+
+
+ {{$cid := .ID}}{{range .BootOptions}} +
+
+ {{.Name}} + {{.ID}} +
+
+ {{.Path}} +
+
+ {{end}} +
+
+
+ {{end}} +
+