MediaWiki: Common.css: Difference between revisions
From Psalms: Layer by Layer
mNo edit summary |
mNo edit summary |
||
Line 1,388: | Line 1,388: | ||
writing-mode: horizontal-tb; | writing-mode: horizontal-tb; | ||
}*/ | }*/ | ||
#enter-insertion.modal-float { | #enter-insertion.modal-float { | ||
position: | position: absolute; | ||
z-index: 9999; | z-index: 9999; | ||
background: | background: rgba(255, 255, 240, 0.95); /* light yellowish, nearly opaque */ | ||
border: | border: 1px solid #ccc; | ||
padding: | padding: 1em; | ||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); | |||
box-shadow: 0 4px | border-radius: 6px; | ||
max-width: 90vw; | |||
} | |||
#enter-insertion.modal-float textarea { | |||
width: 80em; | |||
max-width: 100%; | |||
font-size: 1em; | |||
padding: 0.5em; | |||
box-sizing: border-box; | |||
} | } |
Revision as of 21:22, 23 May 2025
/* CSS placed here will be applied to all skins */ /* Also see ../customizations/custom.* on the filesystem */ /* =================================== */ /* === ALL PAGES, ALL SKINS */ /* =================================== */ /* Corporate font Lora (used for headings) */ @import url('//fonts.googleapis.com/css2?family=Lora:wght@400..700'); /* unicode-range specific fonts for Hebrew and Greek. See https://j.hn/using-css-to-display-fonts-for-greek-and-hebrew-but-not-english/ https://developers.google.com/fonts/docs/css2 https://www.onlinewebfonts.com/download/0a08163287a1fa0aceb8e98c2c931bc5 */ /* Hebrew font */ @font-face { font-family: "SBL Hebrew"; unicode-range: U+0590-05FF; src: url("/customizations/SBL-Hebrew/SBL-Hebrew.eot"); src: url("/customizations/SBL-Hebrew/SBL-Hebrew.eot?#iefix") format("embedded-opentype"), url("/customizations/SBL-Hebrew/SBL-Hebrew.woff2") format("woff2"), url("/customizations/SBL-Hebrew/SBL-Hebrew.woff") format("woff"), url("/customizations/SBL-Hebrew/SBL-Hebrew.ttf") format("truetype"), url("/customizations/SBL-Hebrew/SBL-Hebrew.svg#SBL Hebrew") format("svg"); } /* Greek font */ @font-face { font-family: "Gentium Plus"; /* TODO: subset the font to reduce size */ unicode-range: U+0370-03FF, U+1F00-1FFF; src: url("/customizations/Gentium-Plus/Gentium-Plus.eot"); src: url("/customizations/Gentium-Plus/Gentium-Plus.eot?#iefix") format("embedded-opentype"), url("/customizations/Gentium-Plus/Gentium-Plus.woff2") format("woff2"), url("/customizations/Gentium-Plus/Gentium-Plus.woff") format("woff"), url("/customizations/Gentium-Plus/Gentium-Plus.ttf") format("truetype"), url("/customizations/Gentium-Plus/Gentium-Plus.svg#Gentium Plus") format("svg"); } /* 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; } body { font-size: 16px; /* default for tweeki skin is 14px */ font-family: "SBL Hebrew", "Gentium Plus", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } h1,h2,h4, .h1,.h2,.h4 { font-family: "Lora", "SBL Hebrew", "Gentium Plus", serif; color: #176560; } h3,h5,h6, .h3,.h5,.h6 { font-family: "SBL Hebrew", "Gentium Plus", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; color: #69A88D; } h1, .h1 { margin-top: 3rem; } h2, .h2 { margin-top: 3rem; } h3, .h3 { margin-top: 2rem; font-size: 1.5rem; } h4, .h4 { font-size: 1.25rem; } h5, .h5 { font-size: 1.1rem; } h6, .h6 { color: #176560; } .lead { font-family: "Lora", "SBL Hebrew", "Gentium Plus", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; color:#000000; } .lead b, .lead strong { font-weight: bold; } #siteNotice { background-color: #e8f6f3; } /* for images that exceed the page width, put a <div class="img-fluid"> around them */ .responsive-img img { max-width: 100%; height: auto; } .navbar-brand img { height: 22px; margin-top: 0; } header .navbar-nav .nav-item { padding-right: 10px; } footer#footer { padding-top: 0; padding-bottom: 0; } footer#footer #n-login-ext { -webkit-appearance: none; } a, a.external, a.external:visited { color: #69A88D; } a:hover, a:focus, a.external:hover, a.external:focus { color: #176560; text-decoration: none; } /* 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: "SBL Hebrew", "Gentium Plus", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; } .card-header .btn { padding: 0; } .card-body { padding: 0; } .card-body pre { margin-bottom: 0; } .user-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 CDBR 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; } .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; } /* === 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; diaplay: 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:Lora; 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:#9DC0AF; display:flex; align-items:center; justify-content:center; color:white; 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:#9DC0AF; display:flex; align-items:center; justify-content:center; color:white; bottom: 10px; right:10px; z-index:9999; } } @media screen and (min-width: 960px) { /* Desktop view */ .navi-button{ border-radius: 12px; border:none; background-color:#9DC0AF; display:inline-block; padding:0.5rem; align-items:center; justify-content:center; color:white; 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:#9DC0AF; display:flex; align-items:center; justify-content:center; color:white; 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:#9DC0AF; color:white; 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:#9DC0AF; display:flex; align-items:center; justify-content: flex-start; color:white; 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:#9DC0AF; color:white; 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:#9DC0AF; display:flex; align-items:center; justify-content: flex-start; color:white; 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 #9DC0AF; border-left: 1px solid #9DC0AF; border-right: 1px solid #9DC0AF; } /* 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 */ #buildOverlay td.hebrew-cell .line { direction: rtl; text-align: right; } /* Override for verse column */ #buildOverlay td.verse-cell .line { direction: ltr; text-align: center; } /* Override for CBC/English column */ #buildOverlay td.cbc-cell .line { direction: ltr; text-align: left; } #buildOverlay td.hebrew-cell .line span:nth-of-type(1) { color: #d9534f; } #buildOverlay td.hebrew-cell .line span:nth-of-type(2) { color: #f0ad4e; } #buildOverlay td.hebrew-cell .line span:nth-of-type(3) { color: #f7dc6f; } #buildOverlay td.hebrew-cell .line span:nth-of-type(4) { color: #5cb85c; } #buildOverlay td.hebrew-cell .line span:nth-of-type(5) { color: #5bc0de; } #buildOverlay td.hebrew-cell .line span:nth-of-type(6) { color: #9370db; } #buildOverlay td.hebrew-cell .line span:nth-of-type(7) { color: #da70d6; } #buildOverlay td.hebrew-cell .line span:nth-of-type(8) { color: #ecb3d1; } #buildOverlay td.hebrew-cell .line span:nth-of-type(9) { color: #a67c52; } #buildOverlay td.hebrew-cell .line span:nth-of-type(10) { color: #7f8c8d; } #buildOverlay.mode-split td.hebrew-cell .line span:nth-of-type(n+11) { color: #333; background-color: #f2f2f2; } #buildOverlay.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; } /* === 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; } /* .insertion-point { display: inline; width: auto; height: 1em; background-color: rgba(255, 215, 0, 0.25); cursor: pointer; vertical-align: baseline; white-space: normal; writing-mode: horizontal-tb; }*/ #enter-insertion.modal-float { position: absolute; z-index: 9999; background: rgba(255, 255, 240, 0.95); /* light yellowish, nearly opaque */ border: 1px solid #ccc; padding: 1em; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); border-radius: 6px; max-width: 90vw; } #enter-insertion.modal-float textarea { width: 80em; max-width: 100%; font-size: 1em; padding: 0.5em; box-sizing: border-box; }