aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/css
diff options
context:
space:
mode:
Diffstat (limited to 'client/css')
-rw-r--r--client/css/style.css24
-rw-r--r--client/css/styleBoard.css95
2 files changed, 119 insertions, 0 deletions
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