mirrors/BitwiseCmd
1
0
Fork 0
mirror of https://github.com/BorysLevytskyi/BitwiseCmd.git synced 2025-12-10 06:52:05 +01:00
Code Issues Projects Releases Wiki Activity
Files
98675cafc7a357d3d1e180d14990ef9fead9eb0c
BitwiseCmd/src/index.css
Borys Levytskyi f0fefd6546 Other ops (#68)
2025-11-08 14:09:08 -05:00

444 lines
14 KiB
CSS
Raw Blame History

body { padding:0; margin:0; height: 100%; overflow: hidden; }
html { height: 100% }
.app-root {
font-family: Verdana;
font-size: 0.8em;
margin: 0;
padding: 0px 30px;
height: 100%;
overflow: auto;
position: relative;
}
/* Centered vs stretched layout */
.app-root.layout-centered { }
/* Constrain and center top-level sections while keeping full-width theme background */
.app-root.layout-centered > * {
max-width: clamp(70rem, 92vw, 100rem);
margin-left: auto;
margin-right: auto;
}
/* Blade Runner theme overrides for Settings pane (centralized here per AGENTS.md) */
.app-root.bladerunner #settings button { color: #ffbf69 }
.app-root.layout-stretched {
max-width: none;
margin: 0;
}
/* Theme-scoped code styling to avoid cross-theme overrides */
.light code, .dark code, .midnight code, .bladerunner code { font-size: 1.2em; font-weight: bold; }
h1 { font-family: Impact, Verdana;
text-transform: uppercase;
font-weight: lighter;
}
.icon { margin-right: 5px; vertical-align: middle; }
.header-cmd { color: #c5c5c5 }
.mono { font-family: monospace; font-size: 1.3em }
.button {
padding: 10px;
border: solid 1px white;
border-radius: 5px;
text-decoration: none;
display: inline-block;
}
.button { padding: 5px;}
.button svg { margin: 0; margin-right: 5px; }
.button-large { padding: 10px; }
.expressionInput {
padding: 3px;
outline: none;
border: none;
border-bottom: solid 1px rgba(255, 255, 255, 0.5);
z-index: 100;
padding-left: 15px;
padding-bottom: 5px;
width: 600px;
background: rgba(0, 0, 0, 0);
}
.hidden { display: none;}
.result { margin: 10px 10px 30px; }
.result .input { margin-bottom: 10px; }
.result .content { padding-left: 10px}
.result .cur { margin-right: 5px; }
.input-string { margin-right: 10px;}
.hashLink { text-decoration: none; margin-left: 8px; visibility: hidden; margin-right: 0; padding: 0; text-decoration: none; }
a.hashLink { font-size: 1.1em;}
.hashLink .icon { margin: 0;}
.hashLink:hover { text-decoration: underline; background: none; }
.result:hover .hashLink { visibility: visible }
.expression { font-size: 1.7em; font-family: monospace }
.expression button { font-family: monospace; font-size: 0.9em;}
.expression .label { font-weight: bold; padding-right: 5px; text-align: right; }
.expression .bin { letter-spacing: 3px; }
.expression .info { font-size: 0.9em; color: teal; }
.expression .byte { margin: 0 3px; }
.expression-result td { border-top: dotted 1px gray; }
.expression .prefix { font-weight: normal; display: none; font-size: 0.9em }
.expression .other { font-size: 0.9em}
.expression .sign { text-align: right; padding-right: 5px;}
.flipable { cursor: pointer; opacity: 1 }
.flipable { cursor: pointer; opacity: 1 }
.flipable:hover { opacity: 0.8 }
.hex .prefix { display: inline; }
.indicator { padding: 0px 5px; background: transparent; border: none; cursor: pointer; vertical-align: middle; color:rgba(0, 0, 0, 0.25) }
.expanded { display: block;}
.collapsed { display: none;}
.error { color: maroon; }
.soft { opacity: 0.7 }
.small-text { font-size: 0.8em;}
#view { padding: 10px}
.cur { color: lightgray; }
button { border: none; }
button.link-button {text-decoration: underline;}
.settings-button {
margin-left: -20px;
}
/* When Settings is active (no .soft), remove any button border/outline */
.settings-button button,
.settings-button .command-link {
border: none;
outline: none;
box-shadow: none;
}
.undo button {
opacity: 0.4;
padding: 0;
margin-left: 5px;
}
.solid-border { border: solid 1px rgba(255, 255, 255, 0.8); border-radius: 5px;}
.solid-border-soft { border: solid 1px rgba(255, 255, 255, 0.5); border-radius: 5px;}
.zero { opacity: 0.5}
.dim-extra-bits .extra-bit { opacity: 0.1;}
/* Light */
.light { background: #fafafa; }
.light .solid-background {background: #fafafa;}
.light .header-cmd { color: #919191 }
.light a, .light a:visited, .light button { color: #222; }
.light .indicator { color: #ddd; }
.light .on { color: #121212; }
.light .prefix { color: #888}
.light .other { color: #bbb }
.light .hashLink, .light .hashLink:visited { color: #aaa; }
.light .hashLink:hover { color: #888 }
.light ul.top-links li:hover { background: #ddd }
.light .error { color: #d83e8f }
.light button.btn { color: black}
.light button.btn:hover { background: #ddd}
.light button.btn:disabled { color: #888; background-color: inherit; }
.light .accent1 { color:green}
.light .expressionInput { border-bottom: solid 1px rgba(0, 0, 0, 0.5);}
.light .button { border: solid 1px gray; }
.light .button:hover { background: rgba(0, 0, 0, 0.2);}
.light .solid-border { border: solid 1px gray;}
.light .accent1-border { border-color:green}
.light .help code, .light .help code a { color:green}
.light .button:hover { background: rgba(255, 255, 255, 0.2);}
/* Dark */
.dark { background: #121212; color: white;}
.dark .solid-background {background: #121212;}
.dark .expression { color: white;}
.dark .expressionInput { color: white; }
.dark a, .dark a:visited, .dark button { color: white; }
.dark .indicator { color: #555; }
.dark .on { color: white; }
.dark .prefix { color: #999}
.dark .other { color: #777;}
.dark .hashLink, .dark .hashLink:visited { color: #555 }
.dark .hashLink:hover { color: #999 }
.dark ul.top-links li:hover { background: #333 }
.dark .error { color: #d83e8f}
.dark button.btn { color: white}
.dark button.btn:hover { background: #333}
.dark button.btn:disabled { color: #999; background-color: inherit; }
.dark .accent1 { color:mediumseagreen}
.dark .accent1-border { border-color:mediumseagreen}
.dark .help code, .dark .help code a { color:mediumseagreen}
.dark .button:hover { background: rgba(255, 255, 255, 0.2);}
/*
Midnight Theme
*/
.midnight { background: #2c3e50; color: white }
.midnight .solid-background {background: #2c3e50;}
.midnight .header-cmd { color: #7ea3b5 !important }
.midnight .expression { color: white;}
.midnight .expressionInput { color: white;}
.midnight a, .dark a:visited, .midnight button { color: white; }
.midnight .indicator { color: #85a0ad; }
.midnight .on { color: white; }
.midnight .prefix { color: #85a0ad}
.midnight .other { color: #9FBAC7;}
.midnight .accent-background { background-color: #3b5268;}
.midnight .hashLink, .midnight .hashLink:visited { color: #85a0ad }
.midnight .hashLink:hover { color: #9FBAC7 }
.midnight ul.top-links li:hover { background: #132537 }
.midnight .error { color:#d83e8f}
.midnight .changelog .item-new .date { font-weight: bold }
.midnight button.btn { color: white}
.midnight button.btn:hover { background: #132537}
.midnight button.btn:disabled { color: #85a0ad; background-color: inherit; }
.midnight .accent1 { color:mediumseagreen}
.midnight .accent1-border { border-color:mediumseagreen}
.midnight .help code, .midnight .help code a { color:mediumseagreen}
.midnight .button:hover { background: rgba(255, 255, 255, 0.2);}
/*
Blade Runner Theme
*/
.bladerunner { background: #0b0f14; color: white }
.bladerunner .solid-background { background: #0b0f14; }
.bladerunner .header-cmd { color: #ff7fb0a8 !important; }
.bladerunner .lights-on .header-cmd { color: #ff7fb0 !important; }
.bladerunner .header.lights-on { text-shadow: 0 0 4px rgba(255, 127, 176, 0.35), 0 0 9px rgba(255, 127, 176, 0.22); }
.bladerunner .header h1 { text-transform: uppercase; color: #66d9e8a8; cursor: pointer; position: relative; z-index: 1; font-weight: bold; user-select: none;}
.bladerunner .header h1.lights-on { color: #66d9e8; text-shadow: 0 0 4px rgba(102, 217, 232, 0.35), 0 0 9px rgba(102, 217, 232, 0.22); }
.bladerunner .header h1.lights-on::after {
/* Neon-style halo: layered cyan + magenta radial glows */
content: "";
animation: flicker 1s forwards;
position: absolute;
left: 0;
top: 50%;
transform: translate(-30%, -50%);
width: 20%;
height: 120%;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse at center,
rgba(102, 217, 232, 0.70) 0%,
rgba(102, 217, 232, 0.45) 22%,
rgba(0, 0, 0, 0) 60%),
radial-gradient(ellipse at center,
rgba(255, 127, 176, 0.55) 0%,
rgba(255, 127, 176, 0.35) 35%,
rgba(0, 0, 0, 0) 72%);
filter: blur(35px);
}
@keyframes flicker {
20%, 24%, 55% {
opacity: 0;
}
40% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.bladerunner {color: #e6f0ff;}
.bladerunner .expression { color: white; }
.bladerunner .expressionInput { color: white; }
.bladerunner a, .bladerunner a:visited { color: #00d1f2; }
.bladerunner button { color: #00eaff; }
.bladerunner .indicator { color: #0e6e7e; }
.bladerunner .on { color: white; }
.bladerunner .prefix { color: #00d1f2 }
.bladerunner .other { color: #6c8497}
.bladerunner .label { color: #7ac9d6 }
.bladerunner .accent-background { background-color: #131a22; }
.bladerunner .hashLink:hover { color: #33e1ff }
.bladerunner .error { color:#d83e8f }
.bladerunner .changelog .item-new .date { font-weight: bold }
.bladerunner button.btn { color: #00eaff }
.bladerunner button.btn:hover { background: #11222c }
.bladerunner button.btn:disabled { color: #0e6e7e; background-color: inherit; }
.bladerunner .accent1 { color: #e3a600 }
.bladerunner .accent1 button:hover { text-shadow: 0 0 2px #e3a600 }
.bladerunner .accent1-border { border-color: #e3a600 }
.bladerunner .button { border-color: #00eaff }
.bladerunner code { color: #e3a600 }
.bladerunner code a, .bladerunner code a:visited { color: #e3a600 }
.bladerunner .command-link { color: #5fc2e9 }
.bladerunner .command-link:hover,
.bladerunner .command-link:focus { text-shadow: 0 0 2px rgba(69, 243, 255, 0.949); }
.bladerunner .soft { color: #aebed0 }
.bladerunner .solid-border { background-color: #0e161d; border-color: #1f3b4a;}
.bladerunner .expressionInput {border-color: #1f3b4a;}
.bladerunner .expressionInput::placeholder {color: #7e95a7;}
.bladerunner .zero {color: #b9cfe2; }
.bladerunner .expression {color: #e6f0ff;}
.bladerunner .settings-button button {color: #b9cfe2;}
.bladerunner button.hashLink, .bladerunner a.hashLink, .bladerunner a.hashLink:visited { color: #52687b; }
.bladerunner button.hashLink:hover, .bladerunner .undo button:hover, .bladerunner a.hashLink:hover {
/* subtle glow derived from current hover color */
--text-shadow: 0 0 2px currentColor;
text-shadow:0 0 2px rgb(229, 33, 0.5);
color: #5fc2e9;
}
.bladerunner .undo button:hover { opacity: 1; }
.bladerunner .cur { color: #6c8497; }
/* Blade Runner: subtle glow for SVG icons inside hash links on hover/focus */
.bladerunner .hashLink:hover .icon,
.bladerunner .hashLink:focus .icon,
.bladerunner .hashLink:hover svg,
.bladerunner .undo:hover svg,
.bladerunner .hashLink:focus svg {
filter: drop-shadow(0 0 2px currentColor);
}
/* Blade Runner: neon hover glow for top-links controls */
.bladerunner .top-links a, .bladerunner .top-links a:visited { color: #dce7f5 }
.bladerunner .top-links button { color: #dce7f5 }
.bladerunner .top-links a:hover,
.bladerunner .top-links a:focus,
.bladerunner .top-links button:hover,
.bladerunner .top-links button:focus {
/* very dim magenta glow */
text-shadow:0 0 2px rgb(229, 33, 0.5);
color: hsl(45, 100%, 50%);
}
/*
.bladerunner .top-links li {position: relative;}
.bladerunner .top-links button:hover::after, .bladerunner .top-links a:hover::after {
content: "";
position: absolute;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
white-space: nowrap;
width: 200%;
height: 120%;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse at center,
rgba(227, 166, 0, 0.85) 0%,
rgba(227, 166, 0, 0.55) 22%,
rgba(0, 0, 0, 0) 60%);
filter: blur(20px);
}*/
/* Blade Runner: add matching glow to SVG icons inside top-links on hover/focus */
.bladerunner .top-links a:hover .icon,
.bladerunner .top-links a:focus .icon,
.bladerunner .top-links button:hover .icon,
.bladerunner .top-links button:focus .icon,
.bladerunner .top-links a:hover svg,
.bladerunner .top-links a:focus svg,
.bladerunner .top-links button:hover svg,
.bladerunner .top-links button:focus svg {
color: amber !important;
filter: drop-shadow(0 0 2px rgba(255, 127, 176, 0.5));
}
.bladerunner .bladerunner-easter-egg {display: none;}
.bladerunner-easter-egg {
position: absolute;
right: 1em;
bottom: 1em;
opacity: 0.3;
}
.bladerunner-easter-egg:hover {
opacity: 1;
}
button {
border: none;
background: none;
cursor: pointer;
}
button:focus {outline:0;}
/* Remove blue focus ring from the Blade Runner easter egg button */
.bladerunner-easter-egg button:focus,
.bladerunner-easter-egg button:focus-visible {
outline: none !important;
box-shadow: none !important;
}
/* Anchor the Blade Runner easter egg to bottom-right regardless of scrolling */
.bladerunner-easter-egg {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 1000;
}
/* Top Links Shrink */
@media (max-width: 800px) {
.top-links .link-text { display: none }
.debug-indicators { display: none;}
.app-root {padding: 10px; }
}
.social-container{ position:fixed; bottom:20px; right:20px }
/* Remove margin space on body. Inline top links with header */
@media (max-width: 700px) {
/*.expressionInput { width: 450px; } */
}
/* Further shrink */
@media (max-width: 500px) {
.expressionInput { width: 400px; }
.top-links a { display: inline-block; padding: 5px 10px}
}
@media (max-width: 450px) {
.expressionInput { width: 350px; }
}
#output {
padding: 30px 30px;
}
.input-p {
display:inline;
z-index: 101;
position: absolute;
margin-right: -10px;
margin-top: 3px;
opacity: 0.5;
}
Reference in New Issue View Git Blame Copy Permalink