demo/rythm.css
body {
margin: 0;
background-color: #000010;
color: white;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
h3 {
font-size: 1.5em;
}
h2 {
margin: 0;
}
h1 {
margin: 0;
margin-top: 20px;
margin-bottom: 5px;
}
.patch-title {
min-width: 600px;
}
.patch-title h1 {
margin: 0;
margin-top: 40px;
}
.rythm.font {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
min-width: 150px;
}
#quote {
flex-direction: column;
margin: 20px;
padding: 20px;
max-width: 400px;
border: solid 1px white;
border-radius: 5px;
min-width: 200px;
}
#quote-text {
margin: 5px;
text-align: justify;
font-style: italic;
}
.quote-title {
width: 100%;
text-align: center;
margin-bottom: 10px;
}
#quote-author {
margin: 5px;
margin-bottom: 0;
font-weight: 600;
width: calc(100% - 10px);
text-align: right;
}
#shout {
position: fixed;
top: -1px;
right: 20px;
color: cadetblue;
border: solid 1px cadetblue;
padding: 0px 20px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
text-align: center;
}
@media (max-width: 1100px) {
#shout {
display: none;
}
}
.thanks {
margin: 10px;
}
.contributor-login {
margin-top: 15px;
margin-bottom: 15px;
}
.contributor-login-link {
color: cadetblue;
}
.contributor-login-link:hover {
background-color: cadetblue;
color: black;
}
#shout img {
width: 70px;
height: 70px;
border-radius: 40px;
}
#player,
#playerBottom {
margin-bottom: 25px;
padding: 10px;
background-color: #000010;
right: 50px;
}
#player {
margin-bottom: 10px;
}
#playerBottom {
position: fixed;
bottom: -100px;
transition: transform 0.3s;
border-radius: 5px;
border: solid 1px white;
}
#playerBottom.show {
transform: translateY(-70px);
}
button,
a {
transition: 0.2s;
padding: 10px;
background-color: transparent;
border: solid 1px;
border-radius: 5px;
cursor: pointer;
}
a {
transition: none;
text-decoration: none;
color: cadetblue;
margin: 0 10px;
display: inline-block;
}
a:hover {
background-color: cadetblue;
color: black;
}
#start,
#startBottom {
color: limegreen;
}
#start:hover,
#startBottom:hover {
background-color: limegreen;
color: black;
}
#stop,
#stopBottom {
color: indianred;
}
#stop:hover,
#stopBottom:hover {
background-color: indianred;
color: black;
}
#mic,
#micBottom {
color: royalblue;
}
#mic:hover,
#micBottom:hover {
background-color: royalblue;
color: black;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
}
.rythm {
min-width: 40px;
min-height: 40px;
border-radius: 10px;
/*border: solid 2px white;*/
display: flex;
font-size: 3em;
align-items: center;
justify-content: center;
margin: 5px 10px;
}
.font-dance {
font-size: 2em;
width: 40px;
text-align: center;
}
pre {
display: inline-block;
}
section {
min-width: 600px;
}
section:last-child {
margin-bottom: 50px;
}
.demo {
display: flex;
align-items: center;
margin: 10px;
padding: 10px;
min-width: 600px;
}
.vanish {
/*background-color: white;*/
}
.radius1,
.radius2,
.borderColor1,
.borderColor2,
.borderColor3,
.borderWidth1,
.borderWidth2 {
border: 2px solid white;
padding: 1px;
}
.borderWidth1,
.borderWidth2 {
min-width: 20px;
min-height: 20px;
border-radius: 2px;
}
/* Pretty printing styles. Used with prettify.js. */
/* Vim sunburst theme by David Leibovic */
pre .str,
code .str {
color: #65b042;
} /* string - green */
pre .kwd,
code .kwd {
color: #e28964;
} /* keyword - dark pink */
pre .com,
code .com {
color: #aeaeae;
font-style: italic;
} /* comment - gray */
pre .typ,
code .typ {
color: #89bdff;
} /* type - light blue */
pre .lit,
code .lit {
color: #3387cc;
} /* literal - blue */
pre .pun,
code .pun {
color: #fff;
} /* punctuation - white */
pre .pln,
code .pln {
color: #fff;
} /* plaintext - white */
pre .tag,
code .tag {
color: #89bdff;
} /* html/xml tag - light blue */
pre .atn,
code .atn {
color: #bdb76b;
} /* html/xml attribute name - khaki */
pre .atv,
code .atv {
color: #65b042;
} /* html/xml attribute value - green */
pre .dec,
code .dec {
color: #3387cc;
} /* decimal - blue */
pre.prettyprint,
code.prettyprint {
background-color: #000;
border-radius: 8px;
}
pre.prettyprint {
width: 95%;
margin: 1em auto;
padding: 1em;
border: none !important;
background-color: transparent;
margin-left: -50px;
white-space: pre-wrap;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
margin-top: 0;
margin-bottom: 0;
color: #aeaeae;
} /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 {
list-style-type: none;
}
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 {
}
@media print {
pre .str,
code .str {
color: #060;
}
pre .kwd,
code .kwd {
color: #006;
font-weight: bold;
}
pre .com,
code .com {
color: #600;
font-style: italic;
}
pre .typ,
code .typ {
color: #404;
font-weight: bold;
}
pre .lit,
code .lit {
color: #044;
}
pre .pun,
code .pun {
color: #440;
}
pre .pln,
code .pln {
color: #000;
}
pre .tag,
code .tag {
color: #006;
font-weight: bold;
}
pre .atn,
code .atn {
color: #404;
}
pre .atv,
code .atv {
color: #060;
}
}