vsscollab 2022 jun badge.png

World Styling Editor

SELECT THEME

CUSTOM CSS

/* ==UserStyle==
@name           VSSCollab
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Shyredfox
==/UserStyle== */

/*  ---------------------------------
Ademal's grid column hack - gifted in Discord server
-------------------------------- */
/*Contain-Grid*/
 @media only screen and (min-width: 960px){
    .contain-grid{
        display: grid;
        grid-gap: 20px;
        grid-auto-rows: minmax(0px, auto) ;
    }
    .contain-grid-col-5 {
        grid-template-columns: repeat(5, 1fr) ;
    }
    .contain-grid-col-4 {
        grid-template-columns: repeat(4, 1fr) ;
    }
    .contain-grid-col-3 {
        grid-template-columns: repeat(3, 1fr) ;
    }
    .contain-grid-col-2 {
        grid-template-columns: repeat(2, 1fr) ;
    }
}

:root {
	--border-rad: 10px;
	--box-shadows: 3px 3px 5px #2f4a3857;
	--HLbox-padding: 20px;
	--font-color: #111;
	
	/* colors */
	--butter: #f1e8c1;
	--mint-light: #b7e7e7;
	--HLBox-color: #cadda9;
	--HLBox-color-light: #cadda97d;
	--sage: #2f6d6d;
	--burgundy: #692b58;
	--grey-bg: #bed9d859;
	--link: #c35858;
	--link2:#5c4e44;
		/*#502a0d; */
	--text: #bc834a;
	--issue-header-color: #85858561;
	--issue-header-paddding: 10px;
}

@font-face {
 font-family: Silent;
 font-style: normal;
 font-weight: 400;
 src: url(https://rawcdn.githack.com/shyredfox/vssCollab/76b56ce053ce6cf7d6f86b5054f9ab714558471a/Silent%20by%20_retr0.otf) ;
}

/* Theme */
.user-css h1 { font-size: 60pt }
.user-css h2 { font-size: 24pt }
.user-css h3 { font-size: 24pt }
.user-css h4 { font-size: 18pt; }
.user-css h5,.user-css .article-panel h5.heading { font-size: 16pt }
.user-css h6 { font-size: 14pt }

.user-css h5 {
	text-transform: capitalize;
	font-style: italic;
}

.user-css h1, .user-css h2, .user-css h3, .user-css h4, .user-css h5, .user-css h6 {
	font-family: Silent;
	font-weight: 800;
}

.user-css, .user-css .article-content, .user-css .article-content p {
    font-family: Ubuntu, Robotos,sans-serif;
    font-size: 16px;
}

.user-css .backtoworld a { font-family: Ubuntu, Robotos,sans-serif; 
color: var(--text)}

.user-css .subheading { margin-top: 50px; }

.user-css .article-panel,
/* .user-css [class*=card-bod], */

.user-css .backtoworld a
{ background: var(--butter) }

.user-css .statblock { 
	background: var(--HLBox-color-light);
	border-radius: var(--border-rad)
}

.user-css .article-panel, .user-css .panel-default .article-panel {
	border-radius: var(--border-rad);
	outline: 2px solid #5c4e4475;
	border: none;
}

/* hide the "Generic Article" text but show the date */
.user-css .article-panel .subheading {
	visibility: hidden;
	margin-top: 20px;
}
.user-css .article-panel .subheading .date {
	visibility: visible;
	display: block;
}

.user-css .article-horizontal-navigation .article-panel .subheading {
	display: none;
}

/* Hide the world subtitle on the main page - but have it show up in world blocks */ 
.user-css.page-world-homepage #world-subtitle { 
	display: none !important;
	/* font-family: Ubuntu;
	line-height: 1em;
	font-size: 18pt;
	background: var(--butter);
	padding: 20px;
	border-radius: var(--border-rad);
	margin: 30px;
	box-shadow: var(--box-shadows);
    -moz-box-shadow: var(--box-shadows);
    -webkit-box-shadow: var(--box-shadows); */
}

.user-css #world-category-content [class*=card-bod] {
	background-color: var(--HLBox-color);
}

.user-css .article-content-right .card {
	border-radius: var(--border-rad);
	outline: none;
	background: #f6f5dc7d;
}

.user-css .articletoc {
	border-radius: var(--border-rad);
	padding: var(--HLbox-padding) !important;
	width: 100%;
	background: var(--mint-light);
}

.user-css .backtoworld a { color: var(--link2) }

.user-css a {
	color: var(--link);
}

.user-css h4 { 
	font-weight: 600;
	font-style: italic;
}

.user-css .article-list .article-panel 
{ background: var(--butter) }

.user-css .article-panel .cover {
    border-top-left-radius: var(--border-rad);
    border-top-right-radius: var(--border-rad);
    position: relative;
    padding: 0;
	margin: 0;
}

.user-css .article-panel {
	padding: 0;
	margin: 10px;
}

.user-css .article-panel .details {
	padding: 10px 15px 10px 15px;
}

.btn-primary:hover
{ background: var(--sage)  }

/* user card */
.user-css .usercard {
	min-width: 400px;
	max-width: 400px;
}

.user-css .usercard {
	max-width: 300px;
	margin: 10px;
	display: inline-block;
	vertical-align: top;
	border-radius: var(--border-rad);
	background: var(--butter);
	border: 0;
	box-shadow: var(--box-shadows);
    -moz-box-shadow: var(--box-shadows);
    -webkit-box-shadow: var(--box-shadows);
	color: var(--text);
}

