From 071a78dc2086e868a0d8e9a2998eea919e96e985 Mon Sep 17 00:00:00 2001 From: Kieran McAuliffe Date: Mon, 5 Aug 2024 10:08:29 +0200 Subject: [PATCH] separate css --- lfogui.css | 181 ++++++++++++++++++++++++++++++++++++++++++++++++++ lfogui.html | 187 +--------------------------------------------------- 2 files changed, 182 insertions(+), 186 deletions(-) create mode 100644 lfogui.css diff --git a/lfogui.css b/lfogui.css new file mode 100644 index 0000000..5860643 --- /dev/null +++ b/lfogui.css @@ -0,0 +1,181 @@ +html, + body { + width: 100%; + height: 100%; + margin: 0px; + border: 0; + overflow: hidden; /* Disable scrollbars */ + display: block; /* No floating content on sides */ + } + + ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + background-color: #333333; + } + + li { + float: left; + } + + + input[type=number] { + width: 50px; + margin: 0; + padding: 0; + } + + input[type=text] { + width: 60px; + margin: 0; + padding: 0; + font-weight: bold; + } + + .timeInput { + width: 80px; + margin: 0; + padding: 0; + } + + #matrix { + background-color: aquamarine; + height: 100%; + width: 100%; + } + + .numbox-unclicked { + user-select: none; + border: solid; + font-size: 12vw; + } + + .numbox-clicked { + user-select: none; + border : solid; + font-size: 12vw; + } + + .param-input-label { + width: 93%; + font-size: 5vw; + } + + .lfo-input-label { + width: 40%; + font-size: 5vw; + } + + /* The switch - the box around the slider */ + .switch { + position: relative; + display: inline-block; + width: 30px; + height: 17px; + } + + /* Hide default HTML checkbox */ + .switch input { + opacity: 0; + width: 0; + height: 0; + } + + /* The slider */ + .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; + } + + .slider:before { + position: absolute; + content: ""; + height: 13px; + width: 13px; + left: 2px; + bottom: 2px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; + } + + input:checked + .slider { + background-color: #2196F3; + } + + input:focus + .slider { + box-shadow: 0 0 1px #2196F3; + } + + input:checked + .slider:before { + -webkit-transform: translateX(13px); + -ms-transform: translateX(13px); + transform: translateX(13px); + } + + /* Rounded sliders */ + .slider.round { + border-radius: 17px; + } + + .slider.round:before { + border-radius: 50%; + } + + h5 { + margin: 0; + padding: 0; + } + + .enum-count { + background-color: aquamarine; + } + + .label { + background-color: aliceblue; + padding: 0 4px 0 4px; + margin: 0 2px 0 2px; + border-color: #333333; + border-width: 1px; + } + + .base-val { + background-color: lightgray; + border-color: #333333; + border-width: 1px; + width: 50px; + margin-left: 2px; + margin-top: 1px; + } + + .linked { + color: red; + border-width: 1px; + width: 50px; + font-size: small; + margin-left: 2px; + margin-top: 5px; + } + + + @keyframes pulse-animation { + 0% { + color: black; + } + 100% { + color: red; + } + } + + #pulse { + animation: pulse-animation 0.2s normal; + } \ No newline at end of file diff --git a/lfogui.html b/lfogui.html index e2bebd0..6151e8e 100644 --- a/lfogui.html +++ b/lfogui.html @@ -7,192 +7,7 @@ --> - +