Skip to content

Commit 845a38b

Browse files
meeseeksmachinestijnvanhoey
meeseeksmachine
and
stijnvanhoey
authored
Backport PR #52097 on branch 2.0.x (DOC: improve (dark) theme getting started tutorials) (#52320)
Backport PR #52097: DOC: improve (dark) theme getting started tutorials Co-authored-by: Stijn Van Hoey <[email protected]>
1 parent 9fa09a0 commit 845a38b

12 files changed

+50
-49
lines changed

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

+26-27
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,45 +65,33 @@
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

80-
.gs-torefguide a {
81-
margin-left: 5px;
82-
color: #130654;
83-
border-bottom: 1px solid #FFCA00f3;
84-
box-shadow: 0px -10px 0px #FFCA00f3 inset;
85-
}
86-
8791
.gs-torefguide p {
8892
margin-top: 1rem;
8993
}
9094

91-
.gs-torefguide a:hover {
92-
margin-left: 5px;
93-
color: grey;
94-
text-decoration: none;
95-
border-bottom: 1px solid #b2ff80f3;
96-
box-shadow: 0px -10px 0px #b2ff80f3 inset;
97-
}
98-
9995
/* question-task environment */
10096

10197
ul.task-bullet, ol.custom-bullet{
@@ -113,14 +109,14 @@ ul.task-bullet > li:before {
113109
margin-left:-2em;
114110
background-position:center;
115111
background-repeat:no-repeat;
116-
background-color: #130654;
112+
background-color: var(--pst-color-primary);
117113
border-radius: 50%;
118114
background-size:100%;
119115
background-image:url('../question_mark_noback.svg');
120116
}
121117

122118
ul.task-bullet > li {
123-
border-left: 1px solid #130654;
119+
border-left: 1px solid var(--pst-color-primary);
124120
padding-left:1em;
125121
}
126122

@@ -132,7 +128,7 @@ ul.task-bullet > li > p:first-child {
132128
/* Getting started index page */
133129

134130
.comparison-card {
135-
background:#FFF;
131+
background-color: var(--pst-color-background);
136132
border-radius:0;
137133
padding: 30px 10px 10px 10px;
138134
margin: 10px 0px;
@@ -146,6 +142,7 @@ ul.task-bullet > li > p:first-child {
146142
margin: 10px;
147143
margin-bottom: 20px;
148144
height: 72px;
145+
background: none !important;
149146
}
150147

151148
.comparison-card-excel .card-img-top, .comparison-card-stata .card-img-top, .comparison-card-sas .card-img-top {
@@ -154,7 +151,7 @@ ul.task-bullet > li > p:first-child {
154151

155152
.comparison-card .card-footer {
156153
border: none;
157-
background-color: transparent;
154+
background-color: var(--pst-color-background);
158155
}
159156

160157
.install-block {
@@ -236,15 +233,16 @@ ul.task-bullet > li > p:first-child {
236233

237234
.tutorial-card .card-header {
238235
cursor: pointer;
239-
background-color: transparent;
236+
background-color: var(--pst-color-surface);
237+
border: 1px solid var(--pst-color-border)
240238
}
241239

242240
.tutorial-card .card-body {
243-
background-color: transparent;
241+
background-color: var(--pst-color-on-background);
244242
}
245243

246244
.tutorial-card .badge {
247-
background-color: #130654;
245+
background-color: var(--pst-color-primary);
248246
margin: 10px 10px 10px 10px;
249247
padding: 5px;
250248
}
@@ -253,8 +251,9 @@ ul.task-bullet > li > p:first-child {
253251
margin: 0px;
254252
}
255253

254+
256255
.tutorial-card .gs-badge-link a {
257-
color: white;
256+
color: var(--pst-color-text-base);
258257
text-decoration: none;
259258
}
260259

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ table {
2525
.intro-card .card-img-top {
2626
margin: 10px;
2727
height: 52px;
28+
background: none !important;
2829
}
2930

3031
.intro-card .card-header {
@@ -48,5 +49,5 @@ table {
4849
}
4950

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

‎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

+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

@@ -27,7 +27,7 @@
2727
.. raw:: html
2828

2929
</li>
30-
<li class="list-group-item">
30+
<li class="list-group-item gs-data-list">
3131
<div data-toggle="collapse" href="#collapsedata2" role="button" aria-expanded="false" aria-controls="collapsedata2">
3232
<span class="badge badge-dark">Air quality data</span>
3333
</div>

‎doc/source/getting_started/intro_tutorials/08_combine_dataframes.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
<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>
@@ -49,7 +49,7 @@ Westminster* in respectively Paris, Antwerp and London.
4949
.. raw:: html
5050

5151
</li>
52-
<li class="list-group-item">
52+
<li class="list-group-item gs-data-list">
5353
<div data-toggle="collapse" href="#collapsedata2" role="button" aria-expanded="false" aria-controls="collapsedata2">
5454
<span class="badge badge-dark">Air quality Particulate matter data</span>
5555
</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)