SignsNPortendsCSS

discretionary.png


/* --------------------------------------------------*/
/* ------------- START OF TEST SECTION ------------- */
/* --------------------------------------------------*/
/* Two column div by ChainsawXIV                     */
/* mention: http://forums.obsidianportal.com/comments.php?DiscussionID=4084&page=1#Item_8 */
/* example: https://chainsawxivs-exalted.obsidianportal.com/wikis/solar-charms */

.two_column{
    columns:370px 2;
    -webkit-columns:350px 2; /* Safari and Chrome */
    -moz-columns:350px 2; /* Firefox */
}
/* --------------------------------------------------*/
/* Testing FFF character layout                      */
/* This works both as a wiki and as a character page;
   The format is inspired by the FFF project (Friends
   Followers and Foes) by Kerry Mould available here:
   http://www.lythia.com/index.php?s=FFF 
   Test page: https://swtwc.obsidianportal.com/wiki_pages/testing-fff-character-layout                                                  */
/* --------------------------------------------------*/
.left_column { 
   width:45%;
   position:relative; 
   border:2px; 
   border-radius:6px; 
   float:left; 
}
.right_column { 
  width:45%;  
  position:relative; 
  background-color:GhostWhite; 
  border:2px; 
  padding:2px; 
  border-radius:6px; 
  float:right; 
  border-style:solid; 
  font-size: 90%;
}
.no_border {
    border-style:none;
}
.border {
    border-style: solid; 
    background-color: lightgrey;
    text-align:center;
}
#content .right_column p {
    margin: .4em 0 .4em 0; 
    font-size:90%
}
#content .right_column table {
    font-size:95%;
    margin: 0 0 .4em 0; 
    width:100%;
}
#content  .crunchy {
    background-color: white; 
    border: solid; 
    border-width:1px; 
    border-color:black;
}
#content .right_column .divider {
    border-top:solid;
}
#content .right_column .crunchy tr:nth-child(even) {
    background-color: lightgrey;
}
#content .right_column .align_right {
    text-align:right;
}
/* --------------------------------------------------*/
/* Show/Hide in CSS only                             */
/* --------------------------------------------------*/
input#show, input#hide {
    display:none;
}
span#content {
    display:none;
}
input#show:checked ~ span#content {
    display:block;
}
input#hide:checked ~ span#content {
    display:none;
}

/* --------------------------------------------------*/
/* ---------- END OF TEST SECTION ------------------ */
/* --------------------------------------------------*/
/* Stonemason's Ledger by Basileus                   */
/* Source: https://theedgeofnight.obsidianportal.com/wikis/stonemasons-ledger    
*/
/* --------------------------------------------------*/
/* REMOVES "HIGHLIGHTS" AND SPACE ABOVE BANNER       */
/* --------------------------------------------------*/
.campaign-public-layout .highlight-container {
    display:none;
}
.campaign-public-layout #campaign-summary-row .row {
    opacity: 0.0; 
    height: 0px}
.campaign-public-layout .campaign-banner-image {
    width: 50% !important; 
    height: 0% !important; 
    padding-bottom: 0% !important;}
    
/* --------------------------------------------------*/
/* FROM http://forums.obsidianportal.com/comments.php?DiscussionID=3493&page=1#Item_4 */
/* Make my banner image honor its width instead 
   of stretching                                    */
/* --------------------------------------------------*/
.campaign-banner-image{ 
    background-size: 450px; 
    background-repeat: no-repeat;  }
/* --------------------------------------------------*/
/* TOP BAR HOVER TRANSPARENCY                        */
/* --------------------------------------------------*/
#top-bar {
    opacity: 0; 
    transition: all 0.3s ease-in-out;}
#top-bar:hover {
    opacity: 0.85; 
    transition: all 0.3s ease-in-out;}
/* --------------------------------------------------*/
/* HOVER TRANSITION                                  */
/* --------------------------------------------------*/
.campaign-public-layout #content:hover a {
    transition: all 0.3s ease-in-out;}
/* --------------------------------------------------*/
/* RESTORE PREFORGE LINK COLORS AND BEHAVIOR         */
/* --------------------------------------------------*/
#content a:link {
    color:maroon;
    text-decoration:none;}
#content a:visited {
    color:maroon;
    text-decoration:none;}
