[Author Prev][Author Next][Thread Prev][Thread Next][Author Index][Thread Index]
[tor-commits] [snowflake/master] Update to popup UI and addition of toggle
commit eeae741262ad565d64abd5714599df31fde32e8f
Author: Antonela D <antonela@xxxxxxxxxxxxxx>
Date: Wed Jun 26 12:13:15 2019 -0400
Update to popup UI and addition of toggle
---
proxy/webext/popup.css | 101 ++++++++++++++++++++++++++++++++++++++++++++----
proxy/webext/popup.html | 21 ++++++----
2 files changed, 108 insertions(+), 14 deletions(-)
diff --git a/proxy/webext/popup.css b/proxy/webext/popup.css
index ca3c426..479d2f4 100644
--- a/proxy/webext/popup.css
+++ b/proxy/webext/popup.css
@@ -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);
+}
diff --git a/proxy/webext/popup.html b/proxy/webext/popup.html
index 6795b2e..8149232 100644
--- a/proxy/webext/popup.html
+++ b/proxy/webext/popup.html
@@ -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>
_______________________________________________
tor-commits mailing list
tor-commits@xxxxxxxxxxxxxxxxxxxx
https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-commits