MediaWiki

Foreground.css: Difference between revisions

From Breaking Worlds

No edit summary
(Hopefully fixing the margins on the images)
 
(90 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
/* Custom Foreground menubar colors */
  
/* Custom Foreground menubar colors */
 
.top-bar,
  
.top-bar,
−
.top-bar .title-name,
 +
.top-bar .name h1 a,
 
.top-bar-section ul,
  
.top-bar-section ul,
 
.top-bar-section ul li.active > a,
  
.top-bar-section ul li.active > a,
 
.top-bar-section li a:not(.button),
  
.top-bar-section li a:not(.button),
 
.top-bar-section .has-form {
  
.top-bar-section .has-form {
−
background: #CCCCFF;
 +
background: #ccf;
−
color: #444;
 +
color: #353542;
  +
}
  +
  +
#navwrapper > .top-bar {
  +
margin: 0;
  +
z-index: 1;
  +
font-family: "Calibri", "Helvetica Neue", "Arial", Sans-Serif;
 
}
  
}
   
 
.top-bar-section > ul > .divider,
  
.top-bar-section > ul > .divider,
 
.top-bar-section > ul > [role="separator"] {
  
.top-bar-section > ul > [role="separator"] {
−
border-color: #CCCCFF;
 +
border-color: #ccf;
−
color: #444;
  
 
}
  
}
   
−
/* Darker color for the hover over items */
  
−
.top-bar-section ul li.hover > a,
  
 
.top-bar-section ul li ul.dropdown li.hover > a {
  
.top-bar-section ul li ul.dropdown li.hover > a {
−
background: #CCCCFF;
 +
background:#8f8fb3;
  +
}
−
color: #444;
  
  +
  +
.top-bar-section > ul > li.hover > a{
  +
background:#adadd8;
 
}
  
}
   
−
/* Slightly darker color for the dropdowns */
  
 
.top-bar-section ul li ul.dropdown li > a {
  
.top-bar-section ul li ul.dropdown li > a {
−
background: #CCCCFF;
 +
background:#adadd8;
  +
}
−
color: #444;
  
  +
  +
.top-bar-section ul li ul.dropdown {
  +
z-index: -1 !important;
  +
}
  +
  +
#top-bar-left h5 a {
  +
color: #353542;
  +
}
  +
  +
#navwrapper .toggle-topbar span {
  +
color: #353542;
  +
-webkit-box-shadow: 0 10px 0 1px #353542, 0 16px 0 1px #353542, 0 22px 0 1px #353542;
  +
box-shadow: 0 10px 0 1px #353542, 0 16px 0 1px #353542, 0 22px 0 1px #353542;
  +
}
  +
  +
#navwrapper .top-bar.expanded .toggle-topbar span {
  +
color: #515166;
  +
-webkit-box-shadow: 0 10px 0 1px #515166,0 16px 0 1px #515166,0 22px 0 1px #515166;
  +
box-shadow: 0 10px 0 1px #515166,0 16px 0 1px #515166,0 22px 0 1px #515166;
  +
}
  +
#navwrapper .top-bar.expanded .title-area {
  +
background: #8f8fb3;
  +
}
  +
#top-bar-left a {
  +
font-size: 0.8125em;
  +
}
  +
  +
#top-bar-right > li {
  +
padding: 0;
  +
}
  +
  +
#top-bar-right button {
  +
display: none;
  +
}
  +
  +
#top-bar-right form{
  +
position: relative;
  +
margin: 8px 8px 8px 0;
  +
}
  +
  +
h1, h2, h3, h4, h5, h6 {
  +
color: #404088;
  +
font-family: "Trebuchet MS", "Helvetica Neue", "Arial", Sans-Serif;
  +
}
  +
  +
h1 {
  +
font-size: 1.8em;
  +
}
  +
  +
h2.title{
  +
font-size: 2em;
  +
}
  +
  +
h2 > span {
  +
display: inline;
  +
}
  +
h2 {
  +
margin-top: 0.9em;
  +
font-size: 1.5em;
  +
}
  +
  +
h3 {
  +
margin-top: 0.9em;
  +
}
  +
  +
.ns-subject h3{
  +
font-size: 1.15em;
  +
}
  +
  +
