-
Notifications
You must be signed in to change notification settings - Fork 0
/
jquery.jqpuzzle.css
140 lines (123 loc) · 3.26 KB
/
jquery.jqpuzzle.css
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
/*
* jqPuzzle - Sliding Puzzles with jQuery
* Default CSS theme
*
* Copyright (c) 2008 Ralf Stoltze, http://www.2meter3.de/jqPuzzle/
* Dual-licensed under the MIT and GPL licenses.
*
* Note that some CSS properties are set by the jqPuzzle script itself to make
* sure that the puzzle works properly. These properties will overwrite
* user-defined properties.
*
* The class 'jqp-solved' is added to the outermost element when a puzzle is
* solved by the user. Use '.jqPuzzle.jqp-solved' to define different styles
* for solved puzzles.
*/
/* outermost element which holds the full puzzle interface */
.jqPuzzle {
padding: 5px;
border: 1px solid #222222;
background-color: #DDDDFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* only needed if external css rules set defaults for divs,
this rule only resets the most common properties */
.jqPuzzle div {
background-color: transparent;
margin: 0px;
padding: 0px;
border-style: none;
}
/* div wrapper which holds the puzzle pieces and the solution image */
.jqPuzzle .jqp-wrapper {
padding: 2px;
border: 1px solid #FFFFFF;
background-color: #444455;
}
/* a single puzzle piece */
.jqPuzzle .jqp-piece {
border: 1px solid #FFFFFF;
color: #FFFFFF;
font-size: 36px;
}
.jqPuzzle .jqp-piece:hover {
border-style: dashed;
}
.jqPuzzle.jqp-solved .jqp-piece:hover {
border-style: solid;
}
/* the controls area which holds the buttons and the display */
.jqPuzzle .jqp-controls {
float: left;
}
/* a button */
.jqPuzzle .jqp-controls a {
margin-top: 5px;
margin-right: 8px;
padding: 3px 5px;
border: 1px outset #FFFFFF;
background-color: #777799;
color: #FFFFFF;
font-size: 14px;
line-height: normal;
float: left;
}
.jqPuzzle .jqp-controls a:hover {
background-color: #7777BB;
}
/* toggle/down state for buttons */
.jqPuzzle .jqp-controls a.jqp-toggle,
.jqPuzzle .jqp-controls a.jqp-down {
padding-left: 4px;
padding-right: 6px;
border-style: inset;
background-color: #BBBBFF;
}
/* disabled state for buttons */
.jqPuzzle .jqp-controls a.jqp-disabled {
background-color: #DDDDEE;
color: #FFFFFF;
}
/* the area which holds the moves/seconds display */
.jqPuzzle .jqp-controls span {
margin-top: 5px;
padding: 2px 4px;
padding-left: 0px;
border: none;
background-color: transparent;
color: #666666;
font-size: 14px;
float: left;
}
/* disabled state for the display (non-shuffled puzzle) */
.jqPuzzle .jqp-controls span.jqp-disabled {
color: #AAAAAA;
}
/* solved state for the display (non-shuffled puzzle) */
.jqPuzzle.jqp-solved .jqp-controls span {
padding: 1px 3px;
border: 1px dotted #0F8F08;
background-color: #9FEF86;
color: #0F8F08;
}
/* a text field for the moves/seconds display */
.jqPuzzle .jqp-controls span input {
margin: 0px 3px;
padding: 3px;
padding-bottom: 2px;
border-style: none;
background-color: #FFFFFF;
color: #666666;
font-weight: bold;
text-align: right;
}
/* disabled state for the text fields */
.jqPuzzle .jqp-controls span.jqp-disabled input {
background-color: #EEEEFF;
color: #AAAAAA;
}
/* solved state for the text fields */
.jqPuzzle.jqp-solved .jqp-controls span input {
background-color: #C2FFAF;
color: #444444;
}