diff --git a/about.html b/about.html index f1a621619..e3dce3862 100644 --- a/about.html +++ b/about.html @@ -31,15 +31,25 @@ return !0; }; } - let cpy = document.getElementById('abt_copy'); document.getElementById('abt_close').onclick = () => { window.close() };; + let cpy = document.getElementById('abt_copy'); cpy.onclick = () => { let ta = document.getElementById('abt_ta'); - ta.select(); - document.execCommand('copy'); - ta.selectionEnd = 0; + ta.select(); + document.execCommand('copy'); + ta.selectionEnd = 0; + }; + cpy.focus(); + const abt = document.getElementById('abt'); + abt.tabIndex = 0; + abt.onkeydown = (x) => { + if (x.key === 'Escape') { + window.close(); + return !1; + } else if (x.key === 'Enter') { + cpy.click(); + } }; - cpy.hidden = !document.queryCommandSupported('copy'); diff --git a/src/prf_ui.js b/src/prf_ui.js index 0f9ff0af9..d34718874 100644 --- a/src/prf_ui.js +++ b/src/prf_ui.js @@ -55,6 +55,7 @@ } if (!d) { d = I.prf_dlg; + $(`#${d.id}>div`).attr('tabIndex', 0); d.onkeydown = (x) => { const k = D.util.fmtKey(x); if (k === 'Ctrl-Enter') { @@ -84,6 +85,7 @@ for (let i = 0; i < hdrs.length; i++) { const b = a === hdrs[i]; payloads[i].hidden = !b; + payloads[i].tabIndex = b ? 0 : -1; hdrs[i].className = b ? 'sel' : ''; } activeTab = tabs[a.href.replace(/.*#/, '')]; diff --git a/style/dark-theme.css b/style/dark-theme.css index ec5c082f1..aa781c326 100644 --- a/style/dark-theme.css +++ b/style/dark-theme.css @@ -103,6 +103,10 @@ } .dlg { background-color: #1c1e28; + outline: none; +} +.dlg div { + outline: none; } .dlg_title, .dlg_close { @@ -142,92 +146,6 @@ text-align: left; border: 1px solid transparent; } -/*Golden Layout*/ -.lm_goldenlayout { - background: #272937 !important; -} -.lm_goldenlayout .lm_header { - background: #272937 !important; -} -.lm_header, -.lm_content { - border-color: #272937 !important; -} -.lm_dragProxy .lm_content { - box-shadow: 2px 2px 4px rgba(255, 255, 255, 0.2); -} -.lm_dropTargetIndicator { - box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.4); - outline: 1px dashed #7688d9; - margin: 1px; - transition: all 200ms ease; -} -.lm_dropTargetIndicator .lm_inner { - background: white; - opacity: 0.1; - filter: alpha(opacity=1); -} -.lm_tab { - font-family: Roboto!important; - letter-spacing: 0.5px; - font-size: 12px; - background-color: #323446 !important; - color: #a9a9a9 !important; - border-right: 1px #272937 solid !important; -} -.lm_tab.lm_active { - background-color: #1c1e28 !important; - border-right: 1px #272937 solid !important; - color: #7688d9 !important; -} -.lm_tab.lm_active .lm_close_tab { - color: #7688d9 !important; -} -.lm_splitter { - background-color: rgba(118, 136, 217, 0.3) !important; -} -.lm_splitter.lm_horizontal { - background: rgba(118, 136, 217, 0.3) url(img/grabber_vert.png) no-repeat center !important; - box-shadow: -1px 0 0 black inset, 1px 0 0 black inset; -} -.lm_splitter.lm_vertical { - background: rgba(118, 136, 217, 0.3) url(img/grabber_hor.png) no-repeat center !important; - box-shadow: 0 -1px 0 black inset, 0 1px 0 black inset; -} -.lm_header .lm_tab .lm_close_tab { - background-image: none !important; - color: #a9a9a9; - font-size: 16px; -} -.lm_header .lm_tab .lm_close_tab::before { - content: "×"; -} -.lm_header .lm_tab:hover .lm_close_tab { - opacity: 1; - color: #7688d9 !important; -} -.lm_controls > li { - background-position: center center; - background-repeat: no-repeat; - position: relative; -} -.lm_controls > li:hover { - opacity: 1; - filter: alpha(opacity=100); -} -.lm_header .lm_controls .lm_tabdropdown:before { - color: #a9a9a9 !important; -} -.lm_controls .lm_maximise { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==); -} -.lm_maximised .lm_controls .lm_maximise { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC); -} -.lm_transition_indicator { - background-color: white; - border: 1px dashed #7688d9; -} label { color: #a9a9a9; font-family: Roboto; @@ -315,6 +233,92 @@ select { border-top: 1px solid black; border-bottom: 1px solid #2e303e; } +/*Golden Layout*/ +.lm_goldenlayout { + background: #272937 !important; +} +.lm_goldenlayout .lm_header { + background: #272937 !important; +} +.lm_header, +.lm_content { + border-color: #272937 !important; +} +.lm_dragProxy .lm_content { + box-shadow: 2px 2px 4px rgba(255, 255, 255, 0.2); +} +.lm_dropTargetIndicator { + box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.4); + outline: 1px dashed #7688d9; + margin: 1px; + transition: all 200ms ease; +} +.lm_dropTargetIndicator .lm_inner { + background: white; + opacity: 0.1; + filter: alpha(opacity=1); +} +.lm_tab { + font-family: Roboto!important; + letter-spacing: 0.5px; + font-size: 12px; + background-color: #323446 !important; + color: #a9a9a9 !important; + border-right: 1px #272937 solid !important; +} +.lm_tab.lm_active { + background-color: #1c1e28 !important; + border-right: 1px #272937 solid !important; + color: #7688d9 !important; +} +.lm_tab.lm_active .lm_close_tab { + color: #7688d9 !important; +} +.lm_splitter { + background-color: rgba(118, 136, 217, 0.3) !important; +} +.lm_splitter.lm_horizontal { + background: rgba(118, 136, 217, 0.3) url(img/grabber_vert.png) no-repeat center !important; + box-shadow: -1px 0 0 black inset, 1px 0 0 black inset; +} +.lm_splitter.lm_vertical { + background: rgba(118, 136, 217, 0.3) url(img/grabber_hor.png) no-repeat center !important; + box-shadow: 0 -1px 0 black inset, 0 1px 0 black inset; +} +.lm_header .lm_tab .lm_close_tab { + background-image: none !important; + color: #a9a9a9; + font-size: 16px; +} +.lm_header .lm_tab .lm_close_tab::before { + content: "×"; +} +.lm_header .lm_tab:hover .lm_close_tab { + opacity: 1; + color: #7688d9 !important; +} +.lm_controls > li { + background-position: center center; + background-repeat: no-repeat; + position: relative; +} +.lm_controls > li:hover { + opacity: 1; + filter: alpha(opacity=100); +} +.lm_header .lm_controls .lm_tabdropdown:before { + color: #a9a9a9 !important; +} +.lm_controls .lm_maximise { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==); +} +.lm_maximised .lm_controls .lm_maximise { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC); +} +.lm_transition_indicator { + background-color: white; + border: 1px dashed #7688d9; +} /*menu (see ../src/menu.js for the DOM structure)*/ .menu { background-color: #edeff5; diff --git a/style/less/colour/dialogs.less b/style/less/colour/dialogs.less index ba5e30d4d..f8367ee99 100644 --- a/style/less/colour/dialogs.less +++ b/style/less/colour/dialogs.less @@ -4,8 +4,12 @@ opacity: 0.2; } -.dlg{ +.dlg { background-color:@DLG_BG_COL; + outline: none; + div { + outline: none; + } } .dlg_title,.dlg_close{ diff --git a/style/light-theme.css b/style/light-theme.css index 7ba4a37bb..5e8483775 100644 --- a/style/light-theme.css +++ b/style/light-theme.css @@ -1,3 +1,77 @@ +.ctl_listview { + background-color: white; + color: black; +} +.ctl_listview tr { + background-color: rgba(118, 136, 217, 0.5); + border-bottom: 1px solid white; +} +.ctl_listview tr:hover { + background-color: rgba(118, 136, 217, 0.25); +} +.ctl_listview tr.selected { + background-color: #9eabe4; +} +#debug { + background: white; +} +#debug .ctl_listview_header { + background-color: #7688d9; + color: white; +} +#debug .ctl_listview_header h2 { + font-size: 16px; +} +/*various dialogs*/ +#dlg_modal_overlay { + background-color: black; + opacity: 0.2; +} +.dlg { + background-color: #edeff5; + outline: none; +} +.dlg div { + outline: none; +} +.dlg_title, +.dlg_close { + color: #7688d9; +} +.dlg_close:hover { + background-color: white; +} +#cn_listen_dlg, +#cn_connecting_dlg { + border: 1px solid #7688d9; +} +#gd.dlg { + background-color: #edeff5; +} +#gd .dlg_title, +#gd .dlg_close { + color: #828282; +} +#gd .dlg_close:hover { + color: white; + background-color: #38393f; +} +#gd_content { + color: #4c4a4a; +} +.dlg_btns { + background-color: #dde0ec; +} +.dlg_btns button.task { + background-image: none; + background-color: rgba(0, 0, 0, 0); + color: #7688d9; + text-transform: none; + font-size: small; + font-weight: normal; + text-align: left; + border: 1px solid transparent; +} #cn input:not([type=button]):not([type=file]):not([type=submit]):not([type=checkbox]), #cn textarea { border: 1px solid rgba(169, 169, 169, 0.3); @@ -72,76 +146,6 @@ font-size: 16px; font-family: monospace; } -.ctl_listview { - background-color: white; - color: black; -} -.ctl_listview tr { - background-color: rgba(118, 136, 217, 0.5); - border-bottom: 1px solid white; -} -.ctl_listview tr:hover { - background-color: rgba(118, 136, 217, 0.25); -} -.ctl_listview tr.selected { - background-color: #9eabe4; -} -#debug { - background: white; -} -#debug .ctl_listview_header { - background-color: #7688d9; - color: white; -} -#debug .ctl_listview_header h2 { - font-size: 16px; -} -/*various dialogs*/ -#dlg_modal_overlay { - background-color: black; - opacity: 0.2; -} -.dlg { - background-color: #edeff5; -} -.dlg_title, -.dlg_close { - color: #7688d9; -} -.dlg_close:hover { - background-color: white; -} -#cn_listen_dlg, -#cn_connecting_dlg { - border: 1px solid #7688d9; -} -#gd.dlg { - background-color: #edeff5; -} -#gd .dlg_title, -#gd .dlg_close { - color: #828282; -} -#gd .dlg_close:hover { - color: white; - background-color: #38393f; -} -#gd_content { - color: #4c4a4a; -} -.dlg_btns { - background-color: #dde0ec; -} -.dlg_btns button.task { - background-image: none; - background-color: rgba(0, 0, 0, 0); - color: #7688d9; - text-transform: none; - font-size: small; - font-weight: normal; - text-align: left; - border: 1px solid transparent; -} /*Golden Layout*/ .lm_goldenlayout { background: #dde0ec !important; @@ -315,6 +319,13 @@ select { border-top: 1px solid #d7d7d3; border-bottom: 1px solid white; } +.breakpoint { + background: no-repeat transparent center center url(img/breakpoint.png); +} +.highlighted { + border: none; + outline: solid red 1px; +} /*menu (see ../src/menu.js for the DOM structure)*/ .menu { background-color: #edeff5; @@ -351,13 +362,6 @@ select { .menu .m-box a:focus.m-checked { background: rgba(0, 0, 0, 0.2) 5px center no-repeat url(img/menu_chk.png); } -.breakpoint { - background: no-repeat transparent center center url(img/breakpoint.png); -} -.highlighted { - border: none; - outline: solid red 1px; -} #prf_dlg hr { border-top: 1px solid #d7d7d3; border-bottom: 1px solid white; @@ -569,6 +573,25 @@ a:hover { ::-webkit-scrollbar-thumb:active { background-color: rgba(118, 136, 217, 0.9); } +#sb { + background-color: white; + border-top: 1px solid #9eabe4; + color: #4c4a4a; + font-family: apl, monospace; +} +#sb div { + border-right: 1px solid #dde0ec; +} +#sb div.right { + border-right: none; + border-left: 1px solid #dde0ec; +} +#sb div.active { + color: #7688d9; +} +#sb_prf:active { + background-color: #dde0ec; +} #splash { background: url(img/RideLogo.png) center no-repeat, url(img/bg.jpg) center no-repeat #7688d9; } @@ -596,35 +619,6 @@ body { background-color: grey; color: white; } -#sb { - background-color: white; - border-top: 1px solid #9eabe4; - color: #4c4a4a; - font-family: apl, monospace; -} -#sb div { - border-right: 1px solid #dde0ec; -} -#sb div.right { - border-right: none; - border-left: 1px solid #dde0ec; -} -#sb div.active { - color: #7688d9; -} -#sb_prf:active { - background-color: #dde0ec; -} -#toast-container { - font-family: Roboto; - font-size: 14px; - line-height: 20px; -} -#toast-container > div { - -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); - -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); - box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); -} .tooltip { color: #7688d9; } @@ -671,6 +665,16 @@ body { #vt_tri { border-color: black; } +#toast-container { + font-family: Roboto; + font-size: 14px; + line-height: 20px; +} +#toast-container > div { + -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); + box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); +} #wse { background-color: white; color: black; diff --git a/style/ride-base.css b/style/ride-base.css index 6109d1662..de00348c0 100644 --- a/style/ride-base.css +++ b/style/ride-base.css @@ -190,27 +190,6 @@ #sistack { height: calc(100% - 24px); } -.lm_content { - border: none !important; -} -.lm_header .lm_tab { - padding: 5px 15px 5px 10px !important; - margin-top: 0!important; - height: 15px!important; -} -.lm_close { - display: none !important; -} -.lm_splitter { - opacity: 1 !important; -} -.lm_header .lm_tab .lm_title { - padding: 0px 10px 2px 0px; -} -.lm_header .lm_tab .lm_close_tab { - top: 4px !important; - right: 6px !important; -} /*various dialogs*/ #dlg_modal_overlay { width: 100%; @@ -470,83 +449,26 @@ font-weight: 900; font-style: italic; } -button { - border: none; - font-family: Roboto; - font-weight: bold; - padding: 5px 0.5em; - transition: box-shadow 0.2s; - text-transform: uppercase; - cursor: pointer; -} -button:active { - box-shadow: none; -} -label input[type=checkbox] { - position: relative; - vertical-align: text-bottom; -} -input[type=checkbox]:disabled, -input[type=checkbox]:disabled:checked { - background-color: #ebebe4; - border-color: #4c4a4a; -} -input[type=checkbox]:disabled:after, -input[type=checkbox]:disabled:checked:after { - color: #4c4a4a; -} -input[type=checkbox] { - -webkit-appearance: none; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); - padding: 8px; - border-radius: 3px; - display: inline-block; - position: relative; - margin: 0 5px 0 0; -} -input[type=checkbox]:focus { - outline: none; - margin-right: 5px; -} -input[type=checkbox]:checked:after { - content: '\2714'; - font-size: 11px; - position: absolute; - top: 0px; - left: 4px; -} -input, -textarea, -pre, -tt { - font-family: Roboto; - font-size: 14px; +.lm_content { + border: none !important; } -input, -textarea, -select, -a { - outline: 0; +.lm_header .lm_tab { + padding: 5px 15px 5px 10px !important; + margin-top: 0!important; + height: 15px!important; } -select { - overflow: hidden; - padding: 2px 34px 2px 4px; - text-overflow: ellipsis; - white-space: nowrap; - min-height: 30px; - box-shadow: none; - font-weight: 500; - border-radius: 2px; +.lm_close { + display: none !important; } -select option { - font-weight: 500; +.lm_splitter { + opacity: 1 !important; } -select:focus { - outline: dotted black 1px; +.lm_header .lm_tab .lm_title { + padding: 0px 10px 2px 0px; } -textarea { - border: none; - padding: 0; +.lm_header .lm_tab .lm_close_tab { + top: 4px !important; + right: 6px !important; } /*jQuery UI - v1.10.4 - 2014-01-17, heavily customized*/ .ui-helper-hidden { @@ -1006,6 +928,84 @@ body .ui-tooltip { .ui-icon-closethick { background: no-repeat center center url(img/close.png); } +button { + border: none; + font-family: Roboto; + font-weight: bold; + padding: 5px 0.5em; + transition: box-shadow 0.2s; + text-transform: uppercase; + cursor: pointer; +} +button:active { + box-shadow: none; +} +label input[type=checkbox] { + position: relative; + vertical-align: text-bottom; +} +input[type=checkbox]:disabled, +input[type=checkbox]:disabled:checked { + background-color: #ebebe4; + border-color: #4c4a4a; +} +input[type=checkbox]:disabled:after, +input[type=checkbox]:disabled:checked:after { + color: #4c4a4a; +} +input[type=checkbox] { + -webkit-appearance: none; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); + padding: 8px; + border-radius: 3px; + display: inline-block; + position: relative; + margin: 0 5px 0 0; +} +input[type=checkbox]:focus { + outline: none; + margin-right: 5px; +} +input[type=checkbox]:checked:after { + content: '\2714'; + font-size: 11px; + position: absolute; + top: 0px; + left: 4px; +} +input, +textarea, +pre, +tt { + font-family: Roboto; + font-size: 14px; +} +input, +textarea, +select, +a { + outline: 0; +} +select { + overflow: hidden; + padding: 2px 34px 2px 4px; + text-overflow: ellipsis; + white-space: nowrap; + min-height: 30px; + box-shadow: none; + font-weight: 500; + border-radius: 2px; +} +select option { + font-weight: 500; +} +select:focus { + outline: dotted black 1px; +} +textarea { + border: none; + padding: 0; +} #lb { font-family: apl, monospace; font-size: 18px; @@ -1282,33 +1282,6 @@ h2 { .hidden { display: none; } -/*Status window*/ -/*info*/ -/*error*/ -/*warning*/ -/*.Net function overload clash overload*/ -#status_body { - overflow: scroll; -} -#status { - font-family: apl, monospace; - white-space: pre; -} -#status .m { - padding: 1px 8px; -} -#status .t1 { - color: green; -} -#status .t2 { - color: red; -} -#status .t4 { - color: blue; -} -#status .t8 { - color: red; -} #sb { position: absolute; left: 0; @@ -1336,6 +1309,33 @@ h2 { #sb #sb_prf { padding: 2px 6px 3px; } +/*Status window*/ +/*info*/ +/*error*/ +/*warning*/ +/*.Net function overload clash overload*/ +#status_body { + overflow: scroll; +} +#status { + font-family: apl, monospace; + white-space: pre; +} +#status .m { + padding: 1px 8px; +} +#status .t1 { + color: green; +} +#status .t2 { + color: red; +} +#status .t4 { + color: blue; +} +#status .t8 { + color: red; +} .tooltip { width: 16px; height: 16px; @@ -1963,6 +1963,41 @@ body.floating-window { #col.renaming #col_new_name { display: inline; } +/*Prefs>Menu*/ +#pmenu_rst { + float: right; +} +#pmenu p { + margin: 10px 8px; + color: black; +} +#pmenu_ta_wr { + position: absolute; + left: 4px; + right: 4px; + top: 94px; + bottom: 70px; + overflow: hidden; + padding: 4px; +} +.web #pmenu_ta_wr { + top: 120px; +} +#pmenu_ta { + width: 100%; + height: 100%; + resize: none; +} +/*Prefs>Saved Responses*/ +#resp_qns { + margin: 8px 0; + width: 100%; + width: -moz-available; + /* WebKit-based browsers will ignore this. */ + width: -webkit-fill-available; + /* Mozilla-based browsers will ignore this. */ + width: fill-available; +} /*Prefs>Layout*/ /*The arrangement is: +-------+ */ /* | g1 g3 | */ @@ -2167,41 +2202,6 @@ input.lyt_g3:hover { display: none; } } -/*Prefs>Menu*/ -#pmenu_rst { - float: right; -} -#pmenu p { - margin: 10px 8px; - color: black; -} -#pmenu_ta_wr { - position: absolute; - left: 4px; - right: 4px; - top: 94px; - bottom: 70px; - overflow: hidden; - padding: 4px; -} -.web #pmenu_ta_wr { - top: 120px; -} -#pmenu_ta { - width: 100%; - height: 100%; - resize: none; -} -/*Prefs>Saved Responses*/ -#resp_qns { - margin: 8px 0; - width: 100%; - width: -moz-available; - /* WebKit-based browsers will ignore this. */ - width: -webkit-fill-available; - /* Mozilla-based browsers will ignore this. */ - width: fill-available; -} /*Prefs>Shortcuts*/ #shc { position: absolute;