Skip to content

Commit b398a75

Browse files
stijnvanhoeystijnvanhoey
committed
DOC use pydata-sphinx-theme css variables for card backgrounds pandas-dev#51860 
1 parent b5aec87 commit b398a75

12 files changed

+47
-31
lines changed

‎doc/source/_static/css/getting_started.css

+26-11
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,14 @@
1010
font-size: 0.9rem;
1111
}
1212

13+
.gs-data-header {
14+
background-color: var(--pst-color-on-surface);
15+
}
16+
17+
.gs-data-list {
18+
background-color: var(--pst-color-on-background);
19+
}
20+
1321
.gs-data-title .badge {
1422
margin: 10px;
1523
padding: 5px;
@@ -57,23 +65,26 @@
5765
margin-top: -5px;
5866
}
5967
.gs-callout-remember {
60-
border-left-color: #f0ad4e;
68+
border-left-color: var(--pst-color-secondary);
6169
align-items: center;
6270
font-size: 1.2rem;
6371
}
6472
.gs-callout-remember h4 {
65-
color: #f0ad4e;
73+
color: var(--pst-color-secondary);
6674
}
6775

6876
/* reference to user guide */
6977
.gs-torefguide {
7078
align-items: center;
7179
font-size: 0.9rem;
80+
background-color: var(--pst-color-on-background);
81+
border-radius: .25rem;
82+
padding: 2px;
7283
}
7384

7485
.gs-torefguide .badge {
75-
background-color: #130654;
76-
margin: 10px 10px 10px 0px;
86+
background-color: var(--pst-color-primary);
87+
margin: 10px 10px 10px 10px;
7788
padding: 5px;
7889
}
7990

@@ -113,14 +124,14 @@ ul.task-bullet > li:before {
113124
margin-left:-2em;
114125
background-position:center;
115126
background-repeat:no-repeat;
116-
background-color: #130654;
127+
background-color: var(--pst-color-primary);
117128
border-radius: 50%;
118129
background-size:100%;
119130
background-image:url('../question_mark_noback.svg');
120131
}
121132

122133
ul.task-bullet > li {
123-
border-left: 1px solid #130654;
134+
border-left: 1px solid var(--pst-color-primary);
124135
padding-left:1em;
125136
}
126137

