From 98106375fb5852c731c40ce053a127e6181582e2 Mon Sep 17 00:00:00 2001 From: Mark Simon Date: Sun, 25 Sep 2022 13:14:44 +1000 Subject: [PATCH] Version 0.6.2 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Implement ± Default Hosts - Allow alternative installation directory (still working on it) - Improve Help Instructions - Added edit status to tabs (need to implement undo) - First steps in theming (not ready yet) --- compile.bat | 6 +- data/mamp-default.vhost | 2 + data/mamp.vhost | 3 - data/xampp-default.vhost | 10 ++ data/xampp.vhost | 11 --- index.html | 76 +++++++++------ package.json | 5 +- scripts/edit-virtual-hosts.js | 149 ++++++++++++++++++---------- styles/main.css | 178 ++++++++++++++++++++++++---------- 9 files changed, 289 insertions(+), 151 deletions(-) create mode 100644 data/mamp-default.vhost create mode 100644 data/xampp-default.vhost diff --git a/compile.bat b/compile.bat index a9f1b4d..06d7deb 100644 --- a/compile.bat +++ b/compile.bat @@ -1,5 +1,5 @@ -# electron-packager . --overwrite --platform=win32 --arch=x64 --prune=true --extra-resource="resources/fakemail" --out="..\release-builds" +rem electron-packager . --overwrite --platform=win32 --arch=x64 --prune=true --extra-resource="resources/fakemail" --out="..\release-builds" npm run dist -# cd "../electron-builder/edit-virtual-hosts/"; -# mv "mac" "Edit Virtual Hosts macOS"; +rem cd "../electron-builder/edit-virtual-hosts/"; +rem mv "mac" "Edit Virtual Hosts macOS"; diff --git a/data/mamp-default.vhost b/data/mamp-default.vhost new file mode 100644 index 0000000..b6b583e --- /dev/null +++ b/data/mamp-default.vhost @@ -0,0 +1,2 @@ +# MAMP !! Do Not Repeat !! + NameVirtualHost *:80 diff --git a/data/mamp.vhost b/data/mamp.vhost index f4048fc..9ecd8a4 100644 --- a/data/mamp.vhost +++ b/data/mamp.vhost @@ -1,6 +1,3 @@ -# MAMP !! Do Not Repeat !! - NameVirtualHost *:80 - # MAMP [project]: [domain] diff --git a/data/xampp-default.vhost b/data/xampp-default.vhost new file mode 100644 index 0000000..d4c2575 --- /dev/null +++ b/data/xampp-default.vhost @@ -0,0 +1,10 @@ +# XAMPP Required Default !! Do Not Repeat !! + + ServerName localhost + DocumentRoot "[htdocs]" + + Options Indexes FollowSymLinks Includes execCGI + AllowOverride All + Require all granted + + diff --git a/data/xampp.vhost b/data/xampp.vhost index f19803b..5fc7444 100644 --- a/data/xampp.vhost +++ b/data/xampp.vhost @@ -1,14 +1,3 @@ -# XAMPP Required Default !! Do Not Repeat !! - - ServerName localhost - DocumentRoot "[htdocs]" - - Options Indexes FollowSymLinks Includes execCGI - AllowOverride All - Require all granted - - - # XAMPP [project]: [domain] ServerName [domain] diff --git a/index.html b/index.html index cfe6b1d..f175af5 100644 --- a/index.html +++ b/index.html @@ -29,9 +29,14 @@ +
+ + + +
@@ -53,17 +60,19 @@

Hosts File (etc/host)

Apache Configuration File (httpd.conf)

-

Make sure that you have selected the server (XAMPP or MAMP) from the menu.

- -

