punkfairie/ed-safari
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases 1 Packages Wiki Activity Actions

Start styling settings.

Browse source
This commit is contained in:
punkfairie 2023-05-13 18:33:22 -07:00
parent 4bcdf69531
commit 5dd978e491
2 changed files with 83 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
settings.html
View file

@ -13,6 +13,40 @@
</div> </div>
</div> </div>
<form id="settingsForm">
<div class="container-fluid">
<div class="row ms-1 me-1">
<label for="minValue" class="col col-form-label system charted">
Minimum value:
</label>
<div class="col-2 system charted p-0">
<!-- TODO INSERT CURRENT VALUE -->
<input type="text" class="form-control" id="minValue">
</div>
</div>
<div class="row ms-1 me-1">
<label for="maxDistance" class="col col-form-label system charted">
Maximum distance:
</label>
<div class="col-2 system charted p-0">
<!-- TODO INSERT CURRENT VALUE -->
<input type="text" class="form-control" id="maxDistance">
</div>
</div>
</div>
<div class="container-fluid">
<div class="row separator align-items-center">
<div class="col"><hr class="separator"></div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Save</button>
</div>
<div class="col"><hr class="separator"></div>
</div>
</div>
</form>
<script type="module" src="/src/settings.js"></script> <script type="module" src="/src/settings.js"></script>
</body> </body>
</html> </html>

72
src/assets/index.css
View file

@ -8,8 +8,21 @@
font-display: swap; font-display: swap;
} }
:root {
--background: black;
--main: #F5A804;
--accent-dark: #0026FF;
--accent-light: #17EFF9;
--secondary-text: #EAA529;
--secondary-bg: #370C03;
--grey-text: #9f9f9f;
--grey-bg: #333333;
}
body { body {
background-color:black; background-color:var(--background);
font: 20px Eurostile, sans-serif; font: 20px Eurostile, sans-serif;
text-transform: uppercase; text-transform: uppercase;
} }
@ -31,23 +44,23 @@ body {
margin-right: 1px; margin-right: 1px;
} }
.charted { .charted {
color: #9f9f9f; color: var(--grey-text);
background: #333333; background: var(--grey-bg);
} }
.uncharted { .uncharted {
color: #EAA529; color: var(--secondary-text);
background: #370C03; background: var(--secondary-bg);
} }
.hyperspace { .hyperspace {
color: #0026FF; color: var(--accent-dark);
} }
.statusInfo { .statusInfo {
color: #EAA529; color: var(--secondary-text);
background: #370C03; background: var(--secondary-bg);
} }
.inactive { .inactive {
color: #000000; color: var(--background);
} }
.ring { .ring {
@ -64,27 +77,27 @@ body {
} }
div.highlighted b.active { div.highlighted b.active {
color: #000000; color: var(--background);
} }
div.highlighted b.inactive { div.highlighted b.inactive {
color: #F5A804; color: var(--main);
} }
div.uncharted b.active { div.uncharted b.active {
color: #EAA529; color: var(--secondary-text);
} }
div.uncharted b.inactive { div.uncharted b.inactive {
color: #370C03; color: var(--secondary-bg);
} }
div.charted b.active { div.charted b.active {
color: #9f9f9f; color: var(--grey-text);
} }
div.charted b.inactive { div.charted b.inactive {
color: #333333; color: var(--grey-bg);
} }
.highlighted { .highlighted {
color: #370C03; color: var(--secondary-bg);
background: #F5A804; background: var(--main);
} }
div b.active.landable { div b.active.landable {
@ -92,7 +105,7 @@ div b.active.landable {
} }
.currentSystemHighlight { .currentSystemHighlight {
background: #17EFF9; background: var(--accent-light);
} }
.current_location { .current_location {
@ -103,24 +116,24 @@ div b.active.landable {
.latest-scan { .latest-scan {
border-style: dotted; border-style: dotted;
border-color: #F5A804; border-color: var(--main);
border-width: 1px; border-width: 1px;
} }
.separator { .separator {
color: #F5A804; color: var(--main);
border-color: #F5A804; border-color: var(--main);
border-width: 1px 0px 1px 0px; border-width: 1px 0px 1px 0px;
text-shadow: 0px 0px 3px; text-shadow: 0px 0px 3px;
opacity: 100%; opacity: 100%;
} }
.next-system { .next-system {
color: #17EFF9; color: var(--accent-light);
} }
.next-system hr { .next-system hr {
border-color: #17EFF9; border-color: var(--accent-light);
} }
.alert { .alert {
@ -150,4 +163,17 @@ div b.active.landable {
.gravity-hidden { .gravity-hidden {
color: #00000000; color: #00000000;
background-color: #00000000; background-color: #00000000;
}
.form-control, .form-control:active, .form-control:focus {
margin-top: 5px;
background: transparent;
border-color: transparent;
border-radius: 0;
box-shadow: none;
}
/* SET THIS TO PARENT VIA CSS */
.form-control:focus {
border-color: var(--main);
} }