MediaWiki:Common.less/oswf.less

root {

--oswf-page-container-border-color: @mystic; --oswf-page-container-bg: @white; --oswf-page-container-box-shadow: @box-shadow; --oswf-tile-border-color: @la-palma; --oswf-tile-complete-border-color: @old-brick; --oswf-tile-complete-bg: @old-brick; --oswf-tile-banner-bg: @la-palma; --oswf-tile-banner-color: @white; --oswf-section-header-bg: @gallery; --oswf-section-border-color: @base-heading-border; --oswf-section-page-header-bg: @ecstasy; --oswf-section-page-header-colors: @white; --oswf-quicklinks-bg: @black-haze; --oswf-quicklinks-discord-bg: #5865F2; --oswf-quicklinks-link-color: @white; --oswf-text-color: @ecstasy; }

.oswf-page-container {

   width: 100%;
   border-radius: .5em;
   max-width: 80rem;
   margin-left: auto;
   margin-right: auto;
   border: 1px solid var(--oswf-page-container-border-color);
   background: var(--oswf-page-container-bg);
   box-shadow: var(--oswf-page-container-box-shadow);
   
   .mw-headline-underline {
   	display: none;
   }
   
   .oswf-tile {
   	max-width: 35em;
   	padding: 0;
   	border-color: var(--oswf-tile-border-color);
   	
   	&.oswf-tile-complete {
   		order: 10;
   		border-color: var(--oswf-tile-complete-border-color);
   		
   		.oswf-tile-banner {

background: var(--oswf-tile-complete-bg);

   		}
   		
   		.oswf-tile-content {
   			opacity: 0.5;
   		}
   	}

.oswf-tile-banner { padding: .5em 2em; background: var(--oswf-tile-banner-bg); color: var(--oswf-tile-banner-color); }

.oswf-tile-content { padding: 1.5em 2em 1.5em; }

   }

}

.oswf-section-header {

   padding: .25em 2em;
   background: var(--oswf-section-header-bg);
   display: flex;
   flex-direction: row;
   align-items: center;
   border-top: 1px solid var(--oswf-section-border-color);
   border-bottom: 1px solid var(--oswf-section-border-color);
   justify-content: space-between;
   
   h2, h5 {
   	padding: 0;
   	margin: .3em 0;
   }

   &.oswf-page-header {
       background: var(--oswf-section-page-header-bg);
       border-radius: .5em .5em 0 0;
       border: none;
       

h2, h5 {

       	color: var(--oswf-section-page-header-colors);
       	padding: 0;
   		margin: .5em 0;
   	}
   }

}

.oswf-page-section {

   padding: 1em 2em;
   
   p:last-child,
   &.rules-section ul {
   	margin-bottom: 0;
   }

}

.oswf-page-quicklinks {

   padding: 0 2em;
   background: var(--oswf-quicklinks-bg);
   display: flex;
   flex-direction: row;
   align-items: center;
   border-bottom: 1px solid var(--oswf-section-border-color);

   .oswf-page-quicklinks-col {
       padding: .5em 1em .5em 0;
       border-right: 1px solid var(--oswf-section-border-color);
       
       p, h5 {
       	margin: 0;
       	padding: 0;
       }

       &:not(:first-child) {
           padding-left: 1em;
       }

       &.oswf-ql-discord {
           background: var(--oswf-quicklinks-discord-bg);

           a, h5 {
               color: var(--oswf-quicklinks-link-color);
           }
           
           img {
           	margin-right: .3em;
           }
       }
   }

}

.oswf-text-primary {

   color: var(--oswf-text-color);

}