react-poker/style.css at master · pattern/react-poker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

/* General */

ul { list-style-type: none; margin: 0; padding: 0; }
ol { margin: 0; margin-left: 23px; padding: 0; }
ol li { padding: 3px 0; }

button {
    padding: 6px 10px 5px 10px;
    margin-right: 20px;
    background: #4479BA;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
button:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}
button:active {
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    background: #2E5481;
    border: solid 1px #203E5F;
}

button:focus { outline:0; }

/* App / Containers */

.container { width: 1000px; margin-left: auto; margin-right: auto; }
.orange-bg { background-color: #ff5800; margin-bottom: 40px; }
.header { color: #fff; font-size: 20px; padding-top: 15px; padding-bottom: 15px; }
.col1 { float: left; width: 250px; }
.col2 { float: left; width: 550px; }
.col3 { float: left; width: 200px; }
.clear-both { clear: both; }
.poker-title { margin: 0; -webkit-margin-before: 0; -webkit-margin-after: 0; }

body.flashing {
    -webkit-animation-name: flashing; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1.5s; /* Chrome, Safari, Opera */
    animation-name: flashing;
    animation-duration: 1.5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes flashing {
    0%   { background-color:red; }
    25%  { background-color:yellow; }
    50%  { background-color:blue; }
    75%  { background-color:green; }
    100% { background-color:red; }
}

/* Standard syntax */
@keyframes flashing {
    0%   { background-color:red; }
    25%  { background-color:yellow; }
    50%  { background-color:blue; }
    75%  { background-color:green; }
    100% { background-color:red; }
}


/* Timer */

.current-time { font-size: 200px; margin-top: 50px; margin-bottom: 30px; }
.timer .buttons { margin-left: 50px; }


/* Clock */

.clock { margin-top: 6px; }


/* Blinds */

li.active { font-weight: bold; color: #ff5800; }
.current-blinds { margin-bottom: 30px; }
.current-blinds li:first-child { margin-bottom: 3px;}
.current-blinds li:nth-child(2) { font-size: 40px; }
.blinds-list { margin-bottom: 30px; }
.blinds-list li { margin: 7px 0;}

/* Debts */

.debts { margin-top: 80px; }
.debts li { cursor: pointer; }
li.paid { color: #999; text-decoration: line-through; }
.debts input { margin-top: 15px; margin-bottom: 10px; }
.settle { font-size: 12px; color: #999; }
.no-debts { color: #999; }

/* Pot */

.designation { float: left; width: 60px; }
.payouts > div { margin-bottom: 10px; }
.payout { font-size: 20px; }
.payout div:first-child { float: left; width: 60px; }
.payout div:nth-child(2) { float: left; width: 60px; font-weight: bold; }
.pot .buttons { margin-top: 20px; }