DOC use pydata-sphinx-theme css variables for card backgrounds pandas-dev#51860

Author: stijnvanhoey

doc/source/_static/css/getting_started.css

@@ -10,6 +10,14 @@
   font-size: 0.9rem;
 }
 
+.gs-data-header {
+  background-color: var(--pst-color-on-surface);
+}
+
+.gs-data-list {
+  background-color: var(--pst-color-on-background);
+}
+
 .gs-data-title .badge {
   margin: 10px;
   padding: 5px;
@@ -57,23 +65,26 @@
   margin-top: -5px;
 }
 .gs-callout-remember {
-  border-left-color: #f0ad4e;
+  border-left-color: var(--pst-color-secondary);
   align-items: center;
   font-size: 1.2rem;
 }
 .gs-callout-remember h4 {
-  color: #f0ad4e;
+  color:  var(--pst-color-secondary);
 }
 
 /* reference to user guide */
 .gs-torefguide {
   align-items: center;
   font-size: 0.9rem;
+  background-color: var(--pst-color-on-background);
+  border-radius: .25rem;
+  padding: 2px;
 }
 
 .gs-torefguide .badge {
-  background-color: #130654;
-  margin: 10px 10px 10px 0px;
+  background-color: var(--pst-color-primary);
+  margin: 10px 10px 10px 10px;
   padding: 5px;
 }
 
@@ -113,14 +124,14 @@ ul.task-bullet > li:before {
     margin-left:-2em;
     background-position:center;
     background-repeat:no-repeat;
-    background-color: #130654;
+    background-color: var(--pst-color-primary);
     border-radius: 50%;
     background-size:100%;
     background-image:url('../question_mark_noback.svg');
   }
 
 ul.task-bullet > li {
-  border-left: 1px solid #130654;
+  border-left: 1px solid var(--pst-color-primary);
   padding-left:1em;
 }
 