#content a:hover {
    color:blue;
    text-decoration:none; 
    text-shadow: 0em 0em 1em red;}
#content a:active {
    color:maroon;
    text-decoration:none;}
#content a:link.create-wiki-page-link {
    color:green;
    text-decoration:none;}
#content a:visited.create-wiki-page-link {
    color:green;
    text-decoration:none;}
#content a:hover.create-wiki-page-link {
    color:green;
    text-decoration:underline; 
    text-shadow: 0em 0em 1em goldenrod;}
#content a:active.create-wiki-page-link {
    color:green;
    text-decoration:underline;}

/* --------------------------------------------------*/    
/* RESTORES PREFORGE TABLE FUNCTIONALITY             */
/* --------------------------------------------------*/
#content table {
    background-color: 
    transparent; 
    border-style: none;}
#content tr:nth-child(even) {
    background-color: transparent;}
.campaign-public-layout th {
    font-weight: bold;}

/* --------------------------------------------------*/    
/* CONTENT AREA BACKGROUND                           */
/* --------------------------------------------------*/
.campaign-public-layout .wiki-page, .character-index.campaign-public-layout .character-list-item, .campaign-public-layout #character-details, .campaign-public-layout .adventure-log-post {
    box-shadow: 0em 0em 1em 0em black, 0em 0em 2em 0em black, 0em 0em 3em 0em black; 
    border: 24px solid transparent; 
    background-color: transparent; border-image:url('//db4sgowjqfwig.cloudfront.net/assets/315171/bgbordersolid.jpg?1396932078') 36 fill round;}
.campaign-landing-show .campaign-landing-page-container, .campaign-public-layout .section, .campaign-public-layout .post-main, body.campaign-public-layout .post-main.post-section, .campaign-public-layout .post-section.post-main {
    background-color: transparent;}
.campaign-search-page #search-results  {
    box-shadow: 0em 0em 1em 0em black, 0em 0em 2em 0em black, 0em 0em 3em 0em black; 
    border: 24px solid transparent; 
    background-color: transparent; border-image:url('//db4sgowjqfwig.cloudfront.net/assets/315171/bgbordersolid.jpg?1396932078') 36 fill round;}
.campaign-search-page  #search-controls {
    box-shadow: 0em 0em 1em 0em black, 0em 0em 2em 0em black, 0em 0em 3em 0em black; 
    border: 24px solid transparent;
    background-color: transparent; border-image:url('//db4sgowjqfwig.cloudfront.net/assets/315171/bgbordersolid.jpg?1396932078') 36 fill round;}
.sidebar-adventure-log-neighbors .neighbor-post .columns {
    height: 110px;
    border: 24px solid transparent;
    background-color: transparent;
    border-image: url("//db4sgowjqfwig.cloudfront.net/assets/315171/bgbordersolid.jpg?1396932078") 36 fill round;
}
/* --------------------------------------------------*/
/* NAVBAR COLORING                                   */
/* --------------------------------------------------*/
.campaign-public-layout #campaign-nav a{
    color: burlywood; 
    text-shadow: 0em 0em 1em black;}
.campaign-public-layout #campaign-nav a:hover {
    color:firebrick;
    text-decoration:none; 
    text-shadow: 0em 0em 1em firebrick;}
.campaign-public-layout #campaign-nav .nav-links li.active a {
    color: maroon; t
    ext-shadow: none;}
.campaign-public-layout #campaign-nav .nav-links li.active a:hover {
    color:firebrick;
    text-decoration:none; 
    text-shadow: 0em 0em 1em firebrick;}

/* --------------------------------------------------*/
/* ADVENTURE LOG                                     */
/* --------------------------------------------------*/
.adventure-log-index .post-date, .adventure-log-index .adventure-log-new-container, .adventure-log-index .post-content, .adventure-log-index .post-date, .adventure-log-show .post-date {
    background-color: transparent;}
.adventure-log-index .overflow-fade-out {
    display: none;}
.adventure-log-show .post-header-container, .adventure-log-show .post-comments {
    background-color: transparent;}
.adventure-log-index .post-date, .adventure-log-show .post-date {
    color: black;}

/* --------------------------------------------------*/    
/* CHARACTER AND ITEM LAYOUTS                        */
/* --------------------------------------------------*/
.campaign-public-layout.character-index .character-quick-search, .campaign-public-layout.item-index .character-quick-search {
    background-color: transparent;}
