1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-24 22:40:55 +01:00

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
This commit is contained in:
Chad Little 2014-03-07 10:36:26 -08:00
parent 0488ce73c4
commit 03216eff78
2 changed files with 53 additions and 69 deletions

View file

@ -7,7 +7,7 @@
return array( return array(
'names' => 'names' =>
array( array(
'core.pkg.css' => '2ed3f133', 'core.pkg.css' => '59d88410',
'core.pkg.js' => 'b7bdab05', 'core.pkg.js' => 'b7bdab05',
'darkconsole.pkg.js' => 'ca8671ce', 'darkconsole.pkg.js' => 'ca8671ce',
'differential.pkg.css' => 'd1b3a605', 'differential.pkg.css' => 'd1b3a605',
@ -112,7 +112,7 @@ return array(
'rsrc/css/application/tokens/tokens.css' => 'fb286311', 'rsrc/css/application/tokens/tokens.css' => 'fb286311',
'rsrc/css/application/uiexample/example.css' => '4741b891', 'rsrc/css/application/uiexample/example.css' => '4741b891',
'rsrc/css/core/core.css' => 'da26ddb2', '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/syntax.css' => '3c18c1cb',
'rsrc/css/core/z-index.css' => '0fd29d49', 'rsrc/css/core/z-index.css' => '0fd29d49',
'rsrc/css/diviner/diviner-shared.css' => '38813222', 'rsrc/css/diviner/diviner-shared.css' => '38813222',
@ -712,7 +712,7 @@ return array(
'phabricator-prefab' => '0326e5d0', 'phabricator-prefab' => '0326e5d0',
'phabricator-profile-css' => '9bdb9804', 'phabricator-profile-css' => '9bdb9804',
'phabricator-project-tag-css' => '095c9404', 'phabricator-project-tag-css' => '095c9404',
'phabricator-remarkup-css' => 'ca7f2265', 'phabricator-remarkup-css' => 'c3692a93',
'phabricator-search-results-css' => 'f240504c', 'phabricator-search-results-css' => 'f240504c',
'phabricator-settings-css' => 'ea8f5915', 'phabricator-settings-css' => 'ea8f5915',
'phabricator-shaped-request' => 'dfa181a4', 'phabricator-shaped-request' => 'dfa181a4',

View file

@ -7,7 +7,7 @@
} }
.phabricator-remarkup p { .phabricator-remarkup p {
margin: 0 0 1em; margin: 0 0 12px;
} }
.phabricator-remarkup p:last-child { .phabricator-remarkup p:last-child {
@ -15,37 +15,43 @@
} }
.phabricator-remarkup .remarkup-code-block { .phabricator-remarkup .remarkup-code-block {
margin: 1em 2em; margin: 12px;
white-space: pre; white-space: pre;
font-family: "Monaco", monospace; font-family: "Monaco", monospace;
font-size: 10px; font-size: 10px;
} }
.phabricator-remarkup .remarkup-code-header { .phabricator-remarkup .remarkup-code-header {
padding: .25em 1em; padding: 6px 8px;
background: #edead7; background: {$lightyellow};
color: {$darkgreytext}; 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 { .phabricator-remarkup .remarkup-code-block pre {
background: #fdfae7; background: {$lightyellow};
border: 1px solid #f5e178; border: 1px solid {$yellow};
display: block; display: block;
color: #000000; color: #000000;
overflow: auto; overflow: auto;
padding: .5em 1em; padding: 8px;
font-family: "Monaco", monospace; font-family: "Monaco", monospace;
} }
.phabricator-remarkup pre.remarkup-counterexample { .phabricator-remarkup pre.remarkup-counterexample {
border: 1px solid #aa0000; border: 1px solid {$red};
background-color: #ffaaaa; background-color: {$lightred};
} }
.phabricator-remarkup tt { .phabricator-remarkup tt {
color: #333333; color: #333333;
background: #ebebeb; background: #ebebeb;
padding: 0 .25em; padding: 0 4px;
white-space: pre-wrap; white-space: pre-wrap;
} }
@ -57,19 +63,19 @@
.phabricator-remarkup ul { .phabricator-remarkup ul {
list-style: disc; list-style: disc;
margin: 1em 0 1em 3em; margin: 12px 0 12px 30px;
} }
.phabricator-remarkup ol { .phabricator-remarkup ol {
list-style: decimal; list-style: decimal;
margin: 1em 0 1em 3em; margin: 12px 0 12px 30px;
} }
.phabricator-remarkup ul ol, .phabricator-remarkup ul ol,
.phabricator-remarkup ul ul, .phabricator-remarkup ul ul,
.phabricator-remarkup ol ol, .phabricator-remarkup ol ol,
.phabricator-remarkup ol ul { .phabricator-remarkup ol ul {
margin: .25em 0 .25em 2em; margin: 4px 0 4px 24px;
} }
.phabricator-remarkup li.phantom-item, .phabricator-remarkup li.phantom-item,
@ -98,45 +104,45 @@
.phabricator-remarkup h1 { .phabricator-remarkup h1 {
font-size: 1.625em; font-size: 1.625em;
line-height: 1.625em; line-height: 1.625em;
margin: .8em 0; margin: 8px 0;
} }
.phabricator-remarkup h2 { .phabricator-remarkup h2 {
font-size: 1.5em; font-size: 1.5em;
line-height: 1.5em; line-height: 1.5em;
margin: .75em 0; margin: 8px 0;
} }
.phabricator-remarkup h3 { .phabricator-remarkup h3 {
font-size: 1.375em; font-size: 1.375em;
line-height: 1.375em; line-height: 1.375em;
margin: .69em 0; margin: 8px 0;
} }
.phabricator-remarkup h4 { .phabricator-remarkup h4 {
font-size: 1.25em; font-size: 1.25em;
line-height: 1.25em; line-height: 1.25em;
margin: .63em 0; margin: 8px 0;
} }
.phabricator-remarkup h5 { .phabricator-remarkup h5 {
font-size: 1.125em; font-size: 1.125em;
line-height: 1.125em; line-height: 1.125em;
margin: .56em 0; margin: 4px 0;
} }
.phabricator-remarkup h6 { .phabricator-remarkup h6 {
font-size: 1em; font-size: 1em;
line-height: 1em; line-height: 1em;
margin: .5em 0; margin: 4px 0;
} }
.phabricator-remarkup blockquote { .phabricator-remarkup blockquote {
border-left: 1px solid #AAAAAA; border-left: 3px solid {$lightbluetext};
color: #333333; color: {$bluetext};
font-style: italic; font-style: italic;
margin: .5em 0em; margin: 4px 0;
padding: .25em 1em; padding: 4px 8px;
} }
.phabricator-remarkup blockquote em { .phabricator-remarkup blockquote em {
@ -172,39 +178,40 @@
} }
.phabricator-remarkup .remarkup-note { .phabricator-remarkup .remarkup-note {
margin: 1em 1.5em; margin: 12px 24px;
padding: 0.5em 1em; padding: 8px;
border: 1px solid #ddddff; border: 1px solid {$blue};
background: #f3f3ff; background: {$lightblue};
} }
.phabricator-remarkup .remarkup-warning { .phabricator-remarkup .remarkup-warning {
margin: 1em 1.5em; margin: 12px 24px;
padding: 0.5em 1em; padding: 8px;
border: 1px solid {$yellow}; border: 1px solid {$yellow};
background: {$lightyellow}; background: {$lightyellow};
} }
.phabricator-remarkup .remarkup-important { .phabricator-remarkup .remarkup-important {
margin: 1em 1.5em; margin: 12px 24px;
padding: 0.5em 1em; padding: 8px;
border: 1px solid {$red}; border: 1px solid {$red};
background: {$lightred}; background: {$lightred};
} }
.phabricator-remarkup-toc { .phabricator-remarkup-toc {
float: right; float: right;
border: 1px solid #d7d7d7; border: 1px solid {$lightblueborder};
background: #f7f7f7; background: {$lightgreybackground};
padding: 4px 12px; padding: 8px;
width: 180px; width: 180px;
margin: 0 0 5px 10px; margin: 0 0 4px 8px;
} }
.phabricator-remarkup-toc-header { .phabricator-remarkup-toc-header {
font-size: 11px; font-size: 12px;
color: {$greytext}; line-height: 12px;
border-bottom: 1px solid #d7d7d7; color: {$darkbluetext};
font-weight: bold;
margin-bottom: 4px; margin-bottom: 4px;
} }
@ -262,7 +269,7 @@
border-collapse: separate; border-collapse: separate;
border-spacing: 1px; border-spacing: 1px;
background: #d3d3d3; background: #d3d3d3;
margin: 1em; margin: 12px 0;
} }
.phabricator-remarkup table.remarkup-table th { .phabricator-remarkup table.remarkup-table th {
@ -402,26 +409,3 @@
margin: auto; margin: auto;
max-width: 95%; 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;
}