h4 {
  +
font-size: 1em;
  +
}
  +
  +
  +
p {
  +
margin-bottom: 0.6em;
  +
font-size: 1.04em;
  +
}
  +
  +
h1.title-name.title-name > a {
  +
display: inline-block;
  +
width: auto;
  +
}
  +
  +
#footer-lastmod, #footer-viewcount, #tagline, #footer .poweredby {
  +
display: none;
  +
}
  +
  +
#toc {
  +
float:right;
  +
font-size:0.8em;
  +
padding: 0 8px 8px;
  +
background: #f5f5ff;
  +
border: thin solid #9898bf;
  +
margin: 0px 0px 16px 16px;
  +
max-width: 30vw;
  +
border-radius: 4px;
  +
word-wrap: break-word;
  +
hyphens: auto;
  +
clear:both;
  +
}
  +
  +
#toctitle > .toctoggle {
  +
display: none;
  +
}
  +
  +
#toctitle > h2 {
  +
color: #434354;
  +
font-size: 1.1em;
  +
text-transform: uppercase;
  +
font-family: "Calibri", "Helvetica Neue", "Arial", Sans-Serif;
  +
}
  +
  +
#toc#toc ul {
  +
color: #9898bf;
  +
margin: 0 0 0 1em;
  +
}
  +
  +
#toc .tocnumber {
  +
display: none;
  +
}
  +
  +
#page-content {
  +
width: 800px;
  +
min-width: 70%;
  +
max-width: 100%;
  +
background: white;
  +
margin: -45px auto;
  +
padding: 45px 6px 6px;
  +
font-family: "Calibri", "Helvetica Neue", "Arial", Sans-Serif;
  +
min-height: 100vh;
  +
}
  +
  +
.row {
  +
max-width: 100%;
  +
}
  +
  +
body {
  +
font-size: 0.9em;
  +
}
  +
  +
#mw-content-text > .floatleft img, #mw-content-text > .floatright img {
  +
border-radius: 4px;
  +
}
  +
  +
#mw-content-text > .floatleft, #mw-content-text > .floatright {
  +
padding: 0.5em;
  +
}
  +
  +
.fillwidthcontainer {
  +
overflow: auto;
  +
hyphens: auto;
  +
}
  +
  +
@media only screen and (min-width:58.75em) {
  +
.fillwidthcontainer {
  +
hyphens: none;
  +
}
  +
body {
  +
background-attachment: fixed;
  +
background-position: center;
  +
background-size:130vw;
  +
font-size:1em;
  +
background-color: #a98c62;
  +
background-image: url("http://www.camlarp.co.uk/w/images/b/b0/Arginet_lowcontrast_unlabelled_1366x768_inkscape.jpg");
  +
}
  +
  +
@media only screen and (max-height:1080px) and (min-height:801px), only screen and (max-height:1080px) and (min-width:1367px) {
  +
body {
  +
background-image: url("http://www.camlarp.co.uk/w/images/2/27/Arginet_lowcontrast_unlabelled_1080.jpg");
  +
}
  +
}
  +
  +
@media only screen and (min-height:1081px) {
  +
body {
  +
background-image: url("http://www.camlarp.co.uk/w/images/8/83/Arginet_lowcontrast_unlabelled_morecompressed.jpg");
  +
}
  +
}
  +
  +
@media only screen and (max-aspect-ratio: 2556/5382) {
  +
body {
  +
background-size: cover;
  +
}
  +
}
  +
#categorybox#categorybox {
  +
hyphens: none;
  +
}
  +
#navwrapper > .top-bar {
  +
box-shadow: 0px 0px 8px -2px rgba(0,0,0,0.7);
  +
}
  +
.title-area {
  +
z-index: 1;
  +
}
  +
.top-bar-section {
  +
height: 100%;
  +
background: #ccf;
  +
}
  +
.top-bar-section ul li ul.dropdown li.hover > a {
  +
box-shadow:0px 10px 8px -10px #70708c inset,0px -10px 8px -10px #70708c inset;
  +
}
  +
