ids theme: crisper slides menu in Fira Sans Condensed, wider and hanging wraps
Change-Id: Ia6c2e5f440d3b3e177ee37adca0e9ec7ebbfac7e
diff --git a/inst/reveal.js-5.2.1/css/theme/source/ids.scss b/inst/reveal.js-5.2.1/css/theme/source/ids.scss
index a7d5861..06d0179 100644
--- a/inst/reveal.js-5.2.1/css/theme/source/ids.scss
+++ b/inst/reveal.js-5.2.1/css/theme/source/ids.scss
@@ -475,8 +475,67 @@
}
-.slide-menu-items, .slide-menu-toolbar {
- font-family: "Fira Sans" !important;
+/*********************************************
+ * SLIDES MENU
+ *********************************************/
+
+// The menu plugin copies .reveal's computed font-family onto .slide-menu as an
+// inline style (and its own CSS is loaded after the theme), so without
+// !important here the menu would come out in the Libertinus serif body face.
+// Fira Sans Condensed is the IDS sans for navigation/UI text, and its narrow
+// glyphs keep long (German) slide titles on one line.
+.slide-menu-wrapper .slide-menu {
+ font-family: "Fira Sans Condensed", sans-serif !important;
+}
+
+// Widen the menu a little over the plugin's 300px default -- but only the
+// default: a width the user picked via the menu-width option maps to one of
+// the plugin's width classes (or an inline style), which must keep winning.
+.slide-menu-wrapper .slide-menu:not(.slide-menu--wide):not(.slide-menu--half):not(.slide-menu--third):not(.slide-menu--full):not(.slide-menu--custom) {
+ width: 365px !important;
+}
+
+// Tighter, less wasteful rows than the plugin's 10px 18px padding with a 12px
+// icon gap: the icon column and generous side padding eat exactly the width
+// the titles need.
+.slide-menu-wrapper .slide-menu-item,
+.slide-menu-wrapper .slide-menu-item-vertical {
+ padding: 6px 12px !important;
+ line-height: 1.3 !important;
+}
+
+.slide-menu-wrapper .slide-menu-item-vertical {
+ padding-left: 26px !important;
+}
+
+// Wrapped titles: make the row a flex line so the second line aligns with the
+// first instead of sliding under the bullet/circle icon. The icon sits on the
+// first line's text baseline; the title column takes the remaining width and
+// wraps within itself.
+.slide-menu-wrapper .slide-menu-item,
+.slide-menu-wrapper .slide-menu-item-vertical {
+ display: flex !important;
+ align-items: baseline !important;
+}
+
+.slide-menu-wrapper .slide-menu-item-title {
+ flex: 1 !important;
+ min-width: 0 !important;
+}
+
+.slide-menu-wrapper .slide-menu-item i.far,
+.slide-menu-wrapper .slide-menu-item i.fas,
+.slide-menu-wrapper .slide-menu-item-vertical i.far,
+.slide-menu-wrapper .slide-menu-item-vertical i.fas,
+.slide-menu-wrapper .slide-menu-item svg.svg-inline--fa,
+.slide-menu-wrapper .slide-menu-item-vertical svg.svg-inline--fa {
+ padding-right: 8px !important;
+}
+
+// Current slide in the IDS accent colour, matching the slide-number and the
+// orange bar.
+.slide-menu-wrapper .active-menu-panel li.active {
+ color: #{$idsOrange} !important;
}
/*
diff --git a/inst/reveal.js-5.2.1/dist/theme/ids.css b/inst/reveal.js-5.2.1/dist/theme/ids.css
index c6a3233..4d35153 100644
--- a/inst/reveal.js-5.2.1/dist/theme/ids.css
+++ b/inst/reveal.js-5.2.1/dist/theme/ids.css
@@ -634,8 +634,49 @@
height: 100%;
}
-.slide-menu-items, .slide-menu-toolbar {
- font-family: "Fira Sans" !important;
+/*********************************************
+ * SLIDES MENU
+ *********************************************/
+.slide-menu-wrapper .slide-menu {
+ font-family: "Fira Sans Condensed", sans-serif !important;
+}
+
+.slide-menu-wrapper .slide-menu:not(.slide-menu--wide):not(.slide-menu--half):not(.slide-menu--third):not(.slide-menu--full):not(.slide-menu--custom) {
+ width: 365px !important;
+}
+
+.slide-menu-wrapper .slide-menu-item,
+.slide-menu-wrapper .slide-menu-item-vertical {
+ padding: 6px 12px !important;
+ line-height: 1.3 !important;
+}
+
+.slide-menu-wrapper .slide-menu-item-vertical {
+ padding-left: 26px !important;
+}
+
+.slide-menu-wrapper .slide-menu-item,
+.slide-menu-wrapper .slide-menu-item-vertical {
+ display: flex !important;
+ align-items: baseline !important;
+}
+
+.slide-menu-wrapper .slide-menu-item-title {
+ flex: 1 !important;
+ min-width: 0 !important;
+}
+
+.slide-menu-wrapper .slide-menu-item i.far,
+.slide-menu-wrapper .slide-menu-item i.fas,
+.slide-menu-wrapper .slide-menu-item-vertical i.far,
+.slide-menu-wrapper .slide-menu-item-vertical i.fas,
+.slide-menu-wrapper .slide-menu-item svg.svg-inline--fa,
+.slide-menu-wrapper .slide-menu-item-vertical svg.svg-inline--fa {
+ padding-right: 8px !important;
+}
+
+.slide-menu-wrapper .active-menu-panel li.active {
+ color: #f6a800 !important;
}
/*