html,
body {
height: 100%;
}
@font-face {
font-family: "Logo Light";
src: url("Oxanium-ExtraLight.woff2") format("woff2");
}
@font-face {
font-family: "Logo Heavy";
src: url("Oxanium-Bold.woff2") format("woff2");
}
/* Theme tokens; data-bs-theme is set on by an inline script.
The dark values match the QR app's dark palette. */
:root {
--bs-body-bg: #f5f5f5;
--xorra-surface: #ffffff;
--xorra-surface-border: #808080;
--xorra-dim: #808080;
--xorra-tree-line: #e8e8e8;
--xorra-asn1-tag: red;
--xorra-asn1-value: blue;
--xorra-overlay-bg: #a0a0a0;
--xorra-overlay-color: black;
--xorra-pass: #1a7f37;
--xorra-fail: #cf222e;
}
html[data-bs-theme="dark"] {
--bs-body-bg: #101418;
--bs-body-color: #e8edf2;
--bs-secondary-color: #93a1af;
--bs-border-color: #2c3540;
--bs-dark-rgb: 22, 25, 29; /* bg-dark navbar matches the QR app's dark brand bar */
--xorra-surface: #1a2027;
--xorra-surface-border: #2c3540;
--xorra-dim: #93a1af;
--xorra-tree-line: #2c3540;
--xorra-asn1-tag: #ff7b72;
--xorra-asn1-value: #79c0ff;
--xorra-overlay-bg: #30373f;
--xorra-overlay-color: #e8edf2;
--xorra-pass: #3fb950;
--xorra-fail: #f85149;
}
body {
/*
display: flex;
align-items: center;
*/
padding-top: 0px;
padding-bottom: 40px;
}
.teaser {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
font-family: Logo Light;
font-size: 12vw;
}
.logo {
font-family: Logo Light;
}
.logo-minor {
font-family: Logo Heavy;
}
/****************************************/
/* Shared tool navbar */
/* (see xorra-web/docs/TOOLS-STYLE-GUIDE.md) */
/****************************************/
/* font-size 1.4rem is the shared brand size (Bootstrap's .navbar-brand
default is smaller); the font-family sets the flex items' line-box
struts — left to the body font (taller ascent than Oxanium), the hub
link's box outgrows the tool link's and align-items:center skews the
two text baselines apart. */
.tool-brand {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.4rem;
font-family: "Logo Heavy", sans-serif;
}
.tool-brand .navbar-brand {
margin-right: 0;
padding-block: 0;
font-size: inherit;
font-family: inherit;
}
/* Bar geometry matching the vanilla-flavor header (see the style guide):
0.9rem vertical padding, 1.2rem side insets, 1rem gap when the pill row
wraps. Bootstrap's defaults are tighter, which left the brand closer to
the viewport edge — and the bar shorter — than the other tools. */
.navbar {
padding: calc(0.9rem + env(safe-area-inset-top)) 0 0.9rem;
}
.navbar > .container-fluid {
padding-inline: 1.2rem;
gap: 1rem;
}
.tool-brand-sep {
width: 1px;
height: 1.4em;
background: rgb(255 255 255 / 0.35);
}
/* -0.24em centers the glyph on the cap-to-baseline band (Oxanium caps
sit high in the line box, so the older -0.2em rendered a touch low). */
.tool-brand-icon {
width: 1.2em;
height: 1.2em;
vertical-align: -0.24em;
margin-right: 0.35rem;
}
.tool-tabs {
display: flex;
background: rgb(255 255 255 / 0.12);
border-radius: 999px;
padding: 4px;
gap: 4px;
/* More sections than fit: the track scrolls sideways instead of widening
the header or the page. overflow != visible also zeroes the flex-item
min-width, letting the track shrink to the space the row has left. */
max-width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.tool-tabs::-webkit-scrollbar {
display: none;
}
.tool-tabs .tab {
border: 0;
background: transparent;
color: rgb(255 255 255 / 0.65);
font: inherit;
font-weight: 600;
padding: 0.4rem 1.1rem;
border-radius: 999px;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s, color 0.15s;
}
.tool-tabs .tab.active {
background: #fff;
color: rgb(var(--bs-dark-rgb));
}
@media (max-width: 480px) {
/* Same narrow-screen bar padding as the vanilla-flavor tools. */
.navbar {
padding-block: 0.7rem;
}
.navbar > .container-fluid {
padding-inline: 0.9rem;
}
.tool-tabs {
width: 100%;
}
.tool-tabs .tab {
/* Grow to share the full-width track, but never shrink below the
label — the track scrolls when the pills genuinely don't fit. */
flex: 1 0 auto;
text-align: center;
padding: 0.4rem 0.25rem;
font-size: 0.875rem;
}
}
/* Bootstrap paints form controls with --bs-body-bg, the same color as the
page, so they read as inert rectangles. Lift them onto the surface color
(white in light mode) so they look like places to type. */
.form-control,
.form-select {
background-color: var(--xorra-surface);
}
textarea.code-text {
font-size: 0.8rem;
min-height: 300px;
font-family: monospace;
}
.export-controls {
display: flex;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.export-controls .export-format-select {
max-width: 24rem;
}
.export-controls .export-passphrase {
max-width: 14rem;
}
.decode-passphrase-row {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.decode-passphrase-row input {
max-width: 14rem;
}
.decode-passphrase-controls {
display: flex;
gap: 0.5rem;
}
textarea.export-text {
min-height: 200px;
}
.drop-overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
opacity: 0%;
background: var(--xorra-overlay-bg);
color: var(--xorra-overlay-color);
/* display: flex; */
display: flex;
justify-content: center;
align-items: center;
/*
pointer-events: none;
*/
/* send dragenter/dragleave events to the parent */
pointer-events: none;
font-size: 6vw;
}
.asset-container {
margin-top: 1rem;
}
.journey {
color: var(--xorra-dim);
font-size: smaller;
}
/****************************************/
/* Decoded (tab) content */
/****************************************/
.decoded-content {
background-color: var(--xorra-surface);
border: 1px solid var(--xorra-surface-border);
padding: 0.5rem;
}
.decoded-content h3 {
font-size: 1.25rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.decoded-content table tr td:nth-child(1) {
padding-right: 0.5rem;
vertical-align: baseline;
}
.decoded-content table tr td:nth-child(2) {
padding-left: 0.5rem;
vertical-align: baseline;
font-family: monospace;
font-size: 0.9rem;
}
/*
.decoded-content table tr:nth-child(odd) {
background-color: #f0f0f0;
}
.decoded-content table tr:nth-child(even) {
background-color: #f8f8f8;
}
*/
/* Verification checklist markers (Text::Marker) */
.check-pass {
color: var(--xorra-pass);
font-weight: bold;
}
.check-fail {
color: var(--xorra-fail);
font-weight: bold;
}
/****************************************/
/** ASN.1 Dump **/
/****************************************/
.asn1-tag {
color: var(--xorra-asn1-tag);
}
.asn1-value {
color: var(--xorra-asn1-value);
}
/* Remove default bullets */
.asn1-top ul, .asn1-top {
list-style-type: none;
white-space: pre;
font-family: monospace;
font-size: 0.8rem;
}
/* Remove margins and padding from the parent ul */
.asn1-top {
margin: 0;
padding: 0;
}
/* Style the caret/arrow */
.asn1-parent {
cursor: pointer;
user-select: none; /* Prevent text selection */
}
/* Create the caret/arrow with a unicode, and style it */
.asn1-parent::before {
content: "\25BC"; /* Unicode: black down-pointing triangle */
font-size: 80%;
color: var(--bs-body-color);
display: inline-block;
margin-right: 6px;
/* attempt to center the triangle */
vertical-align: middle;
margin-bottom: 2px;
}
/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.asn1-parent-collapse::before {
content: "\25B6"; /* Unicode: black right-pointing triangle */
}
/* Hide the nested list */
.asn1-nested {
display: block;
border-left: solid 1px var(--xorra-tree-line);
}
/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.asn1-inactive {
display: none;
}
/****************************************/
/* Shared tool footer */
/* (see xorra-web/docs/TOOLS-STYLE-GUIDE.md) */
/****************************************/
.tool-footer {
text-align: center;
color: var(--bs-secondary-color);
font-size: 0.8rem;
padding: 0.8rem 1rem 1.2rem;
}
.tool-footer p {
margin: 0;
}
.tool-footer a {
color: var(--bs-secondary-color);
}
.tool-footer .made-in {
margin-top: 0.4rem;
}
.footer-flag {
width: 30px;
vertical-align: -4px;
}