Common.css: Difference between revisions

Latest revision as of 11:15, 24 February 2024

/* CSS placed here will be applied to all skins */
/* Use IDs (#) when there is only one concurrence per page */
/* Use classes (.) when there are one or more occurrences per page */
/* Useful parameters... margin-bottom:0.5em */

.cw_0 {
  display: none;
}
.cw_50 {
  width: 50px;
}
.cw_150 {
  width: 150px;
}
.cw_500 {
  width: 500px;
}

.tabs-input {
  display: none !important;
}
.noautonum .tocnumber {
    display: none; 
}
.daytable {                    /* Usage: {| class="daytable" */
    text-align: left;
}
.vanitable {                      /* Usage: {| class="vanitable" */
    border: 0.1em solid #BFBFBF;  /* #BFBFBF=light grey border */
    border-collapse: collapse;
    padding: 0.25em;              /* 0.25em=4px cellpadding */
    background-color: #F2F2F2;    /* #F2F2F2=pale grey background */
    text-align: left;             /* left, center, right */
    vertical-align: middle;       /* top, bottom, or middle */
}
.timelineh2 {                          /* (Used on the timeline pages) Usage: <div class="timelineh2" */
    text-align: center;
    border: 1px solid #ddcef2;
    background: #F2F2F2;                /* was #faf5ff; */
    padding: 0.2em 0.4em;
    margin: auto;
    overflow: hidden;
}
.timelineh3 {                           /* Usage: <div class="timelineh3" */
    text-align: center;
    border-top: 1px solid #ddcef2;
    border-bottom: 1px solid #ddcef2;
    background: #FFFFFF;               
    padding: 0.2em 0.4em;
    margin: auto;
    overflow: hidden;
}
.timelinesummary {                      /* Usage: <div class="timelinesummary" */
    border: thin solid #ddcef2;
    border-radius: 1em;
    box-shadow: 0.5em 0.5em 0.5em #888888;
    background: #FFFFCC;
    min-width: 77em;
    margin: 1em auto 3em auto;
    padding: 1em;
    text-align: center;
}
.timelinelinks {                      /* Usage: <div class="timelinelinks"> for Timelinenav template */
    text-align: center;
    font-size: 132%;
    font-weight: bold;
}
.timelinelinks a {                    /* Usage: for Timelinenav template, link text color */
    color: #B5BD64;                   /* #B5BD64 (light mustard) */
}
.greentext {                          /* Usage: <span class="greentext">vaniquotes.org</span> */
    color: #296F39;                   /* #296F39=green */
}
.quotelink {                          /* Usage: <span class="quotelink">vaniquotes.org</span> for quote boxes */
    font-size: 1em;
    font-weight: bold;
    color: #296F39;                   /* #296F39=green */
}
.nectardroptext {                     /* Usage: <span class="nectardroptext">"Text"</span> for Nectar Drop boxes */
    font-size: 1em;
    font-weight: bold;
    color: #296F39;                   /* #296F39=green */
}
.firstchar {                          /* Usage: <span class="firstchar">A</span> */
    float: left;
    width: 0.7em;
    font-size: 375%;
    font-family: algerian, courier;
    line-height: 80%;
}
.daystext {                            /* Usage: <span class="daystext">Text Here</span> */
    color: #296F39;                    /* #296F39 = Green used for Video info on the Day in the life pages */
}
.daystextb {                           /* Usage: <span class="daystextb">Text Here</span> */
    color: #296F39;                    /* #296F39 = Green used for Video info on the Day in the life pages */
    font-weight: bold;
}
.MITL_page_nav {                       /* Usage: <div class="MITL_page_nav" */
    text-align: left;
    border: 1px solid #BFBFBF;
    background: #FFF2E6;               
    padding: 0.2em 0.4em;
    margin: auto
}
.daysnav,.monthsnav {                  /* For D/MITL desktop & mobile */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.daysnav .month {
    margin: 25px 2%;
}
.monthsnav .year {
    margin: 25px 5%;
}

/* ----------------- Book styles (BG is done) ----------------- */
.devanagari {                    /* Usage: <div class="devanagari"> */
    color: #000000;              /* Font color #0000 = black */
    font-weight: bold;
}
@font-face {
    font-family: interDiac;
    src: url(/css/GauraTimes.ttf);      /* Vedabase font */
}
.verse {                                /* Usage: <div class="verse"> */
    color: #000000;                     /* Font color #0000 = black */
    font-style: italic;
}
.verse.inter_diac {                     /* Usage: <div class="verse inter_diac"> */
    font-family: interDiac;             /* International diacritics */
}
.synonyms {                             /* Usage: <div class="synonyms"> */
    color: #000000;
}
.synonyms.inter_diac {                  /* Usage: <div class="synonyms inter_diac"> */
    font-family: interDiac;             /* International diacritics */
}
.translation {                          /* Usage: <div class="translation"> */
    color: #000000;                     /* #296F39 = green */
    font-weight: bold;
}
.translation.inter_diac {               /* Usage: <div class="translation inter_diac"> */
    font-family: interDiac;             /* International diacritics */
    font-size: 1.1em;
}
.purport {                              /* Usage: <div class="purport"> */
    color: #000000;
}
.purport.inter_diac {                   /* Usage: <div class="purport inter_diac"> */
    font-family: interDiac;             /* International diacritics */
    font-size: 1.1em;
}
*:not(a).text {                                 /* Usage: <div class="text"> */
    color: #000000;                     /* Font color #0000 = black */
}
.text.inter_diac {                      /* Usage: <div class="text inter_diac"> */
    font-family: interDiac;             /* International diacritics */
    font-size: 1.1em;
}
.SB65verse {                     /* 1962-65 SB */
    white-space: pre-line;       /* CSS 3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    text-align: center;          /* Center or margin-left:1.5em; = a : colon. Only if not using text-align: center;*/
    color: #000000;              /* Font color #0000 = black */
}
/* ----------------- End book styles (BG is done) ----------------- */

/* --- Begin OLD book styles SB, CC (These #IDs should be replaced with .classes as above) --- */
#verse {
  white-space: pre;
}
#text {                          /* Used for verses and was: font-style: italic; */
}
#synonyms {                      /* Usage: <div id="synonyms"> */
}
#translation {                   /* Usage: <div id="translation"> */
    color: #000000;              
    font-weight: bold;
}
#purport {                       /* Usage: <div id="purport"> */
}
/* ----------------- End old books styles BG, SB, CC ----------------- */

