Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @import url('https://fonts.googleapis.com/css?family=Signika');
- @import url('https://fonts.googleapis.com/css?family=Germania+One'); /*Victory / Defeat screen*/
- body{
- background: #240000 url('../media/bg-play.png') no-repeat center fixed;
- background-size: 100%;
- font-family: 'Signika', sans-serif;
- }
- header{
- height: auto;
- }
- #logo{
- height: 137px;
- background: url("../media/stratego.png") no-repeat 0 -15px;
- background-size: 100%;
- margin-left: auto;
- margin-right: auto;
- width: 600px;
- }
- #logo + h1{
- border-top: 1px solid gold;
- border-bottom: 1px solid gold;
- text-decoration:none;
- text-align: center;
- color:white;
- font-size:1.2rem;
- height: 79px;
- }
- nav {
- top:0;
- position:sticky;
- width:100%;
- height: auto;
- background-color:#260000b0;
- border-top: 1px solid gold;
- border-bottom: 1px solid gold;
- }
- nav ul, #resultScreen ul{
- margin:auto;
- display:flex;
- flex-direction:row;
- justify-content: center;
- }
- nav ul{
- width:50%;
- }
- nav ul li{
- display:inline;
- padding: 30px 10% 30px 10%;
- }
- nav ul li a, #resultScreen ul li a{
- text-decoration:none;
- position:center;
- color:gold;
- font-size:1.2rem;
- }
- nav ul li:hover, #resultScreen ul li:hover{
- background-color: gold;
- }
- nav ul li:hover a,#resultScreen ul li:hover a{
- color:#260000b0;
- }
- h1{
- color: white;
- font-size: 3rem;
- }
- .selected a{
- color:gold;
- border-bottom: 1px solid gold;
- }
- .hidden{
- display:none;
- }
- main #spelen{
- width:400px;
- padding-top:9%;
- height: auto;
- margin-left:auto;
- margin-right:auto;
- }
- main #spelregels{
- width: 1050px;
- margin-right: auto;
- margin-left: auto;
- background-color: transparent;
- opacity: 0.7;
- color: white;
- }
- main #spelregels h2{
- font-size: 2rem;
- padding: 3% 0 3% 3%;
- }
- main #spelregels h3{
- font-size: 1.2rem;
- padding: 2% 0 1% 1%;
- }
- #name{
- padding: 10px 0 10px 10px;
- margin-bottom:40px;
- border-radius:20px;
- width: 100%;
- background-color: transparent;
- color: gold;
- text-align: center;
- font-weight: bold;
- border: 1px solid gold;
- }
- main input::placeholder {
- color: gold;
- }
- #play{
- border: none;
- width: 100%;
- min-height: 50px;
- border-radius: 20px;
- color: #781113;
- background-color: gold;
- font-size: 1.5rem;
- font-weight: bold;
- }
- #randomTip{
- margin-top: 30px;
- width: 600px;
- height: 98px;
- margin-left: auto;
- margin-right: auto;
- background-color: gold;
- border-radius: 5px;
- }
- #randomTip img{
- margin: 1% 0 0 1%;
- width: 10%;
- height: auto;
- border: 1px solid black;
- float: left;
- }
- #randomTip p{
- margin: 3% 0 0 3%;
- width: 85%;
- height: auto;
- float: right;
- }
- #loading {
- border: 16px solid transparent;
- border-left: gold;
- border-radius: 50%;
- border-top: 16px solid gold;
- width: 100px;
- height: 100px;
- margin-left: auto;
- margin-right: auto;
- margin-top: 15%;
- animation: spin 2s linear infinite;
- }
- #waiting{
- bottom: 0;
- position: absolute;
- width: 100%;
- text-align: center;
- color: gold;
- font-size: 2rem;
- padding-bottom: 20px;
- }
- @keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
- }
- .play {
- width: 100%;
- color: #260000b0;
- height:50px;
- background-color: gold;
- border: none;
- border-radius: 45px;
- box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
- transition: all 0.3s ease 0s;
- }
- .play:hover {
- background-color: transparent;
- box-shadow: 0 15px 20px gold; /*rgba(46, 229, 157, 0.4);*/
- border:1px solid gold;
- color: gold;
- transform: translateY(-7px);
- }
- .hidden{
- display: none;
- }
- /********************/
- /* SETUP BOARD PAGE */
- /********************/
- #boardsetupmain{
- margin: 1% 0 0 1%;
- width: 80%;
- display: grid;
- grid-template-columns: 30% 70%;
- grid-template-rows: auto 50px;
- grid-gap: 10%;
- grid-template-areas: "pc hb"
- "bb rb";
- }
- #pieces{
- width: auto;
- height: auto;
- grid-area: pc;
- display: grid;
- grid-template-columns: repeat(5, auto);
- grid-template-rows: auto;
- grid-gap: 1px;
- }
- #pieces div{
- width: 100%;
- height: 100%;
- }
- #pieces img {
- width: 100%;
- height: 100%;
- background-color: gold;
- }
- #halfboard{
- grid-area: hb;
- background-color: transparent;
- display: grid;
- grid-template-columns: repeat(10, auto);
- grid-template-rows: 1fr 1fr 1fr 1fr 1fr 2fr;
- grid-gap: 1px;
- }
- #halfboard img {
- width: 100%;
- height: 100%;
- }
- #boardbuttons{
- grid-area: bb;
- }
- #readybutton{
- grid-area: rb;
- }
- /*************/
- /* GAME PAGE */
- /*************/
- #gamegridcontainer{
- width: 80%;
- display: grid;
- grid-template-columns: 10% 80% 10%;
- grid-template-rows: auto 10% 5%;
- grid-gap: 10%;
- grid-template-areas: "pc fb pl"
- ". pi ."
- "gb";
- }
- #capturedpieces{
- grid-area: cp;
- }
- #fullboard{
- grid-area: fb;
- }
- #lostpieces{
- grid-area: lp;
- }
- #pieceinfo{
- grid-area: pi;
- }
- #gamebuttons{
- grid-area: gb;
- }
- .gamemodebuttons{
- margin-left:auto;
- margin-right:auto;
- width:50%;
- margin-top:8%;
- display:flex;
- flex-direction: column;
- justify-content: center;
- }
- .gamemodebuttons li{
- height:50px;
- margin-bottom:20px;
- }
- .gamemodebuttons li:hover a{
- color:gold;
- }
- .gamemodebuttons li h2{
- text-align:center;
- }
- .gamemodebuttons li h2 a
- {
- line-height:50px;
- text-decoration: none;
- color: #260000b0;
- }
- /*****************/
- /* RESULT SCREEN */
- /*****************/
- #resultScreen{
- width: 500px;
- height: 400px;
- margin: 10% auto 0 auto;
- background-color: transparent;
- border: 1px solid gold;
- opacity: 0.8;
- text-align: center;
- padding-top: 10px;
- color: white;
- }
- #resultScreen h1{
- font-family: 'Germania One', cursive;
- font-size: 2rem;
- }
- #resultScreen h1 + p{
- margin-top: 65px;
- }
- #resultScreen p + p{
- padding-top: 15px;
- }
- #resultScreen p{
- border-bottom: 1px solid gold;
- width: 320px;
- margin-left: auto;
- margin-right: auto;
- }
- #resultScreen ul{
- margin-top: 20px;
- }
- #resultScreen ul li{
- display: inline-block;
- padding: 30px 10% 30px 10%;
- }
- #grid-container {
- margin-top: 20px;
- height: 25%;
- width: 320px;
- margin-right: auto;
- margin-left: auto;
- display: grid;
- grid-template-columns: auto auto auto;
- padding: 10px;
- }
- section{
- color:white;
- }
- #back h2{
- background-color:gold;
- }
- #back a{
- color: #260000b0;
- text-decoration:none;
- float:right;
- margin-right:50px;
- margin-bottom:50px;
- position:sticky;
- font-size:2rem;
- background-color:gold;
- padding:10px;
- border-radius:25px;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement