css/go.css

   1 /*
   2  * Copyright (c) 2012, Intel Corporation.
   3  *
   4  * This program is licensed under the terms and conditions of the
   5  * Apache License, version 2.0.  The full text of the Apache License is at
   6  * http://www.apache.org/licenses/LICENSE-2.0
   7  *
   8  */
   9
  10 @CHARSET "UTF-8";
  11 a{
  12         outline:none;
  13         text-decoration:none;
  14         cursor:hand;
  15         cursor:pointer;
  16 }
  17
  18 @font-face{
  19         font-family: default_font;
  20         src: url('../fonts/Yesteryear-Regular.ttf'),
  21              url('../fonts/wqy-microhei.ttc');
  22 }
  23
  24 @font-face{
  25         font-family: sans_font;
  26         src: url('../fonts/OpenSans-Bold.ttf');
  27 }
  28
  29 .display_none {
  30         display:none;
  31         z-index:-1;
  32 }
  33
  34 body {
  35     margin: 0px;
  36     -webkit-user-select: none;
  37     background-color: "white";
  38     box-shadow: 5px 5px 20px black;
  39     top: 50%;
  40     left: 50%;
  41     -webkit-transform: translate(-50%, -50%);
  42     position: absolute;
  43     width: 1024px;
  44     height: 600px;
  45     -webkit-box-align: center;
  46     -webkit-box-pack: center;
  47     -webkit-box-orient: vertical;
  48     display: -webkit-box;
  49 }
  50
  51 .world {
  52     position:absolute;
  53     background:url('../images/GO_GridWoodBG_022312_a.png') no-repeat;
  54     width: 1024px;
  55     height: 600px;
  56 }
  57
  58 /* 800 x 480 */
  59 @media (orientation: landscape) {
  60   body { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(0.78125, 0.8); }
  61 }
  62 /* 1024 x 600 */
  63 @media (min-width: 1024px) and (min-height: 600px) and (orientation: landscape) {
  64   body { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); }
  65 }
  66 /* 1280 x 720 */
  67 @media (min-width: 1280px) and (min-height: 720px) and (orientation: landscape) {
  68   body { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(1.25, 1.199); }
  69 }
  70
  71 /* 480 x 800 */
  72 @media (orientation: portrait) {
  73   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(0.8, 0.78125) translate(50%, -50%); }
  74 }
  75 /* 600 x 989 */
  76 @media (min-width: 600px) and (min-height: 989px) and (orientation: portrait) {
  77   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(0.9658, 1.0) translate(50%, -50%); }
  78 }
  79 /* 600 x 1024 */
  80 @media (min-width: 600px) and (min-height: 1024px) and (orientation: portrait) {
  81   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) translate(50%, -50%); }
  82 }
  83 /* 720 x 1230 */
  84 @media (min-width: 720px) and (min-height: 1230px) and (orientation: portrait) {
  85   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(1.2, 1.199) translate(50%, -50%); }
  86 }
  87 /* 720 x 1280 */
  88 @media (min-width: 720px) and (min-height: 1280px) and (orientation: portrait) {
  89   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(1.25, 1.199) translate(50%, -50%); }
  90 }
  91
  92 .board {
  93         position:absolute;
  94         top:19px;
  95         left:219px;
  96         width:586px;
  97         height:586px;
  98         /* line-height:0px; */
  99 }
 100
 101 .stone_select{
 102         padding:0px;
 103         border:1px solid #021a40;
 104 }
 105
 106 .board_img{
 107         padding:1px 1px 0px 1px;
 108 }
 109
 110 .img_style{
 111         width:36px;
 112         height:36px;
 113         margin: 0px;
 114 }
 115
 116 .left_pit {
 117         position:absolute;
 118         top:133px;
 119         left:30px;
 120         width:153px;
 121         height:371px;
 122         background:url('../images/GO_Pit_010612_a.png') no-repeat;
 123 }
 124
 125 .right_pit {
 126         position:absolute;
 127         top:133px;
 128         right:30px;
 129         width:153px;
 130         height:371px;
 131         background:url('../images/GO_Pit_010612_b.png') no-repeat;
 132 }
 133
 134 .stone_in_pit{
 135         position:absolute;
 136         width:36px;
 137         height:36px;
 138 }
 139
 140 .left_arrow {
 141         position:absolute;
 142         top:14px;
 143         left:14px;
 144         width:179px;
 145         height:100px;
 146         font-family: default_font;
 147         font-size: 25pt;
 148         color: #57451b;
 149         line-height:120%;
 150 }
 151
 152 .player_arrow_img {
 153         position:absolute;
 154         top:0px;
 155         left:0px;
 156 }
 157
 158 .right_arrow {
 159         position:absolute;
 160         top:14px;
 161         right:14px;
 162         width:179px;
 163         height:100px;
 164         font-family: default_font;
 165         font-size: 25pt;
 166         color: #57451b;
 167         line-height:120%;
 168 }
 169
 170 .left_time_arrow {
 171         position:absolute;
 172         bottom:31px;
 173         left:21px;
 174 }
 175
 176 .right_time_arrow {
 177         position:absolute;
 178         bottom:31px;
 179         right:21px;
 180 }
 181
 182 .left_timer {
 183         position:absolute;
 184         bottom:20px;
 185         left:35px;
 186         font-family: default_font;
 187         font-size: 30pt;
 188         color: #57451b;
 189 }
 190
 191 .right_timer {
 192         position:absolute;
 193         bottom:20px;
 194         left:853px;
 195         font-family: default_font;
 196         font-size: 30pt;
 197         color: #57451b;
 198 }
 199
 200 .left_skip {
 201         position:absolute;
 202         bottom:-1px;
 203         left:55px;
 204         margin:0px;
 205         padding:0px;
 206 }
 207
 208 .right_skip {
 209         position:absolute;
 210         bottom:-1px;
 211         right:50px;
 212         margin:0px;
 213         padding:0px;
 214 }
 215
 216 .skip_arrow {
 217         font-family: default_font;
 218         font-size: 20pt;
 219         width:100px;
 220         color: #57451b;
 221         background:url('../images/GO_SkipArrow_022212_a.png') no-repeat right;
 222 }
 223
 224 .skip_arrow:active {
 225         color: #e2df00;
 226         background:url('../images/GO_SkipArrow_022212_b.png') no-repeat right;
 227 }
 228
 229 .setting_icon {
 230         position:absolute;
 231         bottom:2px;
 232         right:7px;
 233 }
 234
 235 .undue_icon_left {
 236         position:absolute;
 237         bottom:2px;
 238         left:12px;
 239 }
 240
 241 .undue_icon_right {
 242         position:absolute;
 243         bottom:2px;
 244         right:170px;
 245 }
 246
 247 .play_button {
 248         position:absolute;
 249         left:310px;
 250         bottom:20px;
 251         width:480px;
 252         height:155px;
 253         color:#57451b;
 254         z-index:1;
 255 }
 256
 257 .play_button_img {
 258         position:absolute;
 259         top:0px;
 260         left:0px;
 261         width:480px;
 262         height:155px;
 263         line-height:180%;
 264         background:url('../images/GO_PlaySlab_012012_a.png') no-repeat;
 265 }
 266
 267 .play_button_text {
 268         font-family: default_font;
 269         font-size: 60pt;
 270         position:relative;
 271         left:150px;
 272         top:60px;
 273 }
 274
 275 .play_button:active {
 276         color:#e2df00;
 277 }
 278
 279 .setting_panel {
 280         position:absolute;
 281         top:-500px;
 282         right:290px;
 283         width:448px;
 284         height:543px;
 285         overflow:hidden;
 286         background:url('../images/GO_SettingsSlab_010612_a.png') no-repeat;
 287         z-index:2;
 288         -webkit-transition:all .4s ease-in-out;
 289         -moz-transition:all .4s ease-in-out;
 290         -o-transition:all .4s ease-in-out;
 291         -ms-transition:all .4s ease-in-out;
 292         transition:all .4s ease-in-out;
 293 }
 294
 295 .setting_panel_in{
 296         top:43px;
 297 }
 298
 299 .setting_arrow {
 300         position:absolute;
 301         top:23px;
 302         right:104px;
 303         width:237px;
 304         height:134px;
 305         font-family: default_font;
 306         font-size: 50pt;
 307         color: #57451b;
 308 }
 309
 310 .setting_arrow_img {
 311         position:absolute;
 312         top:0px;
 313         left:0px;
 314 }
 315
 316 .setting_sound {
 317         position:absolute;
 318         top:200px;
 319         left:88px;
 320         width:360px;
 321         font-family: default_font;
 322         font-size: 40pt;
 323         color: #57451b;
 324 }
 325
 326 .setting_sound_check {
 327         position:absolute;
 328         right:50px;
 329         top:15px;
 330         width:39px;
 331         height:39px;
 332 }
 333
 334 .setting_sound_checked {
 335         position:absolute;
 336         right:43px;
 337         top:14px;
 338         width:47px;
 339         height:41px;
 340 }
 341
 342 .setting_timer {
 343         position:absolute;
 344         bottom:190px;
 345         left:88px;
 346         width:360px;
 347         font-family: default_font;
 348         font-size: 40pt;
 349         color: #57451b;
 350 }
 351
 352 .setting_timer_check {
 353         position:absolute;
 354         right:50px;
 355         top:15px;
 356         width:39px;
 357         height:39px;
 358 }
 359
 360 .setting_timer_checked {
 361         position:absolute;
 362         right:43px;
 363         top:14px;
 364         width:47px;
 365         height:41px;
 366 }
 367
 368 .setting_restart {
 369         position:absolute;
 370         bottom:122px;
 371         left:88px;
 372         width:50%;
 373         font-family: default_font;
 374         font-size: 32pt;
 375         color: #57451b;
 376         text-align:left;
 377 }
 378
 379 .setting_restart_check {
 380         position:relative;
 381         left:5px;
 382         top:10px;
 383         width:39px;
 384         height:39px;
 385 }
 386
 387 .setting_restart_checked {
 388         position:relative;
 389         left:4px;
 390         top:11px;
 391         width:47px;
 392         height:41px;
 393 }
 394
 395 .setting_quit {
 396         position:absolute;
 397         bottom:185px;
 398         right:45px;
 399         font-family: default_font;
 400         font-size: 32pt;
 401         color: #57451b;
 402 }
 403
 404 .setting_quit_text {
 405         position:absolute;
 406         right:55px;
 407         width:100px;
 408         text-align:right;
 409 }
 410
 411 .setting_quit_check {
 412         float:right;
 413         position:absolute;
 414         right:4px;
 415         top:10px;
 416         width:39px;
 417         height:39px;
 418 }
 419
 420 .setting_quit_checked {
 421         float:right;
 422         position:absolute;
 423         right:-3px;
 424         top:9px;
 425         width:47px;
 426         height:41px;
 427 }
 428
 429 .setting_exit {
 430         position:absolute;
 431         top:3px;
 432         right:23px;
 433         font-family: sans_font;
 434         color:#57451b;
 435         font-size:30pt;
 436 }
 437
 438 .setting_help {
 439         position:absolute;
 440         top:3px;
 441         left:30px;
 442         font-family: sans_font;
 443         color:#57451b;
 444         font-size:30pt;
 445 }
 446
 447 .setting_resume {
 448         position:absolute;
 449         bottom:25px;
 450         left:120px;
 451         width:223px;
 452         height:68px;
 453         font-family: default_font;
 454         font-size: 32pt;
 455         text-align:center;
 456 }
 457
 458 .setting_resume_inactive {
 459         color: #57451b;
 460         background:url('../images/GO_ResumeBTN_022212_a.png') no-repeat;
 461 }
 462
 463 .setting_resume:active {
 464         color: #e2df00;
 465         background:url('../images/GO_ResumeBTN_022212_b.png') no-repeat;
 466 }
 467
 468 .text_shadow {
 469    text-shadow:0px 1px #bcb4a4,0px -1px #000000;
 470 }
 471
 472 .win_panel {
 473         position:absolute;
 474         top:43px;
 475         right:290px;
 476         width:448px;
 477         height:543px;
 478         background:url('../images/GO_SettingsSlab_010612_a.png') no-repeat;
 479         font-family: default_font;
 480         color: #57451b;
 481         z-index:3;
 482 }
 483
 484 .win_arrow {
 485         position:absolute;
 486         top:46px;
 487         left:30px;
 488         width:388px;
 489         height:210;
 490
 491 }
 492
 493 .win_arrow_img {
 494         position:absolute;
 495         bottom:0px;
 496         left:0px;
 497 }
 498
 499 .replay {
 500         position:absolute;
 501         bottom:45px;
 502         width:100%;
 503         font-family: default_font;
 504         color: #57451b;
 505         font-size:52pt;
 506         text-align:center;
 507 }
 508
 509 .replay:active {
 510         color:#e2df00;
 511 }
 512
 513 .win_exit {
 514         position:absolute;
 515         top:3px;
 516         right:23px;
 517         font-family: sans_font;
 518         color:#57451b;
 519         font-size:30pt;
 520 }
 521
 522 .replay_img {
 523         position:absolute;
 524         right:-85px;
 525         bottom:25px;
 526         width:55px;
 527         height:56px;
 528 }
 529
 530 .help_panel {
 531         position:absolute;
 532         top:42px;
 533         left:270px;
 534         width:488px;
 535         height:543px;
 536         background:url('../images/GO_RulesSlab_022812_a.png') no-repeat;
 537         font-family:sans_font;
 538         color: #57451b;
 539         z-index:2;
 540 }
 541
 542 .help_text {
 543         position:absolute;
 544         top:60px;
 545         left:20px;
 546         width:92%;
 547         height:80%;
 548         padding: 5px;
 549         font-size:13pt;
 550         overflow-y:auto;
 551         overflow-x:hidden;
 552 }
 553
 554 .help_exit {
 555         position:absolute;
 556         top:5px;
 557         right:25px;
 558         font-size:30pt;
 559 }
 560
 561 .help_title {
 562         position:absolute;
 563         top:5px;
 564         left:15%;
 565         width:70%;
 566         font-size:35pt;
 567         text-align:center;
 568 }
 569
 570 ::-webkit-scrollbar {
 571     width: 12px;
 572 }
 573
 574 ::-webkit-scrollbar-track {
 575     border-radius: 10px;
 576     -webkit-box-shadow: inset 0 0 6px 4px rgba(0,0,0,0.3);
 577 }
 578
 579 ::-webkit-scrollbar-thumb {
 580     border-radius: 10px;
 581     -webkit-box-shadow: inset 0 0 6px 6px rgba(0,0,0,0.3);
 582 }
 583
 584 ::-webkit-scrollbar-button:single-button {
 585         width: 12px;
 586         height:16px;
 587         -webkit-box-shadow: inset 0 0 6px 6px rgba(0,0,0,0.5);
 588 }