.top-bar-section > ul > li.hover > a {
  +
box-shadow: 10px 0px 8px -10px #8f8fb3 inset, -10px 0px 8px -10px #8f8fb3 inset;
  +
}
  +
.top-bar-section ul li ul.dropdown {
  +
box-shadow:0px 0px 8px -2px rgba(0,0,0,0.7);
  +
}
  +
#page-content {
  +
box-shadow: 0px 0px 10px -2px black;
  +
padding: 45px 25px 25px;
  +
}
  +
#top-bar-right .small-12 {
  +
padding: 0;
  +
}
  +
#top-bar-right .has-dropdown > a {
  +
padding-left: 10px;
  +
}
  +
#personal-tools-dropdown {
  +
z-index: auto;
  +
}
  +
#mw-content-text > .floatleft {
  +
padding-right: 1.5em;
  +
padding-left: 0;
  +
}
  +
  +
#mw-content-text > .floatright {
  +
padding-left: 1.5em;
  +
padding-right: 0;
  +
}
  +
}
  +
  +
.f-dropdown::before, .f-dropdown::after {
  +
display: none;
  +
}
  +
  +
#drop1 {
  +
right: 15px !important;
  +
left: unset !important;
  +
}
  +
  +
.flourish {
  +
display: block;
  +
background-size: contain;
  +
background-repeat: no-repeat;
  +
position: absolute;
  +
width: 50px;
  +
height: 16px;
  +
}
  +
  +
#topflourish {
  +
background-image: url("http://www.camlarp.co.uk/w/images/5/56/Flourishsmall.png");
  +
top: 6px;
  +
left: 8px;
  +
}
  +
  +
#bottomflourish {
  +
background-image: url("http://www.camlarp.co.uk/w/images/1/1f/Rotflourishsmall.png");
  +
right: 8px;
  +
bottom: 6px;
  +
}
  +
  +
.hackyimage {
  +
margin: 0 0 1.5em 1.5em;
  +
border-radius: 4px;
  +
background-size: contain;
  +
float: right;
  +
clear: both;
  +
}
  +
  +
@media only screen and (min-width: 450px) {
  +
  +
#arginetmap {
  +
height:620px;
  +
width:383px;
  +
background-image: url("http://www.camlarp.co.uk/w/images/a/a1/Arginet-IC-v2_small.jpg");
  +
}
  +
  +
#arginetmap a {
  +
display: block;
  +
height:620px;
  +
width:383px;
  +
text-decoration: none;
  +
}
  +
  +
}
  +
  +
#categorybox {
  +
color: #434354;
  +
font-size:0.88em;
  +
float:right;
  +
padding: 0 8px 8px;
  +
background: #f5f5ff;
  +
border: thin solid #9898bf;
  +
margin: 0px 0px 16px 16px;
  +
width: 100%;
  +
border-radius: 4px;
  +
padding-top: 0.5em;
  +
clear:both;
  +
hyphens:auto;
  +
}
  +
  +
#categorybox ul {
  +
color: #9898bf;
  +
font-size: 0.8em;
  +
}
  +
  +
table {
  +
border-radius: 4px;
  +
border-collapse: separate;
  +
}
  +
  +
table tr.even, table tr.alt, table tr:nth-of-type(2n) {
  +
background: #f5f5ff;
  +
}
  +
  +
#categories_container {
  +
width: 200px;
  +
max-width: 30vw;
  +
float: right;
  +
margin-left: 16px;
  +
}
  +
  +
#categories_container > #toc {
  +
width: 100%;
  +
}
  +
  +
.thumb.tright{
  +
margin: 0.5em 0em 0.5em 1.5em;
  +
}
  +
  +
.thumb.tright img{
  +
border-radius: 4px;
 
}
  
}

Latest revision as of 18:18, 3 August 2017

/* Custom Foreground menubar colors */
.top-bar,
.top-bar .name h1 a,
.top-bar-section ul,
.top-bar-section ul li.active > a,
.top-bar-section li a:not(.button),
.top-bar-section .has-form {
   background: #ccf;
   color: #353542;
}

#navwrapper > .top-bar {
   margin: 0;
   z-index: 1;
   font-family: "Calibri", "Helvetica Neue", "Arial", Sans-Serif;
}

