Template:Styles/Portals.css: Difference between revisions

From Absit Omen Lexicon
((by SublimeText.Mediawiker))
((by SublimeText.Mediawiker))
 
(8 intermediate revisions by the same user not shown)
Line 2: Line 2:
     clear: both;
     clear: both;
     padding: 0.1em;
     padding: 0.1em;
    padding-top: 0.1em;
    padding-left: 0.1em;
    padding-right: 0.1em;
    padding-bottom: 0.1em;
     text-align: center;
     text-align: center;
     font-family: sans-serif;
     font-family: sans-serif;
     font-size: 100%;
     font-size: 100%;
     margin-bottom: 0px;
     margin-bottom: 0px;
    border-width: 1px 1px 0;
    border-style: solid;
}
}


Line 19: Line 17:
     padding: 0.5em;
     padding: 0.5em;
     padding-top: 0.3em;
     padding-top: 0.3em;
    border-width: 1px;
    border-style: solid;
}
}
/* For portals, added 2011-12-07 -bv
/* For portals, added 2011-12-07 -bv
Line 28: Line 28:
border-width:3px;
border-width:3px;
vertical-align:top;
vertical-align:top;
padding:5px;
padding:.5rem;
}
 
.portal-column-container {
display: flex;
flex-direction: row;
gap: 1rem;
}
}
.portal-column-left {
.portal-column-left {
float: left;
flex: 1;
width: 50%;
 
}
}
.portal-column-right {
.portal-column-right {
float: right;
flex: 1;
width: 49%;
}
}
.portal-column-left-wide {
.portal-column-left-wide {
float: left;
flex: 1.2;
width: 60%;
}
.portal-column-right-narrow {
float: right;
width: 39%;
}
}
.portal-column-left-extra-wide {
.portal-column-left-extra-wide {
float: left;
flex: 1.4;
width: 70%;
}
}
.portal-column-right-extra-narrow {
 
float: right;
@media only screen and (max-width: 850px) {
width: 29%;
}
@media only screen and (max-width: 800px) {
/* Decouple the columns on narrow screens */
/* Decouple the columns on narrow screens */
.portal-column-left,
.portal-column-left,
.portal-column-right,
.portal-column-right,
.portal-column-left-wide,
.portal-column-left-wide,
.portal-column-right-narrow,
.portal-column-left-extra-wide {
.portal-column-left-extra-wide,
width: 100%;
.portal-column-right-extra-narrow {
}
float: inherit;
.portal-column-container {
width: inherit;
display: block;
}
}
}
}


.portal-column-container:after {
display: table;
clear: both;
content: "";
}


