pybamm.org/assets/css/overrides.css at 3980ea33d1bb23e9f141ecc7fe017ceb2cc8312a · pybamm-team/pybamm.org · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/* White backgrounds behind images */

figure {
    background-color: white;
    padding: 15px;
    border-radius: 15px;
}

/* Captions should be black above white background */

figure figcaption p span {
    color: black !important;
}

/* Let table of contents inherit the bounds set by the
content-container class */
#TableOfContents {
    position: inherit;
}

/* Making the buttons container flex */

.custom-flex-btns{
    display:flex;
    align-items: center;
    justify-content: space-evenly;
}

/* Customizing the buttons */

.custom-flex-btns p a{
    display:block !important;
    min-width:40%!important;
    max-width:40%;
    text-decoration: none;
}

/* More gaps for footer columns because of external link indicators */
.footer-column {
    margin-right: 2em;
}

/* Don't set widths for 100% of the viewport for these, just the screen. */
.news-container, .hero-container {
    width: 100%;
}

/* Admonitions

Rely on the theme's admonition styling. Only apply minimal readability fixes
so content remains accessible in dark mode across themes.
*/
.adm { opacity: 1; }
.adm a { text-decoration: underline; }

@media (prefers-color-scheme: dark) {
  /* Ensure admonitions stay readable even if the theme uses light backgrounds */
  .article .adm, .article .adm *,
  .content .adm, .content .adm *,
  .markdown .adm, .markdown .adm * {
    color: var(--text, #f1f5f9) !important;
  }
  .adm a { color: var(--primary, #9ae6b4) !important; }
  /* Provide a gentle dark surface without hardcoding brand colors */
  .adm { background: var(--surface-2, rgba(255,255,255,0.06)) !important; }
}

/* Jobs board styles

Use theme variables where available and avoid hardcoded colors.
*/
.job-card {
  border: 1px solid var(--border, rgba(0,0,0,0.15));
  padding: 1rem;
  border-radius: 6px;
  margin: 1rem 0;
  background: var(--surface, transparent);
}
.job-card__header { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.job-card__title { margin: 0; font-size: 1.15rem; }
.job-card__entity { color: var(--text-muted, inherit); font-weight: 600; }
.job-card__meta, .job-card__dates { display: flex; flex-wrap: wrap; gap: .5rem .5rem; margin: .5rem 0; }
/* Make badges robust against missing flex-gap support and theme overrides */
.job-badge {
  display: inline-flex;
  align-items: center;
  background: var(--surface-2, rgba(0,0,0,0.04));
  border: 1px solid var(--border, rgba(0,0,0,0.15));
  padding: .15rem .4rem;
  border-radius: 999px;
  font-size: .85rem;
  color: var(--text, inherit);
  margin-right: .5rem; /* fallback spacing if gap isn't honored */
  margin-bottom: .5rem; /* wrap spacing */
}
.job-card__dates span { margin-right: .75rem; }
.job-card__description { margin: .5rem 0; color: inherit; line-height: 1.55; }
.job-card__description ul, .job-card__description ol { margin: .5rem 0 .5rem 1.25rem; }
.job-card__apply .button { display: inline-block; }
.job-card--archived { opacity: .85; }