.campaign-public-layout.character-index .character-list-item, .campaign-public-layout.item-index .character-list-item {
    background-color: transparent;}
.character-show .main-content section {
    background-color: transparent;}
.adventure-log-index-filter .filter-header {
    background-color: transparent;}
.campaign-public-layout.character-index .character-quick-search h4, #content .character-quick-search a {
    color: burlywood; 
    text-shadow: 0em 0em 1em black;}
 #content .character-quick-search a:hover {
    color: red; 
    text-shadow: 0em 0em 1em maroon;}

/* --------------------------------------------------*/    
/* MAP INDEX                                         */
/* --------------------------------------------------*/
.campaign-map-index .map-placard, .campaign-map-index #selected-map-container {
    background-color: transparent;}
.map-detail cover-container, map-details map-placard {
    background-color: transparent;}
/* --------------------------------------------------*/
/* ADDITIONAL TRANSPARENCY ON SEARCH PAGE            */
/* --------------------------------------------------*/
.campaign-search-page #center-column {
    background-color:transparent;}
.campaign-search-page #tag-library {
    background-color:transparent;}
.campaign-search-page #search-results {
    background-color:transparent;}
.campaign-search-page .stripe.result {
    background-color:transparent;}

/* --------------------------------------------------*/
/* HORIZONTAL RULE STYLING                           */
/* --------------------------------------------------*/
hr {
    clear: none; 
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));}

/* --------------------------------------------------*/
/* TEXT HEADERS                                      */
/* --------------------------------------------------*/
.campaign-public-layout h1, .campaign-public-layout h2, .campaign-public-layout h3, .campaign-public-layout h4, .campaign-public-layout h5, .campaign-public-layout bq, .campaign-public-layout #campaign-nav .nav-text {
    font-family: 'Eagle Lake';}
.campaign-public-layout h1 {
    font-size: 200%;}
.campaign-public-layout h2 {
    font-size: 175%;}
.campaign-public-layout h3 {
    font-size: 150%;}
.campaign-public-layout h4 {
    font-size: 125%;}
.campaign-public-layout h5 {
    font-size: 120%;}
.campaign-public-layout h5 {
    font-size: 100%;}
.campaign-public-layout .title {
    font-size: 150%;} 
.campaign-public-layout blockquote p {
    color:dimgray; 
    font-family: 'Arizonia'; 
    font-size:120%; 
    opacity: 0.85;}
.campaign-public-layout blockquote {
    border-left: none;}

/* --------------------------------------------------*/
/* SMALL TEXT                                        */
/* --------------------------------------------------*/
#content small {
    color: black;}

/* --------------------------------------------------*/
/* SIZE OF PREVIEW WINDOWS                           */
/* --------------------------------------------------*/
.reveal-modal {
    width: 840px; 
    left: 68%;}

/* --------------------------------------------------*/
/* NO ICONS OR TEXT OVER CHARACTER PORTRAITS         */
/* --------------------------------------------------*/
.character-show .character-avatar .frame a, .item-show .character-avatar .frame a {
    display: none;}

/* --------------------------------------------------*/    
/* GET RID OF EXTRA LINES                            */
/* --------------------------------------------------*/
body.campaign-public-layout .title {
    border-bottom: 1px solid black;}
.campaign-public-layout .sidebar-last-updated {
    border-top: none;}

/* --------------------------------------------------*/
/* GM SECTION                                        */
/* --------------------------------------------------*/
body.campaign-public-layout .post-gm-only.post-section {
    background-color: rgba(0,0,0,0.1); 
    border: 1px solid black}

/* --------------------------------------------------*/    
/* IMAGE HOVER OPACITY                               */
/* --------------------------------------------------*/
.campaign-public-layout .main-content .campaign-landing-page-container img {
    transition: all 0.3s ease-in-out; 
    opacity: 0.85;}
.campaign-public-layout .main-content .campaign-landing-page-container img:hover {
    transition: all 0.3s ease-in-out; 
    opacity: 1;}

/* --------------------------------------------------*/    
/* WHITE ON DARK TEXT BOXES                          */
/* --------------------------------------------------*/
textarea {
    background-color: white; 
    color: dimgray;}
