Very rough sketch of a beginning, not even nearly doing anything interesting.
This commit is contained in:
parent
9fe52661f7
commit
1e989616d7
45 changed files with 1230 additions and 329 deletions
150
resources/public/css/phone.css
Normal file
150
resources/public/css/phone.css
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
body {
|
||||
font-family: sans-serif;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
/* ids generally in document order */
|
||||
/* Overall container div, holds all content of page. Yes, I know it shouldn't have fixed width */
|
||||
#main-container{
|
||||
clear: both;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
/* footer of the document */
|
||||
#footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#header {
|
||||
width:100%;
|
||||
padding: 0.25em 5% 0.25em 5%;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#header h1 {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#nav{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
z-index: 149;
|
||||
background:rgba(40,40,40,0.8);
|
||||
}
|
||||
|
||||
#nav:hover #nav-menu {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#nav-icon {
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
#nav-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#nav ul li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#nav ul li a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
padding: 0.1em 0.75em;
|
||||
margin: 0;
|
||||
}
|
||||
#nav ul li.active a { background: silver;}
|
||||
li.nav-item a:hover { background: rgb( 240, 240, 240) }
|
||||
li.nav-item a:active { background: gray; color: white; }
|
||||
|
||||
.error {
|
||||
background-color: red;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* there isn't enough room on a phone display for optional elements, and
|
||||
load/save isn't going to work on a phone anyway */
|
||||
.nav-optional {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.widget {
|
||||
margin: 0;
|
||||
padding: 0.25em 1em;
|
||||
border: thin solid white;
|
||||
}
|
||||
|
||||
.world {
|
||||
font-size: 8pt;
|
||||
}
|
||||
|
||||
div.error {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
background-color: silver;
|
||||
border: thin solid silver;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
p, pre, ul, ol, dl, h1, h2, h3, h4, h5 {
|
||||
width: 100%;
|
||||
padding: 0.25em 1em;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
input.submit {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
input.required:after {
|
||||
content: " \*";
|
||||
color: red;
|
||||
}
|
||||
|
||||
label {
|
||||
min-width: 35%;
|
||||
}
|
||||
|
||||
label, input {
|
||||
padding: 0.25em 1em;
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
|
||||
label {
|
||||
border-right: thin solid gray;
|
||||
}
|
||||
|
||||
menu li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
menu li::before {
|
||||
content: "|| ";
|
||||
}
|
||||
|
||||
|
||||
div.world table, div.world tr td {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
150
resources/public/css/standard.css
Normal file
150
resources/public/css/standard.css
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
/* ids generally in document order */
|
||||
/* Overall container div, holds all content of page. Yes, I know it shouldn't have fixed width */
|
||||
#main-container{
|
||||
clear: both;
|
||||
/* width:100%; */
|
||||
}
|
||||
|
||||
/* footer of the document */
|
||||
#footer {
|
||||
clear: both;
|
||||
font-size: smaller;
|
||||
padding: 0 2em;
|
||||
text-align: center;
|
||||
color:white;
|
||||
background:rgba(196,196,196,0.95);
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
bottom:0;
|
||||
position:fixed;
|
||||
z-index:150;
|
||||
_position:absolute;
|
||||
_top:expression(eval(document.documentElement.scrollTop+
|
||||
(document.documentElement.clientHeight-this.offsetHeight)));
|
||||
}
|
||||
|
||||
#header {
|
||||
width:100%;
|
||||
padding: 2em 0 0.25em 0;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#tab-bar {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
padding: 0.25em 10%;
|
||||
position: fixed;
|
||||
z-index: 149;
|
||||
color: white;
|
||||
background: rgba(40,40,40,0.8);
|
||||
}
|
||||
|
||||
#tab-bar li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: inline;
|
||||
color: white;
|
||||
background: rgba(40,40,40,0.8);
|
||||
}
|
||||
|
||||
#tab-bar li a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
padding: 0.1em 0.75em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#tab-bar li.active a { background: silver;}
|
||||
li.tab a:hover { background: rgb( 240, 240, 240) }
|
||||
li.tab a:active { background: gray; color: white; }
|
||||
|
||||
.error {
|
||||
background-color: red;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.widget {
|
||||
background-color: silver;
|
||||
border: thin solid white;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.world {
|
||||
font-size: 8pt;
|
||||
}
|
||||
|
||||
div.error {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form {
|
||||
border: thin solid silver;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 300%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 1em 10% 0.25em 10%;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
div.content, form, p, pre, ul, ol, dl, menu, h2, h3, h4, h5 {
|
||||
padding: 0.25em 10%;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
input.submit {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
input.required:after {
|
||||
content: " \*";
|
||||
color: red;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 30em;
|
||||
min-width: 20em;
|
||||
border-right: thin solid gray;
|
||||
}
|
||||
|
||||
menu li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
menu li::before {
|
||||
content: "|| ";
|
||||
}
|
||||
|
||||
div.world table, div.world table tr td {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-collapse: collapse;
|
||||
border: none;
|
||||
}
|
||||
|
||||
table.music-ruled tr:nth-child(odd) {
|
||||
background-color: silver;
|
||||
}
|
||||
|
||||
th, td {
|
||||
text-align: left;
|
||||
padding: 0 0.25em;
|
||||
}
|
||||
|
||||
52
resources/public/css/states.css
Normal file
52
resources/public/css/states.css
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
td.waste {
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
td.water {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
td.pasture, td.grassland, td.meadow {
|
||||
background-color: lime;
|
||||
}
|
||||
|
||||
td.crop {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
td.camp, td.house, td.inn, td.market {
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
td.ploughland {
|
||||
background-color: brown;
|
||||
}
|
||||
|
||||
td.heath {
|
||||
background-color: chartreuse;
|
||||
}
|
||||
|
||||
td.scrub {
|
||||
background-color: lime;
|
||||
}
|
||||
|
||||
td.forest {
|
||||
background-color: forestgreen;
|
||||
}
|
||||
|
||||
td.climax {
|
||||
background-color: olive;
|
||||
}
|
||||
|
||||
td.fire {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
td.error, td.plague {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
td.snow, td.ice {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
166
resources/public/css/tablet.css
Normal file
166
resources/public/css/tablet.css
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
/* ids generally in document order */
|
||||
/* Overall container div, holds all content of page. Yes, I know it shouldn't have fixed width */
|
||||
#main-container{
|
||||
clear: both;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
/* footer of the document */
|
||||
#footer {
|
||||
clear: both;
|
||||
font-size: smaller;
|
||||
padding: 0 2em;
|
||||
text-align: center;
|
||||
color:white;
|
||||
background:rgba(196,196,196,0.95);
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
bottom:0;
|
||||
position:fixed;
|
||||
z-index:150;
|
||||
_position:absolute;
|
||||
_top:expression(eval(document.documentElement.scrollTop+
|
||||
(document.documentElement.clientHeight-this.offsetHeight)));
|
||||
}
|
||||
|
||||
#footer:hover #credits {
|
||||
font-size: normal;
|
||||
}
|
||||
|
||||
#header {
|
||||
width:100%;
|
||||
padding: 0.25em 5% 0.25em 5%;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#header h1 {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#nav{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
z-index: 149;
|
||||
background:rgba(40,40,40,0.8);
|
||||
}
|
||||
|
||||
#nav:hover #nav-menu {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#nav-icon {
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
#nav-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#nav ul li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#nav ul li a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
padding: 0.1em 0.75em;
|
||||
margin: 0;
|
||||
}
|
||||
#nav ul li.active a { background: silver;}
|
||||
li.nav-item a:hover { background: rgb( 240, 240, 240) }
|
||||
li.nav-item a:active { background: gray; color: white; }
|
||||
|
||||
.error {
|
||||
background-color: red;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* there isn't enough room on a tablet display for optional elements, and
|
||||
load/save isn't going to work on a tablet anyway */
|
||||
.nav-optional {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.widget {
|
||||
margin: 0;
|
||||
padding: 0.25em 1em;
|
||||
border: thin solid white;
|
||||
}
|
||||
|
||||
.world {
|
||||
font-size: 8pt;
|
||||
}
|
||||
|
||||
div.error {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
background-color: silver;
|
||||
border: thin solid silver;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
p, pre, ul, ol, dl, h1, h2, h3, h4, h5 {
|
||||
width: 100%;
|
||||
padding: 0.25em 1em;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
input.submit {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
input.required:after {
|
||||
content: " \*";
|
||||
color: red;
|
||||
}
|
||||
|
||||
label {
|
||||
min-width: 35%;
|
||||
}
|
||||
|
||||
label, input {
|
||||
padding: 0.25em 1em;
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
|
||||
label {
|
||||
border-right: thin solid gray;
|
||||
}
|
||||
|
||||
menu li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
menu li::before {
|
||||
content: "|| ";
|
||||
}
|
||||
|
||||
|
||||
div.world table, div.world tr td {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue