jr: gajumaru color scheme

This commit is contained in:
2024-03-20 00:44:09 -06:00
parent aab6f34ba6
commit 708b4bc612
4 changed files with 60 additions and 19 deletions
+19
View File
@@ -0,0 +1,19 @@
:root {
--b1: #FBFCFB;
--b2: #D6DAD8;
--b3: #B9BCb9;
--b4: #969A98;
--b5: #7C7C7C;
--b6: #545454;
--b7: #343434;
--b8: #0A0B0A;
--g1: #c1d8c5;
--g2: #9ab6a1;
--g3: #88a28d;
--g4: #607e68;
--g5: #41664b;
--g6: #345c3e;
--g7: #224d2d;
--g8: #0a2f14;
}
+2 -2
View File
@@ -6,14 +6,14 @@
<meta charset="utf-8">
<style type="text/css">
html, body {
background-color: #D0F5F7;
background-color: #FBFCFB;
font-family: monospace, sans-serif;
font-size: '0.7em';
height: 78%;
}
pre {
background-color: #E8E0F8;
background-color: #EBECEB;
overflow: scroll;
box-sizing: border-box;
width: 100%;
+35 -13
View File
@@ -3,18 +3,47 @@
<head>
<meta charset="utf-8">
<style type="text/css">
@import "gaju-colors.css";
body {
background: #d6efff;
background: var(--b1);
color: --var(g8);
width: 400px;
font-family: monospace, sans-serif;
font-size: 0.7em;
}
#jr-hdr {
border: 2px solid var(--g4);
border-radius: 5px;
width: 100%;
background: var(--g2);
}
.psection {
background: var(--b2);
border: 1px solid var(--g4);
border-radius: 5px;
width: 97%;
padding: 5px;
margin-top: 5px;
}
.account-active {
background: var(--g1);
color: var(--g7);
}
.account-inactive {
background: var(--b4);
color: var(--g4);
}
</style>
</head>
<body>
<table width="100%" style="background: #dad1ff; border: 2px solid #6c5d96; border-radius: 5px;">
<table id="jr-hdr">
<tr>
<td><img src="../art/jrx-icon-48.png" style="width: 32px; height: 32px;"></td>
<td style="font-size: 32px; text-align: center; font-weight: bold">
@@ -23,7 +52,7 @@
</tr>
</table>
<div style="margin-top: 5px; width: 95%; background: #d9ffd6; border: 1px solid #6c5d96; border-radius: 5px; padding: 5px;">
<div class="psection">
<table >
<tr>
<td><img src="../art/keypair.svg" style="width: 32px; height: 32px;"></td>
@@ -46,7 +75,7 @@
</div>
<!-- generate new keypair -->
<div style="margin-top: 5px; width: 95%; background: #d6ffd9; border: 1px solid #6c5d96; border-radius: 5px; padding: 5px;">
<div class="psection">
<table >
<tr>
<td><img src="../art/keypair.svg" style="width: 32px; height: 32px;"></td>
@@ -64,7 +93,7 @@
</div>
<!-- faert recovery -->
<div style="margin-top: 5px; width: 95%; background: #ffd6d9; border: 1px solid #6c5d96; border-radius: 5px; padding: 5px;">
<div class="psection">
<table >
<tr>
<td><img src="../art/keypair.svg" style="width: 32px; height: 32px;"></td>
@@ -83,17 +112,10 @@
<br>
<button id="faert-btn">Recover Keypair from GajuPhrase</button>
</form>
<!-- recover from seed phrase
<form>
<label for="seed-input">Seed Phrase:</label>
<input id="seed-input"></input>
<button id="seed-btn">Recover Keypair from Seed Phrase</button>
</form>
-->
</div>
<!-- network id -->
<div style="margin-top: 5px; width: 95%; background: #d6d9ff; border: 1px solid #6c5d96; border-radius: 5px; padding: 5px;">
<div class="psection">
<table >
<tr>
<td><img src="../art/keypair.svg" style="width: 32px; height: 32px;"></td>
+4 -4
View File
@@ -253,12 +253,12 @@ pi_repop
this_li.appendChild(rkp_ul);
// if active, make background green
// if active, make background "active"
if (this_rkp.active)
this_li.style.background = 'green';
// otherwise make background red and add activate li
this_li.classList.add('account-active');
// otherwise make background "inactive" and add activate li
else {
this_li.style.background = 'red';
this_li.classList.add('account-inactive');
let activate_li = document.createElement('li');
let activate_a = document.createElement('a');
activate_a.innerHTML = 'Switch to this key';