Find httpd-vhosts.conf and remove the comment(#) at the beginning of the Include (if any). - This gives:

- 
# Virtual hosts
-Include etc/extra/httpd-vhosts.conf
-
-

(MacOS:) Find User/Group and change the User and Group to your own. Something like:

- 
User fred
-Group admin
-
+
    +
  1. If you have installed in a non-standard location, enter it in the Server Root
    2. +
  2. Make sure that you have selected the server (XAMPP or MAMP) from the menu.
    3. +
  3. Find httpd-vhosts.conf and remove the comment(#) at the beginning of the Include (if any). This gives: + 
    # Virtual hosts
    + 
    Include etc/extra/httpd-vhosts.conf
    +
    4. +
  4. + (MacOS:) Find User/Group and change the User and Group to your own. Something like: + 
    User fred
    + 
    Group admin
    +
    5. +
@@ -72,9 +81,12 @@

Apache Configuration File (httpd.conf)

Virtual Hosts File (httpd-vhosts.conf)

-

Make sure that you have selected the server (XAMPP or MAMP) from the menu.

-

First, use the Generator tab and fill in the details.

-

Then copy the result and paste it below.

+
    +
  1. If you have installed in a non-standard location, enter it in the Server Root
    2. +
  2. Make sure that you have selected the server (XAMPP or MAMP) from the menu.
    3. +
  3. First, use the Generator tab and fill in the details.
    4. +
  4. Then copy the result and paste it below.
    5. +
@@ -83,10 +95,13 @@

Virtual Hosts File (httpd-vhosts.conf)

Hosts Generator

-

Make sure that you have selected the server (XAMPP or MAMP) from the menu.

+
    +
  1. Make sure that you have selected the server (XAMPP or MAMP) from the menu.
    2. +
  2. Fill in the details blow and click Generate
    3. +
-

+

@@ -97,15 +112,18 @@

Hosts Generator

PHP Configuration File (php.ini)

-

Make sure that you have selected the server (XAMPP or MAMP) from the menu.

-

Find sendmail_path and remove the comment(;) at the beginning of the line(if any).
- Select the part after sendmail_path=
- Locate your (fake) sendmail program and add the path at the end inside "quotes".
- This gives something like: sendmail_path = "…/…/sendmail". Paste the resulting path.

-

While you’re at it, check extension=gd and remove the comment(;) at the beginning of the line(if any).
- This will enable you to use image functions in PHP. -

- +
    +
  1. If you have installed in a non-standard location, enter it in the Server Root
    2. +
  2. Make sure that you have selected the server (XAMPP or MAMP) from the menu.
    3. +
  3. Set the sendmail path: +
      +
    • Find sendmail_path and remove the comment(;) at the beginning of the line(if any).
      • +
    • Select the part after sendmail_path=
      • +
    • Locate your (fake) sendmail program and add the path at the end inside "quotes".
      • +
    + This gives something like: sendmail_path = "…/…/sendmail". Paste the resulting path.
    4. +
  4. While you’re at it, check extension=gd and remove the comment(;) at the beginning of the line(if any). This will enable you to use image functions in PHP.
    5. +
diff --git a/package.json b/package.json index dcb74a6..e540f83 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "edit-virtual-hosts", - "version": "0.6.0", + "version": "0.6.2", "description": "Edit Virtual Hosts", "main": "main.js", "repository": "https://github.com/manngo/edit-virtual-hosts", @@ -23,7 +23,8 @@ "category": "public.app-category.developer-tools", "target": [ "zip", - "dmg" + "dmg", + "dir" ], "icon": "images/edit-virtual-hosts.icns" }, diff --git a/scripts/edit-virtual-hosts.js b/scripts/edit-virtual-hosts.js index dc9c405..e5e612d 100644 --- a/scripts/edit-virtual-hosts.js +++ b/scripts/edit-virtual-hosts.js @@ -39,41 +39,46 @@ darwin: '/etc/hosts', win32: 'C:\\Windows\\System32\\drivers\\etc\\hosts' }; - var servers={ + var serverRoot = undefined; + var servers = { xampp: { darwin: { - conf: '/Applications/XAMPP/etc/httpd.conf', - vhosts: '/Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf', - htdocs: '/Applications/XAMPP/xamppfiles/htdocs', - mysql: '/Applications/XAMPP/xamppfiles/var/mysql', - phpini: '/Applications/XAMPP/xamppfiles/etc/php.ini', - phpmyadmin: '/Applications/XAMPP/xamppfiles/phpmyadmin/', + root: '/Applications/XAMPP', + conf: '/etc/httpd.conf', + vhosts: '/xamppfiles/etc/extra/httpd-vhosts.conf', + htdocs: '/xamppfiles/htdocs', + mysql: '/xamppfiles/var/mysql', + phpini: '/xamppfiles/etc/php.ini', + phpmyadmin: '/xamppfiles/phpmyadmin/', }, win32: { - conf: 'C:/xampp/apache/conf/httpd.conf', - vhosts: 'C:/xampp/apache/conf/extra/httpd-vhosts.conf', - htdocs: 'C:/xampp/htdocs/', - mysql: 'C:/xampp/mysql/data', - phpini: 'C:/xampp/php/php.ini', - phpmyadmin: 'C:/xampp/phpMyAdmin/', + root: 'C:/xampp', + conf: '/apache/conf/httpd.conf', + vhosts: '/apache/conf/extra/httpd-vhosts.conf', + htdocs: '/htdocs/', + mysql: '/mysql/data', + phpini: '/php/php.ini', + phpmyadmin: '/phpMyAdmin/', }, vhost: '' }, mamp: { darwin: { - conf: '/Applications/MAMP/conf/apache/httpd.conf', - vhosts: '/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf', - htdocs: '/Applications/XAMPP/xamppfiles/htdocs', - mysql: '/Applications/MAMP/db/mysql57', - phpini: '/Applications/MAMP/bin/php/php{version}/conf/php.ini', - phpmyadmin: '/Applications/MAMP/bin/phpmyadmin/' + root: '/Applications/MAMP', + conf: '/conf/apache/httpd.conf', + vhosts: '/conf/apache/extra/httpd-vhosts.conf', + htdocs: '/htdocs', + mysql: '/db/mysql57', + phpini: '/bin/php/php{version}/conf/php.ini', + phpmyadmin: '/bin/phpmyadmin/' }, win32: { - conf: 'C:/MAMP/conf/apache/httpd.conf', - vhosts: 'C:/MAMP/bin/apache/conf/extra/httpd-vhosts.conf', - htdocs: 'C:/MAMP/htdocs/', - mysql: 'C:/MAMP/db/mysql', - phpmyadmin: 'C:/MAMP/bin/phpMyAdmin/' + root: 'C:/MAMP', + conf: '/conf/apache/httpd.conf', + vhosts: '/bin/apache/conf/extra/httpd-vhosts.conf', + htdocs: '/htdocs/', + mysql: '/db/mysql', + phpmyadmin: '/bin/phpMyAdmin/' }, vhost: '', }, @@ -100,15 +105,17 @@ */ }; - servers.xampp.vhost=fs.readFileSync(path.join(__dirname, '../data/xampp.vhost')).toString().normaliseBR(os.EOL); - servers.mamp.vhost=fs.readFileSync(path.join(__dirname, '../data/mamp.vhost')).toString().normaliseBR(os.EOL); + servers.xampp.vhost = fs.readFileSync(path.join(__dirname, '../data/xampp.vhost')).toString().normaliseBR(os.EOL); + servers.xampp.vhostdefault = fs.readFileSync(path.join(__dirname, '../data/xampp-default.vhost')).toString().normaliseBR(os.EOL); + servers.mamp.vhost = fs.readFileSync(path.join(__dirname, '../data/mamp.vhost')).toString().normaliseBR(os.EOL); + servers.mamp.vhostdefault = fs.readFileSync(path.join(__dirname, '../data/mamp-default.vhost')).toString().normaliseBR(os.EOL); // module.exports={os,platform,hosts,servers,setLineNumbers,server,test}; var customstyle = document.createElement('style'); window.document.head.insertAdjacentElement('beforeend',customstyle); if(platform=='darwin') { - customstyle.sheet.insertRule('.macos { display: block; }'); + customstyle.sheet.insertRule('li.macos { display: list-item; }'); } // Main Process @@ -136,13 +143,49 @@ this.removeAttribute('size',this.options.length); }; + controls.elements['server-path'].onclick=function(event) { + event.preventDefault(); + ipcRenderer.send('open-path',{ + title: 'Select Server Path', + defaultPath: localStorage.getItem('serverPath') || '/', + },'server-path'); + }; + + controls.elements['server-root'].onkeyup = function(event) { + event.preventDefault(); + controls.elements['server'].value = ''; + // serverRoot = event.target.value; + }; + + ipcRenderer.on('server-path',(event,result)=>{ + if(result.canceled) return; + var path = result.filePaths[0].toString(); + controls.elements['server-root'].value = path; + localStorage.setItem('serverPath',path); + controls.elements['server'].value = ''; + }); + + controls.elements['server'].addEventListener('change',function(event) { server=this.value; - if(server) { - tabs['httpd-conf'].path=servers[server][platform]['conf']; + if(server) doit(); + else { + forms['php-ini'].elements['content'].value=''; + tabs['php-ini'].path = ''; + tabMessage('php-ini','',''); + forms['httpd-conf'].elements['content'].value=''; + tabs['httpd-conf'].path = ''; + tabMessage('httpd-conf','',''); + forms['virtual-hosts'].elements['content'].value=''; + tabs['virtual-hosts'].path = ''; + tabMessage('virtual-hosts','',''); + } + function doit() { + serverRoot = controls.elements['server-root'].value || servers[server][platform]['root']; + tabs['httpd-conf'].path = serverRoot + servers[server][platform]['conf']; load('httpd-conf') .then(data=>{ - var phpini=servers[server][platform]['phpini']; + var phpini = serverRoot+servers[server][platform]['phpini']; var pattern=/php(\d\.\d+\.\d+)/; var version=data.match(pattern); if(version && phpini.match('{version}')) { @@ -151,13 +194,13 @@ tabs['php-ini'].path=phpini; load('php-ini'); }); - tabs['virtual-hosts'].path=servers[server][platform]['vhosts']; + tabs['virtual-hosts'].path = serverRoot+servers[server][platform]['vhosts']; load('virtual-hosts'); document.querySelectorAll('label.server').forEach(element=>{element.style.display='none';}); document.querySelectorAll(`label.${server}`).forEach(element=>{element.style.display='block';}); } - module.exports.server=server; + // module.exports.server=server; }); // Tab Buttons @@ -165,9 +208,20 @@ buttons={}; Object.defineProperty(buttons,Symbol.iterator,iterableProperties); + tabs={ + 'hosts-file': {title: 'Hosts File', path: hosts[platform], prefix: 'hosts', save: 'Save Hosts File', message: 'Opened', status: ''}, + 'httpd-conf': {title: 'httpd.conf', path: '', prefix: 'httpd', save: 'Save httpd conf', message: 'Open httpd.conf file or Select Server', status: ''}, + 'virtual-hosts': {title: 'vhosts.conf', path: '', prefix: 'vhosts', save: 'Save vhosts conf', message: 'Open vhosts.conf file or Select Server', status: ''}, + 'generator': {title: 'Generator', path: '', message: 'Enter Values to Generate Virtual Host'}, + 'php-ini': {title: 'php.ini', path: '', prefix: 'php-ini', save: 'Save php ini file', message: 'Open php.ini file or Select Server', status: ''}, + 'misc-text': {title: 'Miscellaneous File', path: '', save: 'Save Miscellaneous File', message: 'Open Any File', status: ''}, + 'misc-actions': {title: 'Miscellaneous Actions', path: '', message: 'Miscellenous Actions', status: ''}, + }; + for(let b of document.querySelectorAll('form#controls>div#tabs>button')) { b.onclick=select.bind(b,b); buttons[b.value]=b; + tabs[b.value].button = b; } function select(button,event) { @@ -182,16 +236,6 @@ tabMessage(tab); } - tabs={ - 'hosts-file': {title: 'Hosts File', path: hosts[platform], prefix: 'hosts', save: 'Save Hosts File', message: 'Opened', status: ''}, - 'httpd-conf': {title: 'httpd.conf', path: '', prefix: 'httpd', save: 'Save httpd conf', message: 'Open httpd.conf file or Select Server', status: ''}, - 'virtual-hosts': {title: 'vhosts.conf', path: '', prefix: 'vhosts', save: 'Save vhosts conf', message: 'Open vhosts.conf file or Select Server', status: ''}, - 'generator': {title: 'Generator', path: '', message: 'Enter Values to Generate Virtual Host'}, - 'php-ini': {title: 'php.ini', path: '', prefix: 'php-ini', save: 'Save php ini file', message: 'Open php.ini file or Select Server', status: ''}, - 'misc-text': {title: 'Miscellaneous File', path: '', save: 'Save Miscellaneous File', message: 'Open Any File', status: ''}, - 'misc-actions': {title: 'Miscellaneous Actions', path: '', message: 'Miscellenous Actions', status: ''}, - }; - // Forms for(let f of forms) { @@ -199,6 +243,7 @@ tabs[f.id].content=f.elements['content']; f.elements['content'].onkeydown=handleTab; f.elements['content'].oninput=function(event) { + tabs[tab].button.setAttribute('data-status','edited') tabMessage(tab,'Edited','edited'); }; f.elements['content'].onblur=function(event) { @@ -225,7 +270,7 @@ if(!servers[server]) return; var files=['ib_logfile0','ib_logfile1','mysql-bin.index']; files.forEach(file=>{ - var filepath=`${servers[server][platform].mysql}/${file}`; + var filepath=`${serverRoot}${servers[server][platform].mysql}/${file}`; if(fs.existsSync(filepath)); fs.unlink(filepath, (error) => { if (error) { @@ -239,16 +284,16 @@ miscActions.elements['phpmyadmin-css'].onclick=function(event) { if(!servers[server]) return; switch(platform) { - case 'darwin': // tabs['misc-text'].path=`${servers[server][platform]['phpmyadmin']}/themes/pmahomme/css/common.css.php`; break; - case 'win32': // tabs['misc-text'].path=`${servers[server][platform]['phpmyadmin']}/themes/pmahomme/css/theme.css`; break; - default: tabs['misc-text'].path=`${servers[server][platform]['phpmyadmin']}/js/vendor/codemirror/lib/codemirror.css`; + case 'darwin': // tabs['misc-text'].path=`${serverRoot}${servers[server][platform]['phpmyadmin']}/themes/pmahomme/css/common.css.php`; break; + case 'win32': // tabs['misc-text'].path=`${serverRoot}${servers[server][platform]['phpmyadmin']}/themes/pmahomme/css/theme.css`; break; + default: tabs['misc-text'].path=`${serverRoot}${servers[server][platform]['phpmyadmin']}/js/vendor/codemirror/lib/codemirror.css`; } load('misc-text'); buttons['misc-text'].click(); }; miscActions.elements['phpmyadmin-config'].onclick=function(event) { if(!servers[server]) return; - tabs['misc-text'].path=`${servers[server][platform]['phpmyadmin']}/config.inc.php`; + tabs['misc-text'].path=`${serverRoot}${servers[server][platform]['phpmyadmin']}/config.inc.php`; load('misc-text'); buttons['misc-text'].click(); }; @@ -415,6 +460,7 @@ console.log(`Tab: ${t}\nValue: ${value}\nStatus: ${status}`); }); }); }); + tabs[tab].button.removeAttribute('data-status') tabMessage(tab,'Saved','saved'); } } @@ -561,7 +607,7 @@ console.log(more); form.elements['path'].onclick=function(event) { event.preventDefault(); ipcRenderer.send('open-path',{ - title: 'Title', + title: 'Document Root', defaultPath: localStorage.getItem('defaultPath'), },'generator-path'); }; @@ -575,13 +621,14 @@ console.log(more); form['generate'].onclick = form['content'].onclick = function doit(event) { event.preventDefault(); if(!server) return; - var vhost=servers[server].vhost; + var vhostdefault = form['vhost-default'].checked ? servers[server].vhostdefault+os.EOL+os.EOL : ''; + var vhost = servers[server].vhost; vhost=vhost.sprintf({ - htdocs: servers[server][platform].htdocs, + htdocs: serverRoot+servers[server][platform].htdocs, project: form.elements.project.value, domain: form.elements.domain.value, root: form.elements.root.value, }); - form['content'].value=vhost; + form['content'].value=vhostdefault+vhost; setLineNumbers('generator'); }; diff --git a/styles/main.css b/styles/main.css index 013c0a2..7a012e3 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,3 +1,61 @@ +/* Theme + ================================================ */ + + body { + --theme-color: #2A5F5B; + --misc-action-button-color: #333; + --misc-action-button-background-color: #f8f8f8; + --misc-action-button-hover-background-color: #eee; + --misc-action-button-border-color: #666; + + --tabs-button-background-color: #ddd; + --tabs-button-border-color: #999; + --tabs-button-text-shadow: 0 1px 0 white; + --tabs-button-selected-background-color: #f8f8f8f8; + --tabs-button-selected-border-color: #f8f8f8f8; + + --tabs-button-status-edited-background-color: #f8f8f8; + --tabs-button-status-edited-border-color: red; + + --misc-select-color: #333; + --misc-select-text-shadow: 0 1px 0 white; + --misc-select-background-color: #f8f8f8; + --misc-select-border-color: #ccc; + --misc-select-option-color: #eee; + + --search-background-color: #f8f8f8; + --search-case-sensitive-label-border-color: #ddd; + --search-case-sensitive-label-background: linear-gradient(to bottom, #f8f8f8, #eee); + --search-case-sensitive-label-box-shadow: inset 1px 1px 1px white, inset -1px -1px 1px #ddd; + --search-case-sensitive-checked-label-color: white; + --search-case-sensitive-checked-label-border-color: #666; + --search-case-sensitive-checked-label-background: linear-gradient(to bottom, #777, #666); + --search-case-sensitive-checked-label-box-shadow: inset 1px 1px 1px #666; + + --footer-background: linear-gradient(to bottom, #f8f8f8, #ccc); + --footer-border-color: #ccc; + --footer-status-edited: red; + --footer-info-text-shadow: 0 1px 0 white; + + --line-numbers-color: white; + --line-numbers-background-color: #2A5F5B; + --line-numbers-border-color: #ccc; + + --generator-button-color: #333; + --generator-button-background-color: #eee; + --generator-button-border-color: #eee; + --generator-button-hover-background-color: #ddd; + + --about-background-color: white; + --about-border-color: var(--theme-color); + --about-box-shadow: 4px 4px 4px #666; + --about-headings-color: var(--theme-color); + --about-anchor-color: var(--theme-color); + + --help-background-color: #f8f8f8; + --help-border-color: #999; + } + /* Core ================================================ */ @@ -53,6 +111,9 @@ form#controls>div#misc { } + form#controls>div#choose-server-root { + margin-top: .25rem; + } div#forms { flex: 1; @@ -117,50 +178,49 @@ display: flex; flex-direction: row; } + form#controls>div#tabs>button { - border: thin solid #999; + border: thin solid var(--tabs-button-border-color); border-style: none solid none none; - background-color: #ddd; + background-color: var(--tabs-button-background-color); + text-shadow: var(--tabs-button-text-shadow); outline: none; font-family: var(--sans-serif); - text-shadow: 0 1px 0 white; font-size: .9rem; padding: .375rem .5rem; } form#controls>div#tabs>button.selected { - background-color: #f8f8f8; - border-bottom: thin solid #f8f8f8; + background-color: var(--tabs-button-selected-background-color); + border-bottom: thin solid var(--tabs-button-selected-border-color); } form#controls>div#tabs>button[data-status="edited"] { - background-color: #f8f8f8; - qbackground-color: red; - border-bottom: medium solid red; + background-color: var(--tabs-button-status-edited-background-color); + border-bottom: medium solid var(--tabs-button-status-edited-border-color); } form#controls>div#misc>select { - background-color: #ddd; + color: var(--misc-select-color); + background-color: var(--misc-select-background-color); + border: thin solid var(--misc-select-border-color); font-size: .9rem; -webkit-appearance: none; appearance: none; - border: thin solid #999; padding: .125rem .25rem; border-radius: 0; outline: none; width: 8em; - color: #333; - text-shadow: 0 1px 0 white; font-family: var(--sans-serif); - text-shadow: 0 1px 0 white; + text-shadow: var(--misc-select-text-shadow); font-size: .9rem; - border: thin solid #ccc; margin: .125rem; - background: #f8f8f8 } + form#controls>div#misc>select>option { - background-color: #eee; + background-color: var(--misc-select-option-color); } + form#qcontrols>div#misc>select:before { content: "*"; } @@ -172,9 +232,8 @@ ================================================ */ form#search { - display: none; display: flex; - background-color: #f8f8f8; + background-color: var(--search-background-color); padding: .25rem .25rem; font-size: .8rem; width: 100%; @@ -192,21 +251,17 @@ display: none; } form#search input[id="search-case-sensitive"]+label { - border: thin solid #ddd; - background: linear-gradient(to bottom, #f8f8f8, #eee); - box-shadow: - inset 1px 1px 1px white, - inset -1px -1px 1px #ddd - ; + border: thin solid var(--search-case-sensitive-label-border-color); + background: var(--search-case-sensitive-label-background); + box-shadow: var(--search-case-sensitive-label-box-shadow); padding: .125em .5em .25em; margin-right: 2em; } form#search input[id="search-case-sensitive"]:checked+label { - color: white; - border: thin solid #666; - background: linear-gradient(to bottom, #777, #666); - box-shadow: - inset 1px 1px 1px #666; + color: var(--search-case-sensitive-checked-label-color); + border: thin solid var(--search-case-sensitive-checked-label-border-color); + background: var(--search-case-sensitive-checked-label-background); + box-shadow: var(--search-case-sensitive-checked-label-box-shadow); } @@ -215,9 +270,9 @@ footer { box-sizing: border-box; - background: linear-gradient(to bottom, #f8f8f8, #ccc); + background: var(--footer-background); padding: 0rem .5rem .25rem 1rem; - border-top: thin solid #ccc; + border-top: thin solid var(--footer-border-color); pointer-events: none; display: flex; flex-direction: column; @@ -235,11 +290,11 @@ padding: .25rem; font-family: var(--sans-serif); font-size: .9rem; - text-shadow: 0 1px 0 white; + text-shadow: var(--footer-info-text-shadow); } footer>div#info>p#message[data-status="edited"] { - color: red; + color: var(--footer-status-edited); } /* Content @@ -286,16 +341,15 @@ ================================================ */ div.line-numbers { + color: var(--line-numbers-color); + background-color: var(--line-numbers-background-color); + border-right: thin solid var(--line-numbers-border-color); box-sizing: border-box; white-space: pre; width: 4em; text-align: right; padding-right: .5rem; - qbackground-color: #eee; overflow: auto; - border-right: thin solid #ccc; - background-color: #2A5F5B; - color: white; } div.line-numbers::-webkit-scrollbar { display: none; @@ -345,18 +399,18 @@ margin-bottom: .25rem; } form#generator button[name="generate"] { - color: #333; + color: var(--generator-button-color); + background-color: var(--generator-button-background-color); + border: thin solid var(--generator-button-border-color); margin-top: .5rem; - border: thin solid #ddd; width: 12rem; border-radius: 4px; padding: .5rem .75rem; - background-color: #eee; font-size: 1rem; outline: none; } form#generator button[name="generate"]:hover { - background-color: #ddd; + background-color: var(--generator-button-hover-background-color); } div#generated { qdisplay: flex; @@ -404,24 +458,24 @@ } div#about { + background-color: var(--about-background-color); + border: thick solid var(--about-border-color); + box-shadow: var(--about-box-shadow); position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 480px; height: 480px; margin: auto; - background-color: white; - border: thick solid #2A5F5B; padding: 1em; - box-shadow: 4px 4px 4px #666; overflow: auto; -moz-tab-size: 4; tab-size: 4; } div#about h2, div#about h3 { - color: #2A5F5B; + color: var(--about-headings-color); font-weight: bold; } div#about a { - color: #2A5F5B; + color: var(--about-anchor-color); text-decoration: none; border-bottom: thin solid transparent; padding-bottom: .125em; @@ -434,12 +488,32 @@ ================================================ */ div.help { - border-bottom: thin solid #999; + background-color: var(--help-background-color); + border-bottom: thin solid var(--help-border-color); padding: 1rem; - background-color: #f8f8f8; font-size: .9rem; } + div.help>ol { + margin: 0; + padding: 0; + qlist-style-position: inside; + } + div.help>ol>li { + margin: 0.5em 1.0em; + } + div.help>ol>li>pre { + margin-top: 0.5rem; + margin-bottom: 0 + } + div.help>ol>li>pre+pre { + margin-top: 0; + } + div.help>ol>li>ul { + list-style: disc; + margin: 0; + } + div.help>p { margin: .25rem 0; } @@ -466,15 +540,15 @@ margin: .25em 0; } form#misc-actions div.etc p>button { + color: var(--misc-action-button-color); + background-color: var(--misc-action-button-background-color); box-sizing: border-box; - background-color: #f8f8f8; - color: #333; - border: thin solid #666; + border: thin solid var(--misc-action-button-border-color); font-size: 1em; padding: .5em 1em; text-align: left; width: 100%; } form#misc-actions div.etc p>button:hover { - background-color: #eee; + background-color: var(--misc-action-button-hover-background-color); }