From 1f5a3f8437d2f514e3c77b787d0e688cc4d198cc Mon Sep 17 00:00:00 2001 From: Gilgamesh Athoraya Date: Tue, 1 Aug 2023 16:32:45 +0200 Subject: [PATCH] Use selected theme in About and pref menu --- about.html | 3 +- src/abt.js | 3 + src/km.js | 2 +- style/dark-theme.css | 269 +++---- style/less/colour/about_page.less | 6 + style/less/colour/preferences.less | 5 +- style/light-theme.css | 159 ++-- style/ride-base.css | 1158 ++++++++++++++-------------- 8 files changed, 818 insertions(+), 787 deletions(-) create mode 100644 style/less/colour/about_page.less diff --git a/about.html b/about.html index e3dce386..2233fb16 100644 --- a/about.html +++ b/about.html @@ -4,7 +4,8 @@ About Dyalog - + +
diff --git a/src/abt.js b/src/abt.js index f8717b30..7972393a 100644 --- a/src/abt.js +++ b/src/abt.js @@ -55,6 +55,9 @@ D.abtw = w; w.loadURL(`file://${__dirname}/about.html`); w.webContents.executeJavaScript(`document.getElementById('abt_ta').value=${JSON.stringify(details)};`); + w.webContents.executeJavaScript(`document.getElementById('theme_dark').disabled = ${D.theme !== 'dark'}`); + w.webContents.executeJavaScript(`document.getElementById('theme_light').disabled = ${D.theme !== 'light'};`); + w.on('closed', () => { delete D.abtw; }); } else { if (!d) { diff --git a/src/km.js b/src/km.js index 6dec5a17..087b645d 100644 --- a/src/km.js +++ b/src/km.js @@ -58,7 +58,7 @@ UND(me) { me.trigger('D', 'undo'); }, PRF() { D.prf_ui(); }, ABT() { - if (D.el && D.ide.floating) D.ipc.of.ride_master.emit('ABT'); + if (D.el && D.ide && D.ide.floating) D.ipc.of.ride_master.emit('ABT'); else D.abt(); }, CAM() { diff --git a/style/dark-theme.css b/style/dark-theme.css index f0251703..f470c10a 100644 --- a/style/dark-theme.css +++ b/style/dark-theme.css @@ -1,3 +1,9 @@ +#abt_ta { + border: 1px solid rgba(169, 169, 169, 0.3); + background-color: #272937; + color: white; + font-family: apl, monospace; +} #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,91 +78,30 @@ font-size: 16px; font-family: monospace; } -/*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 { - letter-spacing: 0.5px; - font-size: 12px; - background-color: #323446 !important; - color: #a9a9a9 !important; - border-right: 1px #272937 solid !important; +.ctl_listview { + background-color: #1c1e28; + color: white; } -.lm_tab.lm_active { - background-color: #1c1e28 !important; - border-right: 1px #272937 solid !important; - color: #7688d9 !important; +.ctl_listview tr { + background-color: rgba(118, 136, 217, 0.5); + border-bottom: 1px solid #1c1e28; } -.lm_tab.lm_active .lm_close_tab { - color: #7688d9 !important; +.ctl_listview tr:hover { + background-color: rgba(118, 136, 217, 0.25); } -.lm_splitter { - background-color: rgba(118, 136, 217, 0.3) !important; +.ctl_listview tr.selected { + background-color: #1c1e28; } -.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; +#debug { + background: #1c1e28; } -.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; +#debug .ctl_listview_header { + background-color: #7688d9; + color: white; } -.lm_header .lm_tab .lm_close_tab { - background-image: none !important; - color: #a9a9a9; +#debug .ctl_listview_header h2 { 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; @@ -265,6 +210,91 @@ select { 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 { + 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; +} #lb { background-color: #1c1e28; border-bottom: 1px black solid; @@ -334,30 +364,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); } -.ctl_listview { - background-color: #1c1e28; - color: white; -} -.ctl_listview tr { - background-color: rgba(118, 136, 217, 0.5); - border-bottom: 1px solid #1c1e28; -} -.ctl_listview tr:hover { - background-color: rgba(118, 136, 217, 0.25); -} -.ctl_listview tr.selected { - background-color: #1c1e28; -} -#debug { - background: #1c1e28; -} -#debug .ctl_listview_header { - background-color: #7688d9; - color: white; -} -#debug .ctl_listview_header h2 { - font-size: 16px; -} .breakpointarea { border-right: 1px solid #272937; cursor: pointer; @@ -537,7 +543,10 @@ a:hover { color: #7688d9; } #pmenu #pmenu_ta { - font-family: monospace; + border: 1px solid rgba(169, 169, 169, 0.3); + background-color: #272937; + color: white; + font-family: apl, monospace; } @media print { .lyt_k, @@ -569,33 +578,6 @@ a:hover { display: none; } } -#splash { - background: url(img/RideLogo.png) center no-repeat, url(img/bg.jpg) center no-repeat #1c1e28; -} -#ide { - background-color: #1c1e28; -} -#apl_font { - color: #1c1e28; -} -::selection { - background: #7688d9; - color: white; -} -/*must be separate rules*/ -::-moz-selection { - background: #7688d9; - color: white; -} -/*must be separate rules*/ -body { - font-family: Roboto, sans-serif; -} -#demo-keys span { - border: solid #333 1px; - background-color: grey; - color: white; -} ::-webkit-scrollbar { background-color: #1c1e28; } @@ -642,9 +624,33 @@ body { #sb_prf:active { background-color: rgba(0, 0, 0, 0.2); } -#status_body { +#splash { + background: url(img/RideLogo.png) center no-repeat, url(img/bg.jpg) center no-repeat #1c1e28; +} +#ide { background-color: #1c1e28; } +#apl_font { + color: #1c1e28; +} +::selection { + background: #7688d9; + color: white; +} +/*must be separate rules*/ +::-moz-selection { + background: #7688d9; + color: white; +} +/*must be separate rules*/ +body { + font-family: Roboto, sans-serif; +} +#demo-keys span { + border: solid #333 1px; + background-color: grey; + color: white; +} #toast-container { font-family: Roboto; font-size: 14px; @@ -655,6 +661,9 @@ body { -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); } +#status_body { + background-color: #1c1e28; +} .tooltip { color: #7688d9; } diff --git a/style/less/colour/about_page.less b/style/less/colour/about_page.less new file mode 100644 index 00000000..ac4559ef --- /dev/null +++ b/style/less/colour/about_page.less @@ -0,0 +1,6 @@ +#abt_ta{ + border: 1px solid @CN_INPUT_BORDER_COL; + background-color: @CN_INPUT_BG; + color: @CN_INPUT_FG; + font-family: apl, monospace; +} \ No newline at end of file diff --git a/style/less/colour/preferences.less b/style/less/colour/preferences.less index 619a9fa9..c11739b6 100644 --- a/style/less/colour/preferences.less +++ b/style/less/colour/preferences.less @@ -162,7 +162,10 @@ a { // PREFS_MENU #pmenu{ #pmenu_ta{ - font-family: monospace; + border: 1px solid @CN_INPUT_BORDER_COL; + background-color: @CN_INPUT_BG; + color: @CN_INPUT_FG; + font-family: apl, monospace; } } @media print { diff --git a/style/light-theme.css b/style/light-theme.css index 9e94b398..d8bf852c 100644 --- a/style/light-theme.css +++ b/style/light-theme.css @@ -1,3 +1,27 @@ +.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; +} #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,30 +96,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; @@ -231,39 +231,6 @@ background-color: black; border: 1px dashed #7688d9; } -#lb { - background-color: #edeff5; - border-bottom: 1px #9eabe4 solid; -} -#lb #lb_inner { - background: #edeff5; -} -#lb b { - color: #4c4a4a; -} -#lb b:hover { - color: #7688d9; -} -#lb b:active, -#lb b.pressed { - background-color: rgba(0, 0, 0, 0.2); - color: white; -} -#lb .lb_placeholder { - background: rgba(0, 0, 0, 0.2); -} -#lb .ui-sortable-helper { - color: black; -} -#lb_tip { - background: #edeff5; - border: 1px solid #d7d7d3; - color: black; -} -#lb_tip hr { - border-top: 1px solid #d7d7d3; - border-bottom: 1px solid white; -} label { color: #4c4a4a; font-family: Roboto; @@ -322,6 +289,39 @@ select { border: 1px solid rgba(169, 169, 169, 0.3); color: #4e65ce; } +#lb { + background-color: #edeff5; + border-bottom: 1px #9eabe4 solid; +} +#lb #lb_inner { + background: #edeff5; +} +#lb b { + color: #4c4a4a; +} +#lb b:hover { + color: #7688d9; +} +#lb b:active, +#lb b.pressed { + background-color: rgba(0, 0, 0, 0.2); + color: white; +} +#lb .lb_placeholder { + background: rgba(0, 0, 0, 0.2); +} +#lb .ui-sortable-helper { + color: black; +} +#lb_tip { + background: #edeff5; + border: 1px solid #d7d7d3; + color: black; +} +#lb_tip hr { + border-top: 1px solid #d7d7d3; + border-bottom: 1px solid white; +} /*menu (see ../src/menu.js for the DOM structure)*/ .menu { background-color: #edeff5; @@ -537,7 +537,10 @@ a:hover { color: #9eabe4; } #pmenu #pmenu_ta { - font-family: monospace; + border: 1px solid rgba(169, 169, 169, 0.3); + background-color: #dde0ec; + color: black; + font-family: apl, monospace; } @media print { .lyt_k, @@ -645,6 +648,16 @@ body { #status_body { background-color: #edeff5; } +#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; } @@ -656,13 +669,11 @@ body { .tooltip .tooltiptext::after { border-color: transparent #dde0ec transparent transparent; } -#vt_bln { - border: solid black 1px; - background-color: black; - color: white; -} -#vt_tri { - border-color: black; +#abt_ta { + border: 1px solid rgba(169, 169, 169, 0.3); + background-color: #dde0ec; + color: black; + font-family: apl, monospace; } .toolbar { background-color: white; @@ -691,6 +702,14 @@ body { border: 0 solid #dde0ec; border-right-width: 1px; } +#vt_bln { + border: solid black 1px; + background-color: black; + color: white; +} +#vt_tri { + border-color: black; +} #wse { background-color: white; color: black; @@ -707,13 +726,3 @@ body { background-color: rgba(118, 136, 217, 0.5); outline: rgba(118, 136, 217, 0.5); } -#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); -} diff --git a/style/ride-base.css b/style/ride-base.css index 9dc70751..41ba739e 100644 --- a/style/ride-base.css +++ b/style/ride-base.css @@ -1,37 +1,3 @@ -.ctl_listview { - width: 100%; - font-family: apl; - line-height: 1.3em; - overflow-x: auto; - overflow-y: auto; -} -.ctl_listview tr { - cursor: pointer; -} -.ctl_listview td { - padding: 3px 10px; -} -#threads > table, -#sistack > table { - width: 100%; -} -#debug { - height: inherit; -} -#debug > div { - height: 50%; - display: block; -} -#debug .ctl_listview_header { - height: 14px; - padding: 5px; -} -#threads { - height: calc(100% - 60px); -} -#sistack { - height: calc(100% - 24px); -} #cn { position: absolute; z-index: 2; @@ -186,6 +152,299 @@ #cn_env { width: 100%; } +.ctl_listview { + width: 100%; + font-family: apl; + line-height: 1.3em; + overflow-x: auto; + overflow-y: auto; +} +.ctl_listview tr { + cursor: pointer; +} +.ctl_listview td { + padding: 3px 10px; +} +#threads > table, +#sistack > table { + width: 100%; +} +#debug { + height: inherit; +} +#debug > div { + height: 50%; + display: block; +} +#debug .ctl_listview_header { + height: 14px; + padding: 5px; +} +#threads { + height: calc(100% - 60px); +} +#sistack { + height: calc(100% - 24px); +} +/*various dialogs*/ +#dlg_modal_overlay { + width: 100%; + height: 100%; + position: absolute; +} +.dlg { + position: absolute; +} +.dlg_title { + cursor: default; + text-align: center; + padding-top: 0.5ex; + font-size: large; + cursor: move; +} +#prf_dlg .dlg_title { + text-transform: uppercase; +} +.dlg_close { + width: 2ex; + height: 2ex; + position: relative; + display: block; + text-align: center; + text-decoration: none; + cursor: pointer; + top: -0.5ex; + float: right; +} +.dlg_btns { + padding: 14px; + text-align: center; + position: absolute; + bottom: 0; + left: 0; + right: 0; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +} +.dlg_btns button { + min-width: 75px; + margin: 0 8px; + padding: 8px; +} +.dlg_btns button.task { + display: block; + margin: 10px 5px; + width: 100%; + width: -moz-available; + /* WebKit-based browsers will ignore this. */ + width: -webkit-fill-available; + /* Mozilla-based browsers will ignore this. */ + width: fill-available; +} +.dlg_btns button.task:hover, +.dlg_btns button.task:focus { + border: 1px solid; +} +.dlg_btns button.task .task_detail { + font-size: smaller; +} +.dlg_btns button.task .btn_icon { + float: left; + font-size: 20px; + padding: 0 10px; +} +.dlg_icon_warn { + background-image: url(img/dlg_warn.png); +} +.dlg_icon_info { + background-image: url(img/dlg_info.png); +} +.dlg_icon_error { + background-image: url(img/dlg_error.png); +} +.dlg_icon_query { + background-image: url(img/dlg_query.png); +} +/*generic dialog for processing OptionsDialog,StringDialog,TaskDialog*/ +#gd.dlg { + position: absolute; +} +#gd.dlg.floating { + position: static; +} +#gd_btns { + position: static; + padding: 8px 0; +} +#gd_icon { + margin: 1em 1em 2em; + width: 128px; + height: 128px; + float: left; +} +#gd_content { + padding: 1em; + line-height: 1.5; + /* margin-bottom: 60px; */ +} +#gd_content input { + width: 100%; +} +#gd_footer { + min-height: 40px; + padding: 8px; +} +#gd_footer label { + vertical-align: text-top; +} +#gd_footer_btns { + float: right; +} +#gd_footer_btns button { + min-width: 75px; + margin: 0 8px; + padding: 8px; +} +.ui-dialog .ui-dialog-content.task_dlg { + padding: 8px; +} +.ui-dialog .ui-dialog-content.task_dlg p { + text-align: left; +} +.ui-dialog .ui-dialog-content.task_dlg .subtext, +.ui-dialog .ui-dialog-content.task_dlg .footer { + font-size: 12px; +} +.ui-dialog .ui-dialog-content.task_dlg .task { + display: block; + width: 100%; + margin-top: 2px; +} +/*About dialog*/ +#abt { + padding: 0; + margin: 0; +} +#abt.floating { + top: 0; + left: 0; + width: 100%; + height: 100%; +} +#abt_logo { + background: 16px center no-repeat url(img/dyalog.png); + height: 80px; + line-height: 20px; + cursor: move; +} +.floating #abt_logo { + cursor: default; +} +#abt_contact { + float: right; + text-align: right; + padding: 12px; + cursor: default; +} +#abt_contact a, +#abt_contact a:visited, +#abt_contact a:active { + text-decoration: none; +} +#abt_ta_wr { + position: absolute; + left: 5px; + right: 5px; + top: 86px; + bottom: 70px; + width: auto; +} +#abt_ta { + font-family: monospace; + font-size: 14px; + white-space: pre; + word-wrap: normal; + overflow-x: scroll; + width: 100%; + height: 100%; + resize: none; +} +@font-face { + font-family: 'apl'; + src: url('./fonts/Apl385.woff') format('woff'), url('./fonts/Apl385.ttf') format('truetype'); +} +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-Thin.ttf') format('truetype'); + font-weight: 100; + font-style: normal; +} +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-ThinItalic.ttf') format('truetype'); + font-weight: 100; + font-style: italic; +} +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-Light.ttf') format('truetype'); + font-weight: 300; + font-style: normal; +} +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-LightItalic.ttf') format('truetype'); + font-weight: 300; + font-style: italic; +} +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-Italic.ttf') format('truetype'); + font-weight: 400; + font-style: italic; +} +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-Medium.ttf') format('truetype'); + font-weight: 500; + font-style: normal; +} +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-MediumItalic.ttf') format('truetype'); + font-weight: 500; + font-style: italic; +} +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-Bold.ttf') format('truetype'); + font-weight: 700; + font-style: normal; +} +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-BoldItalic.ttf') format('truetype'); + font-weight: 700; + font-style: italic; +} +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-Black.ttf') format('truetype'); + font-weight: 900; + font-style: normal; +} +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-BlackItalic.ttf') format('truetype'); + font-weight: 900; + font-style: italic; +} .lm_content { border: none !important; } @@ -257,105 +516,29 @@ tt { } 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; -} -@font-face { - font-family: 'apl'; - src: url('./fonts/Apl385.woff') format('woff'), url('./fonts/Apl385.ttf') format('truetype'); -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-Thin.ttf') format('truetype'); - font-weight: 100; - font-style: normal; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-ThinItalic.ttf') format('truetype'); - font-weight: 100; - font-style: italic; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-Light.ttf') format('truetype'); - font-weight: 300; - font-style: normal; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-LightItalic.ttf') format('truetype'); - font-weight: 300; - font-style: italic; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-Regular.ttf') format('truetype'); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-Italic.ttf') format('truetype'); - font-weight: 400; - font-style: italic; +select, +a { + outline: 0; } -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-Medium.ttf') format('truetype'); +select { + overflow: hidden; + padding: 2px 34px 2px 4px; + text-overflow: ellipsis; + white-space: nowrap; + min-height: 30px; + box-shadow: none; font-weight: 500; - font-style: normal; + border-radius: 2px; } -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-MediumItalic.ttf') format('truetype'); +select option { font-weight: 500; - font-style: italic; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-Bold.ttf') format('truetype'); - font-weight: 700; - font-style: normal; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-BoldItalic.ttf') format('truetype'); - font-weight: 700; - font-style: italic; } -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-Black.ttf') format('truetype'); - font-weight: 900; - font-style: normal; +select:focus { + outline: dotted black 1px; } -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-BlackItalic.ttf') format('truetype'); - font-weight: 900; - font-style: italic; +textarea { + border: none; + padding: 0; } /*jQuery UI - v1.10.4 - 2014-01-17, heavily customized*/ .ui-helper-hidden { @@ -815,63 +998,6 @@ body .ui-tooltip { .ui-icon-closethick { background: no-repeat center center url(img/close.png); } -/*menu (see ../src/menu.js for the DOM structure)*/ -.menu { - height: 22px; - line-height: 21px; - cursor: default; - padding: 0; - margin: 0; - font-family: Roboto, sans-serif; - user-select: none; -} -.menu a { - text-decoration: none; - cursor: default; -} -.menu .m-opener.m-top { - text-align: center; - border: solid transparent 1px; - padding: 0 5px; - margin: 0; -} -.menu .m-open > .m-box { - display: block; -} -.menu > .m-sub { - float: left; -} -.menu .m-box { - display: none; - border-style: solid; - border-width: 1px; - position: absolute; - padding: 0; - margin: 0; - min-width: 125px; - white-space: nowrap; -} -.menu .m-box .m-box { - margin-left: 100%; - margin-top: -21px; -} -.menu .m-box a { - display: block; - height: 21px; - line-height: 21px; - text-align: left; - padding: 1px 21px; - overflow: hidden; - text-overflow: ellipsis; -} -.menu .m-box a .m-shc { - font-size: small; - float: right; - margin-left: 20px; -} -.menu hr { - margin: 3px 0 5px 0; -} #lb { font-family: apl, monospace; font-size: 18px; @@ -915,188 +1041,62 @@ body .ui-tooltip { text-align: center; text-transform: uppercase; } -/*various dialogs*/ -#dlg_modal_overlay { - width: 100%; - height: 100%; - position: absolute; -} -.dlg { - position: absolute; -} -.dlg_title { +/*menu (see ../src/menu.js for the DOM structure)*/ +.menu { + height: 22px; + line-height: 21px; cursor: default; - text-align: center; - padding-top: 0.5ex; - font-size: large; - cursor: move; -} -#prf_dlg .dlg_title { - text-transform: uppercase; + padding: 0; + margin: 0; + font-family: Roboto, sans-serif; + user-select: none; } -.dlg_close { - width: 2ex; - height: 2ex; - position: relative; - display: block; - text-align: center; +.menu a { text-decoration: none; - cursor: pointer; - top: -0.5ex; - float: right; + cursor: default; } -.dlg_btns { - padding: 14px; +.menu .m-opener.m-top { text-align: center; - position: absolute; - bottom: 0; - left: 0; - right: 0; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; -} -.dlg_btns button { - min-width: 75px; - margin: 0 8px; - padding: 8px; + border: solid transparent 1px; + padding: 0 5px; + margin: 0; } -.dlg_btns button.task { +.menu .m-open > .m-box { display: block; - margin: 10px 5px; - width: 100%; - width: -moz-available; - /* WebKit-based browsers will ignore this. */ - width: -webkit-fill-available; - /* Mozilla-based browsers will ignore this. */ - width: fill-available; -} -.dlg_btns button.task:hover, -.dlg_btns button.task:focus { - border: 1px solid; -} -.dlg_btns button.task .task_detail { - font-size: smaller; } -.dlg_btns button.task .btn_icon { +.menu > .m-sub { float: left; - font-size: 20px; - padding: 0 10px; -} -.dlg_icon_warn { - background-image: url(img/dlg_warn.png); -} -.dlg_icon_info { - background-image: url(img/dlg_info.png); -} -.dlg_icon_error { - background-image: url(img/dlg_error.png); -} -.dlg_icon_query { - background-image: url(img/dlg_query.png); } -/*generic dialog for processing OptionsDialog,StringDialog,TaskDialog*/ -#gd.dlg { +.menu .m-box { + display: none; + border-style: solid; + border-width: 1px; position: absolute; -} -#gd.dlg.floating { - position: static; -} -#gd_btns { - position: static; - padding: 8px 0; -} -#gd_icon { - margin: 1em 1em 2em; - width: 128px; - height: 128px; - float: left; -} -#gd_content { - padding: 1em; - line-height: 1.5; - /* margin-bottom: 60px; */ -} -#gd_content input { - width: 100%; -} -#gd_footer { - min-height: 40px; - padding: 8px; -} -#gd_footer label { - vertical-align: text-top; -} -#gd_footer_btns { - float: right; -} -#gd_footer_btns button { - min-width: 75px; - margin: 0 8px; - padding: 8px; -} -.ui-dialog .ui-dialog-content.task_dlg { - padding: 8px; -} -.ui-dialog .ui-dialog-content.task_dlg p { - text-align: left; -} -.ui-dialog .ui-dialog-content.task_dlg .subtext, -.ui-dialog .ui-dialog-content.task_dlg .footer { - font-size: 12px; -} -.ui-dialog .ui-dialog-content.task_dlg .task { - display: block; - width: 100%; - margin-top: 2px; -} -/*About dialog*/ -#abt { padding: 0; - margin: 0; -} -#abt.floating { - top: 0; - left: 0; - width: 100%; - height: 100%; + margin: 0; + min-width: 125px; + white-space: nowrap; } -#abt_logo { - background: 16px center no-repeat url(img/dyalog.png); - height: 80px; - line-height: 20px; - cursor: move; +.menu .m-box .m-box { + margin-left: 100%; + margin-top: -21px; } -.floating #abt_logo { - cursor: default; +.menu .m-box a { + display: block; + height: 21px; + line-height: 21px; + text-align: left; + padding: 1px 21px; + overflow: hidden; + text-overflow: ellipsis; } -#abt_contact { +.menu .m-box a .m-shc { + font-size: small; float: right; - text-align: right; - padding: 12px; - cursor: default; -} -#abt_contact a, -#abt_contact a:visited, -#abt_contact a:active { - text-decoration: none; -} -#abt_ta_wr { - position: absolute; - left: 5px; - right: 5px; - top: 86px; - bottom: 70px; - width: auto; + margin-left: 20px; } -#abt_ta { - font-family: monospace; - font-size: 14px; - white-space: pre; - word-wrap: normal; - overflow-x: scroll; - width: 100%; - height: 100%; - resize: none; +.menu hr { + margin: 3px 0 5px 0; } .monaco-editor .no-icons .icon { display: none!important; @@ -1869,27 +1869,6 @@ body.floating-window { display: none; } } -/*Prefs>Code*/ -#code { - overflow: auto; - position: absolute; - top: 54px; - bottom: 70px; - left: 12px; - right: 3px; -} -#code p { - margin: 5px; -} -#code > hr { - margin-top: 5px !important; -} -.web #code { - top: 75px; -} -#code_aim { - margin-left: 48px; -} #col_top { text-align: left; } @@ -1941,223 +1920,32 @@ body.floating-window { } #col_B + u { font-weight: bold; - text-decoration: none; -} -#col_I + u { - font-style: italic; - text-decoration: none; -} -#col.frz #col_ren { - display: none; -} -#col.frz #col_del { - display: none; -} -#col.frz #col_chrome_fld { - display: none; -} -#col.frz #col_settings { - display: none; -} -#col.frz #col_me { - right: 8px; -} -#col.renaming #col_scm { - display: none; -} -#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>Shortcuts*/ -#shc { - position: absolute; - left: 0; - right: 0; - top: 54px; - bottom: 70px; - overflow: auto; - text-align: left; - padding: 8px 0 0 8px; -} -#shc td { - text-align: left; -} -#shc td .shc_editor { - height: 25px; - width: calc(100% - 30px); - display: inline-block; - vertical-align: middle; -} -#shc td .shc_editor .editor-widget.suggest-widget { - width: 0; -} -#shc td > * { - vertical-align: middle; -} -#shc td:nth-child(3) { - width: 50%; -} -.web #shc { - top: 70px; -} -#shc_rst_all { - float: right; - margin-right: 8px; -} -.shc_code { - padding: 2px 16px 2px 8px; -} -#shc_tbl_wr { - position: absolute; - top: 50px; - left: 3px; - right: 3px; - bottom: 0; - overflow: auto; -} -#shc_tbl_wr table { - width: 100%; - cursor: default; - padding-left: 2px; -} -#shc_tbl_wr tr { - page-break-inside: avoid; -} -#shc_tbl_wr tr:hover { - box-shadow: none!important; -} -#shc_tbl_wr tr:hover .shc_add { - visibility: visible; -} -#shc_tbl_wr tr:hover .shc_rst { - visibility: visible; -} -#shc_sc_clr { - width: 24px; - margin-left: -20px; - margin-right: 12px; - text-decoration: none; -} -#shc_no_res { - font-style: italic; - padding: 20px; -} -.shc_key { - border-radius: 2px; - margin: 8px 2px; - line-height: 24px; - white-space: nowrap; -} -.shc_text { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-right-width: 0; - padding: 0 2px; -} -.shc_del { - text-decoration: none; - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} -.shc_add { - visibility: hidden; -} -.shc_rst { - visibility: hidden; -} -.shc_val { - width: 90%; -} -@media print { - #shc, - #shc_tbl_wr { - position: initial; - overflow: unset; - } - #shc_ctrls { - display: none; - } - #shc_tbl_wr tr { - line-height: 25px; - } - #shc_tbl_wr .shc_add, - #shc_tbl_wr td:nth-child(4) { - display: none; - } -} -/*Prefs>Title*/ -#title { - text-align: left; - padding: 8px; + text-decoration: none; } -#title pre { - overflow: auto; - position: absolute; - left: 8px; - right: 8px; - top: 125px; - bottom: 70px; +#col_I + u { + font-style: italic; + text-decoration: none; } -#title table { - table-layout: fixed; - width: 100%; - margin-top: 10px; +#col.frz #col_ren { + display: none; } -#title table tr { - height: 1.3em; +#col.frz #col_del { + display: none; } -#title table td { - vertical-align: middle; +#col.frz #col_chrome_fld { + display: none; } -#title table td:nth-child(1) { - width: 30%; +#col.frz #col_settings { + display: none; } -#title_inp { - width: calc(100% - 160px); - margin-left: 10px; - padding: 5px 0; +#col.frz #col_me { + right: 8px; } -#title_rst { - float: right; +#col.renaming #col_scm { + display: none; } -/*Prefs>Code*/ -#wins .row { - padding: 3px 5px; +#col.renaming #col_new_name { + display: inline; } /*Prefs>Layout*/ /*The arrangement is: +-------+ */ @@ -2359,3 +2147,215 @@ 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>Shortcuts*/ +#shc { + position: absolute; + left: 0; + right: 0; + top: 54px; + bottom: 70px; + overflow: auto; + text-align: left; + padding: 8px 0 0 8px; +} +#shc td { + text-align: left; +} +#shc td .shc_editor { + height: 25px; + width: calc(100% - 30px); + display: inline-block; + vertical-align: middle; +} +#shc td .shc_editor .editor-widget.suggest-widget { + width: 0; +} +#shc td > * { + vertical-align: middle; +} +#shc td:nth-child(3) { + width: 50%; +} +.web #shc { + top: 70px; +} +#shc_rst_all { + float: right; + margin-right: 8px; +} +.shc_code { + padding: 2px 16px 2px 8px; +} +#shc_tbl_wr { + position: absolute; + top: 50px; + left: 3px; + right: 3px; + bottom: 0; + overflow: auto; +} +#shc_tbl_wr table { + width: 100%; + cursor: default; + padding-left: 2px; +} +#shc_tbl_wr tr { + page-break-inside: avoid; +} +#shc_tbl_wr tr:hover { + box-shadow: none!important; +} +#shc_tbl_wr tr:hover .shc_add { + visibility: visible; +} +#shc_tbl_wr tr:hover .shc_rst { + visibility: visible; +} +#shc_sc_clr { + width: 24px; + margin-left: -20px; + margin-right: 12px; + text-decoration: none; +} +#shc_no_res { + font-style: italic; + padding: 20px; +} +.shc_key { + border-radius: 2px; + margin: 8px 2px; + line-height: 24px; + white-space: nowrap; +} +.shc_text { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right-width: 0; + padding: 0 2px; +} +.shc_del { + text-decoration: none; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.shc_add { + visibility: hidden; +} +.shc_rst { + visibility: hidden; +} +.shc_val { + width: 90%; +} +@media print { + #shc, + #shc_tbl_wr { + position: initial; + overflow: unset; + } + #shc_ctrls { + display: none; + } + #shc_tbl_wr tr { + line-height: 25px; + } + #shc_tbl_wr .shc_add, + #shc_tbl_wr td:nth-child(4) { + display: 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>Title*/ +#title { + text-align: left; + padding: 8px; +} +#title pre { + overflow: auto; + position: absolute; + left: 8px; + right: 8px; + top: 125px; + bottom: 70px; +} +#title table { + table-layout: fixed; + width: 100%; + margin-top: 10px; +} +#title table tr { + height: 1.3em; +} +#title table td { + vertical-align: middle; +} +#title table td:nth-child(1) { + width: 30%; +} +#title_inp { + width: calc(100% - 160px); + margin-left: 10px; + padding: 5px 0; +} +#title_rst { + float: right; +} +/*Prefs>Code*/ +#wins .row { + padding: 3px 5px; +} +/*Prefs>Code*/ +#code { + overflow: auto; + position: absolute; + top: 54px; + bottom: 70px; + left: 12px; + right: 3px; +} +#code p { + margin: 5px; +} +#code > hr { + margin-top: 5px !important; +} +.web #code { + top: 75px; +} +#code_aim { + margin-left: 48px; +}