From 03216eff785f25d478d49a7a5be705301fc10b6e Mon Sep 17 00:00:00 2001
From: Chad Little <chad@chadsdomain.com>
Date: Fri, 7 Mar 2014 10:36:26 -0800
Subject: [PATCH] Modernize Remarkup CSS

Summary: Uses standard spacing and colors in Remarkup. Also removed 'remarkup dark' since it doesn't exist anymore (Pholio). Left font sizes in em's for spacing.

Test Plan: Tested a few dozen Diviner pages, my wiki pages, and a few tasks.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

CC: Korvin, epriestley, aran

Differential Revision: https://secure.phabricator.com/D8439
---
 resources/celerity/map.php         |   6 +-
 webroot/rsrc/css/core/remarkup.css | 116 +++++++++++++----------------
 2 files changed, 53 insertions(+), 69 deletions(-)

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index a92d33b71e..74992b168c 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -7,7 +7,7 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => '2ed3f133',
+    'core.pkg.css' => '59d88410',
     'core.pkg.js' => 'b7bdab05',
     'darkconsole.pkg.js' => 'ca8671ce',
     'differential.pkg.css' => 'd1b3a605',
@@ -112,7 +112,7 @@ return array(
     'rsrc/css/application/tokens/tokens.css' => 'fb286311',
     'rsrc/css/application/uiexample/example.css' => '4741b891',
     'rsrc/css/core/core.css' => 'da26ddb2',
-    'rsrc/css/core/remarkup.css' => 'ca7f2265',
+    'rsrc/css/core/remarkup.css' => 'c3692a93',
     'rsrc/css/core/syntax.css' => '3c18c1cb',
     'rsrc/css/core/z-index.css' => '0fd29d49',
     'rsrc/css/diviner/diviner-shared.css' => '38813222',
@@ -712,7 +712,7 @@ return array(
     'phabricator-prefab' => '0326e5d0',
     'phabricator-profile-css' => '9bdb9804',
     'phabricator-project-tag-css' => '095c9404',
-    'phabricator-remarkup-css' => 'ca7f2265',
+    'phabricator-remarkup-css' => 'c3692a93',
     'phabricator-search-results-css' => 'f240504c',
     'phabricator-settings-css' => 'ea8f5915',
     'phabricator-shaped-request' => 'dfa181a4',
diff --git a/webroot/rsrc/css/core/remarkup.css b/webroot/rsrc/css/core/remarkup.css
index 5e4f1add68..925f8f8beb 100644
--- a/webroot/rsrc/css/core/remarkup.css
+++ b/webroot/rsrc/css/core/remarkup.css
@@ -7,7 +7,7 @@
 }
 
 .phabricator-remarkup p {
-  margin: 0 0 1em;
+  margin: 0 0 12px;
 }
 
 .phabricator-remarkup p:last-child {
@@ -15,37 +15,43 @@
 }
 
 .phabricator-remarkup .remarkup-code-block {
-  margin: 1em 2em;
+  margin: 12px;
   white-space: pre;
   font-family: "Monaco", monospace;
   font-size: 10px;
 }
 
 .phabricator-remarkup .remarkup-code-header {
-  padding: .25em 1em;
-  background: #edead7;
-  color: {$darkgreytext};
+  padding: 6px 8px;
+  background: {$lightyellow};
+  color: rgba(0,0,0,.75);
+  font-weight: bold;
+  display: inline-block;
+  border-top: 1px solid {$yellow};
+  border-left: 1px solid {$yellow};
+  border-right: 1px solid {$yellow};
+  margin-bottom: -1px;
 }
 
 .phabricator-remarkup .remarkup-code-block pre {
-  background: #fdfae7;
-  border: 1px solid #f5e178;
+  background: {$lightyellow};
+  border: 1px solid {$yellow};
   display: block;
   color: #000000;
   overflow: auto;
-  padding: .5em 1em;
+  padding: 8px;
   font-family: "Monaco", monospace;
 }
 
 .phabricator-remarkup pre.remarkup-counterexample {
-  border: 1px solid #aa0000;
-  background-color: #ffaaaa;
+  border: 1px solid {$red};
+  background-color: {$lightred};
 }
 
 .phabricator-remarkup tt {
   color: #333333;
   background: #ebebeb;
-  padding: 0 .25em;
+  padding: 0 4px;
   white-space: pre-wrap;
 }
 
@@ -57,19 +63,19 @@
 
 .phabricator-remarkup ul {
   list-style: disc;
-  margin: 1em 0 1em 3em;
+  margin: 12px 0 12px 30px;
 }
 
 .phabricator-remarkup ol {
   list-style: decimal;
-  margin: 1em 0 1em 3em;
+  margin: 12px 0 12px 30px;
 }
 
 .phabricator-remarkup ul ol,
 .phabricator-remarkup ul ul,
 .phabricator-remarkup ol ol,
 .phabricator-remarkup ol ul {
-  margin: .25em 0 .25em 2em;
+  margin: 4px 0 4px 24px;
 }
 
 .phabricator-remarkup li.phantom-item,
@@ -98,45 +104,45 @@
 .phabricator-remarkup h1 {
   font-size: 1.625em;
   line-height: 1.625em;
-  margin: .8em 0;
+  margin: 8px 0;
 }
 
 .phabricator-remarkup h2 {
   font-size: 1.5em;
   line-height: 1.5em;
-  margin: .75em 0;
+  margin: 8px 0;
 }
 
 .phabricator-remarkup h3 {
   font-size: 1.375em;
   line-height: 1.375em;
-  margin: .69em 0;
+  margin: 8px 0;
 }
 
 .phabricator-remarkup h4 {
   font-size: 1.25em;
   line-height: 1.25em;
-  margin: .63em 0;
+  margin: 8px 0;
 }
 
 .phabricator-remarkup h5 {
   font-size: 1.125em;
   line-height: 1.125em;
-  margin: .56em 0;
+  margin: 4px 0;
 }
 
 .phabricator-remarkup h6 {
   font-size: 1em;
   line-height: 1em;
-  margin: .5em 0;
+  margin: 4px 0;
 }
 
 .phabricator-remarkup blockquote {
-  border-left: 1px solid #AAAAAA;
-  color:       #333333;
+  border-left: 3px solid {$lightbluetext};
+  color: {$bluetext};
   font-style:  italic;
-  margin:      .5em 0em;
-  padding:     .25em 1em;
+  margin: 4px 0;
+  padding: 4px 8px;
 }
 
 .phabricator-remarkup blockquote em {
@@ -172,39 +178,40 @@
 }
 
 .phabricator-remarkup .remarkup-note {
-  margin: 1em 1.5em;
-  padding: 0.5em 1em;
-  border: 1px solid #ddddff;
-  background: #f3f3ff;
+  margin: 12px 24px;
+  padding: 8px;
+  border: 1px solid {$blue};
+  background: {$lightblue};
 }
 
 .phabricator-remarkup .remarkup-warning {
-  margin: 1em 1.5em;
-  padding: 0.5em 1em;
+  margin: 12px 24px;
+  padding: 8px;
   border: 1px solid {$yellow};
   background: {$lightyellow};
 }
 
 .phabricator-remarkup .remarkup-important {
-  margin: 1em 1.5em;
-  padding: 0.5em 1em;
+  margin: 12px 24px;
+  padding: 8px;
   border: 1px solid {$red};
   background: {$lightred};
 }
 
 .phabricator-remarkup-toc {
   float: right;
-  border: 1px solid #d7d7d7;
-  background: #f7f7f7;
-  padding: 4px 12px;
+  border: 1px solid {$lightblueborder};
+  background: {$lightgreybackground};
+  padding: 8px;
   width: 180px;
-  margin: 0 0 5px 10px;
+  margin: 0 0 4px 8px;
 }
 
 .phabricator-remarkup-toc-header {
-  font-size: 11px;
-  color: {$greytext};
-  border-bottom: 1px solid #d7d7d7;
+  font-size: 12px;
+  line-height: 12px;
+  color: {$darkbluetext};
+  font-weight: bold;
   margin-bottom: 4px;
 }
 
@@ -259,10 +266,10 @@
 }
 
 .phabricator-remarkup table.remarkup-table {
-  border-collapse:  separate;
-  border-spacing:   1px;
-  background:       #d3d3d3;
-  margin:           1em;
+  border-collapse: separate;
+  border-spacing: 1px;
+  background: #d3d3d3;
+  margin: 12px 0;
 }
 
 .phabricator-remarkup table.remarkup-table th {
@@ -402,26 +409,3 @@
   margin: auto;
   max-width: 95%;
 }
-
-/* phabricator-remarkup-dark assumes a dark backround with light text,
-   so here are custom rules to override remarkup defaults. */
-
-div.phabricator-remarkup-dark blockquote {
-  color: {$lightgreytext};
-}
-
-div.phabricator-remarkup-dark tt {
-  color: #EEE;
-  background: {$darkgreytext};
-}
-
-div.phabricator-remarkup-dark .remarkup-note,
-div.phabricator-remarkup-dark .remarkup-warning,
-div.phabricator-remarkup-dark .remarkup-important,
-div.phabricator-remarkup-dark table {
-  color: #000;
-}
-
-div.phabricator-remarkup-dark hr {
-  border-color: #555;
-}