.post-gm-only input[type='text'], .post-gm-only input[type='email'], .post-gm-only input[type='password'], .post-gm-only input[type='tel'], .post-gm-only textarea, #gm-secrets input[type='text'], #gm-secrets input[type='email'], #gm-secrets input[type='password'], #gm-secrets input[type='tel'], #gm-secrets textarea, .secret-section input[type='text'], .secret-section input[type='email'], .secret-section input[type='password'], .secret-section input[type='tel'], .secret-section textarea {
    background-color: white; 
    color: dimgray;}
.campaign-settings #advanced-settings .flat-field {
    background-color: white; 
    color: dimgray;}
textarea:focus {
    background-color: dimgray; 
    color: white;}
.post-gm-only input[type='text']:focus, .post-gm-only input[type='email']:focus, .post-gm-only input[type='password']:focus, .post-gm-only input[type='tel']:focus, .post-gm-only textarea:focus, #gm-secrets input[type='text']:focus, #gm-secrets input[type='email']:focus, #gm-secrets input[type='password']:focus, #gm-secrets input[type='tel']:focus, #gm-secrets textarea:focus, .secret-section input[type='text']:focus, .secret-section input[type='email']:focus, .secret-section input[type='password']:focus, .secret-section input[type='tel']:focus, .secret-section textarea:focus {
    background-color: dimgray; 
    color: white;}
.campaign-settings #advanced-settings .flat-field:focus {
    background-color: dimgray; 
    color: white;}

/* --------------------------------------------------*/    
/* Custom CSS for Signs 'n Portends                  */
/*---------------------------------------------------*/
/* --------------------------------------------------*/
/* COLUMNS DEFINED                                   
   creates a thin menu column with a much-larger     
   content column.  For divs found in the content 
   section,  on pages with menus.                    */
/* --------------------------------------------------*/   
.toppagecontainer {
    width:100%; 
    position:relative; 
    border:2px; 
    border-radius:6px; 
    overflow:auto; }
.menu { 
    width:20%; 
    position:relative; 
    background-image:url('http://cdn.obsidianportal.com/assets/156497/WhitePaper.jpg'); 
    border:2px; 
    border-radius:6px; 
    float:left; }
.menutitle { 
    background:burlywood;
    color:white;
    text-shadow: 0em 0em 1em black;
    font-weight:bold;
    padding:1px 4px 1px 6px;
    font-size:12pt; 
    font-family:"Eagle Lake"; }
.menucontent { 
    padding:6px 4px 1px 6px; 
    z-index:3; }
.pagecontent { 
    width: 70%;
    float:right; }

/* --------------------------------------------------*/    
/* TABLE USED FOR NAVIGATION 
   WHEN THERE IS NO MENU ON THE PAGE)                */
/* --------------------------------------------------*/   
.swtwcnav { 
    width: 100% !important; 
    border: solid 1px transparent !important; 
    margin: 0em 0em 0em 0em !important; 
    padding: 0em 0em 0em 0em !important;}

/* --------------------------------------------------*/    
/* HIDE THE EDIT BUTTON FOR NON-GMs ON THE WIKI PAGES*/
/* --------------------------------------------------*/
.wiki-page-show .header-icon { 
    display:none; }*/
    
/* --------------------------------------------------*/
/* LOGS SIDEBAR TITLE TEXT SIZE                      */
/* --------------------------------------------------*/
.sidebar-adventure-log-neighbors .neighbor-post .adventure-log-post-title {
    font-size: 90%}

/* --------------------------------------------------*/    
/* OFF-SETTING IN-PAGE LINKS BY ikabodo              */
/* --------------------------------------------------*/
/* Put anchors in the wiki pages using <a class="anchor" name="link"></a> */
.anchor{
    top:-75px;
    display: block; 
    position: relative;}

/* --------------------------------------------------*/    
/* PRE DEFINED BY alex_redeye                        */
/* --------------------------------------------------*/
pre { 
    height: auto; 
    overflow: auto; 
    background-color: #eeeeee; 
    word-break: normal !important; 
    word-wrap: normal !important; 
    white-space: pre !important;}

/* --------------------------------------------------*/    
/* Changing the tags on the character page so they 
   are coloured.                               
   Taken from http://forums.obsidianportal.com/comments.php?DiscussionID=3980&page=1#Item_6 
   --------------------------------------------------*/   
