From 97ce6f8a0cd7d4e6617144897871502a88eaf8d4 Mon Sep 17 00:00:00 2001
From: John O'Nolan <john@onolan.org>
Date: Wed, 12 Aug 2015 10:29:40 +0200
Subject: [PATCH] Multiple minor visual style fixes

- Lighter dropdown shadow
- Removed display:flex from .btn because safari can't handle it on <button> elements, where it will immediately set all text-alignment to "left" with no way to change. I haven't been able to find any regressions for this change so far. Can't remember why buttons were supposed to be flexbox anyway. Maybe for icon alignment within buttons, but I can't find any such examples within the app.
- Safari thinks that user-select: all; means a single click should SELECT ALL THE THINGS. Removed/replaced with user-select: text; which makes it behave like Chrome; click and drag to select.
- Increased hit area for "?" button
- Removed :active style for post-edit button on content management screen, adjusted position
- Increased contrast on tag description, tag count, and view blog links

See #5652
---
 core/client/app/styles/components/dropdowns.css          | 2 +-
 core/client/app/styles/components/notifications.css      | 4 ++--
 core/client/app/styles/layouts/content.css               | 5 +++--
 core/client/app/styles/layouts/editor.css                | 2 +-
 core/client/app/styles/layouts/main.css                  | 5 ++---
 core/client/app/styles/layouts/tags.css                  | 4 ++--
 core/client/app/styles/patterns/buttons.css              | 4 +---
 core/client/app/templates/components/gh-modal-dialog.hbs | 9 ++-------
 8 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/core/client/app/styles/components/dropdowns.css b/core/client/app/styles/components/dropdowns.css
index d297c69fca..951f71e324 100644
--- a/core/client/app/styles/components/dropdowns.css
+++ b/core/client/app/styles/components/dropdowns.css
@@ -22,7 +22,7 @@
     background-color: #fff;
     background-clip: padding-box;
     border-radius: 4px;
-    box-shadow: rgba(0, 0, 0, 0.175) 0 2px 6px;
+    box-shadow: rgba(0, 0, 0, 0.10) 0 2px 6px;
     list-style: none;
     text-align: left;
     text-transform: none;
diff --git a/core/client/app/styles/components/notifications.css b/core/client/app/styles/components/notifications.css
index 8895860afa..2c4f641edf 100644
--- a/core/client/app/styles/components/notifications.css
+++ b/core/client/app/styles/components/notifications.css
@@ -128,13 +128,13 @@
     font-size: 1.4rem;
     line-height: 1.3em;
     font-weight: 200;
-    user-select: all;
+    user-select: text;
 }
 
 .gh-alert a {
     text-decoration: underline;
     font-weight: 400;
-    user-select: all;
+    user-select: text;
 }
 
 .gh-alert-close {
diff --git a/core/client/app/styles/layouts/content.css b/core/client/app/styles/layouts/content.css
index 51878f824e..f598ecc7b9 100644
--- a/core/client/app/styles/layouts/content.css
+++ b/core/client/app/styles/layouts/content.css
@@ -216,11 +216,12 @@
 
 .content-preview .post-controls {
     position: absolute;
-    top: 25px;
+    top: 5px;
     right: 25px;
 }
 
-.content-preview .post-controls .btn {
+.content-preview .post-controls .post-edit {
+    padding-top: 0;
     padding-right: 0;
     border: none;
     font-size: 18px;
diff --git a/core/client/app/styles/layouts/editor.css b/core/client/app/styles/layouts/editor.css
index 4c82eaf189..c45d1029e6 100644
--- a/core/client/app/styles/layouts/editor.css
+++ b/core/client/app/styles/layouts/editor.css
@@ -156,7 +156,7 @@
 
 .entry-preview-content *,
 .content-preview-content * {
-    user-select: all;
+    user-select: text;
 }
 
 .entry-preview-content a,
diff --git a/core/client/app/styles/layouts/main.css b/core/client/app/styles/layouts/main.css
index 800d9cf45d..fd1edd6046 100644
--- a/core/client/app/styles/layouts/main.css
+++ b/core/client/app/styles/layouts/main.css
@@ -192,7 +192,7 @@
 .gh-nav-footer-sitelink {
     flex-grow: 1;
     padding: 12px;
-    color: var(--midgrey);
+    color: color(var(--midgrey) lightness(-10%));
     text-align: center;
     text-transform: uppercase;
     font-size: 1rem;
@@ -327,13 +327,12 @@
 .gh-help-menu {
     display: flex;
     align-items: center;
-    padding: 5px 10px;
     border-left: #dfe1e3 1px solid;
     cursor: pointer;
 }
 
 .gh-help-button {
-    padding: 0 5px;
+    padding: 5px 15px;
     color: var(--midgrey);
     text-align: center;
     font-size: 1.4rem;
diff --git a/core/client/app/styles/layouts/tags.css b/core/client/app/styles/layouts/tags.css
index 9a0ce6274e..562028721f 100644
--- a/core/client/app/styles/layouts/tags.css
+++ b/core/client/app/styles/layouts/tags.css
@@ -109,7 +109,7 @@
 
 .settings-tag .tag-description {
     margin: 0;
-    color: #dfe1e3;
+    color: color(#dfe1e3 lightness(-10%));
     font-size: 13px;
 }
 
@@ -117,6 +117,6 @@
     position: absolute;
     top: 20px;
     right: 12px;
-    color: #dfe1e3;
+    color: color(#dfe1e3 lightness(-10%));
     font-size: 16px;
 }
diff --git a/core/client/app/styles/patterns/buttons.css b/core/client/app/styles/patterns/buttons.css
index 232d902574..07cd1f3e68 100644
--- a/core/client/app/styles/patterns/buttons.css
+++ b/core/client/app/styles/patterns/buttons.css
@@ -3,9 +3,6 @@
 
 /* Base button style */
 .btn {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     margin-bottom: 0;
     padding: 9px 15px;
     border: #dfe1e3 1px solid;
@@ -163,6 +160,7 @@ fieldset[disabled] .btn {
 .btn-minor:focus {
     border-color: #c1c1c1;
     background: #fff;
+    box-shadow: none;
     color: #808284;
 }
 
diff --git a/core/client/app/templates/components/gh-modal-dialog.hbs b/core/client/app/templates/components/gh-modal-dialog.hbs
index 2255cf3bac..f024e0b893 100644
--- a/core/client/app/templates/components/gh-modal-dialog.hbs
+++ b/core/client/app/templates/components/gh-modal-dialog.hbs
@@ -8,13 +8,8 @@
             </section>
             {{#if confirm}}
             <footer class="modal-footer">
-                <button type="button" class="{{rejectButtonClass}} btn-minor js-button-reject" {{action "confirm" "reject"}}>
-                    {{confirm.reject.text}}
-                </button><!--
-                Required to strip the white-space between buttons
-                --><button type="button" class="{{acceptButtonClass}} js-button-accept" {{action "confirm" "accept"}}>
-                    {{confirm.accept.text}}
-                </button>
+                {{! Buttons must be on one line to prevent white-space errors }}
+                <button type="button" class="{{rejectButtonClass}} btn-minor js-button-reject" {{action "confirm" "reject"}}>{{confirm.reject.text}}</button><button type="button" class="{{acceptButtonClass}} js-button-accept" {{action "confirm" "accept"}}>{{confirm.accept.text}}</button>
             </footer>
             {{/if}}
         </section>