SArpnt
/
bytebeat-composer
1
0
Fork 0
Code Issues 29 Pull Requests Activity

adjust css 

most notably larger font, square buttons, and better text alignment on the controls
This commit is contained in:
SArpnt 2024-03-13 20:26:57 -04:00
parent b135d1a53a
commit f8bc8d7806
Signed by: SArpnt
SSH Key Fingerprint: SHA256:iDMeic8KkqqEsN4wODlgsk1d/oW1ojZ/cu/MEWyfLBw
2 changed files with 36 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/index.pug
View File

@ -64,6 +64,7 @@ html(lang="en")
min="0"
type="range"
title="Volume"
style="width: 8em"
)
span.control-group.control-view.buttons
button#control-scaledown(

72
src/style.css
View File

@ -1,12 +1,12 @@
/* common */
/* TODO: rename to hidden */
.disabled {display:none !important}
/* main page */
:root {--control-radius:3px}
html {background-color:black; color:white; font-size:75%; font-family:sans-serif}
body {display:flex; flex-direction:column; align-items:center; height:100vh; margin:0}
html {background-color:black; color:white; font-family:sans-serif}
body {font-size:85%; display:flex; flex-direction:column; align-items:center; height:100vh; margin:0}
/* https://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/ */
code, #code-editor, #code-editor .cm-scroller {font-family:"",monospace}
#content {display:flex; flex-direction:column; height:100%}
@media (min-width:1540px) { /* 1024 (canvas) + 4 (outline) + 512 (library) */
@ -28,22 +28,21 @@ html[data-embed] .container-fixed {height:100%}
resize:none;
height:100% !important}} /* override resize handle */
html[data-embed] #code-editor-container {resize:none; height:100%}
#code-editor {
width:100%; height:100%;
font-family:monospace; font-size:1.2rem; line-height:1}
#code-editor {width:100%; height:100%; line-height:1; font-size:1rem}
#code-editor:not(.cm-editor) {
word-break:break-all; white-space:break-spaces; tab-size:3;
color:inherit; background-color:inherit;
margin:0; border:none; outline:none;
resize:none}
#code-editor.cm-editor .cm-scroller {padding:2px; line-height:1}
#code-editor.cm-editor .cm-activeLine {background-color:transparent}
#code-editor.cm-editor .cm-cursor {border-left-color:white}
#code-editor.cm-editor .cm-content {padding:0; caret-color:initial}
#code-editor.cm-editor .cm-line {padding:0}
#code-editor.cm-editor .cm-matchingBracket {
#code-editor .cm-scroller {padding:2px; line-height:1}
#code-editor .cm-activeLine {background-color:transparent}
#code-editor .cm-cursor {border-left-color:white}
#code-editor .cm-content {padding:0; caret-color:initial}
#code-editor .cm-line {padding:0}
#code-editor .cm-matchingBracket {
background-color:transparent; border:1px solid grey; margin:-1px}
#code-editor.cm-editor .cm-selectionMatch {background-color:#333}
#code-editor .cm-selectionMatch {background-color:#333; position:relative; z-index:-1}
/* editor highlight style */
.tok-keyword {color:#e8e}
@ -56,13 +55,13 @@ html[data-embed] #code-editor-container {resize:none; height:100%}
.tok-invalid {text-decoration:wavy #f66e underline}
/* playback controls */
#controls {
display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; column-gap:0.5em;
margin:2px 0}
.control, .control-group {display:flex; flex-direction:row; flex-wrap:wrap}
#controls button {width:1.9em; height:1.8em; padding:0; display:inline-block}
#controls .text {align-self:center; font-size:14px}
#control-volume {align-self:center; width:9em}
button, input {font-size:100%}
#controls, .control-group {
display:flex; flex-direction:row; flex-wrap:wrap;
justify-content:center; align-items:center}
#controls {gap:2px .5rem; margin:2px 0}
#controls :not(.text) {height:1.8rem; box-sizing:border-box; margin:0}
#controls button {width:1.8rem; padding:0; display:inline-block}
#controls :is(button, input, select) {
border-radius:0}
@ -92,13 +91,13 @@ html[data-embed] #code-editor-container {resize:none; height:100%}
#canvas-toggleplay {
display:none; position:absolute;
top:50%; left:50%;
padding:0.6em 1.4em;
background-color:rgba(0,180,255,0.4);
padding:8px 18px;
background-color:#0bf6;
border-radius:16px;
line-height:0;
transform:translate(-50%,-50%)}
#canvas-container:hover > #canvas-toggleplay {
display:block; background-color:rgba(0,180,255,0.5)}
display:block; background-color:#0bf8}
#canvas-toggleplay.canvas-toggleplay-show {display:block}
#canvas-toggleplay > svg {width:46px; height:46px; fill:currentColor}
#canvas-toggleplay.canvas-toggleplay-pause > #svg-canvas-toggleplay-play,
@ -123,29 +122,28 @@ details > :not(summary) {margin-inline-start:1em}
figure.figure-list {margin-inline:0}
ul {padding:0; margin:0; margin-inline-start:1rem}
ul {padding:0; margin:0; margin-inline-start:1em}
#library li {margin-block-end:0.6em}
button.code-button {
display:inline; padding:0; font:inherit; border:none; outline:inherit; text-align:inherit;
background:none; color:#fc4; cursor:pointer; user-select:text}
display:inline; padding:0; border:none; outline:inherit; text-align:inherit;
background:none; color:#fc4; cursor:pointer; user-select:text; font-size:90%}
button.code-button:focus-visible {outline:1px dotted}
code {font-size:1rem; word-break:break-all; white-space:break-spaces}
code {word-break:break-all; white-space:break-spaces}
.library-song-info {color:grey; cursor:default}
summary {
cursor:pointer;
font-weight:bold;
margin-block:.4em}
summary {cursor:pointer; font-weight:bold; margin-block:.4em}
summary > :is(h1,h2,h3,h4,h5,h6) {display:inline}
h1 {font-size:1.5rem}
h2 {font-size:1.2rem}
h1 {font-size:1.3em}
h2 {font-size:1.1em}
@supports (:has(+ a)) {
summary::marker:has(+ h1) {font-size:1.5rem}
summary::marker:has(+ h2) {font-size:1.2rem}}
summary::marker:has(+ h1) {font-size:1.3em}
summary::marker:has(+ h2) {font-size:1.1em}
}
@supports not (:has(+ a)) {
summary::marker {font-size:1.2rem}}
summary::marker {font-size:1.1em}
}
a, a:visited {color:#88d2fb}
a:hover, button.code-button:hover, summary:hover {color:#ed88fb}