[#200] Use complementary shades in main.css.

TeamDignitas · Sep 4, 2021 · 7b5aba0 · 7b5aba0
1 parent 9e436d4
commit 7b5aba0
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 38 deletions.
diff --git a/www/css/answerResources.css b/www/css/answerResources.css
@@ -55,7 +55,7 @@ button.answer-resources-link {
 }
 
 #answer-resources .card-header {
- background-color: #fff;
+ background-color: var(--c-fff);
 }
 
 #answer-resources .card {

diff --git a/www/css/colors.css b/www/css/colors.css
@@ -281,12 +281,6 @@
  border-bottom-color: var(--bs-gray-700);
  }
 
- .nav-pills .nav-link.active,
- .nav-pills .show > .nav-link {
- background-color: var(--bs-gray-900);
- border-bottom-color: var(--bs-gray-600);
- }
-
  .page-item.active .page-link {
  background-color: var(--bs-gray-400);
  border-color: var(--bs-gray-400);

diff --git a/www/css/history.css b/www/css/history.css
@@ -1,11 +1,3 @@
-@media (max-width: 768px){
- .highlight-sm {
- background-color: #ccc;
- margin-top: 0.75rem;
- margin-bottom: 0.5rem;
- }
-}
-
 .history {
  font-size: 1.75rem;
  line-height: 2.3rem;
@@ -24,17 +16,20 @@ pre.identical-block {
 }
 
 pre.diff {
- color: gray;
+ color: var(--c-777);
  margin-top: 1em;
  white-space: pre-wrap;
 }
 
 .diff-op1 {
  background-color: #c8ffc8;
  color: black;
+ padding: 2px 3px;
 }
 
 .diff-op2 {
  background-color: #ffc8c8;
  color: black;
+ margin-right: 2px;
+ padding: 2px 3px;
 }
diff --git a/www/css/main.css b/www/css/main.css
@@ -92,7 +92,6 @@ blockquote {
 /****************** navbar search box & search results ******************/
 
 .navbar .select2 {
- background-color: #fff;
  /* Add rounded corners explicitly. This is necessary because the span is */
  /* not the first in the input-group; the hidden <select> comes before. */
  border-bottom-left-radius: 0.25rem !important;
@@ -108,9 +107,9 @@ blockquote {
 }
 
 .nav-pills .nav-link.active {
- background-color: #fff;
- border-bottom: 3px solid #999;
- color: #999;
+ background-color: var(--c-fff);
+ border-bottom: 3px solid var(--c-999);
+ color: var(--c-999);
  border-radius: 0;
  vertical-align: baseline;
 }
@@ -131,8 +130,8 @@ blockquote {
 }
 
 @keyframes answer-highlight-animation {
- from { background-color: #777; }
- to { background-color: white; }
+ from { background-color: var(--c-777); }
+ to { background-color: var(--c-fff); }
 }
 
 .vote-box {
@@ -149,7 +148,7 @@ blockquote {
 }
 
 .vote-box button {
- color: #777;
+ color: var(--c-777);
  display: block;
  font-size: 25px;
  margin: 0px auto;
@@ -177,7 +176,7 @@ blockquote {
 }
 
 .title-divider {
- border-color: #ccc;
+ border-color: var(--c-ccc);
 }
 
 .statement-read-only .text-muted,
@@ -298,23 +297,23 @@ blockquote {
 }
 
 .statement-link a {
- color: #555;
+ color: var(--c-444);
  font-size: 0.9rem;
  font-style: italic;
 }
 
 /*************** answers, entity statements, user profile ***************/
 
 .subsection {
- border-bottom: 1px solid #999;
+ border-bottom: 1px solid var(--c-999);
 }
 
 .capitalize-first-word::first-letter {
  text-transform: capitalize;
 }
 
 .your-answer {
- background-color: #eee;
+ background-color: var(--c-eee);
  padding: 3rem;
 }
 
@@ -333,30 +332,30 @@ blockquote {
 /******************************* comments *******************************/
 
 .comment {
- border-bottom: 1px solid #ccc;
- color: #777;
+ border-bottom: 1px solid var(--c-ccc);
+ color: var(--c-777);
  font-size: 80%;
  padding: 5px 0px;
 }
 
 .comment-list .comment:first-child {
- border-top: 1px solid #ccc;
+ border-top: 1px solid var(--c-ccc);
 }
 
 .comment p {
  display: inline;
 }
 
 .comment-actions {
- color: #bbb;
+ color: var(--c-bbb) !important;
 }
 
 .comment-actions:hover {
- color: #777;
+ color: var(--c-777) !important;
 }
 
 .dropdown-canned-responses a {
- color: black;
+ color: var(--c-000);
  pointer-events: none;
  text-decoration: none;
 }
@@ -436,7 +435,7 @@ body, main {
 /************************ help pages and sidebar ************************/
 
 .help-sidebar {
- border: 1px solid #ccc;
+ border: 1px solid var(--c-ccc);
  border-radius: .25rem;
  font-size: 0.8rem;
  padding: 0.5rem 0;
@@ -461,7 +460,7 @@ body, main {
 }
 
 .markdown table td, .markdown table th {
- border-top: 1px solid #ccc;
+ border-top: 1px solid var(--c-ccc);
  padding: 0.75rem;
 }
 
@@ -473,7 +472,7 @@ body, main {
 
 .help-sidebar-category a,
 .help-sidebar-page a {
- color: #777;
+ color: var(--c-777);
 }
 
 /******************************* tooltips *******************************/
@@ -514,7 +513,7 @@ body, main {
 }
 
 .card-collapse-icon .card-header a {
- color: #555;
+ color: var(--c-555);
  display: block;
  text-decoration: none;
 }
@@ -579,7 +578,7 @@ body, main {
 }
 
 .editor-toolbar button {
- color: var(--bs-gray);
+ color: var(--c-666);
  margin-bottom: 8px !important;
  margin-top: 8px !important;
 }