.character-index.campaign-public-layout #content a[data-tag="Larani"] {
    background-color: 
    red; color: white; 
    font-weight: bold; 
    border-radius: 20px 20px 20px 20px; 
    padding: 5px 5px 5px 5px}
.character-index.campaign-public-layout #content a[data-tag="Peoni"] {
    background-color: green; 
    color: white; 
    font-weight: bold; 
    border-radius: 20px 20px 20px 20px; p
    adding: 5px 5px 5px 5px}
.character-index.campaign-public-layout #content a[data-tag="Siem"] {
    background-color: blue; 
    color: white; 
    font-weight: bold; 
    border-radius: 20px 20px 20px 20px; 
    padding: 5px 5px 5px 5px}
.character-index.campaign-public-layout #content a[data-tag="Naveh"] {
    background-color: slategrey; 
    color: white; 
    font-weight: bold; 
    border-radius: 20px 20px 20px 20px; 
    padding: 5px 5px 5px 5px}
.character-index.campaign-public-layout #content a[data-tag="Morgath"] {
    background-color: sienna; 
    color: white; 
    font-weight: bold; 
    border-radius: 20px 20px 20px 20px; 
    padding: 5px 5px 5px 5px}
.character-index.campaign-public-layout #content a[data-tag="Deceased"] {
    background-color: black; 
    color: white; 
    font-weight: bold; 
    border-radius: 20px 20px 20px 20px; 
    padding: 5px 5px 5px 5px}
.character-index.campaign-public-layout #content a[data-tag="PC"] {
    background-color: yellow; goldenrod: white; 
    font-weight: bold; 
    border-radius: 20px 20px 20px 20px; 
    padding: 5px 5px 5px 5px}‚Äč

/* --------------------------------------------------*/    
/* Campaign Timeline CSS taken from Oath of Crows 
   campaing                            
   CSS URL: https://oath-of-crows.obsidianportal.com/themes/custom_css.css?cc=1460492079 
   Used to show previous adventure Logs; eventually for the history page         
/* --------------------------------------------------*/   
.timelinecontainer{   
    position: relative;   
    overflow: hidden; }
.tl {   
    list-style: none; }
.tl > li {  
    margin-bottom: 60px; 
    width:100%; 
    border-radius: 0px; 
    margin: 0; 
    padding: 0;
    position: relative; }

@media ( min-width : 640px ){  
    .tl > li { 
        overflow: hidden; 
        margin: 0; 
        position: relative;  }
    .tl-date { 
      width: 110px; 
      float: left; 
      margin-top: 5px; 
      font-size: 200%; }
    .tl-content { 
        width: 75%; 
        float: left;
        border-left: 3px dashed rgba(0,0,0, .3);
        padding-left: 30px;  }
    .tl-content:before {
        content: ''; 
        width: 12px; 
        height: 12px; 
        background: firebrick; 
        position: absolute; 
        left: 106px; top: 24px; 
        border-radius: 100%;  }
}

.timeline li{ 
    width: 48%; 
    background: rgba(246,234,213,0.7); 
    border-radius:4px; 
    margin: 10px 0 10px 0; 
    padding: 0 10px 0 10px; 
    position: relative;}
.timeline div.year{ 
    font-size:125%; 
    margin-left: calc( 50% - 35px ); 
    font-weight:bold; 
    display: inline-block; 
    background: #566aa6; 
    color:white; 
    border-radius:50px; 
    padding: 0 10px 0 10px;
    position: relative; 
    z-index:88; 
    width:70px; 
    text-align:center;}
.timeline li:before{ 
    border: 7px solid; 
    content: ''; 
    display: block; 
    position: absolute;}
.timeline li:nth-child(even){ 
    float:right; 
    clear:right;}
.timeline li:nth-child(odd){
    float:left; 
    clear:left;}
.timeline li:nth-child(even):before{ 
    border-color: transparent rgba(246,234,213,0.7) transparent transparent; 
    right: 100%; 
    top: 10px;}
.timeline li:nth-child(odd):before{ 
    border-color: transparent transparent transparent rgba(246,234,213,0.7); 
    left: 100%; 
    top: 10px;}


Home Page>>CSS Notes

Home Page>> Links of interest

SignsNPortendsCSS

Signs and portents ketherian