MediaWiki:Common.css
From Psalms: Layer by Layer
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* LIVE 2*/
/* CSS placed here will be applied to all skins */
/* Also see ../customizations/custom.* on the filesystem */
/* =================================== */
/* === ALL PAGES, ALL SKINS */
/* =================================== */
/* See wgHooks for loading google fonts in the head block */
/* Hebrew font */
@font-face {
font-family: "SBL Hebrew";
unicode-range: U+0590-05FF;
src: url("/customizations/SBL-Hebrew/subset-hebrew/SBL-Hebrew.woff2") format("woff2"),
url("/customizations/SBL-Hebrew/subset-hebrew/SBL-Hebrew.woff") format("woff");
font-display: swap;
}
/* Greek font */
@font-face {
font-family: "Gentium Plus";
unicode-range: U+0370-03FF, U+1F00-1FFF;
src: url("/customizations/Gentium-Plus/subset-greek/GentiumPlus-Regular.woff2") format("woff2"),
url("/customizations/Gentium-Plus/subset-greek/GentiumPlus-Regular.woff") format("woff");
font-display: swap;;
}
/* Simple RTL text direction changes. See https://css-tricks.com/almanac/properties/d/direction/ */
*[dir="ltr"] { direction: ltr; unicode-bidi: embed; }
*[dir="rtl"] { direction: rtl; unicode-bidi: embed; text-align: right; }
bdo[dir="ltr"] { direction: ltr; unicode-bidi: bidi-override; }
bdo[dir="rtl"] { direction: rtl; unicode-bidi: bidi-override; text-align: right; }
span[dir] { unicode-bidi: bidi-override; }
/* === CSS Variables === */
:root {
/* === Font Families === */
--font-serif: "SBL Hebrew", "Gentium Plus", "Lora", serif;
--font-sans: "SBL Hebrew", "Gentium Plus", "Open Sans", "Segoe UI", "Helvetica Neue", "Roboto", Arial, sans-serif;
/* === Brand Colors === */
--color-brand-red2: #7d2b2d;
--color-brand-red1: #9a393b;
--color-brand-orange: #de835e;
--color-brand-mustard1: #f2c256;
--color-brand-mustard2: #ffd85c;
--color-brand-green: #28615e;
--color-brand-blue: #3eb9cf;
--color-brand-dark-gray: #382c34;
--color-brand-sand: #f4eadb;
/* === Brand Colors & Variations, with Consistent Naming === */
--color-red-dark: var(--color-brand-red2);
--color-red: var(--color-brand-red1);
--color-red-light: #c85a5e;
--color-red-lighter: #dc8786;
--color-red-lightest: #efb0af;
--color-orange-dark: #c76e4e;
--color-orange: var(--color-brand-orange);
--color-mustard: var(--color-brand-mustard1);
--color-mustard-light: var(--color-brand-mustard2);
--color-green: var(--color-brand-green);
--color-blue-darkest: #2a6170;
--color-blue-darker: #317a88;
--color-blue-dark: #369aae;
--color-blue: var(--color-brand-blue);
--color-black: #000000;
--color-gray: var(--color-brand-dark-gray);
--color-gray-light: #7a6f73;
--color-gray-lighter: #a49a9d;
--color-sand-dark: #cbbfb4;
--color-sand: var(--color-brand-sand);
--color-sand-light: #f8f3eb;
--color-sand-lighter: #fbf9f4;
--color-sand-lightest: #fdfcf8;
--color-white: #ffffff;
/* === Semantic: Text Colors === */
--color-text: var(--color-gray); /* Body text */
--color-text-light: var(--color-gray-light); /* Lighter secondary text */
--color-text-dark: var(--color-black); /* High-contrast fallback */
--color-text-muted: var(--color-sand-dark); /* Muted/disabled tone */
--color-text-accent: var(--color-sand-lighter); /* Faint highlight */
--color-text-accent-light: var(--color-sand-lightest); /* Near-white highlight */
/* === Semantic: Headings === */
--color-heading-main: var(--color-red); /* Main headings */
--color-heading-sub: var(--color-blue-dark); /* Subheadings */
/* === Semantic: Link Colors === */
--color-link-default: var(--color-blue-darker); /* Normal link color */
--color-link-hover: var(--color-blue-dark); /* Link hover color */
--color-link-new: var(--color-red); /* Redlink (non-existent page) */
--color-link-new-hover: var(--color-red-dark); /* Redlink hover */
/* === Semantic: Backgrounds === */
--color-background: var(--color-sand-lighter); /* General background */
--color-background-dark: var(--color-sand); /* Darker general background */
--color-background-light: var(--color-sand-lightest); /* General background */
/* === Semantic: Legend / Status Colors === */
--color-legend-completed: var(--color-red);
--color-legend-inprogress: var(--color-orange);
--color-legend-planning: var(--color-sand);
}
body {
font-family: var(--font-sans);
font-size: 16px; /* default for tweeki skin is 14px */
line-height: 1.6;
background-color: var(--color-background-light);
background-color: var(--color-white);
color: var(--colortext);
}
/* Headings */
h1, .h1 {
font-family: var(--font-serif);
font-size: 3.0rem;
font-weight: 600;
color: var(--color-heading-main);
letter-spacing: 0em;
word-spacing: 0em;
margin-top: 3.2rem;
margin-bottom: 1.2rem;
}
#bodyContent h1:not(:first-of-type):before,
#bodyContent .h1:not(:first-of-type):before {
display: block;
content: "";
padding: 2rem 0 0 !important;
border-top: 1px solid #ddd;
height: 1px;
width: 100%;
}
#bodyContent h1:first-of-type {
margin-top: 2.0rem;
}
h2, .h2 {
font-family: var(--font-serif);
font-size: 2.1rem;
font-weight: 600;
color: var(--color-heading-main);
letter-spacing: 0.01em;
word-spacing: 0.01em;
margin-top: 2.5rem;
margin-bottom: 1.0rem;
}
h3, .h3 {
font-family: var(--font-serif);
font-size: 1.5rem;
font-size: 1.7rem;
font-weight: 600;
color: var(--color-gray);
letter-spacing: 0.015em;
word-spacing: 0.02em;
margin-top: 2.0rem;
margin-bottom: 0.75rem;
}
h4, .h4 {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 600;
color: var(--color-heading-sub);
letter-spacing: 0.03em;
word-spacing: 0.03em;
margin-top: 1.6rem;
margin-bottom: 0.6rem;
text-transform: uppercase;
}
h5, .h5 {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 600;
color: var(--color-gray);
letter-spacing: 0.01em;
word-spacing: 0.02em;
margin-top: 1.3rem;
margin-bottom: 0.54em;
}
h6, .h6 {
font-family: var(--font-serif);
font-size: 0.95rem;
font-weight: 600;
color: var(--color-heading-sub);
letter-spacing: 0.02em;
word-spacing: 0.02em;
margin-top: 1.0rem;
margin-bottom: 0.3rem;
text-transform: uppercase;
}
/* Reduce top margin between any two stacked headings */
h1 + h2,
h1 + h3,
h1 + h4,
h2 + h3,
h2 + h4,
h3 + h4,
h3 + h5,
h4 + h5,
h5 + h6 {
margin-top: 0.5rem;
}
.firstHeading, .tweekiFirstHeading {
font-weight: 600;
letter-spacing: 0em;
color: var(--color-gray);
}
h1.firstHeading, h1.tweekiFirstHeading {
margin-top: 0;
}
h1 .heHeading {
padding-inline: 1%;
}
/* Hebrew specific headings and text */
.heHeading {
font-size: 115%;
line-height: 120%;
padding-inline: 0.25%;
letter-spacing: -1%;
word-spacing: 50%;
direction: rtl;
unicode-bidi: isolate;
display: inline-block; /* Needed for padding to work on inline headings */
overflow: visible;
text-transform: none;
}
.he {
font-size: 120%;
line-height: 125%; /* a rough calculation of a browser's line-height:normal value of ~1.2 applied as follows: ~1.2 × 1.25 = 1.5, which is the line-height for the entire page */
padding-inline: 0.2%;
letter-spacing: 1%;
word-spacing: 50%;
text-transform: none;
vertical-align: baseline;
direction: rtl;
unicode-bidi: isolate;
display: inline;
overflow: visible;
text-transform: none;
}
.lead {
font-family: var(--font-serif);
color:#000000;
}
.lead b, .lead strong {
font-weight: bold;
}
#bodyContent #contentSub {
margin-left: 0;
}
#siteNotice {
background-color: var(--color-mustard-light);
}
#siteNotice h1 {
margin-top: 0;
color: #000;
}
#tweekiTOC #toctitle h2,
#tweekiTOC .toctitle h2 {
font-family: var(--font-sans);
font-weight: 600;
color: var(--color-gray-light);
margin-bottom: 0.2rem;
}
tweekiTOC #toctitle h2 a,
#tweekiTOC .toctitle h2 a {
font-weight: 600;
color: var(--color-gray-light);
}
/* collapse completely empty <p> tags and <p><br></p> tags */
p:empty:not(:focus),
p > br:only-child:not(:focus) {
display: none;
}
/* navbar adjustments */
#mw-navigation {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.bg-light {
background-color: var(--color-sand-light) !important;
}
#searchInput {
min-width: 255px;
font-size: 0.9rem;
}
.navbar {
background-color: var(--color-sand);
font-size: 0.9rem;
}
.navbar a {
font-size: 0.9rem;
}
.navbar a, .navbar a:visited {
color: var(--color-gray-light);
}
.navbar a:hover, .navbar a:focus, .navbar a:active {
color: var(--color-gray);
}
.navbar-brand img {
height: 30px;
margin-top: 0;
}
header .navbar-nav .nav-item {
padding-right: 10px;
}
/* for images that exceed the page width, put a <div class="img-fluid"> around them */
.responsive-img img {
max-width: 100%;
height: auto;
}
footer#footer {
padding-top: 0;
padding-bottom: 0;
}
footer#footer #n-login-ext {
-webkit-appearance: none;
}
/* Link styles */
a, a:visited,
#content a, #content a:visited {
color: var(--color-link-default);
}
a:hover, a:focus,
#content a:hover, #content a:focus {
color: var(--color-link-hover);
text-decoration: underline;
}
a.external, a.external:visited,
#content a.external, #content a.external:visited {
color: var(--color-link-default) !important;
}
a.external:hover, a.external:focus,
#content a.external:hover, #content a.external:focus {
color: var(--color-link-hover) !important;
}
a.new, a.new:visited,
#content a.new, #content a.new:visited {
/* class automatically assigned for links to pages that do not yet exist */
color: var(--color-link-new);
}
a.new:hover, a.new:focus,
#content a.new:hover, #content a.new:focus {
color: var(--color-link-new-hover);
}
#tweekiTOC #toc a, #tweekiTOC #toc a:visited {
color: var(--color-gray-lighter);
}
#tweekiTOC #toc a.active, #tweekiTOC #toc a:focus, #tweekiTOC #toc a:hover {
color: var(--color-gray);
}
/* for MsUpload */
#msupload-dropzone, #msupload-bottom {
height: auto;
}
/* remove excess and irregular gutters to get more usable display area at every screen size */
/* for bootstrap 4 tweeki skin */
#content.mw-body {
padding-left: 0;
padding-right: 0;
}
@media (min-width: 576px) {
nav#mw-navigation > div.container {
padding-left: 15px;
padding-right: 15px;
}
}
/* hide sidebsar-right on small screens rather than displaying at the bottom of the screen */
div#sidebar-right {
display: none;
}
@media (min-width: 768px) { /* Show sidebar on md (≥768px) and larger */
div#sidebar-right {
display: block;
}
}
/* glyphicons are a tad tall and mess up vertical spacing, especially in the EDIT split dropdown button group */
#sidebar-right > .btn-block > a > .glyphicon {
line-height: 0.9;
}
/* When editing a page, stop sidebar getting in the way of SMW Form edit tools by shortening the sidebar */
#contentwrapper.editable #sidebar-right {
height: 50px;
}
/* Accordion styling */
.accordion {
margin: 0 0 1.6em 1.6em;
}
.card {
background-color: unset;
border: 0;
padding: 0;
}
.card-header {
padding: 0;
background-color: unset;
border-bottom: 0;
}
.card-header h2 {
margin-top: 0;
font-family: var(--font-sans);
}
.card-header .btn {
padding: 0;
}
.card-body {
padding: 0;
}
.card-body pre {
margin-bottom: 0;
}
.user-show, .editor-show {
display: none;
}
/* these were used on timeless skin. still relevant with tweeki? */
.list-I li {
list-style-type: upper-roman;
}
.list-A li {
list-style-type: upper-alpha;
margin-left: 40px;
}
.list-1 li {
list-style-type: decimal;
margin-left: 80px;
}
.list-a li {
list-style-type: lower-alpha;
margin-left: 120px;
}
/* Enable PageForms spreadsheet-style grid to autogrow */
.jsgrid {
height: unset !important;
overflow: auto;
}
.jsgrid-grid-body { height: unset; overflow: auto;
}
.jsgrid-grid-table { height: unset; overflow: auto;
}
.outline > li {
list-style-type: upper-roman;
}
.outline > li > li {
list-style-type: upper-alpha;
margin-left: 40px;
}
.wikitable {
width:100%
}
/* =================================== */
/* === STYLES FOR SPECIFIC PAGES === */
/* =================================== */
/* === Page: Welcome === */
/* Nav boxes linking to other Scriptura sites */
.page-welcome .nav-boxes {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-between;
}
.page-welcome .nav-boxes .nav-box {
flex-grow: 1;
display: flex;
align-items: flex-end;
justify-content: center;
padding-top: 1rem;
padding-bottom: 1rem;
}
.page-welcome .nav-boxes .nav-box:nth-child(even) {
background: #FBF9F7;
}
.page-welcome .nav-boxes .nav-box:nth-child(odd) {
background: #F3EEE6;
}
.page-welcome .nav-boxes .nav-box p {
display: flex;
flex-direction: column;
text-align: center;
}
.page-welcome .nav-boxes .nav-box img {
max-width: 100%;
height: auto;
padding: 1rem;
}
/* Index of psalms */
.page-welcome .index {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.page-welcome .index .index-item {
width: 3.2em; /*1.7em;*/
font-size: 1.5em;
text-align: right;
padding: .3em .5em;
}
.page-welcome .index .link-deemphasize a {
color: #888;
font-weight: lighter;
}
/* Color Legend */
/* Color variants */
.legend-completed { background-color: var(--color-legend-completed); }
.legend-inprogress { background-color: var(--color-legend-inprogress); }
.legend-planning { background-color: var(--color-legend-planning); }
/* Container for legend items */
.color-legend-container {
max-width: 600px;
margin: 0 auto;
padding-top: 1rem;
transform: scale(0.7);
}
.color-legend-row {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-wrap: wrap;
}
/* Shared styling for outer circle */
.legend-circle-outer {
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid white;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
/* Shared styling for inner circle */
.legend-circle-inner {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid white;
position: relative;
text-align: center;
line-height: 50px;
font-weight: bold;
font-size: 16px;
display: inline-block;
}
/* Label text below icon */
.legend-label {
padding: 0.25rem;
}
/* === Page: Access Request Thank You === */
.page-Request_Access_Thank_You #contentSub { display: none; }
/* === Page: all pages using the GrammarLayerSection tempalte === */
/* Increase Hebrew text size (but not Hebrew text in svg diagrams) */
.GrammarLayerSection > .hebrew {
font-size: 1.75rem;
text-align: right;
}
/* === Gray out Diagrammer glosses when there is a phrase-level gloss as a sibling === */
/* This should be done in the diagrammer itself. */
/* This solution is slow for large DOMs and isn't supported in older browsers */
/* The idea is to find any parent of a g.phrase-gloss and from there find all descendants with class="hebrew" and target the text or tspan tag below it */
*:has( > g.phrase-gloss) .gloss text,
*:has( > g.phrase-gloss) .gloss tspan {
fill:#aaa;
}
/* =================================== */
/* ====== MICHAEL'S CSS EDITS ======= */
/* =================================== */
/* === Page: ResourceSite/Welcome-Mike === */
/* == Centering Items in the "mw-parser-output" element == */
.page-ResourceSite_Welcome-Mike #maincontentwrapper {
display: flex;
flex-direction: column;
justify-content: center;
padding: 120px;
}
/* == Adjusting the nav boxes and putting the index in columns and rows == */
.page-ResourceSite_Welcome-Mike .nav-boxes {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
}
.page-ResourceSite_Welcome-Mike .nav-boxes .nav-box {
flex-grow: 1;
display: flex;
align-items: flex-end;
justify-content: center;
}
.page-ResourceSite_Welcome-Mike .nav-boxes .nav-box:nth-child(even) {
background: #FBF9F7;
}
.page-ResourceSite_Welcome-Mike .nav-boxes .nav-box:nth-child(odd) {
background: #F3EEE6;
}
.page-ResourceSite_Welcome-Mike .nav-boxes .nav-box p {
display: flex;
flex-direction: column;
text-align: center;
}
.page-ResourceSite_Welcome-Mike .nav-boxes .nav-box img {
max-width: 100%;
height: auto;
padding: 1rem;
}
/* Index of psalms */
.page-ResourceSite_Welcome-Mike .index {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.page-ResourceSite_Welcome-Mike .index .index-item {
width: 3.2em; /*1.7em;*/
font-size: 1.5em;
text-align: right;
padding: .3em .5em;
}
.page-ResourceSite_Welcome-Mike .index .link-deemphasize a {
color: #888;
font-weight: lighter;
}
/* == Using negative margins to cover over the whitespace == */
.page-ResourceSite_Welcome-Mike .mw-body {
margin-top: -150px !important;
}
/* == Editing the Header Title == */
.page-ResourceSite_Welcome-Mike .firstHeading {
color: #333;
display: none !important;
opacity: 0 !important;
}
.image-gallery {
display: flex;
flex-wrap: wrap; /* Allows wrapping to next line if needed */
gap: 10px; /* Space between items */
justify-content: center; /* Center align the gallery */
}
.image-gallery-item {
text-align: center; /* Centers captions under the image */
width: 300px; /* Ensures a consistent width for each item */
flex: 0 1 auto; /* Prevents items from stretching unevenly */
}
.image-gallery-item img {
width: 100%; /* Ensures images fit within their container */
height: auto; /* Maintains the aspect ratio */
}
/* =================================== */
/* ====== RESOURCE SITE V2 CSS ====== */
/* =================================== */
/* == Highlights anchor text when clicking on an anchor link == */
span:target {
background-color: #EAF3FF;
}
p:target {
background-color: #EAF3FF;
}
/* == Responsive grid for cards == */
.cards {
max-width: 1200px;
margin: 0 auto;
display: grid;
gap: 1rem;
}
@media (min-width: 1080px) {
.cards { grid-template-columns: repeat(2, 1fr); }
}
/* == Force scrollbars to be visible on MacOS == */
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
/* == Adjust elements for mobile == */
@media screen and (min-width: 960px) { /* Desktop view */
.responsive {
overflow-y:scroll;
height:75vh;
}
}
@media screen and (max-width: 960px) { /* Mobile view */
.responsive {
display: block;
}
}
@media screen and (min-width: 960px) { /* Desktop view */
.responsive-med {
overflow-y:scroll;
}
}
@media screen and (max-width: 960px) { /* Mobile view */
.responsive-med {
display: block;
}
}
@media screen and (min-width: 960px) { /* Desktop view */
.sbs-container {
display: flex;
position:relative;
overflow-y:scroll;
flex:1
}
}
@media screen and (max-width: 960px) { /* Mobile view */
.sbs-container {
display: block;
}
}
@media screen and (min-width: 960px) { /* Desktop view */
.sbs {
display: flex;
flex-direction: column;
position:absolute;
}
}
@media screen and (max-width: 960px) { /* Mobile view */
.sbs {
display:block;
}
}
/*
:not(.limiter)>div {
flex-basis: 0px;
flex-grow: 1;
overflow-y: auto;
}
*/
/* TOC Buttons */
.grid-container {
display: grid;
gap: 10px;
grid-template-columns: repeat(5, 1fr);
}
/* Cropped banners */
@media screen and (min-width: 960px) { /* Desktop view */
.cropped {
aspect-ratio: 5 / 1;
width:100%;
height:auto;
object-fit: cover;
object-position: 50% 50%;
}
}
@media screen and (max-width: 960px) { /* Mobile view */
.cropped {
aspect-ratio: 16 / 9;
width:100%;
height:auto;
object-fit: cover;
object-position: 50% 50%;
}
}
.cropped-home {
aspect-ratio: 16 / 9;
width:100%;
height:auto;
object-fit: cover;
object-position: 50% 50%;
}
@media screen and (min-width: 960px) { /* Desktop view */
.banner-mobile {
display:none;
}
.banner-desktop {
width:100%;
height:auto;
}
}
@media screen and (max-width: 960px) { /* Mobile view */
.banner-desktop {
display:none;
}
.banner-mobile {
width:100%;
height:auto;
}
}
/* Banner text overlay */
/* Container holding the image and the text */
.banner-container {
position: relative;
display:inline-block;
color: white;
}
.mid {
font-weight: 900;
color: white;
margin: 0;
position: absolute;
display:inline-block;
text-align:center;
top: 50%;
left: 50%;
font-size: 2rem;
filter:drop-shadow(5px 5px 4px #000000);
transform: translate(-50%, -50%);
}
/* Centered text */
.centered {
position: absolute;
display:inline-block;
width:100%;
text-align:center;
vertical-align:middle;
font-family: var(--font-serif);
color:#ffffff;
filter:drop-shadow(5px 5px 4px #000000);
}
/* Banner text overlay */
@media screen and (min-width: 960px) { /* Desktop view */
.banner-text-h1 {
font-size:2em;
}
}
@media screen and (min-width: 960px) { /* Desktop view */
.banner-text-h3 {
font-size:1.5em;
}
}
/* == Floating buttons == */
@media screen and (min-width: 960px) { /* Desktop view */
.float-button{
position:fixed;
width:50px;
height:50px;
border-radius: 50%;
border:none;
background-color: var(--color-red);
display:flex;
align-items:center;
justify-content:center;
color:white !important;
bottom: 10px;
right:10px;
z-index:9999;
}
}
@media screen and (max-width: 960px) { /* Mobile view */
.float-button{
position:fixed;
width:50px;
height:50px;
border-radius: 50%;
border:none;
background-color:var(--color-red);
display:flex;
align-items:center;
justify-content:center;
color:white !important;
bottom: 10px;
right:10px;
z-index:9999;
}
}
@media screen and (min-width: 960px) { /* Desktop view */
.navi-button{
border-radius: 12px;
border:none;
background-color:var(--color-red);
display:inline-block;
padding:0.5rem;
align-items:center;
justify-content:center;
color:white !important;
z-index:9999;
}
}
@media screen and (max-width: 960px) { /* Mobile view */
.navi-button{
position:fixed;
width:50px;
height:50px;
border-radius: 50%;
border:none;
background-color:var(--color-red);
display:flex;
align-items:center;
justify-content:center;
color:white !important;
bottom: 10px;
left:10px;
z-index:9999;
}
}
@media screen and (min-width: 960px) { /* Desktop view */
.ps-navi {
position:fixed;
top:70px;
left:85px;
border-radius: 12px;
border:none;
background-color:var(--color-red);
color:white !important;
z-index:9999;
height: 50px;
width:auto;
max-width:50px;
display: inline-flex;
align-items: center;
justify-content: flex-start;
overflow:hidden;
-webkit-transition: max-width 0.5s;
transition: max-width 0.5s;
}
}
@media screen and (min-width: 960px) { /* Desktop view */
.ps-navi:hover {
max-width: 24rem;
}
}
@media screen and (max-width: 960px) { /* Mobile view */
.ps-navi{
position:fixed;
width:50px;
height:50px;
border-radius: 12px;
border:none;
background-color:var(--color-red);
display:flex;
align-items:center;
justify-content: flex-start;
color:white !important;
top: 70px;
left:10px;
z-index:9999;
}
}
@media screen and (min-width: 960px) { /* Desktop view */
.ps-navi-vxv {
border-radius: 12px;
border:none;
background-color:var(--color-red);
color:white !important;
z-index:9999;
height: 50px;
width:auto;
max-width:50px;
display: inline-flex;
align-items: center;
justify-content: flex-start;
overflow:hidden;
-webkit-transition: max-width 0.5s;
transition: max-width 0.5s;
}
}
@media screen and (min-width: 960px) { /* Desktop view */
.ps-navi-vxv:hover {
max-width: 24rem;
}
}
@media screen and (max-width: 960px) { /* Mobile view */
.ps-navi-vxv{
width:50px;
height:50px;
border-radius: 12px;
border:none;
background-color:var(--color-red);
display:flex;
align-items:center;
justify-content: flex-start;
color:white !important;
z-index:9999;
}
}
.dropdown-menu{
max-height: 75vh;
overflow-y: auto;
z-index:9999;
}
@media screen and (max-width: 960px) { /* Mobile view */
.btn-hide-text {
display: none;
}
.btn-hide-text .fa {
display:inline;
}
}
a.ps-navi.dropdown-toggle::after {
margin-right: 13px; /* Space between the caret and the edge */
font-size: inherit; /* Prevents the caret from becoming too large */
vertical-align: middle; /* Keeps caret aligned with text */
}
a.ps-navi-vxv.dropdown-toggle::after {
margin-right: 13px; /* Space between the caret and the edge */
font-size: inherit; /* Prevents the caret from becoming too large */
vertical-align: middle; /* Keeps caret aligned with text */
}
.navi-hide-text {
white-space: nowrap;
padding-left: 15px;
max-height:1rem;
-webkit-transition: color .25s 1.5s, max-width 2s;
overflow: hidden;
}
@media screen and (max-width: 960px) { /* Mobile view */
.navi-hide-text {
display: none;
}
.navi-hide-text .fa {
display:inline;
}
}
.flex-icon {
margin-right: 1rem;
display: flex;
align-items: center;
}
/* Drop-shadow for AAG icons */
.aag-icon {
filter:drop-shadow(1px 1px 1px #000);
}
/* glosses for joint hovering over Hebrew & English */
.word, .gloss {
cursor: pointer;
/*padding: 2px 4px;*/
/*border-radius: 4px;*/
transition: background 0.15s ease;
}
.highlighted {
background-color: #ffff99;
}
/* try to REMOVE the extra space put between Hebrew words */
span.word, span.hebrew {
font-family: inherit;
font-size: inherit;
direction: rtl;
white-space: nowrap;
display: inline-block;
margin: 0;
padding: 0;
border: none;
letter-spacing: -0.05em; /* optional tweak */
}
/*Tab background colors*/
.nav-tabs .nav-link:hover {
background-color: #f6f6f6;
}
.nav-tabs .nav-link.active {
border-top: 3px solid var(--color-red);
border-left: 1px solid var(--color-red);
border-right: 1px solid var(--color-red);
}
/* Overlay highlighting style */
span.hebrew {
padding-top: 3px;
padding-bottom:3px;
}
span.gloss {
padding-top: 3px;
padding-bottom: 3px;
}
/* For building overlays */
#overlay-sections .multipleTemplateWrapper {
padding: 1rem;
}
.multipleTemplateInstanceTable {
width: 100%;
margin-bottom: 1rem;
border: 1px solid #dee2e6;
border-radius: 0.25rem;
}
.multipleTemplateInstanceTable td {
padding: 0.5rem;
vertical-align: top;
}
.inputSpan {
display: block;
margin-bottom: 0.5rem;
}
.inputSpan textarea,
.inputSpan input[type="text"],
.inputSpan select {
width: 100% !important;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border: 1px solid #ced4da;
border-radius: 0.25rem;
}
.fieldValuesDisplay {
font-weight: bold;
padding: 0.5rem;
}
.multipleTemplateInstance.minimized {
background-color: #f8f9fa;
border-left: 3px solid #dee2e6;
padding: 0.5rem;
margin-bottom: 0.5rem;
}
.addAboveButton::before {
content: "➕";
margin-right: 0.25rem;
}
.removeButton::before {
content: "❌";
margin-right: 0.25rem;
}
/* General table appearance */
.psalm-table {
width: 100%;
border-collapse: collapse;
}
.psalm-table th {
padding: 0.5rem;
font-weight: bold;
}
.psalm-table td {
padding: 0.5rem;
vertical-align: middle;
}
.psalm-table .hebrew-cell {
text-align: right;
width: 35%;
}
.psalm-table .verse-cell {
text-align: center;
font-weight: bold;
width: 10%;
}
.psalm-table .cbc-cell {
text-align: left;
width: 55%;
}
/* Default fallback, only applies to Hebrew column */
#buildTextTable td.hebrew-cell .line {
direction: rtl;
text-align: right;
}
/* Override for verse column */
#buildTextTable td.verse-cell .line {
direction: ltr;
text-align: center;
}
/* Override for CBC/English column */
#buildTextTable td.cbc-cell .line {
direction: ltr;
text-align: left;
}
/* To distinguish individual english spans, but not the gap spans */
#buildTextTable.mode-split td.cbc-cell span:not(.gap) {
background-color: #e8e8e8;
padding: 0.1em 0.2em;
border-radius: 2px;
border: 1px solid #dcdcdc; /* soft edge without being distracting */
}
#buildTextTable.mode-split span.gap {
cursor: alias;
}
#buildTextTable td.hebrew-cell .line span:nth-of-type(1) { color: #d9534f; } /* red */
#buildTextTable td.hebrew-cell .line span:nth-of-type(2) { color: #888; }
#buildTextTable td.hebrew-cell .line span:nth-of-type(3) { color: #e67e22; } /* strong orange */
#buildTextTable td.hebrew-cell .line span:nth-of-type(4) { color: #888; }
#buildTextTable td.hebrew-cell .line span:nth-of-type(5) { color: #f1c40f; } /* strong yellow */
#buildTextTable td.hebrew-cell .line span:nth-of-type(6) { color: #888; }
#buildTextTable td.hebrew-cell .line span:nth-of-type(7) { color: #5cb85c; } /* green */
#buildTextTable td.hebrew-cell .line span:nth-of-type(8) { color: #888; }
#buildTextTable td.hebrew-cell .line span:nth-of-type(9) { color: #5bc0de; } /* cyan */
#buildTextTable td.hebrew-cell .line span:nth-of-type(10) { color: #888; }
#buildTextTable td.hebrew-cell .line span:nth-of-type(11) { color: #9370db; } /* purple */
#buildTextTable td.hebrew-cell .line span:nth-of-type(12) { color: #888; }
#buildTextTable td.hebrew-cell .line span:nth-of-type(13) { color: #da70d6; } /* pink-purple */
#buildTextTable td.hebrew-cell .line span:nth-of-type(14) { color: #888; }
#buildTextTable td.hebrew-cell .line span:nth-of-type(15) { color: #ecb3d1; } /* soft pink */
#buildTextTable td.hebrew-cell .line span:nth-of-type(16) { color: #888; }
#buildTextTable td.hebrew-cell .line span:nth-of-type(17) { color: #a67c52; } /* brown */
#buildTextTable td.hebrew-cell .line span:nth-of-type(18) { color: #888; }
#buildTextTable td.hebrew-cell .line span:nth-of-type(19) { color: #7f8c8d; } /* gray */
#buildTextTable td.hebrew-cell .line span:nth-of-type(20) { color: #888; }
#buildTextTable.mode-split td.hebrew-cell .line span:nth-of-type(n+20) {
color: #333;
background-color: #f2f2f2;
}
#buildTextTable.mode-align span.hebrew-selected {
background-color: yellow;
outline: 2px solid black;
}
.color-grid-labels {
display: flex;
gap: 4px;
}
.color-grid-labels > div {
flex: 1;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.color-cell {
display: inline-block;
min-height: 20px;
height: 100%;
max-height: 30px;
min-width: 20px;
width: 100%;
max-width: 80px;
border: 1px solid #000;
margin: 0;
padding: 0;
font-size: 0;
line-height: 0;
vertical-align: top;
}
.color-cell:hover::after {
content: attr(title);
font-size: 10px;
line-height: 1;
color: black;
display: block;
position: absolute;
background: white;
border: 1px solid #ccc;
padding: 2px 4px;
z-index: 10;
}
.psalm-structured-table td,
.psalm-structured-table th {
border-collapse: collapse;
border: 1px solid #ccc;
padding: 0.5em;
vertical-align: top;
}
.psalm-structured-table .smwtticon.note::before {
content: "🛈";
margin-right: 0.25em;
color: #0074d9;
}
.quick-link {
display: inline-block;
padding: 2px;
border-radius: 5px;
outline: none;
font-size: 0.8rem;
color: dimgrey; /* dimgrey; */
margin-right: 2rem; /* Only apply if spacing is needed */
}
.quick-link i.small-icon {
font-size: 0.6rem;
}
.psalm-collapsible-content {
background-color: #f6f6f6;
padding: 15px;
}
/* === SLIDE-IN ELEMENTS === */
/* Floating Button */
.floating-toggle {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1050;
}
/* Slide Panel - from right */
.slide-panel {
position: fixed;
top: 0;
right: -300px; /* hidden off-screen */
width: 300px;
height: 100%;
background: #f8f9fa;
box-shadow: -2px 0 5px rgba(0,0,0,0.1);
overflow-y: auto;
transition: right 0.4s ease;
z-index: 1040;
}
.slide-panel.open {
right: 0;
}
table.psalm-table.plain {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
line-height: 1;
overflow-wrap: normal;
}
table.psalm-table.plain th.hebrew-cell,
table.psalm-table.plain td.hebrew-cell {
width: 45%;
text-align: right;
padding: 2px;
vertical-align: top;
direction: rtl;
}
table.psalm-table.plain th.verse-cell,
table.psalm-table.plain td.verse-cell {
width: 5%;
text-align: center;
font-weight: bold;
padding: 2px;
vertical-align: top;
}
table.psalm-table.plain th.cbc-cell,
table.psalm-table.plain td.cbc-cell {
width: 50%;
text-align: left;
padding: 2px;
vertical-align: top;
}
table.psalm-table.plain td {
padding: 0.5rem;
vertical-align: top;
}
table.psalm-table.plain tr {
vertical-align: top;
}
/* === COLUMN HEADINGS === */
.psalm-table.at-a-glance {
border-collapse: collapse;
}
.psalm-table.at-a-glance th.speaker-bar,
.psalm-table.at-a-glance th.section-bar,
.psalm-table.at-a-glance th.subsection-bar,
.psalm-table.at-a-glance th.hebrew-cell,
.psalm-table.at-a-glance th.verse-cell,
.psalm-table.at-a-glance th.cbc-cell,
.psalm-table.at-a-glance th.addressee-bar {
background-color: #f6f6f6;
/* border: 3px solid white; */
text-align: center;
vertical-align: middle;
padding: 0.5rem;
}
.psalm-table.at-a-glance .section-break td {
height: 20px;
padding: 0;
border: none;
}
.psalm-table.at-a-glance .subsection-break td {
height: 5px;
padding: 0;
border: none;
}
/* === COLUMN SIZES === */
.at-a-glance th.columnbreak,
.at-a-glance td.columnbreak {
width: 2%;
border: none; /*1px solid transparent; /* give all td’s a placeholder border */;
}
.at-a-glance th.columnbreak + th.addressee-bar,
.at-a-glance td.columnbreak + td.addressee-bar {
border-left: none !important; /* avoid hiding left-side borders of Addressee column */
}
.at-a-glance th.hebrew-cell { width: 20%; text-align: center; }
.at-a-glance th.verse-cell { width: 4%; }
.at-a-glance th.cbc-cell { width: 35%; text-align: center; }
.at-a-glance th.emotion-bar { width: 7.5em; }
/* === STRUCTURAL CELLS === */
.at-a-glance td.speaker-bar, .at-a-glance td.addressee-bar {
width: 6%;
font-weight: bold;
border: 1px solid grey;
vertical-align: top;
text-align: center;
}
.at-a-glance td.subsection-bar {
text-align: center;
vertical-align: middle;
font-weight: bold;
font-size: 1.25em;
width: 15%;
}
.psalm-table.at-a-glance td.emotion-bar {
text-align: center;
vertical-align: middle;
padding: 0;
overflow: hidden;
white-space: nowrap;
line-height: 1.25;
width: 7.5em;
}
/* there needs to be a div inside in order for the text to go vertical */
.psalm-table.at-a-glance td.emotion-bar div {
writing-mode: vertical-rl;
text-align: center;
vertical-align: middle;
font-weight: bold;
color: white;
padding: 4px;
white-space: nowrap;
line-height: 1.25;
font-size: 0.9em;
background-color: mediumvioletred;
max-height: none;
}
/* Hebrew column: right-align and RTL */
.at-a-glance td.hebrew-cell {
text-align: right;
direction: rtl;
}
/* === Image icon display === */
/* Target the subsection cells */
.psalm-table.at-a-glance td.subsection-bar {
vertical-align: -0.5rem;
padding-bottom: 1rem; /* optional: gives a little breathing room */
}
/* Ensure subsection content inside is centered */
.psalm-table.at-a-glance .subsection-content {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
/* === SECTION COLORS === */
.psalm-table.at-a-glance .section-1 td.subsection-bar,
.psalm-table.at-a-glance .section-1 td.hebrew-cell,
.psalm-table.at-a-glance .section-1 td.verse-cell,
.psalm-table.at-a-glance .section-1 td.cbc-cell{
background-color: #FAF2CB; /* default light yellow */
}
.psalm-table.at-a-glance .section-2 td.subsection-bar,
.psalm-table.at-a-glance .section-2 td.hebrew-cell,
.psalm-table.at-a-glance .section-2 td.verse-cell,
.psalm-table.at-a-glance .section-2 td.cbc-cell{
background-color: #F2D7CE;
}
.psalm-table.at-a-glance .section-3 td.subsection-bar,
.psalm-table.at-a-glance .section-3 td.hebrew-cell,
.psalm-table.at-a-glance .section-3 td.verse-cell,
.psalm-table.at-a-glance .section-3 td.cbc-cell{
background-color: #D4D6ED;
}
/* ===== Table Layout Styling ===== */
table.psalm-table.participants {
border-collapse: collapse;
width: 100%;
}
.psalm-table.participants th,
.psalm-table.participants td {
padding: 0.2em;
border: 1px solid #ccc;
vertical-align: top;
}
.psalm-table.participants th {
background-color: #eaecf0;
text-align: center;
}
/* ===== Column Widths ===== */
.psalm-table.participants th.speaker-bar,
.psalm-table.participants td.speaker-bar {
width: 15%;
font-weight: bold;
}
.psalm-table.participants td.speaker-bar {
text-align: left;
}
.psalm-table.participants th.hebrew-cell,
.psalm-table.participants td.hebrew-cell {
width: 25%;
}
.psalm-table.participants td.hebrew-cell {
text-align: right;
}
.psalm-table.participants th.verse-cell,
.psalm-table.participants td.verse-cell {
width: 4%;
text-align: center;
font-weight: bold;
}
.psalm-table.participants th.cbc-cell,
.psalm-table.participants td.cbc-cell {
width: 41%;
}
.psalm-table.participants td.cbc-cell {
text-align: left;
}
.psalm-table.participants th.addressee-bar,
.psalm-table.participants td.addressee-bar {
width: 15%;
}
.psalm-table.participants td.addressee-bar {
text-align: left;
}
/* ===== Row Styling =====
.psalm-table.participants .section-\| td,
.psalm-table.participants .section-\| .hebrew-cell,
.psalm-table.participants .section-\| .verse-cell,
.psalm-table.participants .section-\| .cbc-cell,
.psalm-table.participants .section-\| .addressee-bar {
background-color: #FEFBC3;
vertical-align: top;
}*/
.psalm-table.participants tr.speaker-david td:not(.addressee-bar) {
background-color: #FEFBC3 ;
}
.psalm-table.participants td.addressee-unspecified {
background-color: #f8f9fa ;
}
.psalm-table.participants td.addressee-yhwh {
background-color: #E2D2F9 ;
}
/* ===== Span Styling for Highlighted Words ===== */
.psalm-table.participants span[style*="background-color"] {
font-weight: bold;
}
/* For building Expanded Paraphrases */
.insertion-point {
display: inline;
/*background: #ffffcc;
border-bottom: 1px dotted #666;*/
cursor: pointer;
}
#enter-insertion.modal-float {
position: absolute;
z-index: 9999;
/*background: rgba(255, 255, 240, 0.95); /* light yellow, nearly opaque
border: 1px solid #ccc;
padding: 1em;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
border-radius: 6px;*/
max-width: 95vw;
width: auto;
white-space: normal;
}
#enter-insertion.modal-float textarea {
width: 80em;
max-width: 100%;
min-width: 50em;
font-size: 1em;
padding: 0.5em;
box-sizing: border-box;
resize: both;
overflow: auto;
}
/* Style for the Expanded Paraphrase table */
.expanded-paraphrase {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
/* Header styling */
.expanded-paraphrase th.hebrew-cell {
width: 40%;
text-align: right;
padding: 0.5rem;
vertical-align: top;
}
.expanded-paraphrase th.verse-cell {
width: 5%;
text-align: center;
padding: 0.5rem 1rem;
vertical-align: top;
}
.expanded-paraphrase th.cbc-cell {
width: 55%;
text-align: left;
padding: 0.5rem;
vertical-align: top;
}
/* Hebrew column cells */
.expanded-paraphrase td.hebrew-cell {
text-align: right;
direction: rtl;
padding: 0.5rem;
vertical-align: top;
}
/* Verse number cell */
.expanded-paraphrase td.verse-cell {
text-align: center;
font-weight: bold;
padding: 0.5rem;
vertical-align: top;
}
/* CBC paraphrase cell */
.expanded-paraphrase td.cbc-cell {
text-align: left;
padding: 0.5rem;
vertical-align: top;
}
/* Bold Hebrew and English spans only inside expanded-paraphrase tables */
.expanded-paraphrase span.english {
font-weight: bold;
}
/* Inserted paraphrastic material */
.expanded-paraphrase span.insertion-point,
.expanded-paraphrase span.insertion {
font-style: italic;
font-weight: normal;
}
.expanded-paraphrase .insertion.active {
background-color: #fff8e1; /* pale yellow background */
}
.lineation .psalm-table tr.split-row {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 300ms ease, max-height 300ms ease;
}
.lineation .psalm-table tr.split-row.visible {
opacity: 1;
max-height: 200px; /* big enough to show your row */
}
.lineation .hebrew-gap {
display: inline-block;
width: 0.5em;
cursor: col-resize;
user-select: none;
opacity: 0.3;
transition: opacity 0.2s ease;
}
.lineation .hebrew-gap:hover {
opacity: 1;
background-color: rgba(0, 0, 0, 0.05); /* subtle visual hint */
}
.lineation .hebrew-gap.merge-gap {
background-color: rgba(0, 0, 0, 0.03);
cursor: ns-resize;
}
.lineation .hebrew-gap.merge-gap:hover {
background-color: rgba(0, 0, 0, 0.08);
}
.criticalinfo {
background-color: #ffeaea;
color: #a40000;
border: 2px solid #a40000;
border-radius: 6px;
padding: 1em 1.5em;
margin: 1em 0;
font-weight: bold;
font-size: 1.1em;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
position: relative;
}
.criticalinfo::before {
content: "⚠️ ";
font-size: 1.2em;
margin-right: 0.5em;
z-index: 1;
}
.prominence-0 {
background-color: transparent;
}
/* Least strong: pale yellow to white */
.prominence-1 {
background-color: #fffcd0; /* or: #fff9a1, #fff67c, #ffffff */
}
/* Moderate: golden yellow */
.prominence-2 {
background-color: #fae65a; /* or: #f9d94b, #f8c936, #fff24f */
}
/* Strong: orange */
.prominence-3 {
background-color: #fd9e2d; /* or: #fd7f2c, #fd6c30, #fdb821 */
}
/* Most strong: deep red */
.prominence-4 {
background-color: #fc2e57; /* or: #fc3d42, #fc5040, #fc5850 */
}
/* Background textures */
.texture-red {
background-image: url('https://psalms.scriptura.org/mediawiki/images/6/61/Texture-red.jpg'); /* Replace with your image path */
background-size: cover; /* Scales image to cover the entire div */
background-position: center; /* Centers the image */
background-repeat: no-repeat; /* Prevents tiling */
}
.texture-orange {
background-image: url('https://psalms.scriptura.org/mediawiki/images/d/db/Texture-orange.jpg'); /* Replace with your image path */
background-size: cover; /* Scales image to cover the entire div */
background-position: center; /* Centers the image */
background-repeat: no-repeat; /* Prevents tiling */
}
.texture-yellow {
background-image: url('https://psalms.scriptura.org/mediawiki/images/a/a8/Texture-yellow.jpg'); /* Replace with your image path */
background-size: cover; /* Scales image to cover the entire div */
background-position: center; /* Centers the image */
background-repeat: no-repeat; /* Prevents tiling */
}
.texture-sand {
background-image: url('https://psalms.scriptura.org/mediawiki/images/9/90/Texture-sand.jpg'); /* Replace with your image path */
background-size: cover; /* Scales image to cover the entire div */
background-position: center; /* Centers the image */
background-repeat: no-repeat; /* Prevents tiling */
}
body.page-Welcome-alt {
/* background-image: url("https://staging.scriptura.org/mediawiki/images/b/bb/Texture-blank-bg.jpg"); */
background-color: var(--color-sand);
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
/* Tab pill formatting */
.nav-pills .nav-link.active {
background-color:var(--color-red-dark);
color:#ffffff !important;
}
/* Home Page TOC */
.toc-container {
display: grid;
grid-template-columns: repeat(autofit);
padding: 1rem;
position:fixed;
top:70px;
left:85px;
}
.toc-item {
padding: 1rem;
text-align: center;
}
.psalm-table .hebrew-cell div {
direction:rtl;
}
.quiet {
color: #aaa; /* Medium-light grey */
font-style: italic; /* Optional: make it look more like a note */
font-size: 0.9em; /* Optional: slightly smaller */
}
.english-selected {
outline: 2px solid #999;
outline-offset: 2px;
}
#buildTextTable .mismatch {
background-color: #ffe6e6 !important;
outline: 2px solid red;
}
#buildTextTable .overwritten {
background-color: #e6f9ff !important;
outline: 2px solid #33c !important;
transition: background-color 0.3s ease;
}
/* Overall table layout */
.psalm-table.plain {
border-collapse: collapse;
width: 100%;
margin: 1rem 0;
}
/* Header row */
.psalm-table.plain th {
padding: 2px;
vertical-align: top;
font-weight: bold;
}
/* Hebrew text column */
.psalm-table.plain .hebrew-cell {
width: 35%;
text-align: right;
direction: rtl;
padding: 0.5rem;
vertical-align: top;
}
/* Verse number column */
.psalm-table.plain .verse-cell {
width: 10%;
text-align: center;
font-weight: bold;
padding: 0.5rem;
vertical-align: top;
}
/* English (CBC) text column */
.psalm-table.plain .cbc-cell {
width: 55%;
text-align: left;
padding: 0.5rem;
vertical-align: top;
}
/* Optional: styling for .line spans */
.psalm-table.plain .line {
display: block;
line-height: 1.5;
}
/* Optional: hover highlight for rows */
.psalm-table.plain td:hover {
background-color: #f8f8f8;
}
/* Optional: styling for the CBC note/highlighter */
.psalm-table.plain .cbc-cell .smw-highlighter {
font-weight: normal;
cursor: help;
}
/* Rotating caret for collapsible elements */
/* Styles for the caret itself */
.collapse-caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 0.5em; /* Spacing from text */
vertical-align: middle; /* Align vertically with text */
border-top: 0.3em solid; /* Creates the top part of the triangle (pointing down by default) */
border-right: 0.3em solid transparent; /* Makes the sides transparent */
border-left: 0.3em solid transparent; /* Makes the sides transparent */
transition: transform 0.2s ease-in-out; /* Smooth rotation animation */
transform: rotate(0deg); /* Explicitly set default to point down */
}
/* Rule to rotate the caret when our JavaScript adds the 'is-expanded-toggle' class */
/* This targets any element with 'js-toggle-caret-controller' that also gets 'is-expanded-toggle' */
.js-toggle-caret-controller.is-expanded-toggle .collapse-caret {
transform: rotate(180deg); /* Rotates the triangle to point up */
}