@@ -132,7 +143,7 @@ ul.task-bullet > li > p:first-child {
132143
/* Getting started index page */
133144

134145
.comparison-card {
135-
background:#FFF;
146+
background-color: var(--pst-color-background);
136147
border-radius:0;
137148
padding: 30px 10px 10px 10px;
138149
margin: 10px 0px;
@@ -146,6 +157,7 @@ ul.task-bullet > li > p:first-child {
146157
margin: 10px;
147158
margin-bottom: 20px;
148159
height: 72px;
160+
background: none !important;
149161
}
150162

151163
.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 {
154166

155167
.comparison-card .card-footer {
156168
border: none;
157-
background-color: transparent;
169+
background-color: var(--pst-color-background);
158170
}
159171

160172
.install-block {
@@ -236,15 +248,16 @@ ul.task-bullet > li > p:first-child {
236248

237249
.tutorial-card .card-header {
238250
cursor: pointer;
239-
background-color: transparent;
251+
background-color: var(--pst-color-surface);
252+
border: 1px solid var(--pst-color-border)
240253
}
241254

242255
.tutorial-card .card-body {
243-
background-color: transparent;
256+
background-color: var(--pst-color-on-background);
244257
}
245258

246259
.tutorial-card .badge {
247-
background-color: #130654;
260+
background-color: var(--pst-color-primary);
248261
margin: 10px 10px 10px 10px;
249262
padding: 5px;
250263
}
@@ -253,6 +266,7 @@ ul.task-bullet > li > p:first-child {
253266
margin: 0px;
254267
}
255268

269+
/*
256270
.tutorial-card .gs-badge-link a {
257271
color: white;
258272
text-decoration: none;
@@ -261,3 +275,4 @@ ul.task-bullet > li > p:first-child {
261275
.tutorial-card .badge:hover {
262276
background-color: grey;
263277
}
278+
*/

‎doc/source/_static/css/pandas.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,5 +48,5 @@ table {
4848
}
4949

5050
.card, .card img {
51-
background-color: transparent !important;
51+
background-color: var(--pst-color-background);
5252
}

‎doc/source/getting_started/index.rst

+1
Original file line numberDiff line numberDiff line change
@@ -537,6 +537,7 @@ Are you familiar with other software for manipulating tablular data? Learn
537537
the pandas-equivalent operations compared to software you already know:
538538

539539
.. panels::
540+
:img-top-cls: dark-light
540541
:card: + comparison-card text-center shadow
541542
:column: col-lg-6 col-md-6 col-sm-6 col-xs-12 d-flex
542543

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
.. raw:: html
1010

1111
<div class="card gs-data">
12-
<div class="card-header">
12+
<div class="card-header gs-data-header">
1313
<div class="gs-data-title">
1414
Data used for this tutorial:
1515
</div>
1616
</div>
1717
<ul class="list-group list-group-flush">
18-
<li class="list-group-item">
18+
<li class="list-group-item gs-data-list">
1919

2020
.. include:: includes/titanic.rst
2121

@@ -198,7 +198,7 @@ The method :meth:`~DataFrame.info` provides technical information about a
198198

199199
.. raw:: html
200200

201-
<div class="d-flex flex-row bg-light gs-torefguide">
201+
<div class="d-flex flex-row gs-torefguide">
202202
<span class="badge badge-info">To user guide</span>
203203

204204
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

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
.. raw:: html
1010

1111
<div class="card gs-data">
12-
<div class="card-header">
12+
<div class="card-header gs-data-header">
1313
<div class="gs-data-title">
1414
Data used for this tutorial:
1515
</div>
1616
</div>
1717
<ul class="list-group list-group-flush">
18-
<li class="list-group-item">
18+
<li class="list-group-item gs-data-list">
1919

2020
.. include:: includes/titanic.rst
2121

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,13 @@ How do I create plots in pandas?
1616
.. raw:: html
1717

1818
<div class="card gs-data">
19-
<div class="card-header">
19+
<div class="card-header gs-data-header">
2020
<div class="gs-data-title">
2121
Data used for this tutorial:
2222
</div>
2323
</div>
2424
<ul class="list-group list-group-flush">
25-
<li class="list-group-item">
25+
<li class="list-group-item gs-data-list">
2626

2727
.. include:: includes/air_quality_no2.rst
2828

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
.. raw:: html
1010

1111
<div class="card gs-data">
12-
<div class="card-header">
12+
<div class="card-header gs-data-header">
1313
<div class="gs-data-title">
1414
Data used for this tutorial:
1515
</div>
1616
</div>
1717
<ul class="list-group list-group-flush">
18-
<li class="list-group-item">
18+
<li class="list-group-item gs-data-list">
1919

2020
.. include:: includes/air_quality_no2.rst
2121

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
.. raw:: html
1010

1111
<div class="card gs-data">
12-
<div class="card-header">
12+
<div class="card-header gs-data-header">
1313
<div class="gs-data-title">
1414
Data used for this tutorial:
1515
</div>
1616
</div>
1717
<ul class="list-group list-group-flush">
18-
<li class="list-group-item">
18+
<li class="list-group-item gs-data-list">
1919

2020
.. include:: includes/titanic.rst
2121

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
.. raw:: html
1010

1111
<div class="card gs-data">
12-
<div class="card-header">
12+
<div class="card-header gs-data-header">
1313
<div class="gs-data-title">
1414
Data used for this tutorial:
1515
</div>
1616
</div>
1717
<ul class="list-group list-group-flush">
18-
<li class="list-group-item">
18+
<li class="list-group-item gs-data-list">
1919

2020
.. include:: includes/titanic.rst
2121

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
.. raw:: html
1010

1111
<div class="card gs-data">
12-
<div class="card-header">
12+
<div class="card-header gs-data-header">
1313
<div class="gs-data-title">
1414
Data used for this tutorial:
1515
</div>
1616
</div>
1717
<ul class="list-group list-group-flush">
18-
<li class="list-group-item">
18+
<li class="list-group-item gs-data-list">
1919
<div data-toggle="collapse" href="#collapsedata" role="button" aria-expanded="false" aria-controls="collapsedata">
2020
<span class="badge badge-dark">Air quality Nitrate data</span>
2121
</div>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@
1010
.. raw:: html
1111

1212
<div class="card gs-data">
13-
<div class="card-header">
13+
<div class="card-header gs-data-header">
1414
<div class="gs-data-title">
1515
Data used for this tutorial:
1616
</div>
1717
</div>
1818
<ul class="list-group list-group-flush">
19-
<li class="list-group-item">
19+
<li class="list-group-item gs-data-list">
2020
<div data-toggle="collapse" href="#collapsedata" role="button" aria-expanded="false" aria-controls="collapsedata">
2121
<span class="badge badge-dark">Air quality data</span>
2222
</div>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
.. raw:: html
1010

1111
<div class="card gs-data">
12-
<div class="card-header">
12+
<div class="card-header gs-data-header">
1313
<div class="gs-data-title">
1414
Data used for this tutorial:
1515
</div>
1616
</div>
1717
<ul class="list-group list-group-flush">
18-
<li class="list-group-item">
18+
<li class="list-group-item gs-data-list">
1919
.. include:: includes/titanic.rst
2020

2121
.. ipython:: python

0 commit comments

Comments
 (0)