From 761c5697aa3a33565a53f5a9656069054df39f12 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Tue, 19 Apr 2016 06:18:20 +0100 Subject: Place help dialog in darkend frame. This mimics the look of Google Inbox or Github. The background colour is from Google Inbox, Github uses a slightly lighter colour. --- content_scripts/vimium.css | 32 +++++++++++++------------------- 1 file changed, 13 insertions(+), 19 deletions(-) (limited to 'content_scripts/vimium.css') diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index f902363c..522b9b1c 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -138,25 +138,22 @@ div.vimiumHighlightedFrame { /* Help Dialog CSS */ iframe.vimiumHelpDialogFrame { - background-color: transparent; + background-color: rgba(10,10,10,0.6); padding: 0px; - overflow: hidden; - - display: block; - position: fixed; + top: 0px; + left: 0px; width: 100%; min-width: 400px; height: 100%; - top: 0px; - left: 0px; + display: block; + position: fixed; border: none; - - /* One less than hint markers. */ - z-index: 2147483645; + z-index: 2147483645; /* One less than hint markers. */ } div#vimiumHelpDialog { - border:3px solid red; + border:3px solid; + -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px; opacity:0.92; background-color:#eee; position:fixed; @@ -164,14 +161,11 @@ div#vimiumHelpDialog { border-radius:6px; padding:8px 12px; top:50px; - left:50%; - width:640px; - max-height: calc(100% - 100px - 16px); /* 100% - 2*top - 2*padding for top/bottom */ - /* This needs to be 1/2 width to horizontally center the help dialog */ - margin-left:-320px; - -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px; - overflow-x: auto; - overflow-y: auto; + left: 50%; + max-height: calc(100% - 100px - 12px); + width: calc(840px + 24px + 4px + 12px); + margin-left:calc(0px - 420px - 12px - 2px - 6px); /* Minus half of the width, above. */ + overflow: auto; } div#vimiumHelpDialog a { color:blue; } -- cgit v1.2.3 From cfad0ded611149b2757baa19fbac587a7d4f210d Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Tue, 19 Apr 2016 06:57:45 +0100 Subject: Help dialog: increase size and make white background. --- content_scripts/vimium.css | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) (limited to 'content_scripts/vimium.css') diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 522b9b1c..ac683798 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -154,8 +154,8 @@ iframe.vimiumHelpDialogFrame { div#vimiumHelpDialog { border:3px solid; -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px; - opacity:0.92; - background-color:#eee; + opacity:1.0; + background-color:white; position:fixed; border:2px solid #b3b3b3; border-radius:6px; @@ -194,6 +194,9 @@ div.vimiumColumn table, div.vimiumColumn td, div.vimiumColumn tr { padding:0; ma div.vimiumColumn table { width:100%; table-layout:auto; } div.vimiumColumn td { vertical-align:top; padding:1px; } div#vimiumHelpDialog div.vimiumColumn tr > td:first-of-type { + /* This is the "key" column, e.g. "j", "gg". */ + font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; + font-size:14px; text-align:right; font-weight:bold; color:#2f508e; @@ -204,13 +207,19 @@ div#vimiumHelpDialog div.vimiumColumn tr > td:nth-of-type(3) { width:100%; } div#vimiumHelpDialog div.vimiumDivider { display: block; height:1px; - width:92%; + width:100%; margin:10px auto; background-color:#9a9a9a; } div#vimiumHelpDialog td.vimiumHelpSectionTitle { - font-weight:bold; padding-top:3px; + font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; + font-size:16px; + font-weight:bold; +} +div#vimiumHelpDialog td.vimiumHelpDescription { + font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; + font-size:14px; } div#vimiumHelpDialog div.commandName { font-family:"courier new"; } /* Advanced commands are hidden by default until you show them. */ -- cgit v1.2.3 From 3adae8c9a683955641fe1417c977a3a06356107b Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Tue, 19 Apr 2016 07:22:17 +0100 Subject: Help dialog: put keys in greyed-out box. --- content_scripts/vimium.css | 32 ++++++++++++++++++++++++-------- 1 file changed, 24 insertions(+), 8 deletions(-) (limited to 'content_scripts/vimium.css') diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index ac683798..86411d0a 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -168,7 +168,6 @@ div#vimiumHelpDialog { overflow: auto; } -div#vimiumHelpDialog a { color:blue; } div#vimiumTitle, div#vimiumTitle span, div#vimiumTitle * { font-size:20px; } #vimiumTitle { display: block; @@ -198,10 +197,20 @@ div#vimiumHelpDialog div.vimiumColumn tr > td:first-of-type { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; text-align:right; - font-weight:bold; - color:#2f508e; + /* font-weight:bold; */ + /* color:#2f508e; */ white-space:nowrap; } +span.vimiumHelpDialogKey { + background-color: rgb(243,243,243); + color: rgb(33,33,33); + margin: 2px; + padding-top: 1px; + padding-bottom: 1px; + padding-left: 4px; + padding-right: 4px; + border-radius: 4px; +} /* Make the description column as wide as it can be. */ div#vimiumHelpDialog div.vimiumColumn tr > td:nth-of-type(3) { width:100%; } div#vimiumHelpDialog div.vimiumDivider { @@ -228,8 +237,8 @@ div#vimiumHelpDialog.showAdvanced tr.advanced { display: table-row; } div#vimiumHelpDialog div.advanced td:nth-of-type(3) { color: #555; } div#vimiumHelpDialog a.closeButton { position:absolute; - right:7px; - top:5px; + right:4px; + top:2px; font-family:"courier new"; font-weight:bold; color:#555; @@ -244,15 +253,16 @@ div#vimiumHelpDialog a { div#vimiumHelpDialog .wikiPage, div#vimiumHelpDialog .optionsPage { position: absolute; display: block; - font-size: 11px; + font-size: 14px; line-height: 130%; - top: 6px; + color:#555; + top: 11px; } div#vimiumHelpDialog .optionsPage { right: 40px; } div#vimiumHelpDialog .wikiPage { - right: 83px; + right: 100px; } div#vimiumHelpDialog a.closeButton:hover { color:black; @@ -267,6 +277,12 @@ div#vimiumHelpDialogFooter .toggleAdvancedCommands { position: absolute; right: 2px; top: -34px; + font-size: 14px; + color:#555; +} + +a:link.vimiumHelDialogLink, a:visited.vimiumHelDialogLink, a:hover.vimiumHelDialogLink, a:active.vimiumHelDialogLink{ + color:#555; } /* Vimium HUD CSS */ -- cgit v1.2.3 From 1115f2719c3e647ca1c1764c1b8a0140211bf3fa Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Tue, 19 Apr 2016 09:23:57 +0100 Subject: Help dialog; set maximum width. --- content_scripts/vimium.css | 1 + 1 file changed, 1 insertion(+) (limited to 'content_scripts/vimium.css') diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 86411d0a..18908692 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -163,6 +163,7 @@ div#vimiumHelpDialog { top:50px; left: 50%; max-height: calc(100% - 100px - 12px); + max-width: calc(100% - 100px + 12px); width: calc(840px + 24px + 4px + 12px); margin-left:calc(0px - 420px - 12px - 2px - 6px); /* Minus half of the width, above. */ overflow: auto; -- cgit v1.2.3 From 4a670aaa3d121834685a672acc904f9824721824 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Tue, 19 Apr 2016 13:07:43 +0100 Subject: Help dialog; better formatting of command names. This needs more work. --- content_scripts/vimium.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'content_scripts/vimium.css') diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 18908692..6037c9c2 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -231,7 +231,10 @@ div#vimiumHelpDialog td.vimiumHelpDescription { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; } -div#vimiumHelpDialog div.commandName { font-family:"courier new"; } +div#vimiumHelpDialog span.commandName { + font-family:"courier new"; + color: #555; +} /* Advanced commands are hidden by default until you show them. */ div#vimiumHelpDialog tr.advanced { display: none; } div#vimiumHelpDialog.showAdvanced tr.advanced { display: table-row; } -- cgit v1.2.3 From aeca4facc27e694d79228637994f2a5608606ab3 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Fri, 22 Apr 2016 14:59:03 +0100 Subject: Fix x-axis position. This gest the centring calculation correct. Also, remove the shadow; it's not visible. --- content_scripts/vimium.css | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) (limited to 'content_scripts/vimium.css') diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 6037c9c2..1c4f1e37 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -143,7 +143,6 @@ iframe.vimiumHelpDialogFrame { top: 0px; left: 0px; width: 100%; - min-width: 400px; height: 100%; display: block; position: fixed; @@ -153,7 +152,6 @@ iframe.vimiumHelpDialogFrame { div#vimiumHelpDialog { border:3px solid; - -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px; opacity:1.0; background-color:white; position:fixed; @@ -162,10 +160,10 @@ div#vimiumHelpDialog { padding:8px 12px; top:50px; left: 50%; - max-height: calc(100% - 100px - 12px); - max-width: calc(100% - 100px + 12px); - width: calc(840px + 24px + 4px + 12px); - margin-left:calc(0px - 420px - 12px - 2px - 6px); /* Minus half of the width, above. */ + width: 840px; + height: calc(100% - 100px - 16px); /* 100% -top - 2*padding */ + max-width: calc(100% - 100px - 12px); + margin-left:calc(-420px - 12px); /* -1/2*width - 1*padding */ overflow: auto; } -- cgit v1.2.3 From 4c707140985ae03e3c523f2e6e4b6cb4c8465236 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Fri, 22 Apr 2016 16:03:26 +0100 Subject: Better help-dialog formatting. Use margins to centre the help dialog. This works better on narrow windows, and seems to produce a balanced dialog in a variety of cases. --- content_scripts/vimium.css | 45 ++++++++++++++++++--------------------------- 1 file changed, 18 insertions(+), 27 deletions(-) (limited to 'content_scripts/vimium.css') diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 1c4f1e37..cddfbc97 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -151,26 +151,32 @@ iframe.vimiumHelpDialogFrame { } div#vimiumHelpDialog { - border:3px solid; opacity:1.0; background-color:white; - position:fixed; border:2px solid #b3b3b3; border-radius:6px; padding:8px 12px; - top:50px; - left: 50%; width: 840px; - height: calc(100% - 100px - 16px); /* 100% -top - 2*padding */ - max-width: calc(100% - 100px - 12px); - margin-left:calc(-420px - 12px); /* -1/2*width - 1*padding */ - overflow: auto; + max-width: calc(100% - 100px); + max-height: calc(100% - 100px); + margin: 50px auto; + overflow-y: auto; } -div#vimiumTitle, div#vimiumTitle span, div#vimiumTitle * { font-size:20px; } +span#vimiumTitle, span#vimiumTitle span, span#vimiumTitle * { font-size:20px; } #vimiumTitle { display: block; line-height: 130%; + white-space: nowrap; +} +td.vimiumHelpDialogTopButtons { + width: 100%; + text-align: right; +} +#helpDialogOptionsPage, #helpDialogWikiPage { + font-size: 14px; + padding-left: 5px; + padding-right: 5px; } div.vimiumColumn { width:50%; @@ -238,34 +244,19 @@ div#vimiumHelpDialog tr.advanced { display: none; } div#vimiumHelpDialog.showAdvanced tr.advanced { display: table-row; } div#vimiumHelpDialog div.advanced td:nth-of-type(3) { color: #555; } div#vimiumHelpDialog a.closeButton { - position:absolute; - right:4px; - top:2px; font-family:"courier new"; font-weight:bold; color:#555; text-decoration:none; - padding-left:10px; font-size:20px; + position: relative; + top: -12px; + right: -10px; } div#vimiumHelpDialog a { text-decoration: underline; } -div#vimiumHelpDialog .wikiPage, div#vimiumHelpDialog .optionsPage { - position: absolute; - display: block; - font-size: 14px; - line-height: 130%; - color:#555; - top: 11px; -} -div#vimiumHelpDialog .optionsPage { - right: 40px; -} -div#vimiumHelpDialog .wikiPage { - right: 100px; -} div#vimiumHelpDialog a.closeButton:hover { color:black; -webkit-user-select:none; -- cgit v1.2.3 From a7446f09538e0b0314611c9d847016a85f735644 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Fri, 22 Apr 2016 16:55:02 +0100 Subject: Nicer styling of command names in help dialog. The commands names (in the help dialog) look nicer in italics. They also format better that way. --- content_scripts/vimium.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'content_scripts/vimium.css') diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index cddfbc97..f4029509 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -236,8 +236,9 @@ div#vimiumHelpDialog td.vimiumHelpDescription { font-size:14px; } div#vimiumHelpDialog span.commandName { - font-family:"courier new"; - color: #555; + /* font-family:"courier new"; */ + /* color: #555; */ + font-style: italic; } /* Advanced commands are hidden by default until you show them. */ div#vimiumHelpDialog tr.advanced { display: none; } -- cgit v1.2.3 From 546d8b91c2e0991c410a42b2098ff1d478f24c73 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Sat, 23 Apr 2016 06:28:01 +0100 Subject: Fix help dialog HTML. - Style the links at the top the same as those at the bottom (re. colour). - Fix HTML indentation. --- content_scripts/vimium.css | 1 + 1 file changed, 1 insertion(+) (limited to 'content_scripts/vimium.css') diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index f4029509..1b63c9da 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -177,6 +177,7 @@ td.vimiumHelpDialogTopButtons { font-size: 14px; padding-left: 5px; padding-right: 5px; + color:#555; } div.vimiumColumn { width:50%; -- cgit v1.2.3 From 98ea279485fc456bbe4349559f9c08a24e2c4214 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Sat, 23 Apr 2016 06:53:55 +0100 Subject: Show tip re. clicking command names. It's pretty undiscoverable that you can click command names to yank them. So, this adds a tip to the bottom of the help dialog. Also, change the cursor to a pointer when hovering over command names. --- content_scripts/vimium.css | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) (limited to 'content_scripts/vimium.css') diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 1b63c9da..a1d88a18 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -237,9 +237,9 @@ div#vimiumHelpDialog td.vimiumHelpDescription { font-size:14px; } div#vimiumHelpDialog span.commandName { - /* font-family:"courier new"; */ - /* color: #555; */ + color: #555; font-style: italic; + cursor: pointer; } /* Advanced commands are hidden by default until you show them. */ div#vimiumHelpDialog tr.advanced { display: none; } @@ -267,13 +267,19 @@ div#vimiumHelpDialogFooter { display: block; position: relative; } +td.helpDialogBottomRight { + width: 100%; + text-align: right; +} div#vimiumHelpDialogFooter * { font-size:10px; } -div#vimiumHelpDialogFooter .toggleAdvancedCommands { - position: absolute; - right: 2px; - top: -34px; +a#toggleAdvancedCommands, span#help-dialog-tip { + position: relative; + top: 19px; + color: #555; + white-space: nowrap; +} +td.helpDialogBottomLeft, td.helpDialogBottomRight { font-size: 14px; - color:#555; } a:link.vimiumHelDialogLink, a:visited.vimiumHelDialogLink, a:hover.vimiumHelDialogLink, a:active.vimiumHelDialogLink{ -- cgit v1.2.3 From 5906b1237562e28faa1e2f2206d953ae3ab59f62 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Sat, 23 Apr 2016 08:57:51 +0100 Subject: Fix help-dialog scroll bars and min width. --- content_scripts/vimium.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'content_scripts/vimium.css') diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index a1d88a18..09548268 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -150,17 +150,22 @@ iframe.vimiumHelpDialogFrame { z-index: 2147483645; /* One less than hint markers. */ } -div#vimiumHelpDialog { +div#vimiumHelpDialogContainer { opacity:1.0; background-color:white; border:2px solid #b3b3b3; border-radius:6px; - padding:8px 12px; width: 840px; max-width: calc(100% - 100px); max-height: calc(100% - 100px); margin: 50px auto; overflow-y: auto; + overflow-x: auto; +} + +div#vimiumHelpDialog { + min-width: 600px; + padding:8px 12px; } span#vimiumTitle, span#vimiumTitle span, span#vimiumTitle * { font-size:20px; } -- cgit v1.2.3 From 7e7c8e6cf9e1739fcbf8aa35ebe4331aeaaed6d8 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Sat, 23 Apr 2016 09:08:12 +0100 Subject: Tweak help-dialog font size. Make the font size (and color) match those used in the footer. --- content_scripts/vimium.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) (limited to 'content_scripts/vimium.css') diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 09548268..5a4087ba 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -273,18 +273,19 @@ div#vimiumHelpDialogFooter { position: relative; } td.helpDialogBottomRight { - width: 100%; - text-align: right; + width:100%; + float:right; + text-align: right; } div#vimiumHelpDialogFooter * { font-size:10px; } a#toggleAdvancedCommands, span#help-dialog-tip { position: relative; top: 19px; - color: #555; white-space: nowrap; + font-size: 10px; } -td.helpDialogBottomLeft, td.helpDialogBottomRight { - font-size: 14px; +a#toggleAdvancedCommands { + color: #555; } a:link.vimiumHelDialogLink, a:visited.vimiumHelDialogLink, a:hover.vimiumHelDialogLink, a:active.vimiumHelDialogLink{ -- cgit v1.2.3 From 306361f3f1cf3ec4f49d7c23f4ce4b2987acb8b4 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Sat, 23 Apr 2016 15:49:47 +0100 Subject: Help dialog: CSS tweaks. --- content_scripts/vimium.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'content_scripts/vimium.css') diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 5a4087ba..8c8892ac 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -208,8 +208,6 @@ div#vimiumHelpDialog div.vimiumColumn tr > td:first-of-type { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; text-align:right; - /* font-weight:bold; */ - /* color:#2f508e; */ white-space:nowrap; } span.vimiumHelpDialogKey { @@ -245,6 +243,7 @@ div#vimiumHelpDialog span.commandName { color: #555; font-style: italic; cursor: pointer; + font-size: 12px; } /* Advanced commands are hidden by default until you show them. */ div#vimiumHelpDialog tr.advanced { display: none; } @@ -271,12 +270,16 @@ div#vimiumHelpDialog a.closeButton:hover { div#vimiumHelpDialogFooter { display: block; position: relative; + margin-bottom: 37px; } td.helpDialogBottomRight { width:100%; float:right; text-align: right; } +td.helpDialogBottomRight, td.helpDialogBottomLeft { + padding: 0px; +} div#vimiumHelpDialogFooter * { font-size:10px; } a#toggleAdvancedCommands, span#help-dialog-tip { position: relative; -- cgit v1.2.3 From 5866a01b9570f93c79340dac796226ac88211d3c Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Mon, 25 Apr 2016 09:51:11 +0100 Subject: Help dialog revert styling of links. --- content_scripts/vimium.css | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) (limited to 'content_scripts/vimium.css') diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 8c8892ac..7f7d2be4 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -182,7 +182,6 @@ td.vimiumHelpDialogTopButtons { font-size: 14px; padding-left: 5px; padding-right: 5px; - color:#555; } div.vimiumColumn { width:50%; @@ -287,12 +286,9 @@ a#toggleAdvancedCommands, span#help-dialog-tip { white-space: nowrap; font-size: 10px; } -a#toggleAdvancedCommands { - color: #555; -} - -a:link.vimiumHelDialogLink, a:visited.vimiumHelDialogLink, a:hover.vimiumHelDialogLink, a:active.vimiumHelDialogLink{ - color:#555; +a:link.vimiumHelDialogLink, a:visited.vimiumHelDialogLink, a:hover.vimiumHelDialogLink, a:active.vimiumHelDialogLink { + color:blue; + text-decoration: underline; } /* Vimium HUD CSS */ -- cgit v1.2.3 From 6066364d4c331b89cf2b4f6d2a5cf11a3c2bbe3f Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Mon, 25 Apr 2016 10:04:27 +0100 Subject: Help dialog; reposition close button. --- content_scripts/vimium.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'content_scripts/vimium.css') diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 7f7d2be4..79155cf6 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -253,10 +253,10 @@ div#vimiumHelpDialog a.closeButton { font-weight:bold; color:#555; text-decoration:none; - font-size:20px; + font-size:24px; position: relative; - top: -12px; - right: -10px; + top: 3px; + padding-left: 5px; } div#vimiumHelpDialog a { text-decoration: underline; -- cgit v1.2.3 From 91bed52461c87b0c5d08a0beb8a7b80fc4b4ddf6 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Mon, 25 Apr 2016 10:20:17 +0100 Subject: Help dialog; tweak key styling. --- content_scripts/vimium.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'content_scripts/vimium.css') diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 79155cf6..ca02e43f 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -212,12 +212,15 @@ div#vimiumHelpDialog div.vimiumColumn tr > td:first-of-type { span.vimiumHelpDialogKey { background-color: rgb(243,243,243); color: rgb(33,33,33); - margin: 2px; - padding-top: 1px; - padding-bottom: 1px; + margin-left: 2px; + padding-top: 0px; + padding-bottom: 2px; padding-left: 4px; padding-right: 4px; - border-radius: 4px; + border-radius: 3px; + border: solid 1px #ccc; + border-bottom-color: #bbb; + box-shadow: inset 0 -1px 0 #bbb; } /* Make the description column as wide as it can be. */ div#vimiumHelpDialog div.vimiumColumn tr > td:nth-of-type(3) { width:100%; } -- cgit v1.2.3 From 314ba252add73387ec3d95a29aff6a51b4da908a Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Mon, 25 Apr 2016 10:25:20 +0100 Subject: Help dialog; revert font colour for command names. If we're not using the previous font for other links on the help dialog, then it doesn't make sense to use that font for command names either. --- content_scripts/vimium.css | 1 - 1 file changed, 1 deletion(-) (limited to 'content_scripts/vimium.css') diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index ca02e43f..57ab4907 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -242,7 +242,6 @@ div#vimiumHelpDialog td.vimiumHelpDescription { font-size:14px; } div#vimiumHelpDialog span.commandName { - color: #555; font-style: italic; cursor: pointer; font-size: 12px; -- cgit v1.2.3 From 0b6e9b806df828864eac1fc3dda038238881c4bf Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Tue, 26 Apr 2016 06:28:37 +0100 Subject: Help dialog; use fixed-width font for keys. --- content_scripts/vimium.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'content_scripts/vimium.css') diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index 57ab4907..d9ef40f4 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -213,14 +213,16 @@ span.vimiumHelpDialogKey { background-color: rgb(243,243,243); color: rgb(33,33,33); margin-left: 2px; - padding-top: 0px; - padding-bottom: 2px; + padding-top: 1px; + padding-bottom: 1px; padding-left: 4px; padding-right: 4px; border-radius: 3px; border: solid 1px #ccc; border-bottom-color: #bbb; box-shadow: inset 0 -1px 0 #bbb; + font-family: monospace; + font-size: 11px; } /* Make the description column as wide as it can be. */ div#vimiumHelpDialog div.vimiumColumn tr > td:nth-of-type(3) { width:100%; } -- cgit v1.2.3 From 05b2289ab0bb2278a60d77c5e08b7603e49e014d Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Tue, 26 Apr 2016 06:53:16 +0100 Subject: Help dialog; use Vimium-blue for links. On the help dialog, use the same blue of the "Vim" of "Vimium" for links. --- content_scripts/vimium.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'content_scripts/vimium.css') diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index d9ef40f4..8803fd15 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -290,9 +290,10 @@ a#toggleAdvancedCommands, span#help-dialog-tip { white-space: nowrap; font-size: 10px; } -a:link.vimiumHelDialogLink, a:visited.vimiumHelDialogLink, a:hover.vimiumHelDialogLink, a:active.vimiumHelDialogLink { - color:blue; - text-decoration: underline; +a:link.vimiumHelDialogLink, a:visited.vimiumHelDialogLink, + a:hover.vimiumHelDialogLink, a:active.vimiumHelDialogLink, a#toggleAdvancedCommands { + color:#2f508e; + text-decoration: underline; } /* Vimium HUD CSS */ -- cgit v1.2.3