/* -------------------- BEGIN NEW COMPILE FORM -------------------- */
.quote {
    margin: 1.5em 0em;             /* Places 20px space between quotes on multi-quote pages */
    font-family: tahoma;
}
.quote_heading {
    font-weight: bold;
    color: #296F39; 
}
.quote_translation {
    font-weight: bold;
    color: #000000;
}
.quote_link {                      /* Vanisource link */
    font-weight: bold;
}
.quote_text {
    color: #000000;
}
.quote_verse {                     /* To center use: text-align: center; */
    color: #000000;
}
.quote_text a {                    /* Makes the Vanisource verse links bold */
    font-weight: bold;
}
/* -------------------- END NEW COMPILE FORM -------------------- */

/* -------------------- BEGIN MAIN PAGE CODING -------------------- */

.MainHeader h4 {
    margin:0!important;
    padding:0.2em 0.4em;
}
#mainbanner {
    text-align:center;
    background: #345B63;
    border-bottom:1px solid #ccc;
    border-top:1px solid #ccc;
    padding:0.3em;
    color: #D4ECDD;
    font-family:georgia;
    font-size:150%;
    font-style:italic;
}
#mainlinks {
    text-align:center;
    font-weight:bold;
    font-size: 110%;
    margin-bottom:0.5em
}
#mainlinks a {
    color:#B5BD64
}
#mainmantra {
    text-align:center;
    margin-top:1.5em;
    color:#B5BD64;
}
.maincenter {
    text-align:center;
    max-width:65em;
    margin:0px auto;
    padding-bottom:1em;
}

