audiomath/common.css at master · xkhanhs/audiomath · 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
112
body *{user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;font-family:monospace}
body{overflow:hidden;position:fixed;margin:0;height:100vh;background:#000}
::-webkit-scrollbar{display:none}
button:focus{outline:0!important}
body:after {
	content: url("img/off/upper-bead-off.png")
		url("img/off/lower-bead-off1.png")
		url("img/off/lower-bead-off2.png")
		url("img/off/lower-bead-off3.png")
		url("img/off/lower-bead-off4.png")
		url("img/on/upper-bead-on.png")
		url("img/on/lower-bead-on1.png")
		url("img/on/lower-bead-on2.png")
		url("img/on/lower-bead-on3.png")
		url("img/on/lower-bead-on4.png");
	display: none;
}
#status-bar * {
	position: absolute;
	color: #444;
	word-wrap:break-word;
	text-align: center;
}
#title {
    text-align: center;
}
#soroban-div {
	position: absolute;
    top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#site-wrap {
	min-width: 100vw;
	min-height: 100vh;
	background: #000;
	position: relative;
	top: 0;
	bottom: 100%;
	left: 0;
	z-index: 1;
}
#nav-trigger {
	position: absolute;
	clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
	position: fixed;
	z-index: 2;
	margin: 0;
	cursor: pointer;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect fill='#333' width='30' height='6'/><rect fill='#333' y='24' width='30' height='6'/><rect fill='#333' y='12' width='30' height='6'/></svg>");
	background-size: contain;
}
input:focus {
	outline: 0;
}
input[type=range].slider {
	-webkit-appearance: none;
	padding: 0;
}
input[type=range].slider:focus {
	outline: none;
}
input[type=range].slider::-webkit-slider-runnable-track {
	width: 100%;
	cursor: pointer;
	background: #fff;
	border-radius: 4px;
	border: 0px solid #010101;
}
input[type=range].slider::-webkit-slider-thumb {
	border: 0px solid #ff1e00;
	border-radius: 0px;
	background: #666;
	cursor: pointer;
	-webkit-appearance: none;
}
input[type=range].slider:focus::-webkit-slider-runnable-track {
	background: #ff0;
}
#navigation {
	margin: 0;
	list-style: none;
	background: #222;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	overflow-y: scroll;
}
.nav-item input, .nav-item select {
	margin: 8px 0;
}
.nav-item p {
	margin: 12px 0;
}
.btn-standard {
	position: absolute;
    background: #222;
    color: #000;
    z-index: 10;
    border: 0;
    border-radius: 4px;
}
.btn-standard:disabled {
	background: #111;
}