style.scss 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847
  1. $dark-purple: #423443;
  2. $blue: #2eafc2;
  3. $red: #d12521;
  4. $grey: #dad7d2;
  5. $dark-grey: #261e26;
  6. @mixin all-transition{
  7. -moz-transition: all 0.2s ease-in-out;
  8. -webkit-transition: all 0.2s ease-in-out;
  9. -o-transition: all 0.2s ease-in-out;
  10. -ms-transition: all 0.2s ease-in-out;
  11. transition: all 0.2s ease-in-out;
  12. }
  13. * {
  14. margin: 0;
  15. padding: 0;
  16. -moz-box-sizing: border-box;
  17. -webkit-box-sizing: border-box;
  18. box-sizing: border-box;
  19. }
  20. html { font-size: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
  21. ::-moz-selection { background: darken($dark-purple, 10%); color: #fefefe; text-shadow: none; }
  22. ::selection { background: darken($dark-purple, 10%); color: #fefefe; text-shadow: none; }
  23. .clearfix:before,
  24. .clearfix:after {
  25. content: " ";
  26. display: table;
  27. }
  28. .clearfix:after {
  29. clear: both;
  30. }
  31. .clearfix {
  32. zoom:1;
  33. }
  34. footer, header, section {
  35. display: block;
  36. }
  37. body, html {
  38. color: #424242;
  39. font-family: 'Open Sans', sans-serif;
  40. background: #fefefe;
  41. font-size: 16px;
  42. line-height: 1.5;
  43. font-weight: 400;
  44. }
  45. a {
  46. font-size: 1rem;
  47. color: darken($blue, 5%);
  48. text-decoration: underline; }
  49. a:hover {
  50. color: $blue;
  51. text-decoration: none;
  52. @include all-transition
  53. }
  54. a:focus{
  55. outline: none;
  56. }
  57. p {
  58. text-align: left;
  59. margin-bottom: 1em;
  60. font-size: 1rem;
  61. }
  62. h1.knight {
  63. height: 122px;
  64. width: 122px;
  65. background: url('../images/knight.png') no-repeat;
  66. margin: 2em auto 0.5em auto;
  67. }
  68. h2 {
  69. font-family: 'Cherry Swash';
  70. font-weight: 400;
  71. font-size: 2rem;
  72. text-align: center;
  73. color: $dark-purple;
  74. margin-bottom: 0.5em;
  75. }
  76. h3 {
  77. font-weight: 600;
  78. font-size: 1.5rem;
  79. margin: 1em 0 0.5em 0;
  80. color: lighten($dark-purple, 5%);
  81. }
  82. .alpha {
  83. font-size: 1.125rem;
  84. }
  85. .center {
  86. text-align: center !important;
  87. }
  88. .margin-fifty{
  89. margin: 50px 0;
  90. }
  91. .last-origin{
  92. background: lighten($blue, 25%) !important;
  93. }
  94. .last-target{
  95. background: lighten($blue, 20%) !important;
  96. }
  97. #modal-mask, #offer-mask{
  98. display: none;
  99. cursor: pointer;
  100. position: fixed;
  101. top: 0;
  102. height: 100%;
  103. width: 100%;
  104. background: #444;
  105. background: rgba(0, 0, 0, .7);
  106. z-index: 10;
  107. > p{
  108. color: #eee;
  109. margin: 2em;
  110. strong{
  111. color: #fff;
  112. }
  113. }
  114. }
  115. #modal-window, #offer-window{
  116. width: 420px;
  117. height: 180px;
  118. position: fixed;
  119. background: #fff;
  120. top: 50%;
  121. left: 50%;
  122. margin-left: -210px;
  123. margin-top: -90px;
  124. border: 8px solid lighten($dark-purple, 10%);
  125. box-shadow: 0 10px 30px #333;
  126. cursor: auto;
  127. z-index: 15;
  128. p{
  129. text-align: center;
  130. padding: 1.5em;
  131. }
  132. .button:active{
  133. top: auto;
  134. bottom: calc(1em + 1px);
  135. }
  136. }
  137. #modal-window{
  138. .button{
  139. position: absolute;
  140. left: 50%;
  141. bottom: 1em;
  142. margin-left: -60px;
  143. }
  144. }
  145. #offer-window{
  146. .button{
  147. position: absolute;
  148. bottom: 1em;
  149. }
  150. #offer-accept{
  151. right: 4em;
  152. }
  153. #offer-decline{
  154. left: 4em;
  155. }
  156. }
  157. .chat{
  158. text-decoration: none;
  159. color: darken($blue, 10%);
  160. margin-right: 1em;
  161. line-height: 50px;
  162. float: right !important;
  163. cursor: pointer;
  164. font-weight: 600;
  165. &:hover{
  166. color: darken($blue, 5%);
  167. .new-message{
  168. color: $red;
  169. }
  170. }
  171. img{
  172. vertical-align: middle;
  173. }
  174. .new-message{
  175. color: $red;
  176. padding-right: 1em;
  177. }
  178. }
  179. header {
  180. margin: 0 auto;
  181. max-width: 800px;
  182. width: 100%;
  183. height: 50px;
  184. }
  185. #clock{
  186. width: 148px;
  187. height: 50px;
  188. position: absolute;
  189. text-align: center;
  190. border: 4px solid lighten($grey, 5%);
  191. li{
  192. width: 70px;
  193. display: inline-block;
  194. line-height: 42px;
  195. opacity: .9;
  196. position: absolute;
  197. }
  198. li.white{
  199. left: 0;
  200. color: #424242;
  201. background: #fff;
  202. }
  203. li.black{
  204. right: 0;
  205. color: #fff;
  206. background: #424242;
  207. }
  208. li.ticking{
  209. z-index: 1;
  210. font-size: 1.125rem;
  211. opacity: 1;
  212. box-shadow: 0 0 5px lighten($grey, 5%);
  213. -webkit-transform: scale(1.2);
  214. -moz-transform: scale(1.2);
  215. -o-transform: scale(1.2);
  216. -ms-transform: scale(1.2);
  217. transform: scale(1.2);
  218. @include all-transition;
  219. }
  220. }
  221. span#game-type{
  222. position: absolute;
  223. line-height: 50px;
  224. margin-left: 175px;
  225. opacity: 0.9;
  226. }
  227. #container_wrapper {
  228. max-width: 960px;
  229. width: 100%;
  230. height: auto;
  231. padding: 1em 2em;
  232. margin: 0 auto;
  233. clear: both;
  234. }
  235. #container {
  236. width: 100%;
  237. min-height: 600px;
  238. margin: 0px 0px 20px 0px;
  239. float: left;
  240. }
  241. #form{
  242. width: 100%;
  243. height: 200px;
  244. margin: 0 auto;
  245. fieldset{
  246. border: 0;
  247. text-align: right;
  248. margin-bottom: 1em;
  249. width: 80%;
  250. input{
  251. margin-left: 1em;
  252. width: 100px;
  253. outline: none;
  254. height: 40px;
  255. line-height: 30px;
  256. padding-left: 1em;
  257. font-size: 1.125rem;
  258. color: #424242;
  259. border: 2px solid #2b222c;
  260. border-left: 4px solid #2eafc2;
  261. }
  262. label{
  263. position: relative;
  264. &:before{
  265. position: absolute;
  266. content: 'Up to 50';
  267. top: 0;
  268. right: 2em;
  269. margin-top: -2.5em;
  270. font-size: 0.75rem;
  271. }
  272. }
  273. }
  274. }
  275. input, button{
  276. font-family: 'Open Sans';
  277. }
  278. input.game_link {
  279. width: 80%;
  280. height: 50px;
  281. line-height: 50px;
  282. font-size: 1.125rem;
  283. color: #fff;
  284. border: 0;
  285. border-bottom: 2px solid darken($dark-purple, 8%);
  286. border-left: 4px solid $blue;
  287. text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  288. background: $dark-purple;
  289. padding: 0 1em;
  290. float: left;
  291. border-radius: 2px;
  292. box-shadow: inset 0 -2px darken($dark-purple, 8%);
  293. }
  294. .game_link:hover {
  295. background: lighten($dark-purple, 3%);
  296. border-bottom: 2px solid darken($dark-purple, 3%);;
  297. box-shadow: inset 0 -2px darken($dark-purple, 3%);
  298. @include all-transition;
  299. }
  300. .game_link:focus {
  301. color: #eee;
  302. }
  303. .button {
  304. width: 15%;
  305. height: 50px;
  306. display: block;
  307. font-size: 1.125rem;
  308. border-radius: 2px;
  309. border: 0;
  310. border-bottom: 2px solid darken($blue, 5%);
  311. text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  312. background: $blue;
  313. color: white;
  314. cursor: pointer;
  315. float: right;
  316. box-shadow: inset 0 -2px darken($blue, 5%);
  317. position: relative;
  318. }
  319. .button:hover{
  320. background: lighten($blue, 5%);
  321. border-bottom: 2px solid darken($blue, 2%);
  322. box-shadow: inset 0 -2px darken($blue, 2%);
  323. @include all-transition;
  324. }
  325. .button:active{
  326. top: 1px;
  327. }
  328. a.button{
  329. width: 120px;
  330. line-height: 46px;
  331. text-align: center;
  332. text-decoration: none;
  333. }
  334. a.button:hover{
  335. color: white;
  336. }
  337. .resign, .rematch {
  338. margin-right: 10px;
  339. }
  340. .button--red{
  341. background: $red;
  342. border-color: darken($red, 5%);
  343. box-shadow: inset 0 -2px darken($red, 5%);
  344. margin-right: 10px;
  345. &:hover{
  346. background: lighten($red, 5%);
  347. border-bottom: 2px solid darken($red, 2%);
  348. box-shadow: inset 0 -2px darken($red, 2%);
  349. @include all-transition;
  350. }
  351. }
  352. .rematch{
  353. display: none;
  354. }
  355. p#waiting {
  356. font-family: 'Cherry Swash';
  357. font-size: 1.275rem;
  358. color: darken($red, 5%);
  359. width: 100%;
  360. text-align: center;
  361. margin: 15px 0px 0px 0px;
  362. display: none;
  363. float: left;
  364. }
  365. footer {
  366. font-size: 1rem;
  367. width: 100%;
  368. line-height: 2em;
  369. text-align: center;
  370. background: $grey;
  371. border-bottom: 4px solid darken($grey, 10%);
  372. box-shadow: inset 0 -4px darken($grey, 10%);
  373. a{
  374. color: darken($grey, 45%);
  375. }
  376. a:hover{
  377. color: darken($grey, 40%);
  378. }
  379. }
  380. #footer{
  381. margin: 0 auto;
  382. max-width: 960px;
  383. padding: 3em 2em 1em 2em;
  384. }
  385. #sounds_label {
  386. width: 800px;
  387. height: 30px;
  388. line-height: 30px;
  389. display: block;
  390. margin: 0px 0px 5px 0px;
  391. float: left;
  392. }
  393. /* Chat */
  394. #chat-wrapper{
  395. display: none;
  396. position: absolute;
  397. width: 270px;
  398. right: 10px;
  399. top: 99px;
  400. border: 4px solid #fff;
  401. background: lighten($grey, 5%);
  402. h4{
  403. font-family: 'Cherry Swash';
  404. font-size: 1.225rem;
  405. height: 3em;
  406. line-height: 3em;
  407. margin: 5px 5%;
  408. text-align: center;
  409. color: $dark-purple;
  410. }
  411. a.close{
  412. position: absolute;
  413. top: 0;
  414. right: 0;
  415. background: $dark-purple;
  416. color: #fff;
  417. font-size: 1.125rem;
  418. padding: 0 7px;
  419. text-decoration: none;
  420. font-weight: 600;
  421. margin: 1em 5%;
  422. cursor: pointer;
  423. &:hover{
  424. text-decoration: none;
  425. background: lighten($dark-purple, 5%);
  426. }
  427. }
  428. > span{
  429. font-size: .9rem;
  430. margin: 5px 5%;
  431. display: block;
  432. }
  433. }
  434. ul#chat{
  435. position: relative;
  436. top: 0;
  437. max-height: 300px;
  438. width: 100%;
  439. overflow-y: scroll;
  440. list-style-type: none;
  441. li{
  442. font-size: .9rem;
  443. padding: 10px;
  444. margin: 5px auto;
  445. width: 90%;
  446. border-radius: 5px;
  447. position: relative;
  448. &:before{
  449. position: absolute;
  450. content: '';
  451. top: 10px;
  452. }
  453. }
  454. li.black{
  455. background: #424242;
  456. color: #fff;
  457. }
  458. li.white{
  459. background: #fff;
  460. color: #444;
  461. }
  462. li.left:before{
  463. left: 0;
  464. margin-left: -7px;
  465. border-bottom: 7px solid transparent;
  466. border-top: 7px solid transparent;
  467. }
  468. li.black.left:before{
  469. border-right: 7px solid #424242;
  470. }
  471. li.white.left:before{
  472. border-right: 7px solid #fff;
  473. }
  474. li.right:before{
  475. right: 0;
  476. margin-right: -7px;
  477. border-bottom: 7px solid transparent;
  478. border-top: 7px solid transparent;
  479. }
  480. li.black.right:before{
  481. border-left: 7px solid #424242;
  482. }
  483. li.white.right:before{
  484. border-left: 7px solid #fff;
  485. }
  486. }
  487. #sendMessage{
  488. input{
  489. width: 100%;
  490. padding: 15px 10px;
  491. border: none;
  492. outline: none;
  493. font-size: .9rem;
  494. border: 4px solid lighten($grey, 5%);
  495. }
  496. input.black{
  497. background: #444;
  498. color: #fff;
  499. }
  500. input.white{
  501. background: #fff;
  502. color: #444;
  503. }
  504. }
  505. /* Captured pieces */
  506. #captured-pieces{
  507. position: absolute;
  508. width: 100px;
  509. margin-left: -100px;
  510. font-size: 2rem;
  511. line-height: 2rem;
  512. height: 517px;
  513. overflow-y: auto;
  514. ul{
  515. width: 50px;
  516. min-height: 5px;
  517. float: left;
  518. display: block;
  519. text-align: center;
  520. li{
  521. list-style-type: none;
  522. }
  523. }
  524. }
  525. /* Chessboard */
  526. #board_moves_wrapper {
  527. width: 100%;
  528. max-width: 800px;
  529. min-height: 600px;
  530. margin: 0 auto;
  531. }
  532. table#moves {
  533. overflow-x: hidden;
  534. overflow-y: auto;
  535. width: 270px;
  536. height: 518px;
  537. background: lighten($grey, 5%);
  538. box-shadow: inset 0 -4px $grey;
  539. margin-left: 10px;
  540. border-radius: 2px;
  541. border-bottom: 4px solid $grey;
  542. display: block;
  543. float: left;
  544. }
  545. #moves thead {
  546. font-family: 'Cherry Swash';
  547. width: 270px;
  548. height: 3em;
  549. line-height: 3em;
  550. font-size: 1.225rem;
  551. color: $dark-purple;
  552. float: left;
  553. text-align: center;
  554. }
  555. #moves thead th, #moves thead tr {
  556. width: 100%;
  557. text-align: center;
  558. float: left;
  559. }
  560. #moves tbody tr {
  561. width: 270px;
  562. float: left;
  563. }
  564. #moves tbody tr td {
  565. width: 105px;
  566. text-align: left;
  567. line-height: 20px;
  568. margin: 0 15px;
  569. float: left;
  570. }
  571. #board_wrapper {
  572. float: left;
  573. }
  574. .chess_board {
  575. border: 8px solid lighten($dark-purple, 10%);
  576. border-radius: 2px;
  577. width: 500px;
  578. height: 500px;
  579. float: left;
  580. tr {
  581. width: 500px;
  582. height: 62.5px;
  583. float: left;
  584. display: block;
  585. td {
  586. width: 62.5px;
  587. height: 62.5px;
  588. line-height: 62.5px;
  589. text-align: center;
  590. background: #fefefe;
  591. display: block;
  592. float: left;
  593. &.moving{
  594. background: lighten($red, 30%) !important;
  595. }
  596. a {
  597. width: 62.5px;
  598. height: 62.5px;
  599. font-size: 3.5rem;
  600. color: #424242;
  601. text-decoration: none;
  602. display: block;
  603. cursor: pointer;
  604. }
  605. }
  606. }
  607. }
  608. .chess_board tr:nth-child(odd) td:nth-child(even),
  609. .chess_board tr:nth-child(even) td:nth-child(odd) {
  610. background: $grey; }
  611. span.feedback {
  612. color: #424242;
  613. line-height: 28px;
  614. text-indent: 28px;
  615. margin-top: 1em;
  616. display: block;
  617. clear: left;
  618. float: left;
  619. }
  620. .feedback-status {
  621. font-weight: bold;
  622. }
  623. span.whitefeedback {
  624. background: url('../images/whiteking.png') 0% 50% no-repeat;
  625. }
  626. span.blackfeedback {
  627. background: url('../images/blackking.png') 0% 50% no-repeat;
  628. }
  629. span.promotion{
  630. line-height: 28px;
  631. text-indent: 28px;
  632. margin-top: 1em;
  633. display: block;
  634. float: right;
  635. }
  636. .chess_board td.selected {
  637. background: lighten($red, 30%) !important;
  638. }
  639. /* Media queries */
  640. @media only screen and (min-width: 760px) and (max-width: 900px) {
  641. header, #board_moves_wrapper{
  642. max-width: 760px;
  643. }
  644. #sounds_label{
  645. max-width: 530px;
  646. }
  647. #container_wrapper{
  648. max-width: 900px;
  649. padding: 1em 10px;
  650. }
  651. table#moves{
  652. margin-left: 0;
  653. float: right;
  654. height: 516px;
  655. }
  656. table#moves, #moves thead, #moves tbody tr{
  657. width: 200px;
  658. }
  659. #moves tbody tr td {
  660. width: 90px;
  661. margin: 0 5px;
  662. }
  663. }
  664. @media only screen and (min-width: 1400px) {
  665. #chat-wrapper{
  666. display: block;
  667. }
  668. }
  669. @media only screen and (max-width: 999px) {
  670. #captured-pieces{
  671. display: none;
  672. }
  673. }
  674. @media only screen and (min-width: 530px) and (max-width: 759px) {
  675. header, #board_moves_wrapper, #sounds_label{
  676. max-width: 530px;
  677. }
  678. }
  679. @media only screen and (max-width: 759px){
  680. html{
  681. font-size: 14px;
  682. }
  683. #form{
  684. fieldset{
  685. width: 100%;
  686. text-align: center;
  687. label{
  688. display: block;
  689. line-height: 45px;
  690. padding-left: 0;
  691. &:before {
  692. margin-left: -7em;
  693. margin-top: 0;
  694. right: auto;
  695. }
  696. }
  697. }
  698. }
  699. span#game-type{ display: none; }
  700. #container_wrapper{
  701. max-width: 759px;
  702. padding: 1em 5px;
  703. }
  704. span.feedback{
  705. float: right;
  706. clear: none;
  707. }
  708. table#moves{
  709. margin-left: 0;
  710. margin-top: 0.5em;
  711. height: 258px;
  712. }
  713. }
  714. @media only screen and (max-width: 529px){
  715. header, #board_moves_wrapper, #sounds_label{
  716. max-width: 470px;
  717. }
  718. input.game_link{
  719. font-size: 1rem;
  720. }
  721. ul#clock{
  722. width: 118px;
  723. li{
  724. width: 55px;
  725. }
  726. }
  727. #container_wrapper{
  728. max-width: 529px;
  729. padding: 1em 5px;
  730. }
  731. .chess_board {
  732. border: 4px solid lighten($dark-purple, 10%);
  733. width: 456px;
  734. height: 456px;
  735. tr {
  736. width: 456px;
  737. height: 57px;
  738. td {
  739. width: 57px;
  740. height: 57px;
  741. line-height: 57px;
  742. a {
  743. width: 57px;
  744. height: 57px;
  745. font-size: 3.5rem;
  746. }
  747. }
  748. }
  749. }
  750. }