.top-bar-section > ul > .divider,
.top-bar-section > ul > [role="separator"] {
  border-color: #ccf;
}

.top-bar-section ul li ul.dropdown li.hover > a {
   background:#8f8fb3;
}

.top-bar-section > ul > li.hover > a{
   background:#adadd8;
}

.top-bar-section ul li ul.dropdown li > a {
	background:#adadd8;
}

.top-bar-section ul li ul.dropdown {
	z-index: -1 !important;
}

#top-bar-left h5 a {
   color: #353542;
}

#navwrapper .toggle-topbar span {
   color: #353542;
   -webkit-box-shadow: 0 10px 0 1px #353542, 0 16px 0 1px #353542, 0 22px 0 1px #353542;
   box-shadow: 0 10px 0 1px #353542, 0 16px 0 1px #353542, 0 22px 0 1px #353542;
}

#navwrapper .top-bar.expanded .toggle-topbar span {
   color: #515166;
   -webkit-box-shadow: 0 10px 0 1px #515166,0 16px 0 1px #515166,0 22px 0 1px #515166;
   box-shadow: 0 10px 0 1px #515166,0 16px 0 1px #515166,0 22px 0 1px #515166;
}
#navwrapper .top-bar.expanded .title-area {
   background: #8f8fb3;
}
#top-bar-left a {
   font-size: 0.8125em;
}

#top-bar-right > li {
   padding: 0;
}

#top-bar-right button {
   display: none;
}

#top-bar-right form{
   position: relative;
   margin: 8px 8px 8px 0;
}

h1, h2, h3, h4, h5, h6 {
   color: #404088;
   font-family: "Trebuchet MS", "Helvetica Neue", "Arial", Sans-Serif;
}

h1 {
   font-size: 1.8em;
}

h2.title{
   font-size: 2em;
}

h2 > span {
   display: inline;
}
h2 {
   margin-top: 0.9em;
   font-size: 1.5em;
}

h3 {
   margin-top: 0.9em;
}

.ns-subject h3{
   font-size: 1.15em;
}

h4 {
   font-size: 1em;
}


p {
   margin-bottom: 0.6em;
   font-size: 1.04em;
}

h1.title-name.title-name > a {
   display: inline-block;
   width: auto;
}

#footer-lastmod, #footer-viewcount, #tagline, #footer .poweredby {
   display: none;
}

#toc {
   float:right;
   font-size:0.8em;
   padding: 0 8px 8px;
   background: #f5f5ff;
   border: thin solid #9898bf;
   margin: 0px 0px 16px 16px;
   max-width: 30vw;
   border-radius: 4px;
   word-wrap: break-word;
   hyphens: auto;
   clear:both;
}

#toctitle > .toctoggle {
   display: none;
}

#toctitle > h2 {
	color: #434354;
	font-size: 1.1em;
	text-transform: uppercase;
	font-family:  "Calibri", "Helvetica Neue", "Arial", Sans-Serif;
}

#toc#toc ul {
   color: #9898bf;
   margin: 0 0 0 1em;
}

#toc .tocnumber {
   display: none;
}

#page-content {
   width: 800px;
   min-width: 70%;
   max-width: 100%;
   background: white;
   margin: -45px auto;
   padding: 45px 6px 6px;
   font-family: "Calibri", "Helvetica Neue", "Arial", Sans-Serif;
   min-height: 100vh;
}

.row {
   max-width: 100%;
}

body {
   font-size: 0.9em;
}

#mw-content-text > .floatleft img, #mw-content-text > .floatright img {
   border-radius: 4px;
}

#mw-content-text > .floatleft, #mw-content-text > .floatright {
   padding: 0.5em;
}

.fillwidthcontainer {
   overflow: auto;
   hyphens: auto;
}

