From dbedb0a81a67ee645a65c2f850cb7f033ee8654b Mon Sep 17 00:00:00 2001 From: ezwrk Date: Sun, 27 Aug 2023 19:22:35 +0300 Subject: [PATCH] Added styling. Fixed style selection on a fresh page. Known issues: 1. RT on xbox won't show pressure; 2. Xbox.css isn't named proparly, will probably fail to load on Linux/Mac. --- DS.css | 11 +- NES.css | 14 +-- SNES.css | 13 +-- Xbox.css | 11 +- gpcon.js | 334 ++++++++++++++++++++++++++++++++++++++++------------- index.html | 205 ++++++++++++++++++++++---------- main.css | 221 ----------------------------------- 7 files changed, 413 insertions(+), 396 deletions(-) delete mode 100644 main.css diff --git a/DS.css b/DS.css index 52d60ab..6580f18 100644 --- a/DS.css +++ b/DS.css @@ -1,16 +1,15 @@ body { - background-color: darkslateblue; + background-color: transparent; } .button { - border:1px solid rgba(50,50,50,1); + border:1px solid rgba(var(--clr), var(--clg), var(--clb), var(--cla)); width:25px; height:25px; border-radius:13px; display:inline-block; - background: rgba(70,70,70,1); padding:0px; - margin:px; + margin:0px; text-align:center; vertical-align:middle; font-weight: bold; @@ -230,10 +229,6 @@ body { background-image: none; } -#style_select { - position:absolute; - left: 410px; -} .axisbox { diff --git a/NES.css b/NES.css index 1f76e6f..492b93a 100644 --- a/NES.css +++ b/NES.css @@ -1,16 +1,15 @@ body { - background-color: brown; + background-color: transparent; } .button { - border:1px solid rgba(50,50,50,1); + border:1px solid rgba(var(--clr), var(--clg), var(--clb), var(--cla)); width:31px; height:31px; border-radius:20px; display:inline-block; - background: rgba(70,70,70,1); padding:0px; - margin:px; + margin-left:42px; text-align:center; vertical-align:middle; font-weight: bold; @@ -223,10 +222,6 @@ body { background-image: none; } -#style_select { - position:absolute; - left: 410px; -} .axisbox { display:none; @@ -256,10 +251,11 @@ body { #controller_NES { display: block; position: absolute; + left: 50px; width:400px; height:400px; } #controller_XBOX { display: none; -} \ No newline at end of file +} diff --git a/SNES.css b/SNES.css index a87af74..872c963 100644 --- a/SNES.css +++ b/SNES.css @@ -1,16 +1,15 @@ body { - background-color: darkcyan; + background-color: transparent; } .button { - border:1px solid rgba(0,0,0,1); + border:1px solid rgba(var(--clr), var(--clg), var(--clb), var(--cla)); width:26px; height:26px; border-radius:13px; display:inline-block; - background: rgba(70,70,70,1); padding:0px; - margin:px; + margin-left:42px; text-align:center; vertical-align:middle; font-weight: bold; @@ -86,7 +85,6 @@ body { .button_12, .button_13, .button_14, .button_15 { border:0px; - background:transparent; height:25px; width:25px; } @@ -183,10 +181,6 @@ body { background-image: none; } -#style_select { - position:absolute; - left: 410px; -} .axisbox { display:none; @@ -209,6 +203,7 @@ body { display: block; visibility: visible; position: absolute; + left: 50px; width:400px; height:400px; } diff --git a/Xbox.css b/Xbox.css index a07fc04..15fa421 100644 --- a/Xbox.css +++ b/Xbox.css @@ -1,15 +1,17 @@ body { - background-color: darkgreen; + background-color: transparent; } .button { + border:1px solid rgba(var(--clr), var(--clg), var(--clb), var(--cla)); width:25px; height:25px; display:inline-block; border: none; padding:0px; - margin:px; + margin-left:42px; + text-align:center; vertical-align:middle; font-weight: bold; @@ -242,10 +244,6 @@ body { background-image: none; } -#style_select { - position:absolute; - left: 410px; -} .axisbox { display:none; @@ -298,6 +296,7 @@ body { #controller_XBOX { display: block; position: absolute; + left: 50px; width:400px; height:400px; } diff --git a/gpcon.js b/gpcon.js index 55fc9f8..c5f281f 100644 --- a/gpcon.js +++ b/gpcon.js @@ -21,17 +21,179 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ -let current_style = localStorage.getItem("gpcon_style") || "DS" +// "globals" + +// list all available styles +let available_styles = ['DS', 'NES', 'SNES', 'XBOX'] + +// get stored style +let current_style = localStorage.getItem("gpcon_style") || "NES" +let darkmode = localStorage.getItem("darkmode") +let buttons_border = localStorage.getItem("show_buttons_border") +let cbr = localStorage.getItem("cbr") +let cbg = localStorage.getItem("cbg") +let cbb = localStorage.getItem("cbb") +let cba = localStorage.getItem("cba") +let clr = localStorage.getItem("clr") +let clg = localStorage.getItem("clg") +let clb = localStorage.getItem("clb") +let cla = localStorage.getItem("cla") + +if (darkmode == null) { + darkmode = true +} else { + darkmode = JSON.parse(darkmode) +} + +if (buttons_border == null) { + buttons_border = true +} else { + buttons_border = JSON.parse(buttons_border) +} + +// iterate over supported styles, check if the saved one is correct +let style_defined = false +for (let style of available_styles) { + if (style == current_style) { + style_defined = true + break + } +} + + +// default to 1st style if thre's something wrong with the setting +if (!style_defined) { + current_style=available_styles[0] +} // called upon page loading function prep() { + let page = document.getElementsByTagName("body")[0] + let controls = document.getElementById("controls") + let color_base_div = document.getElementById("color_base") + let color_lines_div = document.getElementById("color_lines") + + let border_box = document.getElementById("border_box") + let buttons_border_element = document.getElementById("buttons_border") + border_box.addEventListener("change", border_box_change) + function border_box_change(event) { + let show_buttons_border = border_box.checked + console.log(show_buttons_border) + if (show_buttons_border){ + buttons_border_element.style.border = "1px solid red" + } else { + buttons_border_element.style.border = "1px solid transparent" + } + localStorage.setItem("show_buttons_border", show_buttons_border) + } + + let darkmode_box = document.getElementById("darkmode_box") + darkmode_box.addEventListener("change", darkmode_change) + function darkmode_change(event) { + let darkmode = darkmode_box.checked + if (darkmode) { + page.style.background = "rgba(0, 0, 0, 1)" + controls.style.color = "white" + color_base_div.style.borderColor = "white" + color_lines_div.style.borderColor = "white" + base_color = "rgba(0,0,0,1)" + line_color = "rgba(255,255,255,1)" + document.documentElement.style.setProperty(`--bbm`, "normal") + } else { + page.style.background = "rgba(255, 255, 255, 1)" + controls.style.color = "black" + color_base_div.style.borderColor = "black" + color_lines_div.style.borderColor = "black" + base_color = "rgba(255,255,255,1)" + line_color = "rgba(0,0,0,1)" + document.documentElement.style.setProperty(`--bbm`, "difference") + } + localStorage.setItem("darkmode", darkmode) + } + + + let red_slider_base = document.getElementById("red_slider_base") + let green_slider_base = document.getElementById("green_slider_base") + let blue_slider_base = document.getElementById("blue_slider_base") + let alpha_slider_base = document.getElementById("alpha_slider_base") + let red_input_base = document.getElementById("red_input_base") + let green_input_base = document.getElementById("green_input_base") + let blue_input_base = document.getElementById("blue_input_base") + let alpha_input_base = document.getElementById("alpha_input_base") + red_slider_base.addEventListener("input", base_color_change) + green_slider_base.addEventListener("input", base_color_change) + blue_slider_base.addEventListener("input", base_color_change) + alpha_slider_base.addEventListener("input", base_color_change) + function base_color_change() { + let r = red_slider_base.value + let g = green_slider_base.value + let b = blue_slider_base.value + let a = alpha_slider_base.value/100 + + let rgba = "rgba("+r+","+g+","+b+","+a+")" + color_base_div.style.background = rgba + red_input_base.value = r + green_input_base.value = g + blue_input_base.value = b + alpha_input_base.value = a + document.documentElement.style.setProperty(`--cbr`, r); + document.documentElement.style.setProperty(`--cbg`, g); + document.documentElement.style.setProperty(`--cbb`, b); + document.documentElement.style.setProperty(`--cba`, a); + localStorage.setItem("cbr",r) + localStorage.setItem("cbg",g) + localStorage.setItem("cbb",b) + localStorage.setItem("cba",a*100) + } + + + let red_slider_lines = document.getElementById("red_slider_lines") + let green_slider_lines = document.getElementById("green_slider_lines") + let blue_slider_lines = document.getElementById("blue_slider_lines") + let alpha_slider_lines = document.getElementById("alpha_slider_lines") + let red_input_lines = document.getElementById("red_input_lines") + let green_input_lines = document.getElementById("green_input_lines") + let blue_input_lines = document.getElementById("blue_input_lines") + let alpha_input_lines = document.getElementById("alpha_input_lines") + red_slider_lines.addEventListener("input", lines_color_change) + green_slider_lines.addEventListener("input", lines_color_change) + blue_slider_lines.addEventListener("input", lines_color_change) + alpha_slider_lines.addEventListener("input", lines_color_change) + function lines_color_change() { + let r = red_slider_lines.value + let g = green_slider_lines.value + let b = blue_slider_lines.value + let a = alpha_slider_lines.value/100 + let rgba = "rgba("+r+","+g+","+b+","+a+")" + color_lines_div.style.background = rgba + red_input_lines.value = r + green_input_lines.value = g + blue_input_lines.value = b + alpha_input_lines.value = a + document.documentElement.style.setProperty(`--clr`, r); + document.documentElement.style.setProperty(`--clg`, g); + document.documentElement.style.setProperty(`--clb`, b); + document.documentElement.style.setProperty(`--cla`, a); + localStorage.setItem("clr",r) + localStorage.setItem("clg",g) + localStorage.setItem("clb",b) + localStorage.setItem("cla",a*100) + } // gets style select element that controls the stylesheets - let style_select = document.getElementById("style_select") - style_select.addEventListener("change", style_change) + + let DS_option = document.getElementById("DS_option") + let NES_option = document.getElementById("NES_option") + let SNES_option = document.getElementById("SNES_option") + let XBOX_option = document.getElementById("XBOX_option") + DS_option.addEventListener("click", style_change) + NES_option.addEventListener("click", style_change) + SNES_option.addEventListener("click", style_change) + XBOX_option.addEventListener("click", style_change) // this changes style by deleting an old element and creating a new one function style_change(event) { + console.log("sdd") let head = document.getElementsByTagName( "head" )[0] for (let child of head.children) { @@ -41,23 +203,33 @@ function prep() { } let link = document.createElement('link') - link.href = style_select.value + ".css" + link.href = event.srcElement.value + ".css" link.rel = "stylesheet" head.appendChild(link) - current_style = style_select.value - localStorage.setItem("gpcon_style",style_select.value) // remember to save selected style - console.log(link) + current_style = event.srcElement.value + localStorage.setItem("gpcon_style",event.srcElement.value) // remember to save selected style } - // this loads last selected style or deaults to DS one - for (let idx in style_select.options) { - if (style_select[idx].value == current_style) { - style_select.selectedIndex = idx - style_change() - break - } - } + document.getElementById(current_style+"_option").click() + //style_change({srcElement: style_select.children[idx]}) + + red_slider_base.value = cbr + green_slider_base.value = cbg + blue_slider_base.value = cbb + alpha_slider_base.value = cba + red_slider_lines.value = clr + green_slider_lines.value = clg + blue_slider_lines.value = clb + alpha_slider_lines.value = cla + + darkmode_box.checked = darkmode + border_box.checked = buttons_border + + base_color_change() + lines_color_change() + darkmode_change() + border_box_change() } @@ -111,57 +283,61 @@ function onFrame() { // gets repeatedly executed if (gp.buttons[j].pressed) { // if current button is pressed we can alter it's style if (j==8) { if (current_style == "DS") { - buttEle.style.background='rgba(255,255,255,0.5)'; + buttEle.style.background='rgba(255,255,255, 0.7)'; buttEle.innerHTML = "" } else if (current_style == "SNES") { - buttEle.style.background='rgba(255,255,255,0.5)'; + buttEle.style.background='rgba(255,225,225, 0.7)'; buttEle.innerHTML = "" } else if (current_style == "NES") { - buttEle.style.background='rgba(255,255,255,0.5)'; + buttEle.style.background='rgba(255,255,255, 0.7)'; buttEle.innerHTML = "" } else if (current_style == "XBOX") { buttEle.style.background='rgba(255,255,255,0)'; - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } } else if (j==9) { // the 'start' button (as well as any other non-round-shaped button) has to have it's innerHTML rewritten if (current_style == "DS") { - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } else if (current_style == "SNES") { - buttEle.style.background='rgba(255,255,255,0.5)'; + buttEle.style.background='rgba(255,255,255, 0.7)'; buttEle.innerHTML = "" } else if (current_style == "NES") { - buttEle.style.background='rgba(255,255,255,0.5)'; + buttEle.style.background='rgba(255,255,255, 0.7)'; buttEle.innerHTML = "" } else if (current_style == "XBOX") { buttEle.style.background='rgba(255,255,255,0)'; - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } } else { // sure, this could've been coded better, but what the heck, it works if (j<=11) { // buttons with id lower that 12 are usually the round-shaped ones; on-stick buttons go here as well - buttEle.style.background='linear-gradient(to top, rgba(255,255,255,0.5) '+val*100+'%, rgba(170,70,70,0.5) '+val*100+'%)';// gradient really helps to visualize partial presses + if (current_style == "DS") { + buttEle.style.background='linear-gradient(to top, rgba(255,255,255,0.5) '+val*100+'%, rgba(170,70,70,0.5) '+val*100+'%)';// gradient really helps to visualize partial presses + } else { + buttEle.style.background='rgba(255, 255, 255, 0.75)'; + } buttEle.innerHTML = "" if (j==0) { if (current_style == "XBOX") { buttEle.style.background='rgba(255,25,55,0)'; - buttEle.innerHTML = '' + buttEle.innerHTML = '' } } if (j==1) { if (current_style == "XBOX") { buttEle.style.background='rgba(255,25,55,0)'; - buttEle.innerHTML = '' + buttEle.innerHTML = '' } } if (j==2) { if (current_style == "XBOX") { buttEle.style.background='rgba(255,25,55,0)'; - buttEle.innerHTML = '' + buttEle.innerHTML = '' } } if (j==3) { if (current_style == "XBOX") { buttEle.style.background='rgba(255,25,55,0)'; - buttEle.innerHTML = '' + buttEle.innerHTML = '' } } if (j==4) {//L1 @@ -170,8 +346,8 @@ function onFrame() { // gets repeatedly executed } else if (current_style == "XBOX") { buttEle.style.background='rgba(255,25,55,0)'; - //buttEle.innerHTML = '' - buttEle.innerHTML = '' + //buttEle.innerHTML = '' + buttEle.innerHTML = '' } } if (j==6) {//L2 @@ -180,8 +356,8 @@ function onFrame() { // gets repeatedly executed } else if (current_style == "XBOX") { buttEle.style.background='rgba(255,25,55,0)'; - //buttEle.innerHTML = '' - buttEle.innerHTML = '' + //buttEle.innerHTML = '' + buttEle.innerHTML = '' } } if (j==5) {//R1 @@ -190,8 +366,8 @@ function onFrame() { // gets repeatedly executed } else if (current_style == "XBOX") { buttEle.style.background='rgba(255,25,55,0)'; - //buttEle.innerHTML = '' - buttEle.innerHTML = '' + //buttEle.innerHTML = '' + buttEle.innerHTML = '' } } if (j==7) {//R2 @@ -200,8 +376,8 @@ function onFrame() { // gets repeatedly executed } else if (current_style == "XBOX") { buttEle.style.background='rgba(255,25,55,0)'; - //buttEle.innerHTML = '' - buttEle.innerHTML = '' + //buttEle.innerHTML = '' + buttEle.innerHTML = '' } } if (j==10) {//L3 @@ -210,7 +386,7 @@ function onFrame() { // gets repeatedly executed } else if (current_style == "XBOX") { buttEle.style.background='rgba(255,25,55,0)'; - buttEle.innerHTML = '' + buttEle.innerHTML = '' } } if (j==11) {//R3 @@ -219,80 +395,80 @@ function onFrame() { // gets repeatedly executed } else if (current_style == "XBOX") { buttEle.style.background='rgba(255,25,55,0)'; - buttEle.innerHTML = '' + buttEle.innerHTML = '' } } } if (current_style == "DS") { if (j==12) {// up - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } if (j==13) {// down - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } if (j==14) {// left - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } if (j==15) {// right - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } } else if (current_style == "SNES") { if (j==12) {// up - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } if (j==13) {// down - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } if (j==14) {// left - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } if (j==15) {// right - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } } else if (current_style == "NES") { if (j==12) {// up - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } if (j==13) {// down - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } if (j==14) {// left - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } if (j==15) {// right - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } } else if (current_style == "XBOX") { if (j==12) {// up - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } if (j==13) {// down - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } if (j==14) {// left - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } if (j==15) {// right - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } if (j==16) {//home if (current_style == "XBOX") { buttEle.style.background='rgba(255,25,55,0)'; - buttEle.innerHTML = '' + buttEle.innerHTML = '' } } } } - } else { // if current button is *not* pressed we should revert it's style + } else { // if current button is *not* pressed we should revert it's style if (j==8) { if (current_style == "DS") { - buttEle.style.background='rgba(70,70,70,0.5)'; + buttEle.style.background='rgba(255,255,255, 0)'; buttEle.style['background-image'] = "linear-gradient(to bottom, rgba(190,190,190,0.25) 0%, rgba(50,50,50,0.25) 100%), linear-gradient(to right, rgba(190,190,190,0.25) 0%, rgba(50,50,50,0.25) 100%)"; } else if (current_style == "SNES") { buttEle.style.background='rgba(0,0,0,0.0)'; buttEle.innerHTML = "" } else if (current_style == "NES") { - buttEle.style.background='rgba(30,30,30,1)'; + buttEle.style.background='rgba(0,0,0,0)'; buttEle.innerHTML = "" } else if (current_style == "XBOX") { buttEle.style.background='rgba(30,30,30,0)'; @@ -301,12 +477,12 @@ function onFrame() { // gets repeatedly executed } else if (j==9) {// once again, the 'start' button needs special attention if (current_style == "DS") { buttEle.style.background='rgba(0,0,0,0.0)'; - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } else if (current_style == "SNES") { buttEle.style.background='rgba(0,0,0,0.0)'; buttEle.innerHTML = "" } else if (current_style == "NES") { - buttEle.style.background='rgba(30,30,30,1)'; + buttEle.style.background='rgba(30,30,30,0)'; buttEle.innerHTML = "" } else if (current_style == "XBOX") { buttEle.style.background='rgba(30,30,30,0)'; @@ -345,7 +521,7 @@ function onFrame() { // gets repeatedly executed } else if (current_style == "XBOX") { buttEle.style.background='rgba(255,25,55,0)'; - buttEle.innerHTML = '' + buttEle.innerHTML = '' } } if (j==6) {//L2 @@ -355,7 +531,7 @@ function onFrame() { // gets repeatedly executed } else if (current_style == "XBOX") { buttEle.style.background='rgba(255,25,55,0)'; - buttEle.innerHTML = '' + buttEle.innerHTML = '' } } if (j==5) {//R1 @@ -365,7 +541,7 @@ function onFrame() { // gets repeatedly executed } else if (current_style == "XBOX") { buttEle.style.background='rgba(255,25,55,0)'; - buttEle.innerHTML = '' + buttEle.innerHTML = '' } } if (j==7) {//R2 @@ -375,7 +551,7 @@ function onFrame() { // gets repeatedly executed } else if (current_style == "XBOX") { buttEle.style.background='rgba(255,25,55,0)'; - buttEle.innerHTML = '' + buttEle.innerHTML = '' } } if (j==10) {//L3 @@ -385,7 +561,7 @@ function onFrame() { // gets repeatedly executed } else if (current_style == "XBOX") { buttEle.style.background='rgba(255,25,55,0)'; - buttEle.innerHTML = '' + buttEle.innerHTML = '' } } if (j==11) {//R3 @@ -395,7 +571,7 @@ function onFrame() { // gets repeatedly executed } else if (current_style == "XBOX") { buttEle.style.background='rgba(255,25,55,0)'; - buttEle.innerHTML = '' + buttEle.innerHTML = '' } } @@ -415,42 +591,42 @@ function onFrame() { // gets repeatedly executed } if (current_style == "DS") { if (j==12) { // and of course directional buttons: up - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } if (j==13) {// down - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } if (j==14) {// left - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } if (j==15) {// right - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } } else if (current_style == "SNES") { if (j==12) {// up - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } if (j==13) {// down - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } if (j==14) {// left - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } if (j==15) {// right - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } } else if (current_style == "NES") { if (j==12) {// up - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } if (j==13) {// down - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } if (j==14) {// left - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } if (j==15) {// right - buttEle.innerHTML = ''; + buttEle.innerHTML = ''; } } else if (current_style == "XBOX") { if (j==12) {// up @@ -468,7 +644,7 @@ function onFrame() { // gets repeatedly executed if (j==16) {//home if (current_style == "XBOX") { buttEle.style.background='rgba(255,25,55,0)'; - buttEle.innerHTML = '' + buttEle.innerHTML = '' } } } diff --git a/index.html b/index.html index 56fc274..d794705 100644 --- a/index.html +++ b/index.html @@ -2,19 +2,77 @@ + -
+
+ + + + + - - + - + @@ -24,63 +82,57 @@ - - - - - - +
-
- - + + + + + + + + + + + + + + + + - - + - - - - - - - - - - - - - - -
-
- - + + - - + - - + - - - - - - - - - - - -
-
- -
- -
+ + +
+ + + +
+
+
+
+
+
+
+ Controller type: + + + + +
+
+
+ Base Color: +
+ + + + + +
Red
Green
Blue
Alpha
+
+

+
+ Lines Color: +
+ + + + + +
Red
Green
Blue
Alpha
+
+
+
+
+
diff --git a/main.css b/main.css deleted file mode 100644 index 5a36bcc..0000000 --- a/main.css +++ /dev/null @@ -1,221 +0,0 @@ -body { - -} - -.button { - border:1px solid rgba(50,50,50,0.5); - width:25px; - height:25px; - border-radius:13px; - display:inline-block; - background: rgba(70,70,70,0.5); - padding:0px; - margin:px; - text-align:center; - vertical-align:middle; - font-weight: bold; - position:absolute; - text-shadow: 1px 1px 1px rgba(0,0,0,0.25), 0px 1px 1px rgba(0,0,0,0.25), 1px 0px 1px rgba(0,0,0,0.25); -} - -.button_4, .button_5, .button_6, .button_7 { - width:35px; - height:20px; - border-radius:8px; -} - -.button_8 { - width:30px; - height:15px; - border-radius:4px; -} - -.button_9 { - border:0px; - background:transparent; -} - - -.button::after { - position:relative; - color: rgba(250,250,250,0.5); - font-size:13px; -} - -.button_0::after { - content:"✕"; - color: rgba(80,120,200,0.5); - font-size:22px; - top:-4px; -} - -.button_1::after { - content:"○"; - color: rgba(200,120,80,0.5); - font-size:41px; - top:-14px; -} - -.button_2::after { - content:"□"; /*square*/ - color: rgba(250,80,80,0.5); - font-size:35px; - top:-10px; -} - -.button_3::after { - content:"△";/*triangle*/ - color: rgba(60,200,100,0.5); - font-size:23px; - top:-2px; -} - -.button_4::after { - content:"L1"; -} - -.button_5::after { - content:"R1"; -} - -.button_6::after { - content:"L2"; -} - -.button_7::after { - content:"R2"; -} - -.button_10::after { - content:"L3"; - top:2px; -} - -.button_11::after { - content:"R3"; - top:2px; -} - -#button_9_border { - position:relative; - top:3px; -} - -.button_12, .button_13, .button_14, .button_15 { - border:0px; - background:transparent; - height:25px; - width:25px; - } - -.button_12 { - left:46px; - top:14px; -} -.button_13 { - left:46px; - top:63px; -} - -.button_14 { - left:21px; - top:39px; -} -.button_15 { - left:70px; - top:39px; -} - -.button_3 { - left:226px; - top:12px; -} -.button_0 { - left:226px; - top:61px; -} - -.button_2 { - left:201px; - top:37px; -} -.button_1 { - left:250px; - top:37px; -} - -.button_4 { - left:2px; - top: 1px; -} -.button_6 { - left:80px; - top: 1px; -} - -.button_5 { - left:260px; - top: 1px; - -} -.button_7 { - left:182px; - top: 1px; -} - -.button_8 { - left:111px; - top:42px; -} - -.button_9 { - left:161px; - top:37px; -} - -.button_10 { - position:relative; - border:1px solid rgba(250,200,150,0.5); -} - -.button_11 { - position:relative; - border:1px solid rgba(250,200,150,0.5); -} - - -#buttons { - position:absolute; - transform: scale(1); -} - - -.axisbox { - border-radius:20px; - border:1px solid red; - width:40px; - height:40px; - position:absolute; - top: 65px; - border:1px solid rgba(50,50,50,0.5); - background: rgba(70,70,70,0.5); -} - -.axisbox_0 { - left:105px; -} - -.axisbox_1 { - left:155px; -} - -.axis{ - margin-left:-5px; - margin-top:-5px; - border-radius:5px; - border:1px solid black; - width:10px; - height:10px; - display:block; - position:relative; -} \ No newline at end of file