Jump to content

MediaWiki:Common.css

From Resonate Apologetics

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)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ============================================
   BIBLE STUDY TEMPLATE STYLES
   ============================================ */

/* -- Chapter Header -- */
.bible-chapter-header {
    border-bottom: 3px solid #4a6741;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.bible-chapter-header h1 {
    color: #4a6741;
    margin-bottom: 5px;
}

/* -- Verse Row (flex layout for margin notes) -- */
.bible-verse {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}

.bible-verse:hover {
    background-color: #f9f7f2;
}

.verse-content {
    flex: 3;
    line-height: 1.8;
    font-size: 1.05em;
}

.verse-num {
    font-weight: bold;
    color: #4a6741;
    margin-right: 4px;
    font-size: 0.85em;
    vertical-align: super;
}

/* -- Margin Notes (Cross-References) -- */
.verse-crossref {
    flex: 1;
    font-size: 0.85em;
    color: #666;
    border-left: 2px solid #d4c9a8;
    padding-left: 10px;
    font-style: italic;
    min-width: 150px;
}

.verse-crossref a {
    color: #5b7a52;
}

/* -- Verses with no cross-references -- */
.bible-verse .verse-content:only-child {
    flex: 1;
}

/* -- Study Notes Section -- */
.study-notes {
    margin-top: 30px;
    padding: 15px 20px;
    background-color: #f9f7f2;
    border: 1px solid #d4c9a8;
    border-left: 4px solid #4a6741;
    border-radius: 3px;
}

.study-notes h2 {
    color: #4a6741;
    margin-top: 0;
    font-size: 1.3em;
    border-bottom: 1px solid #d4c9a8;
    padding-bottom: 8px;
}

/* -- Translation Tabs Styling Override -- */
.tabber .tabber__header {
    border-bottom: 2px solid #4a6741;
}

.tabber .tabber__tab--active {
    border-color: #4a6741;
    color: #4a6741;
}

/* -- Chapter Navigation -- */
.chapter-nav {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    margin: 20px 0 10px;
    border-top: 1px solid #ccc;
    font-size: 0.95em;
}

.chapter-nav a {
    color: #4a6741;
    font-weight: bold;
}

/* -- Mobile Responsiveness -- */
@media (max-width: 768px) {
    .bible-verse {
        flex-direction: column;
        gap: 5px;
    }

    .verse-crossref {
        border-left: none;
        border-top: 1px dashed #d4c9a8;
        padding-left: 0;
        padding-top: 5px;
        min-width: auto;
    }
}