diff options
| author | Cristián Maureira-Fredes <cristian.maureira-fredes@qt.io> | 2024-12-05 14:44:22 +0100 |
|---|---|---|
| committer | Shyamnath Premnadh <Shyamnath.Premnadh@qt.io> | 2024-12-09 10:11:29 +0100 |
| commit | 83d745497f4d2db0c95e1b3586049b9d68848f7d (patch) | |
| tree | dd0289bf23525c610c4946cf2bce9c7327a6feb5 /sources/pyside6 | |
| parent | 333134bec911e47abccf918905362ecd41bdc532 (diff) | |
Documentation/example_gallery: add card description hover
- Adding the first paragraph (as much as possible)
when the example card is hovered, and use the example headline
as the title of the card.
- Amends 133e8005def4314320062a9a36d950b8692e6f35 by removing
the custom html tag and also merging '.sd-card:hover' into
'.sd-card-hover:hover' to avoid duplication.
Change-Id: I4edf96a5e61138c88a421e70f16ef9bfe4b4e04d
Pick-to: 6.8
Reviewed-by: Shyamnath Premnadh <Shyamnath.Premnadh@qt.io>
Diffstat (limited to 'sources/pyside6')
| -rw-r--r-- | sources/pyside6/doc/_static/css/qt_style.css | 60 |
1 files changed, 49 insertions, 11 deletions
diff --git a/sources/pyside6/doc/_static/css/qt_style.css b/sources/pyside6/doc/_static/css/qt_style.css index a1a8da415..9bec70902 100644 --- a/sources/pyside6/doc/_static/css/qt_style.css +++ b/sources/pyside6/doc/_static/css/qt_style.css @@ -120,25 +120,63 @@ article[role="main"] section[id^="pyside6-"] dl dt span.pre { border-radius: 5px; } -.tutorial-subtitle { - font-size: 1.5em; - font-weight: bold; -} - section#examples .sd-card { transition: transform 0.2s, box-shadow 0.2s; } -section#examples .sd-card:hover { - transform: translateY(-5px); - box-shadow: 0 4px 8px rgba(27, 31, 35, 0.12), 0 12px 48px rgba(27, 31, 35, 0.24); -} - section#examples .sd-card-title { font-size: 1.25em; font-weight: bold; } section#examples .sd-card-body{ - font-size: 0.9em; + font-size: 1em; +} + +/* Example card hover */ +section#examples .cover-img img:hover { + background-color: black; + opacity: 0.3; +} + +section#examples .sd-card { + z-index: 1; + position: relative; +} + +section#examples .sd-card-hover:hover { + background-color: black; + transform: translateY(-5px); + box-shadow: 0 4px 8px rgba(27, 31, 35, 0.12), 0 12px 48px rgba(27, 31, 35, 0.24); +} + +section#examples .sd-card-hover:hover .sd-card-body p { + bottom: 0; + display: block; + left: 0; + position: absolute; + color: white; + right: 0; + top: 0; + padding: 20px; + opacity: 1; + z-index: 5; + background-color: rgba(0,0,0,0.9); +} + +section#examples .sd-card-hover:hover a { + z-index: 7; +} + +section#examples details .sd-card .sd-card-body p { + display: none; +} + +section#examples details .sd-card-body p strong { + display: block; + font-size: 1.5em; +} + +section#examples details .sd-card-title { + font-size: 1.1em; } |