.user-css .usercard a {
	color: var(--link2);
}

.user-css .usercard-avatar {
	max-width: 75px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 15px;
	
}

.user-css .spoiler-card {
	border-radius: var(--border-rad);
	margin: 10px;
}

.user-css .secret-subdivision {
	border: 1px dotted black;
	padding: 15px;
	border-radius: var(--border-rad);
	background: var(--mint-light);
}

/* hide the "articles under..." - replacing with tag search on sidebar for TOC */
.user-css .article-horizontal-navigation {
	display: none;
}

/* fixes jump links leaveing the header off the page */
span, h2, h3, h4 {
  scroll-margin-top: 12rem; 
}

.no-article-subheading .subheading {
	display: none;	
}

/* make the section have a "return" */
.as-block {
	display:block;
}

/* This world is NOT world building - don't show the WA competition bits */
.user-css .article-competition-entries {
	display: none;
}

/* highlights */
/* highlight line */
.HL, .HL-light {
   background: var(--HLBox-color);
   border-radius: 5px;
   padding-right: 5px;
   padding-left: 5px;
}

.HL-light {
	background: var(--HLBox-color-light);
}

.box img {
	box-shadow: var(--box-shadows);
   -moz-box-shadow: var(--box-shadows);
   -webkit-box-shadow: var(--box-shadows);
	border-radius: var(--border-rad);
}

.HLBox, .world-social-twitch, .user-css .spoiler-card .HLBox {
   border-radius: var(--border-rad);
   padding: var(--HLbox-padding);
   box-shadow: var(--box-shadows);
   -moz-box-shadow: var(--box-shadows);
   -webkit-box-shadow: var(--box-shadows);
   background: var(--HLBox-color);
}

.HLBox .statblock {
	background: var(--HLBox-color-light);
	padding: 0;
	margin: 0;
}

.grey-bg {
	background: var(--grey-bg);
}

.celery {
	background: var(--HLBox-color-light);
}

.wid-100 {
	width: 100px;
}

.hide-statblock .statblock{
	padding: 0;
	background: none;
}

/* rename the World TOC */
.user-css .world-menu h2.world-toc-header {
	display: none;
}

.user-css .world-menu {
	margin-bottom: 50px;
}

/* hide fox's social media - as this is for multiple authors! */
.user-css .article-social-media {
	display: none;
}

.user-css .discussion-board-back-to-world {
	bottom: 10px;
}

.user-css .discussion-board-back-to-world ~ .mt-3 {
	margin-top: 10px;
}

/* issue/zine */

.font-silent {
    font-family: Silent, sans-serif;	
}

.margin-10 {
	margin: 10px;	
}

.zine-page {
	/* zine page dimensions 1000 x 1414 */
	--zine-page-wid: 100%;
	--zine-img-wid:  600px;
	--zine-link-color: yellow;
	--zine-read-text-color: white;
	--zine-read-bg: #0000009e;
	
	width: var(--zine-page-wid);
	padding: 0 !important;
	position: relative;
}

.zine-page img { /* round the corners */
	border-radius: 20px;
}

.zine-read a {
	color: yellow;
}

.zine-embed {
	display: none;
}

.tag-issue .statblock {
	padding: 0;
	background: none;
}

.zine-access .spoiler-card {
	width: 100%;
	margin: 0;
}

.zine-page iframe {
	height: 80vh;
	width: 100%;
	margin: 0;
}

.zine-page .zine-cover img {
	position: relative;
	top: -80px;
}

.zine-page .spoiler-card[aria-expanded*=true] ~ .zine-cover {
	display: none;
}

/* WA Magazine display */
@media only screen and (min-width: 1000px) {
	.zine-columns { /* news columns */
		margin: 15px;
		column-count: 2;
		column-gap: 5em;
		padding: 20px 20px 20px 20px; 
		background: #a9dddc33;
		border-radius: var(--border-rad);
		column-rule: 1px solid #add8e64a;
	}
}

.zine-author {
	font-size: .8em;
}

.zine-hidden {
	visibility: hidden;
}

.zine-card {
	display: block;
}

.zine-card .usercard {
	min-width: 90%;
	max-width: 100%;
	text-align: center;
}

/* block of information on the zine and issue */
.zine-issue-block {
   border-radius: var(--border-rad);
   padding: 15px;
   margin: 5px;
   box-shadow: var(--box-shadows);
   -moz-box-shadow: var(--box-shadows);
   -webkit-box-shadow: var(--box-shadows);
   background: var(--HLBox-color);
	text-align: center;
}

.zine-issue-header {
	border-radius: var(--border-rad);
	padding: var(--issue-header-paddding);	
	background: var(--issue-header-color);
	text-align: center;
}

.zine-issue-header.font-silent{
	font-size: 2em;
	font-weight: 800;
}

.zine-issue-details {
	column-count: 2;
	column-gap: 5em;
	padding: 15px 10px 10px 10px; 
	border-radius: var(--border-rad);
	column-rule: 1px solid #858585d4;
}

/* Copyright year statblock just display the text! */ 
.statblock.template-currentyear-tillerz-208 {
    background: none;
    border: none;
    display: inline;
    box-shadow: none;
    margin: 0;
    padding: 0;
    color: inherit;
}

Need help? Check out the CSS Styling Guide