archives/snowflake
2
0
Fork 0
mirror of https://gitlab.torproject.org/tpo/anti-censorship/pluggable-transports/snowflake.git synced 2025-10-14 05:11:19 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update to popup UI and addition of toggle

Browse source
This commit is contained in:
Antonela D 2019-06-26 12:13:15 -04:00 • committed by Cecylia Bocovich
parent 19244c7146
commit eeae741262
2 changed files with 108 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

101
proxy/webext/popup.css
View file

@ -2,20 +2,107 @@ body {
margin: 10px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
width: 300px;
font-size:12px;
}
#active {
padding: 20px;
margin: 20px 0;
text-align: center;
}
.learn {
padding-top: 10px;
border-top: 1px solid grey;
.b {
border-top: 1px solid gainsboro;
padding: 10px;
position: relative;
}
.learn a {
display: block;
color: grey;
.b a {
color: black;
display: inline-block;
text-decoration: none;
}
.learn:before {
content : " ";
display: block;
position: absolute;
top: 12px;
background-image: url(https://design.firefox.com/icons/icons/desktop/arrowhead-right-12.svg);
width: 12px;
height: 12px;
opacity : 0.6;
z-index: 9999;
right: 0px;
margin-right: 10px;
}
/* Snowflake Status */
.transfering {
-webkit-animation:spin 8s linear infinite;
-moz-animation:spin 8s linear infinite;
animation:spin 8s linear infinite;
fill: BlueViolet;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
/* Toggle */
.switch {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
float: right;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
border-radius: 17px;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: BlueViolet;
}
input:focus + .slider {
box-shadow: 0 0 1px BlueViolet;
}
input:checked + .slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}

21
proxy/webext/popup.html
View file

@ -8,11 +8,18 @@
<body>
<div id="active">
<img src="icons/status-off.png" />
<p></p>
<p></p>
</div>
<div class="learn">
<a target="_blank" href="https://snowflake.torproject.org/">Learn more</a>
</div>
</body>
<p></p>
<p></p>
</div>
<div class="b toggle">
<label>Turn Off</label>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</div>
<div class="b learn">
<a target="_blank" href="https://snowflake.torproject.org/">Learn more</a>
</div>
</body>
</html>