Skip to content

Commit 72d9e58

Browse files
JordiSubiraJordiSubira
authored
Add css tailwind (#5)
* add tailwind build * update readme
1 parent b581961 commit 72d9e58

File tree

10 files changed

+2876
-241
lines changed

10 files changed

+2876
-241
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
.venv
22
build/
33
.vscode/
4+
node_modules/

‎README.md

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,21 @@
22

33
This is an experimental version of the chromium-based SCION Browser Extension, that can be used to interact with the [SCION Forward Proxy](https://scion-http-proxy.readthedocs.io/en/latest/forward-proxy.html).
44

5-
Please refer to the [technical documentation](https://scion-browser-extension.readthedocs.io/en/latest/index.html) for installation and configuration instructions.
5+
Please refer to the [technical documentation](https://scion-browser-extension.readthedocs.io/en/latest/index.html) for installation and configuration instructions.
6+
7+
## Developer setup instructions
8+
9+
1. Install dependencies:
10+
```
11+
npm install -D [email protected]
12+
```
13+
14+
2. Build Tailwind CSS for development (watch mode):
15+
```
16+
npm run watch:css
17+
```
18+
19+
3. Build Tailwind CSS for production (minified):
20+
```
21+
npm run build:css
22+
```

‎chrome/css/tailwind.min.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎chrome/options.html

Lines changed: 2 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -2,111 +2,7 @@
22
<html>
33

44
<head>
5-
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
6-
<style>
7-
input:checked~.dot {
8-
transform: translateX(120%);
9-
/*background-color: #48bb78;*/
10-
}
11-
12-
input:checked~.dot2 {
13-
transform: translateX(125%);
14-
/*background-color: #48bb78;*/
15-
}
16-
</style>
17-
<style>
18-
/* Tab content - closed */
19-
.tab-content {
20-
max-height: 0;
21-
-webkit-transition: max-height .35s;
22-
-o-transition: max-height .35s;
23-
transition: max-height .35s;
24-
}
25-
26-
/* :checked - resize to full height */
27-
.tab input:checked~.tab-content {
28-
max-height: 100vh;
29-
}
30-
31-
.tab input+label {
32-
font-size: 18px;
33-
padding: 0.5rem;
34-
}
35-
36-
/* Label formatting when open */
37-
.tab input:checked+label {
38-
/*@apply text-xl p-5 border-l-2 border-indigo-500 bg-gray-100 text-indigo*/
39-
font-size: 18px;
40-
/*.text-xl*/
41-
padding: 0.5rem;
42-
/*.p-5*/
43-
border-left-width: 2px;
44-
/*.border-l-2*/
45-
border-color: #6574cd;
46-
/*.border-indigo*/
47-
/*.bg-gray-100 */
48-
color: #6574cd;
49-
/*.text-indigo*/
50-
}
51-
52-
/* Icon */
53-
.tab label::after {
54-
float: right;
55-
right: 0;
56-
top: 0;
57-
display: block;
58-
width: 1.5em;
59-
height: 1.5em;
60-
line-height: 1.5;
61-
font-size: 1.25rem;
62-
text-align: center;
63-
-webkit-transition: all .35s;
64-
-o-transition: all .35s;
65-
transition: all .35s;
66-
}
67-
68-
/* Icon formatting - closed */
69-
.tab input[type=checkbox]+label::after {
70-
content: "+";
71-
font-weight: bold;
72-
/*.font-bold*/
73-
border-width: 1px;
74-
/*.border*/
75-
border-radius: 9999px;
76-
/*.rounded-full */
77-
border-color: #b8c2cc;
78-
/*.border-grey*/
79-
}
80-
81-
.tab input[type=radio]+label::after {
82-
content: "\25BE";
83-
font-weight: bold;
84-
/*.font-bold*/
85-
border-width: 1px;
86-
/*.border*/
87-
border-radius: 9999px;
88-
/*.rounded-full */
89-
border-color: #b8c2cc;
90-
/*.border-grey*/
91-
}
92-
93-
/* Icon formatting - open */
94-
.tab input[type=checkbox]:checked+label::after {
95-
transform: rotate(315deg);
96-
background-color: #6574cd;
97-
/*.bg-indigo*/
98-
color: #f8fafc;
99-
/*.text-grey-lightest*/
100-
}
101-
102-
.tab input[type=radio]:checked+label::after {
103-
transform: rotateX(180deg);
104-
background-color: #6574cd;
105-
/*.bg-indigo*/
106-
color: #f8fafc;
107-
/*.text-grey-lightest*/
108-
}
109-
</style>
5+
<link href="css/tailwind.min.css" rel="stylesheet">
1106
</head>
1117

1128
<body>
@@ -127,7 +23,7 @@ <h4 class="text-lg font-bold mb-2">Global strict mode</h4>
12723
<!-- input -->
12824
<input id="toggleGlobalStrict" type="checkbox" class="sr-only" />
12925
<!-- line -->
130-
<div id="lineStrictMode" class="w-10 h-5 bg-gray-400 rounded-full shadow-inner"></div>
26+
<div id="lineStrictMode" class="w-8 h-5 bg-gray-400 rounded-full shadow-inner"></div>
13127
<!-- dot -->
13228
<div class="dot absolute w-5 h-5 bg-white rounded-full shadow -left-1 -top-0 transition">
13329
</div>

‎chrome/popup.html

Lines changed: 3 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -2,136 +2,7 @@
22
<html>
33

44
<head>
5-
<!-- TODO: Add the purged css version for production use -->
6-
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
7-
<style>
8-
h3 {
9-
min-width: 300px;
10-
text-align: center;
11-
}
12-
13-
body {
14-
background: rgb(248, 247, 250);
15-
background: linear-gradient(90deg, rgba(248, 247, 250, 1) 0%, rgba(230, 230, 238, 1) 35%, rgba(228, 240, 242, 1) 100%);
16-
}
17-
18-
input.halfchecked~.dot {
19-
transform: translateX(125%) !important;
20-
/*background-color: #bb8048;*/
21-
}
22-
23-
input~.dot {
24-
transform: translateX(230%);
25-
/*background-color: #48bb78;*/
26-
}
27-
28-
29-
.ac-label {
30-
position: relative;
31-
padding: .5em 1em;
32-
padding-left: 2.5em;
33-
margin-bottom: .5em;
34-
display: block;
35-
cursor: pointer;
36-
transition: background-color .15s ease-in-out;
37-
}
38-
39-
.ac-input:checked+label,
40-
.ac-label:hover {
41-
/* Change text color */
42-
}
43-
44-
.flag-container {
45-
max-width: 200px;
46-
height: 50px;
47-
margin: 0 auto;
48-
display: flex;
49-
gap: 2px;
50-
}
51-
52-
.flag-container img {
53-
width: 100%;
54-
height: 50%;
55-
}
56-
57-
.flag-container .description {
58-
text-align: center;
59-
}
60-
61-
.ac-label:after,
62-
.ac-input:checked+.ac-label:after {
63-
content: "+";
64-
position: absolute;
65-
display: hidden;
66-
left: 0;
67-
top: -4px;
68-
width: 2em;
69-
height: 100%;
70-
line-height: 2.25em;
71-
text-align: center;
72-
transition: background-color .15s ease-in-out;
73-
}
74-
75-
.ac-input:checked+.ac-label:after {
76-
content: "-";
77-
}
78-
79-
.ac-input {
80-
display: none;
81-
}
82-
83-
.ac-text,
84-
.ac-sub-text {
85-
opacity: 0;
86-
height: 0;
87-
margin-bottom: .5em;
88-
transition: opacity .5s ease-in-out;
89-
overflow: hidden;
90-
}
91-
92-
.ac-input:checked~.ac-text,
93-
.ac-sub .ac-input:checked~.ac-sub-text {
94-
opacity: 1;
95-
height: auto;
96-
}
97-
98-
.ac-sub .ac-label {
99-
background: none;
100-
font-weight: 600;
101-
padding: .1em 2em;
102-
font-size: 14px;
103-
margin-bottom: 0;
104-
}
105-
106-
.ac-sub .ac-label:checked {
107-
background: none;
108-
border-bottom: 1px solid whitesmoke;
109-
}
110-
111-
.ac-sub .ac-label:after,
112-
.ac-sub .ac-input:checked+.ac-label:after {
113-
left: 0;
114-
background: none;
115-
}
116-
117-
.ac-sub .ac-input:checked+label,
118-
.ac-sub .ac-label:hover {
119-
background: none;
120-
}
121-
122-
.ac-sub-text {
123-
padding: 0 1em 0 2em;
124-
}
125-
126-
#ac-label-main {
127-
padding-left: 0.5em !important;
128-
}
129-
130-
#ac-label-main:after {
131-
width: 0px !important;
132-
content: unset !important;
133-
}
134-
</style>
5+
<link href="css/tailwind.min.css" rel="stylesheet">
1356
</head>
1367

1378
<body style="padding: 1em;">
@@ -150,9 +21,9 @@ <h3 id="scionsupport" class="text-lg text-left font-bold mb-3 mt-3"></h3>
15021
<!-- input -->
15122
<input id="toggleRunning" type="checkbox" class="sr-only" onchange="toggleExtensionRunning();" />
15223
<!-- line -->
153-
<div id="lineRunning" class="w-12 h-4 bg-gray-400 rounded-full shadow-inner"></div>
24+
<div id="lineRunning" class="w-8 h-5 bg-gray-400 rounded-full shadow-inner"></div>
15425
<!-- dot -->
155-
<div class="dot absolute w-4 h-4 bg-white rounded-full shadow -left-1 -top-0 transition"></div>
26+
<div class="dot absolute w-5 h-5 bg-white rounded-full shadow -left-1 -top-0 transition"></div>
15627
</div>
15728
<span id="scionmode" style="font-size: 11px; text-align: center;"></span>
15829
</div>

‎chrome/popup.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -250,12 +250,10 @@ function toggleExtensionRunning() {
250250

251251
if (toggleRunning.checked) {
252252
mainDomain.innerHTML = "SCION preference for " + popupMainDomain;
253-
toggleRunning.classList.remove("halfchecked");
254253
lineRunning.style.backgroundColor = "#48bb78";
255254
scionmode.innerHTML = "Strict";
256255
} else {
257256
mainDomain.innerHTML = "SCION preference for " + popupMainDomain;
258-
toggleRunning.classList.add("halfchecked");
259257
lineRunning.style.backgroundColor = "#cccccc";
260258
scionmode.innerHTML = "When available";
261259
}

0 commit comments

Comments
 (0)