oxen-io
/
oxen-observer
mirror of https://github.com/oxen-io/oxen-observer.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Style redux

This commit is contained in:
Jason Rhinelander 2021-01-08 13:04:40 -04:00
parent 417f6bdb7a
commit 6bf12dd40e
4 changed files with 65 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
observer.py
View File

@ -602,7 +602,7 @@ def show_tx(txid, more_details=False):
i += 1
if more_details:
formatter = HtmlFormatter(cssclass="syntax-highlight", style="native")
formatter = HtmlFormatter(cssclass="syntax-highlight", style="paraiso-dark")
more_details = {
'details_css': formatter.get_style_defs('.syntax-highlight'),
'details_html': highlight(json.dumps(tx, indent="\t", sort_keys=True), JsonLexer(), formatter),

111
static/style.css
View File

@ -1,8 +1,24 @@
:root {
--primary-bg-color: #0b0a1a;
--primary-fg-color: white;
--primary-link-color: white;
--primary-link-highlight-color: #12c7ba;
--control-bg-color: #12c7ba;
--control-fg-color: black;
--control-highlight-link-color: #0c8b82;
--control-highlight-bg-color: #dbf7f5;
--control-highlight-fg-color: black;
--text-highlight-color: #12c7ba;
--header-bg-color: #12c7ba;
--header-fg-color: black;
}
body {
margin: 0;
padding: 0;
font-size: 80%;
background-color: #1f1c47;
background-color: var(--primary-bg-color);
font-family: sans-serif;
color: white;
}
@ -57,7 +73,7 @@ h1, h2, h3, h4, h5, h6 {
font-weight: bold;
}
p>label, span>label, h3>label, h4>label, td>label, .info-item>label {
color: #ff7a87;
color: var(--text-highlight-color);
}
label.warning {
color: red;
@ -84,7 +100,7 @@ label.warning {
.Subtitle {
font-size: 1.0em;
color: rgb(255 255 255 / 80%);
color: rgba(255, 255, 255, 0.8);
margin: 0;
margin-top: 0.5em;
margin-bottom: 0.5em;
@ -92,14 +108,14 @@ label.warning {
.PaginationControl,
.PageButton {
background-color: #dbf7f5;
background-color: var(--control-bg-color);
min-height: 1.5em;
padding: 5px;
padding-top: 8px;
margin-right: 1em;
font-weight: bold;
font-size: 1em;
color: black;
color: var(--control-fg-color);
border: none;
font-family: sans-serif;
}
@ -110,20 +126,29 @@ label.warning {
.PaginationControl select {
font-size: inherit;
background-color: #1a1a1a;
color: white;
background-color: var(--primary-bg-color);
color: var(--primary-link-highlight-color);
border: none;
padding: 0;
margin: 0;
}
.PageButton:hover {
background-color: #dbf7f5;
color: var(--control-highlight-fg-color);
background-color: var(--control-highlight-bg-color);
}
.PageButton.disabled:hover {
background-color: #707070;
}
.pages a:link, .pages a:visited {
color: var(--control-fg-color);
}
.pages a:hover, .PageButton:hover {
color: var(--control-highlight-link-color);
}
.Wrapper {
width: 80%;
margin: auto;
@ -135,7 +160,6 @@ label.warning {
.Header > a:link {
text-decoration: none;
color: white; !important
}
.Table {
@ -145,44 +169,38 @@ label.warning {
table thead tr,
.TableHeader {
font-weight: bold;
color: black;
background-color: #dbf7f5;
color: var(--header-fg-color);
background-color: var(--header-bg-color);
}
.TitleUnderliner {
height: 2px;
width: 100%;
background-color: #dbf7f5;
background-color: var(--control-bg-color);
margin-bottom: 1em;
}
.TitleDivider {
height: 2px;
width: 100%;
background-color: #dbf7f5;
background-color: var(--control-bg-color);
margin: 1em 0;
}
.LinkNoUnderline {
.linked-icon {
text-decoration: none !important;
}
.LinkNoUnderline:hover {
color: white;
}
.center {
margin: auto;
width: 96%;
/*border: 1px solid #73AD21;
padding: 10px;*/
}
tr, li, #pages, .info {
tr, li, .pages, .info {
height: 2em;
margin: auto;
}
#pages {
.pages {
margin-top: 1em;
margin-bottom: 1em;
display: flex;
@ -194,14 +212,13 @@ td {
}
a:link, a:visited {
color: black;
text-decoration: underline;
color: white;
color: var(--primary-fg-color);
}
a:hover {
text-decoration: underline;
color: #12c7ba;
color: var(--control-bg-color);
}
form {
@ -211,7 +228,7 @@ form {
.top-search input[type="text"] {
padding: 2px;
border: solid 1px rgba(255, 255, 255, 0.25);
background-color: #1a1a1a;
background-color: var(--primary-bg-color);
height: 2em;
width: 80%;
font-size: 1em;
@ -220,9 +237,9 @@ form {
.top-search input[type="text"]:focus,
.top-search input[type="text"].focus {
border: solid 1px #008522;
border: solid 1px var(--control-highlight-link-color);
}
h1, h2, h3, h4, h5, h6 { color: white; }
h1, h2, h3, h4, h5, h6 { color: var(--primary-fg-color); }
.tabs {
position: relative;
@ -328,7 +345,7 @@ div.quorums {
}
div.quorums>div {
border: 2px solid #dbf7f5;
border: 2px solid var(--control-bg-color);
border-radius: 5px;
padding: 0;
flex-grow: 1;
@ -359,7 +376,7 @@ div.quorums>div>.workers {
/*space-between;*/
}
.quorums.obligations .workers, .quorums.pulse .validators, .quorums.blink .validators.q1 {
border-top: 2px solid #dbf7f5;
border-top: 2px solid var(--control-bg-color);
}
.quorums .workers label, .quorums .validators label {
font-weight: bold;
@ -386,25 +403,26 @@ div.quorums>div>.workers {
color: white;
}
.quorums .sn:hover {
background-color: #3f4bf5;
color: white;
background-color: var(--control-highlight-bg-color);
border-color: var(--control-highlight-link-color);
color: var(--control-highlight-fg-color);
}
.quorums.pulse .workers .sn {
flex-grow: 1;
max-width: 150px;
}
div.quorums h2 {
background-color: #dbf7f5;
color: black;
background-color: var(--control-bg-color);
color: var(--control-fg-color);
font-size: 14px;
font-weight: bold;
margin: 0;
}
div.quorums>div.now h2 {
background-color: #dbf7f5;
background-color: var(--control-highlight-bg-color);
}
div.quorums>div.now, div.quorums.obligations>div.now .workers, div.quorums.blink>div.now {
border-color: #dbf7f5;
border-color: var(--control-highlight-bg-color);
}
div.quorums h5 {
margin: 0;
@ -417,18 +435,18 @@ td.quorum-pubkey span {
}
div.tx-state-change-quorum div.workers {
border-top: 2px solid #008522;
border-top: 2px solid var(--control-bg-color);
}
div.tx-state-change-quorum div.validators .sn.voted,
div.tx-state-change-quorum div.workers .sn.testee {
background-color: #006a1b;
border-color: #78be20;
color: #78be20;
background-color: var(--control-bg-color);
border-color: var(--control-fg-color);
color: var(--control-fg-color);
}
.quorums div.tx-state-change-quorum .sn:hover {
background-color: #78be20 !important;
border-color: #006a1b !important;
color: #006a1b !important;
background-color: var(--control-highlight-bg-color) !important;
border-color: var(--control-highlight-link-color) !important;
color: var(--control-highlight-link-color) !important;
}
/*div.tx-state-change-quorum>div>.sn {
@ -436,11 +454,6 @@ div.tx-state-change-quorum div.workers .sn.testee {
}*/
th.subheader {
text-align: left;
border-bottom: 2px solid #008522;
}
td span.checkpoint-signed { color: #008522; }
td span.checkpoint-not-signed { color: #c50022; }
@ -476,7 +489,7 @@ span.icon {
tab-size: 4;
-o-tab-size: 4;
-moz-tab-size: 4;
border: 1px solid #dbf7f5;
border: 1px solid var(--header-bg-color);
padding: 10px;
}

2
templates/include/block_page_controls.html
View File

@ -1,4 +1,4 @@
<div id="pages" class="center" style="text-align: center;">
<div class="pages" class="center" style="text-align: center;">
{% set top_page = (info.height - 1) // per_page %}
{% if page > 0 %}
<a href="/page/{{page - 1}}{{custom_per_page}}">

2
templates/index.html
View File

@ -131,7 +131,7 @@
{% else %}
Blocks {{blocks[0].height}}–{{blocks[-1].height}}
{% endif %}
<a class="LinkNoUnderline" href="/range/{{blocks[0].height}}/{{blocks[-1].height}}" title="Permanent link to this block range">🔗</a>
<a class="linked-icon" href="/range/{{blocks[0].height}}/{{blocks[-1].height}}" title="Permanent link to this block range">🔗</a>
</h2>
{% set block_sizes = blocks | map(attribute='block_size') | sort %}