Campaign of the Month: February 2020
Terror at Thrushmoor
CSS
- Listed below is the current CSS used on this campaign. I only started my CSS journey in October 2019, so much of this is pilfered from MANY other people’s pages on Obsidian Portal and adjusted on the fly to meet my needs. If you see a familiar element, chances are I found it on your site, loved how it looked, and incorporated it into my campaign design. If you would like credit, PLEASE send me a message and I will be more than happy to give you credit.
Also, a quick tutorial on how to access the Custom CSS of anyone’s campaign:
- Right click on any page and click “View Page Source” (or the equivalent depending on browser)
- Somewhere around line 50 should be a line that reads: " link href=/themes/custom.css………"
- Clicking this link will bring up a text file of all the CSS used on the site, starting with the default CSS used by the Obsidian Portal site as a template, followed by the Custom CSS under the header " /* User Custom CSS */ "
/*CHARACTER PORTRAIT LINK PREVIEW*/
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: transparent;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
width:100px;
}
.thumbnail span img{ /*CSS for enlarged image when hidden*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px;
}
/*ACCORDION STYLE*/
.ui-accordion .ui-accordion-header,
.ui-accordion .ui-accordion-content {
border:none;
cursor: url(https://www.dropbox.com/s/akgy58bmdaqwqwh/SilverCursor.png?raw=1),auto;
font-size:20px;
font-family:Julee;
}
.ui-accordion .ui-accordion-header{background:transparent;}
.ui-accordion .ui-accordion-content{background:radial-gradient(#8c8c8c7d, transparent);}
/* SITE WIDE */
h1, h2, h3, h4, h5, h6{
font-family: Julee
}
.campaign-landing-show #content{
opacity:0;
animation:wakeup 1s linear 0.5s forwards!important;}
.campaign-public-layout #content{
opacity:0;
animation:wakeup 0.5s linear forwards;
max-width:100%;
padding-left:50px;}
@keyframes wakeup{
0%{opacity:0;}
100%{opacity:1;}
}
/*BACKGROUND FIX*/
.campaign-public-layout .page-background{background-position:left top;}
/*TOPBAR HOVER*/
#top-bar {opacity:0.3;transition:opacity ease-in-out 1s}
#top-bar:hover{opacity:1;transition:opacity ease-in-out 1s}
/* HOVER TRANSITIONS */
.campaign-public-layout #content:hover a {transition: all 0.3s ease-in-out;}
.sidebar-party-members .game-master,
.sidebar-party-members .game-master img,
.player-character img,
.player img{border-radius:15%;border:1px solid darkgreen;transition: all 1s ease-in-out;}
.player-character,
.player{transition: all 1s ease-in-out;position: relative}
.player-character .user-container{background-color: transparent}
.player-character .user-container img{z-index:1;position: relative;
bottom:21px;right:-10%;
border-radius:15%;border:1px solid;box-shadow:0 3px 10px rgba(0,0,0,0.5)}
.sidebar-party-members .game-master:hover{transform:scale(1.1);transform-origin:top right;box-shadow:0 5px 5px 2px rgba(0,0,0,0.3);z-index:3;opacity:1;}
.sidebar-party-members .game-master:hover img{transform:scale(1.5);transform-origin:right;box-shadow:0 5px 5px 2px rgba(0,0,0,0.5);opacity:1;}
.player-character:hover .user-container img{transform: scale(2);transform-origin:right;z-index:3;opacity:1;}
.player-character:hover, .player:hover{transform: scale(1.2);z-index:3;opacity:1;}
/*LINK HOVER*/
#content a:link {color:darkgreen;text-decoration:none;text-shadow: 0em 0em 1em green, 0em 0em 1px black;}
#content a:visited {color:darkgreen;text-decoration:none;text-shadow: 0em 0em 1em green, 0em 0em 1px black;}
#content a:hover {color:limegreen;text-decoration:none;text-shadow: 0em 0em 1em green, 0em 0em 1px black, 0em 0em 2em green;}
/*PRELOAD LEFT-NAV HOVER IMAGES*/
.collapsable-nav-row .front-nav-container:after{
display:none;
content:url(https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1020514/Home_Icon_hover.png)
url(https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1020513/Codex_Icon_hover.png)
url(https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1020512/Gear_Icon_hover.png)
url(https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1020515/Journal_Icon_hover.png)
url(https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1020516/Map_Icon_hover.png)
url(https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1020517/People_Icon_hover.png)
url(https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1020518/Settings_icon_hover.png)
;
}
/* REMOVED CONTENT */
#sidebar .section-header, .wiki-page .tags-list, .wiki-page-slug-main-page .wiki-page-name.title, .character-info .tags-list, .divided-list, .adventure-log-post-container .post-date, .adventure-log-index .post-view-link, .adventure-log-index .overflow-fade-out, .adventure-log-show .post-header-container, .campaign-title, .character-quick-search, .character-list-item .character-info .right-side-fade-out, .character-info div:first-of-type div:first-of-type,#top-bar .mobile-nav-top-bar li.section.dashboard,#top-bar .mobile-nav-top-bar li.section.forum,#top-bar .mobile-nav-top-bar li.section.calendar,#top-bar .mobile-nav-top-bar li.section.file-docker,#campaign-nav .file-docker,#campaign-nav .calendar,#campaign-nav .forum,.campaign-public-layout #campaign-nav .nav-links li.active:after, .campaign-public-layout .flame-dragon, .campaign-public-layout #campaign-summary-row, #sidebar .played-remote {
display:none!important;
}
/* TRANSPARENCY */
.adventure-log-show .post-main,.adventure-log-show .post-comments,.adventure-log-show .comment-reply textarea, .adventure-log-page .post-title,.campaign-public-layout #campaign-nav .icon,.campaign-public-layout .highlight-container,.character-index.campaign-public-layout .character-list-item,.item-index.campaign-public-layout .character-list-item,.post-player-secret.post-section.player-secret,.campaign-landing-page-container,.wiki-page .post-section.post-main,.wiki-page .post-gm-only.post-section,.adventure-log-index .adventure-log-post,.adventure-log-index .adventure-log-new-container, .campaign-public-layout #campaign-nav, .campaign-public-layout #campaign-nav-icon {
background-color:transparent!important;
}
/*RIGHT SIDEBAR*/
#sidebar img {
max-width:100%;
}
.sidebar-see-all-wiki-pages {
overflow: hidden;
text-align: center;
}
#sidebar {
background:url(https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1099675/parch_3.png?1595859207);
background-size:100% 100%;
padding:10px;
width:250px;
z-index:2;
position:absolute;
right:2%;
top:150px;
transform:scale(1.2);transform-origin:top;
border-radius:8%;
opacity:0.15;
transition: all ease-in-out 1s;
}
.campaign-landing-show #sidebar{height:500px;}
#sidebar:hover {
opacity:1;
transition:all ease-in-out 1s;
}
#sidebar.large-3 .columns .sidebar:before{
background: url(https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1099674/parch_3_top.png?1595859205);
background-repeat:no-repeat;
background-size:100% 100%;
position:absolute;
width:100%;height:34px;
top:-17px;right:0px;
}
#sidebar:after{
background:url(https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1099673/parch_3_bottom.png?1595859204);
background-repeat:no-repeat;
background-size:100% 100%;
position:absolute;
width:100%;height:34px;
bottom:-17px;right:0px;
}
/*FAN AND COMMENT BUTTONS*/
.become-a-fan-button .text{font-size:0}
.sidebar .become-a-fan-button{background: none!important; top:75px;width:200px;left:-80px}
.sidebar .small-7 .columns {height:0;}
.sidebar .become-a-fan-button .icon-card-hearts.icon:before{display: none}
.sidebar .become-a-fan-button .icon-card-hearts.icon{display: block}
.sidebar .become-a-fan-button.button.left .icon-card-hearts.icon:after{
content:"";
background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1021217/Heart_Empty.png);
background-repeat: no-repeat;
background-size: 65px 65px;
background-position: center;
left:0;
top:0;
height: 75px;
width: 200px;
position: absolute;
animation: fan_heart_pulse 2.25s infinite;
border-radius: 50%;
transform-origin: bottom center;
transition: all .2s ease-in-out}
.sidebar .become-a-fan-button.button.is-fan .icon-card-hearts.icon:after{
content:"";
background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1021216/Heart_Full.png);
background-repeat: no-repeat;
background-size: 65px 65px;
background-position: center;
left:0;
top:0;
height: 75px;
width: 200px;
position: absolute;
animation: fan_heart_pulse 2.25s infinite;
border-radius: 50%;
transform-origin: bottom center;
transition: all .2s ease-in-out}
@keyframes fan_heart_pulse{
0%{transform: scale(1)}
5%{transform: scale(.9)}
10%{transform: scale(1)}
15%{transform: scale(.9)}
20%{transform: scale(1)}
100%{transform: scale(1)}
}
.comment-count-wrapper, .fan-count-wrapper{
transition: all .4s ease-in-out;
position: relative;
background: url(https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1021229/BloodSeal.png?1573743031);
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: transparent;
z-index:1;}
.fan-count-wrapper{
height: 85px !important;
width: 85px !important;
left: 140%;
}
.sidebar-quick-stats .count, .sidebar-quick-stats .count-label{color: #551111;text-shadow: 1px 1px 0 #eeaaaa}
.sidebar-quick-stats .count, .comment-count-wrapper .count {padding-top:9px;}
.comment-count-wrapper{border-radius: 50%;height: 85px !important;width: 85px !important;top:-80px;z-index:3;animation: comment_pulse 3s infinite}
.sidebar .become-a-fan-button{transition:all .4s ease-in-out;z-index:10;}
.sidebar .become-a-fan-button.button.is-fan .icon-card-hearts.icon:hover:after,
.sidebar .become-a-fan-button.button.left .icon-card-hearts.icon:hover:after,
.sidebar .become-a-fan-button:hover,
.comment-count-wrapper:hover,
.fan-count-wrapper:hover{transform:scale(1.2)}
@keyframes comment_pulse{
0%{box-shadow: 0 0 0 0 rgba(255, 255, 00, .9)}
20%{box-shadow: 0 0 0 5px rgba(255, 255, 50, .7)}
38%{box-shadow: 0 0 0 7px rgba(255, 255, 100, 0.3)}
50%{box-shadow: 0 0 0 10px rgba(255, 255, 150, 0.0)}
100%{box-shadow: 0 0 0 3px rgba(255, 255, 150, 0.0)}
}
/*BANNER ADJUSTMENTS*/
/*FULL PAGE PC*/
@media only screen and (min-width:1224px) {
.collapsable-nav-row .main-content-container{
width:80%;
top:110px;
}
}
/*SCREEN 770px-1224px WIDE*/
@media only screen
and (max-width:1224px)
and (min-width:770px) {
.collapsable-nav-row .main-content-container{width:75%!important;top:50px;}
.collapsable-nav-row .front-nav-container,
.adventure-log-show .sidebar,
.wiki-page-show .sidebar,
.character-show .sidebar,
.item-show .sidebar {margin-left:5%!important;margin-top:160px!important;top:-60px!important;transform:scale(0.8);transform-origin:top;transition:all ease-in-out 1s;}
.character-index.campaign-public-layout .collapsable-nav-row .front-nav-container{top: 90px!important;}
.item-index.campaign-public-layout .collapsable-nav-row .front-nav-container{top: 20px!important;margin-left:4%!important;}
}
/*SCREEN UNDER 770px WIDE*/
@media only screen and (max-width:769px) {
.collapsable-nav-row .main-content-container {top:40px;}
.campaign-public-layout .page-background{background-position:top;}
}
/*SMARTPHONES*/
@media only screen
and (min-device-width:320px)
and (max-device-width:480px)
{
.collapsable-nav-row .main-content-container {width:100%;top:20px;}
.campaign-public-layout blockquote p{font-size:14px!important;}
.campaign-public-layout .page-background{background-position:top;left:-100px;}
}
/*LEFT-NAVBAR*/
/*BACKGROUND*/
div.collapsable-nav-row.row{padding-left:30px;}
.collapsable-nav-row .front-nav-container {
background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1022509/Nav_Flag_yellow.png);
background-repeat:no-repeat;
background-size:100% 100%;
width: 124px;
height:769px;
padding-top: 100px;
margin:150px 20px 0px -20px;
}
.campaign-public-layout #campaign-nav .nav-links li.active{
background-color: #00000070;
}
/*ICON PLACEMENT*/
.campaign-public-layout #campaign-nav,.campaign-public-layout #campaign-nav .icon {
font-size:0;
}
.campaign-public-layout #campaign-nav li,.campaign-public-layout #campaign-nav li a {
height:50px;
width:90px;
}
/* REMOVE CURRENT TEXT */
#campaign-nav .dashboard .nav-text,#campaign-nav .front-page .nav-text,#campaign-nav .forum .nav-text,#campaign-nav .calendar .nav-text,#campaign-nav .adventure-log .nav-text,#campaign-nav .wiki .nav-text,#campaign-nav .characters .nav-text,#campaign-nav .items .nav-text,#campaign-nav .maps .nav-text,#campaign-nav .settings .nav-text {
font-size:0;
}
/* ADD CUSTOM ICONS*/
#campaign-nav .dashboard{position:absolute!important;top:-100px;}
#campaign-nav .icon-home,
#campaign-nav .op-icon-page,
#campaign-nav .op-icon-book-wiki,
#campaign-nav .op-icon-characters,
#campaign-nav .op-icon-backpack,
#campaign-nav .op-icon-map,
#campaign-nav .op-icon-gears{
height:50px !important;
width:90px !important;}
#campaign-nav .icon-home{background:url("https://www.dropbox.com/s/4pya5mok5sttiib/Home_Icon.png?raw=1")!important;background-repeat:no-repeat !important;background-position: center center !important;}
#campaign-nav .op-icon-page{background:url(https://www.dropbox.com/s/v2ab32w02gvvmss/Journal_Icon.png?raw=1)!important;background-repeat:no-repeat !important;background-position: center center !important;}
#campaign-nav .op-icon-book-wiki{background:url(https://www.dropbox.com/s/r0xxypvk9qv1b98/Codex_Icon.png?raw=1)!important;background-repeat:no-repeat !important;background-position: center center !important;}
#campaign-nav .op-icon-characters{background:url(https://www.dropbox.com/s/r38wkw8okdrhtet/People_Icon.png?raw=1)!important;background-repeat:no-repeat !important;background-position: center center !important;}
#campaign-nav .op-icon-backpack{background:url(https://www.dropbox.com/s/er45b6ewqxvrwdt/Items_Icon.png?raw=1)!important;background-repeat:no-repeat !important;background-position: center center !important;}
#campaign-nav .op-icon-map{background:url(https://www.dropbox.com/s/7vgeehj2rjpmu8h/Map_Icon.png?raw=1)!important;background-repeat:no-repeat !important;background-position: center center !important;}
#campaign-nav .op-icon-gears{background:url(https://www.dropbox.com/s/mlh3s24t1jm2pri/Settings_icon.png?raw=1)!important;background-repeat:no-repeat !important;background-position: center center !important;}
#campaign-nav .icon-home:hover, #campaign-nav .op-icon-page:hover,#campaign-nav .op-icon-book-wiki:hover,#campaign-nav .op-icon-characters:hover,#campaign-nav .op-icon-backpack:hover,#campaign-nav .op-icon-map:hover,#campaign-nav .op-icon-gears:hover {
opacity:0;
}
#campaign-nav .front-page:hover{transform: scale(1.2);z-index:4;background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1020514/Home_Icon_hover.png);background-repeat:no-repeat;width:100px;}
#campaign-nav .wiki:hover{transform: scale(1.2);z-index:4;background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1020513/Codex_Icon_hover.png);background-repeat:no-repeat;width:100px;}
#campaign-nav .characters:hover{transform: scale(1.2);z-index:4;background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1020517/People_Icon_hover.png);background-repeat:no-repeat;width:100px;}
#campaign-nav .maps:hover{transform: scale(1.2);z-index:4;background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1020516/Map_Icon_hover.png);background-repeat:no-repeat;width:100px;}
#campaign-nav .settings:hover{transform: scale(1.2);z-index:4;background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1020518/Settings_icon_hover.png);background-repeat:no-repeat;width:100px;}
#campaign-nav .items:hover{transform: scale(1.2);z-index:4;background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1020512/Gear_Icon_hover.png);background-repeat:no-repeat;width:100px;}
#campaign-nav .adventure-log:hover{transform: scale(1.2);z-index:4;background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1020515/Journal_Icon_hover.png);background-repeat:no-repeat;width:100px;}
/*NAVIGATION&SIDEBAR STICKY*/
.collapsable-nav-row .front-nav-container,
.adventure-log-show .sidebar,
.wiki-page-show .sidebar,
.character-show .sidebar,
.item-show .sidebar {
position:sticky;
transition:all ease-in-out 1s
}
.character-index.campaign-public-layout .collapsable-nav-row .front-nav-container{
position:relative;
top: 100px;
}
.item-index.campaign-public-layout .collapsable-nav-row .front-nav-container{
position:relative;
top: 30px;
}
/* END NAVBAR */
.adventure-log-show .adventure-log-post{width: auto;}
body.campaign-public-layout .post-section.post-main {min-height:100px}
.campaign-public-layout #campaign-summary-row .campaign-public-title-container {position:absolute;width:100%;text-align:center;height:auto;}
.custom.dropdown {display:inline-block !important}
/*HASTUR FADEOUT*/
.wiki-page-slug-hastur .see-all-wiki-pages-button {animation: fadeout 4s linear 0s forwards;}
.wiki-page-slug-hastur .media-library-button.button {animation: fadeout 5s linear 1s forwards;}
.wiki-page-slug-hastur .section.file-docker {animation: fadeout 2s linear 1s forwards;}
.wiki-page-slug-hastur .sidebar {animation: fadeout 8s linear 2s forwards;}
.wiki-page-slug-hastur .front-nav-container {animation: fadeout 2.25s linear 2.5s forwards;}
.wiki-page-slug-hastur .wiki-page {animation: fadeout1 4s linear 4s forwards;}
.wiki-page-slug-hastur #header {animation: fadeout 6s linear 7s forwards;}
.wiki-page-slug-hastur .page-background {opacity:0; background-image:url("https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1028696/Yellow_Sign_BG.png?1576248951"); background-position:center; animation: fadeout2 3s linear 9s forwards;}
.wiki-page-slug-hastur .campaign-public-header, .wiki-page-slug-hastur #campaign-footer {animation: fadeout1 6s linear 4s forwards;}
/*CUSTOM CURSOR*/
.campaign-public-layout, .campaign-dashboard-layout {cursor: url(https://www.dropbox.com/s/akgy58bmdaqwqwh/SilverCursor.png?raw=1),auto;}
a:hover {cursor: url(https://www.dropbox.com/s/6o5r2lb0wihne2s/GreenCursor.png?raw=1),pointer;}
.campaign-public-layout #sidebar .module {opacity:0.75;}
.row .row {height:0px;}
.main-section .row{height:auto;}
/* TABLES */
.tcolumn {
float: left;
width: 33.33%;
padding: 10px;
}
.trow {
height:auto;
content: "";
display: table;
clear: both;
width:100%;
}
@media screen and (max-width: 600px) {
.tcolumn {
width: 100%;
}
}
.campaign-public-layout .wiki-page table {
border: none;
border-radius:7%;
font-size:20px;
font-family:Jura;
background-color: rgba(125,125,125,.4);
border-collapse: collapse;
width:fit-content;
max-width:100%;
text-shadow: -1px -1px 0 #000;
margin-left:auto; margin-right:auto;
}
.campaign-public-layout .wiki-page td {
color:white;
padding-right:25px;
}
.campaign-public-layout .wiki-page th {
text-align: right;
max-width:137px;
padding: 10px 10px 10px 20px;
}
.campaign-public-layout .wiki-page table tr:nth-of-type(2n) {
background-color: rgba(5,125,29,.35);
}
.ResearchTable td {
border-collapse: collapse;
width: 60%;
margin:auto;}
.ResearchTable td tr, .ResearchTable th td {
border:none; padding:8px;
font-size:14px;
}
.ResearchTable th td{
background-color:black;
color:white;
padding-top:0px;padding-bottom:0px;
text-align: flex;
}
.ResearchTable tr:nth-child(6) {
padding-top:0px;padding-bottom:0px;
font-size:10px;
}
/* Default Header Text aka H-Tags */
.ScrollBanner {
text-align:center;
font-size:40px;
width:100%;
height:75px;
background-image:url('https://www.dropbox.com/s/0calz65lryc8dzg/ScrollBanner.png?raw=1');
background-repeat:no-repeat; background-position:center center;background-size:100% 100%;
margin-top:10px;
margin-bottom:20px;
position:relative;
padding-top: 22px;}
.WikiTitle {position: relative; top: 10px;}
.FlipH{ transform:scaleX(-1);}
.GodImage {
float:right;
width:200px;
padding-left:10px;
margin-right:20px;
}
/*SET CHARACTER PAGE WIDTH*/
body.character-show #content {max-width: 1600px;}
.campaign-public-layout #character-details {
width:100%;
}
.character-slug-the-veil #character-details,
.character-slug-hinks-argrup #character-details,
.character-slug-aldrich #character-details,
.character-slug-Kiera #character-details,
.character-slug-lei-long-the-lightning-dragon #character-details,
.character-slug-virgil-howell #character-details
{
max-width:860px;
transform:scale(1.4); transform-origin:top;
margin-left:155px;
}
/*BLOCK QUOTE STYLING*/
.campaign-public-layout blockquote p{font-style:italic; font-family:Jura; font-weight:bold; font-size:18px; line-height:1.25;text-align: justify;color: darkslategray !important;}
.campaign-public-layout blockquote {margin:5px;padding-top:0px;padding-bottom:0px;padding-left:17px;padding-right:17px !important;border-left:none;
transition: all .5s ease-in-out;position: relative;z-index: 2;max-width: 100%}
.campaign-public-layout blockquote:before {background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/154555/assets/683527/quote-left.png);background-position: top left;background-repeat: no-repeat;width: 33px;height: 39px;left: -10px;top: -12px;content:"";position: absolute;z-index: 3; transform:scale(0.5);}
.campaign-public-layout blockquote:after {background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/154555/assets/683528/quote-right.png);background-position: bottom right;background-repeat: no-repeat;width: 33px;height: 39px;right: -10px;bottom: -12px;content:"";position: absolute;z-index: 3;transform:scale(0.5);}
.campaign-public-layout blockquote p:first-letter{font-family: Old English;text-shadow: 2px 2px #000000;font-size: 300%;line-height: 75%;
float: left;padding: 2px 7px 5px;margin-bottom:-15px;margin-right: -5px;bottom: -5px;
font-style: normal}
/*WIKIPAGE TITLE*/
.wiki-page-name {
font-family:Architects Daughter;
font-size:40px;
text-align:center;
}
body.campaign-public-layout .title{
border:none;}
/*REMOVE CHARACTER TITLE*/
h2.character-name.title {display: none !important;}
/* BEGIN - CSS only parchment background on content */
/*RAISE EDIT BUTTONS ABOVE PARCHMENT*/
.header-icon {z-index:999;}
.wiki-page .header-icon {z-index:999;}
.adventure-log-post-container.teaser .header-icon {z-index:999;}
/* Parchment body */
.adventure-log-post-container.teaser,
.adventure-log-post-container.full .post-comments.post-section,
.adventure-log-post-container.full .post-gm-only.post-section,
.adventure-log-post-container.full .post-player-secret.post-section,
.adventure-log-show .post-main,
.campaign-public-layout #character-details,
.character-show .post-player-secret.post-section.player-secret,
.wiki-page,
.character-show .main-content section,
.item-show .main-content section {
background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1099675/parch_3.png?1595859207');
background-position:center; background-size:100%; background-color : transparent!important;
position:relative; z-index:1; margin-bottom: 40px!important;
font-size:20px;
font-family:Julee;
}
/* Parchment header */
.adventure-log-post-container.teaser:before,
.adventure-log-post-container.full .post-comments.post-section:before,
.adventure-log-post-container.full .post-gm-only.post-section:before,
.adventure-log-post-container.full .post-player-secret.post-section:before,
.character-show .post-player-secret.post-section.player-secret:before,
.adventure-log-show .post-main:before,
.wiki-page:before,
.character-show .main-content section:before,
.item-show .main-content section:before { top:-16px; height:34px;
background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1099674/parch_3_top.png?1595859205');
background-color : transparent; background-repeat:no-repeat; background-position: center center; background-size:100%;
position:absolute; z-index:-1; width:100%; left:0px;content:"";
}
/* Parchment footer */
.adventure-log-post-container.teaser:after,
.adventure-log-post-container.full .post-comments.post-section:after,
.adventure-log-post-container.full .post-gm-only.post-section:after,
.adventure-log-post-container.full .post-player-secret.post-section:after,
.adventure-log-show .post-main:after,
.post-player-secret.post-section.player-secret:after,
.wiki-page:after,
.character-show .main-content section:after,
.item-show .main-content section:after { bottom:-16px; height:34px;
background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/216748/assets/1099673/parch_3_bottom.png?1595859204');
background-color : transparent; background-repeat:no-repeat; background-position: center center; background-size:100%;
position:absolute; z-index:-1; width:100%; right:0px;content:"";
}
/* Positioning content on parchment */
.adventure-log-post-container.full .post-comments.post-section, .character-show .main-content section, .item-show .main-content section{ padding-left: 6.5%; }
.wiki-page { padding-left: 1.5%; }
/* END - CSS only parchment background on content */
/* ADVENTURE LOGS */
.adventure-log-index .small-9{width:100%;}
.adventure-log-index .adventure-log-post{height: 300px !important;}
.adventure-log-index .post-content{height: 275px;width: 100%;}
/* Adventure Log Screen Transparency */
.adventure-log-index .adventure-log-post-title {font-size:1.25em;}
.adventure-log-index .adventure-log-new-container a.button.adv-new {margin-bottom:20px;z-index:10;}
/* Individual Adventure Log Screens */
.adventure-log-show .neighbor-post:hover{transform: scale(1.1);z-index:5;transform-origin: top}
.adventure-log-page .post-title {position:relative;z-index:10;}
/* CHARACTER LISTING PAGE ALTERATIONS */
.main-content .pc-list-header,
.main-content .npc-list-header {
text-align:center;
font-family:Architects Daughter !important;
font-size:30px !important;
color:white !important;
margin-bottom:21px;
}
.character-index.campaign-public-layout .character-list-item .edit-link,
.item-index.campaign-public-layout .character-list-item .edit-link{z-index:999;}
.character-list-item-container {
position:relative !important;
width:200px !important;
height:200px !important;
display:inline;
clear:none !important;
color:transparent;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
text-align:center;
}
}
.character-index.campaign-public-layout .character-list-item h4.character-name {
border-bottom:0px !important;
}
.character-index.campaign-public-layout .character-list-item h4.character-name a,
.item-index.campaign-public-layout .character-list-item h4.item-name a {
color:#b6b8b6!important;
text-decoration:none;
font-size:25px;
position:absolute !important;
bottom:15px !important;
left:5px !important;
width:166px;
height:166px;
padding-top:130px;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 2px 2px #000000 !important;
z-index:999;
}
.character-list-item {
min-height:140px !important;
}
}
.character-list ul {
padding-left:6px;
padding-right:6px;
}
}
.character-list-item .icon-edit {
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 2px 2px #000000;
color:white;
}
.character-index .character-list {
margin-bottom:10px;
}
.character-list-item {overflow: visible!important}
.right-side-fade-out{display: none;}
.character-name{border:0 !important}
.character-info{overflow: hidden}
.character-show .icon-edit, .character-list-item .icon-edit, .wiki-page .icon-edit.item-show .icon-edit, .item-list-item .icon-edit{text-shadow: 1px 1px 0 #666666;margin-right:10px;margin-top:5px}
/*SHAPE PC IMAGE, ADD SHADOW, ADD SEPIA FADE*/
.character-list-item .game-content-image{
box-shadow:0 3px 5px 3px rgba(30,30,30,.7);
border-radius: 35%;
filter: sepia(65%);
position: relative !important;
display: inline-block;
z-index: 1;
transform: scale(1.25);}
/*ADDS MOUSE HOVER EFFECTS*/
.character-list-item h4 a:hover,
.character-show .icon-edit:hover,
.wiki-page .icon-edit:hover,
.item-show .icon-edit:hover,
.adventure-log-index .icon-edit:hover,
.character-list-item .icon-edit:hover {text-shadow: 1px 1px 0 #373737, 2px 2px 1em #006400}
/*ADVENTURE LOG GROW ON HOVER*/
.adventure-log-post-container.teaser:hover{
transition: all 3s ease-in-out;
transform-origin: center;
transform: scale(1.05);
z-index: 10;}
/*PORTRAIT GROW ON HOVER*/
.character-list-item:hover .game-content-image{
transition: all 1s ease-in-out;
transform-origin: center;
filter: sepia(0%);
overflow: visible!important;
z-index: 3;
position: absolute;
box-shadow: 35px 35px 35px rgba(30,30,30,.9);
animation: pulse 4s linear infinite;}
/*COTM SPLASH SCREEN*/
.splashlogo{
position:fixed;
right:0;
bottom:0;
width:10%;
}
.splash{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:black;
display:flex;
justify-content:center;
align-items:center;
animation: splashlogo 4s linear 0s forwards;
}
@keyframes splashlogo{
0%{opacity:1;z-index:999;}
75%{opacity:1}
99.9%{position:fixed;}
100%{opacity:0; z-index:-100;position:absolute;display:none;}
}
/*ANIMATIONS*/
@keyframes pulse {
0% {transform: scale( 1.25 );}
25% {transform: scale( 1.3 );}
40% {transform: scale( 1.35 );}
60% {transform: scale( 1.5 );}
70% {transform: scale( 1.25 );}
95% {transform: scale( 1.4 );}
100% {transform: scale( 1.25 );}
}
@keyframes fadeout
{
0% {transform: scale( 1 ); transform-origin: center; opacity:1;}
100% {transform: scale( .25 ); transform-origin: center; opacity:0;}
}
@keyframes fadeout1
{
0% {transform: scale( 1 ); transform-origin: top; opacity:1;}
100% {transform: scale( .25 ); transform-origin: top; opacity:0;}
}
@keyframes fadeout2
{
0% {transform: scale( 1 ); transform-origin: center; opacity:0;}
10% {opacity:1;}
100% {transform: scale( 3 ); transform-origin: center; opacity:0;}
}
@keyframes settle
{
0% {transform: scale(0);}
10% {transform:scale(1) rotate(20deg);transform-origin:top;}
25% { transform:rotate(0deg); transform-origin:top;}
40% { transform:rotate(-15deg); transform-origin:top;}
55% { transform:rotate(0deg); transform-origin:top;}
70% { transform:rotate(10deg); transform-origin:top;}
85% { transform:rotate(-5deg); transform-origin:top;}
100% { transform:rotate(0deg); transform-origin:top;}
}
@keyframes flyin
{
0% {opacity:1;transform: scale(0);transform-origin:top;opacity(0)}
100% {transform:scale(1); transform-origin:top;opacity:1}
}
@keyframes unfurl
{
0% {transform: scaleY(0); opacity(1)}
100% {transform:scaleY(1);transform-origin:top;}
}
pre{
height: auto;
max-height: 600px;
width: 85%;
margin-left:auto;margin-right:auto;
font-size:18px;
overflow: auto;
word-break: normal !important;
word-wrap: break-word !important;
white-space: pre !important;
background-color: rgba(255,255,255,0.3)
}
CSS shamelessly stolen from the following users/campaigns:
- For the character image zoom on hover and sepia shift, I dissected the CSS from Bortas’s Morwindl campaign but then altered the animation so that the portrait mimicked a slow heartbeat.
- The sidebars felt too cluttery so I applied an opacity filter to them that hide them until hovered over. They are still a bit wonky on page placement, but better than being a constant eye sore. I borrowed the nav-bar CSS customization from both Bortas and Conan_Lybarian and his The Cold Truce campaign.
*I stole the parchment sheet background CSS from Thorvaldr’s Tyellador and Bortas’s Morwindl campaign, but changed the parchment to match that of Ikabodo’s A Tale of Blood and Honour. - Numerous campaigns, Twitch CSS streams, and forum posts by Kallak
Last Update:
by:
gastoff
Ascendant campaigns can view previous versions of their pages, see what has changed (and who did it), and even restore old versions. It's like having a rewind button for your campaign.
We've already been saving your edits, so if you upgrade now you will have instant access to your previous versions. Plus, you have our no risk refund guarantee , so there's nothing to lose.