mirror of
https://github.com/Tonejs/Tone.js
synced 2024-12-29 04:53:10 +00:00
346 lines
7.5 KiB
CSS
346 lines
7.5 KiB
CSS
/* FOR MOBILES */
|
|
@media (max-width: 750px) {
|
|
#TopBar #Homepage a {
|
|
font-size: 16px !important; }
|
|
|
|
#TopBar #Hamburger {
|
|
display: initial !important; }
|
|
|
|
#Sidebar {
|
|
display: none;
|
|
width: 100% !important; }
|
|
|
|
iframe {
|
|
width: 100% !important; } }
|
|
html, body {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
height: calc(100% - 4px);
|
|
font-family: "Inconsolata", monospace; }
|
|
|
|
/**
|
|
*
|
|
* Example Home
|
|
*
|
|
*/
|
|
#Content.Example {
|
|
height: calc(100% - 44px);
|
|
width: calc(100% - 6px);
|
|
margin-bottom: 0px;
|
|
overflow: hidden;
|
|
left: 3px; }
|
|
#Content.Example #Sidebar {
|
|
background-color: white;
|
|
width: 280px;
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 0px;
|
|
height: calc(100% - 3px);
|
|
border-right: 3px solid black;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
z-index: 1; }
|
|
#Content.Example #Sidebar .Category {
|
|
background-color: black;
|
|
color: white;
|
|
width: calc(100% - 6px);
|
|
height: 25px;
|
|
line-height: 25px;
|
|
padding-left: 5px;
|
|
font-weight: 900; }
|
|
#Content.Example #Sidebar .Item {
|
|
line-height: 22px;
|
|
padding-left: 15px;
|
|
height: 22px;
|
|
width: 100%; }
|
|
#Content.Example #Sidebar .Item:last-child {
|
|
margin-bottom: 10px; }
|
|
#Content.Example #Sidebar.Open {
|
|
display: initial !important; }
|
|
#Content.Example iframe {
|
|
width: calc(100% - 286px);
|
|
border: 0px;
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
height: 100%;
|
|
z-index: 0; }
|
|
#Content.Example #Source {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
right: 0px;
|
|
width: 80px;
|
|
height: 40px;
|
|
background-color: black;
|
|
color: white;
|
|
opacity: 0.5;
|
|
cursor: pointer;
|
|
z-index: 0; }
|
|
#Content.Example #Source:before {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
content: "source";
|
|
text-align: center;
|
|
line-height: 40px; }
|
|
#Content.Example #Source:hover {
|
|
opacity: 1; }
|
|
#Content.Example #Source:hover:active {
|
|
background-color: white;
|
|
color: black; }
|
|
|
|
/**
|
|
*
|
|
* TOP BAR
|
|
*
|
|
*/
|
|
#TopBar {
|
|
background-color: black;
|
|
height: 35px;
|
|
margin: 3px;
|
|
position: relative;
|
|
width: calc(100% - 6px); }
|
|
#TopBar #TonejsLogo {
|
|
position: absolute;
|
|
top: 3px; }
|
|
#TopBar #Examples {
|
|
right: 10px;
|
|
top: 0px;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
position: absolute;
|
|
width: 100px;
|
|
text-align: left; }
|
|
#TopBar #Examples a {
|
|
position: absolute;
|
|
font-size: 14px;
|
|
color: white;
|
|
text-transform: none;
|
|
text-decoration: none; }
|
|
#TopBar #Hamburger {
|
|
display: none;
|
|
width: 28px;
|
|
height: 28px;
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 3.5px;
|
|
cursor: pointer; }
|
|
#TopBar #Hamburger span {
|
|
margin-top: 6px;
|
|
position: absolute;
|
|
width: 80%;
|
|
height: 3px;
|
|
left: 10%;
|
|
background-color: white; }
|
|
#TopBar #Hamburger span:nth-child(0) {
|
|
top: 0%; }
|
|
#TopBar #Hamburger span:nth-child(1) {
|
|
top: 25%; }
|
|
#TopBar #Hamburger span:nth-child(2) {
|
|
top: 50%; }
|
|
#TopBar #Hamburger:hover:active span {
|
|
background-color: #22DBC0; }
|
|
|
|
#MobileStart {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 10000;
|
|
top: 0px;
|
|
left: 0px;
|
|
background-color: rgba(0, 0, 0, 0.8); }
|
|
#MobileStart #Button {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
background-color: #7F33ED;
|
|
color: white;
|
|
border-radius: 3px;
|
|
margin-top: -40px;
|
|
margin-left: -40px;
|
|
width: 80px;
|
|
height: 80px;
|
|
text-align: center;
|
|
line-height: 80px; }
|
|
#MobileStart #Button:hover {
|
|
background-color: #7F33ED;
|
|
color: white; }
|
|
#MobileStart #Button:hover:active {
|
|
background-color: #ED33CF;
|
|
color: #22DBC0; }
|
|
|
|
#Content {
|
|
position: absolute;
|
|
left: 0px;
|
|
width: 100%;
|
|
margin-bottom: 15px; }
|
|
#Content #Title {
|
|
height: 23px;
|
|
line-height: 23px;
|
|
font-size: 1.2em;
|
|
color: white;
|
|
width: calc(100% - 15px);
|
|
padding-left: 15px;
|
|
background-color: black; }
|
|
#Content #Explanation {
|
|
position: relative;
|
|
padding: 15px;
|
|
color: black;
|
|
font-size: 14px;
|
|
box-sizing: border-box;
|
|
border: 3px solid black;
|
|
border-top-width: 0px;
|
|
width: 100%; }
|
|
#Content #Explanation img {
|
|
width: 80%;
|
|
max-width: 700px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: block; }
|
|
#Content a {
|
|
color: black;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
text-decoration: none; }
|
|
#Content a:hover {
|
|
color: #1EDF3E; }
|
|
#Content a:hover:active {
|
|
color: #ED33CF; }
|
|
#Content #DragContainer {
|
|
margin-left: 3px;
|
|
margin-top: 3px;
|
|
margin-bottom: 15px;
|
|
width: calc(100% - 3px);
|
|
height: 400px;
|
|
position: relative;
|
|
color: white; }
|
|
#Content .Slider.x {
|
|
position: relative;
|
|
height: 94px;
|
|
width: 100%;
|
|
margin-top: 3px; }
|
|
#Content .Slider.x .Axis {
|
|
top: 50%;
|
|
margin-top: -1.5px; }
|
|
#Content .Slider.y {
|
|
position: relative;
|
|
width: 94px;
|
|
height: 400px; }
|
|
#Content .Slider.y .Axis {
|
|
left: 50%;
|
|
margin-left: -1.5px; }
|
|
#Content .Dragger {
|
|
width: 90px;
|
|
height: 90px;
|
|
position: absolute;
|
|
background-color: black;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
margin-top: -2px;
|
|
border: 2px solid white;
|
|
cursor: -webkit-grab; }
|
|
#Content .Dragger #Name {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
line-height: 90px;
|
|
color: white; }
|
|
#Content .Dragger:hover {
|
|
background-color: #3833ED;
|
|
color: white; }
|
|
#Content .Dragger.is-pointer-down {
|
|
cursor: -webkit-grabbing;
|
|
background-color: #ED33CF; }
|
|
#Content .Dragger.is-pointer-down #Name {
|
|
color: #1EDF3E; }
|
|
#Content .Axis {
|
|
position: absolute;
|
|
background-color: black;
|
|
width: 3px;
|
|
height: 3px;
|
|
top: 3px;
|
|
left: 3px;
|
|
border-radius: 1.5px;
|
|
z-index: 0; }
|
|
#Content #xAxis {
|
|
width: calc(100% - 6px); }
|
|
#Content #yAxis {
|
|
height: calc(100% - 6px); }
|
|
#Content .Button {
|
|
width: 100%;
|
|
margin-top: 3px;
|
|
height: 90px;
|
|
background-color: black;
|
|
line-height: 90px;
|
|
color: white;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
cursor: pointer; }
|
|
#Content .Button:hover {
|
|
color: white;
|
|
background-color: #3833ED; }
|
|
#Content .Button:hover:active, #Content #Content .Button:hover:active.Active {
|
|
color: #22DBC0;
|
|
background-color: #ED33CF; }
|
|
#Content .Button.Toggle.Active {
|
|
box-sizing: border-box;
|
|
border: 3px solid black;
|
|
line-height: 84px;
|
|
color: black;
|
|
background-color: white; }
|
|
#Content .Transport {
|
|
width: 100%;
|
|
height: 30px;
|
|
background-color: black;
|
|
line-height: 30px;
|
|
color: white;
|
|
border-radius: 10px;
|
|
margin-top: 3px;
|
|
position: relative; }
|
|
#Content .Transport #Position {
|
|
width: 70px;
|
|
left: 50%;
|
|
margin-left: -35px;
|
|
text-align: left;
|
|
height: 100%;
|
|
position: absolute;
|
|
color: white; }
|
|
|
|
.Keyboard {
|
|
height: 100px;
|
|
width: 100%;
|
|
position: relative; }
|
|
|
|
code {
|
|
background-color: #ECECEC;
|
|
color: #333;
|
|
padding: 1px; }
|
|
|
|
#Loading {
|
|
z-index: 100000;
|
|
position: absolute;
|
|
background-color: rgba(140, 140, 140, 0.5);
|
|
width: 100%;
|
|
height: calc(100% - 37.5px);
|
|
top: 37.5px;
|
|
left: 0px;
|
|
opacity: 1;
|
|
transition: opacity 0.4s; }
|
|
#Loading #Text {
|
|
color: white;
|
|
position: absolute;
|
|
text-align: center;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 300px;
|
|
margin-left: -150px;
|
|
height: 60px;
|
|
margin-top: -30px;
|
|
line-height: 60px;
|
|
font-size: 42px; }
|
|
|
|
#Loading.Loaded {
|
|
pointer-events: none;
|
|
opacity: 0; }
|