You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
273 lines
5.2 KiB
273 lines
5.2 KiB
2 years ago
|
a:link, a:hover, a:active, a:visited{color: #000;}
|
||
|
|
||
|
html, body{margin: 0; padding: 0; height: 100%; width: 100%;}
|
||
|
|
||
|
canvas{margin: 0; padding: 0; border: none; display: block;}
|
||
|
|
||
|
button:hover{cursor: pointer;}
|
||
|
|
||
|
@font-face{
|
||
|
font-family: "Rametto";
|
||
|
src: url("data/styles/font.ttf");
|
||
|
}
|
||
|
|
||
|
*{
|
||
|
font-family: "Rametto";
|
||
|
color: #000;
|
||
|
font-size: 17px;
|
||
|
}
|
||
|
|
||
|
:root{
|
||
|
--border-width: 2px;
|
||
|
--width: 1000px;
|
||
|
--height: 1000px;
|
||
|
--fieldset-width: 100px;
|
||
|
--body-background: rgb(60, 60, 100);
|
||
|
--interface-background: rgb(80, 80, 120);
|
||
|
--fieldset-background: rgb(100, 100, 130);
|
||
|
--input-background: rgb(120, 120, 150);
|
||
|
--lobby-leader-background: rgb(60, 60, 150);
|
||
|
--button-background: rgb(50, 180, 60);
|
||
|
--error-label-font: rgb(220, 50, 50);
|
||
|
--chat-first-background: rgb(50, 50, 170);
|
||
|
--chat-second-background: rgb(100, 100, 200);
|
||
|
--chat-writer-color: rgb(243, 130, 0);
|
||
|
}
|
||
|
|
||
|
body{
|
||
|
background-color: var(--body-background);
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
#content{
|
||
|
position: absolute;
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
}
|
||
|
|
||
|
#canvasHolder{
|
||
|
width: var(--width);
|
||
|
height: var(--height);
|
||
|
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
left: 50%;
|
||
|
transform: translate(-50%, -50%);
|
||
|
}
|
||
|
|
||
|
#canvasHolder canvas{
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
bottom: 0;
|
||
|
border-radius: inherit;
|
||
|
}
|
||
|
|
||
|
#loader{
|
||
|
width: 70px;
|
||
|
height: 50px;
|
||
|
margin-top: 10px;
|
||
|
display: inline-block;
|
||
|
vertical-align: middle;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
/**
|
||
|
* While playing
|
||
|
*/
|
||
|
|
||
|
#game-controls{
|
||
|
position: relative;
|
||
|
display: none;
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
text-align: center;
|
||
|
}
|
||
|
#toggle-play{
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
left: 50%;
|
||
|
transform: translate(-50%, -50%);
|
||
|
box-sizing: border-box;
|
||
|
background: transparent;
|
||
|
border: 0;
|
||
|
width: 0;
|
||
|
height: 100px;
|
||
|
border-color: transparent transparent transparent #000;
|
||
|
transition: 100ms all ease;
|
||
|
border-style: solid;
|
||
|
border-width: 50px 0px 50px 100px;
|
||
|
filter: drop-shadow(5px 5px 5px #000);
|
||
|
}
|
||
|
#toggle-play.paused{
|
||
|
border-style: double;
|
||
|
border-width: 0px 0px 0px 100px;
|
||
|
}
|
||
|
#toggle-play:hover{
|
||
|
border-color: transparent transparent transparent #111;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
/**
|
||
|
* Interface with all it's controls
|
||
|
*/
|
||
|
#interface{
|
||
|
float: left;
|
||
|
background-color: var(--interface-background);
|
||
|
width: calc(50% - var(--width) / 2 - 2 * 10px - 4px);
|
||
|
height: calc(var(--height) - 10px);
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
/**
|
||
|
* Setup controls for creating games
|
||
|
*/
|
||
|
|
||
|
#setup-controls{
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
flex-wrap: wrap;
|
||
|
justify-content: flex-start;
|
||
|
align-items: center;
|
||
|
}
|
||
|
#setup-controls fieldset{
|
||
|
margin: 10px;
|
||
|
background-color: var(--fieldset-background);
|
||
|
max-width: var(--fieldset-width);
|
||
|
}
|
||
|
#setup-controls > fieldset{
|
||
|
margin: 30px;
|
||
|
}
|
||
|
#game-properties{
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
flex-wrap: nowrap;
|
||
|
justify-content: flex-end;
|
||
|
align-items: center;
|
||
|
max-width: calc(var(--width) - 250px);
|
||
|
}
|
||
|
.error-label{
|
||
|
color: var(--error-label-font);
|
||
|
font-size: 13px;
|
||
|
font-weight: 100;
|
||
|
}
|
||
|
.border-node{
|
||
|
border: 2px solid #000;
|
||
|
border-radius: 10px;
|
||
|
}
|
||
|
input, select{
|
||
|
background-color: var(--input-background);
|
||
|
max-width: 200px;
|
||
|
}
|
||
|
select{
|
||
|
padding: 0px 20px 0px 0px;
|
||
|
font-size: 16px;
|
||
|
border: 1px solid #ccc;
|
||
|
height: 34px;
|
||
|
-webkit-appearance: none;
|
||
|
-moz-appearance: none;
|
||
|
appearance: none;
|
||
|
background: url(data/images/arrow.png) 100% / 50% no-repeat var(--input-background);
|
||
|
}
|
||
|
.setup{
|
||
|
margin: 10px;
|
||
|
background-color: var(--button-background);
|
||
|
}
|
||
|
.setup:hover, select:hover, input[type=text]:focus{
|
||
|
filter: brightness(80%);
|
||
|
}
|
||
|
.setup:disabled:hover{
|
||
|
filter: brightness(40%);
|
||
|
cursor: default;
|
||
|
}
|
||
|
.setup:disabled{
|
||
|
filter: brightness(40%);
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
/**
|
||
|
* Lobby
|
||
|
*/
|
||
|
|
||
|
#lobby-members{
|
||
|
background-color: var(--fieldset-background);
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
flex-wrap: wrap;
|
||
|
justify-content: center;
|
||
|
}
|
||
|
.lobby-member{
|
||
|
margin: 4px;
|
||
|
padding: 5px;
|
||
|
background-color: var(--fieldset-background);
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
.lobby-member:hover{
|
||
|
filter: brightness(70%);
|
||
|
}
|
||
|
#lobby-leader{
|
||
|
background-color: var(--lobby-leader-background);
|
||
|
}
|
||
|
#lobby > span{
|
||
|
margin: 5px;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
/**
|
||
|
* Chat
|
||
|
*/
|
||
|
|
||
|
#chat{
|
||
|
float: right;
|
||
|
background-color: var(--interface-background);
|
||
|
width: calc(50vw - var(--width) / 2 - 2 * 10px - 4px);
|
||
|
height: calc(var(--height) - 10px);
|
||
|
}
|
||
|
#chat-content{
|
||
|
border-radius: inherit;
|
||
|
height: calc(100% - 32px);
|
||
|
background-color: var(--fieldset-background);
|
||
|
width: 100%;
|
||
|
overflow-y: auto;
|
||
|
}
|
||
|
#chat-input{
|
||
|
width: 100%;
|
||
|
}
|
||
|
#chat-input > input[type="text"]{
|
||
|
max-width: 100%;
|
||
|
height: 100%;
|
||
|
width: calc(100% - 100px - 10px);
|
||
|
border-radius: 10px;
|
||
|
border: 1px solid #000;
|
||
|
}
|
||
|
#chat-input > button{
|
||
|
width: 100px;
|
||
|
background-color: var(--button-background);
|
||
|
border-radius: 10px;
|
||
|
border: 1px solid #000;
|
||
|
}
|
||
|
.message > span{
|
||
|
word-wrap: break-word;
|
||
|
font-size: 12px;
|
||
|
padding: 5px;
|
||
|
}
|
||
|
.message[name="0"]{
|
||
|
background-color: var(--chat-first-background)
|
||
|
}
|
||
|
.message[name="1"]{
|
||
|
background-color: var(--chat-second-background)
|
||
|
}
|
||
|
.message > span:first-child{
|
||
|
color: var(--chat-writer-color)
|
||
|
}
|
||
|
|