.portal-footer {
.portal-footer {
Line 80: Line 73:


/*Portal Specific CSS */
/*Portal Specific CSS */
body.page-Portal_Characters div.portal-column-container > div.portal-column-left-wide > div+div {
max-height: 480px;
overflow: auto;
}


div.infoMessage {
div.infoMessage {
background:#003232;
background:#003232;
border:1px solid #186565;
border:1px solid #186565;
}
/* Characters Portal */
body.page-Portal_Characters .portal-container, body.page-Portal_Characters_test .portal-container {
border-color:#996600;
background:#1F0629;
}
}


body.page-Portal_Characters div.portal-box > h2,body.page-Portal_Characters_test div.portal-box > h2 {
body.page-Portal_Characters div.portal-box > h2,body.page-Portal_Characters_test div.portal-box > h2 {
    border: solid #996600;
border-color:#996600;
    border-width: 1px 1px 0;
background: #220034;
    background: #220034;
}
}
body.page-Portal_Characters div.portal-box > div,body.page-Portal_Characters_test div.portal-box > div {
body.page-Portal_Characters div.portal-box > div,body.page-Portal_Characters_test div.portal-box > div {
    border: 1px solid #996600;
border-color: #996600;
    background: #320045;
background: #320045;
}
 
 
/*Chapters Portal*/
body.page-Portal_Chapters .portal-container, body.page-Portal_Chapters_test .portal-container {
border-color: #ff8c00;
background: #010140;
}
 
body.page-Portal_Chapters div.portal-box > h2,body.page-Portal_Chapters_test div.portal-box > h2 {
border-color: #cc7001;
background: #000055;
}
body.page-Portal_Chapters div.portal-box > div,body.page-Portal_Chapters_test div.portal-box > div {
border-color: #cc7001;
background: #000027;
}
 
/*Hogwarts Portal*/
body.page-Portal_Hogwarts .portal-container, body.page-Portal_Hogwarts_test .portal-container {
border-color:#996600;
background:#271c00;
}
 
body.page-Portal_Hogwarts div.portal-box > h2,body.page-Portal_Hogwarts_test div.portal-box > h2 {
border-color: #320045;
background: #5d4200;
}
body.page-Portal_Hogwarts div.portal-box > div,body.page-Portal_Hogwarts_test div.portal-box > div {
border-color: #320045;
background: #3e2c00;
}
}

Latest revision as of 22:48, 22 December 2021

div.portal-box > h2 {
    clear: both;
    padding: 0.1em;
    text-align: center;
    font-family: sans-serif;
    font-size: 100%;
    margin-bottom: 0px;
    border-width: 1px 1px 0;
    border-style: solid;
}

div.portal-box > div {
    border-top-width: 1px;
    vertical-align: top;
    text-align: left;
    margin: 0 0 10px;
    padding: 0.5em;
    padding-top: 0.3em;
    border-width: 1px;
    border-style: solid;
}
/* For portals, added 2011-12-07 -bv
   On wide screens, show these as two columns
   On narrow and mobile screens, let them collapse into a single column */
.portal-container {
	width:100%;
	border-style:solid;
	border-width:3px;
	vertical-align:top;
	padding:.5rem;
}

.portal-column-container {
	display: flex;
	flex-direction: row;
	gap: 1rem;
}

.portal-column-left {
	flex: 1;

}
.portal-column-right {
	flex: 1;
}
.portal-column-left-wide {
	flex: 1.2;
}

.portal-column-left-extra-wide {
	flex: 1.4;
}

@media only screen and (max-width: 850px) {
	/* Decouple the columns on narrow screens */
	.portal-column-left,
	.portal-column-right,
	.portal-column-left-wide,
	.portal-column-left-extra-wide {
		width: 100%;
	}
	.portal-column-container {
		display: block;
	}
}


.portal-footer {
margin:0.3em 0.2em 0.2em 0.3em;
padding:0.3em 0.2em 0.2em 0.3em;
text-align:right;
}

/*Portal Specific CSS */

div.infoMessage {
	background:#003232;
	border:1px solid #186565;
}

/* Characters Portal */
body.page-Portal_Characters .portal-container, body.page-Portal_Characters_test .portal-container {
	border-color:#996600;
	background:#1F0629;
}

body.page-Portal_Characters div.portal-box > h2,body.page-Portal_Characters_test div.portal-box > h2 {
	border-color:#996600;
	background: #220034;
}
body.page-Portal_Characters div.portal-box > div,body.page-Portal_Characters_test div.portal-box > div {
	border-color: #996600;
	background: #320045;
}


/*Chapters Portal*/
body.page-Portal_Chapters .portal-container, body.page-Portal_Chapters_test .portal-container {
	border-color: #ff8c00;
	background: #010140;
}

body.page-Portal_Chapters div.portal-box > h2,body.page-Portal_Chapters_test div.portal-box > h2 {
	border-color: #cc7001;
	background: #000055;
}
body.page-Portal_Chapters div.portal-box > div,body.page-Portal_Chapters_test div.portal-box > div {
	border-color: #cc7001;
	background: #000027;
}

/*Hogwarts Portal*/
body.page-Portal_Hogwarts .portal-container, body.page-Portal_Hogwarts_test .portal-container {
	border-color:#996600;
	background:#271c00;
}

body.page-Portal_Hogwarts div.portal-box > h2,body.page-Portal_Hogwarts_test div.portal-box > h2 {
	border-color: #320045;
	background: #5d4200;
}
body.page-Portal_Hogwarts div.portal-box > div,body.page-Portal_Hogwarts_test div.portal-box > div {
	border-color: #320045;
	background: #3e2c00;
}