/* Don't display some stuff on the main page */
body.page-Main_Page #t-cite,
body.page-Main_Page #lastmod, 
body.page-Main_Page #siteSub, 
body.page-Main_Page h1.firstHeading {
    display: none !important;
}

/* -------------------- END MAIN PAGE CODING -------------------- */

/* -------------------- BEGIN CODING TO IDENTIFY AND SORT OUT -------------------- */

body {
    background:#D4ECDD;
    font-family: tahoma;
}
#headertabs {
    background: inherit;
}
#headertabs ul li.ui-state-active {
  background: #D4ECDD;
}
div.thumb {          /* Remove white border from thumbnails */
    border: none;
}
div.tright {
    border: none;
    margin: 0.5em 0 0.8em 1.4em;
}
div.tleft {
    border: none;
    margin: 0.5em 1.4em 0.8em 0;
}
#lastmod {
    display:none
}

li#ca-unify {
    margin-left:1.6em;
}
#google-search input {
    font-size:95%;
    width:10.9em;
}
#searchform {
    padding-bottom:0.5em
}
#p-logo a, #p-logo a:hover {
    height:190px;
}
#column-one {
    padding-top:190px;
}
#p-navigation {
    padding-top:30px;
}
.ac_results {
    padding: 0px;
    border: 1px solid black;
    background-color: Window;
    overflow: hidden;
    z-index: 99999;
}
.ac_results ul {
    width: 100%;
    list-style-position: outside;
    list-style: none;
    padding: 0;
    margin: 0;
}
.ac_results li {
    margin: 0px;
    padding: 2px 5px;
    cursor: default;
    display: block;
    /* if width will be 100% horizontal scrollbar will appear when scroll mode will be used */
    /* width: 100%; */
    font: menu;
    font-size: 12px;
    /* it is very important, if line-height not set or set in relative units scroll will be broken in firefox */
    line-height: 16px;
    overflow: hidden;
}
.ac_loading {
    background: Window url('indicator.gif') right center no-repeat;
}
.ac_odd {
    background-color: #eee;
}
.ac_over {
    background-color: aquamarine;
    color: HighlightText;
}
.ac_moreItems {
    text-align: center;
    background-color: InactiveCaption;
    color: InactiveCaptionText;
    margin: 0px;
    padding: 0px 5px;
    cursor: default;
    display: block;
    width: 100%;
    font: bold menu 12px;
    overflow: hidden;
    -moz-user-select: none;
    -khtml-user-select: none;
}

/* -------------------- BEGIN MAIN PAGE TEST -------------------- */

body.page-Main_Page_test h1 {
    background:#f0f0f0;            /* was background:#faf5ff; */
    border-bottom:1px solid #ccc;
    border-top:1px solid #ccc;
    padding:0.3em;
    margin:1em 0;
    color:#B5BD64;                /* font color */
    font-family:georgia;
    font-weight:bold;
    font-size: 140%;
    text-align:center;
}
body.page-Main_Page_test h2 {
    background:#f0f0f0;
    border-bottom:1px solid #ccc;
    border-top:1px solid #ccc;
    padding:0.3em;
    margin:1em 0;
    color:#000000;
    font-family:georgia;
    font-weight:bold;
    font-size: 110%;
    text-align:center;
}

#mainh2links a {
    color:#B5BD64
}
/* -------------------- END MAIN PAGE TEST -------------------- */

/* --------------- DONATION PAGE - http://vanipedia.org/wiki/Special:IframePage/Donation --------------------*/

#iframeframe {
height: 800px;
}

/* -------------------- END CODING TO IDENTIFY AND SORT OUT -------------------- */