@@ -132,7 +143,7 @@ ul.task-bullet > li > p:first-child {
 /* Getting started index page */
 
 .comparison-card {
-  background:#FFF;
+  background-color: var(--pst-color-background);
   border-radius:0;
   padding: 30px 10px 10px 10px;
   margin: 10px 0px;
@@ -146,6 +157,7 @@ ul.task-bullet > li > p:first-child {
   margin: 10px;
   margin-bottom: 20px;
   height: 72px;
+  background: none !important;
 }
 
 .comparison-card-excel .card-img-top, .comparison-card-stata .card-img-top, .comparison-card-sas .card-img-top {
@@ -154,7 +166,7 @@ ul.task-bullet > li > p:first-child {
 
 .comparison-card .card-footer {
   border: none;
-  background-color: transparent;
+  background-color: var(--pst-color-background);
 }
 
 .install-block {
@@ -236,15 +248,16 @@ ul.task-bullet > li > p:first-child {
 
 .tutorial-card .card-header {
   cursor: pointer;
-  background-color: transparent;
+  background-color: var(--pst-color-surface);
+  border: 1px solid var(--pst-color-border)
 }
 
 .tutorial-card .card-body {
-  background-color: transparent;
+  background-color: var(--pst-color-on-background);
 }
 
 .tutorial-card .badge {
-  background-color: #130654;
+  background-color: var(--pst-color-primary);
   margin: 10px 10px 10px 10px;
   padding: 5px;
 }
@@ -253,6 +266,7 @@ ul.task-bullet > li > p:first-child {
   margin: 0px;
 }
 
+/*
 .tutorial-card .gs-badge-link a {
   color: white;
   text-decoration: none;
@@ -261,3 +275,4 @@ ul.task-bullet > li > p:first-child {
 .tutorial-card .badge:hover {
   background-color: grey;
 }
+*/

doc/source/_static/css/pandas.css

@@ -48,5 +48,5 @@ table {
 }
 
 .card, .card img {
-  background-color: transparent !important;
+  background-color: var(--pst-color-background);
 }

doc/source/getting_started/index.rst

@@ -537,6 +537,7 @@ Are you familiar with other software for manipulating tablular data? Learn
 the pandas-equivalent operations compared to software you already know:
 
 .. panels::
+    :img-top-cls: dark-light
     :card: + comparison-card text-center shadow
     :column: col-lg-6 col-md-6 col-sm-6 col-xs-12 d-flex
 

doc/source/getting_started/intro_tutorials/02_read_write.rst

@@ -9,13 +9,13 @@
 .. raw:: html
 
     <div class="card gs-data">
-        <div class="card-header">
+        <div class="card-header gs-data-header">
             <div class="gs-data-title">
                 Data used for this tutorial:
             </div>
         </div>
         <ul class="list-group list-group-flush">
-            <li class="list-group-item">
+            <li class="list-group-item gs-data-list">
 
 .. include:: includes/titanic.rst
 
@@ -198,7 +198,7 @@ The method :meth:`~DataFrame.info` provides technical information about a
 
 .. raw:: html
 
-    <div class="d-flex flex-row bg-light gs-torefguide">
+    <div class="d-flex flex-row gs-torefguide">
         <span class="badge badge-info">To user guide</span>
 
 For a complete overview of the input and output possibilities from and to pandas, see the user guide section about :ref:`reader and writer functions <io>`.

doc/source/getting_started/intro_tutorials/03_subset_data.rst

@@ -9,13 +9,13 @@
 .. raw:: html
 
     <div class="card gs-data">
-        <div class="card-header">
+        <div class="card-header gs-data-header">
             <div class="gs-data-title">
                 Data used for this tutorial:
             </div>
         </div>
         <ul class="list-group list-group-flush">
-            <li class="list-group-item">
+            <li class="list-group-item gs-data-list">
 
 .. include:: includes/titanic.rst
 

doc/source/getting_started/intro_tutorials/04_plotting.rst

@@ -16,13 +16,13 @@ How do I create plots in pandas?
 .. raw:: html
 
     <div class="card gs-data">
-        <div class="card-header">
+        <div class="card-header gs-data-header">
             <div class="gs-data-title">
                 Data used for this tutorial:
             </div>
         </div>
         <ul class="list-group list-group-flush">
-            <li class="list-group-item">
+            <li class="list-group-item gs-data-list">
 
 .. include:: includes/air_quality_no2.rst
 

doc/source/getting_started/intro_tutorials/05_add_columns.rst

@@ -9,13 +9,13 @@
 .. raw:: html
 
     <div class="card gs-data">
-        <div class="card-header">
+        <div class="card-header gs-data-header">
             <div class="gs-data-title">
                 Data used for this tutorial:
             </div>
         </div>
         <ul class="list-group list-group-flush">
-            <li class="list-group-item">
+            <li class="list-group-item gs-data-list">
 
 .. include:: includes/air_quality_no2.rst
 

doc/source/getting_started/intro_tutorials/06_calculate_statistics.rst

@@ -9,13 +9,13 @@
 .. raw:: html
 
     <div class="card gs-data">
-        <div class="card-header">
+        <div class="card-header gs-data-header">
             <div class="gs-data-title">
                 Data used for this tutorial:
             </div>
         </div>
         <ul class="list-group list-group-flush">
-            <li class="list-group-item">
+            <li class="list-group-item gs-data-list">
 
 .. include:: includes/titanic.rst
 

doc/source/getting_started/intro_tutorials/07_reshape_table_layout.rst

@@ -9,13 +9,13 @@
 .. raw:: html
 
     <div class="card gs-data">
-        <div class="card-header">
+        <div class="card-header gs-data-header">
             <div class="gs-data-title">
                 Data used for this tutorial:
             </div>
         </div>
         <ul class="list-group list-group-flush">
-            <li class="list-group-item">
+            <li class="list-group-item gs-data-list">
 
 .. include:: includes/titanic.rst
 

doc/source/getting_started/intro_tutorials/08_combine_dataframes.rst

@@ -9,13 +9,13 @@
 .. raw:: html
 
     <div class="card gs-data">
-        <div class="card-header">
+        <div class="card-header gs-data-header">
             <div class="gs-data-title">
                 Data used for this tutorial:
             </div>
         </div>
         <ul class="list-group list-group-flush">
-            <li class="list-group-item">
+            <li class="list-group-item gs-data-list">
                 <div data-toggle="collapse" href="#collapsedata" role="button" aria-expanded="false" aria-controls="collapsedata">
                     <span class="badge badge-dark">Air quality Nitrate data</span>
                 </div>

doc/source/getting_started/intro_tutorials/09_timeseries.rst

@@ -10,13 +10,13 @@
 .. raw:: html
 
     <div class="card gs-data">
-        <div class="card-header">
+        <div class="card-header gs-data-header">
             <div class="gs-data-title">
                 Data used for this tutorial:
             </div>
         </div>
         <ul class="list-group list-group-flush">
-            <li class="list-group-item">
+            <li class="list-group-item gs-data-list">
                 <div data-toggle="collapse" href="#collapsedata" role="button" aria-expanded="false" aria-controls="collapsedata">
                     <span class="badge badge-dark">Air quality data</span>
                 </div>

doc/source/getting_started/intro_tutorials/10_text_data.rst

@@ -9,13 +9,13 @@
 .. raw:: html
 
     <div class="card gs-data">
-        <div class="card-header">
+        <div class="card-header gs-data-header">
             <div class="gs-data-title">
                 Data used for this tutorial:
             </div>
         </div>
         <ul class="list-group list-group-flush">
-            <li class="list-group-item">
+            <li class="list-group-item gs-data-list">
 .. include:: includes/titanic.rst
 
 .. ipython:: python