From 0bf97a789919024df8641535122551d8e1c8a970 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yaroslav=20De=20La=20Pe=C3=B1a=20Smirnov?= Date: Tue, 12 Dec 2017 02:40:53 +0300 Subject: Added function to check if the player has run out of moves --- client/css/style.css | 24 ++++++++++++ client/css/styleBoard.css | 95 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 119 insertions(+) create mode 100644 client/css/styleBoard.css (limited to 'client/css') diff --git a/client/css/style.css b/client/css/style.css index 610dc30..6cbfa54 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css?family=Permanent+Marker'); + @font-face { font-family: "shashki"; src:url("/static/fonts/shashki.eot"); @@ -14,6 +16,28 @@ border-radius: 0 !important; } +@keyframes coloranim{ + 0% {color: #ffffff;} + 20% {color: #1678c4;} + 40% {color: #13c055;} + 60% {color: #bea516;} + 80% {color: #cc1313;} + 100% {color: #ffffff;} +} + +.navbar-brand{ + font-family: "Permanent Marker", cursive; + font-size: 28px; + color: #fff !important; +} + +.navbar-brand:hover{ + animation-name: coloranim; + animation-duration: 8s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + .btn{ margin-top: 10px; } diff --git a/client/css/styleBoard.css b/client/css/styleBoard.css new file mode 100644 index 0000000..2cdbd90 --- /dev/null +++ b/client/css/styleBoard.css @@ -0,0 +1,95 @@ +@font-face { + font-family: "shashki"; + src:url("../fonts/shashki.eot"); + src:url("../fonts/shashki.eot?#iefix") format("embedded-opentype"), + url("../fonts/shashki.woff") format("woff"), + url("../fonts/shashki.ttf") format("truetype"), + url("../fonts/shashki.svg#shashki") format("svg"); + font-weight: normal; + font-style: normal; + +} + +.navbar, .nav-container{ + border-radius: 0 !important; +} + +#board{ + margin: 0 auto; + border: 3px solid #000; +} + +#board .square{ + width: 48px; + height: 48px; + font-size: 42px; + line-height: 48px; + text-align: center; + vertical-align: middle; +} + +#b1, #d1, #f1, #h1, #a2, #c2, #e2, #g2, #b3, #d3, #f3, #h3, #a4, #c4, #e4, #g4, +#b5, #d5, #f5, #h5, #a6, #c6, #e6, #g6, #b7, #d7, #f7, #h7, #a8, #c8, #e8, #g8 { + background:#FFECCA; +} + +#a1, #c1, #e1, #g1, #b2, #d2, #f2, #h2, #a3, #c3, #e3, #g3, #b4, #d4, #f4, #h4, +#a5, #c5, #e5, #g5, #b6, #d6, #f6, #h6, #a7, #c7, #e7, #g7, #b8, #d8, #f8, #h8 { + background:#684B33; +} + +.piece:before{ + font-family: "shashki" !important; + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none !important; + speak: none; + font-size: 42px; + line-height: 42px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-align: center; + vertical-align: middle; +} + + +.piece.white{ + color: #992E2E; +} + +.piece.black{ + color: #000; +} + +.white.pawn:before { + content: "\63"; +} + +.white.dame:before { + content: "\64"; +} + +.black.pawn:before { + content: "\63"; +} + +.black.dame:before { + content: "\64"; +} + +@keyframes move-anim{ + 0% {background-color: #FFECCA;} + 50% {background-color: #adffad;} + 100% {background-color: #FFECCA;} +} + +.square.selected{ + background-color: #adffad !important; +} + +.square.move{ + animation-name: move-anim; + animation-duration: 1s; + animation-iteration-count: infinite; +} \ No newline at end of file -- cgit v1.2.3