/* 2020-11-27 Elad: Scale and center main page banners */
a[href*='MainPage']::after {
    content: 'a';
    font-size: 50px;
    visibility: hidden;
}

img[src*='MainPage'] {
    transform: scale(1.225) translateX(9%);
}
/* End mainpage banners */

/* Main page mobile view classes */
@media screen and (max-width: 768px)
{
  .MainPageBG {
    display: inline-table;
  }
  #mp-upper > tbody > tr {
    display: table-cell;
  }
  #mp-upper > tbody > tr > td:nth-child(2) {
    display: none;
  }
  
}
@media screen and (max-width: 400px)
{
  #mp-upper div[style*="40em"] {
    width: 78vw !important;
  }
  #mp-upper > tbody > tr > td:nth-child(1) {
    border-bottom: none !important;
  }
  .youtube_right .thumbcaption, .youtube_left .thumbcaption {
    width: 69vw !important;
  }
  #mp-upper .embedvideowrap {
    width: 69vw !important;
  }
  #mp-upper .embedvideo {
    padding: 0px !important;
  }
  #mp-upper div[style*="24em"] {
    width: unset !important;
  }
  #mp-upper .embedvideo iframe {
    width: 67vw;
  }
  #mp-upper div[style*="32em"] { /* right-to-left languages */
    min-width: 80vw !important;
  }
}
@media screen and (max-width: 320px)
{
  #mp-upper .embedvideo iframe {
    width: 70vw;
  }
  .youtube_right .thumbcaption, .youtube_left .thumbcaption {
    width: 69vw;
  }
  #mp-upper .embedvideo {
    width: 71vw !important;
  }
  #mp-upper .embedvideowrap {
    width: 67vw !important;
  }
  .NectarDropBox
  {
    min-width: 17.5em !important;
  }
  #mp-right > tbody > tr:nth-child(4) > td
  {
    padding: 0 0 0 .5em !important;
  }
  #mp-right > tbody > tr:nth-child(6) > td
  {
    padding: 0 0 0 .4em !important;
  }
  #mp-upper div[style*="32em"] { /* right-to-left languages */
    min-width: 86vw !important;
  }
}
/* End main page mobile view classes */

/* Generic center class */
div.center
{
    text-align: center;
}

/* Nectar drop classes */
@media only screen and (max-width: 640px)
{
    div.NectarDropBox
    {
        max-width: 30%;
    }
}

.vaniquotebox
{
    text-align: left;
    min-height: 11.6em;
    border:thin solid #000000;
    border-radius: 1em;
    box-shadow: 0.5em 0.5em 1em #bcbcbc;
    margin: 1em 0em;
}
@media screen and (min-width: 800px)
{
    .vaniquotebox {
        max-width:80%;
    }
}
.vaniquotebox > table
{
    text-align:left;
    font-size:1em;
    color:#000000;
    min-height: 11.5em;
    margin: 0;
}

.vaniquotebox td
{
    padding: 8px;
}

/* Put spacing between the YouTube video player and text that flows around it */

/* left-to-right languages */
.youtube_right .embedvideo
{
    padding: 10px;
}

.youtube_right .thumbcaption, .youtube_left .thumbcaption
{
    width: 330px;
}

/* right-to-left languages */
.youtube_left .embedvideo
{
    padding: 10px;
}

.rtltoc ul
{
    text-align: right !important;
    direction: rtl;
}

.rtltoc .tocnumber {
    padding-left: 0.5em;
    padding-right: 0;
}

.rtltoc .toctitle
{
    direction: rtl;
}

.rtltoc.ar .toctitle::before {
    content: "محتويات";
}

.rtltoc.he .toctitle::before {
    content: "תוכן עניינים";
}

.rtltoc.he,.rtltoc.ar {
    font-weight: bold;
    font-weight: sans-serif;
}

.rtltoc.he h2,.rtltoc.ar h2
{
    display: none !important;
}