Skip to content

Commit b92eccf

Browse files
DbzDbz
committed
Created checkbox buttons
Improved selectable New color scheme Former-commit-id: 794844a
1 parent 48df8bf commit b92eccf

File tree

2 files changed

+48
-45
lines changed

2 files changed

+48
-45
lines changed

‎options.css

Lines changed: 39 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
margin-right: auto;
2121
margin-top: 50px;
2222

23-
border: 1px solid #bce8f1;
23+
border: 1px solid #979C9C;
2424
border-radius: 15px;
2525
box-shadow: 0 0 7px rgba(0,0,0,0.5);
2626
}
@@ -66,8 +66,9 @@
6666
order: 2;
6767
align-items: center;
6868

69+
color: #DA727E;
6970
border-left-style: solid;
70-
border-left-color: #bce8f1;
71+
border-left-color: #FFBC67;
7172
border-left-width: 1px;
7273
margin-left: 5px;
7374
padding-left: 25px;
@@ -76,67 +77,75 @@
7677

7778
.context-cache {
7879
display: flex;
79-
margin: 0 3px 3px 3px;
80+
/*margin: 0 3px 3px 3px;*/
8081
justify-content: flex-start;
8182
cursor: hand;
8283
}
8384

84-
.context-cache:nth-child(2) {
85-
margin-top: 10px;
86-
margin-bottom: 10px;
87-
}
88-
8985
.context-cache .checkbox-wrapper {
9086
display: flex;
9187
align-items: center;
9288
}
9389

94-
.checkbox {
90+
.context-menu-label {
91+
background-color: white;
92+
margin: 3px 3px 3px 3px;
93+
padding: 10px;
94+
border: 1px solid #ddd;
95+
border-radius: 22px;
96+
text-align: center;
97+
color: #455C7B;
98+
width: 100%;
9599
cursor: hand;
100+
101+
transition: all 0.3s ease-in 0s;
102+
}
103+
104+
input:checked + .context-menu-label {
105+
background-color: #455C7B;
106+
color: white;
107+
}
108+
109+
.checkbox {
110+
display: none;
96111
}
97112

98113
.list-item {
99-
background-color: white;
114+
background-color: #455C7B;
100115
margin: 3px 3px 3px 3px;
101116
padding: 10px;
102117
border: 1px solid #ddd;
103118
cursor: hand;
119+
border-radius: 22px;
120+
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
104121
}
105122

106123
.list-item:active {
107124
cursor: -webkit-grabbing;
108125
}
109126

110-
.list-item:first-child {
111-
border-top-left-radius: 4px;
112-
border-top-right-radius: 4px;
113-
}
114-
115-
.list-item:last-child {
116-
border-bottom-right-radius: 4px;
117-
border-bottom-left-radius: 4px;
118-
}
119-
120-
.list-item img {
121-
min-width: 165px;
127+
.list-item p {
128+
text-align: center;
129+
color: #DA727E;
122130
}
123131

124132
.title {
125-
background-color: #d9edf7;
133+
background-color: #685C79;
126134
padding-top: 5px;
127135
padding-bottom: 5px;
128-
color: #31708f;
136+
color: white;
129137
border-top-left-radius: 10px;
130138
border-top-right-radius: 10px;
131139
}
132140

133141
h3 {
134142
text-align: center;
135-
border-bottom-color: rgba(188,232,230,1);
143+
border-bottom-color: #343642;
136144
border-bottom-width: 3px;
137145
}
138146

139-
p {
147+
.setting-definition p {
148+
color: #685C79;
140149
padding-right: 10px;
141150
}
142151

@@ -168,7 +177,7 @@ p {
168177
}
169178
.onoffswitch-label {
170179
display: block; overflow: hidden; cursor: pointer;
171-
border: 2px solid #A1A1A1; border-radius: 22px;
180+
border: 2px solid #685C79; border-radius: 22px;
172181
}
173182
.onoffswitch-inner {
174183
display: block; width: 200%; margin-left: -100%;
@@ -182,20 +191,20 @@ p {
182191
.onoffswitch-inner:before {
183192
content: "ON";
184193
padding-left: 10px;
185-
background-color: #31708F; color: #D9EDF7;
194+
background-color: #FFBC67; color: #DA727E;
186195
}
187196
.onoffswitch-inner:after {
188197
content: "OFF";
189198
padding-right: 10px;
190-
background-color: #D9EDF7; color: #31708F;
199+
background-color: #DA727E; color: #FFBC67;
191200
text-align: right;
192201
}
193202
.onoffswitch-switch {
194203
display: block; width: 36px; margin: 0px;
195204
background: #FFFFFF;
196205
position: absolute; top: 0; bottom: 0;
197206
right: 48px;
198-
border: 2px solid #A1A1A1; border-radius: 22px;
207+
border: 2px solid #685C79; border-radius: 22px;
199208
transition: all 0.3s ease-in 0s;
200209
}
201210
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {

‎options.html

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,24 +16,18 @@ <h3 class="title">WebCache Options</h3>
1616
<div class="settings-wrapper">
1717
<div class="setting">
1818
<div class="context-cache">
19-
<div class="checkbox-wrapper">
20-
<input class='checkbox' type="checkbox">
21-
</div>
22-
<img src="images/GoogleCacheHelvetica.png" />
19+
<input id="google-cache" class="checkbox" type="checkbox"/>
20+
<label class="context-menu-label" for="google-cache">Google Cache</label>
2321
</div>
2422

2523
<div class="context-cache">
26-
<div class="checkbox-wrapper">
27-
<input class='checkbox' type="checkbox">
28-
</div>
29-
<img src="images/WaybackMachineHelvetica.png" />
24+
<input id="wayback-machine" class="checkbox" type="checkbox"/>
25+
<label class="context-menu-label" for="wayback-machine">Wayback Machine</label>
3026
</div>
3127

3228
<div class="context-cache">
33-
<div class="checkbox-wrapper">
34-
<input class='checkbox' type="checkbox">
35-
</div>
36-
<img src="images/CoralCDNHelvetica.png" />
29+
<input id="coral-cdn" class="checkbox" type="checkbox"/>
30+
<label class="context-menu-label" for="coral-cdn">Coral CDN</label>
3731
</div>
3832
</div>
3933
<div class="setting-definition">
@@ -43,9 +37,9 @@ <h3 class="title">WebCache Options</h3>
4337
<div class="settings-wrapper">
4438
<div class="setting">
4539
<ul id="sortable">
46-
<li class="list-item" id="Google Cache"><img src="images/GoogleCacheHelvetica.png" /></li>
47-
<li class="list-item" id="WayBack Machine"><img src="images/WaybackMachineHelvetica.png" /></li>
48-
<li class="list-item" id="Coral CDN"><img src="images/CoralCDNHelvetica.png" /></li>
40+
<li class="list-item" id="Google Cache"><p>Google Cache</p></li>
41+
<li class="list-item" id="Wayback Machine"><p>Wayback Machine</p></li>
42+
<li class="list-item" id="Coral CDN"><p>Coral CDN</p></li>
4943
</ul>
5044
</div>
5145
<div class="setting-definition">

0 commit comments

Comments
 (0)