Update custom.css to offer a Material Design theme (#308)

Author: jason-fox

css/common-bootstrap.css

@@ -4,17 +4,15 @@
  */
 
 :root {
-  --dita-prussian-blue: #1d365d;
-  --dita-maroon: #800000;
+  --dita-prussian-blue: var(--bs-primary-text-emphasis);
+  --dita-maroon: var(--bs-danger-text-emphasis);
   --dita-violet: var(--bs-purple);
 }
 
 .list-group-item.active,
 .nav-link.active,
 [data-bs-theme='dark'] {
-  --dita-prussian-blue: #6a91cf;
   --dita-violet: #cc99cd;
-  --dita-maroon: #ff7676;
 }
 
 .list-group-item {
@@ -48,14 +46,10 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --dita-prussian-blue: #6a91cf;
     --dita-violet: #cc99cd;
-    --dita-maroon: #ff7676;
   }
 
   [data-bs-theme='light'] {
-    --dita-prussian-blue: #1d365d;
-    --dita-maroon: #800000;
     --dita-violet: var(--bs-purple);
   }
 }
@@ -136,3 +130,14 @@
 .search-box:focus-visible {
   outline: -webkit-focus-ring-color auto 1px;
 }
+
+.note {
+  border-left: 6px solid;
+  border-left-color: var(--bs-alert-color, transparent);
+}
+
+[dir='rtl'] .note {
+  border-right: 6px solid;
+  border-right-color: var(--bs-alert-color, transparent);
+  border-left: 0;
+}

css/custom.css

@@ -596,7 +596,7 @@
               else if (@type='trouble') then 'alert-warning'
               else if (@type='danger') then 'alert-danger'
               else if (@type='notice') then 'alert-info'
-              else if (@type='note') then 'alert-primary'
+              else if (@type='note' or (contains(@class, ' topic/note ') and not(contains(@class, ' bootstrap-d/alert ')) and not(contains(@class, ' topic/section ')) and empty(@type))) then 'alert-primary'
               else if (@type='other') then 'alert-dark'
               else 'alert-info'"
         />
@@ -795,7 +795,8 @@
     <xsl:variable name="icon">
       <xsl:value-of
         select="
-          if (@type='tip') then $BOOTSTRAP_ICON_TIP
+          if (@icon or contains(@otherprops, 'icon(') or *[contains(@class, ' topic/title ')]/*[contains(@class, ' bootstrap-d/icon ')]) then ''
+          else if (@type='tip') then $BOOTSTRAP_ICON_TIP
           else if (@type='fastpath') then $BOOTSTRAP_ICON_FASTPATH
           else if (@type='remember') then $BOOTSTRAP_ICON_REMEMBER
           else if (@type='restriction') then $BOOTSTRAP_ICON_RESTRICTION
@@ -806,7 +807,7 @@
           else if (@type='trouble') then $BOOTSTRAP_ICON_TROUBLE
           else if (@type='danger') then $BOOTSTRAP_ICON_DANGER
           else if (@type='notice') then $BOOTSTRAP_ICON_NOTICE
-          else if (@type='note') then $BOOTSTRAP_ICON_NOTE
+          else if (@type='note' or (contains(@class, ' topic/note ') and not(contains(@class, ' bootstrap-d/alert ')) and not(contains(@class, ' topic/section ')) and empty(@type))) then $BOOTSTRAP_ICON_NOTE
           else ''"
       />
     </xsl:variable>