@media only screen and (min-width:58.75em) {
   .fillwidthcontainer {
      hyphens: none;
   }
   body {
      background-attachment: fixed;
      background-position: center;
      background-size:130vw;
      font-size:1em;
      background-color: #a98c62;
      background-image: url("http://www.camlarp.co.uk/w/images/b/b0/Arginet_lowcontrast_unlabelled_1366x768_inkscape.jpg");
   }

   @media only screen and (max-height:1080px) and (min-height:801px), only screen and (max-height:1080px) and (min-width:1367px) {
      body {
         background-image: url("http://www.camlarp.co.uk/w/images/2/27/Arginet_lowcontrast_unlabelled_1080.jpg");
      }
   }

   @media only screen and (min-height:1081px) {
      body {
         background-image: url("http://www.camlarp.co.uk/w/images/8/83/Arginet_lowcontrast_unlabelled_morecompressed.jpg");
      }
   }

   @media only screen and (max-aspect-ratio: 2556/5382) {
         body {
            background-size: cover;
         }
      }
   #categorybox#categorybox {
      hyphens: none;
   }
   #navwrapper > .top-bar {
      box-shadow: 0px 0px 8px -2px rgba(0,0,0,0.7);
   }
   .title-area {
      z-index: 1;
   }
   .top-bar-section {
      height: 100%;
      background: #ccf;
   }
   .top-bar-section ul li ul.dropdown li.hover > a {
      box-shadow:0px 10px 8px -10px #70708c inset,0px -10px 8px -10px #70708c inset;
   }
   .top-bar-section > ul > li.hover > a {
      box-shadow: 10px 0px 8px -10px #8f8fb3 inset, -10px 0px 8px -10px #8f8fb3 inset;
   }
   .top-bar-section ul li ul.dropdown {
      box-shadow:0px 0px 8px -2px rgba(0,0,0,0.7);
   }
   #page-content {
      box-shadow: 0px 0px 10px -2px black;
      padding: 45px 25px 25px;
   }
   #top-bar-right .small-12 {
      padding: 0;
   }
   #top-bar-right .has-dropdown > a {
      padding-left: 10px;
   }
   #personal-tools-dropdown {
      z-index: auto;
   }
   #mw-content-text > .floatleft {
      padding-right: 1.5em;
      padding-left: 0;
   }

   #mw-content-text > .floatright {
      padding-left: 1.5em;
      padding-right: 0;
   }
}

.f-dropdown::before, .f-dropdown::after {
    display: none;
}

#drop1 {
   right: 15px !important;
   left: unset !important;
}

.flourish {
   display: block;
   background-size: contain;
   background-repeat: no-repeat;
   position: absolute;
   width: 50px;
   height: 16px;
}

#topflourish {
   background-image: url("http://www.camlarp.co.uk/w/images/5/56/Flourishsmall.png");
   top: 6px;
   left: 8px;
}

#bottomflourish {
   background-image: url("http://www.camlarp.co.uk/w/images/1/1f/Rotflourishsmall.png");
   right: 8px;
   bottom: 6px;
}

.hackyimage {
   margin: 0 0 1.5em 1.5em;
   border-radius: 4px;
   background-size: contain;
   float: right;
   clear: both;
}

@media only screen and (min-width: 450px) {

	#arginetmap {
		height:620px;
		width:383px;
		background-image: url("http://www.camlarp.co.uk/w/images/a/a1/Arginet-IC-v2_small.jpg");
	}

	#arginetmap a {
		display: block;
		height:620px;
		width:383px;
		text-decoration: none;
	}
	
}

#categorybox {
   color: #434354;
   font-size:0.88em;
   float:right;
   padding: 0 8px 8px;
   background: #f5f5ff;
   border: thin solid #9898bf;
   margin: 0px 0px 16px 16px;
   width: 100%;
   border-radius: 4px;
   padding-top: 0.5em;
   clear:both;
   hyphens:auto;
}

#categorybox ul {
   color: #9898bf;
   font-size: 0.8em;
}

table {
   border-radius: 4px;
   border-collapse: separate;
}

table tr.even, table tr.alt, table tr:nth-of-type(2n) {
   background: #f5f5ff;
}

#categories_container {
   width: 200px;
   max-width: 30vw;
   float: right;
   margin-left: 16px;
}

#categories_container > #toc {
   width: 100%;
}

.thumb.tright{
	margin: 0.5em 0em 0.5em 1.5em;
}

.thumb.tright img{
	border-radius: 4px;
}
Retrieved from "http://bw.camlarp.co.uk/w/index.php?title=MediaWiki:Foreground.css&oldid=979"