http://wiki.spheredev.org/api.php?action=feedcontributions&user=DaVince&feedformat=atomSpherical wiki - User contributions [en]2024-03-19T09:52:18ZUser contributionsMediaWiki 1.29.0http://wiki.spheredev.org/index.php?title=MediaWiki:Common.css&diff=10183MediaWiki:Common.css2018-08-18T15:17:12Z<p>DaVince: Roll back</p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
@import url("https://wiki.spheredev.org/extra/league-gothic/stylesheet.css");<br />
@import url("https://wiki.spheredev.org/extra/mgopen-modata/stylesheet.css");<br />
<br />
<br />
/* Mobile */<br />
@media (max-width: 768px) {<br />
.mw-body {<br />
margin-left: 0;<br />
}<br />
div#mw-panel {<br />
position: static;<br />
top: 0;<br />
width: 100%;<br />
}<br />
#p-search {<br />
float: right;<br />
}<br />
#right-navigation {<br />
float: none;<br />
}<br />
#left-navigation {<br />
display: block;<br />
float: none;<br />
margin-left: 0;<br />
margin-top: 3em;<br />
}<br />
#p-personal ul {<br />
padding-left: 0;<br />
}<br />
#p-search {<br />
float: none;<br />
position: absolute;<br />
top: 20px;<br />
}<br />
div#simpleSearch {<br />
width: 100%;<br />
}<br />
img {<br />
max-width: 100%;<br />
height: auto;<br />
}<br />
}<br />
<br />
<br />
<br />
<br />
/* Everything else */<br />
<br />
<br />
.sph-cf:before,<br />
.sph-cf:after {<br />
content: " "; /* 1 */<br />
display: table; /* 2 */<br />
}<br />
<br />
.sph-cf:after {<br />
clear: both;<br />
}<br />
<br />
/*<br />
* For IE 6/7 only<br />
* Include this rule to trigger hasLayout and contain floats.<br />
*/<br />
<br />
.sph-cf {<br />
*zoom: 1;<br />
}<br />
<br />
h1, #toc h2, .toc h2, h3, h4 {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
div#content h1, div#content h2, div#content #firstHeading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
h1 {font-weight:normal;}<br />
h2 {font-family:"League Gothic",LeagueGothic,sans-serif; font-weight:normal;}<br />
<br />
#mw-content-text h2 {font-size:200%;}<br />
#toc h2, .toc h2 {font-weight:bold; text-transform:uppercase; font-size:100%;}<br />
<br />
.editsection {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
.rellink, .dablink {font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em;}<br />
<br />
#mw-head, #mw-panel, #footer, input,<br />
.mw-search-result-heading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
<br />
.sph-section {<br />
border: 1px solid #e8e8f8;<br />
padding: 0;<br />
background-color: #f6f6ff;<br />
border-radius: 0 !important;<br />
}<br />
.sph-section .sph-section-title {<br />
padding: 7px;<br />
font-weight: bold;<br />
background-color: #e8e8f8;<br />
}<br />
.sph-section .sph-section-content {<br />
padding: 10px;<br />
}<br />
<br />
div#content .sph-section .sph-section-title {margin-top:0;}<br />
.sph-section h3.sph-section-title {font-weight:normal;}<br />
<br />
.sph-disambig {text-align:center;}<br />
.sph-disambig .sph-section-content {font-style:italic;}<br />
<br />
.sph-usage {background:#eee; border:1px solid #999; text-align:center; padding:8px 4px; font-size:150%;}<br />
.sph-section .sph-usage {background:none; border:0; padding:0; margin:1em auto;}<br />
<br />
.sph-latest {text-align:center;}<br />
<br />
.sph-aside {border:solid rgb(167,215,249); border-width:1px 0; margin:1em auto;}<br />
.sph-aside>.floatleft {margin-top:0.25em;}<br />
.sph-aside h4 {font-weight:normal; font-style:italic;}<br />
<br />
.sph-front-topnav {<br />
width: 100%;<br />
max-width: 1000px;<br />
margin: 0 auto;<br />
font-family: "MgOpen Modata", MgOpenModata, sans-serif;<br />
background-color: #f6f6ff;<br />
border: 1px solid #e8e8f8;<br />
}<br />
.sph-front-topnav .header {<br />
text-align: center;<br />
background-color: #e8e8f8;<br />
padding: 10px;<br />
}<br />
.sph-front-topnav .content {<br />
margin: 0 auto;<br />
padding: 10px;<br />
}<br />
.sph-front-topnav .content .wikitable { margin: 0 auto; }<br />
<br />
.sph-directory, .sph-filepath {}<br />
.sph-directory .sph-filepath {}<br />
<br />
.nmbox {background:#F6F9ED; border:1px solid rgb(167,215,249); clear:both; font-size:85%; margin: 0.5em 0;}<br />
.nmbox .mbox-image {background:#EEF3E2; white-space: nowrap; padding: 4px 1em; border-right: 1px solid #aaaaaa;}<br />
.nmbox .mbox-text {padding:4px 1em;}<br />
.nmbox.sph-cf>.mbox-text {float:left;}<br />
.nmbox.sph-cf>.mbox-image {float:left;}<br />
<br />
.sph-notice {<br />
background:#F8EABA; border-bottom:1px solid #C0C090;<br />
margin:1em auto; padding:0.5em 0; width:80%;<br />
clear:both; text-align:center; font-weight:bold;<br />
}<br />
<br />
.mus {font-family:Symbola;}<br />
b.mus {line-height:1; font-weight:normal;}<br />
b b.mus, strong b.mus {font-weight:inherit;}<br />
<br />
.gist table.highlight {font-weight:normal;}<br />
<br />
/**** GESHI-RELATED STYLES ****/<br />
.mw-geshi.mw-code {overflow:auto; position:relative;}<br />
.mw-geshi a[href]>.kw10 {text-shadow:0 1px 0 #808080; text-shadow:0 1px 0 rgba(0,0,0,0.5);}<br />
.mw-geshi a[href]:hover>.kw10 {text-shadow:0 0 2px #806000; text-shadow:0 0 2px rgba(128,112,0,0.5);}<br />
.mw-geshi>.javascript:before {<br />
display:block; content:"JavaScript";<br />
font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-weight:bold; line-height:1;<br />
position:absolute; top:0; right:0;<br />
border:solid #aaa; border-width:0 0 1px 1px; border-radius: 0;<br />
padding:4px; opacity:0.50;<br />
}<br />
.mw-geshi:hover>.javascript:before {opacity:1.0;}<br />
<br />
/**** NAVBOX-RELATED STYLES ****/<br />
/* Style for horizontal lists (separator following item).<br />
Note: hlist formatting will break if the resulting HTML lacks a breakable character<br />
between list items. This happens when the following conditions are true:<br />
1) The list is made using wiki markup (where HTML is built by parser.php)<br />
2) HTMLTidy is disabled or unavailable (such as on Special: pages)<br />
In such cases, building lists with .hlist using HTML instead of wiki markup<br />
will work around this problem. See also [[Bugzilla:39617]].<br />
IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].<br />
Last updated: January 24, 2013<br />
@source mediawiki.org/wiki/Snippets/Horizontal_lists<br />
@maintainer: [[User:Edokter]]<br />
@revision: 3.1<br />
*/<br />
.skin-monobook .hlist dl,<br />
.skin-modern .hlist dl,<br />
.skin-vector .hlist dl {<br />
line-height: 1.5em;<br />
}<br />
.hlist dl,<br />
.hlist ol,<br />
.hlist ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
/* Display list items inline and make them nowrap */<br />
.hlist dd,<br />
.hlist dt,<br />
.hlist li {<br />
margin: 0;<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
/* Allow wrapping for list items (in tight spaces) */<br />
.hlist.hwrap dd,<br />
.hlist.hwrap dt,<br />
.hlist.hwrap li {<br />
white-space: normal;<br />
}<br />
/* Display nested lists inline and allow them to wrap */<br />
.hlist dl dl, .hlist dl ol, .hlist dl ul,<br />
.hlist ol dl, .hlist ol ol, .hlist ol ul,<br />
.hlist ul dl, .hlist ul ol, .hlist ul ul {<br />
display: inline;<br />
white-space: normal;<br />
}<br />
/* Generate interpuncts */<br />
.hlist dt:after {<br />
content: ":";<br />
}<br />
.hlist dd:after,<br />
.hlist li:after {<br />
content: " ·";<br />
font-weight: bold;<br />
}<br />
.hlist dd:last-child:after,<br />
.hlist dt:last-child:after,<br />
.hlist li:last-child:after {<br />
content: none;<br />
}<br />
/* For IE8 */<br />
.hlist dd.hlist-last-child:after,<br />
.hlist dt.hlist-last-child:after,<br />
.hlist li.hlist-last-child:after {<br />
content: none;<br />
}<br />
/* Add parentheses around nested lists */<br />
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,<br />
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,<br />
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {<br />
content: "(";<br />
font-weight: normal;<br />
}<br />
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,<br />
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,<br />
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* For IE8 */<br />
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,<br />
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,<br />
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* Put numbers in front of ordered list items */<br />
.hlist.hnum ol {<br />
counter-reset: list-item;<br />
}<br />
.hlist.hnum ol > li {<br />
counter-increment: list-item;<br />
}<br />
.hlist.hnum ol > li:before {<br />
content: counter(list-item) " ";<br />
}<br />
.hlist.hnum dd ol > li:first-child:before,<br />
.hlist.hnum dt ol > li:first-child:before,<br />
.hlist.hnum li ol > li:first-child:before {<br />
content: "(" counter(list-item) " ";<br />
}<br />
/* Default style for navigation boxes */<br />
.navbox { /* Navbox container style */<br />
border: 1px solid #aaa;<br />
width: 100%;<br />
margin: auto;<br />
clear: both;<br />
font-size: 88%;<br />
text-align: center;<br />
padding: 1px;<br />
}<br />
.navbox-inner,<br />
.navbox-subgroup {<br />
width: 100%;<br />
}<br />
.navbox-group,<br />
.navbox-title,<br />
.navbox-abovebelow {<br />
padding: 0.25em 1em; /* Title, group and above/below styles */<br />
line-height: 1.5em;<br />
text-align: center;<br />
}<br />
th.navbox-group { /* Group style */<br />
white-space: nowrap;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox,<br />
.navbox-subgroup {<br />
background: #fdfdfd; /* Background color */<br />
}<br />
.navbox-list {<br />
line-height: 1.8em;<br />
border-color: #fdfdfd; /* Must match background color */<br />
}<br />
.navbox th,<br />
.navbox-title {<br />
background: #ccccff; /* Level 1 color */<br />
}<br />
.navbox-abovebelow,<br />
th.navbox-group,<br />
.navbox-subgroup .navbox-title {<br />
background: #ddddff; /* Level 2 color */<br />
}<br />
.navbox-subgroup .navbox-group,<br />
.navbox-subgroup .navbox-abovebelow {<br />
background: #e6e6ff; /* Level 3 color */<br />
}<br />
.navbox-even {<br />
background: #f7f7f7; /* Even row striping */<br />
}<br />
.navbox-odd {<br />
background: transparent; /* Odd row striping */<br />
}<br />
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */<br />
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */<br />
}<br />
.navbox .hlist td dl,<br />
.navbox .hlist td ol,<br />
.navbox .hlist td ul,<br />
.navbox td.hlist dl,<br />
.navbox td.hlist ol,<br />
.navbox td.hlist ul {<br />
padding: 0.125em 0; /* Adjust hlist padding in navboxes */<br />
}<br />
ol + table.navbox,<br />
ul + table.navbox {<br />
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */<br />
}<br />
<br />
/* Default styling for Navbar template */<br />
.navbar {<br />
display: inline;<br />
font-size: 88%;<br />
font-weight: normal;<br />
}<br />
.navbar ul {<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
.navbar li {<br />
word-spacing: -0.125em;<br />
}<br />
.navbar.mini li span {<br />
font-variant: small-caps;<br />
}<br />
/* Navbar styling when nested in infobox and navbox */<br />
.infobox .navbar {<br />
font-size: 100%;<br />
}<br />
.navbox .navbar {<br />
display: block;<br />
font-size: 100%;<br />
}<br />
.navbox-title .navbar {<br />
/* @noflip */<br />
float: left;<br />
/* @noflip */<br />
text-align: left;<br />
/* @noflip */<br />
margin-right: 0.5em;<br />
width: 6em;<br />
}<br />
<br />
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript<br />
in [[MediaWiki:Common.js]] are styled here so they can be customised. */<br />
.collapseButton {<br />
/* @noflip */<br />
float: right;<br />
font-weight: normal;<br />
/* @noflip */<br />
margin-left: 0.5em;<br />
/* @noflip */<br />
text-align: right;<br />
width: auto;<br />
}<br />
/* In navboxes, the show/hide button balances the v·d·e links<br />
from [[Template:Navbar]], so they need to be the same width. */<br />
.navbox .collapseButton {<br />
width: 6em;<br />
}<br />
<br />
/* Styling for JQuery makeCollapsible, matching that of collapseButton */<br />
.mw-collapsible-toggle {<br />
font-weight: normal;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox .mw-collapsible-toggle {<br />
width: 6em;<br />
}<br />
/* Lists in data cells are always left-aligned */<br />
.wikitable td ul,<br />
.wikitable td ol,<br />
.wikitable td dl {<br />
/* @noflip */<br />
text-align: left;<br />
}<br />
/* ...unless they also use the hlist class */<br />
.wikitable.hlist td ul,<br />
.wikitable.hlist td ol,<br />
.wikitable.hlist td dl {<br />
text-align: inherit;<br />
}<br />
<br />
<br />
@media (max-width: 500px) {<br />
.sph-front-topnav table.wikitable > * > tr > td {<br />
display: block;<br />
}<br />
.sph-front-topnav table.wikitable > * > tr > th {<br />
display: none;<br />
}<br />
}</div>DaVincehttp://wiki.spheredev.org/index.php?title=MediaWiki:Common.css&diff=10182MediaWiki:Common.css2018-08-18T15:15:36Z<p>DaVince: Reverted edits by DaVince (talk) to last revision by Apollolux</p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
@import url("http://www.spheredev.org/res/css/league-gothic/stylesheet.css");<br />
@import url("http://www.spheredev.org/res/css/mgopen-modata/stylesheet.css");<br />
@import url("http://www.spheredev.org/res/css/symbola/stylesheet.css");<br />
<br />
.sph-cf:before,<br />
.sph-cf:after {<br />
content: " "; /* 1 */<br />
display: table; /* 2 */<br />
}<br />
<br />
.sph-cf:after {<br />
clear: both;<br />
}<br />
<br />
/*<br />
* For IE 6/7 only<br />
* Include this rule to trigger hasLayout and contain floats.<br />
*/<br />
<br />
.sph-cf {<br />
*zoom: 1;<br />
}<br />
<br />
h1, #toc h2, .toc h2, h3, h4 {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
div#content h1, div#content h2, div#content #firstHeading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
h1 {font-weight:normal;}<br />
h2 {font-family:"League Gothic",LeagueGothic,sans-serif; font-weight:normal;}<br />
<br />
#mw-content-text h2 {font-size:200%;}<br />
#toc h2, .toc h2 {font-weight:bold; text-transform:uppercase; font-size:100%;}<br />
<br />
.editsection {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
.rellink, .dablink {font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em;}<br />
<br />
#mw-head, #mw-panel, #footer, input,<br />
.mw-search-result-heading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
<br />
.sph-section {border-style:solid; border-width:1px; padding:4px; background-color:#eee; border-color:#999;}<br />
.sph-section .sph-section-title {padding:5px; font-weight:bold; background-color:#999; color:#fff;}<br />
div#content .sph-section .sph-section-title {margin-top:0;}<br />
.sph-section h3.sph-section-title {font-weight:normal;}<br />
.sph-section .sph-section-content {}<br />
<br />
.sph-section-green {background-color:#efe; border-color:#9c9;}<br />
.sph-section-green .sph-section-title {background-color:#393; color:#fff;}<br />
<br />
.sph-section-red {background-color:#fee; border-color:#fcc;}<br />
.sph-section-red .sph-section-title {background-color:#c00; color:#fff;}<br />
<br />
.sph-section-blue {background-color:#eef; border-color:#abd;}<br />
.sph-section-blue .sph-section-title {background-color:#039; color:#fff;}<br />
<br />
.sph-section-yellow {background-color:#ffe; border-color:#dba;}<br />
.sph-section-yellow .sph-section-title {background-color:#cc3; color:#fff;}<br />
<br />
.sph-disambig {text-align:center;}<br />
.sph-disambig .sph-section-content {font-style:italic;}<br />
<br />
.sph-usage {background:#eee; border:1px solid #999; text-align:center; padding:8px 4px; font-size:150%; border-radius:8px;}<br />
.sph-section .sph-usage {background:none; border:0; padding:0; margin:1em auto;}<br />
<br />
.sph-latest {text-align:center;}<br />
<br />
.sph-aside {border:solid rgb(167,215,249); border-width:1px 0; margin:1em auto;}<br />
.sph-aside>.floatleft {margin-top:0.25em;}<br />
.sph-aside h4 {font-weight:normal; font-style:italic;}<br />
<br />
.sph-front-topnav {<br />
text-align:center; font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-size:120%;<br />
background:#e8e8e8; border:1px solid #888; border-radius:4px;<br />
padding:1em;<br />
}<br />
.sph-front-topnav .sph-front-topnav-list {margin:8px auto;}<br />
<br />
.sph-directory, .sph-filepath {}<br />
.sph-directory .sph-filepath {}<br />
<br />
.nmbox {background:#F6F9ED; border:1px solid rgb(167,215,249); clear:both; font-size:85%; margin: 0.5em 0;}<br />
.nmbox .mbox-image {background:#EEF3E2; white-space: nowrap; padding: 4px 1em; border-right: 1px solid #aaaaaa;}<br />
.nmbox .mbox-text {padding:4px 1em;}<br />
.nmbox.sph-cf>.mbox-text {float:left;}<br />
.nmbox.sph-cf>.mbox-image {float:left;}<br />
<br />
.sph-notice {<br />
background:#F8EABA; border-bottom:1px solid #C0C090;<br />
margin:1em auto; padding:0.5em 0; width:80%;<br />
clear:both; text-align:center; font-weight:bold;<br />
}<br />
<br />
.mus {font-family:Symbola;}<br />
b.mus {line-height:1; font-weight:normal;}<br />
b b.mus, strong b.mus {font-weight:inherit;}<br />
<br />
.gist table.highlight {font-weight:normal;}<br />
<br />
/**** GESHI-RELATED STYLES ****/<br />
.mw-geshi.mw-code {overflow:auto; position:relative;}<br />
.mw-geshi a[href]>.kw10 {text-shadow:0 1px 0 #808080; text-shadow:0 1px 0 rgba(0,0,0,0.5);}<br />
.mw-geshi a[href]:hover>.kw10 {text-shadow:0 0 2px #806000; text-shadow:0 0 2px rgba(128,112,0,0.5);}<br />
.mw-geshi>.javascript:before {<br />
display:block; content:"JavaScript";<br />
font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-weight:bold; line-height:1;<br />
position:absolute; top:0; right:0;<br />
border:solid #aaa; border-width:0 0 1px 1px; border-radius:0 0 0 8px;<br />
padding:4px; opacity:0.50;<br />
}<br />
.mw-geshi:hover>.javascript:before {opacity:1.0;}<br />
<br />
/**** NAVBOX-RELATED STYLES ****/<br />
/* Style for horizontal lists (separator following item).<br />
Note: hlist formatting will break if the resulting HTML lacks a breakable character<br />
between list items. This happens when the following conditions are true:<br />
1) The list is made using wiki markup (where HTML is built by parser.php)<br />
2) HTMLTidy is disabled or unavailable (such as on Special: pages)<br />
In such cases, building lists with .hlist using HTML instead of wiki markup<br />
will work around this problem. See also [[Bugzilla:39617]].<br />
IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].<br />
Last updated: January 24, 2013<br />
@source mediawiki.org/wiki/Snippets/Horizontal_lists<br />
@maintainer: [[User:Edokter]]<br />
@revision: 3.1<br />
*/<br />
.skin-monobook .hlist dl,<br />
.skin-modern .hlist dl,<br />
.skin-vector .hlist dl {<br />
line-height: 1.5em;<br />
}<br />
.hlist dl,<br />
.hlist ol,<br />
.hlist ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
/* Display list items inline and make them nowrap */<br />
.hlist dd,<br />
.hlist dt,<br />
.hlist li {<br />
margin: 0;<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
/* Allow wrapping for list items (in tight spaces) */<br />
.hlist.hwrap dd,<br />
.hlist.hwrap dt,<br />
.hlist.hwrap li {<br />
white-space: normal;<br />
}<br />
/* Display nested lists inline and allow them to wrap */<br />
.hlist dl dl, .hlist dl ol, .hlist dl ul,<br />
.hlist ol dl, .hlist ol ol, .hlist ol ul,<br />
.hlist ul dl, .hlist ul ol, .hlist ul ul {<br />
display: inline;<br />
white-space: normal;<br />
}<br />
/* Generate interpuncts */<br />
.hlist dt:after {<br />
content: ":";<br />
}<br />
.hlist dd:after,<br />
.hlist li:after {<br />
content: " ·";<br />
font-weight: bold;<br />
}<br />
.hlist dd:last-child:after,<br />
.hlist dt:last-child:after,<br />
.hlist li:last-child:after {<br />
content: none;<br />
}<br />
/* For IE8 */<br />
.hlist dd.hlist-last-child:after,<br />
.hlist dt.hlist-last-child:after,<br />
.hlist li.hlist-last-child:after {<br />
content: none;<br />
}<br />
/* Add parentheses around nested lists */<br />
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,<br />
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,<br />
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {<br />
content: "(";<br />
font-weight: normal;<br />
}<br />
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,<br />
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,<br />
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* For IE8 */<br />
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,<br />
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,<br />
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* Put numbers in front of ordered list items */<br />
.hlist.hnum ol {<br />
counter-reset: list-item;<br />
}<br />
.hlist.hnum ol > li {<br />
counter-increment: list-item;<br />
}<br />
.hlist.hnum ol > li:before {<br />
content: counter(list-item) " ";<br />
}<br />
.hlist.hnum dd ol > li:first-child:before,<br />
.hlist.hnum dt ol > li:first-child:before,<br />
.hlist.hnum li ol > li:first-child:before {<br />
content: "(" counter(list-item) " ";<br />
}<br />
/* Default style for navigation boxes */<br />
.navbox { /* Navbox container style */<br />
border: 1px solid #aaa;<br />
width: 100%;<br />
margin: auto;<br />
clear: both;<br />
font-size: 88%;<br />
text-align: center;<br />
padding: 1px;<br />
}<br />
.navbox-inner,<br />
.navbox-subgroup {<br />
width: 100%;<br />
}<br />
.navbox-group,<br />
.navbox-title,<br />
.navbox-abovebelow {<br />
padding: 0.25em 1em; /* Title, group and above/below styles */<br />
line-height: 1.5em;<br />
text-align: center;<br />
}<br />
th.navbox-group { /* Group style */<br />
white-space: nowrap;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox,<br />
.navbox-subgroup {<br />
background: #fdfdfd; /* Background color */<br />
}<br />
.navbox-list {<br />
line-height: 1.8em;<br />
border-color: #fdfdfd; /* Must match background color */<br />
}<br />
.navbox th,<br />
.navbox-title {<br />
background: #ccccff; /* Level 1 color */<br />
}<br />
.navbox-abovebelow,<br />
th.navbox-group,<br />
.navbox-subgroup .navbox-title {<br />
background: #ddddff; /* Level 2 color */<br />
}<br />
.navbox-subgroup .navbox-group,<br />
.navbox-subgroup .navbox-abovebelow {<br />
background: #e6e6ff; /* Level 3 color */<br />
}<br />
.navbox-even {<br />
background: #f7f7f7; /* Even row striping */<br />
}<br />
.navbox-odd {<br />
background: transparent; /* Odd row striping */<br />
}<br />
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */<br />
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */<br />
}<br />
.navbox .hlist td dl,<br />
.navbox .hlist td ol,<br />
.navbox .hlist td ul,<br />
.navbox td.hlist dl,<br />
.navbox td.hlist ol,<br />
.navbox td.hlist ul {<br />
padding: 0.125em 0; /* Adjust hlist padding in navboxes */<br />
}<br />
ol + table.navbox,<br />
ul + table.navbox {<br />
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */<br />
}<br />
<br />
/* Default styling for Navbar template */<br />
.navbar {<br />
display: inline;<br />
font-size: 88%;<br />
font-weight: normal;<br />
}<br />
.navbar ul {<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
.navbar li {<br />
word-spacing: -0.125em;<br />
}<br />
.navbar.mini li span {<br />
font-variant: small-caps;<br />
}<br />
/* Navbar styling when nested in infobox and navbox */<br />
.infobox .navbar {<br />
font-size: 100%;<br />
}<br />
.navbox .navbar {<br />
display: block;<br />
font-size: 100%;<br />
}<br />
.navbox-title .navbar {<br />
/* @noflip */<br />
float: left;<br />
/* @noflip */<br />
text-align: left;<br />
/* @noflip */<br />
margin-right: 0.5em;<br />
width: 6em;<br />
}<br />
<br />
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript<br />
in [[MediaWiki:Common.js]] are styled here so they can be customised. */<br />
.collapseButton {<br />
/* @noflip */<br />
float: right;<br />
font-weight: normal;<br />
/* @noflip */<br />
margin-left: 0.5em;<br />
/* @noflip */<br />
text-align: right;<br />
width: auto;<br />
}<br />
/* In navboxes, the show/hide button balances the v·d·e links<br />
from [[Template:Navbar]], so they need to be the same width. */<br />
.navbox .collapseButton {<br />
width: 6em;<br />
}<br />
<br />
/* Styling for JQuery makeCollapsible, matching that of collapseButton */<br />
.mw-collapsible-toggle {<br />
font-weight: normal;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox .mw-collapsible-toggle {<br />
width: 6em;<br />
}<br />
/* Lists in data cells are always left-aligned */<br />
.wikitable td ul,<br />
.wikitable td ol,<br />
.wikitable td dl {<br />
/* @noflip */<br />
text-align: left;<br />
}<br />
/* ...unless they also use the hlist class */<br />
.wikitable.hlist td ul,<br />
.wikitable.hlist td ol,<br />
.wikitable.hlist td dl {<br />
text-align: inherit;<br />
}</div>DaVincehttp://wiki.spheredev.org/index.php?title=MediaWiki:Common.css&diff=10181MediaWiki:Common.css2018-08-18T15:14:26Z<p>DaVince: Loading in Varela Round font to see how it looks</p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
@import url("https://wiki.spheredev.org/extra/league-gothic/stylesheet.css");<br />
@import url("https://wiki.spheredev.org/extra/mgopen-modata/stylesheet.css");<br />
@import url('https://fonts.googleapis.com/css?family=Varela+Round');<br />
<br />
<br />
/* Mobile */<br />
@media (max-width: 768px) {<br />
.mw-body {<br />
margin-left: 0;<br />
}<br />
div#mw-panel {<br />
position: static;<br />
top: 0;<br />
width: 100%;<br />
}<br />
#p-search {<br />
float: right;<br />
}<br />
#right-navigation {<br />
float: none;<br />
}<br />
#left-navigation {<br />
display: block;<br />
float: none;<br />
margin-left: 0;<br />
margin-top: 3em;<br />
}<br />
#p-personal ul {<br />
padding-left: 0;<br />
}<br />
#p-search {<br />
float: none;<br />
position: absolute;<br />
top: 20px;<br />
}<br />
div#simpleSearch {<br />
width: 100%;<br />
}<br />
img {<br />
max-width: 100%;<br />
height: auto;<br />
}<br />
}<br />
<br />
<br />
<br />
<br />
/* Everything else */<br />
<br />
<br />
.sph-cf:before,<br />
.sph-cf:after {<br />
content: " "; /* 1 */<br />
display: table; /* 2 */<br />
}<br />
<br />
.sph-cf:after {<br />
clear: both;<br />
}<br />
<br />
/*<br />
* For IE 6/7 only<br />
* Include this rule to trigger hasLayout and contain floats.<br />
*/<br />
<br />
.sph-cf {<br />
*zoom: 1;<br />
}<br />
<br />
h1, #toc h2, .toc h2, h3, h4 {font-family:"Varela Round", "MgOpen Modata",MgOpenModata,sans-serif;}<br />
div#content h1, div#content h2, div#content #firstHeading {font-family:"Varela Round", "MgOpen Modata",MgOpenModata,sans-serif;}<br />
h1 {font-weight:normal;}<br />
h2 {font-family:"League Gothic",LeagueGothic,sans-serif; font-weight:normal;}<br />
<br />
#mw-content-text h2 {font-size:200%;}<br />
#toc h2, .toc h2 {font-weight:bold; text-transform:uppercase; font-size:100%;}<br />
<br />
.editsection {font-family:"Varela Round", "MgOpen Modata",MgOpenModata,sans-serif;}<br />
.rellink, .dablink {font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em;}<br />
<br />
#mw-head,<br />
#mw-panel,<br />
#footer,<br />
input,<br />
.mw-search-result-heading {<br />
font-family: "Varela Round", MgOpen Modata",MgOpenModata,sans-serif;<br />
}<br />
<br />
.sph-section {<br />
border: 1px solid #e8e8f8;<br />
padding: 0;<br />
background-color: #f6f6ff;<br />
border-radius: 0 !important;<br />
}<br />
.sph-section .sph-section-title {<br />
padding: 7px;<br />
font-weight: bold;<br />
background-color: #e8e8f8;<br />
}<br />
.sph-section .sph-section-content {<br />
padding: 10px;<br />
}<br />
<br />
div#content .sph-section .sph-section-title {margin-top:0;}<br />
.sph-section h3.sph-section-title {font-weight:normal;}<br />
<br />
.sph-disambig {text-align:center;}<br />
.sph-disambig .sph-section-content {font-style:italic;}<br />
<br />
.sph-usage {background:#eee; border:1px solid #999; text-align:center; padding:8px 4px; font-size:150%;}<br />
.sph-section .sph-usage {background:none; border:0; padding:0; margin:1em auto;}<br />
<br />
.sph-latest {text-align:center;}<br />
<br />
.sph-aside {border:solid rgb(167,215,249); border-width:1px 0; margin:1em auto;}<br />
.sph-aside>.floatleft {margin-top:0.25em;}<br />
.sph-aside h4 {font-weight:normal; font-style:italic;}<br />
<br />
.sph-front-topnav {<br />
width: 100%;<br />
max-width: 1000px;<br />
margin: 0 auto;<br />
font-family: "Varela Round", "MgOpen Modata", MgOpenModata, sans-serif;<br />
background-color: #f6f6ff;<br />
border: 1px solid #e8e8f8;<br />
}<br />
.sph-front-topnav .header {<br />
text-align: center;<br />
background-color: #e8e8f8;<br />
padding: 10px;<br />
}<br />
.sph-front-topnav .content {<br />
margin: 0 auto;<br />
padding: 10px;<br />
}<br />
.sph-front-topnav .content .wikitable { margin: 0 auto; }<br />
<br />
.sph-directory, .sph-filepath {}<br />
.sph-directory .sph-filepath {}<br />
<br />
.nmbox {background:#F6F9ED; border:1px solid rgb(167,215,249); clear:both; font-size:85%; margin: 0.5em 0;}<br />
.nmbox .mbox-image {background:#EEF3E2; white-space: nowrap; padding: 4px 1em; border-right: 1px solid #aaaaaa;}<br />
.nmbox .mbox-text {padding:4px 1em;}<br />
.nmbox.sph-cf>.mbox-text {float:left;}<br />
.nmbox.sph-cf>.mbox-image {float:left;}<br />
<br />
.sph-notice {<br />
background:#F8EABA; border-bottom:1px solid #C0C090;<br />
margin:1em auto; padding:0.5em 0; width:80%;<br />
clear:both; text-align:center; font-weight:bold;<br />
}<br />
<br />
.mus {font-family:Symbola;}<br />
b.mus {line-height:1; font-weight:normal;}<br />
b b.mus, strong b.mus {font-weight:inherit;}<br />
<br />
.gist table.highlight {font-weight:normal;}<br />
<br />
/**** GESHI-RELATED STYLES ****/<br />
.mw-geshi.mw-code {overflow:auto; position:relative;}<br />
.mw-geshi a[href]>.kw10 {text-shadow:0 1px 0 #808080; text-shadow:0 1px 0 rgba(0,0,0,0.5);}<br />
.mw-geshi a[href]:hover>.kw10 {text-shadow:0 0 2px #806000; text-shadow:0 0 2px rgba(128,112,0,0.5);}<br />
.mw-geshi>.javascript:before {<br />
display:block; content:"JavaScript";<br />
font-family: "Varela Round", "MgOpen Modata",MgOpenModata,sans-serif; font-weight:bold; line-height:1;<br />
position:absolute; top:0; right:0;<br />
border:solid #aaa; border-width:0 0 1px 1px; border-radius: 0;<br />
padding:4px; opacity:0.50;<br />
}<br />
.mw-geshi:hover>.javascript:before {opacity:1.0;}<br />
<br />
/**** NAVBOX-RELATED STYLES ****/<br />
/* Style for horizontal lists (separator following item).<br />
Note: hlist formatting will break if the resulting HTML lacks a breakable character<br />
between list items. This happens when the following conditions are true:<br />
1) The list is made using wiki markup (where HTML is built by parser.php)<br />
2) HTMLTidy is disabled or unavailable (such as on Special: pages)<br />
In such cases, building lists with .hlist using HTML instead of wiki markup<br />
will work around this problem. See also [[Bugzilla:39617]].<br />
IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].<br />
Last updated: January 24, 2013<br />
@source mediawiki.org/wiki/Snippets/Horizontal_lists<br />
@maintainer: [[User:Edokter]]<br />
@revision: 3.1<br />
*/<br />
.skin-monobook .hlist dl,<br />
.skin-modern .hlist dl,<br />
.skin-vector .hlist dl {<br />
line-height: 1.5em;<br />
}<br />
.hlist dl,<br />
.hlist ol,<br />
.hlist ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
/* Display list items inline and make them nowrap */<br />
.hlist dd,<br />
.hlist dt,<br />
.hlist li {<br />
margin: 0;<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
/* Allow wrapping for list items (in tight spaces) */<br />
.hlist.hwrap dd,<br />
.hlist.hwrap dt,<br />
.hlist.hwrap li {<br />
white-space: normal;<br />
}<br />
/* Display nested lists inline and allow them to wrap */<br />
.hlist dl dl, .hlist dl ol, .hlist dl ul,<br />
.hlist ol dl, .hlist ol ol, .hlist ol ul,<br />
.hlist ul dl, .hlist ul ol, .hlist ul ul {<br />
display: inline;<br />
white-space: normal;<br />
}<br />
/* Generate interpuncts */<br />
.hlist dt:after {<br />
content: ":";<br />
}<br />
.hlist dd:after,<br />
.hlist li:after {<br />
content: " ·";<br />
font-weight: bold;<br />
}<br />
.hlist dd:last-child:after,<br />
.hlist dt:last-child:after,<br />
.hlist li:last-child:after {<br />
content: none;<br />
}<br />
/* For IE8 */<br />
.hlist dd.hlist-last-child:after,<br />
.hlist dt.hlist-last-child:after,<br />
.hlist li.hlist-last-child:after {<br />
content: none;<br />
}<br />
/* Add parentheses around nested lists */<br />
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,<br />
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,<br />
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {<br />
content: "(";<br />
font-weight: normal;<br />
}<br />
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,<br />
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,<br />
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* For IE8 */<br />
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,<br />
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,<br />
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* Put numbers in front of ordered list items */<br />
.hlist.hnum ol {<br />
counter-reset: list-item;<br />
}<br />
.hlist.hnum ol > li {<br />
counter-increment: list-item;<br />
}<br />
.hlist.hnum ol > li:before {<br />
content: counter(list-item) " ";<br />
}<br />
.hlist.hnum dd ol > li:first-child:before,<br />
.hlist.hnum dt ol > li:first-child:before,<br />
.hlist.hnum li ol > li:first-child:before {<br />
content: "(" counter(list-item) " ";<br />
}<br />
/* Default style for navigation boxes */<br />
.navbox { /* Navbox container style */<br />
border: 1px solid #aaa;<br />
width: 100%;<br />
margin: auto;<br />
clear: both;<br />
font-size: 88%;<br />
text-align: center;<br />
padding: 1px;<br />
}<br />
.navbox-inner,<br />
.navbox-subgroup {<br />
width: 100%;<br />
}<br />
.navbox-group,<br />
.navbox-title,<br />
.navbox-abovebelow {<br />
padding: 0.25em 1em; /* Title, group and above/below styles */<br />
line-height: 1.5em;<br />
text-align: center;<br />
}<br />
th.navbox-group { /* Group style */<br />
white-space: nowrap;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox,<br />
.navbox-subgroup {<br />
background: #fdfdfd; /* Background color */<br />
}<br />
.navbox-list {<br />
line-height: 1.8em;<br />
border-color: #fdfdfd; /* Must match background color */<br />
}<br />
.navbox th,<br />
.navbox-title {<br />
background: #ccccff; /* Level 1 color */<br />
}<br />
.navbox-abovebelow,<br />
th.navbox-group,<br />
.navbox-subgroup .navbox-title {<br />
background: #ddddff; /* Level 2 color */<br />
}<br />
.navbox-subgroup .navbox-group,<br />
.navbox-subgroup .navbox-abovebelow {<br />
background: #e6e6ff; /* Level 3 color */<br />
}<br />
.navbox-even {<br />
background: #f7f7f7; /* Even row striping */<br />
}<br />
.navbox-odd {<br />
background: transparent; /* Odd row striping */<br />
}<br />
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */<br />
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */<br />
}<br />
.navbox .hlist td dl,<br />
.navbox .hlist td ol,<br />
.navbox .hlist td ul,<br />
.navbox td.hlist dl,<br />
.navbox td.hlist ol,<br />
.navbox td.hlist ul {<br />
padding: 0.125em 0; /* Adjust hlist padding in navboxes */<br />
}<br />
ol + table.navbox,<br />
ul + table.navbox {<br />
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */<br />
}<br />
<br />
/* Default styling for Navbar template */<br />
.navbar {<br />
display: inline;<br />
font-size: 88%;<br />
font-weight: normal;<br />
}<br />
.navbar ul {<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
.navbar li {<br />
word-spacing: -0.125em;<br />
}<br />
.navbar.mini li span {<br />
font-variant: small-caps;<br />
}<br />
/* Navbar styling when nested in infobox and navbox */<br />
.infobox .navbar {<br />
font-size: 100%;<br />
}<br />
.navbox .navbar {<br />
display: block;<br />
font-size: 100%;<br />
}<br />
.navbox-title .navbar {<br />
/* @noflip */<br />
float: left;<br />
/* @noflip */<br />
text-align: left;<br />
/* @noflip */<br />
margin-right: 0.5em;<br />
width: 6em;<br />
}<br />
<br />
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript<br />
in [[MediaWiki:Common.js]] are styled here so they can be customised. */<br />
.collapseButton {<br />
/* @noflip */<br />
float: right;<br />
font-weight: normal;<br />
/* @noflip */<br />
margin-left: 0.5em;<br />
/* @noflip */<br />
text-align: right;<br />
width: auto;<br />
}<br />
/* In navboxes, the show/hide button balances the v·d·e links<br />
from [[Template:Navbar]], so they need to be the same width. */<br />
.navbox .collapseButton {<br />
width: 6em;<br />
}<br />
<br />
/* Styling for JQuery makeCollapsible, matching that of collapseButton */<br />
.mw-collapsible-toggle {<br />
font-weight: normal;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox .mw-collapsible-toggle {<br />
width: 6em;<br />
}<br />
/* Lists in data cells are always left-aligned */<br />
.wikitable td ul,<br />
.wikitable td ol,<br />
.wikitable td dl {<br />
/* @noflip */<br />
text-align: left;<br />
}<br />
/* ...unless they also use the hlist class */<br />
.wikitable.hlist td ul,<br />
.wikitable.hlist td ol,<br />
.wikitable.hlist td dl {<br />
text-align: inherit;<br />
}<br />
<br />
<br />
@media (max-width: 500px) {<br />
.sph-front-topnav table.wikitable > * > tr > td {<br />
display: block;<br />
}<br />
.sph-front-topnav table.wikitable > * > tr > th {<br />
display: none;<br />
}<br />
}</div>DaVincehttp://wiki.spheredev.org/index.php?title=MediaWiki:Common.css&diff=10180MediaWiki:Common.css2018-08-18T12:11:20Z<p>DaVince: Changed http to https</p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
@import url("https://wiki.spheredev.org/extra/league-gothic/stylesheet.css");<br />
@import url("https://wiki.spheredev.org/extra/mgopen-modata/stylesheet.css");<br />
<br />
<br />
/* Mobile */<br />
@media (max-width: 768px) {<br />
.mw-body {<br />
margin-left: 0;<br />
}<br />
div#mw-panel {<br />
position: static;<br />
top: 0;<br />
width: 100%;<br />
}<br />
#p-search {<br />
float: right;<br />
}<br />
#right-navigation {<br />
float: none;<br />
}<br />
#left-navigation {<br />
display: block;<br />
float: none;<br />
margin-left: 0;<br />
margin-top: 3em;<br />
}<br />
#p-personal ul {<br />
padding-left: 0;<br />
}<br />
#p-search {<br />
float: none;<br />
position: absolute;<br />
top: 20px;<br />
}<br />
div#simpleSearch {<br />
width: 100%;<br />
}<br />
img {<br />
max-width: 100%;<br />
height: auto;<br />
}<br />
}<br />
<br />
<br />
<br />
<br />
/* Everything else */<br />
<br />
<br />
.sph-cf:before,<br />
.sph-cf:after {<br />
content: " "; /* 1 */<br />
display: table; /* 2 */<br />
}<br />
<br />
.sph-cf:after {<br />
clear: both;<br />
}<br />
<br />
/*<br />
* For IE 6/7 only<br />
* Include this rule to trigger hasLayout and contain floats.<br />
*/<br />
<br />
.sph-cf {<br />
*zoom: 1;<br />
}<br />
<br />
h1, #toc h2, .toc h2, h3, h4 {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
div#content h1, div#content h2, div#content #firstHeading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
h1 {font-weight:normal;}<br />
h2 {font-family:"League Gothic",LeagueGothic,sans-serif; font-weight:normal;}<br />
<br />
#mw-content-text h2 {font-size:200%;}<br />
#toc h2, .toc h2 {font-weight:bold; text-transform:uppercase; font-size:100%;}<br />
<br />
.editsection {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
.rellink, .dablink {font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em;}<br />
<br />
#mw-head, #mw-panel, #footer, input,<br />
.mw-search-result-heading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
<br />
.sph-section {<br />
border: 1px solid #e8e8f8;<br />
padding: 0;<br />
background-color: #f6f6ff;<br />
border-radius: 0 !important;<br />
}<br />
.sph-section .sph-section-title {<br />
padding: 7px;<br />
font-weight: bold;<br />
background-color: #e8e8f8;<br />
}<br />
.sph-section .sph-section-content {<br />
padding: 10px;<br />
}<br />
<br />
div#content .sph-section .sph-section-title {margin-top:0;}<br />
.sph-section h3.sph-section-title {font-weight:normal;}<br />
<br />
.sph-disambig {text-align:center;}<br />
.sph-disambig .sph-section-content {font-style:italic;}<br />
<br />
.sph-usage {background:#eee; border:1px solid #999; text-align:center; padding:8px 4px; font-size:150%;}<br />
.sph-section .sph-usage {background:none; border:0; padding:0; margin:1em auto;}<br />
<br />
.sph-latest {text-align:center;}<br />
<br />
.sph-aside {border:solid rgb(167,215,249); border-width:1px 0; margin:1em auto;}<br />
.sph-aside>.floatleft {margin-top:0.25em;}<br />
.sph-aside h4 {font-weight:normal; font-style:italic;}<br />
<br />
.sph-front-topnav {<br />
width: 100%;<br />
max-width: 1000px;<br />
margin: 0 auto;<br />
font-family: "MgOpen Modata", MgOpenModata, sans-serif;<br />
background-color: #f6f6ff;<br />
border: 1px solid #e8e8f8;<br />
}<br />
.sph-front-topnav .header {<br />
text-align: center;<br />
background-color: #e8e8f8;<br />
padding: 10px;<br />
}<br />
.sph-front-topnav .content {<br />
margin: 0 auto;<br />
padding: 10px;<br />
}<br />
.sph-front-topnav .content .wikitable { margin: 0 auto; }<br />
<br />
.sph-directory, .sph-filepath {}<br />
.sph-directory .sph-filepath {}<br />
<br />
.nmbox {background:#F6F9ED; border:1px solid rgb(167,215,249); clear:both; font-size:85%; margin: 0.5em 0;}<br />
.nmbox .mbox-image {background:#EEF3E2; white-space: nowrap; padding: 4px 1em; border-right: 1px solid #aaaaaa;}<br />
.nmbox .mbox-text {padding:4px 1em;}<br />
.nmbox.sph-cf>.mbox-text {float:left;}<br />
.nmbox.sph-cf>.mbox-image {float:left;}<br />
<br />
.sph-notice {<br />
background:#F8EABA; border-bottom:1px solid #C0C090;<br />
margin:1em auto; padding:0.5em 0; width:80%;<br />
clear:both; text-align:center; font-weight:bold;<br />
}<br />
<br />
.mus {font-family:Symbola;}<br />
b.mus {line-height:1; font-weight:normal;}<br />
b b.mus, strong b.mus {font-weight:inherit;}<br />
<br />
.gist table.highlight {font-weight:normal;}<br />
<br />
/**** GESHI-RELATED STYLES ****/<br />
.mw-geshi.mw-code {overflow:auto; position:relative;}<br />
.mw-geshi a[href]>.kw10 {text-shadow:0 1px 0 #808080; text-shadow:0 1px 0 rgba(0,0,0,0.5);}<br />
.mw-geshi a[href]:hover>.kw10 {text-shadow:0 0 2px #806000; text-shadow:0 0 2px rgba(128,112,0,0.5);}<br />
.mw-geshi>.javascript:before {<br />
display:block; content:"JavaScript";<br />
font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-weight:bold; line-height:1;<br />
position:absolute; top:0; right:0;<br />
border:solid #aaa; border-width:0 0 1px 1px; border-radius: 0;<br />
padding:4px; opacity:0.50;<br />
}<br />
.mw-geshi:hover>.javascript:before {opacity:1.0;}<br />
<br />
/**** NAVBOX-RELATED STYLES ****/<br />
/* Style for horizontal lists (separator following item).<br />
Note: hlist formatting will break if the resulting HTML lacks a breakable character<br />
between list items. This happens when the following conditions are true:<br />
1) The list is made using wiki markup (where HTML is built by parser.php)<br />
2) HTMLTidy is disabled or unavailable (such as on Special: pages)<br />
In such cases, building lists with .hlist using HTML instead of wiki markup<br />
will work around this problem. See also [[Bugzilla:39617]].<br />
IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].<br />
Last updated: January 24, 2013<br />
@source mediawiki.org/wiki/Snippets/Horizontal_lists<br />
@maintainer: [[User:Edokter]]<br />
@revision: 3.1<br />
*/<br />
.skin-monobook .hlist dl,<br />
.skin-modern .hlist dl,<br />
.skin-vector .hlist dl {<br />
line-height: 1.5em;<br />
}<br />
.hlist dl,<br />
.hlist ol,<br />
.hlist ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
/* Display list items inline and make them nowrap */<br />
.hlist dd,<br />
.hlist dt,<br />
.hlist li {<br />
margin: 0;<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
/* Allow wrapping for list items (in tight spaces) */<br />
.hlist.hwrap dd,<br />
.hlist.hwrap dt,<br />
.hlist.hwrap li {<br />
white-space: normal;<br />
}<br />
/* Display nested lists inline and allow them to wrap */<br />
.hlist dl dl, .hlist dl ol, .hlist dl ul,<br />
.hlist ol dl, .hlist ol ol, .hlist ol ul,<br />
.hlist ul dl, .hlist ul ol, .hlist ul ul {<br />
display: inline;<br />
white-space: normal;<br />
}<br />
/* Generate interpuncts */<br />
.hlist dt:after {<br />
content: ":";<br />
}<br />
.hlist dd:after,<br />
.hlist li:after {<br />
content: " ·";<br />
font-weight: bold;<br />
}<br />
.hlist dd:last-child:after,<br />
.hlist dt:last-child:after,<br />
.hlist li:last-child:after {<br />
content: none;<br />
}<br />
/* For IE8 */<br />
.hlist dd.hlist-last-child:after,<br />
.hlist dt.hlist-last-child:after,<br />
.hlist li.hlist-last-child:after {<br />
content: none;<br />
}<br />
/* Add parentheses around nested lists */<br />
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,<br />
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,<br />
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {<br />
content: "(";<br />
font-weight: normal;<br />
}<br />
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,<br />
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,<br />
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* For IE8 */<br />
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,<br />
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,<br />
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* Put numbers in front of ordered list items */<br />
.hlist.hnum ol {<br />
counter-reset: list-item;<br />
}<br />
.hlist.hnum ol > li {<br />
counter-increment: list-item;<br />
}<br />
.hlist.hnum ol > li:before {<br />
content: counter(list-item) " ";<br />
}<br />
.hlist.hnum dd ol > li:first-child:before,<br />
.hlist.hnum dt ol > li:first-child:before,<br />
.hlist.hnum li ol > li:first-child:before {<br />
content: "(" counter(list-item) " ";<br />
}<br />
/* Default style for navigation boxes */<br />
.navbox { /* Navbox container style */<br />
border: 1px solid #aaa;<br />
width: 100%;<br />
margin: auto;<br />
clear: both;<br />
font-size: 88%;<br />
text-align: center;<br />
padding: 1px;<br />
}<br />
.navbox-inner,<br />
.navbox-subgroup {<br />
width: 100%;<br />
}<br />
.navbox-group,<br />
.navbox-title,<br />
.navbox-abovebelow {<br />
padding: 0.25em 1em; /* Title, group and above/below styles */<br />
line-height: 1.5em;<br />
text-align: center;<br />
}<br />
th.navbox-group { /* Group style */<br />
white-space: nowrap;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox,<br />
.navbox-subgroup {<br />
background: #fdfdfd; /* Background color */<br />
}<br />
.navbox-list {<br />
line-height: 1.8em;<br />
border-color: #fdfdfd; /* Must match background color */<br />
}<br />
.navbox th,<br />
.navbox-title {<br />
background: #ccccff; /* Level 1 color */<br />
}<br />
.navbox-abovebelow,<br />
th.navbox-group,<br />
.navbox-subgroup .navbox-title {<br />
background: #ddddff; /* Level 2 color */<br />
}<br />
.navbox-subgroup .navbox-group,<br />
.navbox-subgroup .navbox-abovebelow {<br />
background: #e6e6ff; /* Level 3 color */<br />
}<br />
.navbox-even {<br />
background: #f7f7f7; /* Even row striping */<br />
}<br />
.navbox-odd {<br />
background: transparent; /* Odd row striping */<br />
}<br />
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */<br />
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */<br />
}<br />
.navbox .hlist td dl,<br />
.navbox .hlist td ol,<br />
.navbox .hlist td ul,<br />
.navbox td.hlist dl,<br />
.navbox td.hlist ol,<br />
.navbox td.hlist ul {<br />
padding: 0.125em 0; /* Adjust hlist padding in navboxes */<br />
}<br />
ol + table.navbox,<br />
ul + table.navbox {<br />
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */<br />
}<br />
<br />
/* Default styling for Navbar template */<br />
.navbar {<br />
display: inline;<br />
font-size: 88%;<br />
font-weight: normal;<br />
}<br />
.navbar ul {<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
.navbar li {<br />
word-spacing: -0.125em;<br />
}<br />
.navbar.mini li span {<br />
font-variant: small-caps;<br />
}<br />
/* Navbar styling when nested in infobox and navbox */<br />
.infobox .navbar {<br />
font-size: 100%;<br />
}<br />
.navbox .navbar {<br />
display: block;<br />
font-size: 100%;<br />
}<br />
.navbox-title .navbar {<br />
/* @noflip */<br />
float: left;<br />
/* @noflip */<br />
text-align: left;<br />
/* @noflip */<br />
margin-right: 0.5em;<br />
width: 6em;<br />
}<br />
<br />
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript<br />
in [[MediaWiki:Common.js]] are styled here so they can be customised. */<br />
.collapseButton {<br />
/* @noflip */<br />
float: right;<br />
font-weight: normal;<br />
/* @noflip */<br />
margin-left: 0.5em;<br />
/* @noflip */<br />
text-align: right;<br />
width: auto;<br />
}<br />
/* In navboxes, the show/hide button balances the v·d·e links<br />
from [[Template:Navbar]], so they need to be the same width. */<br />
.navbox .collapseButton {<br />
width: 6em;<br />
}<br />
<br />
/* Styling for JQuery makeCollapsible, matching that of collapseButton */<br />
.mw-collapsible-toggle {<br />
font-weight: normal;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox .mw-collapsible-toggle {<br />
width: 6em;<br />
}<br />
/* Lists in data cells are always left-aligned */<br />
.wikitable td ul,<br />
.wikitable td ol,<br />
.wikitable td dl {<br />
/* @noflip */<br />
text-align: left;<br />
}<br />
/* ...unless they also use the hlist class */<br />
.wikitable.hlist td ul,<br />
.wikitable.hlist td ol,<br />
.wikitable.hlist td dl {<br />
text-align: inherit;<br />
}<br />
<br />
<br />
@media (max-width: 500px) {<br />
.sph-front-topnav table.wikitable > * > tr > td {<br />
display: block;<br />
}<br />
.sph-front-topnav table.wikitable > * > tr > th {<br />
display: none;<br />
}<br />
}</div>DaVincehttp://wiki.spheredev.org/index.php?title=MediaWiki:Common.css&diff=10179MediaWiki:Common.css2018-08-10T14:37:24Z<p>DaVince: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
@import url("http://wiki.spheredev.org/extra/league-gothic/stylesheet.css");<br />
@import url("http://wiki.spheredev.org/extra/mgopen-modata/stylesheet.css");<br />
<br />
<br />
/* Mobile */<br />
@media (max-width: 768px) {<br />
.mw-body {<br />
margin-left: 0;<br />
}<br />
div#mw-panel {<br />
position: static;<br />
top: 0;<br />
width: 100%;<br />
}<br />
#p-search {<br />
float: right;<br />
}<br />
#right-navigation {<br />
float: none;<br />
}<br />
#left-navigation {<br />
display: block;<br />
float: none;<br />
margin-left: 0;<br />
margin-top: 3em;<br />
}<br />
#p-personal ul {<br />
padding-left: 0;<br />
}<br />
#p-search {<br />
float: none;<br />
position: absolute;<br />
top: 20px;<br />
}<br />
div#simpleSearch {<br />
width: 100%;<br />
}<br />
img {<br />
max-width: 100%;<br />
height: auto;<br />
}<br />
}<br />
<br />
<br />
<br />
<br />
/* Everything else */<br />
<br />
<br />
.sph-cf:before,<br />
.sph-cf:after {<br />
content: " "; /* 1 */<br />
display: table; /* 2 */<br />
}<br />
<br />
.sph-cf:after {<br />
clear: both;<br />
}<br />
<br />
/*<br />
* For IE 6/7 only<br />
* Include this rule to trigger hasLayout and contain floats.<br />
*/<br />
<br />
.sph-cf {<br />
*zoom: 1;<br />
}<br />
<br />
h1, #toc h2, .toc h2, h3, h4 {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
div#content h1, div#content h2, div#content #firstHeading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
h1 {font-weight:normal;}<br />
h2 {font-family:"League Gothic",LeagueGothic,sans-serif; font-weight:normal;}<br />
<br />
#mw-content-text h2 {font-size:200%;}<br />
#toc h2, .toc h2 {font-weight:bold; text-transform:uppercase; font-size:100%;}<br />
<br />
.editsection {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
.rellink, .dablink {font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em;}<br />
<br />
#mw-head, #mw-panel, #footer, input,<br />
.mw-search-result-heading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
<br />
.sph-section {<br />
border: 1px solid #e8e8f8;<br />
padding: 0;<br />
background-color: #f6f6ff;<br />
border-radius: 0 !important;<br />
}<br />
.sph-section .sph-section-title {<br />
padding: 7px;<br />
font-weight: bold;<br />
background-color: #e8e8f8;<br />
}<br />
.sph-section .sph-section-content {<br />
padding: 10px;<br />
}<br />
<br />
div#content .sph-section .sph-section-title {margin-top:0;}<br />
.sph-section h3.sph-section-title {font-weight:normal;}<br />
<br />
.sph-disambig {text-align:center;}<br />
.sph-disambig .sph-section-content {font-style:italic;}<br />
<br />
.sph-usage {background:#eee; border:1px solid #999; text-align:center; padding:8px 4px; font-size:150%;}<br />
.sph-section .sph-usage {background:none; border:0; padding:0; margin:1em auto;}<br />
<br />
.sph-latest {text-align:center;}<br />
<br />
.sph-aside {border:solid rgb(167,215,249); border-width:1px 0; margin:1em auto;}<br />
.sph-aside>.floatleft {margin-top:0.25em;}<br />
.sph-aside h4 {font-weight:normal; font-style:italic;}<br />
<br />
.sph-front-topnav {<br />
width: 100%;<br />
max-width: 1000px;<br />
margin: 0 auto;<br />
font-family: "MgOpen Modata", MgOpenModata, sans-serif;<br />
background-color: #f6f6ff;<br />
border: 1px solid #e8e8f8;<br />
}<br />
.sph-front-topnav .header {<br />
text-align: center;<br />
background-color: #e8e8f8;<br />
padding: 10px;<br />
}<br />
.sph-front-topnav .content {<br />
margin: 0 auto;<br />
padding: 10px;<br />
}<br />
.sph-front-topnav .content .wikitable { margin: 0 auto; }<br />
<br />
.sph-directory, .sph-filepath {}<br />
.sph-directory .sph-filepath {}<br />
<br />
.nmbox {background:#F6F9ED; border:1px solid rgb(167,215,249); clear:both; font-size:85%; margin: 0.5em 0;}<br />
.nmbox .mbox-image {background:#EEF3E2; white-space: nowrap; padding: 4px 1em; border-right: 1px solid #aaaaaa;}<br />
.nmbox .mbox-text {padding:4px 1em;}<br />
.nmbox.sph-cf>.mbox-text {float:left;}<br />
.nmbox.sph-cf>.mbox-image {float:left;}<br />
<br />
.sph-notice {<br />
background:#F8EABA; border-bottom:1px solid #C0C090;<br />
margin:1em auto; padding:0.5em 0; width:80%;<br />
clear:both; text-align:center; font-weight:bold;<br />
}<br />
<br />
.mus {font-family:Symbola;}<br />
b.mus {line-height:1; font-weight:normal;}<br />
b b.mus, strong b.mus {font-weight:inherit;}<br />
<br />
.gist table.highlight {font-weight:normal;}<br />
<br />
/**** GESHI-RELATED STYLES ****/<br />
.mw-geshi.mw-code {overflow:auto; position:relative;}<br />
.mw-geshi a[href]>.kw10 {text-shadow:0 1px 0 #808080; text-shadow:0 1px 0 rgba(0,0,0,0.5);}<br />
.mw-geshi a[href]:hover>.kw10 {text-shadow:0 0 2px #806000; text-shadow:0 0 2px rgba(128,112,0,0.5);}<br />
.mw-geshi>.javascript:before {<br />
display:block; content:"JavaScript";<br />
font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-weight:bold; line-height:1;<br />
position:absolute; top:0; right:0;<br />
border:solid #aaa; border-width:0 0 1px 1px; border-radius: 0;<br />
padding:4px; opacity:0.50;<br />
}<br />
.mw-geshi:hover>.javascript:before {opacity:1.0;}<br />
<br />
/**** NAVBOX-RELATED STYLES ****/<br />
/* Style for horizontal lists (separator following item).<br />
Note: hlist formatting will break if the resulting HTML lacks a breakable character<br />
between list items. This happens when the following conditions are true:<br />
1) The list is made using wiki markup (where HTML is built by parser.php)<br />
2) HTMLTidy is disabled or unavailable (such as on Special: pages)<br />
In such cases, building lists with .hlist using HTML instead of wiki markup<br />
will work around this problem. See also [[Bugzilla:39617]].<br />
IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].<br />
Last updated: January 24, 2013<br />
@source mediawiki.org/wiki/Snippets/Horizontal_lists<br />
@maintainer: [[User:Edokter]]<br />
@revision: 3.1<br />
*/<br />
.skin-monobook .hlist dl,<br />
.skin-modern .hlist dl,<br />
.skin-vector .hlist dl {<br />
line-height: 1.5em;<br />
}<br />
.hlist dl,<br />
.hlist ol,<br />
.hlist ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
/* Display list items inline and make them nowrap */<br />
.hlist dd,<br />
.hlist dt,<br />
.hlist li {<br />
margin: 0;<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
/* Allow wrapping for list items (in tight spaces) */<br />
.hlist.hwrap dd,<br />
.hlist.hwrap dt,<br />
.hlist.hwrap li {<br />
white-space: normal;<br />
}<br />
/* Display nested lists inline and allow them to wrap */<br />
.hlist dl dl, .hlist dl ol, .hlist dl ul,<br />
.hlist ol dl, .hlist ol ol, .hlist ol ul,<br />
.hlist ul dl, .hlist ul ol, .hlist ul ul {<br />
display: inline;<br />
white-space: normal;<br />
}<br />
/* Generate interpuncts */<br />
.hlist dt:after {<br />
content: ":";<br />
}<br />
.hlist dd:after,<br />
.hlist li:after {<br />
content: " ·";<br />
font-weight: bold;<br />
}<br />
.hlist dd:last-child:after,<br />
.hlist dt:last-child:after,<br />
.hlist li:last-child:after {<br />
content: none;<br />
}<br />
/* For IE8 */<br />
.hlist dd.hlist-last-child:after,<br />
.hlist dt.hlist-last-child:after,<br />
.hlist li.hlist-last-child:after {<br />
content: none;<br />
}<br />
/* Add parentheses around nested lists */<br />
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,<br />
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,<br />
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {<br />
content: "(";<br />
font-weight: normal;<br />
}<br />
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,<br />
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,<br />
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* For IE8 */<br />
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,<br />
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,<br />
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* Put numbers in front of ordered list items */<br />
.hlist.hnum ol {<br />
counter-reset: list-item;<br />
}<br />
.hlist.hnum ol > li {<br />
counter-increment: list-item;<br />
}<br />
.hlist.hnum ol > li:before {<br />
content: counter(list-item) " ";<br />
}<br />
.hlist.hnum dd ol > li:first-child:before,<br />
.hlist.hnum dt ol > li:first-child:before,<br />
.hlist.hnum li ol > li:first-child:before {<br />
content: "(" counter(list-item) " ";<br />
}<br />
/* Default style for navigation boxes */<br />
.navbox { /* Navbox container style */<br />
border: 1px solid #aaa;<br />
width: 100%;<br />
margin: auto;<br />
clear: both;<br />
font-size: 88%;<br />
text-align: center;<br />
padding: 1px;<br />
}<br />
.navbox-inner,<br />
.navbox-subgroup {<br />
width: 100%;<br />
}<br />
.navbox-group,<br />
.navbox-title,<br />
.navbox-abovebelow {<br />
padding: 0.25em 1em; /* Title, group and above/below styles */<br />
line-height: 1.5em;<br />
text-align: center;<br />
}<br />
th.navbox-group { /* Group style */<br />
white-space: nowrap;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox,<br />
.navbox-subgroup {<br />
background: #fdfdfd; /* Background color */<br />
}<br />
.navbox-list {<br />
line-height: 1.8em;<br />
border-color: #fdfdfd; /* Must match background color */<br />
}<br />
.navbox th,<br />
.navbox-title {<br />
background: #ccccff; /* Level 1 color */<br />
}<br />
.navbox-abovebelow,<br />
th.navbox-group,<br />
.navbox-subgroup .navbox-title {<br />
background: #ddddff; /* Level 2 color */<br />
}<br />
.navbox-subgroup .navbox-group,<br />
.navbox-subgroup .navbox-abovebelow {<br />
background: #e6e6ff; /* Level 3 color */<br />
}<br />
.navbox-even {<br />
background: #f7f7f7; /* Even row striping */<br />
}<br />
.navbox-odd {<br />
background: transparent; /* Odd row striping */<br />
}<br />
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */<br />
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */<br />
}<br />
.navbox .hlist td dl,<br />
.navbox .hlist td ol,<br />
.navbox .hlist td ul,<br />
.navbox td.hlist dl,<br />
.navbox td.hlist ol,<br />
.navbox td.hlist ul {<br />
padding: 0.125em 0; /* Adjust hlist padding in navboxes */<br />
}<br />
ol + table.navbox,<br />
ul + table.navbox {<br />
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */<br />
}<br />
<br />
/* Default styling for Navbar template */<br />
.navbar {<br />
display: inline;<br />
font-size: 88%;<br />
font-weight: normal;<br />
}<br />
.navbar ul {<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
.navbar li {<br />
word-spacing: -0.125em;<br />
}<br />
.navbar.mini li span {<br />
font-variant: small-caps;<br />
}<br />
/* Navbar styling when nested in infobox and navbox */<br />
.infobox .navbar {<br />
font-size: 100%;<br />
}<br />
.navbox .navbar {<br />
display: block;<br />
font-size: 100%;<br />
}<br />
.navbox-title .navbar {<br />
/* @noflip */<br />
float: left;<br />
/* @noflip */<br />
text-align: left;<br />
/* @noflip */<br />
margin-right: 0.5em;<br />
width: 6em;<br />
}<br />
<br />
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript<br />
in [[MediaWiki:Common.js]] are styled here so they can be customised. */<br />
.collapseButton {<br />
/* @noflip */<br />
float: right;<br />
font-weight: normal;<br />
/* @noflip */<br />
margin-left: 0.5em;<br />
/* @noflip */<br />
text-align: right;<br />
width: auto;<br />
}<br />
/* In navboxes, the show/hide button balances the v·d·e links<br />
from [[Template:Navbar]], so they need to be the same width. */<br />
.navbox .collapseButton {<br />
width: 6em;<br />
}<br />
<br />
/* Styling for JQuery makeCollapsible, matching that of collapseButton */<br />
.mw-collapsible-toggle {<br />
font-weight: normal;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox .mw-collapsible-toggle {<br />
width: 6em;<br />
}<br />
/* Lists in data cells are always left-aligned */<br />
.wikitable td ul,<br />
.wikitable td ol,<br />
.wikitable td dl {<br />
/* @noflip */<br />
text-align: left;<br />
}<br />
/* ...unless they also use the hlist class */<br />
.wikitable.hlist td ul,<br />
.wikitable.hlist td ol,<br />
.wikitable.hlist td dl {<br />
text-align: inherit;<br />
}<br />
<br />
<br />
@media (max-width: 500px) {<br />
.sph-front-topnav table.wikitable > * > tr > td {<br />
display: block;<br />
}<br />
.sph-front-topnav table.wikitable > * > tr > th {<br />
display: none;<br />
}<br />
}</div>DaVincehttp://wiki.spheredev.org/index.php?title=MediaWiki:Common.css&diff=10178MediaWiki:Common.css2018-08-10T14:37:07Z<p>DaVince: Put max size constraints for images on mobile view</p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
@import url("http://wiki.spheredev.org/extra/league-gothic/stylesheet.css");<br />
@import url("http://wiki.spheredev.org/extra/mgopen-modata/stylesheet.css");<br />
<br />
<br />
/* Mobile */<br />
@media (max-width: 768px) {<br />
.mw-body {<br />
margin-left: 0;<br />
}<br />
div#mw-panel {<br />
position: static;<br />
top: 0;<br />
width: 100%;<br />
}<br />
#p-search {<br />
float: right;<br />
}<br />
#right-navigation {<br />
float: none;<br />
}<br />
#left-navigation {<br />
display: block;<br />
float: none;<br />
margin-left: 0;<br />
margin-top: 3em;<br />
}<br />
#p-personal ul {<br />
padding-left: 0;<br />
}<br />
#p-search {<br />
float: none;<br />
position: absolute;<br />
top: 20px;<br />
}<br />
div#simpleSearch {<br />
width: 100%;<br />
}<br />
img {<br />
max-width: 100%;<br />
}<br />
}<br />
<br />
<br />
<br />
<br />
/* Everything else */<br />
<br />
<br />
.sph-cf:before,<br />
.sph-cf:after {<br />
content: " "; /* 1 */<br />
display: table; /* 2 */<br />
}<br />
<br />
.sph-cf:after {<br />
clear: both;<br />
}<br />
<br />
/*<br />
* For IE 6/7 only<br />
* Include this rule to trigger hasLayout and contain floats.<br />
*/<br />
<br />
.sph-cf {<br />
*zoom: 1;<br />
}<br />
<br />
h1, #toc h2, .toc h2, h3, h4 {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
div#content h1, div#content h2, div#content #firstHeading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
h1 {font-weight:normal;}<br />
h2 {font-family:"League Gothic",LeagueGothic,sans-serif; font-weight:normal;}<br />
<br />
#mw-content-text h2 {font-size:200%;}<br />
#toc h2, .toc h2 {font-weight:bold; text-transform:uppercase; font-size:100%;}<br />
<br />
.editsection {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
.rellink, .dablink {font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em;}<br />
<br />
#mw-head, #mw-panel, #footer, input,<br />
.mw-search-result-heading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
<br />
.sph-section {<br />
border: 1px solid #e8e8f8;<br />
padding: 0;<br />
background-color: #f6f6ff;<br />
border-radius: 0 !important;<br />
}<br />
.sph-section .sph-section-title {<br />
padding: 7px;<br />
font-weight: bold;<br />
background-color: #e8e8f8;<br />
}<br />
.sph-section .sph-section-content {<br />
padding: 10px;<br />
}<br />
<br />
div#content .sph-section .sph-section-title {margin-top:0;}<br />
.sph-section h3.sph-section-title {font-weight:normal;}<br />
<br />
.sph-disambig {text-align:center;}<br />
.sph-disambig .sph-section-content {font-style:italic;}<br />
<br />
.sph-usage {background:#eee; border:1px solid #999; text-align:center; padding:8px 4px; font-size:150%;}<br />
.sph-section .sph-usage {background:none; border:0; padding:0; margin:1em auto;}<br />
<br />
.sph-latest {text-align:center;}<br />
<br />
.sph-aside {border:solid rgb(167,215,249); border-width:1px 0; margin:1em auto;}<br />
.sph-aside>.floatleft {margin-top:0.25em;}<br />
.sph-aside h4 {font-weight:normal; font-style:italic;}<br />
<br />
.sph-front-topnav {<br />
width: 100%;<br />
max-width: 1000px;<br />
margin: 0 auto;<br />
font-family: "MgOpen Modata", MgOpenModata, sans-serif;<br />
background-color: #f6f6ff;<br />
border: 1px solid #e8e8f8;<br />
}<br />
.sph-front-topnav .header {<br />
text-align: center;<br />
background-color: #e8e8f8;<br />
padding: 10px;<br />
}<br />
.sph-front-topnav .content {<br />
margin: 0 auto;<br />
padding: 10px;<br />
}<br />
.sph-front-topnav .content .wikitable { margin: 0 auto; }<br />
<br />
.sph-directory, .sph-filepath {}<br />
.sph-directory .sph-filepath {}<br />
<br />
.nmbox {background:#F6F9ED; border:1px solid rgb(167,215,249); clear:both; font-size:85%; margin: 0.5em 0;}<br />
.nmbox .mbox-image {background:#EEF3E2; white-space: nowrap; padding: 4px 1em; border-right: 1px solid #aaaaaa;}<br />
.nmbox .mbox-text {padding:4px 1em;}<br />
.nmbox.sph-cf>.mbox-text {float:left;}<br />
.nmbox.sph-cf>.mbox-image {float:left;}<br />
<br />
.sph-notice {<br />
background:#F8EABA; border-bottom:1px solid #C0C090;<br />
margin:1em auto; padding:0.5em 0; width:80%;<br />
clear:both; text-align:center; font-weight:bold;<br />
}<br />
<br />
.mus {font-family:Symbola;}<br />
b.mus {line-height:1; font-weight:normal;}<br />
b b.mus, strong b.mus {font-weight:inherit;}<br />
<br />
.gist table.highlight {font-weight:normal;}<br />
<br />
/**** GESHI-RELATED STYLES ****/<br />
.mw-geshi.mw-code {overflow:auto; position:relative;}<br />
.mw-geshi a[href]>.kw10 {text-shadow:0 1px 0 #808080; text-shadow:0 1px 0 rgba(0,0,0,0.5);}<br />
.mw-geshi a[href]:hover>.kw10 {text-shadow:0 0 2px #806000; text-shadow:0 0 2px rgba(128,112,0,0.5);}<br />
.mw-geshi>.javascript:before {<br />
display:block; content:"JavaScript";<br />
font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-weight:bold; line-height:1;<br />
position:absolute; top:0; right:0;<br />
border:solid #aaa; border-width:0 0 1px 1px; border-radius: 0;<br />
padding:4px; opacity:0.50;<br />
}<br />
.mw-geshi:hover>.javascript:before {opacity:1.0;}<br />
<br />
/**** NAVBOX-RELATED STYLES ****/<br />
/* Style for horizontal lists (separator following item).<br />
Note: hlist formatting will break if the resulting HTML lacks a breakable character<br />
between list items. This happens when the following conditions are true:<br />
1) The list is made using wiki markup (where HTML is built by parser.php)<br />
2) HTMLTidy is disabled or unavailable (such as on Special: pages)<br />
In such cases, building lists with .hlist using HTML instead of wiki markup<br />
will work around this problem. See also [[Bugzilla:39617]].<br />
IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].<br />
Last updated: January 24, 2013<br />
@source mediawiki.org/wiki/Snippets/Horizontal_lists<br />
@maintainer: [[User:Edokter]]<br />
@revision: 3.1<br />
*/<br />
.skin-monobook .hlist dl,<br />
.skin-modern .hlist dl,<br />
.skin-vector .hlist dl {<br />
line-height: 1.5em;<br />
}<br />
.hlist dl,<br />
.hlist ol,<br />
.hlist ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
/* Display list items inline and make them nowrap */<br />
.hlist dd,<br />
.hlist dt,<br />
.hlist li {<br />
margin: 0;<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
/* Allow wrapping for list items (in tight spaces) */<br />
.hlist.hwrap dd,<br />
.hlist.hwrap dt,<br />
.hlist.hwrap li {<br />
white-space: normal;<br />
}<br />
/* Display nested lists inline and allow them to wrap */<br />
.hlist dl dl, .hlist dl ol, .hlist dl ul,<br />
.hlist ol dl, .hlist ol ol, .hlist ol ul,<br />
.hlist ul dl, .hlist ul ol, .hlist ul ul {<br />
display: inline;<br />
white-space: normal;<br />
}<br />
/* Generate interpuncts */<br />
.hlist dt:after {<br />
content: ":";<br />
}<br />
.hlist dd:after,<br />
.hlist li:after {<br />
content: " ·";<br />
font-weight: bold;<br />
}<br />
.hlist dd:last-child:after,<br />
.hlist dt:last-child:after,<br />
.hlist li:last-child:after {<br />
content: none;<br />
}<br />
/* For IE8 */<br />
.hlist dd.hlist-last-child:after,<br />
.hlist dt.hlist-last-child:after,<br />
.hlist li.hlist-last-child:after {<br />
content: none;<br />
}<br />
/* Add parentheses around nested lists */<br />
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,<br />
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,<br />
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {<br />
content: "(";<br />
font-weight: normal;<br />
}<br />
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,<br />
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,<br />
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* For IE8 */<br />
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,<br />
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,<br />
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* Put numbers in front of ordered list items */<br />
.hlist.hnum ol {<br />
counter-reset: list-item;<br />
}<br />
.hlist.hnum ol > li {<br />
counter-increment: list-item;<br />
}<br />
.hlist.hnum ol > li:before {<br />
content: counter(list-item) " ";<br />
}<br />
.hlist.hnum dd ol > li:first-child:before,<br />
.hlist.hnum dt ol > li:first-child:before,<br />
.hlist.hnum li ol > li:first-child:before {<br />
content: "(" counter(list-item) " ";<br />
}<br />
/* Default style for navigation boxes */<br />
.navbox { /* Navbox container style */<br />
border: 1px solid #aaa;<br />
width: 100%;<br />
margin: auto;<br />
clear: both;<br />
font-size: 88%;<br />
text-align: center;<br />
padding: 1px;<br />
}<br />
.navbox-inner,<br />
.navbox-subgroup {<br />
width: 100%;<br />
}<br />
.navbox-group,<br />
.navbox-title,<br />
.navbox-abovebelow {<br />
padding: 0.25em 1em; /* Title, group and above/below styles */<br />
line-height: 1.5em;<br />
text-align: center;<br />
}<br />
th.navbox-group { /* Group style */<br />
white-space: nowrap;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox,<br />
.navbox-subgroup {<br />
background: #fdfdfd; /* Background color */<br />
}<br />
.navbox-list {<br />
line-height: 1.8em;<br />
border-color: #fdfdfd; /* Must match background color */<br />
}<br />
.navbox th,<br />
.navbox-title {<br />
background: #ccccff; /* Level 1 color */<br />
}<br />
.navbox-abovebelow,<br />
th.navbox-group,<br />
.navbox-subgroup .navbox-title {<br />
background: #ddddff; /* Level 2 color */<br />
}<br />
.navbox-subgroup .navbox-group,<br />
.navbox-subgroup .navbox-abovebelow {<br />
background: #e6e6ff; /* Level 3 color */<br />
}<br />
.navbox-even {<br />
background: #f7f7f7; /* Even row striping */<br />
}<br />
.navbox-odd {<br />
background: transparent; /* Odd row striping */<br />
}<br />
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */<br />
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */<br />
}<br />
.navbox .hlist td dl,<br />
.navbox .hlist td ol,<br />
.navbox .hlist td ul,<br />
.navbox td.hlist dl,<br />
.navbox td.hlist ol,<br />
.navbox td.hlist ul {<br />
padding: 0.125em 0; /* Adjust hlist padding in navboxes */<br />
}<br />
ol + table.navbox,<br />
ul + table.navbox {<br />
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */<br />
}<br />
<br />
/* Default styling for Navbar template */<br />
.navbar {<br />
display: inline;<br />
font-size: 88%;<br />
font-weight: normal;<br />
}<br />
.navbar ul {<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
.navbar li {<br />
word-spacing: -0.125em;<br />
}<br />
.navbar.mini li span {<br />
font-variant: small-caps;<br />
}<br />
/* Navbar styling when nested in infobox and navbox */<br />
.infobox .navbar {<br />
font-size: 100%;<br />
}<br />
.navbox .navbar {<br />
display: block;<br />
font-size: 100%;<br />
}<br />
.navbox-title .navbar {<br />
/* @noflip */<br />
float: left;<br />
/* @noflip */<br />
text-align: left;<br />
/* @noflip */<br />
margin-right: 0.5em;<br />
width: 6em;<br />
}<br />
<br />
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript<br />
in [[MediaWiki:Common.js]] are styled here so they can be customised. */<br />
.collapseButton {<br />
/* @noflip */<br />
float: right;<br />
font-weight: normal;<br />
/* @noflip */<br />
margin-left: 0.5em;<br />
/* @noflip */<br />
text-align: right;<br />
width: auto;<br />
}<br />
/* In navboxes, the show/hide button balances the v·d·e links<br />
from [[Template:Navbar]], so they need to be the same width. */<br />
.navbox .collapseButton {<br />
width: 6em;<br />
}<br />
<br />
/* Styling for JQuery makeCollapsible, matching that of collapseButton */<br />
.mw-collapsible-toggle {<br />
font-weight: normal;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox .mw-collapsible-toggle {<br />
width: 6em;<br />
}<br />
/* Lists in data cells are always left-aligned */<br />
.wikitable td ul,<br />
.wikitable td ol,<br />
.wikitable td dl {<br />
/* @noflip */<br />
text-align: left;<br />
}<br />
/* ...unless they also use the hlist class */<br />
.wikitable.hlist td ul,<br />
.wikitable.hlist td ol,<br />
.wikitable.hlist td dl {<br />
text-align: inherit;<br />
}<br />
<br />
<br />
@media (max-width: 500px) {<br />
.sph-front-topnav table.wikitable > * > tr > td {<br />
display: block;<br />
}<br />
.sph-front-topnav table.wikitable > * > tr > th {<br />
display: none;<br />
}<br />
}</div>DaVincehttp://wiki.spheredev.org/index.php?title=Main_Page&diff=10177Main Page2018-08-10T14:33:34Z<p>DaVince: Put random page link inside second block</p>
<hr />
<div><br />
<div class='sph-front-topnav'><br />
<div class="header">[[File:Spherical logo white bg.png]]</div><br />
<div class="content"><br />
{| class="wikitable"<br />
! '''For newcomers'''<br />
! '''For game developers'''<br />
! '''Downloads & Projects'''<br />
! '''For wiki editors'''<br />
|-<br />
| [[Getting started]]<br>[[Git for the lazy]]<br>[[:Category:Tutorials|Tutorials]]<br />
| [[API:Functions]]<br>[[:Category:Sphere 2 API|Sphere 2 API articles]]<br>[[Legacy:Functions]]<br>[[:Category:Tutorials|Tutorials]]<br>[[:Category:Scripts|Scripts]]<br />
| [http://www.spheredev.org/dl Repository] (Games, resources)<br>[[:Category:Games]] (incomplete)<br />
| [[Help:Editing|Editing Help]]<br>[//meta.wikimedia.org/wiki/Help:Contents MW User's Guide]<br>[//www.mediawiki.org/wiki/Manual:FAQ MediaWiki FAQ]<br />
|}<br />
</div><br />
</div><br />
<br />
<br />
{{section|sph-section-green|Welcome|'''Spheriki''' is the definitive wiki of the '''Spherical community''', dedicated to the [[Sphere]] RPG engine. It includes info about [[:Category:Games|games]], [[:Category:Tutorials|docs]] and [[Spherical:Current events|news]].<br />
<br />
If you're new to Sphere, get started [[Getting started|here]]!<br />
<br />
Stuck? Want to show your project? Come join the community on the [http://forums.spheredev.org/ forums!]<br />
<br />
[[Special:Random|Display a random page]]<br />
}}<br />
<br />
__NOTOC__</div>DaVincehttp://wiki.spheredev.org/index.php?title=Main_Page&diff=10176Main Page2018-08-10T14:32:33Z<p>DaVince: </p>
<hr />
<div><br />
<div class='sph-front-topnav'><br />
<div class="header">[[File:Spherical logo white bg.png]]</div><br />
<div class="content"><br />
{| class="wikitable"<br />
! '''For newcomers'''<br />
! '''For game developers'''<br />
! '''Downloads & Projects'''<br />
! '''For wiki editors'''<br />
|-<br />
| [[Getting started]]<br>[[Git for the lazy]]<br>[[:Category:Tutorials|Tutorials]]<br />
| [[API:Functions]]<br>[[:Category:Sphere 2 API|Sphere 2 API articles]]<br>[[Legacy:Functions]]<br>[[:Category:Tutorials|Tutorials]]<br>[[:Category:Scripts|Scripts]]<br />
| [http://www.spheredev.org/dl Repository] (Games, resources)<br>[[:Category:Games]] (incomplete)<br />
| [[Help:Editing|Editing Help]]<br>[//meta.wikimedia.org/wiki/Help:Contents MW User's Guide]<br>[//www.mediawiki.org/wiki/Manual:FAQ MediaWiki FAQ]<br />
|}<br />
</div><br />
</div><br />
<br />
<br />
{{section|sph-section-green|Welcome|'''Spheriki''' is the definitive wiki of the '''Spherical community''', dedicated to the [[Sphere]] RPG engine. It includes info about [[:Category:Games|games]], [[:Category:Tutorials|docs]] and [[Spherical:Current events|news]].<br />
<br />
If you're new to Sphere, get started [[Getting started|here]]!<br />
<br />
Stuck? Want to show your project? Come join the community on the [http://forums.spheredev.org/ forums!]<br />
}}<br />
<br />
[[Special:Random|Display a random page]]<br />
<br />
__NOTOC__</div>DaVincehttp://wiki.spheredev.org/index.php?title=MediaWiki:Common.css&diff=10175MediaWiki:Common.css2018-08-10T14:31:50Z<p>DaVince: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
@import url("http://wiki.spheredev.org/extra/league-gothic/stylesheet.css");<br />
@import url("http://wiki.spheredev.org/extra/mgopen-modata/stylesheet.css");<br />
<br />
<br />
/* Mobile */<br />
@media (max-width: 768px) {<br />
.mw-body {<br />
margin-left: 0;<br />
}<br />
div#mw-panel {<br />
position: static;<br />
top: 0;<br />
width: 100%;<br />
}<br />
#p-search {<br />
float: right;<br />
}<br />
#right-navigation {<br />
float: none;<br />
}<br />
#left-navigation {<br />
display: block;<br />
float: none;<br />
margin-left: 0;<br />
margin-top: 3em;<br />
}<br />
#p-personal ul {<br />
padding-left: 0;<br />
}<br />
#p-search {<br />
float: none;<br />
position: absolute;<br />
top: 20px;<br />
}<br />
div#simpleSearch {<br />
width: 100%;<br />
}<br />
}<br />
<br />
<br />
<br />
<br />
/* Everything else */<br />
<br />
<br />
.sph-cf:before,<br />
.sph-cf:after {<br />
content: " "; /* 1 */<br />
display: table; /* 2 */<br />
}<br />
<br />
.sph-cf:after {<br />
clear: both;<br />
}<br />
<br />
/*<br />
* For IE 6/7 only<br />
* Include this rule to trigger hasLayout and contain floats.<br />
*/<br />
<br />
.sph-cf {<br />
*zoom: 1;<br />
}<br />
<br />
h1, #toc h2, .toc h2, h3, h4 {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
div#content h1, div#content h2, div#content #firstHeading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
h1 {font-weight:normal;}<br />
h2 {font-family:"League Gothic",LeagueGothic,sans-serif; font-weight:normal;}<br />
<br />
#mw-content-text h2 {font-size:200%;}<br />
#toc h2, .toc h2 {font-weight:bold; text-transform:uppercase; font-size:100%;}<br />
<br />
.editsection {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
.rellink, .dablink {font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em;}<br />
<br />
#mw-head, #mw-panel, #footer, input,<br />
.mw-search-result-heading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
<br />
.sph-section {<br />
border: 1px solid #e8e8f8;<br />
padding: 0;<br />
background-color: #f6f6ff;<br />
border-radius: 0 !important;<br />
}<br />
.sph-section .sph-section-title {<br />
padding: 7px;<br />
font-weight: bold;<br />
background-color: #e8e8f8;<br />
}<br />
.sph-section .sph-section-content {<br />
padding: 10px;<br />
}<br />
<br />
div#content .sph-section .sph-section-title {margin-top:0;}<br />
.sph-section h3.sph-section-title {font-weight:normal;}<br />
<br />
.sph-disambig {text-align:center;}<br />
.sph-disambig .sph-section-content {font-style:italic;}<br />
<br />
.sph-usage {background:#eee; border:1px solid #999; text-align:center; padding:8px 4px; font-size:150%;}<br />
.sph-section .sph-usage {background:none; border:0; padding:0; margin:1em auto;}<br />
<br />
.sph-latest {text-align:center;}<br />
<br />
.sph-aside {border:solid rgb(167,215,249); border-width:1px 0; margin:1em auto;}<br />
.sph-aside>.floatleft {margin-top:0.25em;}<br />
.sph-aside h4 {font-weight:normal; font-style:italic;}<br />
<br />
.sph-front-topnav {<br />
width: 100%;<br />
max-width: 1000px;<br />
margin: 0 auto;<br />
font-family: "MgOpen Modata", MgOpenModata, sans-serif;<br />
background-color: #f6f6ff;<br />
border: 1px solid #e8e8f8;<br />
}<br />
.sph-front-topnav .header {<br />
text-align: center;<br />
background-color: #e8e8f8;<br />
padding: 10px;<br />
}<br />
.sph-front-topnav .content {<br />
margin: 0 auto;<br />
padding: 10px;<br />
}<br />
.sph-front-topnav .content .wikitable { margin: 0 auto; }<br />
<br />
.sph-directory, .sph-filepath {}<br />
.sph-directory .sph-filepath {}<br />
<br />
.nmbox {background:#F6F9ED; border:1px solid rgb(167,215,249); clear:both; font-size:85%; margin: 0.5em 0;}<br />
.nmbox .mbox-image {background:#EEF3E2; white-space: nowrap; padding: 4px 1em; border-right: 1px solid #aaaaaa;}<br />
.nmbox .mbox-text {padding:4px 1em;}<br />
.nmbox.sph-cf>.mbox-text {float:left;}<br />
.nmbox.sph-cf>.mbox-image {float:left;}<br />
<br />
.sph-notice {<br />
background:#F8EABA; border-bottom:1px solid #C0C090;<br />
margin:1em auto; padding:0.5em 0; width:80%;<br />
clear:both; text-align:center; font-weight:bold;<br />
}<br />
<br />
.mus {font-family:Symbola;}<br />
b.mus {line-height:1; font-weight:normal;}<br />
b b.mus, strong b.mus {font-weight:inherit;}<br />
<br />
.gist table.highlight {font-weight:normal;}<br />
<br />
/**** GESHI-RELATED STYLES ****/<br />
.mw-geshi.mw-code {overflow:auto; position:relative;}<br />
.mw-geshi a[href]>.kw10 {text-shadow:0 1px 0 #808080; text-shadow:0 1px 0 rgba(0,0,0,0.5);}<br />
.mw-geshi a[href]:hover>.kw10 {text-shadow:0 0 2px #806000; text-shadow:0 0 2px rgba(128,112,0,0.5);}<br />
.mw-geshi>.javascript:before {<br />
display:block; content:"JavaScript";<br />
font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-weight:bold; line-height:1;<br />
position:absolute; top:0; right:0;<br />
border:solid #aaa; border-width:0 0 1px 1px; border-radius: 0;<br />
padding:4px; opacity:0.50;<br />
}<br />
.mw-geshi:hover>.javascript:before {opacity:1.0;}<br />
<br />
/**** NAVBOX-RELATED STYLES ****/<br />
/* Style for horizontal lists (separator following item).<br />
Note: hlist formatting will break if the resulting HTML lacks a breakable character<br />
between list items. This happens when the following conditions are true:<br />
1) The list is made using wiki markup (where HTML is built by parser.php)<br />
2) HTMLTidy is disabled or unavailable (such as on Special: pages)<br />
In such cases, building lists with .hlist using HTML instead of wiki markup<br />
will work around this problem. See also [[Bugzilla:39617]].<br />
IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].<br />
Last updated: January 24, 2013<br />
@source mediawiki.org/wiki/Snippets/Horizontal_lists<br />
@maintainer: [[User:Edokter]]<br />
@revision: 3.1<br />
*/<br />
.skin-monobook .hlist dl,<br />
.skin-modern .hlist dl,<br />
.skin-vector .hlist dl {<br />
line-height: 1.5em;<br />
}<br />
.hlist dl,<br />
.hlist ol,<br />
.hlist ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
/* Display list items inline and make them nowrap */<br />
.hlist dd,<br />
.hlist dt,<br />
.hlist li {<br />
margin: 0;<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
/* Allow wrapping for list items (in tight spaces) */<br />
.hlist.hwrap dd,<br />
.hlist.hwrap dt,<br />
.hlist.hwrap li {<br />
white-space: normal;<br />
}<br />
/* Display nested lists inline and allow them to wrap */<br />
.hlist dl dl, .hlist dl ol, .hlist dl ul,<br />
.hlist ol dl, .hlist ol ol, .hlist ol ul,<br />
.hlist ul dl, .hlist ul ol, .hlist ul ul {<br />
display: inline;<br />
white-space: normal;<br />
}<br />
/* Generate interpuncts */<br />
.hlist dt:after {<br />
content: ":";<br />
}<br />
.hlist dd:after,<br />
.hlist li:after {<br />
content: " ·";<br />
font-weight: bold;<br />
}<br />
.hlist dd:last-child:after,<br />
.hlist dt:last-child:after,<br />
.hlist li:last-child:after {<br />
content: none;<br />
}<br />
/* For IE8 */<br />
.hlist dd.hlist-last-child:after,<br />
.hlist dt.hlist-last-child:after,<br />
.hlist li.hlist-last-child:after {<br />
content: none;<br />
}<br />
/* Add parentheses around nested lists */<br />
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,<br />
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,<br />
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {<br />
content: "(";<br />
font-weight: normal;<br />
}<br />
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,<br />
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,<br />
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* For IE8 */<br />
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,<br />
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,<br />
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* Put numbers in front of ordered list items */<br />
.hlist.hnum ol {<br />
counter-reset: list-item;<br />
}<br />
.hlist.hnum ol > li {<br />
counter-increment: list-item;<br />
}<br />
.hlist.hnum ol > li:before {<br />
content: counter(list-item) " ";<br />
}<br />
.hlist.hnum dd ol > li:first-child:before,<br />
.hlist.hnum dt ol > li:first-child:before,<br />
.hlist.hnum li ol > li:first-child:before {<br />
content: "(" counter(list-item) " ";<br />
}<br />
/* Default style for navigation boxes */<br />
.navbox { /* Navbox container style */<br />
border: 1px solid #aaa;<br />
width: 100%;<br />
margin: auto;<br />
clear: both;<br />
font-size: 88%;<br />
text-align: center;<br />
padding: 1px;<br />
}<br />
.navbox-inner,<br />
.navbox-subgroup {<br />
width: 100%;<br />
}<br />
.navbox-group,<br />
.navbox-title,<br />
.navbox-abovebelow {<br />
padding: 0.25em 1em; /* Title, group and above/below styles */<br />
line-height: 1.5em;<br />
text-align: center;<br />
}<br />
th.navbox-group { /* Group style */<br />
white-space: nowrap;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox,<br />
.navbox-subgroup {<br />
background: #fdfdfd; /* Background color */<br />
}<br />
.navbox-list {<br />
line-height: 1.8em;<br />
border-color: #fdfdfd; /* Must match background color */<br />
}<br />
.navbox th,<br />
.navbox-title {<br />
background: #ccccff; /* Level 1 color */<br />
}<br />
.navbox-abovebelow,<br />
th.navbox-group,<br />
.navbox-subgroup .navbox-title {<br />
background: #ddddff; /* Level 2 color */<br />
}<br />
.navbox-subgroup .navbox-group,<br />
.navbox-subgroup .navbox-abovebelow {<br />
background: #e6e6ff; /* Level 3 color */<br />
}<br />
.navbox-even {<br />
background: #f7f7f7; /* Even row striping */<br />
}<br />
.navbox-odd {<br />
background: transparent; /* Odd row striping */<br />
}<br />
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */<br />
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */<br />
}<br />
.navbox .hlist td dl,<br />
.navbox .hlist td ol,<br />
.navbox .hlist td ul,<br />
.navbox td.hlist dl,<br />
.navbox td.hlist ol,<br />
.navbox td.hlist ul {<br />
padding: 0.125em 0; /* Adjust hlist padding in navboxes */<br />
}<br />
ol + table.navbox,<br />
ul + table.navbox {<br />
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */<br />
}<br />
<br />
/* Default styling for Navbar template */<br />
.navbar {<br />
display: inline;<br />
font-size: 88%;<br />
font-weight: normal;<br />
}<br />
.navbar ul {<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
.navbar li {<br />
word-spacing: -0.125em;<br />
}<br />
.navbar.mini li span {<br />
font-variant: small-caps;<br />
}<br />
/* Navbar styling when nested in infobox and navbox */<br />
.infobox .navbar {<br />
font-size: 100%;<br />
}<br />
.navbox .navbar {<br />
display: block;<br />
font-size: 100%;<br />
}<br />
.navbox-title .navbar {<br />
/* @noflip */<br />
float: left;<br />
/* @noflip */<br />
text-align: left;<br />
/* @noflip */<br />
margin-right: 0.5em;<br />
width: 6em;<br />
}<br />
<br />
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript<br />
in [[MediaWiki:Common.js]] are styled here so they can be customised. */<br />
.collapseButton {<br />
/* @noflip */<br />
float: right;<br />
font-weight: normal;<br />
/* @noflip */<br />
margin-left: 0.5em;<br />
/* @noflip */<br />
text-align: right;<br />
width: auto;<br />
}<br />
/* In navboxes, the show/hide button balances the v·d·e links<br />
from [[Template:Navbar]], so they need to be the same width. */<br />
.navbox .collapseButton {<br />
width: 6em;<br />
}<br />
<br />
/* Styling for JQuery makeCollapsible, matching that of collapseButton */<br />
.mw-collapsible-toggle {<br />
font-weight: normal;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox .mw-collapsible-toggle {<br />
width: 6em;<br />
}<br />
/* Lists in data cells are always left-aligned */<br />
.wikitable td ul,<br />
.wikitable td ol,<br />
.wikitable td dl {<br />
/* @noflip */<br />
text-align: left;<br />
}<br />
/* ...unless they also use the hlist class */<br />
.wikitable.hlist td ul,<br />
.wikitable.hlist td ol,<br />
.wikitable.hlist td dl {<br />
text-align: inherit;<br />
}<br />
<br />
<br />
@media (max-width: 500px) {<br />
.sph-front-topnav table.wikitable > * > tr > td {<br />
display: block;<br />
}<br />
.sph-front-topnav table.wikitable > * > tr > th {<br />
display: none;<br />
}<br />
}</div>DaVincehttp://wiki.spheredev.org/index.php?title=MediaWiki:Common.css&diff=10174MediaWiki:Common.css2018-08-10T14:30:55Z<p>DaVince: Added more front page style tweaks; made front page table reflow on mobile resolutions</p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
@import url("http://wiki.spheredev.org/extra/league-gothic/stylesheet.css");<br />
@import url("http://wiki.spheredev.org/extra/mgopen-modata/stylesheet.css");<br />
<br />
<br />
/* Mobile */<br />
@media (max-width: 768px) {<br />
.mw-body {<br />
margin-left: 0;<br />
}<br />
div#mw-panel {<br />
position: static;<br />
top: 0;<br />
width: 100%;<br />
}<br />
#p-search {<br />
float: right;<br />
}<br />
#right-navigation {<br />
float: none;<br />
}<br />
#left-navigation {<br />
display: block;<br />
float: none;<br />
margin-left: 0;<br />
margin-top: 3em;<br />
}<br />
#p-personal ul {<br />
padding-left: 0;<br />
}<br />
#p-search {<br />
float: none;<br />
position: absolute;<br />
top: 20px;<br />
}<br />
div#simpleSearch {<br />
width: 100%;<br />
}<br />
}<br />
<br />
<br />
<br />
<br />
/* Everything else */<br />
<br />
<br />
.sph-cf:before,<br />
.sph-cf:after {<br />
content: " "; /* 1 */<br />
display: table; /* 2 */<br />
}<br />
<br />
.sph-cf:after {<br />
clear: both;<br />
}<br />
<br />
/*<br />
* For IE 6/7 only<br />
* Include this rule to trigger hasLayout and contain floats.<br />
*/<br />
<br />
.sph-cf {<br />
*zoom: 1;<br />
}<br />
<br />
h1, #toc h2, .toc h2, h3, h4 {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
div#content h1, div#content h2, div#content #firstHeading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
h1 {font-weight:normal;}<br />
h2 {font-family:"League Gothic",LeagueGothic,sans-serif; font-weight:normal;}<br />
<br />
#mw-content-text h2 {font-size:200%;}<br />
#toc h2, .toc h2 {font-weight:bold; text-transform:uppercase; font-size:100%;}<br />
<br />
.editsection {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
.rellink, .dablink {font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em;}<br />
<br />
#mw-head, #mw-panel, #footer, input,<br />
.mw-search-result-heading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
<br />
.sph-section {<br />
border: 1px solid #e8e8f8;<br />
padding: 0;<br />
background-color: #f6f6ff;<br />
border-radius: 0 !important;<br />
}<br />
.sph-section .sph-section-title {<br />
padding: 7px;<br />
font-weight: bold;<br />
background-color: #e8e8f8;<br />
}<br />
.sph-section .sph-section-content {<br />
padding: 10px;<br />
}<br />
<br />
div#content .sph-section .sph-section-title {margin-top:0;}<br />
.sph-section h3.sph-section-title {font-weight:normal;}<br />
<br />
.sph-disambig {text-align:center;}<br />
.sph-disambig .sph-section-content {font-style:italic;}<br />
<br />
.sph-usage {background:#eee; border:1px solid #999; text-align:center; padding:8px 4px; font-size:150%;}<br />
.sph-section .sph-usage {background:none; border:0; padding:0; margin:1em auto;}<br />
<br />
.sph-latest {text-align:center;}<br />
<br />
.sph-aside {border:solid rgb(167,215,249); border-width:1px 0; margin:1em auto;}<br />
.sph-aside>.floatleft {margin-top:0.25em;}<br />
.sph-aside h4 {font-weight:normal; font-style:italic;}<br />
<br />
.sph-front-topnav {<br />
width: 100%;<br />
max-width: 1000px;<br />
margin: 0 auto;<br />
font-family: "MgOpen Modata", MgOpenModata, sans-serif;<br />
background-color: #f6f6ff;<br />
border: 1px solid #e8e8f8;<br />
}<br />
.sph-front-topnav .header {<br />
text-align: center;<br />
background-color: #e8e8f8;<br />
padding: 10px;<br />
}<br />
.sph-front-topnav .content {<br />
margin: 0 auto;<br />
padding: 10px;<br />
}<br />
<br />
.sph-directory, .sph-filepath {}<br />
.sph-directory .sph-filepath {}<br />
<br />
.nmbox {background:#F6F9ED; border:1px solid rgb(167,215,249); clear:both; font-size:85%; margin: 0.5em 0;}<br />
.nmbox .mbox-image {background:#EEF3E2; white-space: nowrap; padding: 4px 1em; border-right: 1px solid #aaaaaa;}<br />
.nmbox .mbox-text {padding:4px 1em;}<br />
.nmbox.sph-cf>.mbox-text {float:left;}<br />
.nmbox.sph-cf>.mbox-image {float:left;}<br />
<br />
.sph-notice {<br />
background:#F8EABA; border-bottom:1px solid #C0C090;<br />
margin:1em auto; padding:0.5em 0; width:80%;<br />
clear:both; text-align:center; font-weight:bold;<br />
}<br />
<br />
.mus {font-family:Symbola;}<br />
b.mus {line-height:1; font-weight:normal;}<br />
b b.mus, strong b.mus {font-weight:inherit;}<br />
<br />
.gist table.highlight {font-weight:normal;}<br />
<br />
/**** GESHI-RELATED STYLES ****/<br />
.mw-geshi.mw-code {overflow:auto; position:relative;}<br />
.mw-geshi a[href]>.kw10 {text-shadow:0 1px 0 #808080; text-shadow:0 1px 0 rgba(0,0,0,0.5);}<br />
.mw-geshi a[href]:hover>.kw10 {text-shadow:0 0 2px #806000; text-shadow:0 0 2px rgba(128,112,0,0.5);}<br />
.mw-geshi>.javascript:before {<br />
display:block; content:"JavaScript";<br />
font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-weight:bold; line-height:1;<br />
position:absolute; top:0; right:0;<br />
border:solid #aaa; border-width:0 0 1px 1px; border-radius: 0;<br />
padding:4px; opacity:0.50;<br />
}<br />
.mw-geshi:hover>.javascript:before {opacity:1.0;}<br />
<br />
/**** NAVBOX-RELATED STYLES ****/<br />
/* Style for horizontal lists (separator following item).<br />
Note: hlist formatting will break if the resulting HTML lacks a breakable character<br />
between list items. This happens when the following conditions are true:<br />
1) The list is made using wiki markup (where HTML is built by parser.php)<br />
2) HTMLTidy is disabled or unavailable (such as on Special: pages)<br />
In such cases, building lists with .hlist using HTML instead of wiki markup<br />
will work around this problem. See also [[Bugzilla:39617]].<br />
IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].<br />
Last updated: January 24, 2013<br />
@source mediawiki.org/wiki/Snippets/Horizontal_lists<br />
@maintainer: [[User:Edokter]]<br />
@revision: 3.1<br />
*/<br />
.skin-monobook .hlist dl,<br />
.skin-modern .hlist dl,<br />
.skin-vector .hlist dl {<br />
line-height: 1.5em;<br />
}<br />
.hlist dl,<br />
.hlist ol,<br />
.hlist ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
/* Display list items inline and make them nowrap */<br />
.hlist dd,<br />
.hlist dt,<br />
.hlist li {<br />
margin: 0;<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
/* Allow wrapping for list items (in tight spaces) */<br />
.hlist.hwrap dd,<br />
.hlist.hwrap dt,<br />
.hlist.hwrap li {<br />
white-space: normal;<br />
}<br />
/* Display nested lists inline and allow them to wrap */<br />
.hlist dl dl, .hlist dl ol, .hlist dl ul,<br />
.hlist ol dl, .hlist ol ol, .hlist ol ul,<br />
.hlist ul dl, .hlist ul ol, .hlist ul ul {<br />
display: inline;<br />
white-space: normal;<br />
}<br />
/* Generate interpuncts */<br />
.hlist dt:after {<br />
content: ":";<br />
}<br />
.hlist dd:after,<br />
.hlist li:after {<br />
content: " ·";<br />
font-weight: bold;<br />
}<br />
.hlist dd:last-child:after,<br />
.hlist dt:last-child:after,<br />
.hlist li:last-child:after {<br />
content: none;<br />
}<br />
/* For IE8 */<br />
.hlist dd.hlist-last-child:after,<br />
.hlist dt.hlist-last-child:after,<br />
.hlist li.hlist-last-child:after {<br />
content: none;<br />
}<br />
/* Add parentheses around nested lists */<br />
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,<br />
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,<br />
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {<br />
content: "(";<br />
font-weight: normal;<br />
}<br />
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,<br />
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,<br />
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* For IE8 */<br />
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,<br />
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,<br />
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* Put numbers in front of ordered list items */<br />
.hlist.hnum ol {<br />
counter-reset: list-item;<br />
}<br />
.hlist.hnum ol > li {<br />
counter-increment: list-item;<br />
}<br />
.hlist.hnum ol > li:before {<br />
content: counter(list-item) " ";<br />
}<br />
.hlist.hnum dd ol > li:first-child:before,<br />
.hlist.hnum dt ol > li:first-child:before,<br />
.hlist.hnum li ol > li:first-child:before {<br />
content: "(" counter(list-item) " ";<br />
}<br />
/* Default style for navigation boxes */<br />
.navbox { /* Navbox container style */<br />
border: 1px solid #aaa;<br />
width: 100%;<br />
margin: auto;<br />
clear: both;<br />
font-size: 88%;<br />
text-align: center;<br />
padding: 1px;<br />
}<br />
.navbox-inner,<br />
.navbox-subgroup {<br />
width: 100%;<br />
}<br />
.navbox-group,<br />
.navbox-title,<br />
.navbox-abovebelow {<br />
padding: 0.25em 1em; /* Title, group and above/below styles */<br />
line-height: 1.5em;<br />
text-align: center;<br />
}<br />
th.navbox-group { /* Group style */<br />
white-space: nowrap;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox,<br />
.navbox-subgroup {<br />
background: #fdfdfd; /* Background color */<br />
}<br />
.navbox-list {<br />
line-height: 1.8em;<br />
border-color: #fdfdfd; /* Must match background color */<br />
}<br />
.navbox th,<br />
.navbox-title {<br />
background: #ccccff; /* Level 1 color */<br />
}<br />
.navbox-abovebelow,<br />
th.navbox-group,<br />
.navbox-subgroup .navbox-title {<br />
background: #ddddff; /* Level 2 color */<br />
}<br />
.navbox-subgroup .navbox-group,<br />
.navbox-subgroup .navbox-abovebelow {<br />
background: #e6e6ff; /* Level 3 color */<br />
}<br />
.navbox-even {<br />
background: #f7f7f7; /* Even row striping */<br />
}<br />
.navbox-odd {<br />
background: transparent; /* Odd row striping */<br />
}<br />
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */<br />
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */<br />
}<br />
.navbox .hlist td dl,<br />
.navbox .hlist td ol,<br />
.navbox .hlist td ul,<br />
.navbox td.hlist dl,<br />
.navbox td.hlist ol,<br />
.navbox td.hlist ul {<br />
padding: 0.125em 0; /* Adjust hlist padding in navboxes */<br />
}<br />
ol + table.navbox,<br />
ul + table.navbox {<br />
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */<br />
}<br />
<br />
/* Default styling for Navbar template */<br />
.navbar {<br />
display: inline;<br />
font-size: 88%;<br />
font-weight: normal;<br />
}<br />
.navbar ul {<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
.navbar li {<br />
word-spacing: -0.125em;<br />
}<br />
.navbar.mini li span {<br />
font-variant: small-caps;<br />
}<br />
/* Navbar styling when nested in infobox and navbox */<br />
.infobox .navbar {<br />
font-size: 100%;<br />
}<br />
.navbox .navbar {<br />
display: block;<br />
font-size: 100%;<br />
}<br />
.navbox-title .navbar {<br />
/* @noflip */<br />
float: left;<br />
/* @noflip */<br />
text-align: left;<br />
/* @noflip */<br />
margin-right: 0.5em;<br />
width: 6em;<br />
}<br />
<br />
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript<br />
in [[MediaWiki:Common.js]] are styled here so they can be customised. */<br />
.collapseButton {<br />
/* @noflip */<br />
float: right;<br />
font-weight: normal;<br />
/* @noflip */<br />
margin-left: 0.5em;<br />
/* @noflip */<br />
text-align: right;<br />
width: auto;<br />
}<br />
/* In navboxes, the show/hide button balances the v·d·e links<br />
from [[Template:Navbar]], so they need to be the same width. */<br />
.navbox .collapseButton {<br />
width: 6em;<br />
}<br />
<br />
/* Styling for JQuery makeCollapsible, matching that of collapseButton */<br />
.mw-collapsible-toggle {<br />
font-weight: normal;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox .mw-collapsible-toggle {<br />
width: 6em;<br />
}<br />
/* Lists in data cells are always left-aligned */<br />
.wikitable td ul,<br />
.wikitable td ol,<br />
.wikitable td dl {<br />
/* @noflip */<br />
text-align: left;<br />
}<br />
/* ...unless they also use the hlist class */<br />
.wikitable.hlist td ul,<br />
.wikitable.hlist td ol,<br />
.wikitable.hlist td dl {<br />
text-align: inherit;<br />
}<br />
<br />
<br />
@media (max-width: 500px) {<br />
.sph-front-topnav table.wikitable > * > tr > td {<br />
display: block;<br />
}<br />
.sph-front-topnav table.wikitable > * > tr > th {<br />
display: none;<br />
}<br />
}</div>DaVincehttp://wiki.spheredev.org/index.php?title=Main_Page&diff=10173Main Page2018-08-10T14:25:08Z<p>DaVince: Updated layout into a horizontal one that's easier on the eyes</p>
<hr />
<div><br />
<div class='sph-front-topnav'><br />
<div class="header">[[File:Spherical logo white bg.png]]</div><br />
<div class="content"><br />
{| class="wikitable"<br />
! '''For newcomers'''<br />
! '''For game developers'''<br />
! '''Downloads & Projects'''<br />
! '''For wiki editors'''<br />
|-<br />
| [[Getting started]]<br>[[Git for the lazy]]<br>[[Tutorials]]<br />
| [[API:Functions]]<br>[[:Category:Sphere 2 API|Sphere 2 API articles]]<br>[[Legacy:Functions]]<br>[[:Category:Tutorials|Tutorials]]<br>[[:Category:Scripts|Scripts]]<br />
| [http://www.spheredev.org/dl Repository] (Games, resources)<br>[[:Category:Games]] (incomplete)<br />
| [[Help:Editing|Editing Help]]<br>[//meta.wikimedia.org/wiki/Help:Contents MW User's Guide]<br>[//www.mediawiki.org/wiki/Manual:FAQ MediaWiki FAQ]<br />
|}<br />
</div><br />
</div><br />
<br />
<br />
{{section|sph-section-green|Welcome|'''Spheriki''' is the definitive wiki of the '''Spherical community''', dedicated to the [[Sphere]] RPG engine. It includes info about [[:Category:Games|games]], [[:Category:Tutorials|docs]] and [[Spherical:Current events|news]].<br />
<br />
If you're new to Sphere, get started [[Getting started|here]]!<br />
<br />
Stuck? Want to show your project? Come join the community on the [http://forums.spheredev.org/ forums!]<br />
}}<br />
<br />
[[Special:Random|Display a random page]]<br />
<br />
__NOTOC__</div>DaVincehttp://wiki.spheredev.org/index.php?title=MediaWiki:Common.css&diff=10172MediaWiki:Common.css2018-08-10T14:04:13Z<p>DaVince: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
@import url("http://wiki.spheredev.org/extra/league-gothic/stylesheet.css");<br />
@import url("http://wiki.spheredev.org/extra/mgopen-modata/stylesheet.css");<br />
<br />
<br />
/* Mobile */<br />
@media (max-width: 768px) {<br />
.mw-body {<br />
margin-left: 0;<br />
}<br />
div#mw-panel {<br />
position: static;<br />
top: 0;<br />
width: 100%;<br />
}<br />
#p-search {<br />
float: right;<br />
}<br />
#right-navigation {<br />
float: none;<br />
}<br />
#left-navigation {<br />
display: block;<br />
float: none;<br />
margin-left: 0;<br />
margin-top: 3em;<br />
}<br />
#p-personal ul {<br />
padding-left: 0;<br />
}<br />
#p-search {<br />
float: none;<br />
position: absolute;<br />
top: 20px;<br />
}<br />
div#simpleSearch {<br />
width: 100%;<br />
}<br />
}<br />
<br />
<br />
<br />
<br />
/* Everything else */<br />
<br />
<br />
.sph-cf:before,<br />
.sph-cf:after {<br />
content: " "; /* 1 */<br />
display: table; /* 2 */<br />
}<br />
<br />
.sph-cf:after {<br />
clear: both;<br />
}<br />
<br />
/*<br />
* For IE 6/7 only<br />
* Include this rule to trigger hasLayout and contain floats.<br />
*/<br />
<br />
.sph-cf {<br />
*zoom: 1;<br />
}<br />
<br />
h1, #toc h2, .toc h2, h3, h4 {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
div#content h1, div#content h2, div#content #firstHeading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
h1 {font-weight:normal;}<br />
h2 {font-family:"League Gothic",LeagueGothic,sans-serif; font-weight:normal;}<br />
<br />
#mw-content-text h2 {font-size:200%;}<br />
#toc h2, .toc h2 {font-weight:bold; text-transform:uppercase; font-size:100%;}<br />
<br />
.editsection {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
.rellink, .dablink {font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em;}<br />
<br />
#mw-head, #mw-panel, #footer, input,<br />
.mw-search-result-heading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
<br />
.sph-section {<br />
border: 1px solid #e8e8f8;<br />
padding: 0;<br />
background-color: #f6f6ff;<br />
border-radius: 0 !important;<br />
}<br />
.sph-section .sph-section-title {<br />
padding: 7px;<br />
font-weight: bold;<br />
background-color: #e8e8f8;<br />
}<br />
.sph-section .sph-section-content {<br />
padding: 10px;<br />
}<br />
<br />
div#content .sph-section .sph-section-title {margin-top:0;}<br />
.sph-section h3.sph-section-title {font-weight:normal;}<br />
<br />
.sph-disambig {text-align:center;}<br />
.sph-disambig .sph-section-content {font-style:italic;}<br />
<br />
.sph-usage {background:#eee; border:1px solid #999; text-align:center; padding:8px 4px; font-size:150%;}<br />
.sph-section .sph-usage {background:none; border:0; padding:0; margin:1em auto;}<br />
<br />
.sph-latest {text-align:center;}<br />
<br />
.sph-aside {border:solid rgb(167,215,249); border-width:1px 0; margin:1em auto;}<br />
.sph-aside>.floatleft {margin-top:0.25em;}<br />
.sph-aside h4 {font-weight:normal; font-style:italic;}<br />
<br />
.sph-front-topnav {<br />
width: 100%;<br />
max-width: 1000px;<br />
margin: 0 auto;<br />
text-align: center;<br />
font-family: "MgOpen Modata", MgOpenModata, sans-serif;<br />
background-color: #f6f6ff;<br />
border: 1px solid #e8e8f8;<br />
}<br />
.sph-front-topnav .header {<br />
background-color: #e8e8f8;<br />
padding: 10px;<br />
}<br />
.sph-front-topnav .sph-front-topnav-list {<br />
margin: 8px auto;<br />
}<br />
<br />
.sph-directory, .sph-filepath {}<br />
.sph-directory .sph-filepath {}<br />
<br />
.nmbox {background:#F6F9ED; border:1px solid rgb(167,215,249); clear:both; font-size:85%; margin: 0.5em 0;}<br />
.nmbox .mbox-image {background:#EEF3E2; white-space: nowrap; padding: 4px 1em; border-right: 1px solid #aaaaaa;}<br />
.nmbox .mbox-text {padding:4px 1em;}<br />
.nmbox.sph-cf>.mbox-text {float:left;}<br />
.nmbox.sph-cf>.mbox-image {float:left;}<br />
<br />
.sph-notice {<br />
background:#F8EABA; border-bottom:1px solid #C0C090;<br />
margin:1em auto; padding:0.5em 0; width:80%;<br />
clear:both; text-align:center; font-weight:bold;<br />
}<br />
<br />
.mus {font-family:Symbola;}<br />
b.mus {line-height:1; font-weight:normal;}<br />
b b.mus, strong b.mus {font-weight:inherit;}<br />
<br />
.gist table.highlight {font-weight:normal;}<br />
<br />
/**** GESHI-RELATED STYLES ****/<br />
.mw-geshi.mw-code {overflow:auto; position:relative;}<br />
.mw-geshi a[href]>.kw10 {text-shadow:0 1px 0 #808080; text-shadow:0 1px 0 rgba(0,0,0,0.5);}<br />
.mw-geshi a[href]:hover>.kw10 {text-shadow:0 0 2px #806000; text-shadow:0 0 2px rgba(128,112,0,0.5);}<br />
.mw-geshi>.javascript:before {<br />
display:block; content:"JavaScript";<br />
font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-weight:bold; line-height:1;<br />
position:absolute; top:0; right:0;<br />
border:solid #aaa; border-width:0 0 1px 1px; border-radius: 0;<br />
padding:4px; opacity:0.50;<br />
}<br />
.mw-geshi:hover>.javascript:before {opacity:1.0;}<br />
<br />
/**** NAVBOX-RELATED STYLES ****/<br />
/* Style for horizontal lists (separator following item).<br />
Note: hlist formatting will break if the resulting HTML lacks a breakable character<br />
between list items. This happens when the following conditions are true:<br />
1) The list is made using wiki markup (where HTML is built by parser.php)<br />
2) HTMLTidy is disabled or unavailable (such as on Special: pages)<br />
In such cases, building lists with .hlist using HTML instead of wiki markup<br />
will work around this problem. See also [[Bugzilla:39617]].<br />
IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].<br />
Last updated: January 24, 2013<br />
@source mediawiki.org/wiki/Snippets/Horizontal_lists<br />
@maintainer: [[User:Edokter]]<br />
@revision: 3.1<br />
*/<br />
.skin-monobook .hlist dl,<br />
.skin-modern .hlist dl,<br />
.skin-vector .hlist dl {<br />
line-height: 1.5em;<br />
}<br />
.hlist dl,<br />
.hlist ol,<br />
.hlist ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
/* Display list items inline and make them nowrap */<br />
.hlist dd,<br />
.hlist dt,<br />
.hlist li {<br />
margin: 0;<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
/* Allow wrapping for list items (in tight spaces) */<br />
.hlist.hwrap dd,<br />
.hlist.hwrap dt,<br />
.hlist.hwrap li {<br />
white-space: normal;<br />
}<br />
/* Display nested lists inline and allow them to wrap */<br />
.hlist dl dl, .hlist dl ol, .hlist dl ul,<br />
.hlist ol dl, .hlist ol ol, .hlist ol ul,<br />
.hlist ul dl, .hlist ul ol, .hlist ul ul {<br />
display: inline;<br />
white-space: normal;<br />
}<br />
/* Generate interpuncts */<br />
.hlist dt:after {<br />
content: ":";<br />
}<br />
.hlist dd:after,<br />
.hlist li:after {<br />
content: " ·";<br />
font-weight: bold;<br />
}<br />
.hlist dd:last-child:after,<br />
.hlist dt:last-child:after,<br />
.hlist li:last-child:after {<br />
content: none;<br />
}<br />
/* For IE8 */<br />
.hlist dd.hlist-last-child:after,<br />
.hlist dt.hlist-last-child:after,<br />
.hlist li.hlist-last-child:after {<br />
content: none;<br />
}<br />
/* Add parentheses around nested lists */<br />
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,<br />
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,<br />
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {<br />
content: "(";<br />
font-weight: normal;<br />
}<br />
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,<br />
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,<br />
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* For IE8 */<br />
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,<br />
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,<br />
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* Put numbers in front of ordered list items */<br />
.hlist.hnum ol {<br />
counter-reset: list-item;<br />
}<br />
.hlist.hnum ol > li {<br />
counter-increment: list-item;<br />
}<br />
.hlist.hnum ol > li:before {<br />
content: counter(list-item) " ";<br />
}<br />
.hlist.hnum dd ol > li:first-child:before,<br />
.hlist.hnum dt ol > li:first-child:before,<br />
.hlist.hnum li ol > li:first-child:before {<br />
content: "(" counter(list-item) " ";<br />
}<br />
/* Default style for navigation boxes */<br />
.navbox { /* Navbox container style */<br />
border: 1px solid #aaa;<br />
width: 100%;<br />
margin: auto;<br />
clear: both;<br />
font-size: 88%;<br />
text-align: center;<br />
padding: 1px;<br />
}<br />
.navbox-inner,<br />
.navbox-subgroup {<br />
width: 100%;<br />
}<br />
.navbox-group,<br />
.navbox-title,<br />
.navbox-abovebelow {<br />
padding: 0.25em 1em; /* Title, group and above/below styles */<br />
line-height: 1.5em;<br />
text-align: center;<br />
}<br />
th.navbox-group { /* Group style */<br />
white-space: nowrap;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox,<br />
.navbox-subgroup {<br />
background: #fdfdfd; /* Background color */<br />
}<br />
.navbox-list {<br />
line-height: 1.8em;<br />
border-color: #fdfdfd; /* Must match background color */<br />
}<br />
.navbox th,<br />
.navbox-title {<br />
background: #ccccff; /* Level 1 color */<br />
}<br />
.navbox-abovebelow,<br />
th.navbox-group,<br />
.navbox-subgroup .navbox-title {<br />
background: #ddddff; /* Level 2 color */<br />
}<br />
.navbox-subgroup .navbox-group,<br />
.navbox-subgroup .navbox-abovebelow {<br />
background: #e6e6ff; /* Level 3 color */<br />
}<br />
.navbox-even {<br />
background: #f7f7f7; /* Even row striping */<br />
}<br />
.navbox-odd {<br />
background: transparent; /* Odd row striping */<br />
}<br />
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */<br />
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */<br />
}<br />
.navbox .hlist td dl,<br />
.navbox .hlist td ol,<br />
.navbox .hlist td ul,<br />
.navbox td.hlist dl,<br />
.navbox td.hlist ol,<br />
.navbox td.hlist ul {<br />
padding: 0.125em 0; /* Adjust hlist padding in navboxes */<br />
}<br />
ol + table.navbox,<br />
ul + table.navbox {<br />
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */<br />
}<br />
<br />
/* Default styling for Navbar template */<br />
.navbar {<br />
display: inline;<br />
font-size: 88%;<br />
font-weight: normal;<br />
}<br />
.navbar ul {<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
.navbar li {<br />
word-spacing: -0.125em;<br />
}<br />
.navbar.mini li span {<br />
font-variant: small-caps;<br />
}<br />
/* Navbar styling when nested in infobox and navbox */<br />
.infobox .navbar {<br />
font-size: 100%;<br />
}<br />
.navbox .navbar {<br />
display: block;<br />
font-size: 100%;<br />
}<br />
.navbox-title .navbar {<br />
/* @noflip */<br />
float: left;<br />
/* @noflip */<br />
text-align: left;<br />
/* @noflip */<br />
margin-right: 0.5em;<br />
width: 6em;<br />
}<br />
<br />
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript<br />
in [[MediaWiki:Common.js]] are styled here so they can be customised. */<br />
.collapseButton {<br />
/* @noflip */<br />
float: right;<br />
font-weight: normal;<br />
/* @noflip */<br />
margin-left: 0.5em;<br />
/* @noflip */<br />
text-align: right;<br />
width: auto;<br />
}<br />
/* In navboxes, the show/hide button balances the v·d·e links<br />
from [[Template:Navbar]], so they need to be the same width. */<br />
.navbox .collapseButton {<br />
width: 6em;<br />
}<br />
<br />
/* Styling for JQuery makeCollapsible, matching that of collapseButton */<br />
.mw-collapsible-toggle {<br />
font-weight: normal;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox .mw-collapsible-toggle {<br />
width: 6em;<br />
}<br />
/* Lists in data cells are always left-aligned */<br />
.wikitable td ul,<br />
.wikitable td ol,<br />
.wikitable td dl {<br />
/* @noflip */<br />
text-align: left;<br />
}<br />
/* ...unless they also use the hlist class */<br />
.wikitable.hlist td ul,<br />
.wikitable.hlist td ol,<br />
.wikitable.hlist td dl {<br />
text-align: inherit;<br />
}</div>DaVincehttp://wiki.spheredev.org/index.php?title=MediaWiki:Common.css&diff=10171MediaWiki:Common.css2018-08-10T14:03:42Z<p>DaVince: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
@import url("http://wiki.spheredev.org/extra/league-gothic/stylesheet.css");<br />
@import url("http://wiki.spheredev.org/extra/mgopen-modata/stylesheet.css");<br />
<br />
<br />
/* Mobile */<br />
@media (max-width: 768px) {<br />
.mw-body {<br />
margin-left: 0;<br />
}<br />
div#mw-panel {<br />
position: static;<br />
top: 0;<br />
width: 100%;<br />
}<br />
#p-search {<br />
float: right;<br />
}<br />
#right-navigation {<br />
float: none;<br />
}<br />
#left-navigation {<br />
display: block;<br />
float: none;<br />
margin-left: 0;<br />
margin-top: 3em;<br />
}<br />
#p-personal ul {<br />
padding-left: 0;<br />
}<br />
#p-search {<br />
float: none;<br />
position: absolute;<br />
top: 20px;<br />
}<br />
div#simpleSearch {<br />
width: 100%;<br />
}<br />
}<br />
<br />
<br />
<br />
<br />
/* Everything else */<br />
<br />
<br />
.sph-cf:before,<br />
.sph-cf:after {<br />
content: " "; /* 1 */<br />
display: table; /* 2 */<br />
}<br />
<br />
.sph-cf:after {<br />
clear: both;<br />
}<br />
<br />
/*<br />
* For IE 6/7 only<br />
* Include this rule to trigger hasLayout and contain floats.<br />
*/<br />
<br />
.sph-cf {<br />
*zoom: 1;<br />
}<br />
<br />
h1, #toc h2, .toc h2, h3, h4 {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
div#content h1, div#content h2, div#content #firstHeading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
h1 {font-weight:normal;}<br />
h2 {font-family:"League Gothic",LeagueGothic,sans-serif; font-weight:normal;}<br />
<br />
#mw-content-text h2 {font-size:200%;}<br />
#toc h2, .toc h2 {font-weight:bold; text-transform:uppercase; font-size:100%;}<br />
<br />
.editsection {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
.rellink, .dablink {font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em;}<br />
<br />
#mw-head, #mw-panel, #footer, input,<br />
.mw-search-result-heading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
<br />
.sph-section {<br />
border: 1px solid #e8e8f8;<br />
padding: 0;<br />
background-color: #f6f6ff;<br />
border-radius: 0;<br />
}<br />
.sph-section .sph-section-title {<br />
padding: 7px;<br />
font-weight: bold;<br />
background-color: #e8e8f8;<br />
}<br />
.sph-section .sph-section-content {<br />
padding: 10px;<br />
}<br />
<br />
div#content .sph-section .sph-section-title {margin-top:0;}<br />
.sph-section h3.sph-section-title {font-weight:normal;}<br />
<br />
.sph-disambig {text-align:center;}<br />
.sph-disambig .sph-section-content {font-style:italic;}<br />
<br />
.sph-usage {background:#eee; border:1px solid #999; text-align:center; padding:8px 4px; font-size:150%;}<br />
.sph-section .sph-usage {background:none; border:0; padding:0; margin:1em auto;}<br />
<br />
.sph-latest {text-align:center;}<br />
<br />
.sph-aside {border:solid rgb(167,215,249); border-width:1px 0; margin:1em auto;}<br />
.sph-aside>.floatleft {margin-top:0.25em;}<br />
.sph-aside h4 {font-weight:normal; font-style:italic;}<br />
<br />
.sph-front-topnav {<br />
width: 100%;<br />
max-width: 1000px;<br />
margin: 0 auto;<br />
text-align: center;<br />
font-family: "MgOpen Modata", MgOpenModata, sans-serif;<br />
background-color: #f6f6ff;<br />
border: 1px solid #e8e8f8;<br />
}<br />
.sph-front-topnav .header {<br />
background-color: #e8e8f8;<br />
padding: 10px;<br />
}<br />
.sph-front-topnav .sph-front-topnav-list {<br />
margin: 8px auto;<br />
}<br />
<br />
.sph-directory, .sph-filepath {}<br />
.sph-directory .sph-filepath {}<br />
<br />
.nmbox {background:#F6F9ED; border:1px solid rgb(167,215,249); clear:both; font-size:85%; margin: 0.5em 0;}<br />
.nmbox .mbox-image {background:#EEF3E2; white-space: nowrap; padding: 4px 1em; border-right: 1px solid #aaaaaa;}<br />
.nmbox .mbox-text {padding:4px 1em;}<br />
.nmbox.sph-cf>.mbox-text {float:left;}<br />
.nmbox.sph-cf>.mbox-image {float:left;}<br />
<br />
.sph-notice {<br />
background:#F8EABA; border-bottom:1px solid #C0C090;<br />
margin:1em auto; padding:0.5em 0; width:80%;<br />
clear:both; text-align:center; font-weight:bold;<br />
}<br />
<br />
.mus {font-family:Symbola;}<br />
b.mus {line-height:1; font-weight:normal;}<br />
b b.mus, strong b.mus {font-weight:inherit;}<br />
<br />
.gist table.highlight {font-weight:normal;}<br />
<br />
/**** GESHI-RELATED STYLES ****/<br />
.mw-geshi.mw-code {overflow:auto; position:relative;}<br />
.mw-geshi a[href]>.kw10 {text-shadow:0 1px 0 #808080; text-shadow:0 1px 0 rgba(0,0,0,0.5);}<br />
.mw-geshi a[href]:hover>.kw10 {text-shadow:0 0 2px #806000; text-shadow:0 0 2px rgba(128,112,0,0.5);}<br />
.mw-geshi>.javascript:before {<br />
display:block; content:"JavaScript";<br />
font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-weight:bold; line-height:1;<br />
position:absolute; top:0; right:0;<br />
border:solid #aaa; border-width:0 0 1px 1px; border-radius: 0;<br />
padding:4px; opacity:0.50;<br />
}<br />
.mw-geshi:hover>.javascript:before {opacity:1.0;}<br />
<br />
/**** NAVBOX-RELATED STYLES ****/<br />
/* Style for horizontal lists (separator following item).<br />
Note: hlist formatting will break if the resulting HTML lacks a breakable character<br />
between list items. This happens when the following conditions are true:<br />
1) The list is made using wiki markup (where HTML is built by parser.php)<br />
2) HTMLTidy is disabled or unavailable (such as on Special: pages)<br />
In such cases, building lists with .hlist using HTML instead of wiki markup<br />
will work around this problem. See also [[Bugzilla:39617]].<br />
IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].<br />
Last updated: January 24, 2013<br />
@source mediawiki.org/wiki/Snippets/Horizontal_lists<br />
@maintainer: [[User:Edokter]]<br />
@revision: 3.1<br />
*/<br />
.skin-monobook .hlist dl,<br />
.skin-modern .hlist dl,<br />
.skin-vector .hlist dl {<br />
line-height: 1.5em;<br />
}<br />
.hlist dl,<br />
.hlist ol,<br />
.hlist ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
/* Display list items inline and make them nowrap */<br />
.hlist dd,<br />
.hlist dt,<br />
.hlist li {<br />
margin: 0;<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
/* Allow wrapping for list items (in tight spaces) */<br />
.hlist.hwrap dd,<br />
.hlist.hwrap dt,<br />
.hlist.hwrap li {<br />
white-space: normal;<br />
}<br />
/* Display nested lists inline and allow them to wrap */<br />
.hlist dl dl, .hlist dl ol, .hlist dl ul,<br />
.hlist ol dl, .hlist ol ol, .hlist ol ul,<br />
.hlist ul dl, .hlist ul ol, .hlist ul ul {<br />
display: inline;<br />
white-space: normal;<br />
}<br />
/* Generate interpuncts */<br />
.hlist dt:after {<br />
content: ":";<br />
}<br />
.hlist dd:after,<br />
.hlist li:after {<br />
content: " ·";<br />
font-weight: bold;<br />
}<br />
.hlist dd:last-child:after,<br />
.hlist dt:last-child:after,<br />
.hlist li:last-child:after {<br />
content: none;<br />
}<br />
/* For IE8 */<br />
.hlist dd.hlist-last-child:after,<br />
.hlist dt.hlist-last-child:after,<br />
.hlist li.hlist-last-child:after {<br />
content: none;<br />
}<br />
/* Add parentheses around nested lists */<br />
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,<br />
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,<br />
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {<br />
content: "(";<br />
font-weight: normal;<br />
}<br />
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,<br />
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,<br />
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* For IE8 */<br />
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,<br />
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,<br />
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* Put numbers in front of ordered list items */<br />
.hlist.hnum ol {<br />
counter-reset: list-item;<br />
}<br />
.hlist.hnum ol > li {<br />
counter-increment: list-item;<br />
}<br />
.hlist.hnum ol > li:before {<br />
content: counter(list-item) " ";<br />
}<br />
.hlist.hnum dd ol > li:first-child:before,<br />
.hlist.hnum dt ol > li:first-child:before,<br />
.hlist.hnum li ol > li:first-child:before {<br />
content: "(" counter(list-item) " ";<br />
}<br />
/* Default style for navigation boxes */<br />
.navbox { /* Navbox container style */<br />
border: 1px solid #aaa;<br />
width: 100%;<br />
margin: auto;<br />
clear: both;<br />
font-size: 88%;<br />
text-align: center;<br />
padding: 1px;<br />
}<br />
.navbox-inner,<br />
.navbox-subgroup {<br />
width: 100%;<br />
}<br />
.navbox-group,<br />
.navbox-title,<br />
.navbox-abovebelow {<br />
padding: 0.25em 1em; /* Title, group and above/below styles */<br />
line-height: 1.5em;<br />
text-align: center;<br />
}<br />
th.navbox-group { /* Group style */<br />
white-space: nowrap;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox,<br />
.navbox-subgroup {<br />
background: #fdfdfd; /* Background color */<br />
}<br />
.navbox-list {<br />
line-height: 1.8em;<br />
border-color: #fdfdfd; /* Must match background color */<br />
}<br />
.navbox th,<br />
.navbox-title {<br />
background: #ccccff; /* Level 1 color */<br />
}<br />
.navbox-abovebelow,<br />
th.navbox-group,<br />
.navbox-subgroup .navbox-title {<br />
background: #ddddff; /* Level 2 color */<br />
}<br />
.navbox-subgroup .navbox-group,<br />
.navbox-subgroup .navbox-abovebelow {<br />
background: #e6e6ff; /* Level 3 color */<br />
}<br />
.navbox-even {<br />
background: #f7f7f7; /* Even row striping */<br />
}<br />
.navbox-odd {<br />
background: transparent; /* Odd row striping */<br />
}<br />
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */<br />
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */<br />
}<br />
.navbox .hlist td dl,<br />
.navbox .hlist td ol,<br />
.navbox .hlist td ul,<br />
.navbox td.hlist dl,<br />
.navbox td.hlist ol,<br />
.navbox td.hlist ul {<br />
padding: 0.125em 0; /* Adjust hlist padding in navboxes */<br />
}<br />
ol + table.navbox,<br />
ul + table.navbox {<br />
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */<br />
}<br />
<br />
/* Default styling for Navbar template */<br />
.navbar {<br />
display: inline;<br />
font-size: 88%;<br />
font-weight: normal;<br />
}<br />
.navbar ul {<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
.navbar li {<br />
word-spacing: -0.125em;<br />
}<br />
.navbar.mini li span {<br />
font-variant: small-caps;<br />
}<br />
/* Navbar styling when nested in infobox and navbox */<br />
.infobox .navbar {<br />
font-size: 100%;<br />
}<br />
.navbox .navbar {<br />
display: block;<br />
font-size: 100%;<br />
}<br />
.navbox-title .navbar {<br />
/* @noflip */<br />
float: left;<br />
/* @noflip */<br />
text-align: left;<br />
/* @noflip */<br />
margin-right: 0.5em;<br />
width: 6em;<br />
}<br />
<br />
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript<br />
in [[MediaWiki:Common.js]] are styled here so they can be customised. */<br />
.collapseButton {<br />
/* @noflip */<br />
float: right;<br />
font-weight: normal;<br />
/* @noflip */<br />
margin-left: 0.5em;<br />
/* @noflip */<br />
text-align: right;<br />
width: auto;<br />
}<br />
/* In navboxes, the show/hide button balances the v·d·e links<br />
from [[Template:Navbar]], so they need to be the same width. */<br />
.navbox .collapseButton {<br />
width: 6em;<br />
}<br />
<br />
/* Styling for JQuery makeCollapsible, matching that of collapseButton */<br />
.mw-collapsible-toggle {<br />
font-weight: normal;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox .mw-collapsible-toggle {<br />
width: 6em;<br />
}<br />
/* Lists in data cells are always left-aligned */<br />
.wikitable td ul,<br />
.wikitable td ol,<br />
.wikitable td dl {<br />
/* @noflip */<br />
text-align: left;<br />
}<br />
/* ...unless they also use the hlist class */<br />
.wikitable.hlist td ul,<br />
.wikitable.hlist td ol,<br />
.wikitable.hlist td dl {<br />
text-align: inherit;<br />
}</div>DaVincehttp://wiki.spheredev.org/index.php?title=MediaWiki:Common.css&diff=10170MediaWiki:Common.css2018-08-10T14:00:43Z<p>DaVince: Updated specially themed section styles to match front page style. Removed specifically colored styles for now (blue/green/yellow et al)</p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
@import url("http://wiki.spheredev.org/extra/league-gothic/stylesheet.css");<br />
@import url("http://wiki.spheredev.org/extra/mgopen-modata/stylesheet.css");<br />
<br />
<br />
/* Mobile */<br />
@media (max-width: 768px) {<br />
.mw-body {<br />
margin-left: 0;<br />
}<br />
div#mw-panel {<br />
position: static;<br />
top: 0;<br />
width: 100%;<br />
}<br />
#p-search {<br />
float: right;<br />
}<br />
#right-navigation {<br />
float: none;<br />
}<br />
#left-navigation {<br />
display: block;<br />
float: none;<br />
margin-left: 0;<br />
margin-top: 3em;<br />
}<br />
#p-personal ul {<br />
padding-left: 0;<br />
}<br />
#p-search {<br />
float: none;<br />
position: absolute;<br />
top: 20px;<br />
}<br />
div#simpleSearch {<br />
width: 100%;<br />
}<br />
}<br />
<br />
<br />
<br />
<br />
/* Everything else */<br />
<br />
<br />
.sph-cf:before,<br />
.sph-cf:after {<br />
content: " "; /* 1 */<br />
display: table; /* 2 */<br />
}<br />
<br />
.sph-cf:after {<br />
clear: both;<br />
}<br />
<br />
/*<br />
* For IE 6/7 only<br />
* Include this rule to trigger hasLayout and contain floats.<br />
*/<br />
<br />
.sph-cf {<br />
*zoom: 1;<br />
}<br />
<br />
h1, #toc h2, .toc h2, h3, h4 {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
div#content h1, div#content h2, div#content #firstHeading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
h1 {font-weight:normal;}<br />
h2 {font-family:"League Gothic",LeagueGothic,sans-serif; font-weight:normal;}<br />
<br />
#mw-content-text h2 {font-size:200%;}<br />
#toc h2, .toc h2 {font-weight:bold; text-transform:uppercase; font-size:100%;}<br />
<br />
.editsection {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
.rellink, .dablink {font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em;}<br />
<br />
#mw-head, #mw-panel, #footer, input,<br />
.mw-search-result-heading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
<br />
.sph-section {<br />
border: 1px solid #e8e8f8;<br />
padding: 0;<br />
background-color: #f6f6ff;<br />
}<br />
.sph-section .sph-section-title {<br />
padding: 10px;<br />
font-weight: bold;<br />
background-color: #e8e8f8;<br />
}<br />
div#content .sph-section .sph-section-title {margin-top:0;}<br />
.sph-section h3.sph-section-title {font-weight:normal;}<br />
<br />
.sph-disambig {text-align:center;}<br />
.sph-disambig .sph-section-content {font-style:italic;}<br />
<br />
.sph-usage {background:#eee; border:1px solid #999; text-align:center; padding:8px 4px; font-size:150%;}<br />
.sph-section .sph-usage {background:none; border:0; padding:0; margin:1em auto;}<br />
<br />
.sph-latest {text-align:center;}<br />
<br />
.sph-aside {border:solid rgb(167,215,249); border-width:1px 0; margin:1em auto;}<br />
.sph-aside>.floatleft {margin-top:0.25em;}<br />
.sph-aside h4 {font-weight:normal; font-style:italic;}<br />
<br />
.sph-front-topnav {<br />
width: 100%;<br />
max-width: 1000px;<br />
margin: 0 auto;<br />
text-align: center;<br />
font-family: "MgOpen Modata", MgOpenModata, sans-serif;<br />
background-color: #f6f6ff;<br />
border: 1px solid #e8e8f8;<br />
}<br />
.sph-front-topnav .header {<br />
background-color: #e8e8f8;<br />
padding: 10px;<br />
}<br />
.sph-front-topnav .sph-front-topnav-list {<br />
margin: 8px auto;<br />
}<br />
<br />
.sph-directory, .sph-filepath {}<br />
.sph-directory .sph-filepath {}<br />
<br />
.nmbox {background:#F6F9ED; border:1px solid rgb(167,215,249); clear:both; font-size:85%; margin: 0.5em 0;}<br />
.nmbox .mbox-image {background:#EEF3E2; white-space: nowrap; padding: 4px 1em; border-right: 1px solid #aaaaaa;}<br />
.nmbox .mbox-text {padding:4px 1em;}<br />
.nmbox.sph-cf>.mbox-text {float:left;}<br />
.nmbox.sph-cf>.mbox-image {float:left;}<br />
<br />
.sph-notice {<br />
background:#F8EABA; border-bottom:1px solid #C0C090;<br />
margin:1em auto; padding:0.5em 0; width:80%;<br />
clear:both; text-align:center; font-weight:bold;<br />
}<br />
<br />
.mus {font-family:Symbola;}<br />
b.mus {line-height:1; font-weight:normal;}<br />
b b.mus, strong b.mus {font-weight:inherit;}<br />
<br />
.gist table.highlight {font-weight:normal;}<br />
<br />
/**** GESHI-RELATED STYLES ****/<br />
.mw-geshi.mw-code {overflow:auto; position:relative;}<br />
.mw-geshi a[href]>.kw10 {text-shadow:0 1px 0 #808080; text-shadow:0 1px 0 rgba(0,0,0,0.5);}<br />
.mw-geshi a[href]:hover>.kw10 {text-shadow:0 0 2px #806000; text-shadow:0 0 2px rgba(128,112,0,0.5);}<br />
.mw-geshi>.javascript:before {<br />
display:block; content:"JavaScript";<br />
font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-weight:bold; line-height:1;<br />
position:absolute; top:0; right:0;<br />
border:solid #aaa; border-width:0 0 1px 1px; border-radius:0 0 0 8px;<br />
padding:4px; opacity:0.50;<br />
}<br />
.mw-geshi:hover>.javascript:before {opacity:1.0;}<br />
<br />
/**** NAVBOX-RELATED STYLES ****/<br />
/* Style for horizontal lists (separator following item).<br />
Note: hlist formatting will break if the resulting HTML lacks a breakable character<br />
between list items. This happens when the following conditions are true:<br />
1) The list is made using wiki markup (where HTML is built by parser.php)<br />
2) HTMLTidy is disabled or unavailable (such as on Special: pages)<br />
In such cases, building lists with .hlist using HTML instead of wiki markup<br />
will work around this problem. See also [[Bugzilla:39617]].<br />
IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].<br />
Last updated: January 24, 2013<br />
@source mediawiki.org/wiki/Snippets/Horizontal_lists<br />
@maintainer: [[User:Edokter]]<br />
@revision: 3.1<br />
*/<br />
.skin-monobook .hlist dl,<br />
.skin-modern .hlist dl,<br />
.skin-vector .hlist dl {<br />
line-height: 1.5em;<br />
}<br />
.hlist dl,<br />
.hlist ol,<br />
.hlist ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
/* Display list items inline and make them nowrap */<br />
.hlist dd,<br />
.hlist dt,<br />
.hlist li {<br />
margin: 0;<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
/* Allow wrapping for list items (in tight spaces) */<br />
.hlist.hwrap dd,<br />
.hlist.hwrap dt,<br />
.hlist.hwrap li {<br />
white-space: normal;<br />
}<br />
/* Display nested lists inline and allow them to wrap */<br />
.hlist dl dl, .hlist dl ol, .hlist dl ul,<br />
.hlist ol dl, .hlist ol ol, .hlist ol ul,<br />
.hlist ul dl, .hlist ul ol, .hlist ul ul {<br />
display: inline;<br />
white-space: normal;<br />
}<br />
/* Generate interpuncts */<br />
.hlist dt:after {<br />
content: ":";<br />
}<br />
.hlist dd:after,<br />
.hlist li:after {<br />
content: " ·";<br />
font-weight: bold;<br />
}<br />
.hlist dd:last-child:after,<br />
.hlist dt:last-child:after,<br />
.hlist li:last-child:after {<br />
content: none;<br />
}<br />
/* For IE8 */<br />
.hlist dd.hlist-last-child:after,<br />
.hlist dt.hlist-last-child:after,<br />
.hlist li.hlist-last-child:after {<br />
content: none;<br />
}<br />
/* Add parentheses around nested lists */<br />
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,<br />
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,<br />
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {<br />
content: "(";<br />
font-weight: normal;<br />
}<br />
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,<br />
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,<br />
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* For IE8 */<br />
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,<br />
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,<br />
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* Put numbers in front of ordered list items */<br />
.hlist.hnum ol {<br />
counter-reset: list-item;<br />
}<br />
.hlist.hnum ol > li {<br />
counter-increment: list-item;<br />
}<br />
.hlist.hnum ol > li:before {<br />
content: counter(list-item) " ";<br />
}<br />
.hlist.hnum dd ol > li:first-child:before,<br />
.hlist.hnum dt ol > li:first-child:before,<br />
.hlist.hnum li ol > li:first-child:before {<br />
content: "(" counter(list-item) " ";<br />
}<br />
/* Default style for navigation boxes */<br />
.navbox { /* Navbox container style */<br />
border: 1px solid #aaa;<br />
width: 100%;<br />
margin: auto;<br />
clear: both;<br />
font-size: 88%;<br />
text-align: center;<br />
padding: 1px;<br />
}<br />
.navbox-inner,<br />
.navbox-subgroup {<br />
width: 100%;<br />
}<br />
.navbox-group,<br />
.navbox-title,<br />
.navbox-abovebelow {<br />
padding: 0.25em 1em; /* Title, group and above/below styles */<br />
line-height: 1.5em;<br />
text-align: center;<br />
}<br />
th.navbox-group { /* Group style */<br />
white-space: nowrap;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox,<br />
.navbox-subgroup {<br />
background: #fdfdfd; /* Background color */<br />
}<br />
.navbox-list {<br />
line-height: 1.8em;<br />
border-color: #fdfdfd; /* Must match background color */<br />
}<br />
.navbox th,<br />
.navbox-title {<br />
background: #ccccff; /* Level 1 color */<br />
}<br />
.navbox-abovebelow,<br />
th.navbox-group,<br />
.navbox-subgroup .navbox-title {<br />
background: #ddddff; /* Level 2 color */<br />
}<br />
.navbox-subgroup .navbox-group,<br />
.navbox-subgroup .navbox-abovebelow {<br />
background: #e6e6ff; /* Level 3 color */<br />
}<br />
.navbox-even {<br />
background: #f7f7f7; /* Even row striping */<br />
}<br />
.navbox-odd {<br />
background: transparent; /* Odd row striping */<br />
}<br />
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */<br />
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */<br />
}<br />
.navbox .hlist td dl,<br />
.navbox .hlist td ol,<br />
.navbox .hlist td ul,<br />
.navbox td.hlist dl,<br />
.navbox td.hlist ol,<br />
.navbox td.hlist ul {<br />
padding: 0.125em 0; /* Adjust hlist padding in navboxes */<br />
}<br />
ol + table.navbox,<br />
ul + table.navbox {<br />
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */<br />
}<br />
<br />
/* Default styling for Navbar template */<br />
.navbar {<br />
display: inline;<br />
font-size: 88%;<br />
font-weight: normal;<br />
}<br />
.navbar ul {<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
.navbar li {<br />
word-spacing: -0.125em;<br />
}<br />
.navbar.mini li span {<br />
font-variant: small-caps;<br />
}<br />
/* Navbar styling when nested in infobox and navbox */<br />
.infobox .navbar {<br />
font-size: 100%;<br />
}<br />
.navbox .navbar {<br />
display: block;<br />
font-size: 100%;<br />
}<br />
.navbox-title .navbar {<br />
/* @noflip */<br />
float: left;<br />
/* @noflip */<br />
text-align: left;<br />
/* @noflip */<br />
margin-right: 0.5em;<br />
width: 6em;<br />
}<br />
<br />
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript<br />
in [[MediaWiki:Common.js]] are styled here so they can be customised. */<br />
.collapseButton {<br />
/* @noflip */<br />
float: right;<br />
font-weight: normal;<br />
/* @noflip */<br />
margin-left: 0.5em;<br />
/* @noflip */<br />
text-align: right;<br />
width: auto;<br />
}<br />
/* In navboxes, the show/hide button balances the v·d·e links<br />
from [[Template:Navbar]], so they need to be the same width. */<br />
.navbox .collapseButton {<br />
width: 6em;<br />
}<br />
<br />
/* Styling for JQuery makeCollapsible, matching that of collapseButton */<br />
.mw-collapsible-toggle {<br />
font-weight: normal;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox .mw-collapsible-toggle {<br />
width: 6em;<br />
}<br />
/* Lists in data cells are always left-aligned */<br />
.wikitable td ul,<br />
.wikitable td ol,<br />
.wikitable td dl {<br />
/* @noflip */<br />
text-align: left;<br />
}<br />
/* ...unless they also use the hlist class */<br />
.wikitable.hlist td ul,<br />
.wikitable.hlist td ol,<br />
.wikitable.hlist td dl {<br />
text-align: inherit;<br />
}</div>DaVincehttp://wiki.spheredev.org/index.php?title=MediaWiki:Common.css&diff=10169MediaWiki:Common.css2018-08-10T13:54:11Z<p>DaVince: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
@import url("http://wiki.spheredev.org/extra/league-gothic/stylesheet.css");<br />
@import url("http://wiki.spheredev.org/extra/mgopen-modata/stylesheet.css");<br />
<br />
<br />
/* Mobile */<br />
@media (max-width: 768px) {<br />
.mw-body {<br />
margin-left: 0;<br />
}<br />
div#mw-panel {<br />
position: static;<br />
top: 0;<br />
width: 100%;<br />
}<br />
#p-search {<br />
float: right;<br />
}<br />
#right-navigation {<br />
float: none;<br />
}<br />
#left-navigation {<br />
display: block;<br />
float: none;<br />
margin-left: 0;<br />
margin-top: 3em;<br />
}<br />
#p-personal ul {<br />
padding-left: 0;<br />
}<br />
#p-search {<br />
float: none;<br />
position: absolute;<br />
top: 20px;<br />
}<br />
div#simpleSearch {<br />
width: 100%;<br />
}<br />
}<br />
<br />
<br />
<br />
<br />
/* Everything else */<br />
<br />
<br />
.sph-cf:before,<br />
.sph-cf:after {<br />
content: " "; /* 1 */<br />
display: table; /* 2 */<br />
}<br />
<br />
.sph-cf:after {<br />
clear: both;<br />
}<br />
<br />
/*<br />
* For IE 6/7 only<br />
* Include this rule to trigger hasLayout and contain floats.<br />
*/<br />
<br />
.sph-cf {<br />
*zoom: 1;<br />
}<br />
<br />
h1, #toc h2, .toc h2, h3, h4 {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
div#content h1, div#content h2, div#content #firstHeading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
h1 {font-weight:normal;}<br />
h2 {font-family:"League Gothic",LeagueGothic,sans-serif; font-weight:normal;}<br />
<br />
#mw-content-text h2 {font-size:200%;}<br />
#toc h2, .toc h2 {font-weight:bold; text-transform:uppercase; font-size:100%;}<br />
<br />
.editsection {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
.rellink, .dablink {font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em;}<br />
<br />
#mw-head, #mw-panel, #footer, input,<br />
.mw-search-result-heading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
<br />
.sph-section {border-style:solid; border-width:1px; padding:4px; background-color:#eee; border-color:#999;}<br />
.sph-section .sph-section-title {padding:5px; font-weight:bold; background-color:#999; color:#fff;}<br />
div#content .sph-section .sph-section-title {margin-top:0;}<br />
.sph-section h3.sph-section-title {font-weight:normal;}<br />
.sph-section .sph-section-content {}<br />
<br />
.sph-section-green {background-color:#efe; border-color:#9c9;}<br />
.sph-section-green .sph-section-title {background-color:#393; color:#fff;}<br />
<br />
.sph-section-red {background-color:#fee; border-color:#fcc;}<br />
.sph-section-red .sph-section-title {background-color:#c00; color:#fff;}<br />
<br />
.sph-section-blue {background-color:#eef; border-color:#abd;}<br />
.sph-section-blue .sph-section-title {background-color:#039; color:#fff;}<br />
<br />
.sph-section-yellow {background-color:#ffe; border-color:#dba;}<br />
.sph-section-yellow .sph-section-title {background-color:#cc3; color:#fff;}<br />
<br />
.sph-disambig {text-align:center;}<br />
.sph-disambig .sph-section-content {font-style:italic;}<br />
<br />
.sph-usage {background:#eee; border:1px solid #999; text-align:center; padding:8px 4px; font-size:150%; border-radius:8px;}<br />
.sph-section .sph-usage {background:none; border:0; padding:0; margin:1em auto;}<br />
<br />
.sph-latest {text-align:center;}<br />
<br />
.sph-aside {border:solid rgb(167,215,249); border-width:1px 0; margin:1em auto;}<br />
.sph-aside>.floatleft {margin-top:0.25em;}<br />
.sph-aside h4 {font-weight:normal; font-style:italic;}<br />
<br />
.sph-front-topnav {<br />
width: 100%;<br />
max-width: 1000px;<br />
margin: 0 auto;<br />
text-align: center;<br />
font-family: "MgOpen Modata", MgOpenModata, sans-serif;<br />
font-size: 120%;<br />
background-color: #f6f6ff;<br />
border: 1px solid #e8e8f8;<br />
}<br />
.sph-front-topnav .header {<br />
background-color: #e8e8f8;<br />
padding: 10px;<br />
}<br />
.sph-front-topnav .sph-front-topnav-list {<br />
margin: 8px auto;<br />
}<br />
<br />
.sph-directory, .sph-filepath {}<br />
.sph-directory .sph-filepath {}<br />
<br />
.nmbox {background:#F6F9ED; border:1px solid rgb(167,215,249); clear:both; font-size:85%; margin: 0.5em 0;}<br />
.nmbox .mbox-image {background:#EEF3E2; white-space: nowrap; padding: 4px 1em; border-right: 1px solid #aaaaaa;}<br />
.nmbox .mbox-text {padding:4px 1em;}<br />
.nmbox.sph-cf>.mbox-text {float:left;}<br />
.nmbox.sph-cf>.mbox-image {float:left;}<br />
<br />
.sph-notice {<br />
background:#F8EABA; border-bottom:1px solid #C0C090;<br />
margin:1em auto; padding:0.5em 0; width:80%;<br />
clear:both; text-align:center; font-weight:bold;<br />
}<br />
<br />
.mus {font-family:Symbola;}<br />
b.mus {line-height:1; font-weight:normal;}<br />
b b.mus, strong b.mus {font-weight:inherit;}<br />
<br />
.gist table.highlight {font-weight:normal;}<br />
<br />
/**** GESHI-RELATED STYLES ****/<br />
.mw-geshi.mw-code {overflow:auto; position:relative;}<br />
.mw-geshi a[href]>.kw10 {text-shadow:0 1px 0 #808080; text-shadow:0 1px 0 rgba(0,0,0,0.5);}<br />
.mw-geshi a[href]:hover>.kw10 {text-shadow:0 0 2px #806000; text-shadow:0 0 2px rgba(128,112,0,0.5);}<br />
.mw-geshi>.javascript:before {<br />
display:block; content:"JavaScript";<br />
font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-weight:bold; line-height:1;<br />
position:absolute; top:0; right:0;<br />
border:solid #aaa; border-width:0 0 1px 1px; border-radius:0 0 0 8px;<br />
padding:4px; opacity:0.50;<br />
}<br />
.mw-geshi:hover>.javascript:before {opacity:1.0;}<br />
<br />
/**** NAVBOX-RELATED STYLES ****/<br />
/* Style for horizontal lists (separator following item).<br />
Note: hlist formatting will break if the resulting HTML lacks a breakable character<br />
between list items. This happens when the following conditions are true:<br />
1) The list is made using wiki markup (where HTML is built by parser.php)<br />
2) HTMLTidy is disabled or unavailable (such as on Special: pages)<br />
In such cases, building lists with .hlist using HTML instead of wiki markup<br />
will work around this problem. See also [[Bugzilla:39617]].<br />
IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].<br />
Last updated: January 24, 2013<br />
@source mediawiki.org/wiki/Snippets/Horizontal_lists<br />
@maintainer: [[User:Edokter]]<br />
@revision: 3.1<br />
*/<br />
.skin-monobook .hlist dl,<br />
.skin-modern .hlist dl,<br />
.skin-vector .hlist dl {<br />
line-height: 1.5em;<br />
}<br />
.hlist dl,<br />
.hlist ol,<br />
.hlist ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
/* Display list items inline and make them nowrap */<br />
.hlist dd,<br />
.hlist dt,<br />
.hlist li {<br />
margin: 0;<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
/* Allow wrapping for list items (in tight spaces) */<br />
.hlist.hwrap dd,<br />
.hlist.hwrap dt,<br />
.hlist.hwrap li {<br />
white-space: normal;<br />
}<br />
/* Display nested lists inline and allow them to wrap */<br />
.hlist dl dl, .hlist dl ol, .hlist dl ul,<br />
.hlist ol dl, .hlist ol ol, .hlist ol ul,<br />
.hlist ul dl, .hlist ul ol, .hlist ul ul {<br />
display: inline;<br />
white-space: normal;<br />
}<br />
/* Generate interpuncts */<br />
.hlist dt:after {<br />
content: ":";<br />
}<br />
.hlist dd:after,<br />
.hlist li:after {<br />
content: " ·";<br />
font-weight: bold;<br />
}<br />
.hlist dd:last-child:after,<br />
.hlist dt:last-child:after,<br />
.hlist li:last-child:after {<br />
content: none;<br />
}<br />
/* For IE8 */<br />
.hlist dd.hlist-last-child:after,<br />
.hlist dt.hlist-last-child:after,<br />
.hlist li.hlist-last-child:after {<br />
content: none;<br />
}<br />
/* Add parentheses around nested lists */<br />
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,<br />
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,<br />
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {<br />
content: "(";<br />
font-weight: normal;<br />
}<br />
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,<br />
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,<br />
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* For IE8 */<br />
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,<br />
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,<br />
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* Put numbers in front of ordered list items */<br />
.hlist.hnum ol {<br />
counter-reset: list-item;<br />
}<br />
.hlist.hnum ol > li {<br />
counter-increment: list-item;<br />
}<br />
.hlist.hnum ol > li:before {<br />
content: counter(list-item) " ";<br />
}<br />
.hlist.hnum dd ol > li:first-child:before,<br />
.hlist.hnum dt ol > li:first-child:before,<br />
.hlist.hnum li ol > li:first-child:before {<br />
content: "(" counter(list-item) " ";<br />
}<br />
/* Default style for navigation boxes */<br />
.navbox { /* Navbox container style */<br />
border: 1px solid #aaa;<br />
width: 100%;<br />
margin: auto;<br />
clear: both;<br />
font-size: 88%;<br />
text-align: center;<br />
padding: 1px;<br />
}<br />
.navbox-inner,<br />
.navbox-subgroup {<br />
width: 100%;<br />
}<br />
.navbox-group,<br />
.navbox-title,<br />
.navbox-abovebelow {<br />
padding: 0.25em 1em; /* Title, group and above/below styles */<br />
line-height: 1.5em;<br />
text-align: center;<br />
}<br />
th.navbox-group { /* Group style */<br />
white-space: nowrap;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox,<br />
.navbox-subgroup {<br />
background: #fdfdfd; /* Background color */<br />
}<br />
.navbox-list {<br />
line-height: 1.8em;<br />
border-color: #fdfdfd; /* Must match background color */<br />
}<br />
.navbox th,<br />
.navbox-title {<br />
background: #ccccff; /* Level 1 color */<br />
}<br />
.navbox-abovebelow,<br />
th.navbox-group,<br />
.navbox-subgroup .navbox-title {<br />
background: #ddddff; /* Level 2 color */<br />
}<br />
.navbox-subgroup .navbox-group,<br />
.navbox-subgroup .navbox-abovebelow {<br />
background: #e6e6ff; /* Level 3 color */<br />
}<br />
.navbox-even {<br />
background: #f7f7f7; /* Even row striping */<br />
}<br />
.navbox-odd {<br />
background: transparent; /* Odd row striping */<br />
}<br />
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */<br />
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */<br />
}<br />
.navbox .hlist td dl,<br />
.navbox .hlist td ol,<br />
.navbox .hlist td ul,<br />
.navbox td.hlist dl,<br />
.navbox td.hlist ol,<br />
.navbox td.hlist ul {<br />
padding: 0.125em 0; /* Adjust hlist padding in navboxes */<br />
}<br />
ol + table.navbox,<br />
ul + table.navbox {<br />
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */<br />
}<br />
<br />
/* Default styling for Navbar template */<br />
.navbar {<br />
display: inline;<br />
font-size: 88%;<br />
font-weight: normal;<br />
}<br />
.navbar ul {<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
.navbar li {<br />
word-spacing: -0.125em;<br />
}<br />
.navbar.mini li span {<br />
font-variant: small-caps;<br />
}<br />
/* Navbar styling when nested in infobox and navbox */<br />
.infobox .navbar {<br />
font-size: 100%;<br />
}<br />
.navbox .navbar {<br />
display: block;<br />
font-size: 100%;<br />
}<br />
.navbox-title .navbar {<br />
/* @noflip */<br />
float: left;<br />
/* @noflip */<br />
text-align: left;<br />
/* @noflip */<br />
margin-right: 0.5em;<br />
width: 6em;<br />
}<br />
<br />
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript<br />
in [[MediaWiki:Common.js]] are styled here so they can be customised. */<br />
.collapseButton {<br />
/* @noflip */<br />
float: right;<br />
font-weight: normal;<br />
/* @noflip */<br />
margin-left: 0.5em;<br />
/* @noflip */<br />
text-align: right;<br />
width: auto;<br />
}<br />
/* In navboxes, the show/hide button balances the v·d·e links<br />
from [[Template:Navbar]], so they need to be the same width. */<br />
.navbox .collapseButton {<br />
width: 6em;<br />
}<br />
<br />
/* Styling for JQuery makeCollapsible, matching that of collapseButton */<br />
.mw-collapsible-toggle {<br />
font-weight: normal;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox .mw-collapsible-toggle {<br />
width: 6em;<br />
}<br />
/* Lists in data cells are always left-aligned */<br />
.wikitable td ul,<br />
.wikitable td ol,<br />
.wikitable td dl {<br />
/* @noflip */<br />
text-align: left;<br />
}<br />
/* ...unless they also use the hlist class */<br />
.wikitable.hlist td ul,<br />
.wikitable.hlist td ol,<br />
.wikitable.hlist td dl {<br />
text-align: inherit;<br />
}</div>DaVincehttp://wiki.spheredev.org/index.php?title=MediaWiki:Common.css&diff=10168MediaWiki:Common.css2018-08-10T13:53:25Z<p>DaVince: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
@import url("http://wiki.spheredev.org/extra/league-gothic/stylesheet.css");<br />
@import url("http://wiki.spheredev.org/extra/mgopen-modata/stylesheet.css");<br />
<br />
<br />
/* Mobile */<br />
@media (max-width: 768px) {<br />
.mw-body {<br />
margin-left: 0;<br />
}<br />
div#mw-panel {<br />
position: static;<br />
top: 0;<br />
width: 100%;<br />
}<br />
#p-search {<br />
float: right;<br />
}<br />
#right-navigation {<br />
float: none;<br />
}<br />
#left-navigation {<br />
display: block;<br />
float: none;<br />
margin-left: 0;<br />
margin-top: 3em;<br />
}<br />
#p-personal ul {<br />
padding-left: 0;<br />
}<br />
#p-search {<br />
float: none;<br />
position: absolute;<br />
top: 20px;<br />
}<br />
div#simpleSearch {<br />
width: 100%;<br />
}<br />
}<br />
<br />
<br />
<br />
<br />
/* Everything else */<br />
<br />
<br />
.sph-cf:before,<br />
.sph-cf:after {<br />
content: " "; /* 1 */<br />
display: table; /* 2 */<br />
}<br />
<br />
.sph-cf:after {<br />
clear: both;<br />
}<br />
<br />
/*<br />
* For IE 6/7 only<br />
* Include this rule to trigger hasLayout and contain floats.<br />
*/<br />
<br />
.sph-cf {<br />
*zoom: 1;<br />
}<br />
<br />
h1, #toc h2, .toc h2, h3, h4 {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
div#content h1, div#content h2, div#content #firstHeading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
h1 {font-weight:normal;}<br />
h2 {font-family:"League Gothic",LeagueGothic,sans-serif; font-weight:normal;}<br />
<br />
#mw-content-text h2 {font-size:200%;}<br />
#toc h2, .toc h2 {font-weight:bold; text-transform:uppercase; font-size:100%;}<br />
<br />
.editsection {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
.rellink, .dablink {font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em;}<br />
<br />
#mw-head, #mw-panel, #footer, input,<br />
.mw-search-result-heading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
<br />
.sph-section {border-style:solid; border-width:1px; padding:4px; background-color:#eee; border-color:#999;}<br />
.sph-section .sph-section-title {padding:5px; font-weight:bold; background-color:#999; color:#fff;}<br />
div#content .sph-section .sph-section-title {margin-top:0;}<br />
.sph-section h3.sph-section-title {font-weight:normal;}<br />
.sph-section .sph-section-content {}<br />
<br />
.sph-section-green {background-color:#efe; border-color:#9c9;}<br />
.sph-section-green .sph-section-title {background-color:#393; color:#fff;}<br />
<br />
.sph-section-red {background-color:#fee; border-color:#fcc;}<br />
.sph-section-red .sph-section-title {background-color:#c00; color:#fff;}<br />
<br />
.sph-section-blue {background-color:#eef; border-color:#abd;}<br />
.sph-section-blue .sph-section-title {background-color:#039; color:#fff;}<br />
<br />
.sph-section-yellow {background-color:#ffe; border-color:#dba;}<br />
.sph-section-yellow .sph-section-title {background-color:#cc3; color:#fff;}<br />
<br />
.sph-disambig {text-align:center;}<br />
.sph-disambig .sph-section-content {font-style:italic;}<br />
<br />
.sph-usage {background:#eee; border:1px solid #999; text-align:center; padding:8px 4px; font-size:150%; border-radius:8px;}<br />
.sph-section .sph-usage {background:none; border:0; padding:0; margin:1em auto;}<br />
<br />
.sph-latest {text-align:center;}<br />
<br />
.sph-aside {border:solid rgb(167,215,249); border-width:1px 0; margin:1em auto;}<br />
.sph-aside>.floatleft {margin-top:0.25em;}<br />
.sph-aside h4 {font-weight:normal; font-style:italic;}<br />
<br />
.sph-front-topnav {<br />
width: 100%;<br />
max-width: 1000px;<br />
text-align: center;<br />
font-family: "MgOpen Modata", MgOpenModata, sans-serif;<br />
font-size: 120%;<br />
background-color: #f6f6ff;<br />
border: 1px solid #e8e8f8;<br />
}<br />
.sph-front-topnav .header {<br />
background-color: #e8e8f8;<br />
padding: 10px;<br />
}<br />
.sph-front-topnav .sph-front-topnav-list {<br />
margin: 8px auto;<br />
}<br />
<br />
.sph-directory, .sph-filepath {}<br />
.sph-directory .sph-filepath {}<br />
<br />
.nmbox {background:#F6F9ED; border:1px solid rgb(167,215,249); clear:both; font-size:85%; margin: 0.5em 0;}<br />
.nmbox .mbox-image {background:#EEF3E2; white-space: nowrap; padding: 4px 1em; border-right: 1px solid #aaaaaa;}<br />
.nmbox .mbox-text {padding:4px 1em;}<br />
.nmbox.sph-cf>.mbox-text {float:left;}<br />
.nmbox.sph-cf>.mbox-image {float:left;}<br />
<br />
.sph-notice {<br />
background:#F8EABA; border-bottom:1px solid #C0C090;<br />
margin:1em auto; padding:0.5em 0; width:80%;<br />
clear:both; text-align:center; font-weight:bold;<br />
}<br />
<br />
.mus {font-family:Symbola;}<br />
b.mus {line-height:1; font-weight:normal;}<br />
b b.mus, strong b.mus {font-weight:inherit;}<br />
<br />
.gist table.highlight {font-weight:normal;}<br />
<br />
/**** GESHI-RELATED STYLES ****/<br />
.mw-geshi.mw-code {overflow:auto; position:relative;}<br />
.mw-geshi a[href]>.kw10 {text-shadow:0 1px 0 #808080; text-shadow:0 1px 0 rgba(0,0,0,0.5);}<br />
.mw-geshi a[href]:hover>.kw10 {text-shadow:0 0 2px #806000; text-shadow:0 0 2px rgba(128,112,0,0.5);}<br />
.mw-geshi>.javascript:before {<br />
display:block; content:"JavaScript";<br />
font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-weight:bold; line-height:1;<br />
position:absolute; top:0; right:0;<br />
border:solid #aaa; border-width:0 0 1px 1px; border-radius:0 0 0 8px;<br />
padding:4px; opacity:0.50;<br />
}<br />
.mw-geshi:hover>.javascript:before {opacity:1.0;}<br />
<br />
/**** NAVBOX-RELATED STYLES ****/<br />
/* Style for horizontal lists (separator following item).<br />
Note: hlist formatting will break if the resulting HTML lacks a breakable character<br />
between list items. This happens when the following conditions are true:<br />
1) The list is made using wiki markup (where HTML is built by parser.php)<br />
2) HTMLTidy is disabled or unavailable (such as on Special: pages)<br />
In such cases, building lists with .hlist using HTML instead of wiki markup<br />
will work around this problem. See also [[Bugzilla:39617]].<br />
IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].<br />
Last updated: January 24, 2013<br />
@source mediawiki.org/wiki/Snippets/Horizontal_lists<br />
@maintainer: [[User:Edokter]]<br />
@revision: 3.1<br />
*/<br />
.skin-monobook .hlist dl,<br />
.skin-modern .hlist dl,<br />
.skin-vector .hlist dl {<br />
line-height: 1.5em;<br />
}<br />
.hlist dl,<br />
.hlist ol,<br />
.hlist ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
/* Display list items inline and make them nowrap */<br />
.hlist dd,<br />
.hlist dt,<br />
.hlist li {<br />
margin: 0;<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
/* Allow wrapping for list items (in tight spaces) */<br />
.hlist.hwrap dd,<br />
.hlist.hwrap dt,<br />
.hlist.hwrap li {<br />
white-space: normal;<br />
}<br />
/* Display nested lists inline and allow them to wrap */<br />
.hlist dl dl, .hlist dl ol, .hlist dl ul,<br />
.hlist ol dl, .hlist ol ol, .hlist ol ul,<br />
.hlist ul dl, .hlist ul ol, .hlist ul ul {<br />
display: inline;<br />
white-space: normal;<br />
}<br />
/* Generate interpuncts */<br />
.hlist dt:after {<br />
content: ":";<br />
}<br />
.hlist dd:after,<br />
.hlist li:after {<br />
content: " ·";<br />
font-weight: bold;<br />
}<br />
.hlist dd:last-child:after,<br />
.hlist dt:last-child:after,<br />
.hlist li:last-child:after {<br />
content: none;<br />
}<br />
/* For IE8 */<br />
.hlist dd.hlist-last-child:after,<br />
.hlist dt.hlist-last-child:after,<br />
.hlist li.hlist-last-child:after {<br />
content: none;<br />
}<br />
/* Add parentheses around nested lists */<br />
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,<br />
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,<br />
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {<br />
content: "(";<br />
font-weight: normal;<br />
}<br />
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,<br />
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,<br />
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* For IE8 */<br />
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,<br />
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,<br />
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* Put numbers in front of ordered list items */<br />
.hlist.hnum ol {<br />
counter-reset: list-item;<br />
}<br />
.hlist.hnum ol > li {<br />
counter-increment: list-item;<br />
}<br />
.hlist.hnum ol > li:before {<br />
content: counter(list-item) " ";<br />
}<br />
.hlist.hnum dd ol > li:first-child:before,<br />
.hlist.hnum dt ol > li:first-child:before,<br />
.hlist.hnum li ol > li:first-child:before {<br />
content: "(" counter(list-item) " ";<br />
}<br />
/* Default style for navigation boxes */<br />
.navbox { /* Navbox container style */<br />
border: 1px solid #aaa;<br />
width: 100%;<br />
margin: auto;<br />
clear: both;<br />
font-size: 88%;<br />
text-align: center;<br />
padding: 1px;<br />
}<br />
.navbox-inner,<br />
.navbox-subgroup {<br />
width: 100%;<br />
}<br />
.navbox-group,<br />
.navbox-title,<br />
.navbox-abovebelow {<br />
padding: 0.25em 1em; /* Title, group and above/below styles */<br />
line-height: 1.5em;<br />
text-align: center;<br />
}<br />
th.navbox-group { /* Group style */<br />
white-space: nowrap;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox,<br />
.navbox-subgroup {<br />
background: #fdfdfd; /* Background color */<br />
}<br />
.navbox-list {<br />
line-height: 1.8em;<br />
border-color: #fdfdfd; /* Must match background color */<br />
}<br />
.navbox th,<br />
.navbox-title {<br />
background: #ccccff; /* Level 1 color */<br />
}<br />
.navbox-abovebelow,<br />
th.navbox-group,<br />
.navbox-subgroup .navbox-title {<br />
background: #ddddff; /* Level 2 color */<br />
}<br />
.navbox-subgroup .navbox-group,<br />
.navbox-subgroup .navbox-abovebelow {<br />
background: #e6e6ff; /* Level 3 color */<br />
}<br />
.navbox-even {<br />
background: #f7f7f7; /* Even row striping */<br />
}<br />
.navbox-odd {<br />
background: transparent; /* Odd row striping */<br />
}<br />
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */<br />
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */<br />
}<br />
.navbox .hlist td dl,<br />
.navbox .hlist td ol,<br />
.navbox .hlist td ul,<br />
.navbox td.hlist dl,<br />
.navbox td.hlist ol,<br />
.navbox td.hlist ul {<br />
padding: 0.125em 0; /* Adjust hlist padding in navboxes */<br />
}<br />
ol + table.navbox,<br />
ul + table.navbox {<br />
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */<br />
}<br />
<br />
/* Default styling for Navbar template */<br />
.navbar {<br />
display: inline;<br />
font-size: 88%;<br />
font-weight: normal;<br />
}<br />
.navbar ul {<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
.navbar li {<br />
word-spacing: -0.125em;<br />
}<br />
.navbar.mini li span {<br />
font-variant: small-caps;<br />
}<br />
/* Navbar styling when nested in infobox and navbox */<br />
.infobox .navbar {<br />
font-size: 100%;<br />
}<br />
.navbox .navbar {<br />
display: block;<br />
font-size: 100%;<br />
}<br />
.navbox-title .navbar {<br />
/* @noflip */<br />
float: left;<br />
/* @noflip */<br />
text-align: left;<br />
/* @noflip */<br />
margin-right: 0.5em;<br />
width: 6em;<br />
}<br />
<br />
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript<br />
in [[MediaWiki:Common.js]] are styled here so they can be customised. */<br />
.collapseButton {<br />
/* @noflip */<br />
float: right;<br />
font-weight: normal;<br />
/* @noflip */<br />
margin-left: 0.5em;<br />
/* @noflip */<br />
text-align: right;<br />
width: auto;<br />
}<br />
/* In navboxes, the show/hide button balances the v·d·e links<br />
from [[Template:Navbar]], so they need to be the same width. */<br />
.navbox .collapseButton {<br />
width: 6em;<br />
}<br />
<br />
/* Styling for JQuery makeCollapsible, matching that of collapseButton */<br />
.mw-collapsible-toggle {<br />
font-weight: normal;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox .mw-collapsible-toggle {<br />
width: 6em;<br />
}<br />
/* Lists in data cells are always left-aligned */<br />
.wikitable td ul,<br />
.wikitable td ol,<br />
.wikitable td dl {<br />
/* @noflip */<br />
text-align: left;<br />
}<br />
/* ...unless they also use the hlist class */<br />
.wikitable.hlist td ul,<br />
.wikitable.hlist td ol,<br />
.wikitable.hlist td dl {<br />
text-align: inherit;<br />
}</div>DaVincehttp://wiki.spheredev.org/index.php?title=Main_Page&diff=10167Main Page2018-08-10T13:52:52Z<p>DaVince: Update header to match the main website's front page</p>
<hr />
<div><br />
<div class='sph-front-topnav'><br />
<div class="header">[[File:Spherical logo white bg.png]]</div><br />
<div class='sph-front-topnav-list'>'''For Sphere developers''' {{*}} [[API:Functions]] {{*}} [[:Category:Sphere 2 API|Sphere 2 API articles]] {{*}} [[Legacy:Functions]] {{*}} [[:Category:Tutorials|Tutorials]] {{*}} [[:Category:Scripts|Scripts]]</div><br />
<div class='sph-front-topnav-list'>'''Downloads & Projects''' {{*}} [http://www.spheredev.org/dl Repository] (Games, resources) {{*}} [[:Category:Games]] (incomplete)</div><br />
<div class='sph-front-topnav-list'>'''For wiki editors''' {{*}} [[Help:Editing|Editing Help]] {{*}} [//meta.wikimedia.org/wiki/Help:Contents MW User's Guide] {{*}} [//www.mediawiki.org/wiki/Manual:FAQ MediaWiki FAQ]</div><br />
<div class='sph-front-topnav-list'>[[Getting started]]</div><br />
</div><br />
<br />
<br />
{{section|sph-section-green|Welcome|'''Spheriki''' is the definitive wiki of the '''Spherical community''', dedicated to the [[Sphere]] RPG engine. It includes info about [[:Category:Games|games]], [[:Category:Tutorials|docs]] and [[Spherical:Current events|news]].<br />
<br />
If you're new to Sphere, get started [[Getting started|here]]!<br />
<br />
Stuck? Want to show your project? Come join the community on the [http://forums.spheredev.org/ forums!]<br />
}}<br />
<br />
[[Special:Random|Display a random page]]<br />
<br />
__NOTOC__</div>DaVincehttp://wiki.spheredev.org/index.php?title=MediaWiki:Common.css&diff=10166MediaWiki:Common.css2018-08-10T13:52:13Z<p>DaVince: Change front page header style to match Spherical's front page</p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
@import url("http://wiki.spheredev.org/extra/league-gothic/stylesheet.css");<br />
@import url("http://wiki.spheredev.org/extra/mgopen-modata/stylesheet.css");<br />
<br />
<br />
/* Mobile */<br />
@media (max-width: 768px) {<br />
.mw-body {<br />
margin-left: 0;<br />
}<br />
div#mw-panel {<br />
position: static;<br />
top: 0;<br />
width: 100%;<br />
}<br />
#p-search {<br />
float: right;<br />
}<br />
#right-navigation {<br />
float: none;<br />
}<br />
#left-navigation {<br />
display: block;<br />
float: none;<br />
margin-left: 0;<br />
margin-top: 3em;<br />
}<br />
#p-personal ul {<br />
padding-left: 0;<br />
}<br />
#p-search {<br />
float: none;<br />
position: absolute;<br />
top: 20px;<br />
}<br />
div#simpleSearch {<br />
width: 100%;<br />
}<br />
}<br />
<br />
<br />
<br />
<br />
/* Everything else */<br />
<br />
<br />
.sph-cf:before,<br />
.sph-cf:after {<br />
content: " "; /* 1 */<br />
display: table; /* 2 */<br />
}<br />
<br />
.sph-cf:after {<br />
clear: both;<br />
}<br />
<br />
/*<br />
* For IE 6/7 only<br />
* Include this rule to trigger hasLayout and contain floats.<br />
*/<br />
<br />
.sph-cf {<br />
*zoom: 1;<br />
}<br />
<br />
h1, #toc h2, .toc h2, h3, h4 {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
div#content h1, div#content h2, div#content #firstHeading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
h1 {font-weight:normal;}<br />
h2 {font-family:"League Gothic",LeagueGothic,sans-serif; font-weight:normal;}<br />
<br />
#mw-content-text h2 {font-size:200%;}<br />
#toc h2, .toc h2 {font-weight:bold; text-transform:uppercase; font-size:100%;}<br />
<br />
.editsection {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
.rellink, .dablink {font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em;}<br />
<br />
#mw-head, #mw-panel, #footer, input,<br />
.mw-search-result-heading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
<br />
.sph-section {border-style:solid; border-width:1px; padding:4px; background-color:#eee; border-color:#999;}<br />
.sph-section .sph-section-title {padding:5px; font-weight:bold; background-color:#999; color:#fff;}<br />
div#content .sph-section .sph-section-title {margin-top:0;}<br />
.sph-section h3.sph-section-title {font-weight:normal;}<br />
.sph-section .sph-section-content {}<br />
<br />
.sph-section-green {background-color:#efe; border-color:#9c9;}<br />
.sph-section-green .sph-section-title {background-color:#393; color:#fff;}<br />
<br />
.sph-section-red {background-color:#fee; border-color:#fcc;}<br />
.sph-section-red .sph-section-title {background-color:#c00; color:#fff;}<br />
<br />
.sph-section-blue {background-color:#eef; border-color:#abd;}<br />
.sph-section-blue .sph-section-title {background-color:#039; color:#fff;}<br />
<br />
.sph-section-yellow {background-color:#ffe; border-color:#dba;}<br />
.sph-section-yellow .sph-section-title {background-color:#cc3; color:#fff;}<br />
<br />
.sph-disambig {text-align:center;}<br />
.sph-disambig .sph-section-content {font-style:italic;}<br />
<br />
.sph-usage {background:#eee; border:1px solid #999; text-align:center; padding:8px 4px; font-size:150%; border-radius:8px;}<br />
.sph-section .sph-usage {background:none; border:0; padding:0; margin:1em auto;}<br />
<br />
.sph-latest {text-align:center;}<br />
<br />
.sph-aside {border:solid rgb(167,215,249); border-width:1px 0; margin:1em auto;}<br />
.sph-aside>.floatleft {margin-top:0.25em;}<br />
.sph-aside h4 {font-weight:normal; font-style:italic;}<br />
<br />
.sph-front-topnav {<br />
width: 100%;<br />
max-width: 1000px;<br />
text-align: center;<br />
font-family: "MgOpen Modata", MgOpenModata, sans-serif;<br />
font-size: 120%;<br />
background-color: #f6f6ff;<br />
border: 1px solid #e8e8f8;<br />
padding: 10px;<br />
}<br />
.sph-front-topnav .header {<br />
background-color: #e8e8f8;<br />
}<br />
.sph-front-topnav .sph-front-topnav-list {<br />
margin: 8px auto;<br />
}<br />
<br />
.sph-directory, .sph-filepath {}<br />
.sph-directory .sph-filepath {}<br />
<br />
.nmbox {background:#F6F9ED; border:1px solid rgb(167,215,249); clear:both; font-size:85%; margin: 0.5em 0;}<br />
.nmbox .mbox-image {background:#EEF3E2; white-space: nowrap; padding: 4px 1em; border-right: 1px solid #aaaaaa;}<br />
.nmbox .mbox-text {padding:4px 1em;}<br />
.nmbox.sph-cf>.mbox-text {float:left;}<br />
.nmbox.sph-cf>.mbox-image {float:left;}<br />
<br />
.sph-notice {<br />
background:#F8EABA; border-bottom:1px solid #C0C090;<br />
margin:1em auto; padding:0.5em 0; width:80%;<br />
clear:both; text-align:center; font-weight:bold;<br />
}<br />
<br />
.mus {font-family:Symbola;}<br />
b.mus {line-height:1; font-weight:normal;}<br />
b b.mus, strong b.mus {font-weight:inherit;}<br />
<br />
.gist table.highlight {font-weight:normal;}<br />
<br />
/**** GESHI-RELATED STYLES ****/<br />
.mw-geshi.mw-code {overflow:auto; position:relative;}<br />
.mw-geshi a[href]>.kw10 {text-shadow:0 1px 0 #808080; text-shadow:0 1px 0 rgba(0,0,0,0.5);}<br />
.mw-geshi a[href]:hover>.kw10 {text-shadow:0 0 2px #806000; text-shadow:0 0 2px rgba(128,112,0,0.5);}<br />
.mw-geshi>.javascript:before {<br />
display:block; content:"JavaScript";<br />
font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-weight:bold; line-height:1;<br />
position:absolute; top:0; right:0;<br />
border:solid #aaa; border-width:0 0 1px 1px; border-radius:0 0 0 8px;<br />
padding:4px; opacity:0.50;<br />
}<br />
.mw-geshi:hover>.javascript:before {opacity:1.0;}<br />
<br />
/**** NAVBOX-RELATED STYLES ****/<br />
/* Style for horizontal lists (separator following item).<br />
Note: hlist formatting will break if the resulting HTML lacks a breakable character<br />
between list items. This happens when the following conditions are true:<br />
1) The list is made using wiki markup (where HTML is built by parser.php)<br />
2) HTMLTidy is disabled or unavailable (such as on Special: pages)<br />
In such cases, building lists with .hlist using HTML instead of wiki markup<br />
will work around this problem. See also [[Bugzilla:39617]].<br />
IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].<br />
Last updated: January 24, 2013<br />
@source mediawiki.org/wiki/Snippets/Horizontal_lists<br />
@maintainer: [[User:Edokter]]<br />
@revision: 3.1<br />
*/<br />
.skin-monobook .hlist dl,<br />
.skin-modern .hlist dl,<br />
.skin-vector .hlist dl {<br />
line-height: 1.5em;<br />
}<br />
.hlist dl,<br />
.hlist ol,<br />
.hlist ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
/* Display list items inline and make them nowrap */<br />
.hlist dd,<br />
.hlist dt,<br />
.hlist li {<br />
margin: 0;<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
/* Allow wrapping for list items (in tight spaces) */<br />
.hlist.hwrap dd,<br />
.hlist.hwrap dt,<br />
.hlist.hwrap li {<br />
white-space: normal;<br />
}<br />
/* Display nested lists inline and allow them to wrap */<br />
.hlist dl dl, .hlist dl ol, .hlist dl ul,<br />
.hlist ol dl, .hlist ol ol, .hlist ol ul,<br />
.hlist ul dl, .hlist ul ol, .hlist ul ul {<br />
display: inline;<br />
white-space: normal;<br />
}<br />
/* Generate interpuncts */<br />
.hlist dt:after {<br />
content: ":";<br />
}<br />
.hlist dd:after,<br />
.hlist li:after {<br />
content: " ·";<br />
font-weight: bold;<br />
}<br />
.hlist dd:last-child:after,<br />
.hlist dt:last-child:after,<br />
.hlist li:last-child:after {<br />
content: none;<br />
}<br />
/* For IE8 */<br />
.hlist dd.hlist-last-child:after,<br />
.hlist dt.hlist-last-child:after,<br />
.hlist li.hlist-last-child:after {<br />
content: none;<br />
}<br />
/* Add parentheses around nested lists */<br />
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,<br />
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,<br />
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {<br />
content: "(";<br />
font-weight: normal;<br />
}<br />
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,<br />
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,<br />
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* For IE8 */<br />
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,<br />
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,<br />
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* Put numbers in front of ordered list items */<br />
.hlist.hnum ol {<br />
counter-reset: list-item;<br />
}<br />
.hlist.hnum ol > li {<br />
counter-increment: list-item;<br />
}<br />
.hlist.hnum ol > li:before {<br />
content: counter(list-item) " ";<br />
}<br />
.hlist.hnum dd ol > li:first-child:before,<br />
.hlist.hnum dt ol > li:first-child:before,<br />
.hlist.hnum li ol > li:first-child:before {<br />
content: "(" counter(list-item) " ";<br />
}<br />
/* Default style for navigation boxes */<br />
.navbox { /* Navbox container style */<br />
border: 1px solid #aaa;<br />
width: 100%;<br />
margin: auto;<br />
clear: both;<br />
font-size: 88%;<br />
text-align: center;<br />
padding: 1px;<br />
}<br />
.navbox-inner,<br />
.navbox-subgroup {<br />
width: 100%;<br />
}<br />
.navbox-group,<br />
.navbox-title,<br />
.navbox-abovebelow {<br />
padding: 0.25em 1em; /* Title, group and above/below styles */<br />
line-height: 1.5em;<br />
text-align: center;<br />
}<br />
th.navbox-group { /* Group style */<br />
white-space: nowrap;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox,<br />
.navbox-subgroup {<br />
background: #fdfdfd; /* Background color */<br />
}<br />
.navbox-list {<br />
line-height: 1.8em;<br />
border-color: #fdfdfd; /* Must match background color */<br />
}<br />
.navbox th,<br />
.navbox-title {<br />
background: #ccccff; /* Level 1 color */<br />
}<br />
.navbox-abovebelow,<br />
th.navbox-group,<br />
.navbox-subgroup .navbox-title {<br />
background: #ddddff; /* Level 2 color */<br />
}<br />
.navbox-subgroup .navbox-group,<br />
.navbox-subgroup .navbox-abovebelow {<br />
background: #e6e6ff; /* Level 3 color */<br />
}<br />
.navbox-even {<br />
background: #f7f7f7; /* Even row striping */<br />
}<br />
.navbox-odd {<br />
background: transparent; /* Odd row striping */<br />
}<br />
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */<br />
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */<br />
}<br />
.navbox .hlist td dl,<br />
.navbox .hlist td ol,<br />
.navbox .hlist td ul,<br />
.navbox td.hlist dl,<br />
.navbox td.hlist ol,<br />
.navbox td.hlist ul {<br />
padding: 0.125em 0; /* Adjust hlist padding in navboxes */<br />
}<br />
ol + table.navbox,<br />
ul + table.navbox {<br />
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */<br />
}<br />
<br />
/* Default styling for Navbar template */<br />
.navbar {<br />
display: inline;<br />
font-size: 88%;<br />
font-weight: normal;<br />
}<br />
.navbar ul {<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
.navbar li {<br />
word-spacing: -0.125em;<br />
}<br />
.navbar.mini li span {<br />
font-variant: small-caps;<br />
}<br />
/* Navbar styling when nested in infobox and navbox */<br />
.infobox .navbar {<br />
font-size: 100%;<br />
}<br />
.navbox .navbar {<br />
display: block;<br />
font-size: 100%;<br />
}<br />
.navbox-title .navbar {<br />
/* @noflip */<br />
float: left;<br />
/* @noflip */<br />
text-align: left;<br />
/* @noflip */<br />
margin-right: 0.5em;<br />
width: 6em;<br />
}<br />
<br />
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript<br />
in [[MediaWiki:Common.js]] are styled here so they can be customised. */<br />
.collapseButton {<br />
/* @noflip */<br />
float: right;<br />
font-weight: normal;<br />
/* @noflip */<br />
margin-left: 0.5em;<br />
/* @noflip */<br />
text-align: right;<br />
width: auto;<br />
}<br />
/* In navboxes, the show/hide button balances the v·d·e links<br />
from [[Template:Navbar]], so they need to be the same width. */<br />
.navbox .collapseButton {<br />
width: 6em;<br />
}<br />
<br />
/* Styling for JQuery makeCollapsible, matching that of collapseButton */<br />
.mw-collapsible-toggle {<br />
font-weight: normal;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox .mw-collapsible-toggle {<br />
width: 6em;<br />
}<br />
/* Lists in data cells are always left-aligned */<br />
.wikitable td ul,<br />
.wikitable td ol,<br />
.wikitable td dl {<br />
/* @noflip */<br />
text-align: left;<br />
}<br />
/* ...unless they also use the hlist class */<br />
.wikitable.hlist td ul,<br />
.wikitable.hlist td ol,<br />
.wikitable.hlist td dl {<br />
text-align: inherit;<br />
}</div>DaVincehttp://wiki.spheredev.org/index.php?title=MediaWiki:Common.css&diff=10165MediaWiki:Common.css2017-11-22T19:33:13Z<p>DaVince: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
@import url("http://wiki.spheredev.org/extra/league-gothic/stylesheet.css");<br />
@import url("http://wiki.spheredev.org/extra/mgopen-modata/stylesheet.css");<br />
<br />
<br />
/* Mobile */<br />
@media (max-width: 768px) {<br />
.mw-body {<br />
margin-left: 0;<br />
}<br />
div#mw-panel {<br />
position: static;<br />
top: 0;<br />
width: 100%;<br />
}<br />
#p-search {<br />
float: right;<br />
}<br />
#right-navigation {<br />
float: none;<br />
}<br />
#left-navigation {<br />
display: block;<br />
float: none;<br />
margin-left: 0;<br />
margin-top: 3em;<br />
}<br />
#p-personal ul {<br />
padding-left: 0;<br />
}<br />
#p-search {<br />
float: none;<br />
position: absolute;<br />
top: 20px;<br />
}<br />
div#simpleSearch {<br />
width: 100%;<br />
}<br />
}<br />
<br />
<br />
<br />
<br />
/* Everything else */<br />
<br />
<br />
.sph-cf:before,<br />
.sph-cf:after {<br />
content: " "; /* 1 */<br />
display: table; /* 2 */<br />
}<br />
<br />
.sph-cf:after {<br />
clear: both;<br />
}<br />
<br />
/*<br />
* For IE 6/7 only<br />
* Include this rule to trigger hasLayout and contain floats.<br />
*/<br />
<br />
.sph-cf {<br />
*zoom: 1;<br />
}<br />
<br />
h1, #toc h2, .toc h2, h3, h4 {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
div#content h1, div#content h2, div#content #firstHeading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
h1 {font-weight:normal;}<br />
h2 {font-family:"League Gothic",LeagueGothic,sans-serif; font-weight:normal;}<br />
<br />
#mw-content-text h2 {font-size:200%;}<br />
#toc h2, .toc h2 {font-weight:bold; text-transform:uppercase; font-size:100%;}<br />
<br />
.editsection {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
.rellink, .dablink {font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em;}<br />
<br />
#mw-head, #mw-panel, #footer, input,<br />
.mw-search-result-heading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
<br />
.sph-section {border-style:solid; border-width:1px; padding:4px; background-color:#eee; border-color:#999;}<br />
.sph-section .sph-section-title {padding:5px; font-weight:bold; background-color:#999; color:#fff;}<br />
div#content .sph-section .sph-section-title {margin-top:0;}<br />
.sph-section h3.sph-section-title {font-weight:normal;}<br />
.sph-section .sph-section-content {}<br />
<br />
.sph-section-green {background-color:#efe; border-color:#9c9;}<br />
.sph-section-green .sph-section-title {background-color:#393; color:#fff;}<br />
<br />
.sph-section-red {background-color:#fee; border-color:#fcc;}<br />
.sph-section-red .sph-section-title {background-color:#c00; color:#fff;}<br />
<br />
.sph-section-blue {background-color:#eef; border-color:#abd;}<br />
.sph-section-blue .sph-section-title {background-color:#039; color:#fff;}<br />
<br />
.sph-section-yellow {background-color:#ffe; border-color:#dba;}<br />
.sph-section-yellow .sph-section-title {background-color:#cc3; color:#fff;}<br />
<br />
.sph-disambig {text-align:center;}<br />
.sph-disambig .sph-section-content {font-style:italic;}<br />
<br />
.sph-usage {background:#eee; border:1px solid #999; text-align:center; padding:8px 4px; font-size:150%; border-radius:8px;}<br />
.sph-section .sph-usage {background:none; border:0; padding:0; margin:1em auto;}<br />
<br />
.sph-latest {text-align:center;}<br />
<br />
.sph-aside {border:solid rgb(167,215,249); border-width:1px 0; margin:1em auto;}<br />
.sph-aside>.floatleft {margin-top:0.25em;}<br />
.sph-aside h4 {font-weight:normal; font-style:italic;}<br />
<br />
.sph-front-topnav {<br />
text-align:center; font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-size:120%;<br />
background:#e8e8e8; border:1px solid #888; border-radius:4px;<br />
padding:1em;<br />
}<br />
.sph-front-topnav .sph-front-topnav-list {margin:8px auto;}<br />
<br />
.sph-directory, .sph-filepath {}<br />
.sph-directory .sph-filepath {}<br />
<br />
.nmbox {background:#F6F9ED; border:1px solid rgb(167,215,249); clear:both; font-size:85%; margin: 0.5em 0;}<br />
.nmbox .mbox-image {background:#EEF3E2; white-space: nowrap; padding: 4px 1em; border-right: 1px solid #aaaaaa;}<br />
.nmbox .mbox-text {padding:4px 1em;}<br />
.nmbox.sph-cf>.mbox-text {float:left;}<br />
.nmbox.sph-cf>.mbox-image {float:left;}<br />
<br />
.sph-notice {<br />
background:#F8EABA; border-bottom:1px solid #C0C090;<br />
margin:1em auto; padding:0.5em 0; width:80%;<br />
clear:both; text-align:center; font-weight:bold;<br />
}<br />
<br />
.mus {font-family:Symbola;}<br />
b.mus {line-height:1; font-weight:normal;}<br />
b b.mus, strong b.mus {font-weight:inherit;}<br />
<br />
.gist table.highlight {font-weight:normal;}<br />
<br />
/**** GESHI-RELATED STYLES ****/<br />
.mw-geshi.mw-code {overflow:auto; position:relative;}<br />
.mw-geshi a[href]>.kw10 {text-shadow:0 1px 0 #808080; text-shadow:0 1px 0 rgba(0,0,0,0.5);}<br />
.mw-geshi a[href]:hover>.kw10 {text-shadow:0 0 2px #806000; text-shadow:0 0 2px rgba(128,112,0,0.5);}<br />
.mw-geshi>.javascript:before {<br />
display:block; content:"JavaScript";<br />
font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-weight:bold; line-height:1;<br />
position:absolute; top:0; right:0;<br />
border:solid #aaa; border-width:0 0 1px 1px; border-radius:0 0 0 8px;<br />
padding:4px; opacity:0.50;<br />
}<br />
.mw-geshi:hover>.javascript:before {opacity:1.0;}<br />
<br />
/**** NAVBOX-RELATED STYLES ****/<br />
/* Style for horizontal lists (separator following item).<br />
Note: hlist formatting will break if the resulting HTML lacks a breakable character<br />
between list items. This happens when the following conditions are true:<br />
1) The list is made using wiki markup (where HTML is built by parser.php)<br />
2) HTMLTidy is disabled or unavailable (such as on Special: pages)<br />
In such cases, building lists with .hlist using HTML instead of wiki markup<br />
will work around this problem. See also [[Bugzilla:39617]].<br />
IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].<br />
Last updated: January 24, 2013<br />
@source mediawiki.org/wiki/Snippets/Horizontal_lists<br />
@maintainer: [[User:Edokter]]<br />
@revision: 3.1<br />
*/<br />
.skin-monobook .hlist dl,<br />
.skin-modern .hlist dl,<br />
.skin-vector .hlist dl {<br />
line-height: 1.5em;<br />
}<br />
.hlist dl,<br />
.hlist ol,<br />
.hlist ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
/* Display list items inline and make them nowrap */<br />
.hlist dd,<br />
.hlist dt,<br />
.hlist li {<br />
margin: 0;<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
/* Allow wrapping for list items (in tight spaces) */<br />
.hlist.hwrap dd,<br />
.hlist.hwrap dt,<br />
.hlist.hwrap li {<br />
white-space: normal;<br />
}<br />
/* Display nested lists inline and allow them to wrap */<br />
.hlist dl dl, .hlist dl ol, .hlist dl ul,<br />
.hlist ol dl, .hlist ol ol, .hlist ol ul,<br />
.hlist ul dl, .hlist ul ol, .hlist ul ul {<br />
display: inline;<br />
white-space: normal;<br />
}<br />
/* Generate interpuncts */<br />
.hlist dt:after {<br />
content: ":";<br />
}<br />
.hlist dd:after,<br />
.hlist li:after {<br />
content: " ·";<br />
font-weight: bold;<br />
}<br />
.hlist dd:last-child:after,<br />
.hlist dt:last-child:after,<br />
.hlist li:last-child:after {<br />
content: none;<br />
}<br />
/* For IE8 */<br />
.hlist dd.hlist-last-child:after,<br />
.hlist dt.hlist-last-child:after,<br />
.hlist li.hlist-last-child:after {<br />
content: none;<br />
}<br />
/* Add parentheses around nested lists */<br />
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,<br />
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,<br />
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {<br />
content: "(";<br />
font-weight: normal;<br />
}<br />
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,<br />
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,<br />
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* For IE8 */<br />
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,<br />
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,<br />
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* Put numbers in front of ordered list items */<br />
.hlist.hnum ol {<br />
counter-reset: list-item;<br />
}<br />
.hlist.hnum ol > li {<br />
counter-increment: list-item;<br />
}<br />
.hlist.hnum ol > li:before {<br />
content: counter(list-item) " ";<br />
}<br />
.hlist.hnum dd ol > li:first-child:before,<br />
.hlist.hnum dt ol > li:first-child:before,<br />
.hlist.hnum li ol > li:first-child:before {<br />
content: "(" counter(list-item) " ";<br />
}<br />
/* Default style for navigation boxes */<br />
.navbox { /* Navbox container style */<br />
border: 1px solid #aaa;<br />
width: 100%;<br />
margin: auto;<br />
clear: both;<br />
font-size: 88%;<br />
text-align: center;<br />
padding: 1px;<br />
}<br />
.navbox-inner,<br />
.navbox-subgroup {<br />
width: 100%;<br />
}<br />
.navbox-group,<br />
.navbox-title,<br />
.navbox-abovebelow {<br />
padding: 0.25em 1em; /* Title, group and above/below styles */<br />
line-height: 1.5em;<br />
text-align: center;<br />
}<br />
th.navbox-group { /* Group style */<br />
white-space: nowrap;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox,<br />
.navbox-subgroup {<br />
background: #fdfdfd; /* Background color */<br />
}<br />
.navbox-list {<br />
line-height: 1.8em;<br />
border-color: #fdfdfd; /* Must match background color */<br />
}<br />
.navbox th,<br />
.navbox-title {<br />
background: #ccccff; /* Level 1 color */<br />
}<br />
.navbox-abovebelow,<br />
th.navbox-group,<br />
.navbox-subgroup .navbox-title {<br />
background: #ddddff; /* Level 2 color */<br />
}<br />
.navbox-subgroup .navbox-group,<br />
.navbox-subgroup .navbox-abovebelow {<br />
background: #e6e6ff; /* Level 3 color */<br />
}<br />
.navbox-even {<br />
background: #f7f7f7; /* Even row striping */<br />
}<br />
.navbox-odd {<br />
background: transparent; /* Odd row striping */<br />
}<br />
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */<br />
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */<br />
}<br />
.navbox .hlist td dl,<br />
.navbox .hlist td ol,<br />
.navbox .hlist td ul,<br />
.navbox td.hlist dl,<br />
.navbox td.hlist ol,<br />
.navbox td.hlist ul {<br />
padding: 0.125em 0; /* Adjust hlist padding in navboxes */<br />
}<br />
ol + table.navbox,<br />
ul + table.navbox {<br />
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */<br />
}<br />
<br />
/* Default styling for Navbar template */<br />
.navbar {<br />
display: inline;<br />
font-size: 88%;<br />
font-weight: normal;<br />
}<br />
.navbar ul {<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
.navbar li {<br />
word-spacing: -0.125em;<br />
}<br />
.navbar.mini li span {<br />
font-variant: small-caps;<br />
}<br />
/* Navbar styling when nested in infobox and navbox */<br />
.infobox .navbar {<br />
font-size: 100%;<br />
}<br />
.navbox .navbar {<br />
display: block;<br />
font-size: 100%;<br />
}<br />
.navbox-title .navbar {<br />
/* @noflip */<br />
float: left;<br />
/* @noflip */<br />
text-align: left;<br />
/* @noflip */<br />
margin-right: 0.5em;<br />
width: 6em;<br />
}<br />
<br />
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript<br />
in [[MediaWiki:Common.js]] are styled here so they can be customised. */<br />
.collapseButton {<br />
/* @noflip */<br />
float: right;<br />
font-weight: normal;<br />
/* @noflip */<br />
margin-left: 0.5em;<br />
/* @noflip */<br />
text-align: right;<br />
width: auto;<br />
}<br />
/* In navboxes, the show/hide button balances the v·d·e links<br />
from [[Template:Navbar]], so they need to be the same width. */<br />
.navbox .collapseButton {<br />
width: 6em;<br />
}<br />
<br />
/* Styling for JQuery makeCollapsible, matching that of collapseButton */<br />
.mw-collapsible-toggle {<br />
font-weight: normal;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox .mw-collapsible-toggle {<br />
width: 6em;<br />
}<br />
/* Lists in data cells are always left-aligned */<br />
.wikitable td ul,<br />
.wikitable td ol,<br />
.wikitable td dl {<br />
/* @noflip */<br />
text-align: left;<br />
}<br />
/* ...unless they also use the hlist class */<br />
.wikitable.hlist td ul,<br />
.wikitable.hlist td ol,<br />
.wikitable.hlist td dl {<br />
text-align: inherit;<br />
}</div>DaVincehttp://wiki.spheredev.org/index.php?title=MediaWiki:Common.css&diff=10164MediaWiki:Common.css2017-11-22T19:24:33Z<p>DaVince: More CSS additions for mobile</p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
@import url("http://wiki.spheredev.org/extra/league-gothic/stylesheet.css");<br />
@import url("http://wiki.spheredev.org/extra/mgopen-modata/stylesheet.css");<br />
<br />
<br />
/* Mobile */<br />
@media (max-width: 768px) {<br />
.mw-body {<br />
margin-left: 0;<br />
}<br />
div#mw-panel {<br />
position: static;<br />
top: 0;<br />
width: 100%;<br />
}<br />
#p-search {<br />
float: right;<br />
}<br />
#right-navigation {<br />
float: none;<br />
margin-top: 5em;<br />
}<br />
#left-navigation {<br />
float: none;<br />
margin-left: 0;<br />
margin-top: 3em;<br />
}<br />
#p-personal ul {<br />
padding-left: 0;<br />
}<br />
}<br />
<br />
<br />
<br />
<br />
/* Everything else */<br />
<br />
<br />
.sph-cf:before,<br />
.sph-cf:after {<br />
content: " "; /* 1 */<br />
display: table; /* 2 */<br />
}<br />
<br />
.sph-cf:after {<br />
clear: both;<br />
}<br />
<br />
/*<br />
* For IE 6/7 only<br />
* Include this rule to trigger hasLayout and contain floats.<br />
*/<br />
<br />
.sph-cf {<br />
*zoom: 1;<br />
}<br />
<br />
h1, #toc h2, .toc h2, h3, h4 {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
div#content h1, div#content h2, div#content #firstHeading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
h1 {font-weight:normal;}<br />
h2 {font-family:"League Gothic",LeagueGothic,sans-serif; font-weight:normal;}<br />
<br />
#mw-content-text h2 {font-size:200%;}<br />
#toc h2, .toc h2 {font-weight:bold; text-transform:uppercase; font-size:100%;}<br />
<br />
.editsection {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
.rellink, .dablink {font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em;}<br />
<br />
#mw-head, #mw-panel, #footer, input,<br />
.mw-search-result-heading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
<br />
.sph-section {border-style:solid; border-width:1px; padding:4px; background-color:#eee; border-color:#999;}<br />
.sph-section .sph-section-title {padding:5px; font-weight:bold; background-color:#999; color:#fff;}<br />
div#content .sph-section .sph-section-title {margin-top:0;}<br />
.sph-section h3.sph-section-title {font-weight:normal;}<br />
.sph-section .sph-section-content {}<br />
<br />
.sph-section-green {background-color:#efe; border-color:#9c9;}<br />
.sph-section-green .sph-section-title {background-color:#393; color:#fff;}<br />
<br />
.sph-section-red {background-color:#fee; border-color:#fcc;}<br />
.sph-section-red .sph-section-title {background-color:#c00; color:#fff;}<br />
<br />
.sph-section-blue {background-color:#eef; border-color:#abd;}<br />
.sph-section-blue .sph-section-title {background-color:#039; color:#fff;}<br />
<br />
.sph-section-yellow {background-color:#ffe; border-color:#dba;}<br />
.sph-section-yellow .sph-section-title {background-color:#cc3; color:#fff;}<br />
<br />
.sph-disambig {text-align:center;}<br />
.sph-disambig .sph-section-content {font-style:italic;}<br />
<br />
.sph-usage {background:#eee; border:1px solid #999; text-align:center; padding:8px 4px; font-size:150%; border-radius:8px;}<br />
.sph-section .sph-usage {background:none; border:0; padding:0; margin:1em auto;}<br />
<br />
.sph-latest {text-align:center;}<br />
<br />
.sph-aside {border:solid rgb(167,215,249); border-width:1px 0; margin:1em auto;}<br />
.sph-aside>.floatleft {margin-top:0.25em;}<br />
.sph-aside h4 {font-weight:normal; font-style:italic;}<br />
<br />
.sph-front-topnav {<br />
text-align:center; font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-size:120%;<br />
background:#e8e8e8; border:1px solid #888; border-radius:4px;<br />
padding:1em;<br />
}<br />
.sph-front-topnav .sph-front-topnav-list {margin:8px auto;}<br />
<br />
.sph-directory, .sph-filepath {}<br />
.sph-directory .sph-filepath {}<br />
<br />
.nmbox {background:#F6F9ED; border:1px solid rgb(167,215,249); clear:both; font-size:85%; margin: 0.5em 0;}<br />
.nmbox .mbox-image {background:#EEF3E2; white-space: nowrap; padding: 4px 1em; border-right: 1px solid #aaaaaa;}<br />
.nmbox .mbox-text {padding:4px 1em;}<br />
.nmbox.sph-cf>.mbox-text {float:left;}<br />
.nmbox.sph-cf>.mbox-image {float:left;}<br />
<br />
.sph-notice {<br />
background:#F8EABA; border-bottom:1px solid #C0C090;<br />
margin:1em auto; padding:0.5em 0; width:80%;<br />
clear:both; text-align:center; font-weight:bold;<br />
}<br />
<br />
.mus {font-family:Symbola;}<br />
b.mus {line-height:1; font-weight:normal;}<br />
b b.mus, strong b.mus {font-weight:inherit;}<br />
<br />
.gist table.highlight {font-weight:normal;}<br />
<br />
/**** GESHI-RELATED STYLES ****/<br />
.mw-geshi.mw-code {overflow:auto; position:relative;}<br />
.mw-geshi a[href]>.kw10 {text-shadow:0 1px 0 #808080; text-shadow:0 1px 0 rgba(0,0,0,0.5);}<br />
.mw-geshi a[href]:hover>.kw10 {text-shadow:0 0 2px #806000; text-shadow:0 0 2px rgba(128,112,0,0.5);}<br />
.mw-geshi>.javascript:before {<br />
display:block; content:"JavaScript";<br />
font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-weight:bold; line-height:1;<br />
position:absolute; top:0; right:0;<br />
border:solid #aaa; border-width:0 0 1px 1px; border-radius:0 0 0 8px;<br />
padding:4px; opacity:0.50;<br />
}<br />
.mw-geshi:hover>.javascript:before {opacity:1.0;}<br />
<br />
/**** NAVBOX-RELATED STYLES ****/<br />
/* Style for horizontal lists (separator following item).<br />
Note: hlist formatting will break if the resulting HTML lacks a breakable character<br />
between list items. This happens when the following conditions are true:<br />
1) The list is made using wiki markup (where HTML is built by parser.php)<br />
2) HTMLTidy is disabled or unavailable (such as on Special: pages)<br />
In such cases, building lists with .hlist using HTML instead of wiki markup<br />
will work around this problem. See also [[Bugzilla:39617]].<br />
IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].<br />
Last updated: January 24, 2013<br />
@source mediawiki.org/wiki/Snippets/Horizontal_lists<br />
@maintainer: [[User:Edokter]]<br />
@revision: 3.1<br />
*/<br />
.skin-monobook .hlist dl,<br />
.skin-modern .hlist dl,<br />
.skin-vector .hlist dl {<br />
line-height: 1.5em;<br />
}<br />
.hlist dl,<br />
.hlist ol,<br />
.hlist ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
/* Display list items inline and make them nowrap */<br />
.hlist dd,<br />
.hlist dt,<br />
.hlist li {<br />
margin: 0;<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
/* Allow wrapping for list items (in tight spaces) */<br />
.hlist.hwrap dd,<br />
.hlist.hwrap dt,<br />
.hlist.hwrap li {<br />
white-space: normal;<br />
}<br />
/* Display nested lists inline and allow them to wrap */<br />
.hlist dl dl, .hlist dl ol, .hlist dl ul,<br />
.hlist ol dl, .hlist ol ol, .hlist ol ul,<br />
.hlist ul dl, .hlist ul ol, .hlist ul ul {<br />
display: inline;<br />
white-space: normal;<br />
}<br />
/* Generate interpuncts */<br />
.hlist dt:after {<br />
content: ":";<br />
}<br />
.hlist dd:after,<br />
.hlist li:after {<br />
content: " ·";<br />
font-weight: bold;<br />
}<br />
.hlist dd:last-child:after,<br />
.hlist dt:last-child:after,<br />
.hlist li:last-child:after {<br />
content: none;<br />
}<br />
/* For IE8 */<br />
.hlist dd.hlist-last-child:after,<br />
.hlist dt.hlist-last-child:after,<br />
.hlist li.hlist-last-child:after {<br />
content: none;<br />
}<br />
/* Add parentheses around nested lists */<br />
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,<br />
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,<br />
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {<br />
content: "(";<br />
font-weight: normal;<br />
}<br />
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,<br />
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,<br />
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* For IE8 */<br />
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,<br />
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,<br />
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* Put numbers in front of ordered list items */<br />
.hlist.hnum ol {<br />
counter-reset: list-item;<br />
}<br />
.hlist.hnum ol > li {<br />
counter-increment: list-item;<br />
}<br />
.hlist.hnum ol > li:before {<br />
content: counter(list-item) " ";<br />
}<br />
.hlist.hnum dd ol > li:first-child:before,<br />
.hlist.hnum dt ol > li:first-child:before,<br />
.hlist.hnum li ol > li:first-child:before {<br />
content: "(" counter(list-item) " ";<br />
}<br />
/* Default style for navigation boxes */<br />
.navbox { /* Navbox container style */<br />
border: 1px solid #aaa;<br />
width: 100%;<br />
margin: auto;<br />
clear: both;<br />
font-size: 88%;<br />
text-align: center;<br />
padding: 1px;<br />
}<br />
.navbox-inner,<br />
.navbox-subgroup {<br />
width: 100%;<br />
}<br />
.navbox-group,<br />
.navbox-title,<br />
.navbox-abovebelow {<br />
padding: 0.25em 1em; /* Title, group and above/below styles */<br />
line-height: 1.5em;<br />
text-align: center;<br />
}<br />
th.navbox-group { /* Group style */<br />
white-space: nowrap;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox,<br />
.navbox-subgroup {<br />
background: #fdfdfd; /* Background color */<br />
}<br />
.navbox-list {<br />
line-height: 1.8em;<br />
border-color: #fdfdfd; /* Must match background color */<br />
}<br />
.navbox th,<br />
.navbox-title {<br />
background: #ccccff; /* Level 1 color */<br />
}<br />
.navbox-abovebelow,<br />
th.navbox-group,<br />
.navbox-subgroup .navbox-title {<br />
background: #ddddff; /* Level 2 color */<br />
}<br />
.navbox-subgroup .navbox-group,<br />
.navbox-subgroup .navbox-abovebelow {<br />
background: #e6e6ff; /* Level 3 color */<br />
}<br />
.navbox-even {<br />
background: #f7f7f7; /* Even row striping */<br />
}<br />
.navbox-odd {<br />
background: transparent; /* Odd row striping */<br />
}<br />
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */<br />
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */<br />
}<br />
.navbox .hlist td dl,<br />
.navbox .hlist td ol,<br />
.navbox .hlist td ul,<br />
.navbox td.hlist dl,<br />
.navbox td.hlist ol,<br />
.navbox td.hlist ul {<br />
padding: 0.125em 0; /* Adjust hlist padding in navboxes */<br />
}<br />
ol + table.navbox,<br />
ul + table.navbox {<br />
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */<br />
}<br />
<br />
/* Default styling for Navbar template */<br />
.navbar {<br />
display: inline;<br />
font-size: 88%;<br />
font-weight: normal;<br />
}<br />
.navbar ul {<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
.navbar li {<br />
word-spacing: -0.125em;<br />
}<br />
.navbar.mini li span {<br />
font-variant: small-caps;<br />
}<br />
/* Navbar styling when nested in infobox and navbox */<br />
.infobox .navbar {<br />
font-size: 100%;<br />
}<br />
.navbox .navbar {<br />
display: block;<br />
font-size: 100%;<br />
}<br />
.navbox-title .navbar {<br />
/* @noflip */<br />
float: left;<br />
/* @noflip */<br />
text-align: left;<br />
/* @noflip */<br />
margin-right: 0.5em;<br />
width: 6em;<br />
}<br />
<br />
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript<br />
in [[MediaWiki:Common.js]] are styled here so they can be customised. */<br />
.collapseButton {<br />
/* @noflip */<br />
float: right;<br />
font-weight: normal;<br />
/* @noflip */<br />
margin-left: 0.5em;<br />
/* @noflip */<br />
text-align: right;<br />
width: auto;<br />
}<br />
/* In navboxes, the show/hide button balances the v·d·e links<br />
from [[Template:Navbar]], so they need to be the same width. */<br />
.navbox .collapseButton {<br />
width: 6em;<br />
}<br />
<br />
/* Styling for JQuery makeCollapsible, matching that of collapseButton */<br />
.mw-collapsible-toggle {<br />
font-weight: normal;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox .mw-collapsible-toggle {<br />
width: 6em;<br />
}<br />
/* Lists in data cells are always left-aligned */<br />
.wikitable td ul,<br />
.wikitable td ol,<br />
.wikitable td dl {<br />
/* @noflip */<br />
text-align: left;<br />
}<br />
/* ...unless they also use the hlist class */<br />
.wikitable.hlist td ul,<br />
.wikitable.hlist td ol,<br />
.wikitable.hlist td dl {<br />
text-align: inherit;<br />
}</div>DaVincehttp://wiki.spheredev.org/index.php?title=MediaWiki:Common.css&diff=10163MediaWiki:Common.css2017-11-22T19:08:27Z<p>DaVince: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
@import url("http://wiki.spheredev.org/extra/league-gothic/stylesheet.css");<br />
@import url("http://wiki.spheredev.org/extra/mgopen-modata/stylesheet.css");<br />
<br />
<br />
/* Mobile */<br />
@-webkit-viewport{width:device-width}<br />
@-moz-viewport{width:device-width}<br />
@-ms-viewport{width:device-width}<br />
@-o-viewport{width:device-width}<br />
@viewport {<br />
width: device-width;<br />
zoom: 100%;<br />
}<br />
<br />
@media (max-width: 768px) {<br />
.mw-body {<br />
margin-left: 0;<br />
}<br />
div#mw-panel {<br />
position: static;<br />
top: 0;<br />
width: 100%;<br />
}<br />
}<br />
<br />
<br />
<br />
<br />
/* Everything else */<br />
<br />
<br />
.sph-cf:before,<br />
.sph-cf:after {<br />
content: " "; /* 1 */<br />
display: table; /* 2 */<br />
}<br />
<br />
.sph-cf:after {<br />
clear: both;<br />
}<br />
<br />
/*<br />
* For IE 6/7 only<br />
* Include this rule to trigger hasLayout and contain floats.<br />
*/<br />
<br />
.sph-cf {<br />
*zoom: 1;<br />
}<br />
<br />
h1, #toc h2, .toc h2, h3, h4 {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
div#content h1, div#content h2, div#content #firstHeading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
h1 {font-weight:normal;}<br />
h2 {font-family:"League Gothic",LeagueGothic,sans-serif; font-weight:normal;}<br />
<br />
#mw-content-text h2 {font-size:200%;}<br />
#toc h2, .toc h2 {font-weight:bold; text-transform:uppercase; font-size:100%;}<br />
<br />
.editsection {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
.rellink, .dablink {font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em;}<br />
<br />
#mw-head, #mw-panel, #footer, input,<br />
.mw-search-result-heading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
<br />
.sph-section {border-style:solid; border-width:1px; padding:4px; background-color:#eee; border-color:#999;}<br />
.sph-section .sph-section-title {padding:5px; font-weight:bold; background-color:#999; color:#fff;}<br />
div#content .sph-section .sph-section-title {margin-top:0;}<br />
.sph-section h3.sph-section-title {font-weight:normal;}<br />
.sph-section .sph-section-content {}<br />
<br />
.sph-section-green {background-color:#efe; border-color:#9c9;}<br />
.sph-section-green .sph-section-title {background-color:#393; color:#fff;}<br />
<br />
.sph-section-red {background-color:#fee; border-color:#fcc;}<br />
.sph-section-red .sph-section-title {background-color:#c00; color:#fff;}<br />
<br />
.sph-section-blue {background-color:#eef; border-color:#abd;}<br />
.sph-section-blue .sph-section-title {background-color:#039; color:#fff;}<br />
<br />
.sph-section-yellow {background-color:#ffe; border-color:#dba;}<br />
.sph-section-yellow .sph-section-title {background-color:#cc3; color:#fff;}<br />
<br />
.sph-disambig {text-align:center;}<br />
.sph-disambig .sph-section-content {font-style:italic;}<br />
<br />
.sph-usage {background:#eee; border:1px solid #999; text-align:center; padding:8px 4px; font-size:150%; border-radius:8px;}<br />
.sph-section .sph-usage {background:none; border:0; padding:0; margin:1em auto;}<br />
<br />
.sph-latest {text-align:center;}<br />
<br />
.sph-aside {border:solid rgb(167,215,249); border-width:1px 0; margin:1em auto;}<br />
.sph-aside>.floatleft {margin-top:0.25em;}<br />
.sph-aside h4 {font-weight:normal; font-style:italic;}<br />
<br />
.sph-front-topnav {<br />
text-align:center; font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-size:120%;<br />
background:#e8e8e8; border:1px solid #888; border-radius:4px;<br />
padding:1em;<br />
}<br />
.sph-front-topnav .sph-front-topnav-list {margin:8px auto;}<br />
<br />
.sph-directory, .sph-filepath {}<br />
.sph-directory .sph-filepath {}<br />
<br />
.nmbox {background:#F6F9ED; border:1px solid rgb(167,215,249); clear:both; font-size:85%; margin: 0.5em 0;}<br />
.nmbox .mbox-image {background:#EEF3E2; white-space: nowrap; padding: 4px 1em; border-right: 1px solid #aaaaaa;}<br />
.nmbox .mbox-text {padding:4px 1em;}<br />
.nmbox.sph-cf>.mbox-text {float:left;}<br />
.nmbox.sph-cf>.mbox-image {float:left;}<br />
<br />
.sph-notice {<br />
background:#F8EABA; border-bottom:1px solid #C0C090;<br />
margin:1em auto; padding:0.5em 0; width:80%;<br />
clear:both; text-align:center; font-weight:bold;<br />
}<br />
<br />
.mus {font-family:Symbola;}<br />
b.mus {line-height:1; font-weight:normal;}<br />
b b.mus, strong b.mus {font-weight:inherit;}<br />
<br />
.gist table.highlight {font-weight:normal;}<br />
<br />
/**** GESHI-RELATED STYLES ****/<br />
.mw-geshi.mw-code {overflow:auto; position:relative;}<br />
.mw-geshi a[href]>.kw10 {text-shadow:0 1px 0 #808080; text-shadow:0 1px 0 rgba(0,0,0,0.5);}<br />
.mw-geshi a[href]:hover>.kw10 {text-shadow:0 0 2px #806000; text-shadow:0 0 2px rgba(128,112,0,0.5);}<br />
.mw-geshi>.javascript:before {<br />
display:block; content:"JavaScript";<br />
font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-weight:bold; line-height:1;<br />
position:absolute; top:0; right:0;<br />
border:solid #aaa; border-width:0 0 1px 1px; border-radius:0 0 0 8px;<br />
padding:4px; opacity:0.50;<br />
}<br />
.mw-geshi:hover>.javascript:before {opacity:1.0;}<br />
<br />
/**** NAVBOX-RELATED STYLES ****/<br />
/* Style for horizontal lists (separator following item).<br />
Note: hlist formatting will break if the resulting HTML lacks a breakable character<br />
between list items. This happens when the following conditions are true:<br />
1) The list is made using wiki markup (where HTML is built by parser.php)<br />
2) HTMLTidy is disabled or unavailable (such as on Special: pages)<br />
In such cases, building lists with .hlist using HTML instead of wiki markup<br />
will work around this problem. See also [[Bugzilla:39617]].<br />
IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].<br />
Last updated: January 24, 2013<br />
@source mediawiki.org/wiki/Snippets/Horizontal_lists<br />
@maintainer: [[User:Edokter]]<br />
@revision: 3.1<br />
*/<br />
.skin-monobook .hlist dl,<br />
.skin-modern .hlist dl,<br />
.skin-vector .hlist dl {<br />
line-height: 1.5em;<br />
}<br />
.hlist dl,<br />
.hlist ol,<br />
.hlist ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
/* Display list items inline and make them nowrap */<br />
.hlist dd,<br />
.hlist dt,<br />
.hlist li {<br />
margin: 0;<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
/* Allow wrapping for list items (in tight spaces) */<br />
.hlist.hwrap dd,<br />
.hlist.hwrap dt,<br />
.hlist.hwrap li {<br />
white-space: normal;<br />
}<br />
/* Display nested lists inline and allow them to wrap */<br />
.hlist dl dl, .hlist dl ol, .hlist dl ul,<br />
.hlist ol dl, .hlist ol ol, .hlist ol ul,<br />
.hlist ul dl, .hlist ul ol, .hlist ul ul {<br />
display: inline;<br />
white-space: normal;<br />
}<br />
/* Generate interpuncts */<br />
.hlist dt:after {<br />
content: ":";<br />
}<br />
.hlist dd:after,<br />
.hlist li:after {<br />
content: " ·";<br />
font-weight: bold;<br />
}<br />
.hlist dd:last-child:after,<br />
.hlist dt:last-child:after,<br />
.hlist li:last-child:after {<br />
content: none;<br />
}<br />
/* For IE8 */<br />
.hlist dd.hlist-last-child:after,<br />
.hlist dt.hlist-last-child:after,<br />
.hlist li.hlist-last-child:after {<br />
content: none;<br />
}<br />
/* Add parentheses around nested lists */<br />
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,<br />
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,<br />
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {<br />
content: "(";<br />
font-weight: normal;<br />
}<br />
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,<br />
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,<br />
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* For IE8 */<br />
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,<br />
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,<br />
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* Put numbers in front of ordered list items */<br />
.hlist.hnum ol {<br />
counter-reset: list-item;<br />
}<br />
.hlist.hnum ol > li {<br />
counter-increment: list-item;<br />
}<br />
.hlist.hnum ol > li:before {<br />
content: counter(list-item) " ";<br />
}<br />
.hlist.hnum dd ol > li:first-child:before,<br />
.hlist.hnum dt ol > li:first-child:before,<br />
.hlist.hnum li ol > li:first-child:before {<br />
content: "(" counter(list-item) " ";<br />
}<br />
/* Default style for navigation boxes */<br />
.navbox { /* Navbox container style */<br />
border: 1px solid #aaa;<br />
width: 100%;<br />
margin: auto;<br />
clear: both;<br />
font-size: 88%;<br />
text-align: center;<br />
padding: 1px;<br />
}<br />
.navbox-inner,<br />
.navbox-subgroup {<br />
width: 100%;<br />
}<br />
.navbox-group,<br />
.navbox-title,<br />
.navbox-abovebelow {<br />
padding: 0.25em 1em; /* Title, group and above/below styles */<br />
line-height: 1.5em;<br />
text-align: center;<br />
}<br />
th.navbox-group { /* Group style */<br />
white-space: nowrap;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox,<br />
.navbox-subgroup {<br />
background: #fdfdfd; /* Background color */<br />
}<br />
.navbox-list {<br />
line-height: 1.8em;<br />
border-color: #fdfdfd; /* Must match background color */<br />
}<br />
.navbox th,<br />
.navbox-title {<br />
background: #ccccff; /* Level 1 color */<br />
}<br />
.navbox-abovebelow,<br />
th.navbox-group,<br />
.navbox-subgroup .navbox-title {<br />
background: #ddddff; /* Level 2 color */<br />
}<br />
.navbox-subgroup .navbox-group,<br />
.navbox-subgroup .navbox-abovebelow {<br />
background: #e6e6ff; /* Level 3 color */<br />
}<br />
.navbox-even {<br />
background: #f7f7f7; /* Even row striping */<br />
}<br />
.navbox-odd {<br />
background: transparent; /* Odd row striping */<br />
}<br />
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */<br />
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */<br />
}<br />
.navbox .hlist td dl,<br />
.navbox .hlist td ol,<br />
.navbox .hlist td ul,<br />
.navbox td.hlist dl,<br />
.navbox td.hlist ol,<br />
.navbox td.hlist ul {<br />
padding: 0.125em 0; /* Adjust hlist padding in navboxes */<br />
}<br />
ol + table.navbox,<br />
ul + table.navbox {<br />
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */<br />
}<br />
<br />
/* Default styling for Navbar template */<br />
.navbar {<br />
display: inline;<br />
font-size: 88%;<br />
font-weight: normal;<br />
}<br />
.navbar ul {<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
.navbar li {<br />
word-spacing: -0.125em;<br />
}<br />
.navbar.mini li span {<br />
font-variant: small-caps;<br />
}<br />
/* Navbar styling when nested in infobox and navbox */<br />
.infobox .navbar {<br />
font-size: 100%;<br />
}<br />
.navbox .navbar {<br />
display: block;<br />
font-size: 100%;<br />
}<br />
.navbox-title .navbar {<br />
/* @noflip */<br />
float: left;<br />
/* @noflip */<br />
text-align: left;<br />
/* @noflip */<br />
margin-right: 0.5em;<br />
width: 6em;<br />
}<br />
<br />
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript<br />
in [[MediaWiki:Common.js]] are styled here so they can be customised. */<br />
.collapseButton {<br />
/* @noflip */<br />
float: right;<br />
font-weight: normal;<br />
/* @noflip */<br />
margin-left: 0.5em;<br />
/* @noflip */<br />
text-align: right;<br />
width: auto;<br />
}<br />
/* In navboxes, the show/hide button balances the v·d·e links<br />
from [[Template:Navbar]], so they need to be the same width. */<br />
.navbox .collapseButton {<br />
width: 6em;<br />
}<br />
<br />
/* Styling for JQuery makeCollapsible, matching that of collapseButton */<br />
.mw-collapsible-toggle {<br />
font-weight: normal;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox .mw-collapsible-toggle {<br />
width: 6em;<br />
}<br />
/* Lists in data cells are always left-aligned */<br />
.wikitable td ul,<br />
.wikitable td ol,<br />
.wikitable td dl {<br />
/* @noflip */<br />
text-align: left;<br />
}<br />
/* ...unless they also use the hlist class */<br />
.wikitable.hlist td ul,<br />
.wikitable.hlist td ol,<br />
.wikitable.hlist td dl {<br />
text-align: inherit;<br />
}</div>DaVincehttp://wiki.spheredev.org/index.php?title=MediaWiki:Common.css&diff=10162MediaWiki:Common.css2017-11-22T19:07:33Z<p>DaVince: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
@import url("http://wiki.spheredev.org/extra/league-gothic/stylesheet.css");<br />
@import url("http://wiki.spheredev.org/extra/mgopen-modata/stylesheet.css");<br />
<br />
<br />
/* Mobile */<br />
@-webkit-viewport{width:device-width}<br />
@-moz-viewport{width:device-width}<br />
@-ms-viewport{width:device-width}<br />
@-o-viewport{width:device-width}<br />
@viewport {<br />
width: device-width;<br />
zoom: 100%;<br />
}<br />
<br />
@media (max-width: 600px) {<br />
.mw-body {<br />
margin-left: 0;<br />
}<br />
div#mw-panel {<br />
position: static;<br />
top: 0;<br />
width: 100%;<br />
}<br />
}<br />
<br />
<br />
<br />
<br />
/* Everything else */<br />
<br />
<br />
.sph-cf:before,<br />
.sph-cf:after {<br />
content: " "; /* 1 */<br />
display: table; /* 2 */<br />
}<br />
<br />
.sph-cf:after {<br />
clear: both;<br />
}<br />
<br />
/*<br />
* For IE 6/7 only<br />
* Include this rule to trigger hasLayout and contain floats.<br />
*/<br />
<br />
.sph-cf {<br />
*zoom: 1;<br />
}<br />
<br />
h1, #toc h2, .toc h2, h3, h4 {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
div#content h1, div#content h2, div#content #firstHeading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
h1 {font-weight:normal;}<br />
h2 {font-family:"League Gothic",LeagueGothic,sans-serif; font-weight:normal;}<br />
<br />
#mw-content-text h2 {font-size:200%;}<br />
#toc h2, .toc h2 {font-weight:bold; text-transform:uppercase; font-size:100%;}<br />
<br />
.editsection {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
.rellink, .dablink {font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em;}<br />
<br />
#mw-head, #mw-panel, #footer, input,<br />
.mw-search-result-heading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
<br />
.sph-section {border-style:solid; border-width:1px; padding:4px; background-color:#eee; border-color:#999;}<br />
.sph-section .sph-section-title {padding:5px; font-weight:bold; background-color:#999; color:#fff;}<br />
div#content .sph-section .sph-section-title {margin-top:0;}<br />
.sph-section h3.sph-section-title {font-weight:normal;}<br />
.sph-section .sph-section-content {}<br />
<br />
.sph-section-green {background-color:#efe; border-color:#9c9;}<br />
.sph-section-green .sph-section-title {background-color:#393; color:#fff;}<br />
<br />
.sph-section-red {background-color:#fee; border-color:#fcc;}<br />
.sph-section-red .sph-section-title {background-color:#c00; color:#fff;}<br />
<br />
.sph-section-blue {background-color:#eef; border-color:#abd;}<br />
.sph-section-blue .sph-section-title {background-color:#039; color:#fff;}<br />
<br />
.sph-section-yellow {background-color:#ffe; border-color:#dba;}<br />
.sph-section-yellow .sph-section-title {background-color:#cc3; color:#fff;}<br />
<br />
.sph-disambig {text-align:center;}<br />
.sph-disambig .sph-section-content {font-style:italic;}<br />
<br />
.sph-usage {background:#eee; border:1px solid #999; text-align:center; padding:8px 4px; font-size:150%; border-radius:8px;}<br />
.sph-section .sph-usage {background:none; border:0; padding:0; margin:1em auto;}<br />
<br />
.sph-latest {text-align:center;}<br />
<br />
.sph-aside {border:solid rgb(167,215,249); border-width:1px 0; margin:1em auto;}<br />
.sph-aside>.floatleft {margin-top:0.25em;}<br />
.sph-aside h4 {font-weight:normal; font-style:italic;}<br />
<br />
.sph-front-topnav {<br />
text-align:center; font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-size:120%;<br />
background:#e8e8e8; border:1px solid #888; border-radius:4px;<br />
padding:1em;<br />
}<br />
.sph-front-topnav .sph-front-topnav-list {margin:8px auto;}<br />
<br />
.sph-directory, .sph-filepath {}<br />
.sph-directory .sph-filepath {}<br />
<br />
.nmbox {background:#F6F9ED; border:1px solid rgb(167,215,249); clear:both; font-size:85%; margin: 0.5em 0;}<br />
.nmbox .mbox-image {background:#EEF3E2; white-space: nowrap; padding: 4px 1em; border-right: 1px solid #aaaaaa;}<br />
.nmbox .mbox-text {padding:4px 1em;}<br />
.nmbox.sph-cf>.mbox-text {float:left;}<br />
.nmbox.sph-cf>.mbox-image {float:left;}<br />
<br />
.sph-notice {<br />
background:#F8EABA; border-bottom:1px solid #C0C090;<br />
margin:1em auto; padding:0.5em 0; width:80%;<br />
clear:both; text-align:center; font-weight:bold;<br />
}<br />
<br />
.mus {font-family:Symbola;}<br />
b.mus {line-height:1; font-weight:normal;}<br />
b b.mus, strong b.mus {font-weight:inherit;}<br />
<br />
.gist table.highlight {font-weight:normal;}<br />
<br />
/**** GESHI-RELATED STYLES ****/<br />
.mw-geshi.mw-code {overflow:auto; position:relative;}<br />
.mw-geshi a[href]>.kw10 {text-shadow:0 1px 0 #808080; text-shadow:0 1px 0 rgba(0,0,0,0.5);}<br />
.mw-geshi a[href]:hover>.kw10 {text-shadow:0 0 2px #806000; text-shadow:0 0 2px rgba(128,112,0,0.5);}<br />
.mw-geshi>.javascript:before {<br />
display:block; content:"JavaScript";<br />
font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-weight:bold; line-height:1;<br />
position:absolute; top:0; right:0;<br />
border:solid #aaa; border-width:0 0 1px 1px; border-radius:0 0 0 8px;<br />
padding:4px; opacity:0.50;<br />
}<br />
.mw-geshi:hover>.javascript:before {opacity:1.0;}<br />
<br />
/**** NAVBOX-RELATED STYLES ****/<br />
/* Style for horizontal lists (separator following item).<br />
Note: hlist formatting will break if the resulting HTML lacks a breakable character<br />
between list items. This happens when the following conditions are true:<br />
1) The list is made using wiki markup (where HTML is built by parser.php)<br />
2) HTMLTidy is disabled or unavailable (such as on Special: pages)<br />
In such cases, building lists with .hlist using HTML instead of wiki markup<br />
will work around this problem. See also [[Bugzilla:39617]].<br />
IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].<br />
Last updated: January 24, 2013<br />
@source mediawiki.org/wiki/Snippets/Horizontal_lists<br />
@maintainer: [[User:Edokter]]<br />
@revision: 3.1<br />
*/<br />
.skin-monobook .hlist dl,<br />
.skin-modern .hlist dl,<br />
.skin-vector .hlist dl {<br />
line-height: 1.5em;<br />
}<br />
.hlist dl,<br />
.hlist ol,<br />
.hlist ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
/* Display list items inline and make them nowrap */<br />
.hlist dd,<br />
.hlist dt,<br />
.hlist li {<br />
margin: 0;<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
/* Allow wrapping for list items (in tight spaces) */<br />
.hlist.hwrap dd,<br />
.hlist.hwrap dt,<br />
.hlist.hwrap li {<br />
white-space: normal;<br />
}<br />
/* Display nested lists inline and allow them to wrap */<br />
.hlist dl dl, .hlist dl ol, .hlist dl ul,<br />
.hlist ol dl, .hlist ol ol, .hlist ol ul,<br />
.hlist ul dl, .hlist ul ol, .hlist ul ul {<br />
display: inline;<br />
white-space: normal;<br />
}<br />
/* Generate interpuncts */<br />
.hlist dt:after {<br />
content: ":";<br />
}<br />
.hlist dd:after,<br />
.hlist li:after {<br />
content: " ·";<br />
font-weight: bold;<br />
}<br />
.hlist dd:last-child:after,<br />
.hlist dt:last-child:after,<br />
.hlist li:last-child:after {<br />
content: none;<br />
}<br />
/* For IE8 */<br />
.hlist dd.hlist-last-child:after,<br />
.hlist dt.hlist-last-child:after,<br />
.hlist li.hlist-last-child:after {<br />
content: none;<br />
}<br />
/* Add parentheses around nested lists */<br />
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,<br />
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,<br />
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {<br />
content: "(";<br />
font-weight: normal;<br />
}<br />
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,<br />
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,<br />
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* For IE8 */<br />
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,<br />
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,<br />
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* Put numbers in front of ordered list items */<br />
.hlist.hnum ol {<br />
counter-reset: list-item;<br />
}<br />
.hlist.hnum ol > li {<br />
counter-increment: list-item;<br />
}<br />
.hlist.hnum ol > li:before {<br />
content: counter(list-item) " ";<br />
}<br />
.hlist.hnum dd ol > li:first-child:before,<br />
.hlist.hnum dt ol > li:first-child:before,<br />
.hlist.hnum li ol > li:first-child:before {<br />
content: "(" counter(list-item) " ";<br />
}<br />
/* Default style for navigation boxes */<br />
.navbox { /* Navbox container style */<br />
border: 1px solid #aaa;<br />
width: 100%;<br />
margin: auto;<br />
clear: both;<br />
font-size: 88%;<br />
text-align: center;<br />
padding: 1px;<br />
}<br />
.navbox-inner,<br />
.navbox-subgroup {<br />
width: 100%;<br />
}<br />
.navbox-group,<br />
.navbox-title,<br />
.navbox-abovebelow {<br />
padding: 0.25em 1em; /* Title, group and above/below styles */<br />
line-height: 1.5em;<br />
text-align: center;<br />
}<br />
th.navbox-group { /* Group style */<br />
white-space: nowrap;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox,<br />
.navbox-subgroup {<br />
background: #fdfdfd; /* Background color */<br />
}<br />
.navbox-list {<br />
line-height: 1.8em;<br />
border-color: #fdfdfd; /* Must match background color */<br />
}<br />
.navbox th,<br />
.navbox-title {<br />
background: #ccccff; /* Level 1 color */<br />
}<br />
.navbox-abovebelow,<br />
th.navbox-group,<br />
.navbox-subgroup .navbox-title {<br />
background: #ddddff; /* Level 2 color */<br />
}<br />
.navbox-subgroup .navbox-group,<br />
.navbox-subgroup .navbox-abovebelow {<br />
background: #e6e6ff; /* Level 3 color */<br />
}<br />
.navbox-even {<br />
background: #f7f7f7; /* Even row striping */<br />
}<br />
.navbox-odd {<br />
background: transparent; /* Odd row striping */<br />
}<br />
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */<br />
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */<br />
}<br />
.navbox .hlist td dl,<br />
.navbox .hlist td ol,<br />
.navbox .hlist td ul,<br />
.navbox td.hlist dl,<br />
.navbox td.hlist ol,<br />
.navbox td.hlist ul {<br />
padding: 0.125em 0; /* Adjust hlist padding in navboxes */<br />
}<br />
ol + table.navbox,<br />
ul + table.navbox {<br />
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */<br />
}<br />
<br />
/* Default styling for Navbar template */<br />
.navbar {<br />
display: inline;<br />
font-size: 88%;<br />
font-weight: normal;<br />
}<br />
.navbar ul {<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
.navbar li {<br />
word-spacing: -0.125em;<br />
}<br />
.navbar.mini li span {<br />
font-variant: small-caps;<br />
}<br />
/* Navbar styling when nested in infobox and navbox */<br />
.infobox .navbar {<br />
font-size: 100%;<br />
}<br />
.navbox .navbar {<br />
display: block;<br />
font-size: 100%;<br />
}<br />
.navbox-title .navbar {<br />
/* @noflip */<br />
float: left;<br />
/* @noflip */<br />
text-align: left;<br />
/* @noflip */<br />
margin-right: 0.5em;<br />
width: 6em;<br />
}<br />
<br />
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript<br />
in [[MediaWiki:Common.js]] are styled here so they can be customised. */<br />
.collapseButton {<br />
/* @noflip */<br />
float: right;<br />
font-weight: normal;<br />
/* @noflip */<br />
margin-left: 0.5em;<br />
/* @noflip */<br />
text-align: right;<br />
width: auto;<br />
}<br />
/* In navboxes, the show/hide button balances the v·d·e links<br />
from [[Template:Navbar]], so they need to be the same width. */<br />
.navbox .collapseButton {<br />
width: 6em;<br />
}<br />
<br />
/* Styling for JQuery makeCollapsible, matching that of collapseButton */<br />
.mw-collapsible-toggle {<br />
font-weight: normal;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox .mw-collapsible-toggle {<br />
width: 6em;<br />
}<br />
/* Lists in data cells are always left-aligned */<br />
.wikitable td ul,<br />
.wikitable td ol,<br />
.wikitable td dl {<br />
/* @noflip */<br />
text-align: left;<br />
}<br />
/* ...unless they also use the hlist class */<br />
.wikitable.hlist td ul,<br />
.wikitable.hlist td ol,<br />
.wikitable.hlist td dl {<br />
text-align: inherit;<br />
}</div>DaVincehttp://wiki.spheredev.org/index.php?title=MediaWiki:Common.css&diff=10161MediaWiki:Common.css2017-11-22T18:58:02Z<p>DaVince: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
@import url("http://wiki.spheredev.org/extra/league-gothic/stylesheet.css");<br />
@import url("http://wiki.spheredev.org/extra/mgopen-modata/stylesheet.css");<br />
<br />
<br />
/* Mobile */<br />
@viewport {<br />
width: device-width;<br />
zoom: 100%;<br />
}<br />
<br />
@media (max-width: 600px) {<br />
.mw-body {<br />
margin-left: 0;<br />
}<br />
div#mw-panel {<br />
position: static;<br />
top: 0;<br />
width: 100%;<br />
}<br />
}<br />
<br />
<br />
<br />
<br />
/* Everything else */<br />
<br />
<br />
.sph-cf:before,<br />
.sph-cf:after {<br />
content: " "; /* 1 */<br />
display: table; /* 2 */<br />
}<br />
<br />
.sph-cf:after {<br />
clear: both;<br />
}<br />
<br />
/*<br />
* For IE 6/7 only<br />
* Include this rule to trigger hasLayout and contain floats.<br />
*/<br />
<br />
.sph-cf {<br />
*zoom: 1;<br />
}<br />
<br />
h1, #toc h2, .toc h2, h3, h4 {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
div#content h1, div#content h2, div#content #firstHeading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
h1 {font-weight:normal;}<br />
h2 {font-family:"League Gothic",LeagueGothic,sans-serif; font-weight:normal;}<br />
<br />
#mw-content-text h2 {font-size:200%;}<br />
#toc h2, .toc h2 {font-weight:bold; text-transform:uppercase; font-size:100%;}<br />
<br />
.editsection {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
.rellink, .dablink {font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em;}<br />
<br />
#mw-head, #mw-panel, #footer, input,<br />
.mw-search-result-heading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
<br />
.sph-section {border-style:solid; border-width:1px; padding:4px; background-color:#eee; border-color:#999;}<br />
.sph-section .sph-section-title {padding:5px; font-weight:bold; background-color:#999; color:#fff;}<br />
div#content .sph-section .sph-section-title {margin-top:0;}<br />
.sph-section h3.sph-section-title {font-weight:normal;}<br />
.sph-section .sph-section-content {}<br />
<br />
.sph-section-green {background-color:#efe; border-color:#9c9;}<br />
.sph-section-green .sph-section-title {background-color:#393; color:#fff;}<br />
<br />
.sph-section-red {background-color:#fee; border-color:#fcc;}<br />
.sph-section-red .sph-section-title {background-color:#c00; color:#fff;}<br />
<br />
.sph-section-blue {background-color:#eef; border-color:#abd;}<br />
.sph-section-blue .sph-section-title {background-color:#039; color:#fff;}<br />
<br />
.sph-section-yellow {background-color:#ffe; border-color:#dba;}<br />
.sph-section-yellow .sph-section-title {background-color:#cc3; color:#fff;}<br />
<br />
.sph-disambig {text-align:center;}<br />
.sph-disambig .sph-section-content {font-style:italic;}<br />
<br />
.sph-usage {background:#eee; border:1px solid #999; text-align:center; padding:8px 4px; font-size:150%; border-radius:8px;}<br />
.sph-section .sph-usage {background:none; border:0; padding:0; margin:1em auto;}<br />
<br />
.sph-latest {text-align:center;}<br />
<br />
.sph-aside {border:solid rgb(167,215,249); border-width:1px 0; margin:1em auto;}<br />
.sph-aside>.floatleft {margin-top:0.25em;}<br />
.sph-aside h4 {font-weight:normal; font-style:italic;}<br />
<br />
.sph-front-topnav {<br />
text-align:center; font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-size:120%;<br />
background:#e8e8e8; border:1px solid #888; border-radius:4px;<br />
padding:1em;<br />
}<br />
.sph-front-topnav .sph-front-topnav-list {margin:8px auto;}<br />
<br />
.sph-directory, .sph-filepath {}<br />
.sph-directory .sph-filepath {}<br />
<br />
.nmbox {background:#F6F9ED; border:1px solid rgb(167,215,249); clear:both; font-size:85%; margin: 0.5em 0;}<br />
.nmbox .mbox-image {background:#EEF3E2; white-space: nowrap; padding: 4px 1em; border-right: 1px solid #aaaaaa;}<br />
.nmbox .mbox-text {padding:4px 1em;}<br />
.nmbox.sph-cf>.mbox-text {float:left;}<br />
.nmbox.sph-cf>.mbox-image {float:left;}<br />
<br />
.sph-notice {<br />
background:#F8EABA; border-bottom:1px solid #C0C090;<br />
margin:1em auto; padding:0.5em 0; width:80%;<br />
clear:both; text-align:center; font-weight:bold;<br />
}<br />
<br />
.mus {font-family:Symbola;}<br />
b.mus {line-height:1; font-weight:normal;}<br />
b b.mus, strong b.mus {font-weight:inherit;}<br />
<br />
.gist table.highlight {font-weight:normal;}<br />
<br />
/**** GESHI-RELATED STYLES ****/<br />
.mw-geshi.mw-code {overflow:auto; position:relative;}<br />
.mw-geshi a[href]>.kw10 {text-shadow:0 1px 0 #808080; text-shadow:0 1px 0 rgba(0,0,0,0.5);}<br />
.mw-geshi a[href]:hover>.kw10 {text-shadow:0 0 2px #806000; text-shadow:0 0 2px rgba(128,112,0,0.5);}<br />
.mw-geshi>.javascript:before {<br />
display:block; content:"JavaScript";<br />
font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-weight:bold; line-height:1;<br />
position:absolute; top:0; right:0;<br />
border:solid #aaa; border-width:0 0 1px 1px; border-radius:0 0 0 8px;<br />
padding:4px; opacity:0.50;<br />
}<br />
.mw-geshi:hover>.javascript:before {opacity:1.0;}<br />
<br />
/**** NAVBOX-RELATED STYLES ****/<br />
/* Style for horizontal lists (separator following item).<br />
Note: hlist formatting will break if the resulting HTML lacks a breakable character<br />
between list items. This happens when the following conditions are true:<br />
1) The list is made using wiki markup (where HTML is built by parser.php)<br />
2) HTMLTidy is disabled or unavailable (such as on Special: pages)<br />
In such cases, building lists with .hlist using HTML instead of wiki markup<br />
will work around this problem. See also [[Bugzilla:39617]].<br />
IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].<br />
Last updated: January 24, 2013<br />
@source mediawiki.org/wiki/Snippets/Horizontal_lists<br />
@maintainer: [[User:Edokter]]<br />
@revision: 3.1<br />
*/<br />
.skin-monobook .hlist dl,<br />
.skin-modern .hlist dl,<br />
.skin-vector .hlist dl {<br />
line-height: 1.5em;<br />
}<br />
.hlist dl,<br />
.hlist ol,<br />
.hlist ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
/* Display list items inline and make them nowrap */<br />
.hlist dd,<br />
.hlist dt,<br />
.hlist li {<br />
margin: 0;<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
/* Allow wrapping for list items (in tight spaces) */<br />
.hlist.hwrap dd,<br />
.hlist.hwrap dt,<br />
.hlist.hwrap li {<br />
white-space: normal;<br />
}<br />
/* Display nested lists inline and allow them to wrap */<br />
.hlist dl dl, .hlist dl ol, .hlist dl ul,<br />
.hlist ol dl, .hlist ol ol, .hlist ol ul,<br />
.hlist ul dl, .hlist ul ol, .hlist ul ul {<br />
display: inline;<br />
white-space: normal;<br />
}<br />
/* Generate interpuncts */<br />
.hlist dt:after {<br />
content: ":";<br />
}<br />
.hlist dd:after,<br />
.hlist li:after {<br />
content: " ·";<br />
font-weight: bold;<br />
}<br />
.hlist dd:last-child:after,<br />
.hlist dt:last-child:after,<br />
.hlist li:last-child:after {<br />
content: none;<br />
}<br />
/* For IE8 */<br />
.hlist dd.hlist-last-child:after,<br />
.hlist dt.hlist-last-child:after,<br />
.hlist li.hlist-last-child:after {<br />
content: none;<br />
}<br />
/* Add parentheses around nested lists */<br />
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,<br />
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,<br />
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {<br />
content: "(";<br />
font-weight: normal;<br />
}<br />
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,<br />
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,<br />
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* For IE8 */<br />
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,<br />
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,<br />
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* Put numbers in front of ordered list items */<br />
.hlist.hnum ol {<br />
counter-reset: list-item;<br />
}<br />
.hlist.hnum ol > li {<br />
counter-increment: list-item;<br />
}<br />
.hlist.hnum ol > li:before {<br />
content: counter(list-item) " ";<br />
}<br />
.hlist.hnum dd ol > li:first-child:before,<br />
.hlist.hnum dt ol > li:first-child:before,<br />
.hlist.hnum li ol > li:first-child:before {<br />
content: "(" counter(list-item) " ";<br />
}<br />
/* Default style for navigation boxes */<br />
.navbox { /* Navbox container style */<br />
border: 1px solid #aaa;<br />
width: 100%;<br />
margin: auto;<br />
clear: both;<br />
font-size: 88%;<br />
text-align: center;<br />
padding: 1px;<br />
}<br />
.navbox-inner,<br />
.navbox-subgroup {<br />
width: 100%;<br />
}<br />
.navbox-group,<br />
.navbox-title,<br />
.navbox-abovebelow {<br />
padding: 0.25em 1em; /* Title, group and above/below styles */<br />
line-height: 1.5em;<br />
text-align: center;<br />
}<br />
th.navbox-group { /* Group style */<br />
white-space: nowrap;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox,<br />
.navbox-subgroup {<br />
background: #fdfdfd; /* Background color */<br />
}<br />
.navbox-list {<br />
line-height: 1.8em;<br />
border-color: #fdfdfd; /* Must match background color */<br />
}<br />
.navbox th,<br />
.navbox-title {<br />
background: #ccccff; /* Level 1 color */<br />
}<br />
.navbox-abovebelow,<br />
th.navbox-group,<br />
.navbox-subgroup .navbox-title {<br />
background: #ddddff; /* Level 2 color */<br />
}<br />
.navbox-subgroup .navbox-group,<br />
.navbox-subgroup .navbox-abovebelow {<br />
background: #e6e6ff; /* Level 3 color */<br />
}<br />
.navbox-even {<br />
background: #f7f7f7; /* Even row striping */<br />
}<br />
.navbox-odd {<br />
background: transparent; /* Odd row striping */<br />
}<br />
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */<br />
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */<br />
}<br />
.navbox .hlist td dl,<br />
.navbox .hlist td ol,<br />
.navbox .hlist td ul,<br />
.navbox td.hlist dl,<br />
.navbox td.hlist ol,<br />
.navbox td.hlist ul {<br />
padding: 0.125em 0; /* Adjust hlist padding in navboxes */<br />
}<br />
ol + table.navbox,<br />
ul + table.navbox {<br />
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */<br />
}<br />
<br />
/* Default styling for Navbar template */<br />
.navbar {<br />
display: inline;<br />
font-size: 88%;<br />
font-weight: normal;<br />
}<br />
.navbar ul {<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
.navbar li {<br />
word-spacing: -0.125em;<br />
}<br />
.navbar.mini li span {<br />
font-variant: small-caps;<br />
}<br />
/* Navbar styling when nested in infobox and navbox */<br />
.infobox .navbar {<br />
font-size: 100%;<br />
}<br />
.navbox .navbar {<br />
display: block;<br />
font-size: 100%;<br />
}<br />
.navbox-title .navbar {<br />
/* @noflip */<br />
float: left;<br />
/* @noflip */<br />
text-align: left;<br />
/* @noflip */<br />
margin-right: 0.5em;<br />
width: 6em;<br />
}<br />
<br />
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript<br />
in [[MediaWiki:Common.js]] are styled here so they can be customised. */<br />
.collapseButton {<br />
/* @noflip */<br />
float: right;<br />
font-weight: normal;<br />
/* @noflip */<br />
margin-left: 0.5em;<br />
/* @noflip */<br />
text-align: right;<br />
width: auto;<br />
}<br />
/* In navboxes, the show/hide button balances the v·d·e links<br />
from [[Template:Navbar]], so they need to be the same width. */<br />
.navbox .collapseButton {<br />
width: 6em;<br />
}<br />
<br />
/* Styling for JQuery makeCollapsible, matching that of collapseButton */<br />
.mw-collapsible-toggle {<br />
font-weight: normal;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox .mw-collapsible-toggle {<br />
width: 6em;<br />
}<br />
/* Lists in data cells are always left-aligned */<br />
.wikitable td ul,<br />
.wikitable td ol,<br />
.wikitable td dl {<br />
/* @noflip */<br />
text-align: left;<br />
}<br />
/* ...unless they also use the hlist class */<br />
.wikitable.hlist td ul,<br />
.wikitable.hlist td ol,<br />
.wikitable.hlist td dl {<br />
text-align: inherit;<br />
}</div>DaVincehttp://wiki.spheredev.org/index.php?title=MediaWiki:Common.css&diff=10160MediaWiki:Common.css2017-11-22T18:53:58Z<p>DaVince: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
@import url("http://wiki.spheredev.org/extra/league-gothic/stylesheet.css");<br />
@import url("http://wiki.spheredev.org/extra/mgopen-modata/stylesheet.css");<br />
<br />
<br />
/* Mobile */<br />
@viewport {<br />
width: device-width;<br />
zoom: 1.0;<br />
}<br />
<br />
@media (max-width: 600px) {<br />
.mw-body {<br />
margin-left: 0;<br />
}<br />
div#mw-panel {<br />
position: static;<br />
top: 0;<br />
width: 100%;<br />
}<br />
}<br />
<br />
<br />
<br />
<br />
/* Everything else */<br />
<br />
<br />
.sph-cf:before,<br />
.sph-cf:after {<br />
content: " "; /* 1 */<br />
display: table; /* 2 */<br />
}<br />
<br />
.sph-cf:after {<br />
clear: both;<br />
}<br />
<br />
/*<br />
* For IE 6/7 only<br />
* Include this rule to trigger hasLayout and contain floats.<br />
*/<br />
<br />
.sph-cf {<br />
*zoom: 1;<br />
}<br />
<br />
h1, #toc h2, .toc h2, h3, h4 {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
div#content h1, div#content h2, div#content #firstHeading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
h1 {font-weight:normal;}<br />
h2 {font-family:"League Gothic",LeagueGothic,sans-serif; font-weight:normal;}<br />
<br />
#mw-content-text h2 {font-size:200%;}<br />
#toc h2, .toc h2 {font-weight:bold; text-transform:uppercase; font-size:100%;}<br />
<br />
.editsection {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
.rellink, .dablink {font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em;}<br />
<br />
#mw-head, #mw-panel, #footer, input,<br />
.mw-search-result-heading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
<br />
.sph-section {border-style:solid; border-width:1px; padding:4px; background-color:#eee; border-color:#999;}<br />
.sph-section .sph-section-title {padding:5px; font-weight:bold; background-color:#999; color:#fff;}<br />
div#content .sph-section .sph-section-title {margin-top:0;}<br />
.sph-section h3.sph-section-title {font-weight:normal;}<br />
.sph-section .sph-section-content {}<br />
<br />
.sph-section-green {background-color:#efe; border-color:#9c9;}<br />
.sph-section-green .sph-section-title {background-color:#393; color:#fff;}<br />
<br />
.sph-section-red {background-color:#fee; border-color:#fcc;}<br />
.sph-section-red .sph-section-title {background-color:#c00; color:#fff;}<br />
<br />
.sph-section-blue {background-color:#eef; border-color:#abd;}<br />
.sph-section-blue .sph-section-title {background-color:#039; color:#fff;}<br />
<br />
.sph-section-yellow {background-color:#ffe; border-color:#dba;}<br />
.sph-section-yellow .sph-section-title {background-color:#cc3; color:#fff;}<br />
<br />
.sph-disambig {text-align:center;}<br />
.sph-disambig .sph-section-content {font-style:italic;}<br />
<br />
.sph-usage {background:#eee; border:1px solid #999; text-align:center; padding:8px 4px; font-size:150%; border-radius:8px;}<br />
.sph-section .sph-usage {background:none; border:0; padding:0; margin:1em auto;}<br />
<br />
.sph-latest {text-align:center;}<br />
<br />
.sph-aside {border:solid rgb(167,215,249); border-width:1px 0; margin:1em auto;}<br />
.sph-aside>.floatleft {margin-top:0.25em;}<br />
.sph-aside h4 {font-weight:normal; font-style:italic;}<br />
<br />
.sph-front-topnav {<br />
text-align:center; font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-size:120%;<br />
background:#e8e8e8; border:1px solid #888; border-radius:4px;<br />
padding:1em;<br />
}<br />
.sph-front-topnav .sph-front-topnav-list {margin:8px auto;}<br />
<br />
.sph-directory, .sph-filepath {}<br />
.sph-directory .sph-filepath {}<br />
<br />
.nmbox {background:#F6F9ED; border:1px solid rgb(167,215,249); clear:both; font-size:85%; margin: 0.5em 0;}<br />
.nmbox .mbox-image {background:#EEF3E2; white-space: nowrap; padding: 4px 1em; border-right: 1px solid #aaaaaa;}<br />
.nmbox .mbox-text {padding:4px 1em;}<br />
.nmbox.sph-cf>.mbox-text {float:left;}<br />
.nmbox.sph-cf>.mbox-image {float:left;}<br />
<br />
.sph-notice {<br />
background:#F8EABA; border-bottom:1px solid #C0C090;<br />
margin:1em auto; padding:0.5em 0; width:80%;<br />
clear:both; text-align:center; font-weight:bold;<br />
}<br />
<br />
.mus {font-family:Symbola;}<br />
b.mus {line-height:1; font-weight:normal;}<br />
b b.mus, strong b.mus {font-weight:inherit;}<br />
<br />
.gist table.highlight {font-weight:normal;}<br />
<br />
/**** GESHI-RELATED STYLES ****/<br />
.mw-geshi.mw-code {overflow:auto; position:relative;}<br />
.mw-geshi a[href]>.kw10 {text-shadow:0 1px 0 #808080; text-shadow:0 1px 0 rgba(0,0,0,0.5);}<br />
.mw-geshi a[href]:hover>.kw10 {text-shadow:0 0 2px #806000; text-shadow:0 0 2px rgba(128,112,0,0.5);}<br />
.mw-geshi>.javascript:before {<br />
display:block; content:"JavaScript";<br />
font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-weight:bold; line-height:1;<br />
position:absolute; top:0; right:0;<br />
border:solid #aaa; border-width:0 0 1px 1px; border-radius:0 0 0 8px;<br />
padding:4px; opacity:0.50;<br />
}<br />
.mw-geshi:hover>.javascript:before {opacity:1.0;}<br />
<br />
/**** NAVBOX-RELATED STYLES ****/<br />
/* Style for horizontal lists (separator following item).<br />
Note: hlist formatting will break if the resulting HTML lacks a breakable character<br />
between list items. This happens when the following conditions are true:<br />
1) The list is made using wiki markup (where HTML is built by parser.php)<br />
2) HTMLTidy is disabled or unavailable (such as on Special: pages)<br />
In such cases, building lists with .hlist using HTML instead of wiki markup<br />
will work around this problem. See also [[Bugzilla:39617]].<br />
IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].<br />
Last updated: January 24, 2013<br />
@source mediawiki.org/wiki/Snippets/Horizontal_lists<br />
@maintainer: [[User:Edokter]]<br />
@revision: 3.1<br />
*/<br />
.skin-monobook .hlist dl,<br />
.skin-modern .hlist dl,<br />
.skin-vector .hlist dl {<br />
line-height: 1.5em;<br />
}<br />
.hlist dl,<br />
.hlist ol,<br />
.hlist ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
/* Display list items inline and make them nowrap */<br />
.hlist dd,<br />
.hlist dt,<br />
.hlist li {<br />
margin: 0;<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
/* Allow wrapping for list items (in tight spaces) */<br />
.hlist.hwrap dd,<br />
.hlist.hwrap dt,<br />
.hlist.hwrap li {<br />
white-space: normal;<br />
}<br />
/* Display nested lists inline and allow them to wrap */<br />
.hlist dl dl, .hlist dl ol, .hlist dl ul,<br />
.hlist ol dl, .hlist ol ol, .hlist ol ul,<br />
.hlist ul dl, .hlist ul ol, .hlist ul ul {<br />
display: inline;<br />
white-space: normal;<br />
}<br />
/* Generate interpuncts */<br />
.hlist dt:after {<br />
content: ":";<br />
}<br />
.hlist dd:after,<br />
.hlist li:after {<br />
content: " ·";<br />
font-weight: bold;<br />
}<br />
.hlist dd:last-child:after,<br />
.hlist dt:last-child:after,<br />
.hlist li:last-child:after {<br />
content: none;<br />
}<br />
/* For IE8 */<br />
.hlist dd.hlist-last-child:after,<br />
.hlist dt.hlist-last-child:after,<br />
.hlist li.hlist-last-child:after {<br />
content: none;<br />
}<br />
/* Add parentheses around nested lists */<br />
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,<br />
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,<br />
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {<br />
content: "(";<br />
font-weight: normal;<br />
}<br />
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,<br />
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,<br />
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* For IE8 */<br />
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,<br />
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,<br />
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* Put numbers in front of ordered list items */<br />
.hlist.hnum ol {<br />
counter-reset: list-item;<br />
}<br />
.hlist.hnum ol > li {<br />
counter-increment: list-item;<br />
}<br />
.hlist.hnum ol > li:before {<br />
content: counter(list-item) " ";<br />
}<br />
.hlist.hnum dd ol > li:first-child:before,<br />
.hlist.hnum dt ol > li:first-child:before,<br />
.hlist.hnum li ol > li:first-child:before {<br />
content: "(" counter(list-item) " ";<br />
}<br />
/* Default style for navigation boxes */<br />
.navbox { /* Navbox container style */<br />
border: 1px solid #aaa;<br />
width: 100%;<br />
margin: auto;<br />
clear: both;<br />
font-size: 88%;<br />
text-align: center;<br />
padding: 1px;<br />
}<br />
.navbox-inner,<br />
.navbox-subgroup {<br />
width: 100%;<br />
}<br />
.navbox-group,<br />
.navbox-title,<br />
.navbox-abovebelow {<br />
padding: 0.25em 1em; /* Title, group and above/below styles */<br />
line-height: 1.5em;<br />
text-align: center;<br />
}<br />
th.navbox-group { /* Group style */<br />
white-space: nowrap;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox,<br />
.navbox-subgroup {<br />
background: #fdfdfd; /* Background color */<br />
}<br />
.navbox-list {<br />
line-height: 1.8em;<br />
border-color: #fdfdfd; /* Must match background color */<br />
}<br />
.navbox th,<br />
.navbox-title {<br />
background: #ccccff; /* Level 1 color */<br />
}<br />
.navbox-abovebelow,<br />
th.navbox-group,<br />
.navbox-subgroup .navbox-title {<br />
background: #ddddff; /* Level 2 color */<br />
}<br />
.navbox-subgroup .navbox-group,<br />
.navbox-subgroup .navbox-abovebelow {<br />
background: #e6e6ff; /* Level 3 color */<br />
}<br />
.navbox-even {<br />
background: #f7f7f7; /* Even row striping */<br />
}<br />
.navbox-odd {<br />
background: transparent; /* Odd row striping */<br />
}<br />
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */<br />
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */<br />
}<br />
.navbox .hlist td dl,<br />
.navbox .hlist td ol,<br />
.navbox .hlist td ul,<br />
.navbox td.hlist dl,<br />
.navbox td.hlist ol,<br />
.navbox td.hlist ul {<br />
padding: 0.125em 0; /* Adjust hlist padding in navboxes */<br />
}<br />
ol + table.navbox,<br />
ul + table.navbox {<br />
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */<br />
}<br />
<br />
/* Default styling for Navbar template */<br />
.navbar {<br />
display: inline;<br />
font-size: 88%;<br />
font-weight: normal;<br />
}<br />
.navbar ul {<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
.navbar li {<br />
word-spacing: -0.125em;<br />
}<br />
.navbar.mini li span {<br />
font-variant: small-caps;<br />
}<br />
/* Navbar styling when nested in infobox and navbox */<br />
.infobox .navbar {<br />
font-size: 100%;<br />
}<br />
.navbox .navbar {<br />
display: block;<br />
font-size: 100%;<br />
}<br />
.navbox-title .navbar {<br />
/* @noflip */<br />
float: left;<br />
/* @noflip */<br />
text-align: left;<br />
/* @noflip */<br />
margin-right: 0.5em;<br />
width: 6em;<br />
}<br />
<br />
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript<br />
in [[MediaWiki:Common.js]] are styled here so they can be customised. */<br />
.collapseButton {<br />
/* @noflip */<br />
float: right;<br />
font-weight: normal;<br />
/* @noflip */<br />
margin-left: 0.5em;<br />
/* @noflip */<br />
text-align: right;<br />
width: auto;<br />
}<br />
/* In navboxes, the show/hide button balances the v·d·e links<br />
from [[Template:Navbar]], so they need to be the same width. */<br />
.navbox .collapseButton {<br />
width: 6em;<br />
}<br />
<br />
/* Styling for JQuery makeCollapsible, matching that of collapseButton */<br />
.mw-collapsible-toggle {<br />
font-weight: normal;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox .mw-collapsible-toggle {<br />
width: 6em;<br />
}<br />
/* Lists in data cells are always left-aligned */<br />
.wikitable td ul,<br />
.wikitable td ol,<br />
.wikitable td dl {<br />
/* @noflip */<br />
text-align: left;<br />
}<br />
/* ...unless they also use the hlist class */<br />
.wikitable.hlist td ul,<br />
.wikitable.hlist td ol,<br />
.wikitable.hlist td dl {<br />
text-align: inherit;<br />
}</div>DaVincehttp://wiki.spheredev.org/index.php?title=MediaWiki:Common.css&diff=10159MediaWiki:Common.css2017-11-22T18:52:54Z<p>DaVince: Experimental: added mobile compatibility (main menu is at the bottom of the page)</p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
@import url("http://wiki.spheredev.org/extra/league-gothic/stylesheet.css");<br />
@import url("http://wiki.spheredev.org/extra/mgopen-modata/stylesheet.css");<br />
<br />
<br />
/* Mobile */<br />
@viewport {<br />
width: device-width;<br />
zoom: 1.0;<br />
}<br />
<br />
@media (max-width: 600px) {<br />
.mw-body {<br />
margin-left: 0;<br />
}<br />
.mw-navigation .mw-panel {<br />
position: static;<br />
top: 0;<br />
width: 100%;<br />
}<br />
}<br />
<br />
<br />
<br />
<br />
/* Everything else */<br />
<br />
<br />
.sph-cf:before,<br />
.sph-cf:after {<br />
content: " "; /* 1 */<br />
display: table; /* 2 */<br />
}<br />
<br />
.sph-cf:after {<br />
clear: both;<br />
}<br />
<br />
/*<br />
* For IE 6/7 only<br />
* Include this rule to trigger hasLayout and contain floats.<br />
*/<br />
<br />
.sph-cf {<br />
*zoom: 1;<br />
}<br />
<br />
h1, #toc h2, .toc h2, h3, h4 {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
div#content h1, div#content h2, div#content #firstHeading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
h1 {font-weight:normal;}<br />
h2 {font-family:"League Gothic",LeagueGothic,sans-serif; font-weight:normal;}<br />
<br />
#mw-content-text h2 {font-size:200%;}<br />
#toc h2, .toc h2 {font-weight:bold; text-transform:uppercase; font-size:100%;}<br />
<br />
.editsection {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
.rellink, .dablink {font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em;}<br />
<br />
#mw-head, #mw-panel, #footer, input,<br />
.mw-search-result-heading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
<br />
.sph-section {border-style:solid; border-width:1px; padding:4px; background-color:#eee; border-color:#999;}<br />
.sph-section .sph-section-title {padding:5px; font-weight:bold; background-color:#999; color:#fff;}<br />
div#content .sph-section .sph-section-title {margin-top:0;}<br />
.sph-section h3.sph-section-title {font-weight:normal;}<br />
.sph-section .sph-section-content {}<br />
<br />
.sph-section-green {background-color:#efe; border-color:#9c9;}<br />
.sph-section-green .sph-section-title {background-color:#393; color:#fff;}<br />
<br />
.sph-section-red {background-color:#fee; border-color:#fcc;}<br />
.sph-section-red .sph-section-title {background-color:#c00; color:#fff;}<br />
<br />
.sph-section-blue {background-color:#eef; border-color:#abd;}<br />
.sph-section-blue .sph-section-title {background-color:#039; color:#fff;}<br />
<br />
.sph-section-yellow {background-color:#ffe; border-color:#dba;}<br />
.sph-section-yellow .sph-section-title {background-color:#cc3; color:#fff;}<br />
<br />
.sph-disambig {text-align:center;}<br />
.sph-disambig .sph-section-content {font-style:italic;}<br />
<br />
.sph-usage {background:#eee; border:1px solid #999; text-align:center; padding:8px 4px; font-size:150%; border-radius:8px;}<br />
.sph-section .sph-usage {background:none; border:0; padding:0; margin:1em auto;}<br />
<br />
.sph-latest {text-align:center;}<br />
<br />
.sph-aside {border:solid rgb(167,215,249); border-width:1px 0; margin:1em auto;}<br />
.sph-aside>.floatleft {margin-top:0.25em;}<br />
.sph-aside h4 {font-weight:normal; font-style:italic;}<br />
<br />
.sph-front-topnav {<br />
text-align:center; font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-size:120%;<br />
background:#e8e8e8; border:1px solid #888; border-radius:4px;<br />
padding:1em;<br />
}<br />
.sph-front-topnav .sph-front-topnav-list {margin:8px auto;}<br />
<br />
.sph-directory, .sph-filepath {}<br />
.sph-directory .sph-filepath {}<br />
<br />
.nmbox {background:#F6F9ED; border:1px solid rgb(167,215,249); clear:both; font-size:85%; margin: 0.5em 0;}<br />
.nmbox .mbox-image {background:#EEF3E2; white-space: nowrap; padding: 4px 1em; border-right: 1px solid #aaaaaa;}<br />
.nmbox .mbox-text {padding:4px 1em;}<br />
.nmbox.sph-cf>.mbox-text {float:left;}<br />
.nmbox.sph-cf>.mbox-image {float:left;}<br />
<br />
.sph-notice {<br />
background:#F8EABA; border-bottom:1px solid #C0C090;<br />
margin:1em auto; padding:0.5em 0; width:80%;<br />
clear:both; text-align:center; font-weight:bold;<br />
}<br />
<br />
.mus {font-family:Symbola;}<br />
b.mus {line-height:1; font-weight:normal;}<br />
b b.mus, strong b.mus {font-weight:inherit;}<br />
<br />
.gist table.highlight {font-weight:normal;}<br />
<br />
/**** GESHI-RELATED STYLES ****/<br />
.mw-geshi.mw-code {overflow:auto; position:relative;}<br />
.mw-geshi a[href]>.kw10 {text-shadow:0 1px 0 #808080; text-shadow:0 1px 0 rgba(0,0,0,0.5);}<br />
.mw-geshi a[href]:hover>.kw10 {text-shadow:0 0 2px #806000; text-shadow:0 0 2px rgba(128,112,0,0.5);}<br />
.mw-geshi>.javascript:before {<br />
display:block; content:"JavaScript";<br />
font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-weight:bold; line-height:1;<br />
position:absolute; top:0; right:0;<br />
border:solid #aaa; border-width:0 0 1px 1px; border-radius:0 0 0 8px;<br />
padding:4px; opacity:0.50;<br />
}<br />
.mw-geshi:hover>.javascript:before {opacity:1.0;}<br />
<br />
/**** NAVBOX-RELATED STYLES ****/<br />
/* Style for horizontal lists (separator following item).<br />
Note: hlist formatting will break if the resulting HTML lacks a breakable character<br />
between list items. This happens when the following conditions are true:<br />
1) The list is made using wiki markup (where HTML is built by parser.php)<br />
2) HTMLTidy is disabled or unavailable (such as on Special: pages)<br />
In such cases, building lists with .hlist using HTML instead of wiki markup<br />
will work around this problem. See also [[Bugzilla:39617]].<br />
IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].<br />
Last updated: January 24, 2013<br />
@source mediawiki.org/wiki/Snippets/Horizontal_lists<br />
@maintainer: [[User:Edokter]]<br />
@revision: 3.1<br />
*/<br />
.skin-monobook .hlist dl,<br />
.skin-modern .hlist dl,<br />
.skin-vector .hlist dl {<br />
line-height: 1.5em;<br />
}<br />
.hlist dl,<br />
.hlist ol,<br />
.hlist ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
/* Display list items inline and make them nowrap */<br />
.hlist dd,<br />
.hlist dt,<br />
.hlist li {<br />
margin: 0;<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
/* Allow wrapping for list items (in tight spaces) */<br />
.hlist.hwrap dd,<br />
.hlist.hwrap dt,<br />
.hlist.hwrap li {<br />
white-space: normal;<br />
}<br />
/* Display nested lists inline and allow them to wrap */<br />
.hlist dl dl, .hlist dl ol, .hlist dl ul,<br />
.hlist ol dl, .hlist ol ol, .hlist ol ul,<br />
.hlist ul dl, .hlist ul ol, .hlist ul ul {<br />
display: inline;<br />
white-space: normal;<br />
}<br />
/* Generate interpuncts */<br />
.hlist dt:after {<br />
content: ":";<br />
}<br />
.hlist dd:after,<br />
.hlist li:after {<br />
content: " ·";<br />
font-weight: bold;<br />
}<br />
.hlist dd:last-child:after,<br />
.hlist dt:last-child:after,<br />
.hlist li:last-child:after {<br />
content: none;<br />
}<br />
/* For IE8 */<br />
.hlist dd.hlist-last-child:after,<br />
.hlist dt.hlist-last-child:after,<br />
.hlist li.hlist-last-child:after {<br />
content: none;<br />
}<br />
/* Add parentheses around nested lists */<br />
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,<br />
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,<br />
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {<br />
content: "(";<br />
font-weight: normal;<br />
}<br />
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,<br />
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,<br />
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* For IE8 */<br />
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,<br />
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,<br />
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* Put numbers in front of ordered list items */<br />
.hlist.hnum ol {<br />
counter-reset: list-item;<br />
}<br />
.hlist.hnum ol > li {<br />
counter-increment: list-item;<br />
}<br />
.hlist.hnum ol > li:before {<br />
content: counter(list-item) " ";<br />
}<br />
.hlist.hnum dd ol > li:first-child:before,<br />
.hlist.hnum dt ol > li:first-child:before,<br />
.hlist.hnum li ol > li:first-child:before {<br />
content: "(" counter(list-item) " ";<br />
}<br />
/* Default style for navigation boxes */<br />
.navbox { /* Navbox container style */<br />
border: 1px solid #aaa;<br />
width: 100%;<br />
margin: auto;<br />
clear: both;<br />
font-size: 88%;<br />
text-align: center;<br />
padding: 1px;<br />
}<br />
.navbox-inner,<br />
.navbox-subgroup {<br />
width: 100%;<br />
}<br />
.navbox-group,<br />
.navbox-title,<br />
.navbox-abovebelow {<br />
padding: 0.25em 1em; /* Title, group and above/below styles */<br />
line-height: 1.5em;<br />
text-align: center;<br />
}<br />
th.navbox-group { /* Group style */<br />
white-space: nowrap;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox,<br />
.navbox-subgroup {<br />
background: #fdfdfd; /* Background color */<br />
}<br />
.navbox-list {<br />
line-height: 1.8em;<br />
border-color: #fdfdfd; /* Must match background color */<br />
}<br />
.navbox th,<br />
.navbox-title {<br />
background: #ccccff; /* Level 1 color */<br />
}<br />
.navbox-abovebelow,<br />
th.navbox-group,<br />
.navbox-subgroup .navbox-title {<br />
background: #ddddff; /* Level 2 color */<br />
}<br />
.navbox-subgroup .navbox-group,<br />
.navbox-subgroup .navbox-abovebelow {<br />
background: #e6e6ff; /* Level 3 color */<br />
}<br />
.navbox-even {<br />
background: #f7f7f7; /* Even row striping */<br />
}<br />
.navbox-odd {<br />
background: transparent; /* Odd row striping */<br />
}<br />
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */<br />
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */<br />
}<br />
.navbox .hlist td dl,<br />
.navbox .hlist td ol,<br />
.navbox .hlist td ul,<br />
.navbox td.hlist dl,<br />
.navbox td.hlist ol,<br />
.navbox td.hlist ul {<br />
padding: 0.125em 0; /* Adjust hlist padding in navboxes */<br />
}<br />
ol + table.navbox,<br />
ul + table.navbox {<br />
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */<br />
}<br />
<br />
/* Default styling for Navbar template */<br />
.navbar {<br />
display: inline;<br />
font-size: 88%;<br />
font-weight: normal;<br />
}<br />
.navbar ul {<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
.navbar li {<br />
word-spacing: -0.125em;<br />
}<br />
.navbar.mini li span {<br />
font-variant: small-caps;<br />
}<br />
/* Navbar styling when nested in infobox and navbox */<br />
.infobox .navbar {<br />
font-size: 100%;<br />
}<br />
.navbox .navbar {<br />
display: block;<br />
font-size: 100%;<br />
}<br />
.navbox-title .navbar {<br />
/* @noflip */<br />
float: left;<br />
/* @noflip */<br />
text-align: left;<br />
/* @noflip */<br />
margin-right: 0.5em;<br />
width: 6em;<br />
}<br />
<br />
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript<br />
in [[MediaWiki:Common.js]] are styled here so they can be customised. */<br />
.collapseButton {<br />
/* @noflip */<br />
float: right;<br />
font-weight: normal;<br />
/* @noflip */<br />
margin-left: 0.5em;<br />
/* @noflip */<br />
text-align: right;<br />
width: auto;<br />
}<br />
/* In navboxes, the show/hide button balances the v·d·e links<br />
from [[Template:Navbar]], so they need to be the same width. */<br />
.navbox .collapseButton {<br />
width: 6em;<br />
}<br />
<br />
/* Styling for JQuery makeCollapsible, matching that of collapseButton */<br />
.mw-collapsible-toggle {<br />
font-weight: normal;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox .mw-collapsible-toggle {<br />
width: 6em;<br />
}<br />
/* Lists in data cells are always left-aligned */<br />
.wikitable td ul,<br />
.wikitable td ol,<br />
.wikitable td dl {<br />
/* @noflip */<br />
text-align: left;<br />
}<br />
/* ...unless they also use the hlist class */<br />
.wikitable.hlist td ul,<br />
.wikitable.hlist td ol,<br />
.wikitable.hlist td dl {<br />
text-align: inherit;<br />
}</div>DaVincehttp://wiki.spheredev.org/index.php?title=SphereFS&diff=10155SphereFS2017-10-30T18:48:05Z<p>DaVince: /* Prefixes */ Added ./ for convenience</p>
<hr />
<div>'''SphereFS''' is a standardized system used by Sphere for unambiguously specifying pathnames of files and directories within the sandboxed JavaScript environment.<br />
<br />
A canonical SphereFS pathname consists of a prefix, for example <tt>@/</tt> or <tt>~/</tt>, followed by one or more directory components separated by slashes, and finally an optional filename. Each prefix is either a unique root in itself or else an alias for a directory within one of those roots. Prefixes other than <tt>~/</tt> are write-protected, and it is not possible to reference files outside the sandbox. OS paths such as '''C:\file.txt''' or '''/usr/bin/eatypig''' are not legal within the SphereFS sandbox, nor are relative paths that extend uplevel from a prefix, e.g. '''@/../../maggie.fat'''. Passing such a path to a Sphere API function expecting a file or directory name will cause an exception.<br />
<br />
__TOC__<br />
<br />
== Introduction ==<br />
<br />
TODO: write this section<br />
<br />
== Prefixes ==<br />
<br />
{| class="wikitable" style="max-width: 700px;"<br />
! Prefix<br />
! Location<br />
! Details<br />
|-<br />
| @/<br />
| Project root<br />
| The root of the game's sandboxed file system. Usually redundant, but can be useful to qualify filenames in situations where a bare SphereFS filename will be ambiguous, for example in an `import` declaration. This directory is read-only; trying to save or modify anything here will cause a TypeError to be thrown.<br />
|-<br />
| $/<br />
| Startup script directory<br />
| The directory containing the startup script. This is mostly provided as a convenience for specifying module names in `import` declarations.<br />
|-<br />
| #/<br />
| System directory<br />
| The engine's system directory. This contains assets included with the engine. As with `@/`, this is read-only to Sphere games.<br />
|-<br />
| ~/<br />
| Save directory<br />
| The current user's save data directory (note: requires a save ID; refer to the section on `game.json` above). This is generally used to store save data and such where the user can easily access it.<br />
|-<br />
| ./<br />
| Current script's directory<br />
| Any script that's not the main startup script could technically be anywhere in your project. For example, in a subdirectory. This prefix will refer to that specific subdirectory. Useful if you're including scripts and libraries from other people or if you want to organize your scripts.<br />
|}<br />
<br />
== Path Resolution ==<br />
<br />
TODO: write this section too<br />
<br />
== Save ID ==<br />
<br />
In order for a game to use the <tt>~/</tt> prefix, it must include a '''save ID ''' in its JSON manifest. The save ID should be unique for each game or series and typically takes the form <tt>''authorName''.''gameName''</tt>, where both parts are written in camelCase. For example, ''Spectacles: Bruce's Story'''s save ID is <tt>fatCerberus.spectacles</tt>.<br />
<br />
<br />
<br />
[[Category:Sphere 2 API]]</div>DaVincehttp://wiki.spheredev.org/index.php?title=API:Functions&diff=10154API:Functions2017-10-29T20:38:34Z<p>DaVince: Added category</p>
<hr />
<div>{{DISPLAYTITLE:Sphere v2 API}}<br />
<br />
The '''Sphere API''' is the collective name for the set of bindings (functions, objects, and methods) available for use by all Sphere games. The API provides access to a host of convenient features, allowing you to get up and running quickly.<br />
<br />
<noinclude><br />
{{section|sph-section-green|Making new function/object pages|Simple steps:<br />
#Before getting started, please check the [[Article standards and practices]].<br />
#Click a red link.<br />
#Place the following code in the empty edit box:<br />
##For a new function: <code><nowiki>{{subst:functemp|preamble=REPLACEME|function=REPLACEME|object=REPLACEME|returns=REPLACEME|params=REPLACEME}}</nowiki></code><br />
##For a new object: <code><nowiki>{{subst:objecttemp|preamble=REPLACEME|function=REPLACEME|object=REPLACEME|returns=REPLACEME|params=REPLACEME}}</nowiki></code><br />
#Check the minor edit flag and save.<br />
#Click 'edit' at the top of the page to add content.<br />
#Try to be [http://en.wiktionary.org/wiki/objective objective] when writing, and save when you're done.<br />
#Remove description from this page, add page link to list at the top of the matching section.<br />
}}<br />
</noinclude><br />
__TOC__<br />
<br />
== Core API ==<br />
<br />
The '''Core API''' provides low-level access to the engine's features and includes all bindings provided directly by the engine. These bindings are exposed to the global scope and can be used without importing any extra modules.<br />
<br />
=== Sphere Game Platform ===<br />
<br />
<tt><br />
* [[API:Sphere.APILevel|Sphere.APILevel]]<br />
* [[API:Sphere.Game|Sphere.Game]]<br />
* [[API:Sphere.Platform|Sphere.Platform]]<br />
* [[API:Sphere.Version|Sphere.Version]]<br />
* [[API:Sphere.frameRate|Sphere.frameRate]]<br />
* [[API:Sphere.abort|Sphere.abort()]]<br />
* [[API:Sphere.now|Sphere.now()]]<br />
* [[API:Sphere.restart|Sphere.restart()]]<br />
* [[API:Sphere.exit|Sphere.shutDown()]]<br />
* [[API:Sphere.sleep|Sphere.sleep()]]<br />
</tt><br />
<br />
=== Debugging ===<br />
<br />
<tt><br />
* [[API:SSj.flipScreen|SSj.flipScreen()]]<br />
* [[API:SSj.log|SSj.log()]]<br />
* [[API:SSj.trace|SSj.trace()]]<br />
</tt><br />
<br />
=== Files and Directories ===<br />
<br />
<tt><br />
* [[API:DirectoryStream|new DirectoryStream()]]<br />
** [[API:DirectoryStream::fileCount|DirectoryStream::fileCount]]<br />
** [[API:DirectoryStream::fileName|DirectoryStream::fileName]]<br />
** [[API:DirectoryStream::position|DirectoryStream::position]]<br />
** [[API:DirectoryStream::dispose|DirectoryStream::dispose()]]<br />
** [[API:DirectoryStream::next|DirectoryStream::next()]]<br />
** [[API:DirectoryStream::rewind|DirectoryStream::rewind()]]<br />
* [[API:FileStream|new FileStream()]]<br />
** [[API:FileStream::fileName|FileStream::fileName]]<br />
** [[API:FileStream::fileSize|FileStream::fileSize]]<br />
** [[API:FileStream::position|FileStream::position]]<br />
** [[API:FileStream::dispose|FileStream::dispose()]]<br />
** [[API:FileStream::read|FileStream::read()]]<br />
** [[API:FileStream::write|FileStream::write()]]<br />
* [[API:FS.createDirectory|FS.createDirectory()]]<br />
* [[API:FS.deleteFile|FS.deleteFile()]]<br />
* [[API:FS.directoryExists|FS.directoryExists()]]<br />
* [[API:FS.fileExists|FS.fileExists()]]<br />
* [[API:FS.fullPath|FS.fullPath()]]<br />
* [[API:FS.readFile|FS.readFile()]]<br />
* [[API:FS.relativePath|FS.relativePath()]]<br />
* [[API:FS.removeDirectory|FS.removeDirectory()]]<br />
* [[API:FS.rename|FS.rename()]]<br />
* [[API:FS.writeFile|FS.writeFile()]]<br />
</tt><br />
<br />
=== Random Number Generation ===<br />
<br />
<tt><br />
* [[API:RNG.fromSeed|RNG.fromSeed()]]<br />
* [[API:RNG.fromState|RNG.fromState()]]<br />
* [[API:RNG|new RNG()]]<br />
** [[API:RNG::state|RNG::state]]<br />
** [[API:RNG::next|RNG::next()]]<br />
</tt><br />
<br />
== Sphere Runtime ==<br />
<br />
The '''Sphere Runtime''' is a standard collection of JavaScript modules included with the engine. Some modules can even be used in Cellscripts as well! Unlike the Core API above which was organized by category, the following list is organized by module. Most modules export only a single object or function; to import more than one at a time, you can use an ES2015 <tt>import</tt> statement and import objects from the <tt>sphere-runtime</tt> or <tt>cell-runtime</tt> module, as appropriate:<br />
<br />
==== In a Sphere game ====<br />
<br />
import { from, Music, Thread } from 'sphere-runtime';<br />
<br />
==== In a Cellscript ====<br />
<br />
import { assert, transpile } from 'cell-runtime';<br />
<br />
=== <tt>from</tt> Module ===<br />
<br />
<tt><br />
* [[API:from|from()]]<br />
** [[API:from::all|from::all()]]<br />
** [[API:from::allIn|from::allIn()]]<br />
** [[API:from::any|from::any()]]<br />
** [[API:from::anyIn|from::anyIn()]]<br />
** [[API:from::anyIs|from::anyIs()]]<br />
** [[API:from::ascending|from::ascending()]]<br />
** [[API:from::besides|from::besides()]]<br />
** [[API:from::count|from::count()]]<br />
** [[API:from::descending|from::descending()]]<br />
** [[API:from::each|from::each()]]<br />
** [[API:from::first|from::first()]]<br />
** [[API:from::from|from::from()]]<br />
** [[API:from::including|from::including()]]<br />
** [[API:from::last|from::last()]]<br />
** [[API:from::random|from::random()]]<br />
** [[API:from::reduce|from::reduce()]]<br />
** [[API:from::remove|from::remove()]]<br />
** [[API:from::sample|from::sample()]]<br />
** [[API:from::select|from::select()]]<br />
** [[API:from::shuffle|from::shuffle()]]<br />
** [[API:from::skip|from::skip()]]<br />
** [[API:from::take|from::take()]]<br />
** [[API:from::toArray|from::toArray()]]<br />
** [[API:from::update|from::update()]]<br />
** [[API:from::where|from::where()]]<br />
</tt><br />
<br />
=== <tt>image</tt> Module ===<br />
<br />
<tt><br />
* [[API:Image|new Image()]]<br />
** [[API:Image::blitTo|Image::blitTo()]]<br />
</tt><br />
<br />
=== <tt>logger</tt> Module ===<br />
<br />
<tt><br />
* [[API:Logger|new Logger()]]<br />
** [[API:Logger::beginGroup|Logger::beginGroup()]]<br />
** [[API:Logger::endGroup|Logger::endGroup()]]<br />
** [[API:Logger::write|Logger::write()]]<br />
</tt><br />
<br />
=== <tt>music</tt> Module ===<br />
<br />
<tt><br />
* [[API:Music.adjusting|Music.adjusting]]<br />
* [[API:Music.adjustVolume|Music.adjustVolume()]]<br />
* [[API:Music.override|Music.override()]]<br />
* [[API:Music.play|Music.play()]]<br />
* [[API:Music.pop|Music.pop()]]<br />
* [[API:Music.push|Music.push()]]<br />
* [[API:Music.reset|Music.reset()]]<br />
* [[API:Music.play|Music.play()]]<br />
</tt><br />
<br />
=== <tt>prim</tt> Module ===<br />
<br />
<tt><br />
* [[API:Prim.blit|Prim.blit()]]<br />
* [[API:Prim.blitSection|Prim.blitSection()]]<br />
* [[API:Prim.drawCircle|Prim.drawCircle()]]<br />
* [[API:Prim.drawEllipse|Prim.drawEllipse()]]<br />
* [[API:Prim.drawLine|Prim.drawLine()]]<br />
* [[API:Prim.drawPoint|Prim.drawPoint()]]<br />
* [[API:Prim.drawRectangle|Prim.drawRectangle()]]<br />
* [[API:Prim.drawSolidCircle|Prim.drawSolidCircle()]]<br />
* [[API:Prim.drawSolidEllipse|Prim.drawSolidEllipse()]]<br />
* [[API:Prim.drawSolidRectangle|Prim.drawSolidRectangle()]]<br />
* [[API:Prim.fill|Prim.fill()]]<br />
</tt><br />
<br />
=== <tt>random</tt> Module ===<br />
<br />
<tt><br />
* [[API:Random.chance|Random.chance()]]<br />
* [[API:Random.discrete|Random.discrete()]]<br />
* [[API:Random.normal|Random.normal()]]<br />
* [[API:Random.sample|Random.sample()]]<br />
* [[API:Random.string|Random.string()]]<br />
* [[API:Random.uniform|Random.uniform()]]<br />
</tt><br />
<br />
=== <tt>thread</tt> Module ===<br />
<br />
<tt><br />
* [[API:Thread.join|Thread.join()]]<br />
* [[API:Thread.self|Thread.self()]]<br />
* [[API:Thread|new Thread()]]<br />
** [[API:Thread::running|Thread::running]]<br />
** [[API:Thread::start|Thread::start()]]<br />
** [[API:Thread::stop|Thread::stop()]]<br />
</tt><br />
<br />
= Miscellaneous =<br />
<br />
* [[SphereFS]] - How the file system prefixes work.<br />
<br />
[[Category:Sphere 2 API]]</div>DaVincehttp://wiki.spheredev.org/index.php?title=API:Functions&diff=10153API:Functions2017-10-29T20:25:34Z<p>DaVince: Added SphereFS link and Misc heading</p>
<hr />
<div>{{DISPLAYTITLE:Sphere v2 API}}<br />
<br />
The '''Sphere API''' is the collective name for the set of bindings (functions, objects, and methods) available for use by all Sphere games. The API provides access to a host of convenient features, allowing you to get up and running quickly.<br />
<br />
<noinclude><br />
{{section|sph-section-green|Making new function/object pages|Simple steps:<br />
#Before getting started, please check the [[Article standards and practices]].<br />
#Click a red link.<br />
#Place the following code in the empty edit box:<br />
##For a new function: <code><nowiki>{{subst:functemp|preamble=REPLACEME|function=REPLACEME|object=REPLACEME|returns=REPLACEME|params=REPLACEME}}</nowiki></code><br />
##For a new object: <code><nowiki>{{subst:objecttemp|preamble=REPLACEME|function=REPLACEME|object=REPLACEME|returns=REPLACEME|params=REPLACEME}}</nowiki></code><br />
#Check the minor edit flag and save.<br />
#Click 'edit' at the top of the page to add content.<br />
#Try to be [http://en.wiktionary.org/wiki/objective objective] when writing, and save when you're done.<br />
#Remove description from this page, add page link to list at the top of the matching section.<br />
}}<br />
</noinclude><br />
__TOC__<br />
<br />
== Core API ==<br />
<br />
The '''Core API''' provides low-level access to the engine's features and includes all bindings provided directly by the engine. These bindings are exposed to the global scope and can be used without importing any extra modules.<br />
<br />
=== Sphere Game Platform ===<br />
<br />
<tt><br />
* [[API:Sphere.APILevel|Sphere.APILevel]]<br />
* [[API:Sphere.Game|Sphere.Game]]<br />
* [[API:Sphere.Platform|Sphere.Platform]]<br />
* [[API:Sphere.Version|Sphere.Version]]<br />
* [[API:Sphere.frameRate|Sphere.frameRate]]<br />
* [[API:Sphere.abort|Sphere.abort()]]<br />
* [[API:Sphere.now|Sphere.now()]]<br />
* [[API:Sphere.restart|Sphere.restart()]]<br />
* [[API:Sphere.exit|Sphere.shutDown()]]<br />
* [[API:Sphere.sleep|Sphere.sleep()]]<br />
</tt><br />
<br />
=== Debugging ===<br />
<br />
<tt><br />
* [[API:SSj.flipScreen|SSj.flipScreen()]]<br />
* [[API:SSj.log|SSj.log()]]<br />
* [[API:SSj.trace|SSj.trace()]]<br />
</tt><br />
<br />
=== Files and Directories ===<br />
<br />
<tt><br />
* [[API:DirectoryStream|new DirectoryStream()]]<br />
** [[API:DirectoryStream::fileCount|DirectoryStream::fileCount]]<br />
** [[API:DirectoryStream::fileName|DirectoryStream::fileName]]<br />
** [[API:DirectoryStream::position|DirectoryStream::position]]<br />
** [[API:DirectoryStream::dispose|DirectoryStream::dispose()]]<br />
** [[API:DirectoryStream::next|DirectoryStream::next()]]<br />
** [[API:DirectoryStream::rewind|DirectoryStream::rewind()]]<br />
* [[API:FileStream|new FileStream()]]<br />
** [[API:FileStream::fileName|FileStream::fileName]]<br />
** [[API:FileStream::fileSize|FileStream::fileSize]]<br />
** [[API:FileStream::position|FileStream::position]]<br />
** [[API:FileStream::dispose|FileStream::dispose()]]<br />
** [[API:FileStream::read|FileStream::read()]]<br />
** [[API:FileStream::write|FileStream::write()]]<br />
* [[API:FS.createDirectory|FS.createDirectory()]]<br />
* [[API:FS.deleteFile|FS.deleteFile()]]<br />
* [[API:FS.directoryExists|FS.directoryExists()]]<br />
* [[API:FS.fileExists|FS.fileExists()]]<br />
* [[API:FS.fullPath|FS.fullPath()]]<br />
* [[API:FS.readFile|FS.readFile()]]<br />
* [[API:FS.relativePath|FS.relativePath()]]<br />
* [[API:FS.removeDirectory|FS.removeDirectory()]]<br />
* [[API:FS.rename|FS.rename()]]<br />
* [[API:FS.writeFile|FS.writeFile()]]<br />
</tt><br />
<br />
=== Random Number Generation ===<br />
<br />
<tt><br />
* [[API:RNG.fromSeed|RNG.fromSeed()]]<br />
* [[API:RNG.fromState|RNG.fromState()]]<br />
* [[API:RNG|new RNG()]]<br />
** [[API:RNG::state|RNG::state]]<br />
** [[API:RNG::next|RNG::next()]]<br />
</tt><br />
<br />
== Sphere Runtime ==<br />
<br />
The '''Sphere Runtime''' is a standard collection of JavaScript modules included with the engine. Some modules can even be used in Cellscripts as well! Unlike the Core API above which was organized by category, the following list is organized by module. Most modules export only a single object or function; to import more than one at a time, you can use an ES2015 <tt>import</tt> statement and import objects from the <tt>sphere-runtime</tt> or <tt>cell-runtime</tt> module, as appropriate:<br />
<br />
==== In a Sphere game ====<br />
<br />
import { from, Music, Thread } from 'sphere-runtime';<br />
<br />
==== In a Cellscript ====<br />
<br />
import { assert, transpile } from 'cell-runtime';<br />
<br />
=== <tt>from</tt> Module ===<br />
<br />
<tt><br />
* [[API:from|from()]]<br />
** [[API:from::all|from::all()]]<br />
** [[API:from::allIn|from::allIn()]]<br />
** [[API:from::any|from::any()]]<br />
** [[API:from::anyIn|from::anyIn()]]<br />
** [[API:from::anyIs|from::anyIs()]]<br />
** [[API:from::ascending|from::ascending()]]<br />
** [[API:from::besides|from::besides()]]<br />
** [[API:from::count|from::count()]]<br />
** [[API:from::descending|from::descending()]]<br />
** [[API:from::each|from::each()]]<br />
** [[API:from::first|from::first()]]<br />
** [[API:from::from|from::from()]]<br />
** [[API:from::including|from::including()]]<br />
** [[API:from::last|from::last()]]<br />
** [[API:from::random|from::random()]]<br />
** [[API:from::reduce|from::reduce()]]<br />
** [[API:from::remove|from::remove()]]<br />
** [[API:from::sample|from::sample()]]<br />
** [[API:from::select|from::select()]]<br />
** [[API:from::shuffle|from::shuffle()]]<br />
** [[API:from::skip|from::skip()]]<br />
** [[API:from::take|from::take()]]<br />
** [[API:from::toArray|from::toArray()]]<br />
** [[API:from::update|from::update()]]<br />
** [[API:from::where|from::where()]]<br />
</tt><br />
<br />
=== <tt>image</tt> Module ===<br />
<br />
<tt><br />
* [[API:Image|new Image()]]<br />
** [[API:Image::blitTo|Image::blitTo()]]<br />
</tt><br />
<br />
=== <tt>logger</tt> Module ===<br />
<br />
<tt><br />
* [[API:Logger|new Logger()]]<br />
** [[API:Logger::beginGroup|Logger::beginGroup()]]<br />
** [[API:Logger::endGroup|Logger::endGroup()]]<br />
** [[API:Logger::write|Logger::write()]]<br />
</tt><br />
<br />
=== <tt>music</tt> Module ===<br />
<br />
<tt><br />
* [[API:Music.adjusting|Music.adjusting]]<br />
* [[API:Music.adjustVolume|Music.adjustVolume()]]<br />
* [[API:Music.override|Music.override()]]<br />
* [[API:Music.play|Music.play()]]<br />
* [[API:Music.pop|Music.pop()]]<br />
* [[API:Music.push|Music.push()]]<br />
* [[API:Music.reset|Music.reset()]]<br />
* [[API:Music.play|Music.play()]]<br />
</tt><br />
<br />
=== <tt>prim</tt> Module ===<br />
<br />
<tt><br />
* [[API:Prim.blit|Prim.blit()]]<br />
* [[API:Prim.blitSection|Prim.blitSection()]]<br />
* [[API:Prim.drawCircle|Prim.drawCircle()]]<br />
* [[API:Prim.drawEllipse|Prim.drawEllipse()]]<br />
* [[API:Prim.drawLine|Prim.drawLine()]]<br />
* [[API:Prim.drawPoint|Prim.drawPoint()]]<br />
* [[API:Prim.drawRectangle|Prim.drawRectangle()]]<br />
* [[API:Prim.drawSolidCircle|Prim.drawSolidCircle()]]<br />
* [[API:Prim.drawSolidEllipse|Prim.drawSolidEllipse()]]<br />
* [[API:Prim.drawSolidRectangle|Prim.drawSolidRectangle()]]<br />
* [[API:Prim.fill|Prim.fill()]]<br />
</tt><br />
<br />
=== <tt>random</tt> Module ===<br />
<br />
<tt><br />
* [[API:Random.chance|Random.chance()]]<br />
* [[API:Random.discrete|Random.discrete()]]<br />
* [[API:Random.normal|Random.normal()]]<br />
* [[API:Random.sample|Random.sample()]]<br />
* [[API:Random.string|Random.string()]]<br />
* [[API:Random.uniform|Random.uniform()]]<br />
</tt><br />
<br />
=== <tt>thread</tt> Module ===<br />
<br />
<tt><br />
* [[API:Thread.join|Thread.join()]]<br />
* [[API:Thread.self|Thread.self()]]<br />
* [[API:Thread|new Thread()]]<br />
** [[API:Thread::running|Thread::running]]<br />
** [[API:Thread::start|Thread::start()]]<br />
** [[API:Thread::stop|Thread::stop()]]<br />
</tt><br />
<br />
= Miscellaneous =<br />
<br />
* [[SphereFS]] - How the file system prefixes work.</div>DaVincehttp://wiki.spheredev.org/index.php?title=SphereFS&diff=10152SphereFS2017-10-29T20:13:14Z<p>DaVince: /* See Also */ Removed (though it was cute!)</p>
<hr />
<div>'''SphereFS''' is a standardized system used by Sphere for unambiguously specifying pathnames of files and directories within the sandboxed JavaScript environment.<br />
<br />
A canonical SphereFS pathname consists of a prefix, for example <tt>@/</tt> or <tt>~/</tt>, followed by one or more directory components separated by slashes, and finally an optional filename. Each prefix is either a unique root in itself or else an alias for a directory within one of those roots. Prefixes other than <tt>~/</tt> are write-protected, and it is not possible to reference files outside the sandbox. OS paths such as '''C:\file.txt''' or '''/usr/bin/eatypig''' are not legal within the SphereFS sandbox, nor are relative paths that extend uplevel from a prefix, e.g. '''@/../../maggie.fat'''. Passing such a path to a Sphere API function expecting a file or directory name will cause an exception.<br />
<br />
__TOC__<br />
<br />
== Introduction ==<br />
<br />
TODO: write this section<br />
<br />
== Prefixes ==<br />
<br />
{| class="wikitable" style="max-width: 700px;"<br />
! Prefix<br />
! Location<br />
! Details<br />
|-<br />
| @/<br />
| Project root<br />
| The root of the game's sandboxed file system. Usually redundant, but can be useful to qualify filenames in situations where a bare SphereFS filename will be ambiguous, for example in an `import` declaration. This directory is read-only; trying to save or modify anything here will cause a TypeError to be thrown.<br />
|-<br />
| $/<br />
| Script directory<br />
| The directory containing the startup script. This is mostly provided as a convenience for specifying module names in `import` declarations.<br />
|-<br />
| #/<br />
| System directory<br />
| The engine's system directory. This contains assets included with the engine. As with `@/`, this is read-only to Sphere games.<br />
|-<br />
| ~/<br />
| Save directory<br />
| The current user's save data directory (note: requires a save ID; refer to the section on `game.json` above). This is generally used to store save data and such where the user can easily access it.<br />
|}<br />
<br />
== Path Resolution ==<br />
<br />
TODO: write this section too<br />
<br />
== Save ID ==<br />
<br />
In order for a game to use the <tt>~/</tt> prefix, it must include a '''save ID ''' in its JSON manifest. The save ID should be unique for each game or series and typically takes the form <tt>''authorName''.''gameName''</tt>, where both parts are written in camelCase. For example, ''Spectacles: Bruce's Story'''s save ID is <tt>fatCerberus.spectacles</tt>.<br />
<br />
<br />
<br />
[[Category:Sphere 2 API]]</div>DaVincehttp://wiki.spheredev.org/index.php?title=SphereFS&diff=10151SphereFS2017-10-29T20:12:48Z<p>DaVince: Added prefixes</p>
<hr />
<div>'''SphereFS''' is a standardized system used by Sphere for unambiguously specifying pathnames of files and directories within the sandboxed JavaScript environment.<br />
<br />
A canonical SphereFS pathname consists of a prefix, for example <tt>@/</tt> or <tt>~/</tt>, followed by one or more directory components separated by slashes, and finally an optional filename. Each prefix is either a unique root in itself or else an alias for a directory within one of those roots. Prefixes other than <tt>~/</tt> are write-protected, and it is not possible to reference files outside the sandbox. OS paths such as '''C:\file.txt''' or '''/usr/bin/eatypig''' are not legal within the SphereFS sandbox, nor are relative paths that extend uplevel from a prefix, e.g. '''@/../../maggie.fat'''. Passing such a path to a Sphere API function expecting a file or directory name will cause an exception.<br />
<br />
__TOC__<br />
<br />
== Introduction ==<br />
<br />
TODO: write this section<br />
<br />
== Prefixes ==<br />
<br />
{| class="wikitable" style="max-width: 700px;"<br />
! Prefix<br />
! Location<br />
! Details<br />
|-<br />
| @/<br />
| Project root<br />
| The root of the game's sandboxed file system. Usually redundant, but can be useful to qualify filenames in situations where a bare SphereFS filename will be ambiguous, for example in an `import` declaration. This directory is read-only; trying to save or modify anything here will cause a TypeError to be thrown.<br />
|-<br />
| $/<br />
| Script directory<br />
| The directory containing the startup script. This is mostly provided as a convenience for specifying module names in `import` declarations.<br />
|-<br />
| #/<br />
| System directory<br />
| The engine's system directory. This contains assets included with the engine. As with `@/`, this is read-only to Sphere games.<br />
|-<br />
| ~/<br />
| Save directory<br />
| The current user's save data directory (note: requires a save ID; refer to the section on `game.json` above). This is generally used to store save data and such where the user can easily access it.<br />
|}<br />
<br />
== Path Resolution ==<br />
<br />
TODO: write this section too<br />
<br />
== Save ID ==<br />
<br />
In order for a game to use the <tt>~/</tt> prefix, it must include a '''save ID ''' in its JSON manifest. The save ID should be unique for each game or series and typically takes the form <tt>''authorName''.''gameName''</tt>, where both parts are written in camelCase. For example, ''Spectacles: Bruce's Story'''s save ID is <tt>fatCerberus.spectacles</tt>.<br />
<br />
== See Also ==<br />
<br />
* [[THE PIG]]: It eats you in 2 seconds<br />
* [[THE COW]]: It eats a bunch of cats<br />
* [[THE APE]]: It's the size of the universe. Bye bye cow and pig!<br />
<br />
[[Category:Sphere 2 API]]</div>DaVincehttp://wiki.spheredev.org/index.php?title=MediaWiki:Common.css&diff=10145MediaWiki:Common.css2017-10-16T13:50:39Z<p>DaVince: Fixed font loading</p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
@import url("http://wiki.spheredev.org/extra/league-gothic/stylesheet.css");<br />
@import url("http://wiki.spheredev.org/extra/mgopen-modata/stylesheet.css");<br />
<br />
.sph-cf:before,<br />
.sph-cf:after {<br />
content: " "; /* 1 */<br />
display: table; /* 2 */<br />
}<br />
<br />
.sph-cf:after {<br />
clear: both;<br />
}<br />
<br />
/*<br />
* For IE 6/7 only<br />
* Include this rule to trigger hasLayout and contain floats.<br />
*/<br />
<br />
.sph-cf {<br />
*zoom: 1;<br />
}<br />
<br />
h1, #toc h2, .toc h2, h3, h4 {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
div#content h1, div#content h2, div#content #firstHeading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
h1 {font-weight:normal;}<br />
h2 {font-family:"League Gothic",LeagueGothic,sans-serif; font-weight:normal;}<br />
<br />
#mw-content-text h2 {font-size:200%;}<br />
#toc h2, .toc h2 {font-weight:bold; text-transform:uppercase; font-size:100%;}<br />
<br />
.editsection {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
.rellink, .dablink {font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em;}<br />
<br />
#mw-head, #mw-panel, #footer, input,<br />
.mw-search-result-heading {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}<br />
<br />
.sph-section {border-style:solid; border-width:1px; padding:4px; background-color:#eee; border-color:#999;}<br />
.sph-section .sph-section-title {padding:5px; font-weight:bold; background-color:#999; color:#fff;}<br />
div#content .sph-section .sph-section-title {margin-top:0;}<br />
.sph-section h3.sph-section-title {font-weight:normal;}<br />
.sph-section .sph-section-content {}<br />
<br />
.sph-section-green {background-color:#efe; border-color:#9c9;}<br />
.sph-section-green .sph-section-title {background-color:#393; color:#fff;}<br />
<br />
.sph-section-red {background-color:#fee; border-color:#fcc;}<br />
.sph-section-red .sph-section-title {background-color:#c00; color:#fff;}<br />
<br />
.sph-section-blue {background-color:#eef; border-color:#abd;}<br />
.sph-section-blue .sph-section-title {background-color:#039; color:#fff;}<br />
<br />
.sph-section-yellow {background-color:#ffe; border-color:#dba;}<br />
.sph-section-yellow .sph-section-title {background-color:#cc3; color:#fff;}<br />
<br />
.sph-disambig {text-align:center;}<br />
.sph-disambig .sph-section-content {font-style:italic;}<br />
<br />
.sph-usage {background:#eee; border:1px solid #999; text-align:center; padding:8px 4px; font-size:150%; border-radius:8px;}<br />
.sph-section .sph-usage {background:none; border:0; padding:0; margin:1em auto;}<br />
<br />
.sph-latest {text-align:center;}<br />
<br />
.sph-aside {border:solid rgb(167,215,249); border-width:1px 0; margin:1em auto;}<br />
.sph-aside>.floatleft {margin-top:0.25em;}<br />
.sph-aside h4 {font-weight:normal; font-style:italic;}<br />
<br />
.sph-front-topnav {<br />
text-align:center; font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-size:120%;<br />
background:#e8e8e8; border:1px solid #888; border-radius:4px;<br />
padding:1em;<br />
}<br />
.sph-front-topnav .sph-front-topnav-list {margin:8px auto;}<br />
<br />
.sph-directory, .sph-filepath {}<br />
.sph-directory .sph-filepath {}<br />
<br />
.nmbox {background:#F6F9ED; border:1px solid rgb(167,215,249); clear:both; font-size:85%; margin: 0.5em 0;}<br />
.nmbox .mbox-image {background:#EEF3E2; white-space: nowrap; padding: 4px 1em; border-right: 1px solid #aaaaaa;}<br />
.nmbox .mbox-text {padding:4px 1em;}<br />
.nmbox.sph-cf>.mbox-text {float:left;}<br />
.nmbox.sph-cf>.mbox-image {float:left;}<br />
<br />
.sph-notice {<br />
background:#F8EABA; border-bottom:1px solid #C0C090;<br />
margin:1em auto; padding:0.5em 0; width:80%;<br />
clear:both; text-align:center; font-weight:bold;<br />
}<br />
<br />
.mus {font-family:Symbola;}<br />
b.mus {line-height:1; font-weight:normal;}<br />
b b.mus, strong b.mus {font-weight:inherit;}<br />
<br />
.gist table.highlight {font-weight:normal;}<br />
<br />
/**** GESHI-RELATED STYLES ****/<br />
.mw-geshi.mw-code {overflow:auto; position:relative;}<br />
.mw-geshi a[href]>.kw10 {text-shadow:0 1px 0 #808080; text-shadow:0 1px 0 rgba(0,0,0,0.5);}<br />
.mw-geshi a[href]:hover>.kw10 {text-shadow:0 0 2px #806000; text-shadow:0 0 2px rgba(128,112,0,0.5);}<br />
.mw-geshi>.javascript:before {<br />
display:block; content:"JavaScript";<br />
font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-weight:bold; line-height:1;<br />
position:absolute; top:0; right:0;<br />
border:solid #aaa; border-width:0 0 1px 1px; border-radius:0 0 0 8px;<br />
padding:4px; opacity:0.50;<br />
}<br />
.mw-geshi:hover>.javascript:before {opacity:1.0;}<br />
<br />
/**** NAVBOX-RELATED STYLES ****/<br />
/* Style for horizontal lists (separator following item).<br />
Note: hlist formatting will break if the resulting HTML lacks a breakable character<br />
between list items. This happens when the following conditions are true:<br />
1) The list is made using wiki markup (where HTML is built by parser.php)<br />
2) HTMLTidy is disabled or unavailable (such as on Special: pages)<br />
In such cases, building lists with .hlist using HTML instead of wiki markup<br />
will work around this problem. See also [[Bugzilla:39617]].<br />
IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].<br />
Last updated: January 24, 2013<br />
@source mediawiki.org/wiki/Snippets/Horizontal_lists<br />
@maintainer: [[User:Edokter]]<br />
@revision: 3.1<br />
*/<br />
.skin-monobook .hlist dl,<br />
.skin-modern .hlist dl,<br />
.skin-vector .hlist dl {<br />
line-height: 1.5em;<br />
}<br />
.hlist dl,<br />
.hlist ol,<br />
.hlist ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
/* Display list items inline and make them nowrap */<br />
.hlist dd,<br />
.hlist dt,<br />
.hlist li {<br />
margin: 0;<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
/* Allow wrapping for list items (in tight spaces) */<br />
.hlist.hwrap dd,<br />
.hlist.hwrap dt,<br />
.hlist.hwrap li {<br />
white-space: normal;<br />
}<br />
/* Display nested lists inline and allow them to wrap */<br />
.hlist dl dl, .hlist dl ol, .hlist dl ul,<br />
.hlist ol dl, .hlist ol ol, .hlist ol ul,<br />
.hlist ul dl, .hlist ul ol, .hlist ul ul {<br />
display: inline;<br />
white-space: normal;<br />
}<br />
/* Generate interpuncts */<br />
.hlist dt:after {<br />
content: ":";<br />
}<br />
.hlist dd:after,<br />
.hlist li:after {<br />
content: " ·";<br />
font-weight: bold;<br />
}<br />
.hlist dd:last-child:after,<br />
.hlist dt:last-child:after,<br />
.hlist li:last-child:after {<br />
content: none;<br />
}<br />
/* For IE8 */<br />
.hlist dd.hlist-last-child:after,<br />
.hlist dt.hlist-last-child:after,<br />
.hlist li.hlist-last-child:after {<br />
content: none;<br />
}<br />
/* Add parentheses around nested lists */<br />
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,<br />
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,<br />
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {<br />
content: "(";<br />
font-weight: normal;<br />
}<br />
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,<br />
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,<br />
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* For IE8 */<br />
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,<br />
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,<br />
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {<br />
content: ")";<br />
font-weight: normal;<br />
}<br />
/* Put numbers in front of ordered list items */<br />
.hlist.hnum ol {<br />
counter-reset: list-item;<br />
}<br />
.hlist.hnum ol > li {<br />
counter-increment: list-item;<br />
}<br />
.hlist.hnum ol > li:before {<br />
content: counter(list-item) " ";<br />
}<br />
.hlist.hnum dd ol > li:first-child:before,<br />
.hlist.hnum dt ol > li:first-child:before,<br />
.hlist.hnum li ol > li:first-child:before {<br />
content: "(" counter(list-item) " ";<br />
}<br />
/* Default style for navigation boxes */<br />
.navbox { /* Navbox container style */<br />
border: 1px solid #aaa;<br />
width: 100%;<br />
margin: auto;<br />
clear: both;<br />
font-size: 88%;<br />
text-align: center;<br />
padding: 1px;<br />
}<br />
.navbox-inner,<br />
.navbox-subgroup {<br />
width: 100%;<br />
}<br />
.navbox-group,<br />
.navbox-title,<br />
.navbox-abovebelow {<br />
padding: 0.25em 1em; /* Title, group and above/below styles */<br />
line-height: 1.5em;<br />
text-align: center;<br />
}<br />
th.navbox-group { /* Group style */<br />
white-space: nowrap;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox,<br />
.navbox-subgroup {<br />
background: #fdfdfd; /* Background color */<br />
}<br />
.navbox-list {<br />
line-height: 1.8em;<br />
border-color: #fdfdfd; /* Must match background color */<br />
}<br />
.navbox th,<br />
.navbox-title {<br />
background: #ccccff; /* Level 1 color */<br />
}<br />
.navbox-abovebelow,<br />
th.navbox-group,<br />
.navbox-subgroup .navbox-title {<br />
background: #ddddff; /* Level 2 color */<br />
}<br />
.navbox-subgroup .navbox-group,<br />
.navbox-subgroup .navbox-abovebelow {<br />
background: #e6e6ff; /* Level 3 color */<br />
}<br />
.navbox-even {<br />
background: #f7f7f7; /* Even row striping */<br />
}<br />
.navbox-odd {<br />
background: transparent; /* Odd row striping */<br />
}<br />
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */<br />
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */<br />
}<br />
.navbox .hlist td dl,<br />
.navbox .hlist td ol,<br />
.navbox .hlist td ul,<br />
.navbox td.hlist dl,<br />
.navbox td.hlist ol,<br />
.navbox td.hlist ul {<br />
padding: 0.125em 0; /* Adjust hlist padding in navboxes */<br />
}<br />
ol + table.navbox,<br />
ul + table.navbox {<br />
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */<br />
}<br />
<br />
/* Default styling for Navbar template */<br />
.navbar {<br />
display: inline;<br />
font-size: 88%;<br />
font-weight: normal;<br />
}<br />
.navbar ul {<br />
display: inline;<br />
white-space: nowrap;<br />
}<br />
.navbar li {<br />
word-spacing: -0.125em;<br />
}<br />
.navbar.mini li span {<br />
font-variant: small-caps;<br />
}<br />
/* Navbar styling when nested in infobox and navbox */<br />
.infobox .navbar {<br />
font-size: 100%;<br />
}<br />
.navbox .navbar {<br />
display: block;<br />
font-size: 100%;<br />
}<br />
.navbox-title .navbar {<br />
/* @noflip */<br />
float: left;<br />
/* @noflip */<br />
text-align: left;<br />
/* @noflip */<br />
margin-right: 0.5em;<br />
width: 6em;<br />
}<br />
<br />
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript<br />
in [[MediaWiki:Common.js]] are styled here so they can be customised. */<br />
.collapseButton {<br />
/* @noflip */<br />
float: right;<br />
font-weight: normal;<br />
/* @noflip */<br />
margin-left: 0.5em;<br />
/* @noflip */<br />
text-align: right;<br />
width: auto;<br />
}<br />
/* In navboxes, the show/hide button balances the v·d·e links<br />
from [[Template:Navbar]], so they need to be the same width. */<br />
.navbox .collapseButton {<br />
width: 6em;<br />
}<br />
<br />
/* Styling for JQuery makeCollapsible, matching that of collapseButton */<br />
.mw-collapsible-toggle {<br />
font-weight: normal;<br />
/* @noflip */<br />
text-align: right;<br />
}<br />
.navbox .mw-collapsible-toggle {<br />
width: 6em;<br />
}<br />
/* Lists in data cells are always left-aligned */<br />
.wikitable td ul,<br />
.wikitable td ol,<br />
.wikitable td dl {<br />
/* @noflip */<br />
text-align: left;<br />
}<br />
/* ...unless they also use the hlist class */<br />
.wikitable.hlist td ul,<br />
.wikitable.hlist td ol,<br />
.wikitable.hlist td dl {<br />
text-align: inherit;<br />
}</div>DaVincehttp://wiki.spheredev.org/index.php?title=Legacy:Font/drawText&diff=10116Legacy:Font/drawText2017-08-07T12:00:58Z<p>DaVince: /* Examples */ Edited col width a little</p>
<hr />
<div>Draw (write) a line of text on the screen using the specified font.<br />
<br />
__TOC__<br />
<br />
==Usage==<br />
{{Usage|object=Font|func=drawText|params=x, y, text}}<br />
<br />
* '''x''' Integer. The x position on the screen where the text starts drawing.<br />
* '''y''' Integer. The y position of the text on the screen.<br />
* '''text''' String. The text to display.<br />
<br />
==Examples==<br />
{{template:col-begin}}<br />
{{template:col-break|width=30%}}<br />
<syntaxhighlight><br />
var font = GetSystemFont();<br />
font.drawText(10, 10, "I am a line of text.");<br />
<br />
FlipScreen();<br />
GetKey();<br />
</syntaxhighlight><br />
<br />
{{template:col-break}}<br />
<br />
<syntaxhighlight><br />
//Load the font to use<br />
//Draw it<br />
<br />
//Now display it on the screen<br />
//Now wait for user interaction<br />
</syntaxhighlight><br />
<br />
{{template:col-end}}<br />
<br />
==Notes==<br />
* Using \n for new lines doesn't work with this function. drawText() is meant purely for drawing ''single line'' of text.<br />
* The line width is infinite, so you can easily go past the screen width if your line is too long.<br />
<br />
==See also==<br />
* [[API:GetSystemFont|GetSystemFont]]()<br />
* [[API:Font|Font]]()<br />
* [[Font.drawTextBox]]()<br />
* [[Font.drawZoomedText]]()<br />
<br />
* [[API:FlipScreen|FlipScreen]]()<br />
* [[API:GetKey|GetKey]]()<br />
<br />
{{API:Font/navbox}}</div>DaVincehttp://wiki.spheredev.org/index.php?title=Legacy:Functions&diff=10058Legacy:Functions2017-08-05T16:24:45Z<p>DaVince: Added category and warning</p>
<hr />
<div>{{LegacyWarning}}<br />
<br />
<br />
This is a definitive reference of the **legacy** Sphere 1.5 API. In other words, the functions that Sphere 1.5 uses in its JavaScript engine.<br />
<br />
For the newer Sphere 2 API, please check [[API:Functions]].<br />
<br />
Alternatively, the whole Sphere API, sorted by category, with brief descriptions of the functions is available in the [[Doc Functions|API text file]] mirror itself.<br />
<br />
For assistance with using JavaScript itself, consult these links:<br />
*https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide - Mozilla JavaScript Guide<br />
*https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference - Mozilla JavaScript Reference<br />
<br />
<noinclude><br />
{{section|sph-section-green|Making new function/object pages|Simple steps:<br />
#Click a red link.<br />
#Place the following code in the empty edit box: <code><nowiki>{{subst:functemp}}</nowiki></code> for a new function, or <code><nowiki>{{subst:objecttemp}}</nowiki></code> for a new object.<br />
#Check the minor edit flag and save.<br />
#Click 'edit' at the top of the page to add content.<br />
#Try to be [http://en.wiktionary.org/wiki/objective objective] when writing, and save when you're done.<br />
#Remove description from this page, add page link to list at the top of the matching section.<br />
}}<br />
<br />
<!-- Disclaimer is hidden<br />
<div style="background-color:#fee; border-color:#fcc; border-style:solid; border-width:1px; padding:4px"><br />
<div style="background-color:#c00; color:#fff; font-weight:bold; padding:5px">Disclaimer</div><br />
<div>Note the standard disclaimer at the bottom of the edit box:<br />
:''If you don't want your writing to be edited mercilessly and redistributed at will, then don't submit it here.''<br />
<br />
Be bold with your editing! If something doesn't look right, click 'edit' and fix it to the best of your ability.</div><br />
</div><br />
--><br />
</noinclude><br />
<br />
__TOC__<br />
<br />
= Engine functions =<br />
<br />
* [[Legacy:GetVersion|GetVersion]](): Get the version of Sphere as a number.<br />
* [[Legacy:GetVersionString|GetVersionString]](): Get the full Sphere version.<br />
<br />
== Game control ==<br />
<br />
* [[Legacy:Abort|Abort]](): Exit with a message.<br />
* [[Legacy:Exit|Exit]](): Exit unconditionally.<br />
* [[Legacy:RestartGame|RestartGame]](): Restarts the game.<br />
<br />
== Accessing installed games ==<br />
<br />
* Sphere [[Legacy:Game|Game]] object: Holds info about an installed Sphere game.<br />
* [[Legacy:GetGameList|GetGameList]](): Get a list of installed Sphere games.<br />
* [[Legacy:ExecuteGame|ExecuteGame]](''directory''): Execute Sphere game installed in ''directory''.<br />
<br />
= Script functions =<br />
<br />
* [[Legacy:GarbageCollect|GarbageCollect]](): Run JavaScript's garbage collector to free memory.<br />
<br />
== File inclusion ==<br />
<br />
* [[Legacy:EvaluateScript|EvaluateScript]](''filename''): Include a script file unconditionally.<br />
* [[Legacy:EvaluateSystemScript|EvaluateSystemScript]](''filename''): Include a system script file unconditionally.<br />
* [[Legacy:RequireScript|RequireScript]](''filename''): Include a script file once.<br />
* [[Legacy:RequireSystemScript|RequireSystemScript]](''filename''): Include a system script file once.<br />
<br />
== Time ==<br />
* [[Legacy:GetTime|GetTime]](): Get the number of milliseconds since an arbitrary point in time.<br />
<br />
== Conversion ==<br />
* [[Legacy:CreateStringFromCode|CreateStringFromCode]](''ascii_code''): Translate a number to the matching character.<br />
<br />
= System interfaces =<br />
<br />
== Video ==<br />
<br />
* [[Legacy:FlipScreen|FlipScreen]](): Show the results of drawing to the screen.<br />
* [[Legacy:GetFrameRate|GetFrameRate]](): Get the frame rate that limits [[Legacy:FlipScreen|FlipScreen]]() call rate.<br />
* [[Legacy:SetFrameRate|SetFrameRate]](''frames_per_second''): Limit the rate of [[Legacy:FlipScreen|FlipScreen]]() calls.<br />
* [[Legacy:ApplyColorMask|ApplyColorMask]](''color''): Fills the whole screen with ''color''.<br />
<br />
=== Screen size ===<br />
<br />
* [[Legacy:GetScreenWidth|GetScreenWidth]](): Get the width of the screen.<br />
* [[Legacy:GetScreenHeight|GetScreenHeight]](): Get the height of the screen.<br />
<br />
=== Clipping ===<br />
<br />
* Sphere [[Legacy:ClippingRectangle|ClippingRectangle]] object: Holds dimensions for clipping rectangle functions.<br />
* [[Legacy:GetClippingRectangle|GetClippingRectangle]](): Get the rectangle in which drawing is being clipped on screen.<br />
* [[Legacy:SetClippingRectangle|SetClippingRectangle]](''x'', ''y'', ''width'', ''height''): Set a rectangle to clip screen drawing.<br />
<br />
=== Graphics primitives ===<br />
<br />
{{Legacy:Functions/Primitives}}<br />
<br />
{{Legacy:Functions/Input}}<br />
<br />
{{Legacy:Functions/Networking}}<br />
<br />
= Map Engine =<br />
<br />
{{Legacy:Functions/Map}}<br />
<br />
= Sphere objects =<br />
<br />
Besides the above, Sphere has a set of built-in objects for more generalized use within projects. Most are loaded from external resource files, but a few (Color, ColorMatrix) are defined solely in script and remain only in-memory during the running of the project.<br />
<br />
{{Legacy:Functions/Sounds}}<br />
<br />
{{Legacy:Functions/Colors}}<br />
<br />
{{Legacy:Functions/ColorMatrices}}<br />
<br />
{{Legacy:Functions/Spritesets}}<br />
<br />
{{Legacy:Functions/Fonts}}<br />
<br />
{{Legacy:Functions/WindowStyles}}<br />
<br />
{{Legacy:Functions/Images}}<br />
<br />
{{Legacy:Functions/Surfaces}}<br />
<br />
{{Legacy:Functions/Animations}}<br />
<br />
{{Legacy:Functions/Filesystem}}<br />
<br />
{{Legacy:Functions/Files}}<br />
<br />
{{Legacy:Functions/Log}}<br />
<br />
<br />
== ByteArray object ==<br />
<br />
* Sphere [[Legacy:ByteArray|ByteArray]] object: Holds an array of bytes.<br />
* [[Legacy:CreateByteArray|CreateByteArray]](''length''): Create a new [[Legacy:ByteArray|ByteArray]].<br />
* [[Legacy:ByteArray/concat|ByteArray.concat]](''byte_array_object'', ''byte_array_to_append''): Returns bytearray with byte_array_to_append attached to the end of it<br />
* [[Legacy:ByteArray/slice|ByteArray.slice]](''start_slice'' [, ''end_slice'']): Returns a slice of the bytearray starting at start, and ending at end or the end of the bytearray if end is omitted. If end is a negative number, the end point is started from the end of the bytearray.<br />
<br />
=== Conversion ===<br />
<br />
* [[Legacy:CreateByteArrayFromString|CreateByteArrayFromString]](''string''): Create a [[Legacy:ByteArray|ByteArray]] from ''string''.<br />
* [[Legacy:CreateStringFromByteArray|CreateStringFromByteArray]](''byte_array''): Convert a [[Legacy:ByteArray|ByteArray]] into a string.<br />
<br />
=== Data hashing ===<br />
<br />
* [[Legacy:HashByteArray|HashByteArray]](''byte_array''): Calculate MD5 'fingerprint' of data in ''byte_array''.<br />
<br />
<br />
[[Category:Functions]]<br />
[[Category:Sphere 1]]</div>DaVincehttp://wiki.spheredev.org/index.php?title=Main_Page&diff=10057Main Page2017-08-04T16:03:12Z<p>DaVince: Added forums link</p>
<hr />
<div><h1 style='text-align:center;border-bottom:0;'>[[File:Spherical logo white bg.png]]</h1><br />
<br />
<div class='sph-front-topnav'><br />
<div class='sph-front-topnav-list'>'''For Sphere developers''' {{*}} [[API:Functions]] {{*}} [[:Category:Sphere 2 API|Sphere 2 API articles]] {{*}} [[Legacy:Functions]] {{*}} [[:Category:Tutorials|Tutorials]] {{*}} [[:Category:Scripts|Scripts]]</div><br />
<div class='sph-front-topnav-list'>'''Downloads & Projects''' {{*}} [http://www.spheredev.org/dl Repository] (Games, resources) {{*}} [[:Category:Games]] (incomplete)</div><br />
<div class='sph-front-topnav-list'>'''For wiki editors''' {{*}} [[Help:Editing|Editing Help]] {{*}} [//meta.wikimedia.org/wiki/Help:Contents MW User's Guide] {{*}} [//www.mediawiki.org/wiki/Manual:FAQ MediaWiki FAQ]</div><br />
<div class='sph-front-topnav-list'>[[Getting started]]</div><br />
</div><br />
<br />
<br />
{{section|sph-section-green|Welcome|'''Spheriki''' is the definitive wiki of the '''Spherical community''', dedicated to the [[Sphere]] RPG engine. It includes info about [[:Category:Games|games]], [[:Category:Tutorials|docs]] and [[Spherical:Current events|news]].<br />
<br />
If you're new to Sphere, get started [[Getting started|here]]!<br />
<br />
Stuck? Want to show your project? Come join the community on the [http://forums.spheredev.org/ forums!]<br />
}}<br />
<br />
[[Special:Random|Display a random page]]<br />
<br />
__NOTOC__</div>DaVincehttp://wiki.spheredev.org/index.php?title=Category:Sphere_1&diff=10055Category:Sphere 12017-08-04T15:26:30Z<p>DaVince: Created page with "Articles that were written (or include code) for the Sphere v1 API can be found here."</p>
<hr />
<div>Articles that were written (or include code) for the Sphere v1 API can be found here.</div>DaVincehttp://wiki.spheredev.org/index.php?title=DaVince_scripting_tutorial&diff=10054DaVince scripting tutorial2017-08-04T15:24:57Z<p>DaVince: Fixed links</p>
<hr />
<div>{{LegacyWarning}}<br />
<br />
This tutorial teaches you how to script with JavaScript, and how to apply this knowledge so you can make games in Sphere. I have tried to write the tutorial in such a way that beginners can easily step into the world of Sphere. There are also some tests available which you can take to practice the things you have learnt.<br />
<br />
<br />
== Resource pack ==<br />
Here's [http://davince.tengudev.com/sphere/resources/resource.zip a very basic resource pack] so you can get started right away.<br />
Includes:<br />
* a simple map (rmp file)<br />
* a sprite (rss file)<br />
* a font (rfn file)<br />
* some sounds<br />
File names are in Dutch, but it should be clear what's what.<br />
<br />
There are more resources on the Spherical Downloads Repository (coming soon).<br />
<br />
<br />
__TOC__<br />
<br />
<br />
== About ==<br />
<br />
=== This tutorial ===<br />
<br />
Ah, Sphere... An awesome and flexible game and RPG creation program... It includes a fully-fledged editor to make your own RPGs (or other kinds of games!), and a flexible, extensive scripting language. But how do you start learning and using this scripting language, and how does it work inside Sphere? This tutorial will help you on your way. Some of the tutorial's chapters are based on other, older tutorials. Some are entirely original.<br />
<br />
In any case, I hope it will be useful to you! Have a good Sphere experience! :)<br />
<br />
Questions? Suggestions? Other feedback? [https://docs.google.com/document/d/14xpwoyKuSvIXZzRNbsGXVoxtZriS01rj82KjyOndC9o/edit#bookmark=id.oajpni3fz38l Contact me]!<br />
--DaVince<br />
<br />
=== Sphere ===<br />
<br />
Sphere is a program designed to create RPGs in the style of early Final Fantasy games without too much effort. However, you'll be able to create almost any other kind of 2D game you can imagine if you're skilled enough. It uses a scripting language (JavaScript, which is NOT JAVA!) that "makes everything happen". This, of course, means that you will have to learn this scripting language in order to be able to create a game in Sphere. Scripting isn't always easy, especially for programming/scripting newbies, so I'll try to keep things simple and clear.<br />
<br />
=== Where can I find the latest version of Sphere? ===<br />
<br />
Sphere and its editor can be downloaded [https://drive.google.com/folderview?id=0B-5bW82jK5Z5X2pkellDenZUeWM&usp=sharing&tid=0B-5bW82jK5Z5UGZaS0c1OFJZZDA here] (versions 1.5 and 1.6 are recommended).<br />
<br />
Some work has been going into a much newer implementation of Sphere lately, known as TurboSphere. It's pretty good, but as of this writing not complete yet, so stick with a standard release for this tutorial.<br />
<br />
If some things don't work (correctly), download version 1.5 or 1.6 and these problems will usually disappear. If you already have the latest version and you still encounter problems, you found a bug in either Sphere or your own code! :)<br />
<br />
=== Get used to the editor first! ===<br />
<br />
This tutorial teaches you how to script, not how to use the editor. There are some articles on this wiki and with Sphere's included documentation that can help you out there.<br />
<br />
== Sphere and Javascript ==<br />
<br />
Sphere uses SpiderMonkey, a special library that makes JavaScript available in applications like Sphere. Sphere itself then adds lots of functions to this implementation of JavaScript so you can actually use it to create a game.<br />
JavaScript is a browser scripting language in origin, specially designed for the use in webpages, but as Sphere proves it can be used for other things perfectly fine too. Web JS consists of three parts: the Core, the Client and the Server. Sphere only uses the Core, the other two are actually parts that belong to Web JS.<br />
<br />
=== Configuration and information on scripts ===<br />
Every Sphere game must have a script where it can start out "reading" (actually interpreting) what to do. The start script to use can be defined in the Game Setings window, accessible by double-clicking on "Game Settings" in a project's main window. You can't define a script if you don't have a script yet, of course, so make one first. Give this first script a good, identifiable name, like start.js or main.js.<br />
The script doesn't need to have a specific name like main.js - you can give it any valid name you can think of, "valid" meaning using only characters you can use in a filename. However, it's recommended to keep the name simple and preferably without any special characters (even spaces), so you can quickly and easily reference this script in your code. The start script will be the first script that's read by Sphere's game engine when you start the game. If you want to let Sphere open other scripts next to this one, you can use specific functions in the main script to include these scripts (by using RequireScript()).<br />
<br />
You do not need to have more than one script, you could just as well put all of the game's code in the one single start script. But using multiple script files makes everything more clear and easier to find and use. Think about it: seperate scripts for battles, menus, text boxes, storyline... It also allows you to use specific scripts in multiple games, if you make sure to make everything in that script work independently from other scripts... Very nice if you made a nice menu or item system that you want to re-use in a different game.<br />
Sphere looks for the function game() inside your startup script when the game is launched. This is the only automatically started (rather, "called") function and gives you a point to start with. All other functions will have to be called by hand. More about functions further down in this document.<br />
<br />
You will get to know more about scripts later; I'll talk about where you can use scripts first now.<br />
<br />
=== Where are scripts used? ===<br />
You can use scripts in different places in Sphere. These are the maps, triggers, persons and files.<br />
<br />
<br />
* '''Files''' are the most common place for script code and can be created in any text editor. JavaScript files always have the .js file extension. ''Script files are the most important part of a game'' as these are the main method to give instructions to Sphere, including what to start (and where).<br />
<br />
* '''Maps''' have a few internal scripts. You can find these in the Map Properties (menu: Map > Properties). They are useful to have the game control what happens when the map itself is opened or closed, or when/where the player-controlled character is entering or leaving the map. Maps also contain two different types of "entities": triggers and persons.<br />
<br />
* '''Triggers''' are attached to a specific tile and have a script that is launched when the player walks over it.<br />
<br />
* '''Persons''' are entities on the map that have a name and sprite. Persons have 5 personal scripts to control their actions (like walking or talking), each used for a different situation:<br />
** ''On Create'', used to run code when the person is created.<br />
** ''On Destroy'', runs right before the person is destroyed.<br />
** ''On Activate (Touch)'', runs when the person is being touched by the player-controlled person.<br />
** ''''On Activate (Talk)'', runs when the player-controlled person faces the person and presses the TALK button (default = space).<br />
** ''On Generate Commands'', runs every frame the map engine is open (but only when the person isn't doing anything else).<br />
<br />
<br />
The scripts in persons, triggers and maps are more of a bonus that make things easier in these very specific situations. More experienced coders tend to avoid making scripts inside maps and entities as much as they can, and instead try to do it all in the JS files. All code then stays in one clearly-defined place; nothing is hidden in some random place in a map. It's more flexible and you're less likely to leave mistaked or old code behind.<br />
<br />
To make a new script file in the default editor, click on the empty page icon. You'll get a text editor. This is Sphere's built-in script editor, probably the best one for Sphere scripts. You can also make your scripts in your own favourite text editor, just save them as .js files in the scripts directory of your game.<br />
<br />
== The basics of scripting ==<br />
===Comments===<br />
A comment is the most simple thing to do in Sphere. With comments, you can give an explanation of something with normal, human-readable text. Sphere itself plain skips over this text, so you can put in anything you like. A comment is mainly intended to help the reader of the code: you can put comments next to your actual code explaining what a complex line does, or ''why'' it does it.<br />
<br />
A single comment line can be made by putting // in front of the line.<br />
<br />
<syntaxhighlight>//This is a comment.</syntaxhighlight><br />
<br />
<br />
A comment block of multiple lines can be made by putting /* in front and */ behind it.<br />
<br />
<syntaxhighlight><br />
/* This is a comment. */<br />
<br />
/* This is also a comment.<br />
But, it stays comment on the next line, too.<br />
And it will keep on doing that until the blocks gets closed with the asterisk and the slash.<br />
*/<br />
<br />
This part is NOT a comment, because it does not have // in front and is not in a /* */ block!<br />
// Buuuuuuuuut... The above line *is* a comment from ^^ this spot onward! Notice the green highlighting.<br />
</syntaxhighlight><br />
<br />
<br />
A comment can be put on the same line as a line of code, too. This is useful for explaining just that line:<br />
<br />
<syntaxhighlight>Code(); //Comment!</syntaxhighlight><br />
<br />
<br />
If you're just beginning, it's useful to put comments next to every line of code of importance. That way, you can look it up later and read what a certain piece of code did again...<br />
<br />
===End a line of code with a semicolon===<br />
This is the second simplest thing in JS's code syntax (syntax = code "grammar"). In real life, you have to add a period (.) at the end of every sentence. You basically do the same in JavaScript. Well, it's slightly different, as you type a semicolon ; instead.<br />
<br />
<syntaxhighlight><br />
code_goes_here;<br />
different_bit_of_code_goes_here;<br />
Code; Next_bit_of_code;<br />
</syntaxhighlight><br />
<br />
Remember this! If you forget to put a semicolon somewhere, Sphere might try to 'glue' one bit of code together with the next one, which may cause errors because it tries to interpret things differently than you intended. Just like how sentences glued together can sometimes be interpreted in multiple ways.<br />
<br />
== The basics on functions ==<br />
===Functions===<br />
[[File:DaVinceScripting-Function.png|250px|thumb |Why functions are useful.]]<br />
Simply put, a function is a bunch of lines of code that you give an identifiable name. Then you can run that code any time by referencing that name.<br />
<br />
Example: you could make a function with the name ''TextBox''. It would run code to make a box appear on screen, display some text on top, wait for user input, etc. Then you can show this text box whenever you like by referencing the function name TextBox wherever you like.<br />
<br />
It's very useful to make your code manageable, and it prevents you from doing bad things like copying the same few lines of code over and over again in different places. That's bad because if you change or improve your code, you now have to change it everywhere else, too. Using a function prevents this: the code exists only in that one place. Plus your code takes up less lines (just call function TextBox in a single line somewhere instead of pasting 15 lines of text-displaying code).<br />
<br />
===The structure of a function===<br />
A '''function''' always starts with the word <tt>function</tt> so both Sphere and the reader of the script know we're going to make a function. You call such a word a ''keyword'': JavaScript uses it internally to identify what you're trying to do. In this case, we want to define a function.<br />
<br />
After the keyword <tt>function</tt> comes the ''name'' of the function. When giving it a name, keep in mind only letters, numbers and the underscore _ are allowed. It is also not possible to start the name with a number.<br />
<br />
* Valid function names: <tt>FunctionName</tt>, <tt>do_300_things</tt>, <tt>EatDonut</tt>.<br />
* Invalid function names: <tt>123WayToGo</tt>, <tt>EatDonut&Sandwich</tt>, <tt>Can't-do-this</tt><br />
<br />
After the name come an opening parenthesis and a closing parenthesis (). This is intended so you can provide extra data to the function (I'll explain in detail later).<br />
<br>After that, you put an opening brace { which indicates that the code coming after the brace will belong to your function.<br />
<br>After the brace, you put the code that would be run when you "run" the function.<br />
<br>When you're done with this code, you close the function definition with the closing brace }.<br />
<br />
<br />
=== Defining a function ===<br />
Every Sphere game must have a main script file, containing the main function with the name <tt>game</tt>. Let's use it for our example and define the function game:<br />
<br />
<syntaxhighlight><br />
function game()<br />
{<br />
//code comes here.<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
That's what a function looks like, basically. And <tt>function game()</tt> in particular is a function that you *need* to define to give Sphere a place to start out at.<br />
<br />
Still, if you try to run this code, nothing will happen. Sphere will open and then immediately close. That's because we didn't put in any code yet. (A comment isn't any kind of real code.)<br />
<br />
<br />
=== Calling a function ===<br />
Let's add one very simple command, with a comment in front of it:<br />
<br />
<syntaxhighlight><br />
function game()<br />
{<br />
MapEngine("map.rmp", 60); //Function call: opens the map engine with map.rmp<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
This piece of code WILL do something: open Sphere's map engine with the file map.rmp, with a framerate of 60 frames per second. Still, if you want this code to work, make sure that the file map.rmp actually exists inside the maps directory of your game!<br />
<br />
The above code also demonstrates what ''calling'' a function looks like. In this case, Sphere internally has a <tt>function MapEngine()</tt>. We told Sphere to run that code here by doing this:<br />
<syntaxhighlight> MapEngine("map.rmp", 60);</syntaxhighlight><br />
<br />
<br />
[[Legacy:MapEngine|MapEngine]]() is actually an internal Sphere function, but ''if'' it were coded in JS by a normal user it would look like this:<br />
<syntaxhighlight><br />
function MapEngine(map, framerate) //map, framerate will be explained in the next chapter.<br />
{<br />
//Code to make the map engine to work here.<br />
}<br />
</syntaxhighlight><br />
<br />
The original MapEngine function actually consists of internal Sphere code, not scripted in JS, but in the programming language Sphere itself has been written in (C++). You can't change this without changing Sphere itself.<br />
<br />
<br />
===Example of some simple Sphere functions===<br />
I'm going to show you and explain a few of the most used functions in Sphere. Every line of code will be explained.<br />
<br />
<syntaxhighlight><br />
function game()<br />
{<br />
CreatePerson("my_name", "character.rss", false);<br />
//Creates a new person. gives him the name my_name and loads the spriteset file character.rss for his looks.<br />
//'false' indicates he should NOT be destroyed when the game switches maps. That means he'll keep existing even on other maps.<br />
<br />
AttachCamera("my_name");<br />
//Makes sure that the camera is always pointed at the person called my_name.<br />
<br />
AttachInput("my_name");<br />
//Bind the default input to the person my_name. This means that when you press an arrow key, he'll move, stuff like that.<br />
<br />
MapEngine("map.rmp", 60);<br />
//We'll open map.rmp with a framerate of 60 frames per second (fps).<br />
}<br />
</syntaxhighlight><br />
<br />
Check these pages for more details:<br />
* [[Legacy:CreatePerson|CreatePerson]](person_name, spriteset, destroy_with_map)<br />
* [[Legacy:AttachCamera|AttachCamera]](person_name)<br />
* [[Legacy:AttachInput|AttachInput]](person_name)<br />
* [[Legacy:MapEngine|MapEngine]](mapfile, framerate)<br />
<br />
<br />
===A list of common functions===<br />
<br />
There are a lot more common Sphere functions, another bunch explained below. You can look up all the other Sphere functions here: [[Legacy:Functions]]. They're also in the doc_functions.txt file that comes with Sphere (it's in the docs directory).<br />
<br />
NOTE BEFORE YOU USE THESE: Some functions have a period . in them. I'll talk about what this means in detail later. For now, just put the appropriate function that loads a resource in front. Example LoadFont("file").drawText(1, 1, "text");<br />
<br />
{| style="padding: 10px" cellpadding="2" border="1" style="border-collapse:collapse;"<br />
! align="left" | Function<br />
! align="left" | Description<br />
|-<br />
| [[Legacy:FlipScreen]|FlipScreen]() || Put everything you have drawn so far on the screen. When drawing and blitting, your stuff doesn't get drawn on the screen, but in memory (in the "backbuffer"). It will be brought to the screen when you use FlipScreen(). After that the backbuffer is emptied. Use this after you've blitted ''absolutely everything you wanted'', and use it only once per frame!<br />
|-<br />
| [[Legacy:LoadFont|LoadFont]]("file.rfn") || Loads a font file. Only the Sphere font format .rfn is supported, so make a Sphere font first.<br />
|-<br />
| [[Legacy:Font.drawText|Font.drawText]](x, y, "text") || Write text on the screen with the assigned Font and on the assigned x/y coordinates (in pixels). Font should be a variable containing the font you loaded with LoadFont.<br />
|-<br />
| [[Legacy:Font.drawTextBox|Font.drawTextBox]](x, y, width, height, offset, "text") || Write text on the screen with the given font on the given x/y coordinates. This is a bit different from Font.drawText, because you define an area to write the text into. When the text hits the maximum given width, it continues writing the rest of the text on the next line until the maximum height is reached. The offset adds an extra bit to the X position of the first line of your text.<br />
|-<br />
| [[Legacy:LoadWindowStyle|LoadWindowStyle]]("file.rws") || Load a windowstyle file into memory.<br />
|-<br />
| [[Legacy:WindowStyle.drawWindow|WindowStyle.drawWindow]](x, y, width, height) || Draw the windowstyle on coordinates x,y with the given width and height.<br />
|-<br />
| [[Legacy:LoadImage|LoadImage]]("file.png") || Load an image file (bmp, png, gif, jpg, pcx, tga supported... But png is recommended for its size/quality ratio and transparency!).<br />
|-<br />
| [[Legacy:Image.blit|Image.blit]](x, y) || Draws Image at the given x,y coordinates. ("Blit" is an old English word for "draw".)<br />
|-<br />
| [[Legacy:Image.zoomBlit|Image.zoomBlit]](x, y, zoom) || Draws the image at the given scale on the given coordinates. When using a value like 1.5 the image will be drawn 1.5 its original size.<br />
|-<br />
| [[Legacy:LoadSound|LoadSound]]("file.mp3") || Load a sound file into memory. WAV, OGG and MP3 work best. MOD, IT, MID are supported but might have issues depending on what version of Sphere you use.<br />
|-<br />
| [[Legacy:Sound.play|Sound.play]](boolean) || Play the loaded sound. The boolean argument is true or false. true == repeat, false == do not repeat.<br />
|-<br />
| [[Legacy:Sound.stop|Sound.stop]]() || Stop the sound.<br />
|-<br />
| [[Legacy:RenderMap|RenderMap]]() || If you have the map engine open and you want to draw something on screen, the map will not be shown when you [[Legacy:FlipScreen|FlipScreen]]() it. So you'll have to draw a picture of the map yourself with RenderMap(), first. All the stuff you draw after it will then be displayed on that image of the map.<br />
|-<br />
| [[Legacy:GetKey|GetKey]]() || Pause script execution until you press any key on the keyboard. Useful for a really quick "wait for input" so you can test if something renders properly, for example. Doesn't take arguments.<br />
|-<br />
| [[Legacy:ChangeMap|ChangeMap]]("file.rmp") || If the map engine is open, you can switch maps with this function. Use [[Legacy:MapEngine|MapEngine]]() if the map engine wasn't open yet.<br />
|-<br />
| [[Legacy:Exit|Exit]]() || Quit the game.<br />
|-<br />
| [[Legacy:Abort|Abort]]("message") || Quit the game with an error message you can define yourself. Useful for debugging (it can let you know why something goes wrong somewhere, for example).<br />
|}<br />
<br />
== Variables and more on functions ==<br />
===Variables===<br />
When you're coding and need the exact same bit of data several times, you'll find that it is pretty annoying to type things like <tt>"I am a string"</tt> <tt>LoadFont("file")</tt> over and over again. Luckily there is is this little thing called a variable, which you can use to store these things (and values, text and a lot more!). Because of this you will only need to type the name of the variable to get what's stored inside it, which could be our <tt>LoadFont("file")</tt> or whatever! Well, that's just one of many advantages of it.<br />
<br />
<syntaxhighlight><br />
var some_name;<br />
</syntaxhighlight><br />
<br />
<br />
This is how you make a variable. It does NOT contain any kind of value yet. It has the name <tt>some_name</tt>, which means I would type <tt>some_name</tt> every time I needed its contents. (You can't do that yet, though, as it doesn't have any right now.)<br />
<br />
In any case, what I just did is called ''declaring'' a variable. This means that I reserved some precious computer memory for our variable. The keyword <tt>var</tt> is only needed once, and that is when you're declaring a new variable. After that you only need to type the variable name, and the JS parser will figure out it's a variable.<br />
<br />
Now, let's declare a different variable and assign a value to it.<br />
<br />
<syntaxhighlight><br />
var music;<br />
music = LoadSound("SomeFile.mp3");<br />
</syntaxhighlight><br />
<br />
<br />
This code declares a variable called <tt>music</tt>. Then we give it a value. The value we just gave it is <tt>LoadSound("SomeFile.mp3")</tt>, which is a function that loads a sound file an puts it (as a value of sorts) inside the variable. Now you can refer to the variable's name, <tt>music</tt>, to to get to its contents. In this case, that is the sound data retrieved from <tt>LoadSound("SomeFile.mp3")</tt>.<br />
<br />
<syntaxhighlight><br />
music.play(true);<br />
</syntaxhighlight><br />
<br />
<br />
What you see is <tt>music.play(true)</tt>, but Sphere sort of reads it as <tt>LoadSound("SomeFile.mp3").play(true)</tt> because music is a variable containing (the result of) LoadSound("SomeFile.mp3").<br />
Advantages:<br />
* It's quicker to type <tt>music</tt> instead of <tt>LoadSound("SomeFile.mp3")</tt> every time you need the song.<br />
* It also saves memory and loading time because the actual sound file is loaded only once into the variable <tt>music</tt>. It's not reloaded for every time we need the music.<br />
<br />
Regarding point 2, using just <tt>LoadSound("SomeFile.mp3")</tt> all the time would load the file over and over every time, making your game use way too much memory.<br />
<br />
Not just that, but if you load the same song twice, it's still identified as two different songs in memory. This means you wouldn't be able to use stuff like the .stop() function to stop music if you don't put it in a variable! Example:<br />
<br />
<syntaxhighlight><br />
LoadSound("SomeFile.mp3").play();<br />
LoadSound("SomeFile.mp3").stop();<br />
//Wait, the music isn't stopping! That's because the file is loaded from file twice, and so recognized as two different bits of data in memory.<br />
</syntaxhighlight><br />
<br />
<br />
With a variable:<br />
<br />
<syntaxhighlight><br />
var music;<br />
music = LoadSound("SomeFile.mp3");<br />
<br />
music.play();<br />
music.stop(); //It stops playing properly, because thanks to the variable name "music", Sphere knows what song (data) to stop.<br />
</syntaxhighlight><br />
<br />
<br />
====Quick variable declaration====<br />
There is another, faster way to declare a variable and assign a value to it at once. You can do it like this:<br />
<br />
<syntaxhighlight><br />
var music = LoadSound("SomeFile.mp3");<br />
</syntaxhighlight><br />
<br />
<br />
The variable is declared and immediately given a value.<br />
<br />
<syntaxhighlight><br />
var haha = LoadFont("haha.rfn");<br />
<br />
haha = LoadFont("eh.rfn");<br />
haha = LoadSound("haha.mp3");<br />
</syntaxhighlight><br />
<br />
<br />
As you can see you can also change the value in the variable any time you like. It IS called a variable, after all. Its contents can vary, even from one moment to the other.<br />
<br />
<br />
===Variables and data types===<br />
<br />
You can store all kinds of stuff in a variable! For example, you can use them to hold numbers or text for later use. These different types of data are called exactly that - a ''data type''. Example:<br />
<br />
<syntaxhighlight><br />
var story = 1;<br />
var player_name = "Pete Peterson";<br />
</syntaxhighlight><br />
<br />
<br />
This is useful for many different things. For example, story progression: if an event has happened: change the value of the <tt>story</tt> variable so Sphere knows that the event has happened. Or in the case of the string, you could remember a character's name that was entered by the user.<br />
<br />
There are many more types of data that you can store, and they will be explained in detail soon.<br />
<br />
<br />
===Adding and subtracting to variables===<br />
How to add and subtract values from variables containing numbers? Like this!<br />
<br />
{| class="wikitable"<br />
| <syntaxhighlight>variable++</syntaxhighlight> || adds 1 to your variable.<br />
|-<br />
| <syntaxhighlight>variable = variable + 1</syntaxhighlight> || does the same.<br />
|-<br />
| <syntaxhighlight>variable--</syntaxhighlight> || subtracts 1 from your variable.<br />
|-<br />
| <syntaxhighlight>variable = variable - 1</syntaxhighlight> || does the same.<br />
|}<br />
<br />
{| class="wikitable"<br />
| <syntaxhighlight>variable += value</syntaxhighlight> || adds the value to your variable.<br />
|-<br />
| <syntaxhighlight>variable = variable + value</syntaxhighlight> || does the same.<br />
|-<br />
| <syntaxhighlight>variable -= value</syntaxhighlight> || subtracts the value from your variable.<br />
|-<br />
| <syntaxhighlight>variable = variable - value</syntaxhighlight> || does the same.<br />
|-<br />
| <syntaxhighlight>variable = value</syntaxhighlight> || changes your variable to the value.<br />
|}<br />
<br />
{| class="wikitable"<br />
| <syntaxhighlight>variable *= value</syntaxhighlight> || multiplies the variable's value with the defined one and puts it in the variable.<br />
|-<br />
| <syntaxhighlight>variable = variable * value</syntaxhighlight> || does the same.<br />
|-<br />
| <syntaxhighlight>variable /= value</syntaxhighlight> || divides the variable's value with the defined one and puts it in the variable.<br />
|-<br />
| <syntaxhighlight>variable = variable / value</syntaxhighlight> || does the same.<br />
|}<br />
<br />
Of course, you could always do something like variable = variable - 4 if you like. But '''note that the shorter versions (++, +=, -=, --) are preferred''', for readability reasons (they're also shorter to type!).<br />
<br />
===Creating a function===<br />
As you probably know by now, Sphere reads the commands you insert. These commands are called functions... game(), for example, is a function too, so it could be started the same way as for example a FlipScreen(): by typing its name and the braces behind it.<br />
<br />
<syntaxhighlight>game();</syntaxhighlight><br />
<br />
<br />
So with this you'd run whatever is in function game(). This particular function doesn't need to be called manually, because game() is automatically called when Sphere starts your game. But it's a good example on how to create your own functions.<br />
<br />
Making your own function is pretty simple. Just look at how you made the game() function... You can make your own functions in the same way.<br />
<br />
<syntaxhighlight><br />
function Name()<br />
{<br />
//Code comes here.<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
You can put code in functions, this code will be executed as soon as the function is called from somewhere else. As an example we'll try to make a function that executes all commands necessary to make a box containing text.<br />
<br />
<syntaxhighlight><br />
//First we'll declare a few variables outside of any function.<br />
//This makes them global, which means they will exist in any function, even if you didn't declare them there.<br />
<br />
var window = GetSystemWindowStyle();<br />
//Declare the variable 'window' and put the standard Sphere window style in it.<br />
<br />
var font = GetSystemFont();<br />
//Opens the standard Sphere system font and puts it in the 'font' variable.<br />
<br />
//Here's our own function named 'TextBox'.<br />
function TextBox()<br />
{<br />
//Code goes inbetween the braces {}.<br />
window.drawWindow(5,5,310,100);<br />
font.drawText(5,5,"Some text");<br />
FlipScreen();<br />
GetKey();<br />
}</syntaxhighlight><br />
<br />
<br />
If you insert TextBox(); in your game function, everything in the TextBox() function will be run once you start the game.<br />
<br />
<syntaxhighlight><br />
function game()<br />
{<br />
TextBox();<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
=== Function arguments ===<br />
There is something lacking about our textbox: you can add TextBox(); to your code, but the end result will always stay the same. Every time you call TextBox() you will see the text "Some text" appear on the screen, no matter what. But what if we wanted to display something else, like "Hello", "Line 2" or "Status: moody"? It's not smart to make four different functions just for that, that would be a waste of memory. It would duplicate almost the exact same code four times, defeating the purpose of having a function! So instead, we slightly change the TextBox() function.<br />
<br />
Examine the following code:<br />
<br />
<syntaxhighlight><br />
function TextBox(text)<br />
{<br />
window.drawWindow(5,5,310,100);<br />
font.drawText(5,5,text);<br />
FlipScreen();<br />
GetKey();<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
Look at the spot where the function is declared (the first line). Inbetween the parentheses there's something new now. This is NOT a function or variable, but an argument. Arguments (also named parameters) can pass values (any kind: numbers, strings etc) on to your function, resulting in the output varying depending on what you "fed" the function. Now we can put all our different text in the function and get different results:<br />
<br />
<syntaxhighlight><br />
TextBox("Hello");<br />
TextBox("Line 2");<br />
TextBox("Status: dead");<br />
</syntaxhighlight><br />
<br />
<br />
As you can see we put our text in-between double apostophes ", in-between the braces () of the function call. The " are there to show Sphere that it's a string of text. More on that in chapter 5.<br />
The stuff that we insert inbetween the parentheses is saved into an argument, we gave this argument the name 'text'. Arguments behave like variables, but only inside their own function. They don't exist outside the function. (The same actually counts for variables made inside a function.) Anyway, what Sphere will do is give assign whatever value you put inbetween parentheses to this argument, and then use it inside the function.<br />
<br />
If that wasn't clear enough, imagine that Sphere is doing this: (it doesn't happen literally, but you can compare it with this anyway:)<br />
* Take the text that was found when the function is called and put it in our argument 'text'.<br />
* Walk through the function and look for other places using this argument 'text'.<br />
* Replace it with what we got through the function call.<br />
* The result is different every time because it's dependant on what you inserted!<br />
And here it is in physical form:<br />
<br />
<syntaxhighlight><br />
function a(argument)<br />
{<br />
Abort(argument);<br />
}<br />
<br />
//And to call it:<br />
a("This text is used by the Abort() function inside the a() function.");<br />
function a("something!") //Don't write code like this! Only put something that looks like a variable. This is just an example on what Sphere might do internally.<br />
{<br />
Abort("something!");<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
<br />
=== Multiple arguments in one function ===<br />
If you want to have more than one argument, simply seperate the argument names with a comma:<br />
<syntaxhighlight><br />
function TextBox(x, y, text)<br />
{<br />
window.drawWindow(x, y, 310,100);<br />
font.drawText(x, y, text);<br />
FlipScreen();<br />
GetKey();<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
The function call would look like this:<br />
<br />
<syntaxhighlight>TextBox(10, 15, "hahaha!");</syntaxhighlight><br />
<br />
<br />
This will make the text "haha" appear on x position 10 and y position 15.<br />
<br />
== Test your newly gained skills! ==<br />
<br />
I'm gonna be making an entirely new test. Working on it right now. But feel free to experiment with the functions you've learned! ;)<br />
<br />
== More on variables ==<br />
There's a few types of values available in Sphere, each one of them is intended for different things. This means that you can put different types of content in variables. In this chapter you'll learn about most of these types of values.<br />
<br />
===1. Numbers===<br />
You already knew this one. It is an often used type of value. You can put numbers in variables so you can refer to them, change them, or do maths with them.<br />
var blah = 4;<br />
<br />
===2. Text===<br />
You know this one already, too, if you have been paying close attention to the last chapter. You can use regular sentences, words, letters and characters with this type of content. You call this a string. Strings are used to store and use text in your program. Strings are recognizable by the fact that they have double quotes put around them (like "this"). This is done to clearly define to the system that it is a text string, not a number or anything else. You can also use single quotes if it's more convenient at the time, but take care with single quotes if you have "regular" text: words like it's use a single quote too, so they would end the string. Strings are also typically useful to define file and directory names.<br />
<syntaxhighlight>var hi = "Hello!";<br />
var project_file = "game.sgm";</syntaxhighlight><br />
There is a way to "connect" seperate strings together, in fact, it doesn't even have to be a string to be able to connect it to a string. Connecting (or combining) two strings (or compatible types) is what you would call concatenating. There is a very simple way to concatenate: use the plus sign as if you were "adding" two values.<br />
Run the following code in Sphere:<br />
<syntaxhighlight><br />
var string = "I am a string" + " with a second string concatenated";<br />
string = string + " and a third string concatenated";<br />
string += " and even a fourth one!" +<br />
" And a fifth one on the next line, because the plus character allows this.";<br />
Abort(string);<br />
</syntaxhighlight><br />
Sphere will show something like this:<br />
<br />
<syntaxhighlight>I am a string with a second string concatenated and a third string concatenated and even a fourth one! And a fifth one on the next line, because the plus character allows this.</syntaxhighlight><br />
<br />
Strings can also contain some special characters you can use for formatting the text when it's put on screen:<br />
<br />
* \n makes a new line.<br />
* \t adds a tab (or rather, 5 spaces).<br />
* \\ is for adding a \ to the text. :P<br />
* \" is used so you can safely add a double quote to your string without indicating to the engine that you finish the string.<br />
If you used a single quote ' to formulate your string in stead of a double quote, you can use a regular " inside this single-quote string, but you will then have to define "textual" single quotes like this: \'<br />
<br />
Try running the following code to see how you can use these:<br />
<br />
<syntaxhighlight>Abort("Hi.\nI'm on a new line.\nMe too.\n\tI'm on a new line with a tab in front.\nC:\\path\\to\\something.txt\nAnd \"I\" am in \"quotes\".");</syntaxhighlight><br />
The result will be something like this:<br />
<br />
<syntaxhighlight>Hi.<br />
I'm on a new line.<br />
Me too.<br />
I'm on a new line with a tab in front.<br />
C:\path\to\something.txt<br />
And "I" am in "quotes".</syntaxhighlight><br />
<br />
<br />
===3. Sphere functions===<br />
Sphere has a few built-in functions that can return values, meaning they give you values back when calling them. For example, GetPersonX(name) gives you a numerical value of the X position of a person on the map, GetScreenWidth() gives you the screen width, stuff like that. When you use such a function as a value in a variable, Sphere will put the resulting returned value in the variable.<br />
var blah = GetScreenWidth();<br />
In this case, you're not really putting the function in a variable. You're putting whatever value it gives back to you in it instead. For example, GetScreenWidth() could return the number 320 to you, so var blah would then contain the number 320 as a value.<br />
<br />
You can actually store the actual function inside a variable, if you wish. This will create what you would call a reference to this function: you're basically creating a new identifying name to call the function. To re-reference a function, just remove the parentheses () at the end:<br />
var GetSW = GetScreenWidth;<br />
var blah = GetSW(); //GetSW() actually calls the same code as GetScreenWidth() would now.<br />
There are a lot of functions in Sphere that return a value to whatever called it. Below are a few that you might want to study and practice using.<br />
* GetPersonX(person_name) - Returns the x position (as a number) of person_name on the map.<br />
* GetPersonY(person_name) - Same, but returns the y position.<br />
* GetScreenWidth() - Returns the width of the game screen (as a number).<br />
* GetScreenHeight() - Returns the screen height.<br />
* GetPersonList() - returns an array filled with strings of the person names on this map.<br />
* GetVersionString() - Returns the current Sphere version (as a string).<br />
<br />
===4. Sphere's special internal objects===<br />
You can put objects in variables. Objects are a kind of function too, but they can do much more internally, like store and retreive sub-values and even sub-functions inside. They also can have "changing" states: two objects can be the same on the outside, but store very different things. For example, you can have two instances of an Image object, one containing a small icon and the other a big cloud graphic. Objects are complex, so I'll leave the explanation at that for now and go more in-depth later in the tutorial.<br />
Anyway! Sphere has a bunch of internal objects that can load images, music, basically all basic file resources. These objects can be made (instantiated) and stored inside variables by calling their appropiate LoadWhatever() functions, like LoadImage(file) or LoadFont(file). These then offer some internal "sub"-functions (or subvalues) to get or change further information, like image.width and image.height, or Font.getHeight().<br />
<syntaxhighlight><br />
var blah = LoadFont("fontfile.rfn");<br />
var fontheight = blah.getFontHeight();<br />
blah.drawText(10, fontheight, "Hahaha!"); //y position of this text depends on the height of the largest character in the font you loaded.</syntaxhighlight><br />
blah contains an instance of Sphere's internal Font object, which has methods (subfunctions, indicated with a separating dot) to further do things with this object, like draw it on the screen.<br />
<br />
The following is a list of functions that returns an instance of any special Sphere object, like images and fonts.<br />
* LoadFont(file) - Makes and prepares a font object and returns it (to whatever called it).<br />
* LoadImage(file) - Makes and prepares an image object and returns it (to whatever called it).<br />
* LoadSound(file) - Makes and prepares a sound object and returns it.<br />
* LoadAnimation(file) - Makes and prepares an animation object and returns it.<br />
* LoadSpriteset(file) - Makes and prepares a spriteset object and returns it.<br />
* LoadSurface(file) - Makes and prepares a surface object and returns it.<br />
* LoadWindowStyle(file) - Makes and prepares a windowstyle object and returns it.<br />
* OpenFile(file) - Makes and prepares a file object (for saving game data or settings) and returns it.<br />
<br />
---<br />
<br />
* CreateColor(red, green, blue, alpha) - Makes a color object with the values you gave it.<br />
* GrabImage(x, y, width, height) - Returns an image object that contains the contents of whatever is on screen in the zone you specified.<br />
* GrabSurface(x, y, width, height) - Same as GrabImage(), but it returns a surface object, which has different kinds of functions. Better suited for manipulating the image, or drawing it in a special way (like warping it all over the screen).<br />
<br />
All of the above functions actually make different kinds of objects, which have their own specialized functions for that type of file. For example, a Sound object has .play() and .stop() functions in it (these are methods), and the Image object has a .blit() function (or method), etcetera. You can create your own objects too.<br />
<br />
===5. New functions===<br />
You can also put NEW functions in variables, like this:<br />
<syntaxhighlight>var blah = function(parameters)<br />
{<br />
//Code comes here.<br />
}</syntaxhighlight><br />
This is basically a different way to declare a function. It's functionally equivalent to this:<br />
<syntaxhighlight>function blah(parameters)<br />
{<br />
//Code comes here.<br />
}</syntaxhighlight><br />
This might seem useless, it has several uses:<br />
<br />
Objects use it to create methods (subfunctions, example is the getHeight() method in Font.getHeight()), because the syntax to make these is a bit different.<br />
You can make anonymous functions. These are normal functions that do not have a name. An example of doing this is when you pass a function as an argument:<br />
<syntaxhighlight><br />
function CallMe(argument)<br />
{<br />
argument(); //I'm sure that the argument actually contains a function! Let's call it.<br />
}<br />
//...<br />
CallMe(function() { Abort("something happens in here."); });<br />
</syntaxhighlight><br />
<br />
That's a lot of braces and parentheses! But all we do on the last line is create a function on the spot, on a single line, and not assign any identifiable name to it. I could also have done the following for the last line, but then you wouldn't call it an anonymous function anymore:<br />
<syntaxhighlight><br />
var somefunction = function()<br />
{<br />
Abort("something happens in here.");<br />
}<br />
<br />
CallMe(somefunction);<br />
</syntaxhighlight><br />
Still, it does the same thing; pass a function to another function, showing that functions can be allowed as "values" to pass to other things just as well as a number or a string.<br />
<br />
===6. true and false===<br />
true and false are keywords in JavaScript that are used when you only need to know two "states" about something. Some examples:<br />
Has an event happened? (you could call it a flag when used like this, you toggle the flag as you finish the event.)<br />
<br />
var talked_to_old_man = false;<br />
<br />
Should my textbox draw a window?<br />
<br />
<syntaxhighlight><br />
var draw_a_window = true;<br />
//And in a textbox function somewhere:<br />
if (draw_a_window) //The condition evaluates to "true" because draw_a_window is true...<br />
{<br />
windowstyle.drawWindow(x, y, w, h);<br />
}<br />
</syntaxhighlight><br />
Do I want to debug my game and show extra values on the screen?<br />
<syntaxhighlight><br />
var DEBUG = true;<br />
//Anywhere else in code:<br />
if (DEBUG) { /* Do something related to testing your game */ }<br />
</syntaxhighlight><br />
Do I want to check if something finished in order to end a loop?<br />
<syntaxhighlight><br />
var finished = true;<br />
while (finished == false)<br />
{<br />
//Do whatever until I set finished to true somewhere in this loop.<br />
}<br />
</syntaxhighlight><br />
An alternative way of checking for false is by putting an exclamation mark in front of the condition (or variables in the condition), like this:<br />
<syntaxhighlight>while (!finished)</syntaxhighlight><br />
<br />
Do I want to check if something simply is true or false, or do I want to make it true or false?<br />
<br />
<syntaxhighlight><br />
if (!sound.isPlaying()) //Check if sound is not playing (sound.Playing == false).<br />
{<br />
sound.play(true); //The true here is an argument to sound.play, which answers Sphere's question: should the music loop?<br />
}<br />
</syntaxhighlight><br />
<br />
As you can see, it has many small but important uses. You'll encounter these two values a lot.<br />
<br />
Last thing, remember that false is (sort of) equivalent to 0, and true is (sort of) equivalent to almost any other value. This means that a condition like (value == false) could be true when value equals 0! This can come in handy in places like loops.<br />
<br />
<br />
===7. undefined===<br />
undefined is a keyword in Sphere (or rather, JavaScript) that lets you enter nothing as a value! For example, some function's argument could be optional, and use some other default value if it's not set, so in this case you could pass the undefined value as an argument.<br />
Or maybe you wish to erase a variable's previous value.<br />
<br />
<syntaxhighlight>var blah = 4;<br />
blah = undefined; //Woops, setting 4 was a mistake.</syntaxhighlight><br />
<br />
Or maybe you wish to declare a variable, but not set a value yet... But then again, in that case you could just not set a value: JS will automatically enter undefined as the default value for a variable not given a value.<br />
<br />
<syntaxhighlight>var blah;<br />
Abort(blah); //Sphere will quit, printing out "undefined".</syntaxhighlight><br />
<br />
<br />
===8. Arrays===<br />
Arrays are somewhat different from the other variables mentioned so far. The big difference lies in that you can put multiple values in it, and these values can be of various types (even more arrays)!<br />
Declaring the array<br />
To make an array, you can type one of the following:<br />
<syntaxhighlight>var blah = new Array();</syntaxhighlight><br />
- OR -<br />
<syntaxhighlight>var blah = [];</syntaxhighlight><br />
I recommend using [] because it's shorter to type, though it doesn't really make a difference. The first way is a nice example of instantiating an object, though, so you might want to come back here later when you're learning about objects.<br />
<br />
<br />
====Storing values in the array====<br />
Okay, so now you have an Array. You can store your values in it in two different ways.<br />
<br />
The first way to do it is by putting values in it right when you declare the array.<br />
<br />
<syntaxhighlight>var blah = new Array(1, 6, 4, "Theo", "etcetera", new Array("subarray!"), 88);</syntaxhighlight><br />
<br />
- OR -<br />
<br />
<syntaxhighlight>var blah = [1, 6, 4, "Theo", "etcetera", ["subarray!"], 88];</syntaxhighlight><br />
<br />
This is how you declare the array and immediately put some values in it. An array is like a list of items where you can store a value, each seperated with a comma. All items in this list also have a number, starting from 0, which can be used to identify the seperate items, or places in the array.<br />
<br />
In the above array:<br />
* The number 1 is stored in spot 0 of the array.<br />
* The number 4 is stored in spot 2 of the array.<br />
* The string "etcetera" is stored in spot 4 of the array.<br />
* Another array (containing the string "subarray!" on spot 0) is stored in spot 5 of its parent (or containing) array.<br />
<br />
Confusing? Read over it again, then continue. The second way to put values in an array will make things a bit more clear. :)<br />
<br />
The second way to store values in an array is by already having declared the array, and then assigning values to spots in the array:<br />
<br />
<syntaxhighlight><br />
var array = []; //or new Array();<br />
array[number] = a_new_value;<br />
</syntaxhighlight><br />
<br />
For example, I'll now change some of the values in the array blah we made before:<br />
<br />
<syntaxhighlight><br />
blah[0] = "new value!"; //Spot 0 contained the value 1 before, now it contains "new value!".<br />
blah[1] = 7; //And this used to be 6<br />
blah[4] = "Pete"; //And this used to be "etcetera"<br />
blah[7] = "new value"; //Spot 7 comes after the last spot (spot 6, which contains 88), so basically we created a new spot to store a value in.<br />
blah[9] = [1, 2, 3]; //Another subarray with three items is added to the blah array. Spot 8 will contain an undefined value.<br />
</syntaxhighlight><br />
<br />
This way you can change the values (or make new values) on different places of your array. The old values (if there are any) are replaced, just like in a normal variable.<br />
<br />
Since we didn't touch spots 2 and 3, they'll keep their original values, which were 4 and "Theo". That means that our array now consists of the following values:<br />
<br />
<syntaxhighlight><br />
["new value!", 7, 4, "Theo", "Pete", ["subarray!"], 88, "new value", undefined, [1, 2, 3]]<br />
</syntaxhighlight><br />
<br />
Now how do we use these values? Well, that's pretty simple, actually. Just refer to your array and add straight brackets right after it containing the number of the spot you want to reach. For example:\<br />
<br />
<syntaxhighlight><br />
var nn = blah[3]; //nn now contains the value "Theo".<br />
TextBox(blah[4]); //TextBox will print out the text "Pete".<br />
Abort(blah[9]); //Sphere will quit, showing the text "[1, 2, 3]" (the array gets interpreted as a string, showing its internal values).<br />
</syntaxhighlight><br />
<br />
So what are arrays useful for? Well, for example, they can be useful for an inventory:<br />
<syntaxhighlight><br />
var inventory = ["Potion", "Antidote", "Empty bottle"];<br />
</syntaxhighlight><br />
<br />
But most importantly, they can be used to store similar data together and perform mass actions on them. Like naming all characters in your game (or just the party) and then generating a person on the map for each one of them:<br />
<br />
<syntaxhighlight><br />
var people = ["DaVince", "Petey Pirate", "Aegis", "Flikky", "Nidoran"];<br />
<br />
//Create persons using their above name for both the identifying name and the spriteset file to load (like DaVince.rss or Nidoran.rss).<br />
CreatePerson(people[0], people[0] + ".rss", true);<br />
CreatePerson(people[1], people[1] + ".rss", true);<br />
CreatePerson(people[2], people[2] + ".rss", true);<br />
CreatePerson(people[3], people[3] + ".rss", true);<br />
CreatePerson(people[4], people[4] + ".rss", true);<br />
</syntaxhighlight><br />
<br />
Now, the above might not seem like it has any advantage ("Why not just do <tt>CreatePerson("DaVince", "DaVince.rss", true)</tt>?").<br />
<br />
You see, the above code can be made much simpler and quicker using loops, explained in the next chapter.<br />
<br />
You'll find that arrays can have lots of uses. I use them a lot, and some native Sphere functions also use them, so you'd better get to know them! ;)<br />
<br />
<br />
<br />
== Conditions and loops ==<br />
<br />
===If, while and for===<br />
This chapter will become a bit more difficult and confusing because we'll have to break some of the Javascript syntax rules that you learned before. For instance, we won't add a semicolon after every line any more, and sometimes we add multiple semicolons in one line! Luckily this only happens on a few special occasions, so once you know this exception from the rule it's easy to recognize.<br />
<br />
===Conditions: 'if'===<br />
You might have thought at least once about having an event happen in the game ONLY when something else had happened first. Well, you can do this. It's called a condition, as you set a ''condition'' for making it happen.<br />
<br />
Conditions basically check if something is true or not. For example, it can check if the variable <tt>blah</tt> contains value <tt>4</tt>, and if it is, it will evaluate this as <tt>true</tt>. You use the '''<tt>if</tt>''' keyword to make this check, in the following style:<br />
<syntaxhighlight>if (blah == 4)</syntaxhighlight><br />
<br />
Now for a complete example:<br />
<br />
{{col-begin|width=50%}}<br />
{{col-break}}<br />
<syntaxhighlight><br />
var story = 0;<br />
<br />
if (story == 0) //No semicolon ; at the end!<br />
{<br />
//Hey, story is 0! This code runs.<br />
story = 1;<br />
}<br />
</syntaxhighlight><br />
{{col-break}}<br />
<syntaxhighlight><br />
Declare variable story with value 0<br />
<br />
Check whether variable 'story' contains value 0<br />
Open a block of code that runs when this is true<br />
<br />
Set story to 1; now this condition can't run again<br />
Close the block of code for the condition<br />
</syntaxhighlight><br />
{{col-end}}<br />
<br />
<br />
Explanation:<br />
<br />
* <tt>Declare variable story with value 0</tt><br />
<br />
Self-explanatory. (If not, read about declaring variables again.)<br />
<br />
<br />
* <tt>Check whether variable 'story' contains value 0</tt><br />
<br />
This line of code has TWO equals signs (=) in it. A double equals sign (==) tells JavaScript that this is a '''comparison''': we're comparing the value inside <tt>story</tt> and the value 0 to each other. Specifically, == tells JavaScript to check if these are EQUAL to each other.<br />
<br />
A single = does ''not'' run a comparison, but ''assigns'' a value to a variable. I did this in the chapter about variables: I assigned a value to a variable by putting an = in-between: <tt>var a = 6</tt>. But in conditions and other comparisons, we ''shouldn't'' use a single = because we're not assigning values to variables; we're just ''comparing'' them!<br />
<br />
<br />
* <tt>Open a block of code that runs when this is true</tt><br />
<br />
A condition (or if-statement) uses braces {} in which you enter the code that's going to run when the condition passes, just like how a function runs code between the braces when it is called. This is called a block of code. The opening brace { is put after the if-statement. The code inbetween the braces will then run when the condition evaluates as true (so when story == 0). Else, it will simply skip the block of code and continue regular code execution after the block (ending at } ).<br />
<br />
<br />
* <tt>Set story to 1; now this condition can't run again</tt><br />
<br />
Now that we've done everything we wanted to do in case story was 0, let's change the value of story to 1. This ensures that the condition will not be run again, so the same event won't happen twice (unless you set story back to 0 somewhere and make the game run the condition again).<br />
<br />
<br />
* <tt>Close the block of code for the condition</tt><br />
The block of code containing what should be run when the condition is true is closed. The conditional code has finished.<br />
<br />
<br />
As you can see, the structure of a condition is almost the same as when you're creating a function. The big difference lies in ''when and how'' it is used: a function will run whenever it's called, but a condition will only run whenever it's encountered AND when its conditions all evaluate to 'true'.<br />
<br />
(Evaluate, in JS's case, basically means to "solve" a problem by simplifying it. 1+1==2 would evaluate to true since one and one makes two, and 2 IS indeed equal to 2. Otherwise it will evaluate to false.)<br />
<br />
If it helps, here's one more explanation compared to real life. Things like story == 0 are things that you could call a statement. Basically, you make a statement to the engine that story would have the same value as 0. JS then evaluates this statement and determines if this is true, or false. Kind of like a math teacher evaluating your test answers. They'll also put crosses and circles on your test paper to indicate if your statement that 1 + 1 = 3 is true or false.<br />
<br />
<br />
====Comparing values====<br />
The == operator (that's what you call it) is just one of a set of comparisons you can use in conditions. It compares whether one number is equal to the other. But more types of comparisons exist, like checking if a value is higher or lower than the other. Here they are:<br />
<br />
{| class="wikitable"<br />
| <syntaxhighlight>a > b</syntaxhighlight> || Compares whether value a is higher than value b.<br />
|-<br />
| <syntaxhighlight>a < b</syntaxhighlight> || Compares whether value a is lower than value b.<br />
|-<br />
| <syntaxhighlight>a >= b</syntaxhighlight> || Compares whether value a is higher than or equal to value b.<br />
|-<br />
| <syntaxhighlight>a <= b</syntaxhighlight> || Compares whether value a is lower than or equal to value b.<br />
|-<br />
| <syntaxhighlight>a != b</syntaxhighlight> || Compares whether value a is anything but value b.<br />
|-<br />
| <syntaxhighlight>a === b</syntaxhighlight> || Strict compare. Also compares if the type is the same. See below for explanation.<br />
|}<br />
Some weird values can evaluate to true together, even if they're not of the same type or even value. For example, when you compare to the value true, ''comparing it to almost any value'' will make the complete comparison evaluate to true. (2 == true), (true == "a string") and (-400.6 == true) will all evaluate to ''true'', simply because these values are not false in the machine code (false is 0, more or less; true is plain everything else). However, you probably wouldn't treat those values as "true" but compare them properly.<br />
<br />
A triple-equals sign === was made to solve this problem: it will not only compare the values but also the types of the items compared. If you do this, these types need to match. "true" is a boolean, and a comparison will now only evaluate as "true" when it's compared to "true" (so <tt>true === true</tt>). <tt>(2 === true)</tt> and <tt>("blah" === true)</tt> evaluate to false. Only (true === true) will evaluate the condition as true. Only (2 === 2) will evaluate as true, (2 === "2") won't (because that other "2" is a string, not a number).<br />
<br />
So... Why would you compare true to true? Well... It all has to do with the values in variables. You can do <tt>var storyfinished = true;</tt> (storyfinished === true) would entirely make sense.<br />
<br />
<br />
You use all of these in the same way you used the double equals sign.<br />
<syntaxhighlight><br />
if (a > b) { TextBox("a was higher."); }<br />
if (a != b) { TextBox("a and b are different."); }<br />
if (a <= b) { TextBox("a is lower, or the same as b."); }<br />
if (a === b) { TextBox("a is the exact same object with the exact same value as b."); }<br />
//etc.<br />
</syntaxhighlight><br />
<br />
''Side note''<br />
<br />
Notice how I put the condition, opening brace, code and closing brace all on one line? Yes, this is allowed. You can do the same with functions, or other blocks of code that look like them:<br />
<syntaxhighlight>function Something() { TextBox("Hi."); /* I'm a nested comment. */ Abort("The game is quit now."); }</syntaxhighlight><br />
In fact, this is mostly why the semicolon ; is used: to easily recognize when one command ends and the next one begins, even on the same line.<br />
<br />
Use this sparingly, though, as things can kind of become a mess if you do this. Each bit of code on a new line is much easier to read, especially when you have { stuff with tabs going on.<br />
<br />
===Loops: 'while' and 'for'===<br />
====while====<br />
Loops in Sphere! These are very useful for things like repeating code. One advantage is that you don't have to have many lines containing the same code over and over again. Example:<br />
<br />
<syntaxhighlight><br />
var value = 0;<br />
value++;<br />
TextBox(value);<br />
value++;<br />
TextBox(value);<br />
value++;<br />
TextBox(value);<br />
value++;<br />
TextBox(value);<br />
//etcetera etcetera....<br />
</syntaxhighlight><br />
<br />
It takes up way too much code if you want to add 1 to value and show a textbox with that value 100 times in a row. That's where the loop comes in: a loop makes it neat and short because you just enter the two lines (value++ and TextBox(value)) in it once, and then run it a hundred times! The loop takes a condition to determine when it should still repeat the code running inside. If the condition is false, the loop ends.<br />
<br />
There are more kinds of loops. The ''while'' loop is the easiest one to start with, because it looks just like an ''if'' block.<br />
<br />
<syntaxhighlight><br />
var value = 0;<br />
<br />
while (value < 100)<br />
{<br />
value++;<br />
TextBox(value);<br />
}<br />
<br />
//Code continues here when the loop is done.<br />
</syntaxhighlight><br />
<br />
A <tt>while</tt> loop is basically like an ''if-statement'': it checks whether the given condition returns <tt>true</tt>. The only difference is that it repeats the code inside the braces when this is the case. In this case, the loop can be interpreted as:<br />
<pre><br />
While (the value of var 'value' is lower than 100):<br />
Add 1 to var value.<br />
Call function TextBox(), which does something with the value.<br />
Do the comparison again and run the above two lines again if still true.<br />
</pre><br />
<br />
Things keep looping while variable <tt>value</tt> is still lower than <tt>100</tt> (because it's <tt>true</tt> that <tt>(value < 100)</tt> here).<br />
<br />
When <tt>value</tt> becomes <tt>100</tt> or higher, the comparison made in the condition (<tt>value < 100</tt>) becomes <tt>false</tt> and the loop stops executing. The engine continues business as usual.<br />
<br />
* The loop begins running because when the loop starts, var <tt>value</tt> is still 0, which is lower than 100. If <tt>value</tt> were to be 100 already, the loop would never even begin.<br />
* The loop ends because it reaches a point where (value < 100) becomes false. Sphere will then exit the loop.<br />
<br />
<br />
'''So why are loops so useful?'''<br />
<br />
If we had NOT used a loop for this piece of code, we would have wasted around 200 lines of code: 100 for value++ and another 100 for TextBox(value). It would be a never-ending mess! But with the power of loops we minimized this to 5 lines, where those two lines just loop 100 times. Much, much better.<br />
<br />
Also useful if you don't know how many times you want something to run!<br />
<br />
'''Practical example''' (note: vars and functions are all made up for the example)<br />
<syntaxhighlight><br />
while (player_actions_done < max_player_actions)<br />
{<br />
//Do stuff like ask the player to perform an action here<br />
player_actions_done++;<br />
}<br />
//And afterwards this player's turn ends or something<br />
</syntaxhighlight><br />
<br />
To close, a common term used with loops! A single time that we run the loop is called an ''iteration''. The example code with the TextBox() goes through 100 iterations. The first iteration is the one where value goes from 0 to 1 to then '1' in a self-made TextBox. The 88th iteration would make the value go from 87 to 88 and display '88'. The last (final) iteration is run when value is 99 - when it's 100 the block of code is no longer run.<br />
<br />
====for====<br />
There is a different, more useful but also more difficult to learn type of loop. This is the for loop.<br />
A for loop looks a bit different. It's because you do multiple things at once, still in the loop. A for loop usually looks like this:<br />
<br />
<syntaxhighlight><br />
for (var value = 0; value < 100; value++)<br />
</syntaxhighlight><br />
<br />
There are three things here, and semicolons inbetween them! That's a bit different from the usual... But, it's not as difficult to grasp as you might think, and it actually makes the loop much more powerful...<br />
<br />
<pre>for (prepare variables here; putcondition here; action to variable on each iteration here)</pre><br />
* In the first part of a for loop, you place your ''variable'' that will usually 'control' the loop. This can be a new variable, or one that was created globally somewhere else. You should also give it a starting value (if you don't, your variable will effectively be useless for use in the loop).<br />
* In the second part you place the ''condition'', just like you would do in an if or a while loop, only this time you usually involve your special variable.<br />
* In the third part you put ''code that affects the variable'' so it can end the loop at some point. The third part of the statement is run after the code inside loop was run; eg. after an iteration has finished.<br />
<br />
'''Examples'''<br />
<syntaxhighlight><br />
for (var blah = 0; blah < 25; blah++)<br />
{<br />
TextBox("This loop started " + blah + " times so far...");<br />
}<br />
</syntaxhighlight><br />
<syntaxhighlight><br />
TextBox("Countdown for liftoff! Ready...");<br />
for (var blah = 10; blah > 0; blah--)<br />
{<br />
TextBox(blah + "...");<br />
}<br />
TextBox("ZERO! We have a liftoff!");<br />
</syntaxhighlight><br />
This loop won't show a text box with "0..." because the loop ends right after blah is decreasing in value from 1 to 0. So we can put our own, neater "ZERO!" at the bottom instead.<br />
<br />
It's probably easier to try it out for yourself to really see how it works!<br />
<br />
====Practical example of combining loops with arrays====<br />
Now for a different use of the loop that also shows its practical use in combination with a collection of data (in this case, an array). We're going back to the last example of the previous chapter, and we're going to rewrite it to use a loop.<br />
<br />
Goal: to create persons on the map using their names identified in the array.<br />
Original version:<br />
<br />
<syntaxhighlight><br />
var people = ["DaVince", "Petey Pirate", "Aegis", "Flikky", "Nidoran"];<br />
<br />
//Create persons using their above name for both the identifying name and the spriteset file to load (like DaVince.rss or Nidoran.rss).<br />
CreatePerson(people[0], people[0] + ".rss", true);<br />
CreatePerson(people[1], people[1] + ".rss", true);<br />
CreatePerson(people[2], people[2] + ".rss", true);<br />
CreatePerson(people[3], people[3] + ".rss", true);<br />
CreatePerson(people[4], people[4] + ".rss", true);<br />
</syntaxhighlight><br />
<br />
New version:<br />
<syntaxhighlight><br />
var people = ["DaVince", "Petey Pirate", "Aegis", "Flikky", "Nidoran"];<br />
var len = people.length; //array.length can be used to get the length of an array.<br />
//In this case, it's 5 (the highest spot to contain a value is in 4, meaning there's 5 items that were given a value (including the undefined ones)).<br />
<br />
for (var i = 0; i < len; i++) //Basically, we go through each and every item that's in the array, and run the code below, using them.<br />
{<br />
CreatePerson(people[i], people[i] + ".rss", true); //people[i] is people[0], then people[1], then people[2]...<br />
}<br />
</syntaxhighlight><br />
It might not seem too worthwhile to write a loop for this small bit of code, but consider how much extra work you would have to do if you had 14 people... And what if two of them disappeared later? Or if you gained five more people? The original version is inflexible and relies on you knowing exactly what's in the array; the flexible version has the computer take care of that. This greatly reduces the chance of getting error messages as your program won't read entries that no longer exist, for example.<br />
<br />
It also greatly expands the possibilities of what you can do with the language, and with your game. Whether you have a party of one or a party of five, the game can handle it in any situation and you can display a character list menu properly, for example.<br />
<br />
====do...while====<br />
<br />
There is also a third type of loop, but it's basically the same as a while loop and not many people use it. If you still want to know more about it, check out this page.<br />
<br />
== Test Yourself Again ==<br />
Take a breather. Try to incorporate everything that you learned into a game. One day, I might assist you with this by adding a test for you to do here.<br />
<br />
== Advanced functionality in functions ==<br />
There's much more that you can do with if-statements than you have learnt so far. For example, you can put several conditions on your if-statement at once; you can group related if-statements together for efficiency and readability; you can even leave out the braces around the code to execute in some cases. This chapter will explain you why and how.<br />
<br />
===Combining several conditions: && and ||===<br />
You can combine several conditions - that is, comparisons - to make an overall more complicated if clause. More complicated, but also more precise. For example, (value > 0) can only check if your value is higher than 0, but combined with a (value < 10), we suddenly only have the possibility to be the numbers 1 to 9 to have a condition evaluate to true! This can be very useful, and sometimes even required, to get the desired effect.<br />
<br />
====The inefficient way====<br />
The inefficient way is nesting a condition inside another one.<br />
<br />
<syntaxhighlight><br />
if (value > 0)<br />
{<br />
if (value < 10)<br />
{<br />
TextBox("The value is somewhere in-between 0 and 10.");<br />
}<br />
}<br />
</syntaxhighlight><br />
<br />
You're running two conditions, here. But you're also running two if clauses. This takes up a tiny bit more processing power. The computer gets a tiny bit more to do, because it has to do this:<br />
* Compare a value,<br />
* then run the code inside,<br />
* which again compares a value,<br />
* then runs the code inside that,<br />
* and then Sphere has to "end" that block of code.<br />
* And then another one, because we had two conditions.<br />
<br />
'''But more importantly, you're nesting more than you have to.''' Can you imagine when you have eight things to check against? Your code would be on the right side of the screen, and you'd have to keep track of which accolades {} belong to which condition! This makes things very unreadable and confusing.<br />
<br />
This can surely be done more in a better way! Yup, it sure can:<br />
<br />
====The efficient way====<br />
<syntaxhighlight><br />
if (value > 0 && value < 10)<br />
{<br />
TextBox("The value is somewhere in-between 0 and 10.");<br />
}<br />
</syntaxhighlight><br />
<br />
What Sphere does now:<br />
* Compare a value,<br />
* and a second one,<br />
* evaluate whether the total result is true.<br />
* If so, run the code inside,<br />
* and then "end" that block of code.<br />
<br />
Actually, I think it might be less steps, because computers have special ways to compare multiple grouped conditions efficiently. Still, one step less than the previous thing with my explanation. The code complexity has decreased, and you have saved some precious processor power, which can then be used towards more useful things, like advanced AI or whatever.<br />
<br />
Next to the &&, which is called the AND operator, there is the OR operator. This special operator will evaluate the entire result as true if any of the given conditions is true, no matter if all others are false. This can be useful if you want some common code to run under only some circumstances:<br />
<br />
<syntaxhighlight><br />
if (cheat_mode || backflip_mode || the_player_kicks_ass) //If even just one of these three equals true...<br />
{<br />
DoABackflip();<br />
}<br />
</syntaxhighlight><br />
<br />
The player might do a backflip if any of the three variables given are true. Doesn't matter if only one of them is true, or all three... As long as something is true, it'll run the code inside the block.<br />
<br />
The two types of operators can be combined. You could check if all elements in a set of conditions is true, and then compare that to another conditions that might override it and run the condition anyway. It's best to group these together by using extra parentheses. Example:<br />
<br />
<syntaxhighlight><br />
if ((master_password_entered && voice_recognition_success && confirmed_twice) || evil_intruder_override)<br />
{<br />
SelfDestruct(ship);<br />
}<br />
</syntaxhighlight><br />
<br />
The ship will ONLY self-destruct if the master password was entered, the voice recognition succeeded AND the user confirmed the self-destruct sequence twice. Only then. Oh, or if there's an evil intruder who somehow overrode the system.<br />
<br />
Of course, even if you don't use such a complicated combination of options, it's still a lot more convenient than putting a condition alongside a condition inside a condition inside a condition.<br />
Note that it also works with loops.<br />
<br />
<syntaxhighlight><br />
while (!done && willpower > 0) //When you're not done yet AND you still have willpower...<br />
{<br />
DontGiveUp();<br />
}<br />
</syntaxhighlight><br />
<br />
===Leaving out the braces===<br />
This is another exception to the syntax rules in JavaScript, and sometimes a rather handy one: you can choose to leave out the braces. However, you can do this in only ONE case: when there's only one statement to make. The if-statement immediately closes after you put that finishing semicolon after your only line of code that's going to be run in the condition:<br />
<br />
<syntaxhighlight><br />
if (condition)<br />
Statement();<br />
if (next_condition)<br />
OtherStatement();<br />
</syntaxhighlight><br />
<br />
Of course, you can still format this in any way you like. This can make code much more compact:<br />
<br />
<syntaxhighlight><br />
if (story == 1) Statement();<br />
if (story == 2) SecondPart();<br />
if (story == 3) ThirdPart();<br />
if (story >= 4) Abort("End of the game!");<br />
</syntaxhighlight><br />
<br />
Another exception exists where you can use several statements if you like. However, this method is less compatible; a few JavaScript keywords like return and break will NOT work if you do this:<br />
<br />
<syntaxhighlight><br />
if (condition)<br />
Statement1(), //Use a comma, not a semicolon, and you can keep feeding the thing code until a semicolon ; is encountered!<br />
story++,<br />
Statement2(); //End of the code to run for this condition.<br />
</syntaxhighlight><br />
<br />
Note that it also works with loops.<br />
<br />
<syntaxhighlight><br />
while (willpower > 0)<br />
DontGiveUp();<br />
for (var i = 0; i < 1000; i++)<br />
TextBox("The loop has run " + i + " times now. WILL IT EVER END? Yes, at 999.");<br />
</syntaxhighlight><br />
<br />
===The "else" keyword===<br />
You can connect if-statements together if you like. What if there's three related cases? Maybe var story is 1... Maybe it's 2. Maybe it's neither! You can use the else keyword to connect these three different conditions together. This offers two advantages:<br />
<br />
To people reading the code, it's recognizable as a group of related statements;<br />
<br />
When one condition evaluates as true, all others will automatically skip, not even bothering to evaluate. This saves processing power (your PC needs to do less).<br />
<br />
There are two types of ways to use else:<br />
<br />
* <tt>else if</tt> - there's a different, related condition. For example, story is 2.<br />
* Just <tt>else</tt> - All of the previous related conditions have evaluated to false. For example, story is 6 and there's no else if that checks for it to be 6.<br />
<br />
Basically, using just else is like defining code that will run in all other cases. else if can only exist right after an if or another else if. else can only exist once, and that is after all other related conditions.<br />
<br />
<syntaxhighlight><br />
var story = (any value)<br />
<br />
if (story == 0)<br />
RunStorySectionOne();<br />
else if (story == 1)<br />
RunSecondSection();<br />
else if (story >= 2 && story <= 4) //If story is 2, 3 or 4<br />
RunThirdSection();<br />
else //Story could be 5, or 389, or -300 for all we know<br />
Abort("That story section does not exist, fool!");<br />
</syntaxhighlight><br />
<br />
== Objects ==<br />
Note: this stuff is kind of complicated. I sometimes explain several concepts at the same time. I also apply a bunch of the earlier knowledge, so make sure you know and control the other stuff before you begin.<br />
<br />
I've mentioned objects before, now we'll go into more detail about them. An object is one of the more complicated things in Sphere, but they will allow you to do very powerful things.<br />
<br />
<br />
===What is an object?===<br />
An object is a type of variable in which you can store many things - values, functions, and even more objects. However, an object is not like an array because of two main reasons:<br />
Objects use names instead of numbers for your data. These "names" are properties if you're storing data and methods if you're storing functions.<br />
Objects can have different instances.<br />
<br />
<br />
===What is an instance?===<br />
Objects are very useful for one specific thing - creating clones of itself that contain different data, and possibly different behavior. When you start making your own object, you start out by shaping the "original" object, which is called the prototype. From here on, your prototype will serve as the way to create actual, usable objects out of your prototype. These new, copied objects are what you would call an instance of that object. Instances let you have similar object - with different values.<br />
<br />
<br />
===An example of different instances===<br />
The best example to start out with is with something familiar: let us look back at Sphere's own, internal object. When you use LoadImage(), you actually create a new instance of the internal Sphere Image object. For example:<br />
<br />
<syntaxhighlight><br />
var a = LoadImage("a.png");<br />
var b = LoadImage("b.png");<br />
</syntaxhighlight><br />
<br />
Both a and b are Image objects, but they contain different images - that is, different data.<br />
<br />
<br />
===Making your own prototype===<br />
Now, Sphere's internals use functions like LoadImage(), but this is not actually "true" object-oriented programming, and it is not how we will make our own object prototype. But in this first step, it will almost appear as if we are!<br />
<br />
<syntaxhighlight><br />
function MyObject()<br />
{<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
There you go, we just made an object prototype. What? It looks just like making a function? That's exactly right - all functions are actually objects, except we don't normally use them as such! Let's take it a step further and see what's so different about objects.<br />
<br />
<syntaxhighlight><br />
function MyObject()<br />
{<br />
this.myproperty = 4;<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
Objects have properties. Inside properties, you store values. It's just like using var, but instead we use this. The reason for this is so we can access the value from outside the function. Not only that, but we tell Sphere that this variable-type thing is a default value that the prototype will give to each instance, after which it can be changed individually per instance. You could access the property from the outside as follows:<br />
<br />
<syntaxhighlight>MyObject.myproperty</syntaxhighlight><br />
<br />
<br />
But take note! We are still making an object prototype here, so it's better to leave the prototype alone. Why? Because if you change the prototype's properties' values, new instances would take over that new value too (but old ones would still be in their original state with the old values). This can become a mess, so be careful with it. Usually you will want your prototype to be well-defined inside itself, and nowhere else.<br />
<br />
Object prototypes can also have functions. These are copied just like values would be, which is why you could make two instances of the same type (that means, derived from the same prototype) have similarly named functions that do different thing. A function inside an object is called a '''method''' - usually because the object is made to do certain related things, and these subfunctions would be the method to manipulate its data.<br />
<br />
<syntaxhighlight><br />
function MyObject()<br />
{<br />
this.myproperty = 4;<br />
this.myMethod = function()<br />
{<br />
this.myproperty++;<br />
}<br />
}<br />
</syntaxhighlight><br />
<br />
The above added method adds 1 to our property, so every time it's called, myproperty would increase by 1.<br />
<br />
<br />
===Making an instance of the object===<br />
Also known as ''instantiating''. To do it, use the <tt>new</tt> keyword. I'll also demo how you can set values from the instance's properties.<br />
<br />
<syntaxhighlight><br />
var some_instance = new MyObject();<br />
Abort(some_instance.myproperty); //The engine quits, displaying a 4<br />
</syntaxhighlight><br />
<br />
<br />
It's useful because each instance can have different values from the other. '''This is one of the real strengths of objects.'''<br />
<br />
<syntaxhighlight><br />
var first = new MyObject();<br />
first.myproperty = 6; //Change the value of myproperty in just this instance<br />
var second = new MyObject(); //New instance, its myproperty is that prototype value of 4<br />
<br />
Abort(first.myproperty + " and also " + second.myproperty); //The engine quits, displaying "6 and also 4"<br />
</syntaxhighlight><br />
<br />
<br />
====Practical example====<br />
<br />
<syntaxhighlight><br />
//Let's define a new object prototype for this example<br />
function Character()<br />
{<br />
this.name = "default";<br />
this.hp = 100;<br />
this.mp = 50;<br />
this.equipment = [];<br />
}<br />
<br />
//Now let's make a few player characters<br />
var players = [];<br />
players[0] = new Character(); //New instance of Character<br />
players[0].name = "Jon"; //This value is only changed for this instance<br />
players[0].hp = 200; //Same deal<br />
<br />
players[1] = new Character(); //Another instance of Character<br />
players[1].name = "Jacques"; //This value is only changed for THIS instance, Jon with 200 hp is still Jon with 200 hp<br />
players[1].hp = 40; //Same, etc.<br />
players[1].mp = 9000;<br />
</syntaxhighlight><br />
<br />
<br />
Now we have two player characters with very different stats, all thanks to an object prototype we made for managing players!<br />
<br>Note that I made this object have some very generic properties, which has advantages. It's flexible, it can be used for enemy characters too:<br />
<br />
<syntaxhighlight><br />
//Now let's make a few player characters<br />
var enemies = [];<br />
enemies["mage"] = new Character();<br />
enemies["mage"].name = "Mage";<br />
enemies["mage"].mp = 2000;<br />
enemies["mage"].equipment = ["wizard robe", "wizard hat"];<br />
</syntaxhighlight><br />
<br />
<br />
=== Passing arguments to the prototype ===<br />
What I've just shown is powerful, but it's also very long. A bunch of lines just to change some character stats? Luckily, arguments can be used not in just functions, but also in prototypes!<br />
<br />
Let's enhance our Character object with it to shorten the code above.<br />
<br />
<syntaxhighlight><br />
function Character(charname, initialhp, initialmp)<br />
{<br />
this.name = charname;<br />
this.hp = initialhp;<br />
this.mp = initialmp;<br />
this.equipment = [];<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
Now, instantiating becomes much shorter.<br />
<br />
<syntaxhighlight><br />
var players = [];<br />
players[0] = new Character("Jon", 200, 50); //.name becomes Jon, .hp becomes 200, .mp becomes 50<br />
</syntaxhighlight><br />
<br />
<br />
Note that .equipment wasn't a part of the prototype's arguments, so it has to be treated like before.<br />
<br />
<syntaxhighlight><br />
players[0].equipment = ["cap", "T-shirt", "shorts"];<br />
</syntaxhighlight><br />
<br />
<br />
This is a good thing to do. During instantiation it's best to only put the things you'd most commonly change as arguments. So for a character, that would be the name and basic stats. Otherwise it becomes a long mess of arguments you don't even fill in half of the time.<br />
<br />
<br />
=== Using objects in combination with each other ===<br />
You could use many different objects to really start managing your data in a nice way. For example, let's add a data structure to store the equipment in.<br />
<br />
<syntaxhighlight><br />
function Equipment(name, type, description, hpeffect)<br />
{<br />
this.name = name; //The first this.name is this object's name property. The non-this name is the argument in function Equipment.<br />
this.type = type;<br />
this.description = description;<br />
this.hpeffect = hpeffect;<br />
}<br />
</syntaxhighlight><br />
<syntaxhighlight><br />
var all_equipment_ever = []; //Some global variable somewhere maybe<br />
all_equipment_ever["cap"] = new Equipment("Cap", "headwear", "This neat cap ups your HP by ten.", 10);<br />
</syntaxhighlight><br />
<br />
<br />
Now that we've invented some neat equipment, we can improve the Character object to make use of it.<br />
<br />
<syntaxhighlight><br />
function Character(charname, initialhp, initialmp)<br />
{<br />
this.name = charname;<br />
this.hp = initialhp;<br />
this.mp = initialmp;<br />
this.equipment = [];<br />
<br />
//Let's make a method to apply the stats of equipped equipment<br />
this.equip = function(what)<br />
{<br />
var theitem = all_equipment_ever[what];<br />
//Ex. if the what argument is "cap", theitem would contain all_equipment_ever["cap"]. Which is that object instance we made earlier.<br />
<br />
this.equipment.push(theitem);<br />
//array.push() is a function in JS to append new array items at the end of an array.<br />
//So now all_equipment_ever["cap"] is pushed at the end of the empty equipment array, making this.equipment = [all_equipment_ever["cap"]]<br />
<br />
this.hp += theitem.hpeffect; //This would add the HP that the item is supposed to give you to this character's HP<br />
}<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
Let's use the equip method in practice. It allows us to do this:<br />
<br />
<syntaxhighlight><br />
var players = [];<br />
players[0] = new Character("Jon", 200, 50);<br />
players[0].equip("cap");<br />
</syntaxhighlight><br />
<br />
<br />
And boom. The instance of Character (players[0]) now has an instance of Equipment (all_equipment_ever["cap"]) stored in its .equipment property, adding 10 to his .hp thanks to that Equipment instance's .hpeffect.<br />
<br>...Uh, let's reword that sentence by using the object's property names.<br />
<br />
<br />
'''Jon is now wearing a cap. It causes his HP to go up by 10.'''<br />
<br />
<br />
{| border="1" style="border-collapse:collapse;"<br />
! align="left" | Readable line<br />
! align="left" | Complicated line<br />
! align="left" | Associated code<br />
|-<br />
| '''Jon''' || Instance of Character || <syntaxhighlight>players[0]</syntaxhighlight><br />
|-<br />
| '''is now wearing a cap.''' || now has an instance of Equipment stored in its .equipment property || <syntaxhighlight>.equipment = [all_equipment_ever["cap"]]</syntaxhighlight><br />
|-<br />
| '''It causes his HP to go up by 10.''' || adding 10 to his .hp thanks to that Equipment instance's .hpeffect || <syntaxhighlight>this.hp += theitem.hpeffect;</syntaxhighlight><br />
|}<br />
I hope this clarifies it all.<br />
<br />
<br />
==== Unequipping, to finish things off ====<br />
Note that of course we'd need an unequip() method which removes the equipment from the Character's equipment array and also removed those added stats again. Here it is, as a bonus:<br />
<br />
<syntaxhighlight><br />
this.unequip = function(what)<br />
{<br />
var theitem = all_equipment_ever[what]; //Get the item<br />
var itemindex = this.equipment.indexOf(theitem); //Get the numerical position of the item in the array<br />
this.equipment.splice(itemindex, 1); //Remove 1 item at this position from the array (so that would be our item)<br />
}<br />
</syntaxhighlight><br />
See [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Methods_of_Array_instances Methods of Array instances] for info on indexOf() and splice(), and what their arguments mean.<br />
<br />
==Tutorial TODO list==<br />
* Try..catch<br />
* Tests<br />
* Create some clarifying pics if necessary<br />
<br />
<br />
[[Category:Tutorials]]<br />
[[Category:Sphere 1]]</div>DaVincehttp://wiki.spheredev.org/index.php?title=Template:LegacyWarning&diff=10053Template:LegacyWarning2017-08-04T15:08:58Z<p>DaVince: Added warning symbol</p>
<hr />
<div><div style="width: 95%; max-width: 1100px; margin: 5px auto; padding: 0 10px 5px 10px; border: 1px solid #888; border-radius: 3px;"><br />
<div style="width: 64px; float: left; margin: 10px 10px 0 0;"><br />
[[File:Warning.svg|64px|link=]]<br />
</div><br />
<h4>Warning: Legacy code ahead</h4><br />
This page has been written for the legacy [[Legacy:Functions|Sphere 1.x API]]. While this API is supported in miniSphere, it is generally recommended to use the new [[API:Functions|Sphere 2 API]].<br />
<p style="font-size: 12px; color: #555; line-height: 1em;">You ''can'' mix old and new API functions, but please be aware that Sphere 2 objects are different from Sphere 1 objects, so they cannot be used interchangeably.<br />
</p><br />
</div></div>DaVincehttp://wiki.spheredev.org/index.php?title=File:Warning.svg&diff=10052File:Warning.svg2017-08-04T14:59:32Z<p>DaVince: </p>
<hr />
<div></div>DaVincehttp://wiki.spheredev.org/index.php?title=Template:LegacyWarning&diff=10051Template:LegacyWarning2017-08-01T17:49:59Z<p>DaVince: Added links to APIs</p>
<hr />
<div><div style="width: 90%; max-width: 1000px; margin: 5px auto; padding: 0 10px 5px 10px; border: 1px solid #888; border-radius: 3px;"><br />
<h4>Warning: Legacy code ahead</h4><br />
This page has been written for the legacy [[Legacy:Functions|Sphere 1.x API]]. While this API is supported in miniSphere, it is generally recommended to use the new [[API:Functions|Sphere 2 API]].<br />
<p style="font-size: 12px; color: #555; line-height: 1em;">You ''can'' mix old and new API functions, but please be aware that Sphere 2 objects are different from Sphere 1 objects, so they cannot be used interchangeably.<br />
</p><br />
</div></div>DaVincehttp://wiki.spheredev.org/index.php?title=DaVince_scripting_tutorial&diff=10050DaVince scripting tutorial2017-08-01T17:46:01Z<p>DaVince: Added legacy warning</p>
<hr />
<div>{{LegacyWarning}}<br />
<br />
This tutorial teaches you how to script with JavaScript, and how to apply this knowledge so you can make games in Sphere. I have tried to write the tutorial in such a way that beginners can easily step into the world of Sphere. There are also some tests available which you can take to practice the things you have learnt.<br />
<br />
<br />
== Resource pack ==<br />
Here's [http://davince.tengudev.com/sphere/resources/resource.zip a very basic resource pack] so you can get started right away.<br />
Includes:<br />
* a simple map (rmp file)<br />
* a sprite (rss file)<br />
* a font (rfn file)<br />
* some sounds<br />
File names are in Dutch, but it should be clear what's what.<br />
<br />
There are more resources on the Spherical Downloads Repository (coming soon).<br />
<br />
<br />
__TOC__<br />
<br />
<br />
== About ==<br />
<br />
=== This tutorial ===<br />
<br />
Ah, Sphere... An awesome and flexible game and RPG creation program... It includes a fully-fledged editor to make your own RPGs (or other kinds of games!), and a flexible, extensive scripting language. But how do you start learning and using this scripting language, and how does it work inside Sphere? This tutorial will help you on your way. Some of the tutorial's chapters are based on other, older tutorials. Some are entirely original.<br />
<br />
In any case, I hope it will be useful to you! Have a good Sphere experience! :)<br />
<br />
Questions? Suggestions? Other feedback? [https://docs.google.com/document/d/14xpwoyKuSvIXZzRNbsGXVoxtZriS01rj82KjyOndC9o/edit#bookmark=id.oajpni3fz38l Contact me]!<br />
--DaVince<br />
<br />
=== Sphere ===<br />
<br />
Sphere is a program designed to create RPGs in the style of early Final Fantasy games without too much effort. However, you'll be able to create almost any other kind of 2D game you can imagine if you're skilled enough. It uses a scripting language (JavaScript, which is NOT JAVA!) that "makes everything happen". This, of course, means that you will have to learn this scripting language in order to be able to create a game in Sphere. Scripting isn't always easy, especially for programming/scripting newbies, so I'll try to keep things simple and clear.<br />
<br />
=== Where can I find the latest version of Sphere? ===<br />
<br />
Sphere and its editor can be downloaded [https://drive.google.com/folderview?id=0B-5bW82jK5Z5X2pkellDenZUeWM&usp=sharing&tid=0B-5bW82jK5Z5UGZaS0c1OFJZZDA here] (versions 1.5 and 1.6 are recommended).<br />
<br />
Some work has been going into a much newer implementation of Sphere lately, known as TurboSphere. It's pretty good, but as of this writing not complete yet, so stick with a standard release for this tutorial.<br />
<br />
If some things don't work (correctly), download version 1.5 or 1.6 and these problems will usually disappear. If you already have the latest version and you still encounter problems, you found a bug in either Sphere or your own code! :)<br />
<br />
=== Get used to the editor first! ===<br />
<br />
This tutorial teaches you how to script, not how to use the editor. There are some articles on this wiki and with Sphere's included documentation that can help you out there.<br />
<br />
== Sphere and Javascript ==<br />
<br />
Sphere uses SpiderMonkey, a special library that makes JavaScript available in applications like Sphere. Sphere itself then adds lots of functions to this implementation of JavaScript so you can actually use it to create a game.<br />
JavaScript is a browser scripting language in origin, specially designed for the use in webpages, but as Sphere proves it can be used for other things perfectly fine too. Web JS consists of three parts: the Core, the Client and the Server. Sphere only uses the Core, the other two are actually parts that belong to Web JS.<br />
<br />
=== Configuration and information on scripts ===<br />
Every Sphere game must have a script where it can start out "reading" (actually interpreting) what to do. The start script to use can be defined in the Game Setings window, accessible by double-clicking on "Game Settings" in a project's main window. You can't define a script if you don't have a script yet, of course, so make one first. Give this first script a good, identifiable name, like start.js or main.js.<br />
The script doesn't need to have a specific name like main.js - you can give it any valid name you can think of, "valid" meaning using only characters you can use in a filename. However, it's recommended to keep the name simple and preferably without any special characters (even spaces), so you can quickly and easily reference this script in your code. The start script will be the first script that's read by Sphere's game engine when you start the game. If you want to let Sphere open other scripts next to this one, you can use specific functions in the main script to include these scripts (by using RequireScript()).<br />
<br />
You do not need to have more than one script, you could just as well put all of the game's code in the one single start script. But using multiple script files makes everything more clear and easier to find and use. Think about it: seperate scripts for battles, menus, text boxes, storyline... It also allows you to use specific scripts in multiple games, if you make sure to make everything in that script work independently from other scripts... Very nice if you made a nice menu or item system that you want to re-use in a different game.<br />
Sphere looks for the function game() inside your startup script when the game is launched. This is the only automatically started (rather, "called") function and gives you a point to start with. All other functions will have to be called by hand. More about functions further down in this document.<br />
<br />
You will get to know more about scripts later; I'll talk about where you can use scripts first now.<br />
<br />
=== Where are scripts used? ===<br />
You can use scripts in different places in Sphere. These are the maps, triggers, persons and files.<br />
<br />
<br />
* '''Files''' are the most common place for script code and can be created in any text editor. JavaScript files always have the .js file extension. ''Script files are the most important part of a game'' as these are the main method to give instructions to Sphere, including what to start (and where).<br />
<br />
* '''Maps''' have a few internal scripts. You can find these in the Map Properties (menu: Map > Properties). They are useful to have the game control what happens when the map itself is opened or closed, or when/where the player-controlled character is entering or leaving the map. Maps also contain two different types of "entities": triggers and persons.<br />
<br />
* '''Triggers''' are attached to a specific tile and have a script that is launched when the player walks over it.<br />
<br />
* '''Persons''' are entities on the map that have a name and sprite. Persons have 5 personal scripts to control their actions (like walking or talking), each used for a different situation:<br />
** ''On Create'', used to run code when the person is created.<br />
** ''On Destroy'', runs right before the person is destroyed.<br />
** ''On Activate (Touch)'', runs when the person is being touched by the player-controlled person.<br />
** ''''On Activate (Talk)'', runs when the player-controlled person faces the person and presses the TALK button (default = space).<br />
** ''On Generate Commands'', runs every frame the map engine is open (but only when the person isn't doing anything else).<br />
<br />
<br />
The scripts in persons, triggers and maps are more of a bonus that make things easier in these very specific situations. More experienced coders tend to avoid making scripts inside maps and entities as much as they can, and instead try to do it all in the JS files. All code then stays in one clearly-defined place; nothing is hidden in some random place in a map. It's more flexible and you're less likely to leave mistaked or old code behind.<br />
<br />
To make a new script file in the default editor, click on the empty page icon. You'll get a text editor. This is Sphere's built-in script editor, probably the best one for Sphere scripts. You can also make your scripts in your own favourite text editor, just save them as .js files in the scripts directory of your game.<br />
<br />
== The basics of scripting ==<br />
===Comments===<br />
A comment is the most simple thing to do in Sphere. With comments, you can give an explanation of something with normal, human-readable text. Sphere itself plain skips over this text, so you can put in anything you like. A comment is mainly intended to help the reader of the code: you can put comments next to your actual code explaining what a complex line does, or ''why'' it does it.<br />
<br />
A single comment line can be made by putting // in front of the line.<br />
<br />
<syntaxhighlight>//This is a comment.</syntaxhighlight><br />
<br />
<br />
A comment block of multiple lines can be made by putting /* in front and */ behind it.<br />
<br />
<syntaxhighlight><br />
/* This is a comment. */<br />
<br />
/* This is also a comment.<br />
But, it stays comment on the next line, too.<br />
And it will keep on doing that until the blocks gets closed with the asterisk and the slash.<br />
*/<br />
<br />
This part is NOT a comment, because it does not have // in front and is not in a /* */ block!<br />
// Buuuuuuuuut... The above line *is* a comment from ^^ this spot onward! Notice the green highlighting.<br />
</syntaxhighlight><br />
<br />
<br />
A comment can be put on the same line as a line of code, too. This is useful for explaining just that line:<br />
<br />
<syntaxhighlight>Code(); //Comment!</syntaxhighlight><br />
<br />
<br />
If you're just beginning, it's useful to put comments next to every line of code of importance. That way, you can look it up later and read what a certain piece of code did again...<br />
<br />
===End a line of code with a semicolon===<br />
This is the second simplest thing in JS's code syntax (syntax = code "grammar"). In real life, you have to add a period (.) at the end of every sentence. You basically do the same in JavaScript. Well, it's slightly different, as you type a semicolon ; instead.<br />
<br />
<syntaxhighlight><br />
code_goes_here;<br />
different_bit_of_code_goes_here;<br />
Code; Next_bit_of_code;<br />
</syntaxhighlight><br />
<br />
Remember this! If you forget to put a semicolon somewhere, Sphere might try to 'glue' one bit of code together with the next one, which may cause errors because it tries to interpret things differently than you intended. Just like how sentences glued together can sometimes be interpreted in multiple ways.<br />
<br />
== The basics on functions ==<br />
===Functions===<br />
[[File:DaVinceScripting-Function.png|250px|thumb |Why functions are useful.]]<br />
Simply put, a function is a bunch of lines of code that you give an identifiable name. Then you can run that code any time by referencing that name.<br />
<br />
Example: you could make a function with the name ''TextBox''. It would run code to make a box appear on screen, display some text on top, wait for user input, etc. Then you can show this text box whenever you like by referencing the function name TextBox wherever you like.<br />
<br />
It's very useful to make your code manageable, and it prevents you from doing bad things like copying the same few lines of code over and over again in different places. That's bad because if you change or improve your code, you now have to change it everywhere else, too. Using a function prevents this: the code exists only in that one place. Plus your code takes up less lines (just call function TextBox in a single line somewhere instead of pasting 15 lines of text-displaying code).<br />
<br />
===The structure of a function===<br />
A '''function''' always starts with the word <tt>function</tt> so both Sphere and the reader of the script know we're going to make a function. You call such a word a ''keyword'': JavaScript uses it internally to identify what you're trying to do. In this case, we want to define a function.<br />
<br />
After the keyword <tt>function</tt> comes the ''name'' of the function. When giving it a name, keep in mind only letters, numbers and the underscore _ are allowed. It is also not possible to start the name with a number.<br />
<br />
* Valid function names: <tt>FunctionName</tt>, <tt>do_300_things</tt>, <tt>EatDonut</tt>.<br />
* Invalid function names: <tt>123WayToGo</tt>, <tt>EatDonut&Sandwich</tt>, <tt>Can't-do-this</tt><br />
<br />
After the name come an opening parenthesis and a closing parenthesis (). This is intended so you can provide extra data to the function (I'll explain in detail later).<br />
<br>After that, you put an opening brace { which indicates that the code coming after the brace will belong to your function.<br />
<br>After the brace, you put the code that would be run when you "run" the function.<br />
<br>When you're done with this code, you close the function definition with the closing brace }.<br />
<br />
<br />
=== Defining a function ===<br />
Every Sphere game must have a main script file, containing the main function with the name <tt>game</tt>. Let's use it for our example and define the function game:<br />
<br />
<syntaxhighlight><br />
function game()<br />
{<br />
//code comes here.<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
That's what a function looks like, basically. And <tt>function game()</tt> in particular is a function that you *need* to define to give Sphere a place to start out at.<br />
<br />
Still, if you try to run this code, nothing will happen. Sphere will open and then immediately close. That's because we didn't put in any code yet. (A comment isn't any kind of real code.)<br />
<br />
<br />
=== Calling a function ===<br />
Let's add one very simple command, with a comment in front of it:<br />
<br />
<syntaxhighlight><br />
function game()<br />
{<br />
MapEngine("map.rmp", 60); //Function call: opens the map engine with map.rmp<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
This piece of code WILL do something: open Sphere's map engine with the file map.rmp, with a framerate of 60 frames per second. Still, if you want this code to work, make sure that the file map.rmp actually exists inside the maps directory of your game!<br />
<br />
The above code also demonstrates what ''calling'' a function looks like. In this case, Sphere internally has a <tt>function MapEngine()</tt>. We told Sphere to run that code here by doing this:<br />
<syntaxhighlight> MapEngine("map.rmp", 60);</syntaxhighlight><br />
<br />
<br />
[[MapEngine]]() is actually an internal Sphere function, but ''if'' it were coded in JS by a normal user it would look like this:<br />
<syntaxhighlight><br />
function MapEngine(map, framerate) //map, framerate will be explained in the next chapter.<br />
{<br />
//Code to make the map engine to work here.<br />
}<br />
</syntaxhighlight><br />
<br />
The original MapEngine function actually consists of internal Sphere code, not scripted in JS, but in the programming language Sphere itself has been written in (C++). You can't change this without changing Sphere itself.<br />
<br />
<br />
===Example of some simple Sphere functions===<br />
I'm going to show you and explain a few of the most used functions in Sphere. Every line of code will be explained.<br />
<br />
<syntaxhighlight><br />
function game()<br />
{<br />
CreatePerson("my_name", "character.rss", false);<br />
//Creates a new person. gives him the name my_name and loads the spriteset file character.rss for his looks.<br />
//'false' indicates he should NOT be destroyed when the game switches maps. That means he'll keep existing even on other maps.<br />
<br />
AttachCamera("my_name");<br />
//Makes sure that the camera is always pointed at the person called my_name.<br />
<br />
AttachInput("my_name");<br />
//Bind the default input to the person my_name. This means that when you press an arrow key, he'll move, stuff like that.<br />
<br />
MapEngine("map.rmp", 60);<br />
//We'll open map.rmp with a framerate of 60 frames per second (fps).<br />
}<br />
</syntaxhighlight><br />
<br />
Check these pages for more details:<br />
* [[CreatePerson]](person_name, spriteset, destroy_with_map)<br />
* [[AttachCamera]](person_name)<br />
* [[AttachInput]](person_name)<br />
* [[MapEngine]](mapfile, framerate)<br />
<br />
<br />
===A list of common functions===<br />
<br />
There are a lot more common Sphere functions, another bunch explained below. You can look up all the other Sphere functions here: [[API:Functions]]. They're also in the doc_functions.txt file that comes with Sphere (it's in the docs directory).<br />
<br />
NOTE BEFORE YOU USE THESE: Some functions have a period . in them. I'll talk about what this means in detail later. For now, just put the appropriate function that loads a resource in front. Example LoadFont("file").drawText(1, 1, "text");<br />
<br />
{| style="padding: 10px" cellpadding="2" border="1" style="border-collapse:collapse;"<br />
! align="left" | Function<br />
! align="left" | Description<br />
|-<br />
| [[FlipScreen]]() || Put everything you have drawn so far on the screen. When drawing and blitting, your stuff doesn't get drawn on the screen, but in memory (in the "backbuffer"). It will be brought to the screen when you use FlipScreen(). After that the backbuffer is emptied. Use this after you've blitted ''absolutely everything you wanted'', and use it only once per frame!<br />
|-<br />
| [[LoadFont]]("file.rfn") || Loads a font file. Only the Sphere font format .rfn is supported, so make a Sphere font first.<br />
|-<br />
| [[Font.drawText]](x, y, "text") || Write text on the screen with the assigned Font and on the assigned x/y coordinates (in pixels). Font should be a variable containing the font you loaded with LoadFont.<br />
|-<br />
| [[Font.drawTextBox]](x, y, width, height, offset, "text") || Write text on the screen with the given font on the given x/y coordinates. This is a bit different from Font.drawText, because you define an area to write the text into. When the text hits the maximum given width, it continues writing the rest of the text on the next line until the maximum height is reached. The offset adds an extra bit to the X position of the first line of your text.<br />
|-<br />
| [[LoadWindowStyle]]("file.rws") || Load a windowstyle file into memory.<br />
|-<br />
| [[WindowStyle.drawWindow]](x, y, width, height) || Draw the windowstyle on coordinates x,y with the given width and height.<br />
|-<br />
| [[LoadImage]]("file.png") || Load an image file (bmp, png, gif, jpg, pcx, tga supported... But png is recommended for its size/quality ratio and transparency!).<br />
|-<br />
| [[Image.blit]](x, y) || Draws Image at the given x,y coordinates. ("Blit" is an old English word for "draw".)<br />
|-<br />
| [[Image.zoomBlit]](x, y, zoom) || Draws the image at the given scale on the given coordinates. When using a value like 1.5 the image will be drawn 1.5 its original size.<br />
|-<br />
| [[LoadSound]]("file.mp3") || Load a sound file into memory. WAV, OGG and MP3 work best. MOD, IT, MID are supported but might have issues depending on what version of Sphere you use.<br />
|-<br />
| [[Sound.play]](boolean) || Play the loaded sound. The boolean argument is true or false. true == repeat, false == do not repeat.<br />
|-<br />
| [[Sound.stop]]() || Stop the sound.<br />
|-<br />
| [[RenderMap]]() || If you have the map engine open and you want to draw something on screen, the map will not be shown when you [[FlipScreen]]() it. So you'll have to draw a picture of the map yourself with RenderMap(), first. All the stuff you draw after it will then be displayed on that image of the map.<br />
|-<br />
| [[GetKey]]() || Pause script execution until you press any key on the keyboard. Useful for a really quick "wait for input" so you can test if something renders properly, for example. Doesn't take arguments.<br />
|-<br />
| [[ChangeMap]]("file.rmp") || If the map engine is open, you can switch maps with this function. Use [[MapEngine]]() if the map engine wasn't open yet.<br />
|-<br />
| [[Exit]]() || Quit the game.<br />
|-<br />
| [[Abort]]("message") || Quit the game with an error message you can define yourself. Useful for debugging (it can let you know why something goes wrong somewhere, for example).<br />
|}<br />
<br />
== Variables and more on functions ==<br />
===Variables===<br />
When you're coding and need the exact same bit of data several times, you'll find that it is pretty annoying to type things like <tt>"I am a string"</tt> <tt>LoadFont("file")</tt> over and over again. Luckily there is is this little thing called a variable, which you can use to store these things (and values, text and a lot more!). Because of this you will only need to type the name of the variable to get what's stored inside it, which could be our <tt>LoadFont("file")</tt> or whatever! Well, that's just one of many advantages of it.<br />
<br />
<syntaxhighlight><br />
var some_name;<br />
</syntaxhighlight><br />
<br />
<br />
This is how you make a variable. It does NOT contain any kind of value yet. It has the name <tt>some_name</tt>, which means I would type <tt>some_name</tt> every time I needed its contents. (You can't do that yet, though, as it doesn't have any right now.)<br />
<br />
In any case, what I just did is called ''declaring'' a variable. This means that I reserved some precious computer memory for our variable. The keyword <tt>var</tt> is only needed once, and that is when you're declaring a new variable. After that you only need to type the variable name, and the JS parser will figure out it's a variable.<br />
<br />
Now, let's declare a different variable and assign a value to it.<br />
<br />
<syntaxhighlight><br />
var music;<br />
music = LoadSound("SomeFile.mp3");<br />
</syntaxhighlight><br />
<br />
<br />
This code declares a variable called <tt>music</tt>. Then we give it a value. The value we just gave it is <tt>LoadSound("SomeFile.mp3")</tt>, which is a function that loads a sound file an puts it (as a value of sorts) inside the variable. Now you can refer to the variable's name, <tt>music</tt>, to to get to its contents. In this case, that is the sound data retrieved from <tt>LoadSound("SomeFile.mp3")</tt>.<br />
<br />
<syntaxhighlight><br />
music.play(true);<br />
</syntaxhighlight><br />
<br />
<br />
What you see is <tt>music.play(true)</tt>, but Sphere sort of reads it as <tt>LoadSound("SomeFile.mp3").play(true)</tt> because music is a variable containing (the result of) LoadSound("SomeFile.mp3").<br />
Advantages:<br />
* It's quicker to type <tt>music</tt> instead of <tt>LoadSound("SomeFile.mp3")</tt> every time you need the song.<br />
* It also saves memory and loading time because the actual sound file is loaded only once into the variable <tt>music</tt>. It's not reloaded for every time we need the music.<br />
<br />
Regarding point 2, using just <tt>LoadSound("SomeFile.mp3")</tt> all the time would load the file over and over every time, making your game use way too much memory.<br />
<br />
Not just that, but if you load the same song twice, it's still identified as two different songs in memory. This means you wouldn't be able to use stuff like the .stop() function to stop music if you don't put it in a variable! Example:<br />
<br />
<syntaxhighlight><br />
LoadSound("SomeFile.mp3").play();<br />
LoadSound("SomeFile.mp3").stop();<br />
//Wait, the music isn't stopping! That's because the file is loaded from file twice, and so recognized as two different bits of data in memory.<br />
</syntaxhighlight><br />
<br />
<br />
With a variable:<br />
<br />
<syntaxhighlight><br />
var music;<br />
music = LoadSound("SomeFile.mp3");<br />
<br />
music.play();<br />
music.stop(); //It stops playing properly, because thanks to the variable name "music", Sphere knows what song (data) to stop.<br />
</syntaxhighlight><br />
<br />
<br />
====Quick variable declaration====<br />
There is another, faster way to declare a variable and assign a value to it at once. You can do it like this:<br />
<br />
<syntaxhighlight><br />
var music = LoadSound("SomeFile.mp3");<br />
</syntaxhighlight><br />
<br />
<br />
The variable is declared and immediately given a value.<br />
<br />
<syntaxhighlight><br />
var haha = LoadFont("haha.rfn");<br />
<br />
haha = LoadFont("eh.rfn");<br />
haha = LoadSound("haha.mp3");<br />
</syntaxhighlight><br />
<br />
<br />
As you can see you can also change the value in the variable any time you like. It IS called a variable, after all. Its contents can vary, even from one moment to the other.<br />
<br />
<br />
===Variables and data types===<br />
<br />
You can store all kinds of stuff in a variable! For example, you can use them to hold numbers or text for later use. These different types of data are called exactly that - a ''data type''. Example:<br />
<br />
<syntaxhighlight><br />
var story = 1;<br />
var player_name = "Pete Peterson";<br />
</syntaxhighlight><br />
<br />
<br />
This is useful for many different things. For example, story progression: if an event has happened: change the value of the <tt>story</tt> variable so Sphere knows that the event has happened. Or in the case of the string, you could remember a character's name that was entered by the user.<br />
<br />
There are many more types of data that you can store, and they will be explained in detail soon.<br />
<br />
<br />
===Adding and subtracting to variables===<br />
How to add and subtract values from variables containing numbers? Like this!<br />
<br />
{| class="wikitable"<br />
| <syntaxhighlight>variable++</syntaxhighlight> || adds 1 to your variable.<br />
|-<br />
| <syntaxhighlight>variable = variable + 1</syntaxhighlight> || does the same.<br />
|-<br />
| <syntaxhighlight>variable--</syntaxhighlight> || subtracts 1 from your variable.<br />
|-<br />
| <syntaxhighlight>variable = variable - 1</syntaxhighlight> || does the same.<br />
|}<br />
<br />
{| class="wikitable"<br />
| <syntaxhighlight>variable += value</syntaxhighlight> || adds the value to your variable.<br />
|-<br />
| <syntaxhighlight>variable = variable + value</syntaxhighlight> || does the same.<br />
|-<br />
| <syntaxhighlight>variable -= value</syntaxhighlight> || subtracts the value from your variable.<br />
|-<br />
| <syntaxhighlight>variable = variable - value</syntaxhighlight> || does the same.<br />
|-<br />
| <syntaxhighlight>variable = value</syntaxhighlight> || changes your variable to the value.<br />
|}<br />
<br />
{| class="wikitable"<br />
| <syntaxhighlight>variable *= value</syntaxhighlight> || multiplies the variable's value with the defined one and puts it in the variable.<br />
|-<br />
| <syntaxhighlight>variable = variable * value</syntaxhighlight> || does the same.<br />
|-<br />
| <syntaxhighlight>variable /= value</syntaxhighlight> || divides the variable's value with the defined one and puts it in the variable.<br />
|-<br />
| <syntaxhighlight>variable = variable / value</syntaxhighlight> || does the same.<br />
|}<br />
<br />
Of course, you could always do something like variable = variable - 4 if you like. But '''note that the shorter versions (++, +=, -=, --) are preferred''', for readability reasons (they're also shorter to type!).<br />
<br />
===Creating a function===<br />
As you probably know by now, Sphere reads the commands you insert. These commands are called functions... game(), for example, is a function too, so it could be started the same way as for example a FlipScreen(): by typing its name and the braces behind it.<br />
<br />
<syntaxhighlight>game();</syntaxhighlight><br />
<br />
<br />
So with this you'd run whatever is in function game(). This particular function doesn't need to be called manually, because game() is automatically called when Sphere starts your game. But it's a good example on how to create your own functions.<br />
<br />
Making your own function is pretty simple. Just look at how you made the game() function... You can make your own functions in the same way.<br />
<br />
<syntaxhighlight><br />
function Name()<br />
{<br />
//Code comes here.<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
You can put code in functions, this code will be executed as soon as the function is called from somewhere else. As an example we'll try to make a function that executes all commands necessary to make a box containing text.<br />
<br />
<syntaxhighlight><br />
//First we'll declare a few variables outside of any function.<br />
//This makes them global, which means they will exist in any function, even if you didn't declare them there.<br />
<br />
var window = GetSystemWindowStyle();<br />
//Declare the variable 'window' and put the standard Sphere window style in it.<br />
<br />
var font = GetSystemFont();<br />
//Opens the standard Sphere system font and puts it in the 'font' variable.<br />
<br />
//Here's our own function named 'TextBox'.<br />
function TextBox()<br />
{<br />
//Code goes inbetween the braces {}.<br />
window.drawWindow(5,5,310,100);<br />
font.drawText(5,5,"Some text");<br />
FlipScreen();<br />
GetKey();<br />
}</syntaxhighlight><br />
<br />
<br />
If you insert TextBox(); in your game function, everything in the TextBox() function will be run once you start the game.<br />
<br />
<syntaxhighlight><br />
function game()<br />
{<br />
TextBox();<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
=== Function arguments ===<br />
There is something lacking about our textbox: you can add TextBox(); to your code, but the end result will always stay the same. Every time you call TextBox() you will see the text "Some text" appear on the screen, no matter what. But what if we wanted to display something else, like "Hello", "Line 2" or "Status: moody"? It's not smart to make four different functions just for that, that would be a waste of memory. It would duplicate almost the exact same code four times, defeating the purpose of having a function! So instead, we slightly change the TextBox() function.<br />
<br />
Examine the following code:<br />
<br />
<syntaxhighlight><br />
function TextBox(text)<br />
{<br />
window.drawWindow(5,5,310,100);<br />
font.drawText(5,5,text);<br />
FlipScreen();<br />
GetKey();<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
Look at the spot where the function is declared (the first line). Inbetween the parentheses there's something new now. This is NOT a function or variable, but an argument. Arguments (also named parameters) can pass values (any kind: numbers, strings etc) on to your function, resulting in the output varying depending on what you "fed" the function. Now we can put all our different text in the function and get different results:<br />
<br />
<syntaxhighlight><br />
TextBox("Hello");<br />
TextBox("Line 2");<br />
TextBox("Status: dead");<br />
</syntaxhighlight><br />
<br />
<br />
As you can see we put our text in-between double apostophes ", in-between the braces () of the function call. The " are there to show Sphere that it's a string of text. More on that in chapter 5.<br />
The stuff that we insert inbetween the parentheses is saved into an argument, we gave this argument the name 'text'. Arguments behave like variables, but only inside their own function. They don't exist outside the function. (The same actually counts for variables made inside a function.) Anyway, what Sphere will do is give assign whatever value you put inbetween parentheses to this argument, and then use it inside the function.<br />
<br />
If that wasn't clear enough, imagine that Sphere is doing this: (it doesn't happen literally, but you can compare it with this anyway:)<br />
* Take the text that was found when the function is called and put it in our argument 'text'.<br />
* Walk through the function and look for other places using this argument 'text'.<br />
* Replace it with what we got through the function call.<br />
* The result is different every time because it's dependant on what you inserted!<br />
And here it is in physical form:<br />
<br />
<syntaxhighlight><br />
function a(argument)<br />
{<br />
Abort(argument);<br />
}<br />
<br />
//And to call it:<br />
a("This text is used by the Abort() function inside the a() function.");<br />
function a("something!") //Don't write code like this! Only put something that looks like a variable. This is just an example on what Sphere might do internally.<br />
{<br />
Abort("something!");<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
<br />
=== Multiple arguments in one function ===<br />
If you want to have more than one argument, simply seperate the argument names with a comma:<br />
<syntaxhighlight><br />
function TextBox(x, y, text)<br />
{<br />
window.drawWindow(x, y, 310,100);<br />
font.drawText(x, y, text);<br />
FlipScreen();<br />
GetKey();<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
The function call would look like this:<br />
<br />
<syntaxhighlight>TextBox(10, 15, "hahaha!");</syntaxhighlight><br />
<br />
<br />
This will make the text "haha" appear on x position 10 and y position 15.<br />
<br />
== Test your newly gained skills! ==<br />
<br />
I'm gonna be making an entirely new test. Working on it right now. But feel free to experiment with the functions you've learned! ;)<br />
<br />
== More on variables ==<br />
There's a few types of values available in Sphere, each one of them is intended for different things. This means that you can put different types of content in variables. In this chapter you'll learn about most of these types of values.<br />
<br />
===1. Numbers===<br />
You already knew this one. It is an often used type of value. You can put numbers in variables so you can refer to them, change them, or do maths with them.<br />
var blah = 4;<br />
<br />
===2. Text===<br />
You know this one already, too, if you have been paying close attention to the last chapter. You can use regular sentences, words, letters and characters with this type of content. You call this a string. Strings are used to store and use text in your program. Strings are recognizable by the fact that they have double quotes put around them (like "this"). This is done to clearly define to the system that it is a text string, not a number or anything else. You can also use single quotes if it's more convenient at the time, but take care with single quotes if you have "regular" text: words like it's use a single quote too, so they would end the string. Strings are also typically useful to define file and directory names.<br />
<syntaxhighlight>var hi = "Hello!";<br />
var project_file = "game.sgm";</syntaxhighlight><br />
There is a way to "connect" seperate strings together, in fact, it doesn't even have to be a string to be able to connect it to a string. Connecting (or combining) two strings (or compatible types) is what you would call concatenating. There is a very simple way to concatenate: use the plus sign as if you were "adding" two values.<br />
Run the following code in Sphere:<br />
<syntaxhighlight><br />
var string = "I am a string" + " with a second string concatenated";<br />
string = string + " and a third string concatenated";<br />
string += " and even a fourth one!" +<br />
" And a fifth one on the next line, because the plus character allows this.";<br />
Abort(string);<br />
</syntaxhighlight><br />
Sphere will show something like this:<br />
<br />
<syntaxhighlight>I am a string with a second string concatenated and a third string concatenated and even a fourth one! And a fifth one on the next line, because the plus character allows this.</syntaxhighlight><br />
<br />
Strings can also contain some special characters you can use for formatting the text when it's put on screen:<br />
<br />
* \n makes a new line.<br />
* \t adds a tab (or rather, 5 spaces).<br />
* \\ is for adding a \ to the text. :P<br />
* \" is used so you can safely add a double quote to your string without indicating to the engine that you finish the string.<br />
If you used a single quote ' to formulate your string in stead of a double quote, you can use a regular " inside this single-quote string, but you will then have to define "textual" single quotes like this: \'<br />
<br />
Try running the following code to see how you can use these:<br />
<br />
<syntaxhighlight>Abort("Hi.\nI'm on a new line.\nMe too.\n\tI'm on a new line with a tab in front.\nC:\\path\\to\\something.txt\nAnd \"I\" am in \"quotes\".");</syntaxhighlight><br />
The result will be something like this:<br />
<br />
<syntaxhighlight>Hi.<br />
I'm on a new line.<br />
Me too.<br />
I'm on a new line with a tab in front.<br />
C:\path\to\something.txt<br />
And "I" am in "quotes".</syntaxhighlight><br />
<br />
<br />
===3. Sphere functions===<br />
Sphere has a few built-in functions that can return values, meaning they give you values back when calling them. For example, GetPersonX(name) gives you a numerical value of the X position of a person on the map, GetScreenWidth() gives you the screen width, stuff like that. When you use such a function as a value in a variable, Sphere will put the resulting returned value in the variable.<br />
var blah = GetScreenWidth();<br />
In this case, you're not really putting the function in a variable. You're putting whatever value it gives back to you in it instead. For example, GetScreenWidth() could return the number 320 to you, so var blah would then contain the number 320 as a value.<br />
<br />
You can actually store the actual function inside a variable, if you wish. This will create what you would call a reference to this function: you're basically creating a new identifying name to call the function. To re-reference a function, just remove the parentheses () at the end:<br />
var GetSW = GetScreenWidth;<br />
var blah = GetSW(); //GetSW() actually calls the same code as GetScreenWidth() would now.<br />
There are a lot of functions in Sphere that return a value to whatever called it. Below are a few that you might want to study and practice using.<br />
* GetPersonX(person_name) - Returns the x position (as a number) of person_name on the map.<br />
* GetPersonY(person_name) - Same, but returns the y position.<br />
* GetScreenWidth() - Returns the width of the game screen (as a number).<br />
* GetScreenHeight() - Returns the screen height.<br />
* GetPersonList() - returns an array filled with strings of the person names on this map.<br />
* GetVersionString() - Returns the current Sphere version (as a string).<br />
<br />
===4. Sphere's special internal objects===<br />
You can put objects in variables. Objects are a kind of function too, but they can do much more internally, like store and retreive sub-values and even sub-functions inside. They also can have "changing" states: two objects can be the same on the outside, but store very different things. For example, you can have two instances of an Image object, one containing a small icon and the other a big cloud graphic. Objects are complex, so I'll leave the explanation at that for now and go more in-depth later in the tutorial.<br />
Anyway! Sphere has a bunch of internal objects that can load images, music, basically all basic file resources. These objects can be made (instantiated) and stored inside variables by calling their appropiate LoadWhatever() functions, like LoadImage(file) or LoadFont(file). These then offer some internal "sub"-functions (or subvalues) to get or change further information, like image.width and image.height, or Font.getHeight().<br />
<syntaxhighlight><br />
var blah = LoadFont("fontfile.rfn");<br />
var fontheight = blah.getFontHeight();<br />
blah.drawText(10, fontheight, "Hahaha!"); //y position of this text depends on the height of the largest character in the font you loaded.</syntaxhighlight><br />
blah contains an instance of Sphere's internal Font object, which has methods (subfunctions, indicated with a separating dot) to further do things with this object, like draw it on the screen.<br />
<br />
The following is a list of functions that returns an instance of any special Sphere object, like images and fonts.<br />
* LoadFont(file) - Makes and prepares a font object and returns it (to whatever called it).<br />
* LoadImage(file) - Makes and prepares an image object and returns it (to whatever called it).<br />
* LoadSound(file) - Makes and prepares a sound object and returns it.<br />
* LoadAnimation(file) - Makes and prepares an animation object and returns it.<br />
* LoadSpriteset(file) - Makes and prepares a spriteset object and returns it.<br />
* LoadSurface(file) - Makes and prepares a surface object and returns it.<br />
* LoadWindowStyle(file) - Makes and prepares a windowstyle object and returns it.<br />
* OpenFile(file) - Makes and prepares a file object (for saving game data or settings) and returns it.<br />
<br />
---<br />
<br />
* CreateColor(red, green, blue, alpha) - Makes a color object with the values you gave it.<br />
* GrabImage(x, y, width, height) - Returns an image object that contains the contents of whatever is on screen in the zone you specified.<br />
* GrabSurface(x, y, width, height) - Same as GrabImage(), but it returns a surface object, which has different kinds of functions. Better suited for manipulating the image, or drawing it in a special way (like warping it all over the screen).<br />
<br />
All of the above functions actually make different kinds of objects, which have their own specialized functions for that type of file. For example, a Sound object has .play() and .stop() functions in it (these are methods), and the Image object has a .blit() function (or method), etcetera. You can create your own objects too.<br />
<br />
===5. New functions===<br />
You can also put NEW functions in variables, like this:<br />
<syntaxhighlight>var blah = function(parameters)<br />
{<br />
//Code comes here.<br />
}</syntaxhighlight><br />
This is basically a different way to declare a function. It's functionally equivalent to this:<br />
<syntaxhighlight>function blah(parameters)<br />
{<br />
//Code comes here.<br />
}</syntaxhighlight><br />
This might seem useless, it has several uses:<br />
<br />
Objects use it to create methods (subfunctions, example is the getHeight() method in Font.getHeight()), because the syntax to make these is a bit different.<br />
You can make anonymous functions. These are normal functions that do not have a name. An example of doing this is when you pass a function as an argument:<br />
<syntaxhighlight><br />
function CallMe(argument)<br />
{<br />
argument(); //I'm sure that the argument actually contains a function! Let's call it.<br />
}<br />
//...<br />
CallMe(function() { Abort("something happens in here."); });<br />
</syntaxhighlight><br />
<br />
That's a lot of braces and parentheses! But all we do on the last line is create a function on the spot, on a single line, and not assign any identifiable name to it. I could also have done the following for the last line, but then you wouldn't call it an anonymous function anymore:<br />
<syntaxhighlight><br />
var somefunction = function()<br />
{<br />
Abort("something happens in here.");<br />
}<br />
<br />
CallMe(somefunction);<br />
</syntaxhighlight><br />
Still, it does the same thing; pass a function to another function, showing that functions can be allowed as "values" to pass to other things just as well as a number or a string.<br />
<br />
===6. true and false===<br />
true and false are keywords in JavaScript that are used when you only need to know two "states" about something. Some examples:<br />
Has an event happened? (you could call it a flag when used like this, you toggle the flag as you finish the event.)<br />
<br />
var talked_to_old_man = false;<br />
<br />
Should my textbox draw a window?<br />
<br />
<syntaxhighlight><br />
var draw_a_window = true;<br />
//And in a textbox function somewhere:<br />
if (draw_a_window) //The condition evaluates to "true" because draw_a_window is true...<br />
{<br />
windowstyle.drawWindow(x, y, w, h);<br />
}<br />
</syntaxhighlight><br />
Do I want to debug my game and show extra values on the screen?<br />
<syntaxhighlight><br />
var DEBUG = true;<br />
//Anywhere else in code:<br />
if (DEBUG) { /* Do something related to testing your game */ }<br />
</syntaxhighlight><br />
Do I want to check if something finished in order to end a loop?<br />
<syntaxhighlight><br />
var finished = true;<br />
while (finished == false)<br />
{<br />
//Do whatever until I set finished to true somewhere in this loop.<br />
}<br />
</syntaxhighlight><br />
An alternative way of checking for false is by putting an exclamation mark in front of the condition (or variables in the condition), like this:<br />
<syntaxhighlight>while (!finished)</syntaxhighlight><br />
<br />
Do I want to check if something simply is true or false, or do I want to make it true or false?<br />
<br />
<syntaxhighlight><br />
if (!sound.isPlaying()) //Check if sound is not playing (sound.Playing == false).<br />
{<br />
sound.play(true); //The true here is an argument to sound.play, which answers Sphere's question: should the music loop?<br />
}<br />
</syntaxhighlight><br />
<br />
As you can see, it has many small but important uses. You'll encounter these two values a lot.<br />
<br />
Last thing, remember that false is (sort of) equivalent to 0, and true is (sort of) equivalent to almost any other value. This means that a condition like (value == false) could be true when value equals 0! This can come in handy in places like loops.<br />
<br />
<br />
===7. undefined===<br />
undefined is a keyword in Sphere (or rather, JavaScript) that lets you enter nothing as a value! For example, some function's argument could be optional, and use some other default value if it's not set, so in this case you could pass the undefined value as an argument.<br />
Or maybe you wish to erase a variable's previous value.<br />
<br />
<syntaxhighlight>var blah = 4;<br />
blah = undefined; //Woops, setting 4 was a mistake.</syntaxhighlight><br />
<br />
Or maybe you wish to declare a variable, but not set a value yet... But then again, in that case you could just not set a value: JS will automatically enter undefined as the default value for a variable not given a value.<br />
<br />
<syntaxhighlight>var blah;<br />
Abort(blah); //Sphere will quit, printing out "undefined".</syntaxhighlight><br />
<br />
<br />
===8. Arrays===<br />
Arrays are somewhat different from the other variables mentioned so far. The big difference lies in that you can put multiple values in it, and these values can be of various types (even more arrays)!<br />
Declaring the array<br />
To make an array, you can type one of the following:<br />
<syntaxhighlight>var blah = new Array();</syntaxhighlight><br />
- OR -<br />
<syntaxhighlight>var blah = [];</syntaxhighlight><br />
I recommend using [] because it's shorter to type, though it doesn't really make a difference. The first way is a nice example of instantiating an object, though, so you might want to come back here later when you're learning about objects.<br />
<br />
<br />
====Storing values in the array====<br />
Okay, so now you have an Array. You can store your values in it in two different ways.<br />
<br />
The first way to do it is by putting values in it right when you declare the array.<br />
<br />
<syntaxhighlight>var blah = new Array(1, 6, 4, "Theo", "etcetera", new Array("subarray!"), 88);</syntaxhighlight><br />
<br />
- OR -<br />
<br />
<syntaxhighlight>var blah = [1, 6, 4, "Theo", "etcetera", ["subarray!"], 88];</syntaxhighlight><br />
<br />
This is how you declare the array and immediately put some values in it. An array is like a list of items where you can store a value, each seperated with a comma. All items in this list also have a number, starting from 0, which can be used to identify the seperate items, or places in the array.<br />
<br />
In the above array:<br />
* The number 1 is stored in spot 0 of the array.<br />
* The number 4 is stored in spot 2 of the array.<br />
* The string "etcetera" is stored in spot 4 of the array.<br />
* Another array (containing the string "subarray!" on spot 0) is stored in spot 5 of its parent (or containing) array.<br />
<br />
Confusing? Read over it again, then continue. The second way to put values in an array will make things a bit more clear. :)<br />
<br />
The second way to store values in an array is by already having declared the array, and then assigning values to spots in the array:<br />
<br />
<syntaxhighlight><br />
var array = []; //or new Array();<br />
array[number] = a_new_value;<br />
</syntaxhighlight><br />
<br />
For example, I'll now change some of the values in the array blah we made before:<br />
<br />
<syntaxhighlight><br />
blah[0] = "new value!"; //Spot 0 contained the value 1 before, now it contains "new value!".<br />
blah[1] = 7; //And this used to be 6<br />
blah[4] = "Pete"; //And this used to be "etcetera"<br />
blah[7] = "new value"; //Spot 7 comes after the last spot (spot 6, which contains 88), so basically we created a new spot to store a value in.<br />
blah[9] = [1, 2, 3]; //Another subarray with three items is added to the blah array. Spot 8 will contain an undefined value.<br />
</syntaxhighlight><br />
<br />
This way you can change the values (or make new values) on different places of your array. The old values (if there are any) are replaced, just like in a normal variable.<br />
<br />
Since we didn't touch spots 2 and 3, they'll keep their original values, which were 4 and "Theo". That means that our array now consists of the following values:<br />
<br />
<syntaxhighlight><br />
["new value!", 7, 4, "Theo", "Pete", ["subarray!"], 88, "new value", undefined, [1, 2, 3]]<br />
</syntaxhighlight><br />
<br />
Now how do we use these values? Well, that's pretty simple, actually. Just refer to your array and add straight brackets right after it containing the number of the spot you want to reach. For example:\<br />
<br />
<syntaxhighlight><br />
var nn = blah[3]; //nn now contains the value "Theo".<br />
TextBox(blah[4]); //TextBox will print out the text "Pete".<br />
Abort(blah[9]); //Sphere will quit, showing the text "[1, 2, 3]" (the array gets interpreted as a string, showing its internal values).<br />
</syntaxhighlight><br />
<br />
So what are arrays useful for? Well, for example, they can be useful for an inventory:<br />
<syntaxhighlight><br />
var inventory = ["Potion", "Antidote", "Empty bottle"];<br />
</syntaxhighlight><br />
<br />
But most importantly, they can be used to store similar data together and perform mass actions on them. Like naming all characters in your game (or just the party) and then generating a person on the map for each one of them:<br />
<br />
<syntaxhighlight><br />
var people = ["DaVince", "Petey Pirate", "Aegis", "Flikky", "Nidoran"];<br />
<br />
//Create persons using their above name for both the identifying name and the spriteset file to load (like DaVince.rss or Nidoran.rss).<br />
CreatePerson(people[0], people[0] + ".rss", true);<br />
CreatePerson(people[1], people[1] + ".rss", true);<br />
CreatePerson(people[2], people[2] + ".rss", true);<br />
CreatePerson(people[3], people[3] + ".rss", true);<br />
CreatePerson(people[4], people[4] + ".rss", true);<br />
</syntaxhighlight><br />
<br />
Now, the above might not seem like it has any advantage ("Why not just do <tt>CreatePerson("DaVince", "DaVince.rss", true)</tt>?").<br />
<br />
You see, the above code can be made much simpler and quicker using loops, explained in the next chapter.<br />
<br />
You'll find that arrays can have lots of uses. I use them a lot, and some native Sphere functions also use them, so you'd better get to know them! ;)<br />
<br />
<br />
<br />
== Conditions and loops ==<br />
<br />
===If, while and for===<br />
This chapter will become a bit more difficult and confusing because we'll have to break some of the Javascript syntax rules that you learned before. For instance, we won't add a semicolon after every line any more, and sometimes we add multiple semicolons in one line! Luckily this only happens on a few special occasions, so once you know this exception from the rule it's easy to recognize.<br />
<br />
===Conditions: 'if'===<br />
You might have thought at least once about having an event happen in the game ONLY when something else had happened first. Well, you can do this. It's called a condition, as you set a ''condition'' for making it happen.<br />
<br />
Conditions basically check if something is true or not. For example, it can check if the variable <tt>blah</tt> contains value <tt>4</tt>, and if it is, it will evaluate this as <tt>true</tt>. You use the '''<tt>if</tt>''' keyword to make this check, in the following style:<br />
<syntaxhighlight>if (blah == 4)</syntaxhighlight><br />
<br />
Now for a complete example:<br />
<br />
{{col-begin|width=50%}}<br />
{{col-break}}<br />
<syntaxhighlight><br />
var story = 0;<br />
<br />
if (story == 0) //No semicolon ; at the end!<br />
{<br />
//Hey, story is 0! This code runs.<br />
story = 1;<br />
}<br />
</syntaxhighlight><br />
{{col-break}}<br />
<syntaxhighlight><br />
Declare variable story with value 0<br />
<br />
Check whether variable 'story' contains value 0<br />
Open a block of code that runs when this is true<br />
<br />
Set story to 1; now this condition can't run again<br />
Close the block of code for the condition<br />
</syntaxhighlight><br />
{{col-end}}<br />
<br />
<br />
Explanation:<br />
<br />
* <tt>Declare variable story with value 0</tt><br />
<br />
Self-explanatory. (If not, read about declaring variables again.)<br />
<br />
<br />
* <tt>Check whether variable 'story' contains value 0</tt><br />
<br />
This line of code has TWO equals signs (=) in it. A double equals sign (==) tells JavaScript that this is a '''comparison''': we're comparing the value inside <tt>story</tt> and the value 0 to each other. Specifically, == tells JavaScript to check if these are EQUAL to each other.<br />
<br />
A single = does ''not'' run a comparison, but ''assigns'' a value to a variable. I did this in the chapter about variables: I assigned a value to a variable by putting an = in-between: <tt>var a = 6</tt>. But in conditions and other comparisons, we ''shouldn't'' use a single = because we're not assigning values to variables; we're just ''comparing'' them!<br />
<br />
<br />
* <tt>Open a block of code that runs when this is true</tt><br />
<br />
A condition (or if-statement) uses braces {} in which you enter the code that's going to run when the condition passes, just like how a function runs code between the braces when it is called. This is called a block of code. The opening brace { is put after the if-statement. The code inbetween the braces will then run when the condition evaluates as true (so when story == 0). Else, it will simply skip the block of code and continue regular code execution after the block (ending at } ).<br />
<br />
<br />
* <tt>Set story to 1; now this condition can't run again</tt><br />
<br />
Now that we've done everything we wanted to do in case story was 0, let's change the value of story to 1. This ensures that the condition will not be run again, so the same event won't happen twice (unless you set story back to 0 somewhere and make the game run the condition again).<br />
<br />
<br />
* <tt>Close the block of code for the condition</tt><br />
The block of code containing what should be run when the condition is true is closed. The conditional code has finished.<br />
<br />
<br />
As you can see, the structure of a condition is almost the same as when you're creating a function. The big difference lies in ''when and how'' it is used: a function will run whenever it's called, but a condition will only run whenever it's encountered AND when its conditions all evaluate to 'true'.<br />
<br />
(Evaluate, in JS's case, basically means to "solve" a problem by simplifying it. 1+1==2 would evaluate to true since one and one makes two, and 2 IS indeed equal to 2. Otherwise it will evaluate to false.)<br />
<br />
If it helps, here's one more explanation compared to real life. Things like story == 0 are things that you could call a statement. Basically, you make a statement to the engine that story would have the same value as 0. JS then evaluates this statement and determines if this is true, or false. Kind of like a math teacher evaluating your test answers. They'll also put crosses and circles on your test paper to indicate if your statement that 1 + 1 = 3 is true or false.<br />
<br />
<br />
====Comparing values====<br />
The == operator (that's what you call it) is just one of a set of comparisons you can use in conditions. It compares whether one number is equal to the other. But more types of comparisons exist, like checking if a value is higher or lower than the other. Here they are:<br />
<br />
{| class="wikitable"<br />
| <syntaxhighlight>a > b</syntaxhighlight> || Compares whether value a is higher than value b.<br />
|-<br />
| <syntaxhighlight>a < b</syntaxhighlight> || Compares whether value a is lower than value b.<br />
|-<br />
| <syntaxhighlight>a >= b</syntaxhighlight> || Compares whether value a is higher than or equal to value b.<br />
|-<br />
| <syntaxhighlight>a <= b</syntaxhighlight> || Compares whether value a is lower than or equal to value b.<br />
|-<br />
| <syntaxhighlight>a != b</syntaxhighlight> || Compares whether value a is anything but value b.<br />
|-<br />
| <syntaxhighlight>a === b</syntaxhighlight> || Strict compare. Also compares if the type is the same. See below for explanation.<br />
|}<br />
Some weird values can evaluate to true together, even if they're not of the same type or even value. For example, when you compare to the value true, ''comparing it to almost any value'' will make the complete comparison evaluate to true. (2 == true), (true == "a string") and (-400.6 == true) will all evaluate to ''true'', simply because these values are not false in the machine code (false is 0, more or less; true is plain everything else). However, you probably wouldn't treat those values as "true" but compare them properly.<br />
<br />
A triple-equals sign === was made to solve this problem: it will not only compare the values but also the types of the items compared. If you do this, these types need to match. "true" is a boolean, and a comparison will now only evaluate as "true" when it's compared to "true" (so <tt>true === true</tt>). <tt>(2 === true)</tt> and <tt>("blah" === true)</tt> evaluate to false. Only (true === true) will evaluate the condition as true. Only (2 === 2) will evaluate as true, (2 === "2") won't (because that other "2" is a string, not a number).<br />
<br />
So... Why would you compare true to true? Well... It all has to do with the values in variables. You can do <tt>var storyfinished = true;</tt> (storyfinished === true) would entirely make sense.<br />
<br />
<br />
You use all of these in the same way you used the double equals sign.<br />
<syntaxhighlight><br />
if (a > b) { TextBox("a was higher."); }<br />
if (a != b) { TextBox("a and b are different."); }<br />
if (a <= b) { TextBox("a is lower, or the same as b."); }<br />
if (a === b) { TextBox("a is the exact same object with the exact same value as b."); }<br />
//etc.<br />
</syntaxhighlight><br />
<br />
''Side note''<br />
<br />
Notice how I put the condition, opening brace, code and closing brace all on one line? Yes, this is allowed. You can do the same with functions, or other blocks of code that look like them:<br />
<syntaxhighlight>function Something() { TextBox("Hi."); /* I'm a nested comment. */ Abort("The game is quit now."); }</syntaxhighlight><br />
In fact, this is mostly why the semicolon ; is used: to easily recognize when one command ends and the next one begins, even on the same line.<br />
<br />
Use this sparingly, though, as things can kind of become a mess if you do this. Each bit of code on a new line is much easier to read, especially when you have { stuff with tabs going on.<br />
<br />
===Loops: 'while' and 'for'===<br />
====while====<br />
Loops in Sphere! These are very useful for things like repeating code. One advantage is that you don't have to have many lines containing the same code over and over again. Example:<br />
<br />
<syntaxhighlight><br />
var value = 0;<br />
value++;<br />
TextBox(value);<br />
value++;<br />
TextBox(value);<br />
value++;<br />
TextBox(value);<br />
value++;<br />
TextBox(value);<br />
//etcetera etcetera....<br />
</syntaxhighlight><br />
<br />
It takes up way too much code if you want to add 1 to value and show a textbox with that value 100 times in a row. That's where the loop comes in: a loop makes it neat and short because you just enter the two lines (value++ and TextBox(value)) in it once, and then run it a hundred times! The loop takes a condition to determine when it should still repeat the code running inside. If the condition is false, the loop ends.<br />
<br />
There are more kinds of loops. The ''while'' loop is the easiest one to start with, because it looks just like an ''if'' block.<br />
<br />
<syntaxhighlight><br />
var value = 0;<br />
<br />
while (value < 100)<br />
{<br />
value++;<br />
TextBox(value);<br />
}<br />
<br />
//Code continues here when the loop is done.<br />
</syntaxhighlight><br />
<br />
A <tt>while</tt> loop is basically like an ''if-statement'': it checks whether the given condition returns <tt>true</tt>. The only difference is that it repeats the code inside the braces when this is the case. In this case, the loop can be interpreted as:<br />
<pre><br />
While (the value of var 'value' is lower than 100):<br />
Add 1 to var value.<br />
Call function TextBox(), which does something with the value.<br />
Do the comparison again and run the above two lines again if still true.<br />
</pre><br />
<br />
Things keep looping while variable <tt>value</tt> is still lower than <tt>100</tt> (because it's <tt>true</tt> that <tt>(value < 100)</tt> here).<br />
<br />
When <tt>value</tt> becomes <tt>100</tt> or higher, the comparison made in the condition (<tt>value < 100</tt>) becomes <tt>false</tt> and the loop stops executing. The engine continues business as usual.<br />
<br />
* The loop begins running because when the loop starts, var <tt>value</tt> is still 0, which is lower than 100. If <tt>value</tt> were to be 100 already, the loop would never even begin.<br />
* The loop ends because it reaches a point where (value < 100) becomes false. Sphere will then exit the loop.<br />
<br />
<br />
'''So why are loops so useful?'''<br />
<br />
If we had NOT used a loop for this piece of code, we would have wasted around 200 lines of code: 100 for value++ and another 100 for TextBox(value). It would be a never-ending mess! But with the power of loops we minimized this to 5 lines, where those two lines just loop 100 times. Much, much better.<br />
<br />
Also useful if you don't know how many times you want something to run!<br />
<br />
'''Practical example''' (note: vars and functions are all made up for the example)<br />
<syntaxhighlight><br />
while (player_actions_done < max_player_actions)<br />
{<br />
//Do stuff like ask the player to perform an action here<br />
player_actions_done++;<br />
}<br />
//And afterwards this player's turn ends or something<br />
</syntaxhighlight><br />
<br />
To close, a common term used with loops! A single time that we run the loop is called an ''iteration''. The example code with the TextBox() goes through 100 iterations. The first iteration is the one where value goes from 0 to 1 to then '1' in a self-made TextBox. The 88th iteration would make the value go from 87 to 88 and display '88'. The last (final) iteration is run when value is 99 - when it's 100 the block of code is no longer run.<br />
<br />
====for====<br />
There is a different, more useful but also more difficult to learn type of loop. This is the for loop.<br />
A for loop looks a bit different. It's because you do multiple things at once, still in the loop. A for loop usually looks like this:<br />
<br />
<syntaxhighlight><br />
for (var value = 0; value < 100; value++)<br />
</syntaxhighlight><br />
<br />
There are three things here, and semicolons inbetween them! That's a bit different from the usual... But, it's not as difficult to grasp as you might think, and it actually makes the loop much more powerful...<br />
<br />
<pre>for (prepare variables here; putcondition here; action to variable on each iteration here)</pre><br />
* In the first part of a for loop, you place your ''variable'' that will usually 'control' the loop. This can be a new variable, or one that was created globally somewhere else. You should also give it a starting value (if you don't, your variable will effectively be useless for use in the loop).<br />
* In the second part you place the ''condition'', just like you would do in an if or a while loop, only this time you usually involve your special variable.<br />
* In the third part you put ''code that affects the variable'' so it can end the loop at some point. The third part of the statement is run after the code inside loop was run; eg. after an iteration has finished.<br />
<br />
'''Examples'''<br />
<syntaxhighlight><br />
for (var blah = 0; blah < 25; blah++)<br />
{<br />
TextBox("This loop started " + blah + " times so far...");<br />
}<br />
</syntaxhighlight><br />
<syntaxhighlight><br />
TextBox("Countdown for liftoff! Ready...");<br />
for (var blah = 10; blah > 0; blah--)<br />
{<br />
TextBox(blah + "...");<br />
}<br />
TextBox("ZERO! We have a liftoff!");<br />
</syntaxhighlight><br />
This loop won't show a text box with "0..." because the loop ends right after blah is decreasing in value from 1 to 0. So we can put our own, neater "ZERO!" at the bottom instead.<br />
<br />
It's probably easier to try it out for yourself to really see how it works!<br />
<br />
====Practical example of combining loops with arrays====<br />
Now for a different use of the loop that also shows its practical use in combination with a collection of data (in this case, an array). We're going back to the last example of the previous chapter, and we're going to rewrite it to use a loop.<br />
<br />
Goal: to create persons on the map using their names identified in the array.<br />
Original version:<br />
<br />
<syntaxhighlight><br />
var people = ["DaVince", "Petey Pirate", "Aegis", "Flikky", "Nidoran"];<br />
<br />
//Create persons using their above name for both the identifying name and the spriteset file to load (like DaVince.rss or Nidoran.rss).<br />
CreatePerson(people[0], people[0] + ".rss", true);<br />
CreatePerson(people[1], people[1] + ".rss", true);<br />
CreatePerson(people[2], people[2] + ".rss", true);<br />
CreatePerson(people[3], people[3] + ".rss", true);<br />
CreatePerson(people[4], people[4] + ".rss", true);<br />
</syntaxhighlight><br />
<br />
New version:<br />
<syntaxhighlight><br />
var people = ["DaVince", "Petey Pirate", "Aegis", "Flikky", "Nidoran"];<br />
var len = people.length; //array.length can be used to get the length of an array.<br />
//In this case, it's 5 (the highest spot to contain a value is in 4, meaning there's 5 items that were given a value (including the undefined ones)).<br />
<br />
for (var i = 0; i < len; i++) //Basically, we go through each and every item that's in the array, and run the code below, using them.<br />
{<br />
CreatePerson(people[i], people[i] + ".rss", true); //people[i] is people[0], then people[1], then people[2]...<br />
}<br />
</syntaxhighlight><br />
It might not seem too worthwhile to write a loop for this small bit of code, but consider how much extra work you would have to do if you had 14 people... And what if two of them disappeared later? Or if you gained five more people? The original version is inflexible and relies on you knowing exactly what's in the array; the flexible version has the computer take care of that. This greatly reduces the chance of getting error messages as your program won't read entries that no longer exist, for example.<br />
<br />
It also greatly expands the possibilities of what you can do with the language, and with your game. Whether you have a party of one or a party of five, the game can handle it in any situation and you can display a character list menu properly, for example.<br />
<br />
====do...while====<br />
<br />
There is also a third type of loop, but it's basically the same as a while loop and not many people use it. If you still want to know more about it, check out this page.<br />
<br />
== Test Yourself Again ==<br />
Take a breather. Try to incorporate everything that you learned into a game. One day, I might assist you with this by adding a test for you to do here.<br />
<br />
== Advanced functionality in functions ==<br />
There's much more that you can do with if-statements than you have learnt so far. For example, you can put several conditions on your if-statement at once; you can group related if-statements together for efficiency and readability; you can even leave out the braces around the code to execute in some cases. This chapter will explain you why and how.<br />
<br />
===Combining several conditions: && and ||===<br />
You can combine several conditions - that is, comparisons - to make an overall more complicated if clause. More complicated, but also more precise. For example, (value > 0) can only check if your value is higher than 0, but combined with a (value < 10), we suddenly only have the possibility to be the numbers 1 to 9 to have a condition evaluate to true! This can be very useful, and sometimes even required, to get the desired effect.<br />
<br />
====The inefficient way====<br />
The inefficient way is nesting a condition inside another one.<br />
<br />
<syntaxhighlight><br />
if (value > 0)<br />
{<br />
if (value < 10)<br />
{<br />
TextBox("The value is somewhere in-between 0 and 10.");<br />
}<br />
}<br />
</syntaxhighlight><br />
<br />
You're running two conditions, here. But you're also running two if clauses. This takes up a tiny bit more processing power. The computer gets a tiny bit more to do, because it has to do this:<br />
* Compare a value,<br />
* then run the code inside,<br />
* which again compares a value,<br />
* then runs the code inside that,<br />
* and then Sphere has to "end" that block of code.<br />
* And then another one, because we had two conditions.<br />
<br />
'''But more importantly, you're nesting more than you have to.''' Can you imagine when you have eight things to check against? Your code would be on the right side of the screen, and you'd have to keep track of which accolades {} belong to which condition! This makes things very unreadable and confusing.<br />
<br />
This can surely be done more in a better way! Yup, it sure can:<br />
<br />
====The efficient way====<br />
<syntaxhighlight><br />
if (value > 0 && value < 10)<br />
{<br />
TextBox("The value is somewhere in-between 0 and 10.");<br />
}<br />
</syntaxhighlight><br />
<br />
What Sphere does now:<br />
* Compare a value,<br />
* and a second one,<br />
* evaluate whether the total result is true.<br />
* If so, run the code inside,<br />
* and then "end" that block of code.<br />
<br />
Actually, I think it might be less steps, because computers have special ways to compare multiple grouped conditions efficiently. Still, one step less than the previous thing with my explanation. The code complexity has decreased, and you have saved some precious processor power, which can then be used towards more useful things, like advanced AI or whatever.<br />
<br />
Next to the &&, which is called the AND operator, there is the OR operator. This special operator will evaluate the entire result as true if any of the given conditions is true, no matter if all others are false. This can be useful if you want some common code to run under only some circumstances:<br />
<br />
<syntaxhighlight><br />
if (cheat_mode || backflip_mode || the_player_kicks_ass) //If even just one of these three equals true...<br />
{<br />
DoABackflip();<br />
}<br />
</syntaxhighlight><br />
<br />
The player might do a backflip if any of the three variables given are true. Doesn't matter if only one of them is true, or all three... As long as something is true, it'll run the code inside the block.<br />
<br />
The two types of operators can be combined. You could check if all elements in a set of conditions is true, and then compare that to another conditions that might override it and run the condition anyway. It's best to group these together by using extra parentheses. Example:<br />
<br />
<syntaxhighlight><br />
if ((master_password_entered && voice_recognition_success && confirmed_twice) || evil_intruder_override)<br />
{<br />
SelfDestruct(ship);<br />
}<br />
</syntaxhighlight><br />
<br />
The ship will ONLY self-destruct if the master password was entered, the voice recognition succeeded AND the user confirmed the self-destruct sequence twice. Only then. Oh, or if there's an evil intruder who somehow overrode the system.<br />
<br />
Of course, even if you don't use such a complicated combination of options, it's still a lot more convenient than putting a condition alongside a condition inside a condition inside a condition.<br />
Note that it also works with loops.<br />
<br />
<syntaxhighlight><br />
while (!done && willpower > 0) //When you're not done yet AND you still have willpower...<br />
{<br />
DontGiveUp();<br />
}<br />
</syntaxhighlight><br />
<br />
===Leaving out the braces===<br />
This is another exception to the syntax rules in JavaScript, and sometimes a rather handy one: you can choose to leave out the braces. However, you can do this in only ONE case: when there's only one statement to make. The if-statement immediately closes after you put that finishing semicolon after your only line of code that's going to be run in the condition:<br />
<br />
<syntaxhighlight><br />
if (condition)<br />
Statement();<br />
if (next_condition)<br />
OtherStatement();<br />
</syntaxhighlight><br />
<br />
Of course, you can still format this in any way you like. This can make code much more compact:<br />
<br />
<syntaxhighlight><br />
if (story == 1) Statement();<br />
if (story == 2) SecondPart();<br />
if (story == 3) ThirdPart();<br />
if (story >= 4) Abort("End of the game!");<br />
</syntaxhighlight><br />
<br />
Another exception exists where you can use several statements if you like. However, this method is less compatible; a few JavaScript keywords like return and break will NOT work if you do this:<br />
<br />
<syntaxhighlight><br />
if (condition)<br />
Statement1(), //Use a comma, not a semicolon, and you can keep feeding the thing code until a semicolon ; is encountered!<br />
story++,<br />
Statement2(); //End of the code to run for this condition.<br />
</syntaxhighlight><br />
<br />
Note that it also works with loops.<br />
<br />
<syntaxhighlight><br />
while (willpower > 0)<br />
DontGiveUp();<br />
for (var i = 0; i < 1000; i++)<br />
TextBox("The loop has run " + i + " times now. WILL IT EVER END? Yes, at 999.");<br />
</syntaxhighlight><br />
<br />
===The "else" keyword===<br />
You can connect if-statements together if you like. What if there's three related cases? Maybe var story is 1... Maybe it's 2. Maybe it's neither! You can use the else keyword to connect these three different conditions together. This offers two advantages:<br />
<br />
To people reading the code, it's recognizable as a group of related statements;<br />
<br />
When one condition evaluates as true, all others will automatically skip, not even bothering to evaluate. This saves processing power (your PC needs to do less).<br />
<br />
There are two types of ways to use else:<br />
<br />
* <tt>else if</tt> - there's a different, related condition. For example, story is 2.<br />
* Just <tt>else</tt> - All of the previous related conditions have evaluated to false. For example, story is 6 and there's no else if that checks for it to be 6.<br />
<br />
Basically, using just else is like defining code that will run in all other cases. else if can only exist right after an if or another else if. else can only exist once, and that is after all other related conditions.<br />
<br />
<syntaxhighlight><br />
var story = (any value)<br />
<br />
if (story == 0)<br />
RunStorySectionOne();<br />
else if (story == 1)<br />
RunSecondSection();<br />
else if (story >= 2 && story <= 4) //If story is 2, 3 or 4<br />
RunThirdSection();<br />
else //Story could be 5, or 389, or -300 for all we know<br />
Abort("That story section does not exist, fool!");<br />
</syntaxhighlight><br />
<br />
== Objects ==<br />
Note: this stuff is kind of complicated. I sometimes explain several concepts at the same time. I also apply a bunch of the earlier knowledge, so make sure you know and control the other stuff before you begin.<br />
<br />
I've mentioned objects before, now we'll go into more detail about them. An object is one of the more complicated things in Sphere, but they will allow you to do very powerful things.<br />
<br />
<br />
===What is an object?===<br />
An object is a type of variable in which you can store many things - values, functions, and even more objects. However, an object is not like an array because of two main reasons:<br />
Objects use names instead of numbers for your data. These "names" are properties if you're storing data and methods if you're storing functions.<br />
Objects can have different instances.<br />
<br />
<br />
===What is an instance?===<br />
Objects are very useful for one specific thing - creating clones of itself that contain different data, and possibly different behavior. When you start making your own object, you start out by shaping the "original" object, which is called the prototype. From here on, your prototype will serve as the way to create actual, usable objects out of your prototype. These new, copied objects are what you would call an instance of that object. Instances let you have similar object - with different values.<br />
<br />
<br />
===An example of different instances===<br />
The best example to start out with is with something familiar: let us look back at Sphere's own, internal object. When you use LoadImage(), you actually create a new instance of the internal Sphere Image object. For example:<br />
<br />
<syntaxhighlight><br />
var a = LoadImage("a.png");<br />
var b = LoadImage("b.png");<br />
</syntaxhighlight><br />
<br />
Both a and b are Image objects, but they contain different images - that is, different data.<br />
<br />
<br />
===Making your own prototype===<br />
Now, Sphere's internals use functions like LoadImage(), but this is not actually "true" object-oriented programming, and it is not how we will make our own object prototype. But in this first step, it will almost appear as if we are!<br />
<br />
<syntaxhighlight><br />
function MyObject()<br />
{<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
There you go, we just made an object prototype. What? It looks just like making a function? That's exactly right - all functions are actually objects, except we don't normally use them as such! Let's take it a step further and see what's so different about objects.<br />
<br />
<syntaxhighlight><br />
function MyObject()<br />
{<br />
this.myproperty = 4;<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
Objects have properties. Inside properties, you store values. It's just like using var, but instead we use this. The reason for this is so we can access the value from outside the function. Not only that, but we tell Sphere that this variable-type thing is a default value that the prototype will give to each instance, after which it can be changed individually per instance. You could access the property from the outside as follows:<br />
<br />
<syntaxhighlight>MyObject.myproperty</syntaxhighlight><br />
<br />
<br />
But take note! We are still making an object prototype here, so it's better to leave the prototype alone. Why? Because if you change the prototype's properties' values, new instances would take over that new value too (but old ones would still be in their original state with the old values). This can become a mess, so be careful with it. Usually you will want your prototype to be well-defined inside itself, and nowhere else.<br />
<br />
Object prototypes can also have functions. These are copied just like values would be, which is why you could make two instances of the same type (that means, derived from the same prototype) have similarly named functions that do different thing. A function inside an object is called a '''method''' - usually because the object is made to do certain related things, and these subfunctions would be the method to manipulate its data.<br />
<br />
<syntaxhighlight><br />
function MyObject()<br />
{<br />
this.myproperty = 4;<br />
this.myMethod = function()<br />
{<br />
this.myproperty++;<br />
}<br />
}<br />
</syntaxhighlight><br />
<br />
The above added method adds 1 to our property, so every time it's called, myproperty would increase by 1.<br />
<br />
<br />
===Making an instance of the object===<br />
Also known as ''instantiating''. To do it, use the <tt>new</tt> keyword. I'll also demo how you can set values from the instance's properties.<br />
<br />
<syntaxhighlight><br />
var some_instance = new MyObject();<br />
Abort(some_instance.myproperty); //The engine quits, displaying a 4<br />
</syntaxhighlight><br />
<br />
<br />
It's useful because each instance can have different values from the other. '''This is one of the real strengths of objects.'''<br />
<br />
<syntaxhighlight><br />
var first = new MyObject();<br />
first.myproperty = 6; //Change the value of myproperty in just this instance<br />
var second = new MyObject(); //New instance, its myproperty is that prototype value of 4<br />
<br />
Abort(first.myproperty + " and also " + second.myproperty); //The engine quits, displaying "6 and also 4"<br />
</syntaxhighlight><br />
<br />
<br />
====Practical example====<br />
<br />
<syntaxhighlight><br />
//Let's define a new object prototype for this example<br />
function Character()<br />
{<br />
this.name = "default";<br />
this.hp = 100;<br />
this.mp = 50;<br />
this.equipment = [];<br />
}<br />
<br />
//Now let's make a few player characters<br />
var players = [];<br />
players[0] = new Character(); //New instance of Character<br />
players[0].name = "Jon"; //This value is only changed for this instance<br />
players[0].hp = 200; //Same deal<br />
<br />
players[1] = new Character(); //Another instance of Character<br />
players[1].name = "Jacques"; //This value is only changed for THIS instance, Jon with 200 hp is still Jon with 200 hp<br />
players[1].hp = 40; //Same, etc.<br />
players[1].mp = 9000;<br />
</syntaxhighlight><br />
<br />
<br />
Now we have two player characters with very different stats, all thanks to an object prototype we made for managing players!<br />
<br>Note that I made this object have some very generic properties, which has advantages. It's flexible, it can be used for enemy characters too:<br />
<br />
<syntaxhighlight><br />
//Now let's make a few player characters<br />
var enemies = [];<br />
enemies["mage"] = new Character();<br />
enemies["mage"].name = "Mage";<br />
enemies["mage"].mp = 2000;<br />
enemies["mage"].equipment = ["wizard robe", "wizard hat"];<br />
</syntaxhighlight><br />
<br />
<br />
=== Passing arguments to the prototype ===<br />
What I've just shown is powerful, but it's also very long. A bunch of lines just to change some character stats? Luckily, arguments can be used not in just functions, but also in prototypes!<br />
<br />
Let's enhance our Character object with it to shorten the code above.<br />
<br />
<syntaxhighlight><br />
function Character(charname, initialhp, initialmp)<br />
{<br />
this.name = charname;<br />
this.hp = initialhp;<br />
this.mp = initialmp;<br />
this.equipment = [];<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
Now, instantiating becomes much shorter.<br />
<br />
<syntaxhighlight><br />
var players = [];<br />
players[0] = new Character("Jon", 200, 50); //.name becomes Jon, .hp becomes 200, .mp becomes 50<br />
</syntaxhighlight><br />
<br />
<br />
Note that .equipment wasn't a part of the prototype's arguments, so it has to be treated like before.<br />
<br />
<syntaxhighlight><br />
players[0].equipment = ["cap", "T-shirt", "shorts"];<br />
</syntaxhighlight><br />
<br />
<br />
This is a good thing to do. During instantiation it's best to only put the things you'd most commonly change as arguments. So for a character, that would be the name and basic stats. Otherwise it becomes a long mess of arguments you don't even fill in half of the time.<br />
<br />
<br />
=== Using objects in combination with each other ===<br />
You could use many different objects to really start managing your data in a nice way. For example, let's add a data structure to store the equipment in.<br />
<br />
<syntaxhighlight><br />
function Equipment(name, type, description, hpeffect)<br />
{<br />
this.name = name; //The first this.name is this object's name property. The non-this name is the argument in function Equipment.<br />
this.type = type;<br />
this.description = description;<br />
this.hpeffect = hpeffect;<br />
}<br />
</syntaxhighlight><br />
<syntaxhighlight><br />
var all_equipment_ever = []; //Some global variable somewhere maybe<br />
all_equipment_ever["cap"] = new Equipment("Cap", "headwear", "This neat cap ups your HP by ten.", 10);<br />
</syntaxhighlight><br />
<br />
<br />
Now that we've invented some neat equipment, we can improve the Character object to make use of it.<br />
<br />
<syntaxhighlight><br />
function Character(charname, initialhp, initialmp)<br />
{<br />
this.name = charname;<br />
this.hp = initialhp;<br />
this.mp = initialmp;<br />
this.equipment = [];<br />
<br />
//Let's make a method to apply the stats of equipped equipment<br />
this.equip = function(what)<br />
{<br />
var theitem = all_equipment_ever[what];<br />
//Ex. if the what argument is "cap", theitem would contain all_equipment_ever["cap"]. Which is that object instance we made earlier.<br />
<br />
this.equipment.push(theitem);<br />
//array.push() is a function in JS to append new array items at the end of an array.<br />
//So now all_equipment_ever["cap"] is pushed at the end of the empty equipment array, making this.equipment = [all_equipment_ever["cap"]]<br />
<br />
this.hp += theitem.hpeffect; //This would add the HP that the item is supposed to give you to this character's HP<br />
}<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
Let's use the equip method in practice. It allows us to do this:<br />
<br />
<syntaxhighlight><br />
var players = [];<br />
players[0] = new Character("Jon", 200, 50);<br />
players[0].equip("cap");<br />
</syntaxhighlight><br />
<br />
<br />
And boom. The instance of Character (players[0]) now has an instance of Equipment (all_equipment_ever["cap"]) stored in its .equipment property, adding 10 to his .hp thanks to that Equipment instance's .hpeffect.<br />
<br>...Uh, let's reword that sentence by using the object's property names.<br />
<br />
<br />
'''Jon is now wearing a cap. It causes his HP to go up by 10.'''<br />
<br />
<br />
{| border="1" style="border-collapse:collapse;"<br />
! align="left" | Readable line<br />
! align="left" | Complicated line<br />
! align="left" | Associated code<br />
|-<br />
| '''Jon''' || Instance of Character || <syntaxhighlight>players[0]</syntaxhighlight><br />
|-<br />
| '''is now wearing a cap.''' || now has an instance of Equipment stored in its .equipment property || <syntaxhighlight>.equipment = [all_equipment_ever["cap"]]</syntaxhighlight><br />
|-<br />
| '''It causes his HP to go up by 10.''' || adding 10 to his .hp thanks to that Equipment instance's .hpeffect || <syntaxhighlight>this.hp += theitem.hpeffect;</syntaxhighlight><br />
|}<br />
I hope this clarifies it all.<br />
<br />
<br />
==== Unequipping, to finish things off ====<br />
Note that of course we'd need an unequip() method which removes the equipment from the Character's equipment array and also removed those added stats again. Here it is, as a bonus:<br />
<br />
<syntaxhighlight><br />
this.unequip = function(what)<br />
{<br />
var theitem = all_equipment_ever[what]; //Get the item<br />
var itemindex = this.equipment.indexOf(theitem); //Get the numerical position of the item in the array<br />
this.equipment.splice(itemindex, 1); //Remove 1 item at this position from the array (so that would be our item)<br />
}<br />
</syntaxhighlight><br />
See [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Methods_of_Array_instances Methods of Array instances] for info on indexOf() and splice(), and what their arguments mean.<br />
<br />
==Tutorial TODO list==<br />
* Try..catch<br />
* Tests<br />
* Create some clarifying pics if necessary<br />
<br />
<br />
[[Category:Tutorials]]</div>DaVincehttp://wiki.spheredev.org/index.php?title=Making_a_Menu&diff=10049Making a Menu2017-08-01T17:21:32Z<p>DaVince: Added legacy warning</p>
<hr />
<div>{{LegacyWarning}}<br />
<br />
__TOC__<br />
<br />
So, you've seen the menu.js in the sphere code bank, and you've used it but don't like it? What do you do? You make your own menu! You can choose to follow either the basic or the advanced route. The advanced route only makes it so that you can overflow your items without worry.<br />
<br />
==Menu.js==<br />
<br />
So, to go about making a menu you would need a general object to put properties in. This is the basics of OOP. Our menu object will look like this, which is very similar to Sphere menu.js:<br />
<br />
<br />
<syntaxhighlight>function Menu()<br />
{<br />
if (!this instanceof Menu) return new Menu();<br />
this.windowstyle = GetSystemWindowStyle();<br />
this.font = GetSystemFont();<br />
this.arrow = GetSystemArrow();<br />
this.items = [];<br />
}</syntaxhighlight><br />
So, the above initializes the starting data that we will be using to create our menu.<br />
<br />
<br />
<syntaxhighlight>this.items = [];</syntaxhighlight><br />
Is a shorthand for making an array. In JS anything can go into these arrays.<br />
<br />
<br />
==Adding Items==<br />
<br />
We can add our own items like so:<br />
<br />
<syntaxhighlight>Menu.prototype.addItem = function(name, description, callback, color)<br />
{<br />
if (color == undefined) color = CreateColor(255, 255, 255);<br />
var item = {<br />
name: name,<br />
desc: description,<br />
callback: callback,<br />
color: color<br />
};<br />
<br />
this.items.push(item);<br />
}</syntaxhighlight><br />
<br />
The:<br />
<syntaxhighlight>item = {};</syntaxhighlight><br />
Is shorthand for object creation. Notice that within these objects, you do not use the 'this' keyword, and also notice there are no more semicolons, instead there are commas indicating it's a lust of properties. This pseudo item will help us determine what is going to be in our menu.<br />
<br />
<br />
==Basic Drawing==<br />
<br />
<syntaxhighlight>Menu.prototype.execute = function(x, y, w, h)<br />
{<br />
var font_height = this.font.getHeight();<br />
var selection = 0;<br />
<br />
while(!IsKeyPressed(KEY_ESCAPE))<br />
{<br />
this.windowstyle.drawWindow(x, y, w, h)<br />
for (var i = 0; i < this.items.length; ++i)<br />
{<br />
this.font.setColorMask(this.items[i].color);<br />
this.font.drawText(x+16, y + i * font_height, this.items[i].name);<br />
}<br />
<br />
this.arrow.blit(x, y +i * selection);<br />
<br />
FlipScreen();<br />
}<br />
}</syntaxhighlight><br />
Three, the above code will draw the items you have added. It iterates through a for loop and draws all of the items names at an x position and a y position plus an offset so they do not all draw at the same location.<br />
<br />
<br />
==Advanced Drawing==<br />
<br />
So, what happens if you add more than one item? We will get an overflow of sorts and it'll draw items beyond the height of the menu we are using. To correct this we would need an offset from the top.<br />
<br />
We will need to add overflow arrows to the menu:<br />
<br />
<syntaxhighlight>function Menu()<br />
{<br />
if (!this instanceof Menu) return new Menu();<br />
this.windowstyle = GetSystemWindowStyle();<br />
this.font = GetSystemFont();<br />
this.arrow = GetSystemArrow();<br />
this.upArrow = GetSystemUpArrow();<br />
this.downArrow = GetSystemDownArrow();<br />
this.items = [];<br />
}</syntaxhighlight><br />
<br />
Now the drawing loop will add an offset value:<br />
<syntaxhighlight>Menu.prototype.execute = function(x, y, w, h)<br />
{<br />
var fontHeight = this.font.getHeight();<br />
var max_shown = Math.floor(h / font_height);<br />
var offset = 0;<br />
var selection = 0;<br />
<br />
while(!IsKeyPressed(KEY_ESCAPE))<br />
{<br />
this.windowstyle.drawWindow(x, y, w, h)<br />
for (var i = 0; i < max_shown; ++i)<br />
{<br />
if (i >= items.length) continue; // limit what is drawn<br />
this.font.setColorMask(this.items[i+offset].color);<br />
this.font.drawText(x+16, y + i * font_height, this.items[i+offset]);<br />
}<br />
<br />
this.arrow.blit(x, y + (selection-offset) * font_height);<br />
if (offset > 0)<br />
this.upArrow.blit(x + w - this.upArrow.width, y);<br />
if (offset + max_shown < this.items.length)<br />
this.downArrow.blit(x + w - this.downArrow.width, y + font_height * max_shown - this.downArrow.height);<br />
<br />
FlipScreen();<br />
}<br />
}</syntaxhighlight><br />
<br />
<br />
==Handling the selection (basic)==<br />
<br />
For this demonstration the handling of the menu will be added after the items are drawn. Pressing the up key shall move a cursor up, while pressing the down key shall move the cursor down. Hitting enter shall choose the item, and hitting escape shall quit the menu.<br />
<br />
<syntaxhighlight>Menu.prototype.execute = function(x, y, w, h)<br />
{<br />
// local variables //<br />
<br />
while(!IsKeyPressed(KEY_ESCAPE))<br />
{<br />
// stuff drawn here // <br />
<br />
FlipScreen();<br />
<br />
while(AreKeysLeft())<br />
{<br />
switch(GetKey())<br />
{<br />
case KEY_UP:<br />
if (selection > 0) selection--;<br />
break;<br />
case KEY_DOWN:<br />
if (selection < this.items.length-1) selection++;<br />
break;<br />
case KEY_ENTER:<br />
this.items[selection].callback();<br />
return;<br />
break;<br />
case KEY_ESCAPE:<br />
return;<br />
break;<br />
}<br />
}<br />
}<br />
}</syntaxhighlight><br />
It may look long, but this is basically finished. I commented out the stuff we already covered, so it should be obvious to add the while([[AreKeysLeft]]()) loop. The reason why this loop works is because [[AreKeysLeft]]() is always going to be false until a key has been hit. Once the key is hit, it goes into the switch with [[GetKey]](). [[GetKey]]() would grab that key and do whatever based on the switches.<br />
<br />
<br />
==Handling the selection (advanced)==<br />
<br />
So, the above doesn't take into account for the offset, so I'll teach you how to use handling with the more advanced menu. Start by writing the code from the previous section if it has not been written already. Now, let's focus on these specific cases:<br />
<br />
<syntaxhighlight><br />
case KEY_UP:<br />
if (selection > 0)<br />
{<br />
selection--;<br />
if (selection < offset) offset--;<br />
}<br />
break;<br />
</syntaxhighlight><br />
<br />
And Down:<br />
<br />
<syntaxhighlight><br />
case KEY_DOWN:<br />
if (selection < this.items.length-1)<br />
{<br />
selection++;<br />
if (selection >= offset + max_shown) offset++;<br />
}<br />
break;<br />
</syntaxhighlight><br />
<br />
That's all you would need to handle an advanced menu. all I did was take into consideration the new offset value.<br />
<br />
<br />
==Finished==<br />
<br />
Regardless if you went the basic way or the advanced way, here is how you may use it:<br />
<br />
<syntaxhighlight><br />
RequireScript("menu.js"); // notice that it's not a system script, it's yours.<br />
<br />
function game()<br />
{<br />
var my_menu = new Menu();<br />
my_menu.addItem("item 1", "my item", Exit);<br />
my_menu.addItem("item 2", "my item", Exit);<br />
my_menu.addItem("item 3", "my item", Exit);<br />
my_menu.addItem("item 4", "my item", Exit);<br />
my_menu.addItem("item 5", "my item", Exit);<br />
<br />
my_menu.execute(GetScreenWidth()/2-80, GetScreenHeight()/-40, 160, 80);<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
==Extra: Drawing a background==<br />
<br />
I'll teach you how to use a custom render script:<br />
<br />
<syntaxhighlight><br />
function Menu()<br />
{<br />
if (!this instanceof Menu) return new Menu();<br />
this.windowstyle = GetSystemWindowStyle();<br />
this.font = GetSystemFont();<br />
this.arrow = GetSystemArrow();<br />
this.items = [];<br />
<br />
this.preRender = function() {} // this is what you can add<br />
}<br />
</syntaxhighlight><br />
<br />
And then in the drawing loop, no matter if you chose the advanced way or basic way:<br />
<br />
<syntaxhighlight><br />
Menu.prototype.execute = function(x, y, w, h)<br />
{<br />
// local variables //<br />
<br />
while(!IsKeyPressed(KEY_ESCAPE))<br />
{<br />
this.preRender();<br />
// stuff drawn here // <br />
<br />
FlipScreen();<br />
<br />
while(AreKeysLeft())<br />
{<br />
// handle choices //<br />
}<br />
}<br />
}<br />
</syntaxhighlight><br />
<br />
Notice I commented the extra stuff out. Basically you add this.preRender() right after the very first while loop.<br />
<br />
To use it:<br />
<br />
<syntaxhighlight><br />
RequireScript("menu.js");<br />
<br />
function game()<br />
{<br />
var my_menu = new Menu();<br />
my_menu.addItem("item 1", "my item", Exit);<br />
my_menu.addItem("item 2", "my item", Exit);<br />
my_menu.addItem("item 3", "my item", Exit);<br />
<br />
my_menu.preRender = function()<br />
{<br />
if (IsMapEngineRunning()) {<br />
RenderMap();<br />
UpdateMapEngine();<br />
}<br />
}<br />
<br />
my_menu.execute(GetScreenWidth()/2-80, GetScreenHeight()/-40, 160, 80);<br />
}<br />
</syntaxhighlight><br />
The above will update and render the map behind the menu, given if the map engine is running or not. You can do this for all sorts of things, not just rendering.<br />
<br />
<br />
<br />
[[Category:Tutorials]]<br />
[[Category:Sphere 1]]</div>DaVincehttp://wiki.spheredev.org/index.php?title=Template:LegacyWarning&diff=10048Template:LegacyWarning2017-08-01T17:20:41Z<p>DaVince: </p>
<hr />
<div><div style="width: 90%; max-width: 1000px; margin: 0 auto 5px auto; padding: 0 10px 5px 10px; border: 1px solid #888; border-radius: 3px;"><br />
<h4>Warning: Legacy code ahead</h4><br />
This page has been written for the legacy Sphere 1.x API. While this API is supported in miniSphere, it is recommended to use the new Sphere 2 API.<br />
<p style="font-size: 12px; color: #555; line-height: 1em;">You ''can'' mix old and new API functions, but please be aware that Sphere 2 objects are different from Sphere 1 objects, so they cannot be used interchangeably.<br />
</p><br />
</div></div>DaVincehttp://wiki.spheredev.org/index.php?title=Spherical_wiki:Current_events&diff=10047Spherical wiki:Current events2017-08-01T17:12:55Z<p>DaVince: </p>
<hr />
<div>== New forums! ==<br />
<br />
Well, to be exact... upgraded forums. The software has migrated to the ElkArte forum system and should be more reliable in general and feature-packed now. If you haven't registered yet, now might be the best time to come in and visit! :D<br />
<br />
--[[User:DaVince|DaVince]] ([[User talk:DaVince|talk]]) 17:12, 1 August 2017 (UTC)<br />
<br />
== Update on wiki reorganization ==<br />
<br />
A new namespace, Legacy, now exists, and all original API articles have been moved there. Meanwhile, the API namespace has been repurposed to give information on the new Sphere 2 API. See [[API:Functions]]. We could use a hand or two to start creating new articles! :)<br />
<br />
Account registration was found to be broken. Attempts to fix it will be made.<br />
<br />
--[[User:DaVince|DaVince]] ([[User talk:DaVince|talk]]) 17:00, 19 June 2017 (UTC)<br />
<br />
== Changes coming to the wiki ==<br />
<br />
As the Sphere v2 API is maturing, the wiki is getting more and more outdated as it only documents the legacy Sphere v1 API. Changes will be coming to add more Sphere 2-based content, which is relevant to the much more modern miniSphere engine.<br />
<br />
To contribute, please check out the [http://forums.spheredev.org/index.php/topic,1449.0.html discussion thread]. (As always, email vincentbeers@gmail.com if you have trouble registering)<br />
<br />
--[[User:DaVince|DaVince]] ([[User talk:DaVince|talk]]) 08:05, 11 June 2017 (UTC)</div>DaVincehttp://wiki.spheredev.org/index.php?title=Template:LegacyWarning&diff=10046Template:LegacyWarning2017-08-01T17:09:38Z<p>DaVince: More rewording, slight style tweaks</p>
<hr />
<div><div style="width: 90%; max-width: 1000px; margin: 0 auto; padding: 0 10px 5px 10px; border: 1px solid #888; border-radius: 3px;"><br />
<h4>Warning: Legacy code ahead</h4><br />
This page has been written for the legacy Sphere 1.x API. While this API is supported in miniSphere, it is recommended to use the new Sphere 2 API.<br />
<p style="font-size: 12px; color: #555; line-height: 1em;">You ''can'' mix old and new API functions, but please be aware that Sphere 2 objects are different from Sphere 1 objects, so they cannot be used interchangeably.<br />
</p><br />
</div></div>DaVincehttp://wiki.spheredev.org/index.php?title=Template:LegacyWarning&diff=10045Template:LegacyWarning2017-08-01T17:03:52Z<p>DaVince: Better summary + styled</p>
<hr />
<div><div style="width: 90%; max-width: 1000px; margin: 0 auto; padding: 0 10px; border: 1px solid #888; border-radius: 3px;"><br />
<h4>Warning: Legacy code ahead</h4><br />
This page has been written for the legacy Sphere 1.x API. While this API is supported in miniSphere, it is recommended to use the new Sphere 2 API.<br><br />
<span style="font-size: 12px; color: #555;">If you do use the old API, please be aware that Sphere 2 objects are different from Sphere 1 objects, and they should not be used interchangeably as this will break your game.</span><br />
</div></div>DaVincehttp://wiki.spheredev.org/index.php?title=Getting_started_with_Sphere_1.5&diff=10044Getting started with Sphere 1.52017-08-01T13:52:34Z<p>DaVince: Added legacy warning template</p>
<hr />
<div>{{LegacyWarning}}<br />
<br />
Note: this article is for legacy Sphere 1.5. Please see [[Getting started]] if you wish to get started with miniSphere and the new tools.<br />
<br />
This document is only a BRIEF introduction to Sphere. It does not cover much at all about scripting.<br />
<br />
__TOC__<br />
<br />
==Introduction==<br />
You may have just downloaded this "Sphere", but have no idea what to do what to do with it. This document will walk you through creating a game, creating a map, creating a spriteset, and then writing some script to glue them all together.<br />
<br />
==Mac OS X==<br />
Recently, the Sphere engine was successfully ported to Mac OS X. Unfortunately, a proper development environment has not yet been made for Sphere on X, so project development on one computer has been rendered impossible until further notice. It IS possible, however, to make the following Sphere-compatible resources in OS X:<br />
<br />
===Images===<br />
Sphere can read many image formats, including but not limited to GIF, JPEG, BMP, and PNG. As such, Sphere compatible images can be made in pretty much any image editor; preferred image editors include Photoshop and The GIMP, but other editors such as Pixen, Paintbrush.app, or Pixelmator work as well. The format recommended for use in Sphere is PNG, primarily for its high quality-to-filesize ratio.<br />
<br />
===Audio===<br />
Sphere can read many audio formats, including but not limited to streamed audio such as WAV, MP3, OGG, and FLAC, and sequenced audio such as IT, XM, and (in some cases) MIDI, As such, Sphere compatible audio can be made in pretty much any audio editor; free software for streaming audio includes Audacity and Reaper (though in Reaper's case you can sequence the audio and rasterize its output to a streaming format), while commercial software includes Logic Pro, Protools, GarageBand, and Bidule; for now, the only known trackers for the music module sequenced formats on OS X are MilkyTracker and Schism Tracker. Schism Tracker is recommended, as it can output in impulsetracker format, though the audio engine used in Schism is a modified Modplug engine, so it won't sound quite the same as in Sphere (which implements DUMB, which is closer to the authentic Impulse Tracker sound).<br />
<br />
===Scripts & game.sgm===<br />
Sphere uses JavaScript as its scripting language. As such, its scripts are simply plain text files with the extension .js, and as such can be written in any text editor. A text editor that features syntax highlighting of the JavaScript language is highly recommended for development purposes, and there are some available for OS X both free and commercial. Your project's base info is stored in a file called [[game.sgm]], which is simply a text file found in your project's base folder. More info about game.sgm's format can be found in Sphere's documentation.<br />
<br />
===Notes===<br />
What remains are Sphere specific formats like [[API:WindowStyle|windowstyles]], [[API:Spriteset|spritesets]], Sphere [[API:Font|bitmap fonts]], and Sphere [[API:Map|maps+tilesets]]. For these, either wait for a native OS X editor, use wine (macports has a good version) and attempt to run the Windows editor, or find a Windows computer and run the Windows editor in its native environment.<br />
<br />
==Linux==<br />
coming soon<br />
<br />
==Windows==<br />
===Creating the game===<br />
Open the editor from the start menu. The Sphere Development Environment is where you will spend a lot of time making a game, so try to get used to it. :)<br />
<br />
The first step in making any game with Sphere is creating the game directory. Click on the blank white paper in the toolbar, or click <var>File | New | Project</var>.<br />
<br />
Enter a project name (the name of the game directory) and a game title (what the game will be called in the Sphere main menu). Click OK, and an empty project window will appear. The project window is an index of all of your game resources, such as maps, spritesets, scripts, and images.<br />
<br />
===Creating a map===<br />
First off, let's create a very simple map. Click <var>File | New | Map</var>. Normally, we may wish to specify the initial map size, and the tileset it uses, but for now, the defaults are okay. Just click OK. And yes, we want to use an empty tileset.<br />
<br />
A map window will appear, along with four palette windows. If this is the first map you have created, the palette windows will all be on top of each other. Click the "tileset" tab in the map editor window. This is where you edit tiles. Choose a nice green color, right-click on the edit section, and select "Fill RGB." Plain green is okay, but we can add a little texture to the tile with the image editor's filters. Right-click on the tile editor, and choose Filter | Noise. If there is too much noise, try the blur filter.<br />
<br />
Now that we have a grass tile, let's add a water one. Find the "Tiles" palette and right-click on it. Select "Append Tile" and click just to the right of the grass tile. Now follow the same steps we used to make the grass tile, but use a dark blue as the base color. Making two tiles wasn't so bad!<br />
<br />
Click on the "Map" tab in the map editor window, and you should see that the entire map is filled with the grass tile. Select the water tile from the tiles palette and draw a small lake or river or something. Of course, there aren't any border tiles from grass to water and back, so it won't look very realistic. But for now, that's okay.<br />
<br />
The map is pretty much done, so click the little floppy disk toolbar button to save it. Make sure you're going to save the map in the "maps" subdirectory of your game directory and save it as 'field.rmp'. Close the map window, so that only the project window shows up. You may be wondering why the map isn't listed in the maps section on the project. When you save a file, the Sphere Editor doesn't immediately know that a new file may have been added to the project. Click Refresh under the Project menu, and a plus button will appear next to the maps section. If it didn't, you didn't save the map in the right place.<br />
<br />
===Creating a spriteset===<br />
Use the <var>File | New</var> menu to create a new spriteset. You should see a window with a bunch of directions and one frame in each direction. Spritesets in Sphere work in a different way than you may be used to. There are a list of images and each frame in a direction simply points to one of the images. Look for the "Spriteset Images" palette. There is only one blank image in it right now. Try going to the Edit tab and drawing a circle. Then go to the Base tab and draw a rectangle around the circle. The "base" of the sprite is the rectangle where it touches the ground. Think of it as the feet of a person. Sphere uses the base rectangle to figure out how the spriteset collides with other things on the map. If you want to go ahead and make other images, feel free. To add animation to your spriteset, right/click on a frame in the Frames view and Append a new one. Create a new image, assign it to the frame, and use the frame properties option in the right-click menu to assign a delay (in frames, usually 60 frames per second). Finally, save your spriteset and put it in the project, the same way you did with the map.<br />
<br />
===Writing the game script===<br />
You can have all of the game files in the world ready, but how do you tell Sphere what to do with them? The answer to that question is by writing a script. Sphere uses JavaScript as a scripting language, so hopefully a few of you will already be somewhat familiar with it.<br />
<br />
Right-click on Scripts in the project window, and then select Insert. Now make sure you're in the game's script directory, and type a filename (game.js, main.js, and startup.js are good choices for a game script). Now that the project has a new empty script, you'll want to tell Sphere that this script is the game script. Double-click on "Game Settings" in the project window and select your startup script. Click OK.<br />
<br />
Now open up the startup script in the script editor. Looks like Notepad, eh? The first thing Sphere does when it starts your game is load the main script and call the [[game (function)|game function]]. The simplest game function is as follows:<br />
<syntaxhighlight><br />
function game() {<br />
<br />
}<br />
</syntaxhighlight><br />
<br />
This function does absolutely nothing. :) A more useful game function is:<br />
<syntaxhighlight><br />
function game() {<br />
CreatePerson("aegis", "aegis.rss", false);<br />
AttachInput("aegis");<br />
AttachCamera("aegis");<br />
MapEngine("field.rmp", 60);<br />
}<br />
</syntaxhighlight><br />
<br />
The scope of this document doesn't cover how exactly how to script everything, but I'll try to explain what the above function does.<br />
<br />
<syntaxhighlight><br />
CreatePerson("aegis", "aegis.rss", false);<br />
</syntaxhighlight><br />
Creates a person named "aegis" using spriteset "aegis.rss". The third parameter, false, means that the entity will not be destroyed during map switches.<br />
<br />
<syntaxhighlight><br />
AttachInput("aegis");<br />
</syntaxhighlight><br />
Attaches the input to the entity named "aegis." This allows you to move it around the map with the keyboard.<br />
<br />
<syntaxhighlight><br />
AttachCamera("aegis");<br />
</syntaxhighlight><br />
Attaches the camera to the entity so that, if possible, the entity will be shown in the center of the screen.<br />
<br />
<syntaxhighlight><br />
MapEngine("field.rmp", 60);<br />
</syntaxhighlight><br />
This starts the map engine at 60 frames per second, using "field.rmp" as the initial map.<br />
<br />
Now save the script file, like you did with the map and the spriteset.<br />
<br />
===Conclusion===<br />
We have a working (albeit small) game! Click the lightning bolt in the editor's toolbar and walk around on the map a little. :)<br />
<br />
==Credits==<br />
By [[Chad Austin]], adapted for the wiki. Additional material by [[User:Apollolux|Neo]].<br />
<br />
[[Category:Tutorials]]<br />
[[Category:Sphere 1]]</div>DaVincehttp://wiki.spheredev.org/index.php?title=Template:LegacyWarning&diff=10043Template:LegacyWarning2017-08-01T13:51:48Z<p>DaVince: Created initial version (more noticeable version will be made soon)</p>
<hr />
<div><div class="warning"><br />
WARNING: This page has been written for the legacy Sphere 1.x API. While this API is supported in miniSphere, please do not mix API version 1 code with version 2 code as this will break things.<br />
</div></div>DaVincehttp://wiki.spheredev.org/index.php?title=Making_a_Menu&diff=10042Making a Menu2017-08-01T13:34:18Z<p>DaVince: Fixed item name display in menu</p>
<hr />
<div>So, you've seen the menu.js in the sphere code bank, and you've used it but don't like it? What do you do? You make your own menu! You can choose to follow either the basic or the advanced route. The advanced route only makes it so that you can overflow your items without worry.<br />
<br />
==Menu.js==<br />
<br />
So, to go about making a menu you would need a general object to put properties in. This is the basics of OOP. Our menu object will look like this, which is very similar to Sphere menu.js:<br />
<br />
<br />
<syntaxhighlight>function Menu()<br />
{<br />
if (!this instanceof Menu) return new Menu();<br />
this.windowstyle = GetSystemWindowStyle();<br />
this.font = GetSystemFont();<br />
this.arrow = GetSystemArrow();<br />
this.items = [];<br />
}</syntaxhighlight><br />
So, the above initializes the starting data that we will be using to create our menu.<br />
<br />
<br />
<syntaxhighlight>this.items = [];</syntaxhighlight><br />
Is a shorthand for making an array. In JS anything can go into these arrays.<br />
<br />
<br />
==Adding Items==<br />
<br />
We can add our own items like so:<br />
<br />
<syntaxhighlight>Menu.prototype.addItem = function(name, description, callback, color)<br />
{<br />
if (color == undefined) color = CreateColor(255, 255, 255);<br />
var item = {<br />
name: name,<br />
desc: description,<br />
callback: callback,<br />
color: color<br />
};<br />
<br />
this.items.push(item);<br />
}</syntaxhighlight><br />
<br />
The:<br />
<syntaxhighlight>item = {};</syntaxhighlight><br />
Is shorthand for object creation. Notice that within these objects, you do not use the 'this' keyword, and also notice there are no more semicolons, instead there are commas indicating it's a lust of properties. This pseudo item will help us determine what is going to be in our menu.<br />
<br />
<br />
==Basic Drawing==<br />
<br />
<syntaxhighlight>Menu.prototype.execute = function(x, y, w, h)<br />
{<br />
var font_height = this.font.getHeight();<br />
var selection = 0;<br />
<br />
while(!IsKeyPressed(KEY_ESCAPE))<br />
{<br />
this.windowstyle.drawWindow(x, y, w, h)<br />
for (var i = 0; i < this.items.length; ++i)<br />
{<br />
this.font.setColorMask(this.items[i].color);<br />
this.font.drawText(x+16, y + i * font_height, this.items[i].name);<br />
}<br />
<br />
this.arrow.blit(x, y +i * selection);<br />
<br />
FlipScreen();<br />
}<br />
}</syntaxhighlight><br />
Three, the above code will draw the items you have added. It iterates through a for loop and draws all of the items names at an x position and a y position plus an offset so they do not all draw at the same location.<br />
<br />
<br />
==Advanced Drawing==<br />
<br />
So, what happens if you add more than one item? We will get an overflow of sorts and it'll draw items beyond the height of the menu we are using. To correct this we would need an offset from the top.<br />
<br />
We will need to add overflow arrows to the menu:<br />
<br />
<syntaxhighlight>function Menu()<br />
{<br />
if (!this instanceof Menu) return new Menu();<br />
this.windowstyle = GetSystemWindowStyle();<br />
this.font = GetSystemFont();<br />
this.arrow = GetSystemArrow();<br />
this.upArrow = GetSystemUpArrow();<br />
this.downArrow = GetSystemDownArrow();<br />
this.items = [];<br />
}</syntaxhighlight><br />
<br />
Now the drawing loop will add an offset value:<br />
<syntaxhighlight>Menu.prototype.execute = function(x, y, w, h)<br />
{<br />
var fontHeight = this.font.getHeight();<br />
var max_shown = Math.floor(h / font_height);<br />
var offset = 0;<br />
var selection = 0;<br />
<br />
while(!IsKeyPressed(KEY_ESCAPE))<br />
{<br />
this.windowstyle.drawWindow(x, y, w, h)<br />
for (var i = 0; i < max_shown; ++i)<br />
{<br />
if (i >= items.length) continue; // limit what is drawn<br />
this.font.setColorMask(this.items[i+offset].color);<br />
this.font.drawText(x+16, y + i * font_height, this.items[i+offset]);<br />
}<br />
<br />
this.arrow.blit(x, y + (selection-offset) * font_height);<br />
if (offset > 0)<br />
this.upArrow.blit(x + w - this.upArrow.width, y);<br />
if (offset + max_shown < this.items.length)<br />
this.downArrow.blit(x + w - this.downArrow.width, y + font_height * max_shown - this.downArrow.height);<br />
<br />
FlipScreen();<br />
}<br />
}</syntaxhighlight><br />
<br />
<br />
==Handling the selection (basic)==<br />
<br />
For this demonstration the handling of the menu will be added after the items are drawn. Pressing the up key shall move a cursor up, while pressing the down key shall move the cursor down. Hitting enter shall choose the item, and hitting escape shall quit the menu.<br />
<br />
<syntaxhighlight>Menu.prototype.execute = function(x, y, w, h)<br />
{<br />
// local variables //<br />
<br />
while(!IsKeyPressed(KEY_ESCAPE))<br />
{<br />
// stuff drawn here // <br />
<br />
FlipScreen();<br />
<br />
while(AreKeysLeft())<br />
{<br />
switch(GetKey())<br />
{<br />
case KEY_UP:<br />
if (selection > 0) selection--;<br />
break;<br />
case KEY_DOWN:<br />
if (selection < this.items.length-1) selection++;<br />
break;<br />
case KEY_ENTER:<br />
this.items[selection].callback();<br />
return;<br />
break;<br />
case KEY_ESCAPE:<br />
return;<br />
break;<br />
}<br />
}<br />
}<br />
}</syntaxhighlight><br />
It may look long, but this is basically finished. I commented out the stuff we already covered, so it should be obvious to add the while([[AreKeysLeft]]()) loop. The reason why this loop works is because [[AreKeysLeft]]() is always going to be false until a key has been hit. Once the key is hit, it goes into the switch with [[GetKey]](). [[GetKey]]() would grab that key and do whatever based on the switches.<br />
<br />
<br />
==Handling the selection (advanced)==<br />
<br />
So, the above doesn't take into account for the offset, so I'll teach you how to use handling with the more advanced menu. Start by writing the code from the previous section if it has not been written already. Now, let's focus on these specific cases:<br />
<br />
<syntaxhighlight><br />
case KEY_UP:<br />
if (selection > 0)<br />
{<br />
selection--;<br />
if (selection < offset) offset--;<br />
}<br />
break;<br />
</syntaxhighlight><br />
<br />
And Down:<br />
<br />
<syntaxhighlight><br />
case KEY_DOWN:<br />
if (selection < this.items.length-1)<br />
{<br />
selection++;<br />
if (selection >= offset + max_shown) offset++;<br />
}<br />
break;<br />
</syntaxhighlight><br />
<br />
That's all you would need to handle an advanced menu. all I did was take into consideration the new offset value.<br />
<br />
<br />
==Finished==<br />
<br />
Regardless if you went the basic way or the advanced way, here is how you may use it:<br />
<br />
<syntaxhighlight><br />
RequireScript("menu.js"); // notice that it's not a system script, it's yours.<br />
<br />
function game()<br />
{<br />
var my_menu = new Menu();<br />
my_menu.addItem("item 1", "my item", Exit);<br />
my_menu.addItem("item 2", "my item", Exit);<br />
my_menu.addItem("item 3", "my item", Exit);<br />
my_menu.addItem("item 4", "my item", Exit);<br />
my_menu.addItem("item 5", "my item", Exit);<br />
<br />
my_menu.execute(GetScreenWidth()/2-80, GetScreenHeight()/-40, 160, 80);<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
==Extra: Drawing a background==<br />
<br />
I'll teach you how to use a custom render script:<br />
<br />
<syntaxhighlight><br />
function Menu()<br />
{<br />
if (!this instanceof Menu) return new Menu();<br />
this.windowstyle = GetSystemWindowStyle();<br />
this.font = GetSystemFont();<br />
this.arrow = GetSystemArrow();<br />
this.items = [];<br />
<br />
this.preRender = function() {} // this is what you can add<br />
}<br />
</syntaxhighlight><br />
<br />
And then in the drawing loop, no matter if you chose the advanced way or basic way:<br />
<br />
<syntaxhighlight><br />
Menu.prototype.execute = function(x, y, w, h)<br />
{<br />
// local variables //<br />
<br />
while(!IsKeyPressed(KEY_ESCAPE))<br />
{<br />
this.preRender();<br />
// stuff drawn here // <br />
<br />
FlipScreen();<br />
<br />
while(AreKeysLeft())<br />
{<br />
// handle choices //<br />
}<br />
}<br />
}<br />
</syntaxhighlight><br />
<br />
Notice I commented the extra stuff out. Basically you add this.preRender() right after the very first while loop.<br />
<br />
To use it:<br />
<br />
<syntaxhighlight><br />
RequireScript("menu.js");<br />
<br />
function game()<br />
{<br />
var my_menu = new Menu();<br />
my_menu.addItem("item 1", "my item", Exit);<br />
my_menu.addItem("item 2", "my item", Exit);<br />
my_menu.addItem("item 3", "my item", Exit);<br />
<br />
my_menu.preRender = function()<br />
{<br />
if (IsMapEngineRunning()) {<br />
RenderMap();<br />
UpdateMapEngine();<br />
}<br />
}<br />
<br />
my_menu.execute(GetScreenWidth()/2-80, GetScreenHeight()/-40, 160, 80);<br />
}<br />
</syntaxhighlight><br />
The above will update and render the map behind the menu, given if the map engine is running or not. You can do this for all sorts of things, not just rendering.<br />
<br />
<br />
<br />
[[Category:Tutorials]]<br />
[[Category:Sphere 1]]</div>DaVincehttp://wiki.spheredev.org/index.php?title=Making_a_Menu&diff=10041Making a Menu2017-08-01T13:28:06Z<p>DaVince: Correction: font -> this.font</p>
<hr />
<div>So, you've seen the menu.js in the sphere code bank, and you've used it but don't like it? What do you do? You make your own menu! You can choose to follow either the basic or the advanced route. The advanced route only makes it so that you can overflow your items without worry.<br />
<br />
==Menu.js==<br />
<br />
So, to go about making a menu you would need a general object to put properties in. This is the basics of OOP. Our menu object will look like this, which is very similar to Sphere menu.js:<br />
<br />
<br />
<syntaxhighlight>function Menu()<br />
{<br />
if (!this instanceof Menu) return new Menu();<br />
this.windowstyle = GetSystemWindowStyle();<br />
this.font = GetSystemFont();<br />
this.arrow = GetSystemArrow();<br />
this.items = [];<br />
}</syntaxhighlight><br />
So, the above initializes the starting data that we will be using to create our menu.<br />
<br />
<br />
<syntaxhighlight>this.items = [];</syntaxhighlight><br />
Is a shorthand for making an array. In JS anything can go into these arrays.<br />
<br />
<br />
==Adding Items==<br />
<br />
We can add our own items like so:<br />
<br />
<syntaxhighlight>Menu.prototype.addItem = function(name, description, callback, color)<br />
{<br />
if (color == undefined) color = CreateColor(255, 255, 255);<br />
var item = {<br />
name: name,<br />
desc: description,<br />
callback: callback,<br />
color: color<br />
};<br />
<br />
this.items.push(item);<br />
}</syntaxhighlight><br />
<br />
The:<br />
<syntaxhighlight>item = {};</syntaxhighlight><br />
Is shorthand for object creation. Notice that within these objects, you do not use the 'this' keyword, and also notice there are no more semicolons, instead there are commas indicating it's a lust of properties. This pseudo item will help us determine what is going to be in our menu.<br />
<br />
<br />
==Basic Drawing==<br />
<br />
<syntaxhighlight>Menu.prototype.execute = function(x, y, w, h)<br />
{<br />
var font_height = this.font.getHeight();<br />
var selection = 0;<br />
<br />
while(!IsKeyPressed(KEY_ESCAPE))<br />
{<br />
this.windowstyle.drawWindow(x, y, w, h)<br />
for (var i = 0; i < this.items.length; ++i)<br />
{<br />
this.font.setColorMask(this.items[i].color);<br />
this.font.drawText(x+16, y + i * font_height, this.items[i]);<br />
}<br />
<br />
this.arrow.blit(x, y +i * selection);<br />
<br />
FlipScreen();<br />
}<br />
}</syntaxhighlight><br />
Three, the above code will draw the items you have added. It iterates through a for loop and draws all of the items names at an x position and a y position plus an offset so they do not all draw at the same location.<br />
<br />
<br />
==Advanced Drawing==<br />
<br />
So, what happens if you add more than one item? We will get an overflow of sorts and it'll draw items beyond the height of the menu we are using. To correct this we would need an offset from the top.<br />
<br />
We will need to add overflow arrows to the menu:<br />
<br />
<syntaxhighlight>function Menu()<br />
{<br />
if (!this instanceof Menu) return new Menu();<br />
this.windowstyle = GetSystemWindowStyle();<br />
this.font = GetSystemFont();<br />
this.arrow = GetSystemArrow();<br />
this.upArrow = GetSystemUpArrow();<br />
this.downArrow = GetSystemDownArrow();<br />
this.items = [];<br />
}</syntaxhighlight><br />
<br />
Now the drawing loop will add an offset value:<br />
<syntaxhighlight>Menu.prototype.execute = function(x, y, w, h)<br />
{<br />
var fontHeight = this.font.getHeight();<br />
var max_shown = Math.floor(h / font_height);<br />
var offset = 0;<br />
var selection = 0;<br />
<br />
while(!IsKeyPressed(KEY_ESCAPE))<br />
{<br />
this.windowstyle.drawWindow(x, y, w, h)<br />
for (var i = 0; i < max_shown; ++i)<br />
{<br />
if (i >= items.length) continue; // limit what is drawn<br />
this.font.setColorMask(this.items[i+offset].color);<br />
this.font.drawText(x+16, y + i * font_height, this.items[i+offset]);<br />
}<br />
<br />
this.arrow.blit(x, y + (selection-offset) * font_height);<br />
if (offset > 0)<br />
this.upArrow.blit(x + w - this.upArrow.width, y);<br />
if (offset + max_shown < this.items.length)<br />
this.downArrow.blit(x + w - this.downArrow.width, y + font_height * max_shown - this.downArrow.height);<br />
<br />
FlipScreen();<br />
}<br />
}</syntaxhighlight><br />
<br />
<br />
==Handling the selection (basic)==<br />
<br />
For this demonstration the handling of the menu will be added after the items are drawn. Pressing the up key shall move a cursor up, while pressing the down key shall move the cursor down. Hitting enter shall choose the item, and hitting escape shall quit the menu.<br />
<br />
<syntaxhighlight>Menu.prototype.execute = function(x, y, w, h)<br />
{<br />
// local variables //<br />
<br />
while(!IsKeyPressed(KEY_ESCAPE))<br />
{<br />
// stuff drawn here // <br />
<br />
FlipScreen();<br />
<br />
while(AreKeysLeft())<br />
{<br />
switch(GetKey())<br />
{<br />
case KEY_UP:<br />
if (selection > 0) selection--;<br />
break;<br />
case KEY_DOWN:<br />
if (selection < this.items.length-1) selection++;<br />
break;<br />
case KEY_ENTER:<br />
this.items[selection].callback();<br />
return;<br />
break;<br />
case KEY_ESCAPE:<br />
return;<br />
break;<br />
}<br />
}<br />
}<br />
}</syntaxhighlight><br />
It may look long, but this is basically finished. I commented out the stuff we already covered, so it should be obvious to add the while([[AreKeysLeft]]()) loop. The reason why this loop works is because [[AreKeysLeft]]() is always going to be false until a key has been hit. Once the key is hit, it goes into the switch with [[GetKey]](). [[GetKey]]() would grab that key and do whatever based on the switches.<br />
<br />
<br />
==Handling the selection (advanced)==<br />
<br />
So, the above doesn't take into account for the offset, so I'll teach you how to use handling with the more advanced menu. Start by writing the code from the previous section if it has not been written already. Now, let's focus on these specific cases:<br />
<br />
<syntaxhighlight><br />
case KEY_UP:<br />
if (selection > 0)<br />
{<br />
selection--;<br />
if (selection < offset) offset--;<br />
}<br />
break;<br />
</syntaxhighlight><br />
<br />
And Down:<br />
<br />
<syntaxhighlight><br />
case KEY_DOWN:<br />
if (selection < this.items.length-1)<br />
{<br />
selection++;<br />
if (selection >= offset + max_shown) offset++;<br />
}<br />
break;<br />
</syntaxhighlight><br />
<br />
That's all you would need to handle an advanced menu. all I did was take into consideration the new offset value.<br />
<br />
<br />
==Finished==<br />
<br />
Regardless if you went the basic way or the advanced way, here is how you may use it:<br />
<br />
<syntaxhighlight><br />
RequireScript("menu.js"); // notice that it's not a system script, it's yours.<br />
<br />
function game()<br />
{<br />
var my_menu = new Menu();<br />
my_menu.addItem("item 1", "my item", Exit);<br />
my_menu.addItem("item 2", "my item", Exit);<br />
my_menu.addItem("item 3", "my item", Exit);<br />
my_menu.addItem("item 4", "my item", Exit);<br />
my_menu.addItem("item 5", "my item", Exit);<br />
<br />
my_menu.execute(GetScreenWidth()/2-80, GetScreenHeight()/-40, 160, 80);<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
==Extra: Drawing a background==<br />
<br />
I'll teach you how to use a custom render script:<br />
<br />
<syntaxhighlight><br />
function Menu()<br />
{<br />
if (!this instanceof Menu) return new Menu();<br />
this.windowstyle = GetSystemWindowStyle();<br />
this.font = GetSystemFont();<br />
this.arrow = GetSystemArrow();<br />
this.items = [];<br />
<br />
this.preRender = function() {} // this is what you can add<br />
}<br />
</syntaxhighlight><br />
<br />
And then in the drawing loop, no matter if you chose the advanced way or basic way:<br />
<br />
<syntaxhighlight><br />
Menu.prototype.execute = function(x, y, w, h)<br />
{<br />
// local variables //<br />
<br />
while(!IsKeyPressed(KEY_ESCAPE))<br />
{<br />
this.preRender();<br />
// stuff drawn here // <br />
<br />
FlipScreen();<br />
<br />
while(AreKeysLeft())<br />
{<br />
// handle choices //<br />
}<br />
}<br />
}<br />
</syntaxhighlight><br />
<br />
Notice I commented the extra stuff out. Basically you add this.preRender() right after the very first while loop.<br />
<br />
To use it:<br />
<br />
<syntaxhighlight><br />
RequireScript("menu.js");<br />
<br />
function game()<br />
{<br />
var my_menu = new Menu();<br />
my_menu.addItem("item 1", "my item", Exit);<br />
my_menu.addItem("item 2", "my item", Exit);<br />
my_menu.addItem("item 3", "my item", Exit);<br />
<br />
my_menu.preRender = function()<br />
{<br />
if (IsMapEngineRunning()) {<br />
RenderMap();<br />
UpdateMapEngine();<br />
}<br />
}<br />
<br />
my_menu.execute(GetScreenWidth()/2-80, GetScreenHeight()/-40, 160, 80);<br />
}<br />
</syntaxhighlight><br />
The above will update and render the map behind the menu, given if the map engine is running or not. You can do this for all sorts of things, not just rendering.<br />
<br />
<br />
<br />
[[Category:Tutorials]]<br />
[[Category:Sphere 1]]</div>DaVincehttp://wiki.spheredev.org/index.php?title=Making_a_Menu&diff=10040Making a Menu2017-08-01T13:26:49Z<p>DaVince: </p>
<hr />
<div>So, you've seen the menu.js in the sphere code bank, and you've used it but don't like it? What do you do? You make your own menu! You can choose to follow either the basic or the advanced route. The advanced route only makes it so that you can overflow your items without worry.<br />
<br />
==Menu.js==<br />
<br />
So, to go about making a menu you would need a general object to put properties in. This is the basics of OOP. Our menu object will look like this, which is very similar to Sphere menu.js:<br />
<br />
<br />
<syntaxhighlight>function Menu()<br />
{<br />
if (!this instanceof Menu) return new Menu();<br />
this.windowstyle = GetSystemWindowStyle();<br />
this.font = GetSystemFont();<br />
this.arrow = GetSystemArrow();<br />
this.items = [];<br />
}</syntaxhighlight><br />
So, the above initializes the starting data that we will be using to create our menu.<br />
<br />
<br />
<syntaxhighlight>this.items = [];</syntaxhighlight><br />
Is a shorthand for making an array. In JS anything can go into these arrays.<br />
<br />
<br />
==Adding Items==<br />
<br />
We can add our own items like so:<br />
<br />
<syntaxhighlight>Menu.prototype.addItem = function(name, description, callback, color)<br />
{<br />
if (color == undefined) color = CreateColor(255, 255, 255);<br />
var item = {<br />
name: name,<br />
desc: description,<br />
callback: callback,<br />
color: color<br />
};<br />
<br />
this.items.push(item);<br />
}</syntaxhighlight><br />
<br />
The:<br />
<syntaxhighlight>item = {};</syntaxhighlight><br />
Is shorthand for object creation. Notice that within these objects, you do not use the 'this' keyword, and also notice there are no more semicolons, instead there are commas indicating it's a lust of properties. This pseudo item will help us determine what is going to be in our menu.<br />
<br />
<br />
==Basic Drawing==<br />
<br />
<syntaxhighlight>Menu.prototype.execute = function(x, y, w, h)<br />
{<br />
var font_height = font.getHeight();<br />
var selection = 0;<br />
<br />
while(!IsKeyPressed(KEY_ESCAPE))<br />
{<br />
this.windowstyle.drawWindow(x, y, w, h)<br />
for (var i = 0; i < this.items.length; ++i)<br />
{<br />
this.font.setColorMask(this.items[i].color);<br />
this.font.drawText(x+16, y + i * font_height, this.items[i]);<br />
}<br />
<br />
this.arrow.blit(x, y +i * selection);<br />
<br />
FlipScreen();<br />
}<br />
}</syntaxhighlight><br />
Three, the above code will draw the items you have added. It iterates through a for loop and draws all of the items names at an x position and a y position plus an offset so they do not all draw at the same location.<br />
<br />
<br />
==Advanced Drawing==<br />
<br />
So, what happens if you add more than one item? We will get an overflow of sorts and it'll draw items beyond the height of the menu we are using. To correct this we would need an offset from the top.<br />
<br />
We will need to add overflow arrows to the menu:<br />
<br />
<syntaxhighlight>function Menu()<br />
{<br />
if (!this instanceof Menu) return new Menu();<br />
this.windowstyle = GetSystemWindowStyle();<br />
this.font = GetSystemFont();<br />
this.arrow = GetSystemArrow();<br />
this.upArrow = GetSystemUpArrow();<br />
this.downArrow = GetSystemDownArrow();<br />
this.items = [];<br />
}</syntaxhighlight><br />
<br />
Now the drawing loop will add an offset value:<br />
<syntaxhighlight>Menu.prototype.execute = function(x, y, w, h)<br />
{<br />
var fontHeight = font.getHeight();<br />
var max_shown = Math.floor(h / font_height);<br />
var offset = 0;<br />
var selection = 0;<br />
<br />
while(!IsKeyPressed(KEY_ESCAPE))<br />
{<br />
this.windowstyle.drawWindow(x, y, w, h)<br />
for (var i = 0; i < max_shown; ++i)<br />
{<br />
if (i >= items.length) continue; // limit what is drawn<br />
this.font.setColorMask(this.items[i+offset].color);<br />
this.font.drawText(x+16, y + i * font_height, this.items[i+offset]);<br />
}<br />
<br />
this.arrow.blit(x, y + (selection-offset) * font_height);<br />
if (offset > 0)<br />
this.upArrow.blit(x + w - this.upArrow.width, y);<br />
if (offset + max_shown < this.items.length)<br />
this.downArrow.blit(x + w - this.downArrow.width, y + font_height * max_shown - this.downArrow.height);<br />
<br />
FlipScreen();<br />
}<br />
}</syntaxhighlight><br />
<br />
<br />
==Handling the selection (basic)==<br />
<br />
For this demonstration the handling of the menu will be added after the items are drawn. Pressing the up key shall move a cursor up, while pressing the down key shall move the cursor down. Hitting enter shall choose the item, and hitting escape shall quit the menu.<br />
<br />
<syntaxhighlight>Menu.prototype.execute = function(x, y, w, h)<br />
{<br />
// local variables //<br />
<br />
while(!IsKeyPressed(KEY_ESCAPE))<br />
{<br />
// stuff drawn here // <br />
<br />
FlipScreen();<br />
<br />
while(AreKeysLeft())<br />
{<br />
switch(GetKey())<br />
{<br />
case KEY_UP:<br />
if (selection > 0) selection--;<br />
break;<br />
case KEY_DOWN:<br />
if (selection < this.items.length-1) selection++;<br />
break;<br />
case KEY_ENTER:<br />
this.items[selection].callback();<br />
return;<br />
break;<br />
case KEY_ESCAPE:<br />
return;<br />
break;<br />
}<br />
}<br />
}<br />
}</syntaxhighlight><br />
It may look long, but this is basically finished. I commented out the stuff we already covered, so it should be obvious to add the while([[AreKeysLeft]]()) loop. The reason why this loop works is because [[AreKeysLeft]]() is always going to be false until a key has been hit. Once the key is hit, it goes into the switch with [[GetKey]](). [[GetKey]]() would grab that key and do whatever based on the switches.<br />
<br />
<br />
==Handling the selection (advanced)==<br />
<br />
So, the above doesn't take into account for the offset, so I'll teach you how to use handling with the more advanced menu. Start by writing the code from the previous section if it has not been written already. Now, let's focus on these specific cases:<br />
<br />
<syntaxhighlight><br />
case KEY_UP:<br />
if (selection > 0)<br />
{<br />
selection--;<br />
if (selection < offset) offset--;<br />
}<br />
break;<br />
</syntaxhighlight><br />
<br />
And Down:<br />
<br />
<syntaxhighlight><br />
case KEY_DOWN:<br />
if (selection < this.items.length-1)<br />
{<br />
selection++;<br />
if (selection >= offset + max_shown) offset++;<br />
}<br />
break;<br />
</syntaxhighlight><br />
<br />
That's all you would need to handle an advanced menu. all I did was take into consideration the new offset value.<br />
<br />
<br />
==Finished==<br />
<br />
Regardless if you went the basic way or the advanced way, here is how you may use it:<br />
<br />
<syntaxhighlight><br />
RequireScript("menu.js"); // notice that it's not a system script, it's yours.<br />
<br />
function game()<br />
{<br />
var my_menu = new Menu();<br />
my_menu.addItem("item 1", "my item", Exit);<br />
my_menu.addItem("item 2", "my item", Exit);<br />
my_menu.addItem("item 3", "my item", Exit);<br />
my_menu.addItem("item 4", "my item", Exit);<br />
my_menu.addItem("item 5", "my item", Exit);<br />
<br />
my_menu.execute(GetScreenWidth()/2-80, GetScreenHeight()/-40, 160, 80);<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
==Extra: Drawing a background==<br />
<br />
I'll teach you how to use a custom render script:<br />
<br />
<syntaxhighlight><br />
function Menu()<br />
{<br />
if (!this instanceof Menu) return new Menu();<br />
this.windowstyle = GetSystemWindowStyle();<br />
this.font = GetSystemFont();<br />
this.arrow = GetSystemArrow();<br />
this.items = [];<br />
<br />
this.preRender = function() {} // this is what you can add<br />
}<br />
</syntaxhighlight><br />
<br />
And then in the drawing loop, no matter if you chose the advanced way or basic way:<br />
<br />
<syntaxhighlight><br />
Menu.prototype.execute = function(x, y, w, h)<br />
{<br />
// local variables //<br />
<br />
while(!IsKeyPressed(KEY_ESCAPE))<br />
{<br />
this.preRender();<br />
// stuff drawn here // <br />
<br />
FlipScreen();<br />
<br />
while(AreKeysLeft())<br />
{<br />
// handle choices //<br />
}<br />
}<br />
}<br />
</syntaxhighlight><br />
<br />
Notice I commented the extra stuff out. Basically you add this.preRender() right after the very first while loop.<br />
<br />
To use it:<br />
<br />
<syntaxhighlight><br />
RequireScript("menu.js");<br />
<br />
function game()<br />
{<br />
var my_menu = new Menu();<br />
my_menu.addItem("item 1", "my item", Exit);<br />
my_menu.addItem("item 2", "my item", Exit);<br />
my_menu.addItem("item 3", "my item", Exit);<br />
<br />
my_menu.preRender = function()<br />
{<br />
if (IsMapEngineRunning()) {<br />
RenderMap();<br />
UpdateMapEngine();<br />
}<br />
}<br />
<br />
my_menu.execute(GetScreenWidth()/2-80, GetScreenHeight()/-40, 160, 80);<br />
}<br />
</syntaxhighlight><br />
The above will update and render the map behind the menu, given if the map engine is running or not. You can do this for all sorts of things, not just rendering.<br />
<br />
<br />
<br />
[[Category:Tutorials]]<br />
[[Category:Sphere 1]]</div>DaVince