Add files via upload
This commit is contained in:
erosman
GitHub
parent
ea709bb081
commit
0bee804a7b
|
|
@ -0,0 +1,121 @@
|
|||
/* ----- Light Theme ----- */
|
||||
:root {
|
||||
--color: #000;
|
||||
--bg: #fff;
|
||||
--alt-bg: #f5f5f5;
|
||||
--hover: #eaeaea;
|
||||
|
||||
--body-bg: #630;
|
||||
--header: #c60;
|
||||
|
||||
--nav-bg: #420;
|
||||
--nav-hover: #851;
|
||||
--nav-color: cornsilk;
|
||||
|
||||
--btn-bg: #f90;
|
||||
--btn-hover: #e70;
|
||||
|
||||
--border: #ddd;
|
||||
--link: #08f;
|
||||
|
||||
--shadow: #0004;
|
||||
|
||||
}
|
||||
|
||||
/* ----- Dark Theme ----- */
|
||||
@media screen and (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color: #fff;
|
||||
--bg: #310;
|
||||
--alt-bg: #666;
|
||||
--hover: #888;
|
||||
|
||||
--body-bg: #630;
|
||||
--header: #c60;
|
||||
|
||||
--btn-bg: #f90;
|
||||
--btn-hover: #e70;
|
||||
|
||||
|
||||
--border: #777;
|
||||
--link: #0ef;
|
||||
|
||||
--shadow: #fff8;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----- General ----- */
|
||||
body {
|
||||
color: var(--color);
|
||||
background-color: var(--body-bg);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
article {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
select,
|
||||
textarea,
|
||||
input[type="number"],
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="url"] {
|
||||
width: 100%;
|
||||
color: inherit;
|
||||
/* background: var(--alt-bg); */
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
opacity: 0.5;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
button {
|
||||
background: var(--btn-bg);
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: var(--btn-hover);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
.flex, .flex-display {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex > * {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex-grow: 1;
|
||||
} */
|
||||
|
||||
.invalid, input:invalid {
|
||||
box-shadow: 1px 1px 4px #f20, -1px -1px 4px #f20;
|
||||
}
|
||||
|
|
@ -0,0 +1,327 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="iframe.css">
|
||||
<title>Help</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<a href="#preamble">Preamble</a>
|
||||
<a href="#how-to">How to Use</a>
|
||||
<a href="#options">Options</a>
|
||||
<a href="#proxy">Proxy</a>
|
||||
<a href="#tester">Tester</a>
|
||||
<a href="#log">Log</a>
|
||||
<a href="#support">Support</a>
|
||||
</nav>
|
||||
|
||||
<article>
|
||||
|
||||
<h2 id="preamble">Preamble</h2>
|
||||
|
||||
<p>FoxyProxy has been around since 2007. If you're upgrading from a legacy version, and your proxy settings are missing, please import them.</p>
|
||||
|
||||
<h3>Firefox</h3>
|
||||
|
||||
<h4>Proxy Authentication</h4>
|
||||
<ul>
|
||||
<li>Authentication for http/https/socks</li>
|
||||
<li>Authentication is port-specific i.e. there can be different user/pass for <code>example.com:3128</code> & <code>example.com:443</code></li>
|
||||
</ul>
|
||||
|
||||
<h4>Private Browsing Permission</h4>
|
||||
<blockquote>
|
||||
<p>Note: The ability to change proxy settings requires private window access because proxy settings affect both private and non-private windows. Therefore, if an extension has not been granted private window permission, calls to <code>proxy.settings.set()</code> will throw an exception.</p>
|
||||
<cite><a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/API/proxy/settings" target="_blank">proxy.settings</a></cite>
|
||||
</blockquote>
|
||||
|
||||
|
||||
<h3>Chrome/Chromium</h3>
|
||||
|
||||
<h4>Proxy Authentication</h4>
|
||||
<ul>
|
||||
<li class="experimental">Experimental authentication for http/https only</li>
|
||||
<li>Authentication is domain-specific (not port-specific)</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<h2 id="how-to">How to Use</h2>
|
||||
<!-- <p style="color: var(--header)">Select the proxy option</p>
|
||||
<p style="color: var(--btn-hover)">Select the proxy option</p> -->
|
||||
|
||||
<h3 id="toolbar-icon">Toolbar Icon</h3>
|
||||
|
||||
<p>Select the proxy option</p>
|
||||
|
||||
<dl>
|
||||
<dt>Proxy by Patterns</dt>
|
||||
<dd>Network connections are proxies based on patterns sets</dd>
|
||||
<dd>If there are no patterns set for any proxies, connection goes through without proxy</dd>
|
||||
|
||||
<dt>Disable</dt>
|
||||
<dd>Network connections will be handled by the browser</dd>
|
||||
|
||||
<dt>Individual Proxy/PAC</dt>
|
||||
<dd>Network connections are passed through the selected Proxy or PAC</dd>
|
||||
</dl>
|
||||
|
||||
|
||||
|
||||
<h2 id="options">Options</h2>
|
||||
|
||||
<h3 id="enable-storage-sync">Enable Storage Sync</h3>
|
||||
<p>Enable to sync storage if it is under 100KB. If the storage is over 100KB, there will be a notification and the
|
||||
Sync will be turned off automatically to avoid repeated errors.</p>
|
||||
|
||||
<!-- Error: proxy.settings requires private browsing permission. -->
|
||||
<blockquote>
|
||||
<p>For Firefox a user must have Add-ons checked under the "Sync Settings" options in "about:preferences".</p>
|
||||
|
||||
<p>The main use case of this API is to store preferences about your extension and allow the user to sync them to
|
||||
different profiles. You can store up to 100KB of data using this API. If you try to store more than this, the
|
||||
call will fail with an error message. The API is provided without any guarantees about uptime or performance.
|
||||
</p>
|
||||
|
||||
<cite><a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/API/storage/sync"
|
||||
target="_blank">storage.sync</a></cite>
|
||||
</blockquote>
|
||||
|
||||
<h4>Storage quotas for sync data</h4>
|
||||
|
||||
<ul>
|
||||
<li>Maximum total size 102,400 bytes (100KB)</li>
|
||||
<li>Maximum item size 8,192 bytes (8KB)</li>
|
||||
<li>Maximum number of items 512</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3 id="global-exclude">Global Exclude</h3>
|
||||
<p>Patterns entered here will never be proxied.</p>
|
||||
<dl>
|
||||
<dt>Wildcard Patterns</dt>
|
||||
<dd>Same as individual include/exclude wildcard pattern</dd>
|
||||
|
||||
<dt>Regular Expression</dt>
|
||||
<dd>Regular Expressions are created using <code>new RegExp()</code> so there is no need to escape forward slashes</dd>
|
||||
<dd>There is no need to double escape special characters (already happens when saved to storage).</dd>
|
||||
<dd>Regex pasterns must start and end with forward slash e.g. <code>/....../</code></dd>
|
||||
</dl>
|
||||
|
||||
|
||||
<h3 id="import-export">Settings Import/Export</h3>
|
||||
<p>You can import/export the entire settings (for backup or share) from/to a local file on your computer.</p>
|
||||
<p class="note">Import is non-destructive. Click <b>Save</b> to apply the changes.</p>
|
||||
|
||||
|
||||
<h3 id="import">Import</h3>
|
||||
|
||||
<dl>
|
||||
|
||||
<dt>FoxyProxy Account</dt>
|
||||
<dd>Import proxies from <a href="https://getfoxyproxy.org/order/" target="_blank">FoxyProxy</a> account</dd>
|
||||
<dd>Select how they are imported e.g. as domain:port or ip:port; and as HTTPS or HTTP</dd>
|
||||
|
||||
|
||||
<dt>Proxy List</dt>
|
||||
<dd>
|
||||
<dl>
|
||||
<dt>Simple</dt>
|
||||
<dd>
|
||||
<pre>1.2.3.4:1080
|
||||
example.com:443
|
||||
example.com:3128:user:pass</pre>
|
||||
</dd>
|
||||
|
||||
|
||||
<dt>Extended</dt>
|
||||
<dd>All applicable parameters can be passed as search parameters <i>(case-insensitive) (v8.0+)</i><br>
|
||||
e.g. <i>active, title, color, type (http, https , socks, socks4, pac), username, password, cc, city, proxyDNS</i></dd>
|
||||
<dd>
|
||||
<pre>http://1.2.3.4:1080
|
||||
https://example.com:443
|
||||
http://user:pass@1.2.3.4?color=663300
|
||||
socks://12.999.51.81?title=China&cc=CN&city=Beijing&proxyDns=false
|
||||
socks://12.999.51.81:331?patternExcludesIntranet=false
|
||||
https://192.168.100.9:5192?patternIncludesAll=false
|
||||
https://user:password@78.205.12.1:21?color=ff00bc&title=work%20proxy
|
||||
|
||||
https://example.com:443?active=false&title=Work&username=abcd&password=1234&cc=US&city=Miami
|
||||
http://pac-url.com/etc?type=pac&title=Work PAC&color=663300</pre>
|
||||
</dd>
|
||||
|
||||
<!-- <dt>Extended v8.0</dt>
|
||||
<dd>All applicable parameters can be passed as search parameters <i>(case-insensitive)</i><br>
|
||||
e.g. <i>active, title, color, type (http, https , socks, socks4, pac), username, password, cc, city, proxyDNS</i>
|
||||
<pre>https://example.com:443?active=false&title=Work&username=abcd&password=1234&cc=US&city=Miami
|
||||
|
||||
// for PAC types
|
||||
http://pac-url.com/etc?type=pac&title=Work PAC&color=663300</pre>
|
||||
</dd> -->
|
||||
</dl>
|
||||
</dd>
|
||||
<dd>More Information: <a href="https://github.com/foxyproxy/firefox-extension/wiki/Import-Proxy-List" target="_blank">Import Proxy List</a></dd>
|
||||
|
||||
|
||||
<dt>From earlier versions</dt>
|
||||
<dd>Import v6-7 settings JSON (e.g. <i>FoxyProxy_YYYY-MM-DD.json</i>)</dd>
|
||||
<dd>Old <i>foxyproxy.xml</i> format can be imported in FoxyProxy v7.5 and then exported as JSON</dd>
|
||||
</dl>
|
||||
|
||||
|
||||
<h3 id="save">Save</h3>
|
||||
<p>Please note that changes will not take effect until they are saved.</p>
|
||||
|
||||
|
||||
<h2 id="proxy">Proxy</h2>
|
||||
|
||||
<h3>Get Location</h3>
|
||||
<p>Get domain/IP ger-location from FoxyProxy Servers.</p>
|
||||
|
||||
<h3>Add</h3>
|
||||
<p>Add a new proxy entry</p>
|
||||
|
||||
<h3>Individual Proxy</h3>
|
||||
<dl>
|
||||
<dt>Title</dt>
|
||||
<dd>Set/change the proxy title</dd>
|
||||
|
||||
<dt>Type</dt>
|
||||
<dd>HTTP/HTTPS/SOCKS/SOCKS4 to be used with hostname & port</dd>
|
||||
<dd>PAC to be used with PAC URL</dd>
|
||||
|
||||
<dt>Country</dt>
|
||||
<dd>Set/change the proxy country flag</dd>
|
||||
|
||||
<dt>City</dt>
|
||||
<dd>Set/change the proxy city</dd>
|
||||
|
||||
<dt>Color</dt>
|
||||
<dd>Set/change the proxy color</dd>
|
||||
|
||||
<dt>hostname & Port</dt>
|
||||
<dd>Required for HTTP/HTTPS/SOCKS/SOCKS4 types</dd>
|
||||
|
||||
<dt>Username & Password</dt>
|
||||
<dd>To be used for HTTP/HTTPS/SOCKS types</dd>
|
||||
<dd>If not set, authentication will be handled by the browser</dd>
|
||||
|
||||
<dt>PAC URL</dt>
|
||||
<dd>Required for PAC types</dd>
|
||||
</dl>
|
||||
|
||||
<h3></h3>
|
||||
|
||||
|
||||
|
||||
<h3 id="patterns">Patterns</h3>
|
||||
<p>Patterns can be full or partial match which means it can match the entire URL or only part of it.</p>
|
||||
<p>Patterns can be Wildcard or Regular Expression.</p>
|
||||
|
||||
<p>When FoxyProxy is set to <i>Proxy by Patterns</i> and there are existing patterns:</p>
|
||||
<ul>
|
||||
<li>Proxies are checked in order</li>
|
||||
<li>If one of exclude patterns matches, then that proxy is skipped</li>
|
||||
<li>If one of include patterns matches, then that proxy is used, otherwise the next proxy is checked</li>
|
||||
</ul>
|
||||
|
||||
<dl>
|
||||
<dt>Wildcard Patterns</dt>
|
||||
<dd>Wildcard <code>*</code> is translated to Regular Expression <code>.*</code> which means 0 or more characters</dd>
|
||||
<dd>Character <code>?</code> is translated to Regular Expression <code>.</code> which means a single character</dd>
|
||||
|
||||
<dt>Regular Expression</dt>
|
||||
<dd>Regular Expressions are created using <code>new RegExp()</code> so there is no need to escape forward slashes</dd>
|
||||
<dd>There is no need to double escape special characters (already happens when saved to storage).</dd>
|
||||
<dd>Regex pasterns must start and end with forward slash e.g. <code>/....../</code></dd>
|
||||
|
||||
</dl>
|
||||
|
||||
|
||||
<table>
|
||||
<caption>Examples</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Pattern</th>
|
||||
<th>match</th>
|
||||
<th>no-match</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>*.foxyproxy.com</td>
|
||||
<td>http://help.foxyproxy.com/index.html<br>
|
||||
https://foo.bar.foxyproxy.com<br>
|
||||
https://example.com/ref=twostep.foxyproxy.com
|
||||
</td>
|
||||
<td>https://mozilla.com/</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>proxy</td>
|
||||
<td>http://help.foxyproxy.com/index.html<br>
|
||||
https://foxyproxy.com<br>
|
||||
https://example.com/ref=proxylist
|
||||
</td>
|
||||
<td>https://mozilla.com/</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>https://g?ogle.*</td>
|
||||
<td>https://google.com/<br>
|
||||
https://grogle.org<br>
|
||||
https://google.com/maps</td>
|
||||
<td>https://goog.com/</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>^https://(www|mail).google.com/\d+/</td>
|
||||
<td>https://www.google.com/123/abc<br>
|
||||
https://mail.google.com/123/abc</td>
|
||||
<td>https://google.com/</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2 id="tester">Tester</h2>
|
||||
<ol>
|
||||
<li>Enter URL to test</li>
|
||||
<li>Select the pattern type</li>
|
||||
<li>Enter pattern details</li>
|
||||
<li>Click <b>Test</b> when ready</li>
|
||||
<li>Result will be match ✅ or fail ❌</li>
|
||||
</ol>
|
||||
|
||||
<h2 id="log">Log</h2>
|
||||
<p>Live Log displays the last 100 proxied web requests in reversed order (new one on top). It will continue to display while the Options page is open and will stop logging as soon as the page is closed. Log data is not stored.</p>
|
||||
|
||||
<h2 id="support">Support</h2>
|
||||
<ul>
|
||||
<li>Please use the GitHub Community <a href="https://github.com/foxyproxy/firefox-extension" target="_blank">Support</a>.</li>
|
||||
<li><a href="https://github.com/foxyproxy/firefox-extension" target="_blank">Source Code</a></li>
|
||||
<li><a href="https://support.getfoxyproxy.org/" target="_blank">Open a Support Ticket</a> <i>(no registration required)</i></li>
|
||||
<li><a href="mailto:support@getfoxyproxy.org">Email Support</a></li>
|
||||
</ul>
|
||||
|
||||
<!--
|
||||
<p>
|
||||
<span class="notForBasic"><a href="/pattern-tester.html"><i class="fa fa-flask"></i>Pattern Test</a> & <a
|
||||
href="/pattern-help.html"><i class="fa fa-question-circle"></i>Pattern Help</a> <i>(no internet connection
|
||||
required)</i><br></span>
|
||||
<a href="https://getfoxyproxy.org/geoip/" target="_blank">🌎 What's my IP Address?</a>
|
||||
</p>
|
||||
-->
|
||||
|
||||
</article>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,255 @@
|
|||
@import 'default.css';
|
||||
/* ----- Light Theme ----- */
|
||||
:root {
|
||||
--dim: #777;
|
||||
}
|
||||
|
||||
/* ----- Dark Theme ----- */
|
||||
@media screen and (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--dim: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ----- General ----- */
|
||||
:root {
|
||||
--nav-height: 2.5rem;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-padding-top: var(--nav-height);
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
article {
|
||||
padding: 2em;
|
||||
background-color: var(--bg);
|
||||
}
|
||||
|
||||
article>*:not(h2):not(h3) {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
letter-spacing: 1px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--header);
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: var(--nav-hover);
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
dt {
|
||||
color: var(--nav-bg);
|
||||
background-color: var(--alt-bg);
|
||||
display: table;
|
||||
padding: 0.2em 0.5em;
|
||||
}
|
||||
|
||||
dd + dt {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
dd > dl {
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
dt span {
|
||||
margin-left: 0.5em;
|
||||
color: var(--dim);
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
dd dl dt {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
/* ----- About ----- */
|
||||
.about dt {
|
||||
background: none;
|
||||
color: var(--nav-hover);
|
||||
}
|
||||
|
||||
/* ----- /About ----- */
|
||||
|
||||
/* ----- Navigation ----- */
|
||||
nav {
|
||||
color: var(--bg);
|
||||
background-color: var(--bg);
|
||||
height: var(--nav-height);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
box-shadow: 0px 3px 6px var(--shadow);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: var(--nav-bg);
|
||||
padding: 0.5em 1em;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: var(--btn-bg);
|
||||
}
|
||||
|
||||
/* ----- /Navigation ----- */
|
||||
|
||||
/* ----- Table ----- */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 1px solid var(--border);
|
||||
margin-bottom: 1em;
|
||||
width: calc(100% - 2.5rem);
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid var(--border);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: var(--alt-bg);
|
||||
text-align: left;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
/* th span {
|
||||
display: block;
|
||||
font-size: 0.9em;
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
} */
|
||||
|
||||
td {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
/* ----- /Table ----- */
|
||||
|
||||
pre {
|
||||
border-left: 2px solid #ccc;
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 1.2em;
|
||||
padding: 0 0.3em;
|
||||
background-color: var(--hover);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
color: var(--color);
|
||||
padding: 1em 3.5em;
|
||||
font-style: italic;
|
||||
position: relative;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
blockquote::before {
|
||||
color: #ccc;
|
||||
opacity: 0.6;
|
||||
font-size: 4em;
|
||||
position: absolute;
|
||||
content: '❝';
|
||||
top: 0;
|
||||
left: 0.1em;
|
||||
}
|
||||
|
||||
blockquote::after {
|
||||
color: #ccc;
|
||||
opacity: 0.6;
|
||||
font-size: 4em;
|
||||
position: absolute;
|
||||
content: '❞';
|
||||
bottom: -0.5em;
|
||||
right: 0.5em;
|
||||
}
|
||||
|
||||
cite {
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
cite::before {
|
||||
content: '— source: ';
|
||||
}
|
||||
|
||||
figure {
|
||||
display: table;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
figure img {
|
||||
border-radius: 1em;
|
||||
border: 4px solid var(--nav-hover);
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-style: italic;
|
||||
font-size: 0.9em;
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
.note,
|
||||
.warning {
|
||||
color: var(--color);
|
||||
border: 1px solid var(--border);
|
||||
border-left: 4px solid var(--btn-bg);
|
||||
padding: 0.2em 0.5em;
|
||||
margin-top: 0.3em;
|
||||
border-radius: 4px;
|
||||
display: table;
|
||||
padding-left: 2em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.note::before,
|
||||
.warning::before {
|
||||
content: '📌';
|
||||
position: absolute;
|
||||
top: 0.2em;
|
||||
left: 0.8em;
|
||||
}
|
||||
|
||||
.warning::before {
|
||||
content: '⚠️';
|
||||
}
|
||||
|
||||
|
||||
.experimental::after {
|
||||
content: '';
|
||||
background: url('../image/beaker.svg') no-repeat center / contain;
|
||||
display: inline-block;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
margin-left: 0.5em;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
Loading…
Reference in New Issue