mirror of
https://github.com/PurpleI2P/i2pd.git
synced 2025-04-29 04:07:49 +02:00
1635 lines
No EOL
55 KiB
CSS
1635 lines
No EOL
55 KiB
CSS
/* "purple royale" console theme for i2pd */
|
||
/* Author: dr|z3d */
|
||
|
||
:root {
|
||
--bodyfont: Open Sans, Noto Sans, Ubuntu, Segoe UI, sans-serif;
|
||
--monospaced: Droid Sans Mono, Noto Mono, Lucida Console, DejaVu Sans Mono, monospace;
|
||
--logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 19'%3E%3Cg fill='purple'%3E%3Ccircle cx='2.7' cy='2.6' r='1.2'/%3E%3Ccircle cx='2.7' cy='6' r='1.2'/%3E%3Ccircle cx='2.7' cy='9.5' r='1.2'/%3E%3Ccircle cx='2.7' cy='13' r='1.2'/%3E%3Ccircle cx='2.7' cy='16.4' r='1.2'/%3E%3Ccircle cx='9.6' cy='2.6' r='1.2'/%3E%3Ccircle cx='9.6' cy='6' r='1.2'/%3E%3Ccircle cx='9.6' cy='9.5' r='1.2'/%3E%3Ccircle cx='9.6' cy='13' r='1.2'/%3E%3Ccircle cx='9.6' cy='16.4' r='1.2'/%3E%3Ccircle cx='13' cy='6' r='1.2'/%3E%3Ccircle cx='16.5' cy='6' r='1.2'/%3E%3Ccircle cx='16.5' cy='13' r='1.2'/%3E%3Ccircle cx='19.9' cy='6' r='1.2'/%3E%3Ccircle cx='19.9' cy='13' r='1.2'/%3E%3Ccircle cx='23.4' cy='13' r='1.2'/%3E%3Ccircle cx='26.8' cy='2.6' r='1.2'/%3E%3Ccircle cx='26.8' cy='6' r='1.2'/%3E%3Ccircle cx='26.8' cy='9.5' r='1.2'/%3E%3Ccircle cx='26.8' cy='13' r='1.2'/%3E%3Ccircle cx='26.8' cy='16.4' r='1.2'/%3E%3Ccircle cx='33.7' cy='6' r='1.2'/%3E%3Ccircle cx='33.7' cy='13' r='1.2'/%3E%3Ccircle cx='33.7' cy='16.4' r='1.2'/%3E%3Ccircle cx='37.2' cy='6' r='1.2'/%3E%3Ccircle cx='37.2' cy='13' r='1.2'/%3E%3Ccircle cx='37.2' cy='16.4' r='1.2'/%3E%3Ccircle cx='40.6' cy='13' r='1.2'/%3E%3Ccircle cx='40.6' cy='16.4' r='1.2'/%3E%3Ccircle cx='44.1' cy='2.6' r='1.2'/%3E%3Ccircle cx='44.1' cy='6' r='1.2'/%3E%3Ccircle cx='44.1' cy='9.5' r='1.2'/%3E%3Ccircle cx='44.1' cy='13' r='1.2'/%3E%3Ccircle cx='44.1' cy='16.4' r='1.2'/%3E%3Ccircle cx='47.5' cy='2.6' r='1.2'/%3E%3Ccircle cx='47.5' cy='6' r='1.2'/%3E%3Ccircle cx='51' cy='2.6' r='1.2'/%3E%3Ccircle cx='51' cy='6' r='1.2'/%3E%3Ccircle cx='51' cy='13' r='1.2'/%3E%3Ccircle cx='54.4' cy='2.6' r='1.2'/%3E%3Ccircle cx='54.4' cy='6' r='1.2'/%3E%3Ccircle cx='54.4' cy='13' r='1.2'/%3E%3Ccircle cx='61.3' cy='2.6' r='1.2'/%3E%3Ccircle cx='61.3' cy='6' r='1.2'/%3E%3Ccircle cx='61.3' cy='9.5' r='1.2'/%3E%3Ccircle cx='61.3' cy='13' r='1.2'/%3E%3Ccircle cx='61.3' cy='16.4' r='1.2'/%3E%3C/g%3E%3Cg fill='%23f0f'%3E%3Ccircle cx='6.1' cy='2.6' r='1.2'/%3E%3Ccircle cx='6.1' cy='6' r='1.2'/%3E%3Ccircle cx='6.1' cy='9.5' r='1.2'/%3E%3Ccircle cx='6.1' cy='13' r='1.2'/%3E%3Ccircle cx='6.1' cy='16.4' r='1.2'/%3E%3Ccircle cx='13' cy='2.6' r='1.2'/%3E%3Ccircle cx='13' cy='9.5' r='1.2'/%3E%3Ccircle cx='13' cy='13' r='1.2'/%3E%3Ccircle cx='13' cy='16.4' r='1.2'/%3E%3Ccircle cx='16.5' cy='2.6' r='1.2'/%3E%3Ccircle cx='16.5' cy='9.5' r='1.2'/%3E%3Ccircle cx='16.5' cy='16.4' r='1.2'/%3E%3Ccircle cx='19.9' cy='2.6' r='1.2'/%3E%3Ccircle cx='19.9' cy='9.5' r='1.2'/%3E%3Ccircle cx='19.9' cy='16.4' r='1.2'/%3E%3Ccircle cx='23.4' cy='2.6' r='1.2'/%3E%3Ccircle cx='23.4' cy='6' r='1.2'/%3E%3Ccircle cx='23.4' cy='9.5' r='1.2'/%3E%3Ccircle cx='23.4' cy='16.4' r='1.2'/%3E%3Ccircle cx='30.3' cy='2.6' r='1.2'/%3E%3Ccircle cx='30.3' cy='6' r='1.2'/%3E%3Ccircle cx='30.3' cy='9.5' r='1.2'/%3E%3Ccircle cx='30.3' cy='13' r='1.2'/%3E%3Ccircle cx='30.3' cy='16.4' r='1.2'/%3E%3Ccircle cx='33.7' cy='2.6' r='1.2'/%3E%3Ccircle cx='33.7' cy='9.5' r='1.2'/%3E%3Ccircle cx='37.2' cy='2.6' r='1.2'/%3E%3Ccircle cx='37.2' cy='9.5' r='1.2'/%3E%3Ccircle cx='40.6' cy='2.6' r='1.2'/%3E%3Ccircle cx='40.6' cy='6' r='1.2'/%3E%3Ccircle cx='40.6' cy='9.5' r='1.2'/%3E%3Ccircle cx='47.5' cy='9.5' r='1.2'/%3E%3Ccircle cx='47.5' cy='13' r='1.2'/%3E%3Ccircle cx='47.5' cy='16.4' r='1.2'/%3E%3Ccircle cx='51' cy='9.5' r='1.2'/%3E%3Ccircle cx='51' cy='16.4' r='1.2'/%3E%3Ccircle cx='54.4' cy='9.5' r='1.2'/%3E%3Ccircle cx='54.4' cy='16.4' r='1.2'/%3E%3Ccircle cx='57.9' cy='2.6' r='1.2'/%3E%3Ccircle cx='57.9' cy='6' r='1.2'/%3E%3Ccircle cx='57.9' cy='9.5' r='1.2'/%3E%3Ccircle cx='57.9' cy='13' r='1.2'/%3E%3Ccircle cx='57.9' cy='16.4' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
|
||
--dropdown: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5.29 17.93 26.71 28.14 26.71-28.14' fill='none' stroke='%23ae6ba8' stroke-linecap='round' stroke-linejoin='round' stroke-width='10'/%3E%3C/svg%3E");
|
||
--dropdown_hover: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5.29 17.93 26.71 28.14 26.71-28.14' fill='none' stroke='%23fafafa' stroke-linecap='round' stroke-linejoin='round' stroke-width='10'/%3E%3C/svg%3E");
|
||
--yes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%2371c837' d='M55.9 8.6a4.3 4.3 0 00-3 1.3l-31 30.8L11.3 30a4.4 4.4 0 00-6 0l-4 4.2a4.4 4.4 0 000 6L19 57.7a4.4 4.4 0 006 0l37.8-37.9a4.4 4.4 0 000-6l-4-4a4.3 4.3 0 00-3-1.3z'/%3E%3C/svg%3E");
|
||
--yes_btn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23ae6ba8' d='M55.9 8.6a4.3 4.3 0 00-3 1.3l-31 30.8L11.3 30a4.4 4.4 0 00-6 0l-4 4.2a4.4 4.4 0 000 6L19 57.7a4.4 4.4 0 006 0l37.8-37.9a4.4 4.4 0 000-6l-4-4a4.3 4.3 0 00-3-1.3z'/%3E%3C/svg%3E");
|
||
--no: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='red' d='M9.7 0c-1 0-2.1.4-3 1.2L1.3 7a4.2 4.2 0 000 5.8L20.6 32 1.3 51.3a4.2 4.2 0 000 5.9l5.6 5.6a4.2 4.2 0 005.9 0L32 43.5l19.2 19.3a4.2 4.2 0 005.9 0l5.6-5.6a4.2 4.2 0 000-5.9L43.5 32l19.2-19.3a4.1 4.1 0 000-5.9l-5.6-5.6a4.2 4.2 0 00-5.8 0L32 20.5 12.6 1.2A4.2 4.2 0 009.7 0z'/%3E%3C/svg%3E");
|
||
--info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23fcf' stroke='%23313' d='M31.4 3a28.8 28.8 0 00-1.6.1 28.8 28.8 0 00-26.6 29 28.8 28.8 0 1057.6 0A28.8 28.8 0 0031.4 3zm.6 9.3a4.5 4.5 0 014.5 4.5 4.5 4.5 0 01-4.5 4.4 4.5 4.5 0 01-4.5-4.4 4.5 4.5 0 014.5-4.5zm-4.5 13.1h9v26.3h-9V25.4z'/%3E%3C/svg%3E");
|
||
--eye: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m63.95 33.1a2.03 2.03 0 0 0 0-1.97c-6.13-11.3-18.1-18.95-31.85-18.95s-25.7 7.66-31.85 18.94a2.03 2.03 0 0 0 0 1.97c6.13 11.3 18.1 18.95 31.85 18.95s25.7-7.67 31.85-18.95z' fill='%23894c84'/%3E%3Cpath d='m32.1 47.4c-8.45 0-15.3-6.85-15.3-15.3s6.85-15.3 15.3-15.3 15.3 6.85 15.3 15.3-6.85 15.3-15.3 15.3z' fill='%23313'/%3E%3Cpath d='m32.1 24.3a7.72 7.72 0 0 0 -1.87.22 4.05 4.05 0 0 1 .99 2.65c0 2.24-1.8 4.04-4.04 4.04-1 0-1.93-.37-2.65-1a7.66 7.66 0 0 0 -.22 1.87 7.79 7.79 0 0 0 7.79 7.79c4.3 0 7.8-3.5 7.8-7.8s-3.5-7.8-7.8-7.8z' fill='%23894c84'/%3E%3C/svg%3E");
|
||
--eye_hover: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m63.95 33.1a2.03 2.03 0 0 0 0-1.97c-6.13-11.3-18.1-18.95-31.85-18.95s-25.7 7.66-31.85 18.94a2.03 2.03 0 0 0 0 1.97c6.13 11.3 18.1 18.95 31.85 18.95s25.7-7.67 31.85-18.95z' fill='%23dbd'/%3E%3Cpath d='m32.1 47.4c-8.45 0-15.3-6.85-15.3-15.3s6.85-15.3 15.3-15.3 15.3 6.85 15.3 15.3-6.85 15.3-15.3 15.3z' fill='%23313'/%3E%3Cpath d='m32.1 24.3a7.72 7.72 0 0 0 -1.87.22 4.05 4.05 0 0 1 .99 2.65c0 2.24-1.8 4.04-4.04 4.04-1 0-1.93-.37-2.65-1a7.66 7.66 0 0 0 -.22 1.87 7.79 7.79 0 0 0 7.79 7.79c4.3 0 7.8-3.5 7.8-7.8s-3.5-7.8-7.8-7.8z' fill='%23dbd'/%3E%3C/svg%3E");
|
||
--arrow_left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23dbd' viewBox='0 0 64 64'%3E%3Cpath d='M4.5 32l30-30v20.2h25v19.6h-25V62z'/%3E%3C/svg%3E");
|
||
--arrow_right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23dbd' viewBox='0 0 64 64'%3E%3Cpath d='M59.5 32l-30-30v20.2h-25v19.6h25V62z'/%3E%3C/svg%3E");
|
||
--arrow_up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23dbd' viewBox='0 0 64 64'%3E%3Cpath d='M32 4.5l-30 30h20.2v25h19.6v-25H62z'/%3E%3C/svg%3E");
|
||
--arrow_up_transit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%237f7' viewBox='0 0 64 64'%3E%3Cpath d='M32 4.5l-30 30h20.2v25h19.6v-25H62z'/%3E%3C/svg%3E");
|
||
--arrow_down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23dbd' viewBox='0 0 64 64'%3E%3Cpath d='M32 59.5l-30-30h20.2v-25h19.6v25H62z'/%3E%3C/svg%3E");
|
||
--arrow_double: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23dbd' viewBox='0 0 64 64'%3E%3Cpath d='M2.4 32l20.9-20.9v14h6.3v13.7h-6.3v14zM61.6 32L40.7 11.1v14h-6.3v13.7h6.3v14z'/%3E%3C/svg%3E");
|
||
--error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg stroke-linejoin='round'%3E%3Cpath fill='none' stroke='%23300' stroke-width='10' d='M58 54.6H6l26-45z'/%3E%3Cpath fill='%23fff' stroke='%23b00' stroke-width='3' d='M58 54.6H6l26-45z'/%3E%3C/g%3E%3Cpath d='M29.5 24.5h5v14.7h-5zm0 18.6h5v5.6h-5z'/%3E%3C/svg%3E");
|
||
--ibgw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23dbd' viewBox='0 0 64 64'%3E%3Cpath d='M32 11.32a20.7 20.7 0 00-20.26 16.51.9.9 0 00-.18-.02H1.98a.94.94 0 00-.7.32c-.18.2-.29.48-.28.76v6.22c0 .29.1.56.28.76a.94.94 0 00.7.32h9.59a.9.9 0 00.18-.02 20.68 20.68 0 0040.51 0 .9.9 0 00.18.02h9.58a.94.94 0 00.7-.32c.18-.2.29-.48.28-.76v-6.22c0-.59-.44-1.07-.98-1.07h-9.59a.9.9 0 00-.18.02A20.7 20.7 0 0032 11.32zm0 3.43a17.26 17.26 0 010 34.5 17.26 17.26 0 010-34.5zm-2.14 4.83v10.43h-4.14c-1.04 0-1.46.8-.94 1.78l6.28 11.88c.33.62.78.85 1.2.69.25-.09.49-.32.69-.69l6.28-11.88c.52-.98.1-1.78-.94-1.78h-4.14V19.58z'/%3E%3C/svg%3E");
|
||
--obep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23dbd' viewBox='0 0 64 64'%3E%3Cpath d='M32 52.68a20.7 20.7 0 01-20.26-16.51.98 1.07 0 01-.18.02H1.98A.98 1.07 0 011 35.11v-6.22a.98 1.07 0 01.98-1.08h9.59a.98 1.07 0 01.18.02 20.68 20.68 0 0140.51 0 .98 1.07 0 01.18-.02h9.58a.98 1.07 0 01.98 1.08v6.22a.98 1.07 0 01-.98 1.07h-9.59a.98 1.07 0 01-.18-.02A20.7 20.7 0 0132 52.68zm0-3.43a17.26 17.26 0 000-34.5 17.26 17.26 0 000 34.5zm-2.14-4.83V33.99h-4.14c-1.04 0-1.46-.8-.94-1.78l6.28-11.88c.33-.62.78-.85 1.2-.69.25.09.49.32.69.69l6.28 11.88c.52.98.1 1.78-.94 1.78h-4.14v10.43z'/%3E%3C/svg%3E");
|
||
--ptcp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23dbd' d='M32 11.32a20.7 20.7 0 00-20.26 16.51.98-1.07 0 00-.17-.02H1.98A.98-1.07 0 001 28.88v6.22a.98-1.07 0 00.98 1.07h9.59a.98-1.07 0 00.18-.02 20.68 20.68 0 0040.51.02.98-1.07 0 00.18.02h9.58a.98-1.07 0 00.98-1.08v-6.22a.98-1.07 0 00-.98-1.08h-9.59a.98-1.07 0 00-.18.02A20.7 20.7 0 0032 11.32zm0 3.43a17.26 17.26 0 010 34.5 17.26 17.26 0 010-34.5z'/%3E%3C/svg%3E");
|
||
--success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%2371c837'/%3E%3Ccircle cx='32' cy='32' r='27.1' fill='%23fff'/%3E%3Ccircle cx='32' cy='32' r='22.2' fill='%2371c837'/%3E%3Cpath fill='%23fff' d='M44 19.4a2.2 2.2 0 00-1.5.6L27 35.5 21.6 30c-.8-.8-2.3-.8-3 0l-2.1 2.1c-.8.8-.7 2.2 0 3l9 8.9c.8.8 2.2.8 3 0l19-19c.8-.8.8-2.3 0-3l-2-2a2.2 2.2 0 00-1.5-.7z'/%3E%3C/svg%3E");
|
||
--planet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%231ea6c6'/%3E%3Cpath fill='%23f7cf52' d='M59.5 15.6c-5-3.6-6.9-1.8-7.6-.3a2 2 0 01-1.8 1.1h-.2a2 2 0 01-1.9-2c0-4.2 2.7-8.4 2.7-8.4a32.1 32.1 0 018.8 9.6zM64 32a32 32 0 01-1.9 10.8c-1-1.7-1.4-3.8-1.5-5.6-.1-2-2-3.5-4-3.2a5 5 0 01-5.7-4.3 19.4 19.4 0 01-.2-3.4s.4-4.9 2.8-7.2a4 4 0 011.2-1.1 2.5 2.5 0 011.8-.5c2.3.3 4 0 4 0A31.9 31.9 0 0164 32zM37.2 5.3l-3.9 5c-.5-3.8-5-7.1-3.9-7 6 .5 7.8 2 7.8 2zm-8 5.3a3.2 3.2 0 01-1.3 4.8 26.1 26.1 0 00-8.5 5.6 3 3 0 01-3 1c-1.5-.3-3.4-.3-4.5 1.6-2 3.6 5.8 7.6 5.4 12a3.6 3.6 0 00-2.1-2.4c-2.8-1.2-5.2-3-6.8-5.9C5 21.1 7.4 13.7 9.8 9a32 32 0 0110.3-6.6s5.3 3.3 9 8.3zm7.5 31c3 1.7 3.7 5.8 1.4 8.5l-4 4.7-5 5.3-3.3 3.3c-3-4.3-2-12.5-2-12.5l-3-2.2a7.6 7.6 0 01-3.3-7 17 17 0 00-.2-6c2.6-.8 5.3-1.2 7.2-1.4a5 5 0 014 1.3c2 2 5.4 4.2 8.2 6z'/%3E%3C/svg%3E");
|
||
--tunnel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 64 64'%3E%3Cdefs%3E%3Cpath id='A' fill-opacity='.8' d='M0 0h32v32H0z'/%3E%3C/defs%3E%3ClinearGradient id='B' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff0'/%3E%3Cstop offset='.6' stop-color='%23f7cc22'/%3E%3Cstop offset='1' stop-color='%23d4aa00'/%3E%3C/linearGradient%3E%3CradialGradient id='C' cx='282.7' cy='938.5' r='184.6' gradientTransform='matrix(-.19558 -.1369 -.05868 .07823 153.4 13)' xlink:href='%23B'/%3E%3Cfilter id='D' width='1' height='1' x='0' y='0'%3E%3CfeColorMatrix in='SourceGraphic' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3CradialGradient id='E' cx='413' cy='807.7' r='151.1' gradientTransform='matrix(-.17603 0 0 .19558 97.6 -124.9)' xlink:href='%23B'/%3E%3CradialGradient id='F' cx='306.1' cy='1055.1' r='184.6' gradientTransform='matrix(-.21514 0 0 .07823 107.6 -30.2)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23a80'/%3E%3Cstop offset='.8' stop-color='%23a28100'/%3E%3Cstop offset='1' stop-color='%23540'/%3E%3C/radialGradient%3E%3Cmask id='G'%3E%3Cg filter='url(%23D)'%3E%3Cuse fill-opacity='.5' xlink:href='%23A'/%3E%3C/g%3E%3C/mask%3E%3CradialGradient id='H' cx='478.2' cy='713.7' r='76.4' gradientTransform='matrix(-.12 .21 .13 .07 -27.3 -142.6)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CclipPath id='I'%3E%3Cuse xlink:href='%23A'/%3E%3C/clipPath%3E%3Cpath d='M50.3 24.7c1 3.3 1.5 6 2 8.6 4 3.8 10.2 10 10.5 12.4.2 2.4-9.7 11-14.1 12-3 1-10.8.4-19.8-2.5-8.2-2.5-16-6-23.2-10.7-2.8-2-4.5-4.4-4.5-7 0-2.4 1.2-4.6 3.1-6L4.1 29A22.1 22.1 0 0125.8 6.1c14.2.5 21.6 9.6 24.5 18.6z'/%3E%3Cg transform='translate(.2 .1)'%3E%3Cpath fill='url(%23C)' d='M49 25.1c1 3.2 1.4 5.9 1.8 8.2l2.1 1.8c2 1.6 8.4 8 8.4 10.2 0 2.7-5.8 6.4-8.2 8.4-3.3 2.5-4.3 3-11.5 3A91 91 0 016.9 43.4c-2.6-2-4-3.9-4-6.4 0-2 1-4 3-5.5L5.5 29a21 21 0 0120-21.7A24.8 24.8 0 0149 25z'/%3E%3Cpath fill='url(%23E)' d='M50.8 33.3C50.7 45 35.4 47.8 28.4 48 18.2 48 5.7 40.8 5.7 31.6V29c9.2-34.5 39.1-17.5 45.1 4.3z'/%3E%3Cpath fill='url(%23F)' d='M3 36.5c.2 2.1 2.4 4.4 4.8 6.2a101 101 0 0033.7 13c4.2.3 8-.6 11.3-3.1 3.4-2.7 8-5 8.6-7.5.4 2.8-5.7 6.6-8.1 8.6a15 15 0 01-11.8 3A89 89 0 016.9 43.5c-2.7-2-4.1-4.3-4.1-6.4v-.6z'/%3E%3C/g%3E%3Cpath d='M46.9 29.7v1.4C45.7 19.6 31.3 4.8 18.3 8.6c2-.6 4.1-1 6.4-1C36.3 7.8 47 19.4 47 29.7z'/%3E%3Cpath d='M20.3 8.2c8.6 2 16 11.3 17.6 23.8.4 3.4.4 6.7 0 9.8 0-2.5 0-5-.4-7.8-2-13.7-10.3-24-19.5-24.9zm0 0'/%3E%3Cg clip-path='url(%23I)' mask='url(%23G)' transform='matrix(1.95584 0 0 1.95584 .6 .8)'%3E%3Cpath fill='url(%23H)' d='M11 5.6c2.1 1.8 3.8 4.3 5 7.3a28.5 28.5 0 00-12.3 1c-.2-4.7 3-8.2 7.4-8.3zm0 0'/%3E%3C/g%3E%3C/svg%3E");
|
||
/* tunnel status */
|
||
--established: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%233b3' d='M17.4 2.5l3.4 7c.3.3.7.7 1.3.8l7.5 1c1.3.2 1.9 2 1 2.8L25 19.4c-.4.4-.5 1-.4 1.5l1.2 7.5a1.6 1.6 0 01-2.3 1.7l-6.7-3.5c-.5-.3-1.1-.3-1.5 0L8.5 30c-1.3.7-2.6-.3-2.4-1.7L7.4 21c0-.6 0-1.1-.5-1.5l-5.4-5.3a1.6 1.6 0 01.9-2.8l7.5-1c.5 0 1-.4 1.3-.9l3.4-6.9c.5-1.1 2.2-1.1 2.8 0z'/%3E%3C/svg%3E");
|
||
--building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23dd0' d='M17.4 2.5l3.4 7c.3.3.7.7 1.3.8l7.5 1c1.3.2 1.9 2 1 2.8L25 19.4c-.4.4-.5 1-.4 1.5l1.2 7.5a1.6 1.6 0 01-2.3 1.7l-6.7-3.5c-.5-.3-1.1-.3-1.5 0L8.5 30c-1.3.7-2.6-.3-2.4-1.7L7.4 21c0-.6 0-1.1-.5-1.5l-5.4-5.3a1.6 1.6 0 01.9-2.8l7.5-1c.5 0 1-.4 1.3-.9l3.4-6.9c.5-1.1 2.2-1.1 2.8 0z'/%3E%3C/svg%3E");
|
||
--failed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23f00' d='M17.4 2.5l3.4 7c.3.3.7.7 1.3.8l7.5 1c1.3.2 1.9 2 1 2.8L25 19.4c-.4.4-.5 1-.4 1.5l1.2 7.5a1.6 1.6 0 01-2.3 1.7l-6.7-3.5c-.5-.3-1.1-.3-1.5 0L8.5 30c-1.3.7-2.6-.3-2.4-1.7L7.4 21c0-.6 0-1.1-.5-1.5l-5.4-5.3a1.6 1.6 0 01.9-2.8l7.5-1c.5 0 1-.4 1.3-.9l3.4-6.9c.5-1.1 2.2-1.1 2.8 0z'/%3E%3C/svg%3E");
|
||
--expiring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23999999dd' d='M17.4 2.5l3.4 7c.3.3.7.7 1.3.8l7.5 1c1.3.2 1.9 2 1 2.8L25 19.4c-.4.4-.5 1-.4 1.5l1.2 7.5a1.6 1.6 0 01-2.3 1.7l-6.7-3.5c-.5-.3-1.1-.3-1.5 0L8.5 30c-1.3.7-2.6-.3-2.4-1.7L7.4 21c0-.6 0-1.1-.5-1.5l-5.4-5.3a1.6 1.6 0 01.9-2.8l7.5-1c.5 0 1-.4 1.3-.9l3.4-6.9c.5-1.1 2.2-1.1 2.8 0z'/%3E%3C/svg%3E");
|
||
--exploratory: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3CradialGradient id='a' cx='-23' cy='27.6' r='15.6' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2364b5f6'/%3E%3Cstop offset='1' stop-color='%237bc9ff'/%3E%3C/radialGradient%3E%3Cg transform='matrix(.62496 0 0 .62496 1 1)'%3E%3Cg fill='%23616161' transform='matrix(-1.1993 0 0 1.1993 52.8 -4.8)'%3E%3Cpath d='M29.2 32l2.8-2.8 12 12-2.8 2.8z'/%3E%3Ccircle cx='20' cy='20' r='16'/%3E%3C/g%3E%3Cpath fill='%2337474f' d='M9.7 41.6l-3.3-3.3L0 44.7 3.3 48z'/%3E%3Ccircle cx='-28.8' cy='19.2' r='15.6' fill='url(%23a)' transform='scale(-1 1)'/%3E%3Cpath fill='%23bbdefb' fill-opacity='.9' d='M20.5 9.9a10.8 10.8 0 0116.6 0c.4.4.3 1.3-.2 1.6-.4.5-1.3.4-1.6 0a8.5 8.5 0 00-13 0c-.2.2-.6.4-1 .4l-.7-.2c-.5-.5-.5-1.4-.1-1.8z'/%3E%3C/g%3E%3C/svg%3E");
|
||
--local: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3ClinearGradient id='a' x1='7.8' x2='23.1' y1='10.4' y2='33.3' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffd5f6'/%3E%3Cstop offset='1' stop-color='%23fae'/%3E%3C/linearGradient%3E%3Cpath fill='%239d93ac' d='M35.2 44.9l1 7.6h-8.4l1-7.6z'/%3E%3Cpath fill='%23beb7c8' d='M60 46c0 1.3-1.1 2.4-2.4 2.4H6.4A2.4 2.4 0 014 46V10c0-1.3 1.1-2.4 2.4-2.4h51.2c1.3 0 2.4 1 2.4 2.4zm-37 6.2h18a2 2 0 012 2v.2a2 2 0 01-2 2H23a2 2 0 01-2-2v-.2a2 2 0 012-2z'/%3E%3Ccircle cx='32' cy='44.8' r='1.3' fill='%23dedbe3'/%3E%3Cpath fill='%23de87cd' d='M8.1 12v29.3h48.1V12z'/%3E%3Cpath fill='url(%23a)' d='M7.5 12.5v29l49-29z' transform='matrix(.98 0 0 1.01 .7 -.6)'/%3E%3Cpath fill='none' stroke='%23442178' stroke-width='2' d='M8 12v29.3h48V12z'/%3E%3C/svg%3E");
|
||
--time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg transform='translate(1 1)'%3E%3Ccircle cx='31.1' cy='31.1' r='28.1' stroke='%23dbd' stroke-width='6'/%3E%3Cpath fill='none' stroke='%23dbd' stroke-linecap='round' stroke-linejoin='round' stroke-width='5' d='M30.7 13.2v18.5h16.5'/%3E%3Ccircle cx='31.1' cy='31.1' r='4.5' fill='%23dbd'/%3E%3C/g%3E%3C/svg%3E");
|
||
--tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23dbd' d='M63 37.9v20.3c-.2 2.3-2.6 4.5-4.9 4.7l-20.3.1a4.3 4.3 0 01-2.9-1.4L2.3 29.2a4.3 4.3 0 010-6.1L23.1 2.3a4.3 4.3 0 016.1 0l32.5 32.5c.9.8 1.3 1.9 1.3 3.2zm-9.3 5.5a7.3 7.3 0 10-10.3 10.2 7.3 7.3 0 0010.3 0 7.1 7.1 0 000-10.2z'/%3E%3C/svg%3E");
|
||
--shutdown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23717' d='M16 1a3 3 0 00-3 3v9.3a3 3 0 002.9 2.9 3 3 0 003-2.8V4a3 3 0 00-3-3zm7.2 3.2a3 3 0 00-2.8 3 3 3 0 001.1 2.2 8.8 8.8 0 013.3 6.9 8.8 8.8 0 01-9.9 8.8 8.8 8.8 0 01-4.5-15.7 3 3 0 001-2.2c0-2.4-2.7-3.8-4.6-2.3a14.6 14.6 0 00-5.5 12.9 14.7 14.7 0 1023.9-13 2.8 2.8 0 00-1.9-.6z'/%3E%3C/svg%3E");
|
||
--shutdown_hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23900' d='M16 1a3 3 0 00-3 3v9.3a3 3 0 002.9 2.9 3 3 0 003-2.8V4a3 3 0 00-3-3zm7.2 3.2a3 3 0 00-2.8 3 3 3 0 001.1 2.2 8.8 8.8 0 013.3 6.9 8.8 8.8 0 01-9.9 8.8 8.8 8.8 0 01-4.5-15.7 3 3 0 001-2.2c0-2.4-2.7-3.8-4.6-2.3a14.6 14.6 0 00-5.5 12.9 14.7 14.7 0 1023.9-13 2.8 2.8 0 00-1.9-.6z'/%3E%3C/svg%3E");
|
||
--noshutdown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%230a4' d='M32.1 12.63a3.89 3.89 0 00-3.89 3.89v12.05a3.89 3.89 0 003.76 3.76 3.89 3.89 0 003.89-3.63V16.52a3.89 3.89 0 00-3.89-3.89zm9.33 4.15a3.89 3.89 0 00-3.63 3.89 3.89 3.89 0 001.43 2.85 11.4 11.4 0 014.28 8.94 11.4 11.4 0 01-12.83 11.4 11.4 11.4 0 01-5.83-20.34 3.89 3.89 0 001.3-2.85c0-3.11-3.5-4.93-5.97-2.98a18.92 18.92 0 00-7.13 16.71 19.05 19.05 0 1030.97-16.84 3.63 3.63 0 00-2.46-.78z'/%3E%3Cpath fill='%23d40000' d='M32 1a31 31 0 100 62 31 31 0 000-62zm0 7.9c4 0 8 1 11.3 2.9a1.9 1.9 0 01.4 3l-29 28.9a1.9 1.9 0 01-3-.5A23 23 0 0132 9zm18.5 10.9a1.9 1.9 0 011.7 1 23.2 23.2 0 01-31.5 31.5 1.9 1.9 0 01-.4-3l29-29a1.9 1.9 0 011.2-.5z'/%3E%3C/svg%3E");
|
||
--transit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%235b5' d='M13.4 21.5H23V34h13V21.5h9.6L29.5 2.4z'/%3E%3Cpath fill='%23ae6ba8' d='M49.2 30.2l-3 1.5a.5.5 0 00-.1 0L40 37.7a.5.5 0 000 .2.5.5 0 00-.2.1.5.5 0 000 .1.5.5 0 000 .1l.5 1.5a.5.5 0 00.3.3l1.4.6a.5.5 0 00.5 0l2.9-2.3 4.5-4.6a.5.5 0 00.2-.2l.8-2a.5.5 0 00-.3-.7l-1-.5a.5.5 0 00-.4 0zm7.3 3.2l-2.2.3a.5.5 0 00-.2 0l-7 6-3 3.6a.5.5 0 000 .6l.8 1.3a.5.5 0 00.3.3l1.5.2a.5.5 0 00.4-.1l5.8-5 4-4.7a.5.5 0 000-.3l.2-1.7a.5.5 0 00-.6-.6zm-45.4 5l-9.9.6a.5.5 0 00-.5.5L1 58.2a.5.5 0 00.4.5l26 3.1a.5.5 0 00.2 0l19.3-2.1a.5.5 0 00.3-.1l9.7-9 6.4-8.6a.5.5 0 00-.1-.7l-3.8-2.8a.5.5 0 00-.6 0c-2.4 2.5-4.6 5-7 7.3l-10 8.2-19.7.5 3.3-4.3 14-.8a.5.5 0 00.6-.5l-.1-5.4a.5.5 0 00-.5-.5l-17.5-1-10.5-3.6a.5.5 0 00-.2 0z'/%3E%3C/svg%3E");
|
||
--notransit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%235b5' d='M12.2 36.8h12v14.4h15.6V36.8h12l-19.2-24z'/%3E%3Cpath fill='%23d40000' d='M32 1a31 31 0 100 62 31 31 0 000-62zm0 7.9c4 0 8 1 11.3 2.9a1.9 1.9 0 01.4 3l-29 28.9a1.9 1.9 0 01-3-.5A23 23 0 0132 9zm18.5 10.9a1.9 1.9 0 011.7 1 23.2 23.2 0 01-31.5 31.5 1.9 1.9 0 01-.4-3l29-29a1.9 1.9 0 011.2-.5z'/%3E%3C/svg%3E");
|
||
--testpeer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23e3dbdb' d='M0 0h40.5v64H0z'/%3E%3Cpath fill='%23f2484b' d='M8.9 16.1a1 1 0 01-.8-.3l-2-2.1a1 1 0 011.4-1.5L9 13.6l4.9-5a1 1 0 011.4 1.6l-5.6 5.6a1 1 0 01-.7.3z'/%3E%3Cpath fill='%236da8d6' d='M33.7 13.3H17.5a1 1 0 110-2.1h16.2a1 1 0 110 2.1zm-.5 14.4H15.4a1 1 0 110-2.2h17.8a1 1 0 110 2.2zM5.7 23.9h5.4v5.4H5.7zm27.6 16.9H15.5a1 1 0 110-2h17.8a1 1 0 110 2zM5.7 37.1h5.4v5.4H5.7zM33.3 54H15.5a1 1 0 110-2.1h17.8a1 1 0 110 2.1zM5.7 50.3h5.4v5.4H5.7z'/%3E%3Cg fill='%23eeb490' transform='translate(22.9 2) scale(.96766)'%3E%3Ccircle cx='10.8' cy='32.6' r='4'/%3E%3Ccircle cx='31.8' cy='32.6' r='4'/%3E%3C/g%3E%3Cpath fill='%23660080' d='M64 64H22.9v-7.4a6.8 6.8 0 015.9-6.7l9-3.6H49l9.1 3.6a6.8 6.8 0 015.9 6.7z'/%3E%3Cpath fill='%23aa00d4' d='M36 48.2v3.3c0 4.3 3.4 7.8 7.7 7.8 4-.1 7.2-3.4 7.2-7.6v-3.5c0-1.1-1-2.1-2-2.1H38.1c-1.3 0-2.3 1-2.3 2.1z'/%3E%3Cpath fill='%23eeb490' d='M38.4 43.5V49a5.1 5.1 0 1010.2 0v-5.5z'/%3E%3Cpath fill='%23faccb4' d='M48.6 23.4H38.4a4.4 4.4 0 00-4.4 4.3v9.9a9.6 9.6 0 0019.2 0v-9.9a4.4 4.4 0 00-4.5-4.4z'/%3E%3Cg fill='%2356545f'%3E%3Cpath d='M53 19.2s7.4 1 0 14.9v-5.8s-.5-4-3-4.3z'/%3E%3Cpath d='M48 14h-9a5.5 5.5 0 00-1.1 0c-13.9 0-4 20.8-4 20.8 0-8 5-8 5-8H48A6.4 6.4 0 0048 14z'/%3E%3C/g%3E%3C/svg%3E");
|
||
--reloadcss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23e3dbdb' d='M0 0h45.71v64H0z'/%3E%3Cpath fill='%2304a' d='M19.47 39.69H4.24a1.05 1.05 0 110-2.11h15.23a1.05 1.05 0 110 2.1zm11.57 13.79H4.24a1.05 1.05 0 110-2.1h26.8a1.05 1.05 0 110 2.1zm-6-6.9H4.24a1.05 1.05 0 110-2.1h20.8a1.05 1.05 0 110 2.1zm8 13.8H4.24a1.05 1.05 0 110-2.1h28.8a1.05 1.05 0 110 2.1zM12.3 4.34q-1.52.5-2.43 1.73-.92 1.23-.92 2.8 0 .8.25 2.31.23 1.57.23 2.36 0 1.55-.7 2.47-.45.6-2.01 1.66-.82.57-1.26.82-.82.47-1.34.57 2 .29 3.6 1.98 1.55 1.71 1.55 3.73 0 .76-.23 2.28-.24 1.56-.24 2.32 0 1.48.97 2.68.92 1.17 2.37 1.68v.75h-.1q-2.4 0-4.26-1.55-1.98-1.64-1.98-4 0-.92.37-2.77.32-1.83.32-2.75 0-1.25-1.06-2.4-.95-1.03-2.24-1.5v-.95q.96-.3 2.08-1.26 1.1-.92 1.32-1.78.06-.27.06-1 0-.92-.35-2.77-.37-1.8-.37-2.74 0-2.28 2.08-3.9 1.92-1.46 4.3-1.46zm13.41 15.17q-.76.05-1.98 1.16-1.21 1.13-1.42 1.92-.1.4-.1.92 0 .94.4 2.71.36 1.83.36 2.75 0 2.35-2.05 3.96-1.92 1.49-4.32 1.49v-.7q1.48-.5 2.4-1.7.94-1.2.94-2.75 0-.8-.23-2.32-.27-1.52-.27-2.3 0-1.53.72-2.53.53-.66 2.02-1.7.82-.57 1.26-.83.82-.47 1.35-.56-2.01-.31-3.6-1.99-1.6-1.7-1.6-3.7 0-.77.2-2.32.21-1.55.21-2.3 0-1.49-.89-2.68-.93-1.16-2.38-1.65v-.77h.06q2.36 0 4.26 1.53 2.05 1.58 2.05 3.89 0 .93-.37 2.79-.36 1.84-.36 2.76 0 1.29 1.07 2.45.95 1.05 2.27 1.52z'/%3E%3Cpath fill='%23141' stroke='%23025' stroke-linejoin='round' stroke-width='3.66' d='M41.38 10.81v3.37a17.64 17.64 0 00-15.22 17.78 17.64 17.64 0 0017.42 17.86v.08h.14l3.22 3.29v-3.37a17.64 17.64 0 0015.23-17.86 17.64 17.64 0 00-17.42-17.78v0-.08h-.15zm0 11.27v5.13l4.98-5.13a10.1 10.1 0 01.58 19.76v-5.12l-5.05 5.12a10.1 10.1 0 01-8.2-9.95c0-4.76 3.3-8.78 7.69-9.8z'/%3E%3Cpath fill='%23aef' d='M43.58 14.03h1.1l-1.1 5.05v2.64a10.1 10.1 0 00-9.89 10.1 10.1 10.1 0 009.89 10.1l1.1-.15-1.1 7.83a17.57 17.57 0 01-17.42-17.64 17.64 17.64 0 0117.42-17.93z'/%3E%3Cpath fill='none' stroke='%23025' stroke-width='3.66' d='M47.02 36.8l-8.2 8.12 8.2 8.2'/%3E%3Cg fill='%2300aad4'%3E%3Cpath d='M44.67 49.9h-1.02l1.02-5.06v-2.7a10.1 10.1 0 000-20.2l-1.1.07 1.1-7.83a17.71 17.71 0 0117.5 17.86 17.64 17.64 0 01-17.5 17.86z'/%3E%3Cpath d='M46.94 53.04V36.8l-8.2 8.13z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%23025' stroke-width='3.5' d='M41.3 27.13l8.2-8.12-8.27-8.27'/%3E%3Cpath fill='%23aef' d='M41.38 10.81v16.32l8.2-8.12z'/%3E%3C/svg%3E");
|
||
--ping:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23dbd' d='M32.6 4.14a28.06 28.06 0 00-25.38 16.2c-4.6 9.6-3 21.77 3.96 29.84a28.1 28.1 0 0028.65 9.02 28.1 28.1 0 0020.35-22.22 28.1 28.1 0 00-11.56-27.8A27.87 27.87 0 0032.6 4.14zm0 6.07a22 22 0 0119.92 12.74 21.94 21.94 0 11-41.56 12.83 22.03 22.03 0 019.2-21.72 21.98 21.98 0 0112.43-3.86zm0 13.4a8.6 8.6 0 00-8.23 6.2 8.6 8.6 0 003 9.1 8.6 8.6 0 009.43.68 8.58 8.58 0 004.3-8.38 8.6 8.6 0 00-8.52-7.63z'/%3E%3C/svg%3E");
|
||
/* theme colors */
|
||
--scrollbar: #414 #101;
|
||
--ink: #dbd;
|
||
--ink-darker: #b9b;
|
||
--ink-faded: rgba(221,187,221, .5);
|
||
--notify: #5f5;
|
||
--page: #120012;
|
||
--main-boxshadow: 0 0 0 1px var(--border), 0 0 0 2px #000, 0 0 0 4px #313, 0 0 0 5px #212, 0 0 0 6px #101;
|
||
--link: #ae6ba8;
|
||
--link_hover: #fafafa;
|
||
--border: #515;
|
||
--border2: #404;
|
||
--button-border: #313;
|
||
--button: linear-gradient(#303, #202 50%, #202 50%, #101);
|
||
--button_hover: linear-gradient(to bottom, #94518e, #733f6f 50%, #733f6f 50%, #42243f);
|
||
--button_active: linear-gradient(to bottom, #202, #303);
|
||
--active_shadow: inset 3px 3px 3px rgba(0,0,0,.8);
|
||
--hr: linear-gradient(to right, #313, #414, #313);
|
||
--highlight: inset 0 0 0 1px #101;
|
||
--tr: #180818;
|
||
--tr-alt: #202;
|
||
--tr-inner: #240024;
|
||
--header: linear-gradient(to bottom, #202, #101 50%, #101 50%, #000);
|
||
--th: linear-gradient(to bottom, #180018, #080008);
|
||
--th_multicolumn: linear-gradient(to bottom, #202, #101);
|
||
--sectiontitle: linear-gradient(to bottom, #240024, #140014 50%, #140014 50%, #080008);
|
||
--section: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(8,0,8,.5));
|
||
--b64: #101;
|
||
--b64-ink: #2475c2;
|
||
--b64-boxshadow: 0 0 0 1px #000, inset 0 0 0 1px #202;
|
||
--input_text: var(--button-border);
|
||
--menu: #303;
|
||
--menu-ink: #fff;
|
||
--textshadow: 0 1px 1px rgba(0,0,0.7);
|
||
}
|
||
|
||
::selection {
|
||
background: #d50;
|
||
color: #fff;
|
||
}
|
||
|
||
html, body {
|
||
min-height: 100%;
|
||
background: var(--page);
|
||
}
|
||
|
||
html, body, textarea {
|
||
scrollbar-color: var(--scrollbar);
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: table;
|
||
line-height: 1.6;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
text-align: center;
|
||
font: 14pt var(--bodyfont);
|
||
color: var(--ink);
|
||
background: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(32,0,32,.1), rgba(0,0,0,.1));
|
||
background-attachment: fixed, fixed, fixed !important;
|
||
}
|
||
|
||
.wrapper {
|
||
margin: 0 auto;
|
||
padding: 5px;
|
||
width: 100%;
|
||
display: table-cell;
|
||
vertical-align: middle;
|
||
text-align: center;
|
||
}
|
||
|
||
.header {
|
||
display: inline-block;
|
||
width: 100%;
|
||
vertical-align: middle;
|
||
position: relative;
|
||
}
|
||
|
||
a, label, button, #navlinks, .sectiontitle span, .chrome, .notify,
|
||
#tunnelsummary th:last-child, #tunnelsummary td:last-child {
|
||
user-select: none;
|
||
}
|
||
|
||
.listitem a, .listitem a + span, .b32 {
|
||
user-select: all;
|
||
}
|
||
|
||
#shutdownbutton, #enabletransit, #disabletransit {
|
||
position: absolute;
|
||
top: 0;
|
||
right: -5px;
|
||
display: inline-block;
|
||
width: 28px;
|
||
height: 44px;
|
||
font-size: 0;
|
||
background: var(--shutdown) no-repeat center center / 24px;
|
||
mix-blend-mode: luminosity;
|
||
display: none; /* while inactive */
|
||
}
|
||
|
||
#enabletransit, #disabletransit {
|
||
right: 38px;
|
||
background: var(--notransit) no-repeat center center / 24px;
|
||
}
|
||
|
||
#shutdownbutton:hover, #shutdownbutton:focus {
|
||
background: var(--shutdown_hover) no-repeat center center / 24px;
|
||
mix-blend-mode: normal;
|
||
}
|
||
|
||
#enabletransit:hover, #enabletransit:focus {
|
||
background: var(--transit) no-repeat center center / 24px;
|
||
mix-blend-mode: normal;
|
||
}
|
||
|
||
#shutdownbutton:active {
|
||
transform: scale(.85);
|
||
}
|
||
|
||
#shutdownbutton:active[data-tooltip]::after {
|
||
display: none;
|
||
}
|
||
|
||
b {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.toast b {
|
||
font-weight: 900;
|
||
}
|
||
|
||
#main {
|
||
margin: 0 auto;
|
||
width: 100%;
|
||
max-width: 700px;
|
||
font-size: 85%;
|
||
border: 2px solid var(--border);
|
||
border-spacing: 1px;
|
||
box-shadow: var(--main-boxshadow);
|
||
}
|
||
|
||
.center, .center form, .register {
|
||
text-align: center !important;
|
||
}
|
||
|
||
.left {
|
||
text-align: left !important;
|
||
}
|
||
|
||
.right {
|
||
text-align: right !important;
|
||
}
|
||
|
||
form {
|
||
margin: 5px 0;
|
||
}
|
||
|
||
a, .slide label {
|
||
text-decoration: none;
|
||
color: var(--link);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.slide label {
|
||
font-weight: 700;
|
||
}
|
||
|
||
.badge {
|
||
margin: -1px 0 -1px 3px;
|
||
padding: 0 10px;
|
||
display: inline-block;
|
||
vertical-align: baseline;
|
||
font-size: 85%;
|
||
border-radius: 2px;
|
||
background: var(--ink-darker);
|
||
color: var(--page);
|
||
text-shadow: none;
|
||
}
|
||
|
||
label:hover .badge {
|
||
background: var(--ink);
|
||
}
|
||
|
||
a {
|
||
padding: 1px 8px;
|
||
display: inline-block;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.listitem a {
|
||
padding: 0 1px;
|
||
}
|
||
|
||
a#home {
|
||
width: calc(100% - 20px);
|
||
height: 44px;
|
||
display: inline-block;
|
||
font-size: 0;
|
||
background: var(--logo) no-repeat center center / auto 40px;
|
||
opacity: .75;
|
||
vertical-align: top;
|
||
}
|
||
|
||
a#home:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
a#home:active {
|
||
opacity: .75;
|
||
transform: scale(.9);
|
||
}
|
||
|
||
a.view {
|
||
padding-left: 0;
|
||
color: var(--ink);
|
||
width: 100%;
|
||
}
|
||
|
||
a.view:hover, a.view:focus, tr:active .view {
|
||
padding-left: 22px;
|
||
color: var(--link);
|
||
background: var(--eye) no-repeat left center / 16px;
|
||
}
|
||
|
||
a:hover, .slide label:hover, button:hover, select:hover, input[type=number]:focus, td.streamid:hover {
|
||
color: var(--link_hover);
|
||
background: var(--link);
|
||
}
|
||
|
||
a.button, button, input, select {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
select, input, button {
|
||
margin: 4px 2px;
|
||
padding: 6px 10px;
|
||
line-height: 1.5;
|
||
font-family: var(--bodyfont);
|
||
font-size: 90% !important;
|
||
font-weight: 600;
|
||
color: var(--link);
|
||
border: 1px solid var(--button-border);
|
||
-moz-appearance: none;
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
}
|
||
|
||
a, select, button, label {
|
||
text-shadow: var(--textshadow);
|
||
cursor: pointer;
|
||
}
|
||
|
||
a.button, button {
|
||
margin: 4px 2px;
|
||
padding: 2px 8px 4px;
|
||
min-width: 64px;
|
||
display: inline-block;
|
||
font-size: 90% !important;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
text-decoration: none;
|
||
border: 1px solid var(--button-border);
|
||
border-radius: 2px;
|
||
box-shadow: var(--highlight);
|
||
background: var(--button);
|
||
appearance: none;
|
||
}
|
||
|
||
a.button {
|
||
margin: 8px 2px;
|
||
}
|
||
|
||
button {
|
||
padding: 6px 12px;
|
||
min-width: 120px;
|
||
}
|
||
|
||
a.button:hover, a.button:focus {
|
||
color: var(--link_hover);
|
||
background: var(--button_hover) !important;
|
||
}
|
||
|
||
button:active, a.button:active, .slide label:active, td.streamid:active, .button.selected {
|
||
box-shadow: var(--highlight), var(--active_shadow);
|
||
background: var(--button_active) !important;
|
||
}
|
||
|
||
.button.selected {
|
||
pointer-events: none;
|
||
}
|
||
|
||
.streamid:hover a {
|
||
color: var(--link_hover);
|
||
}
|
||
|
||
button.apply {
|
||
padding: 6px 12px;
|
||
color: transparent;
|
||
text-shadow: none !important;
|
||
background: var(--yes_btn) no-repeat center center / 14px, var(--button);
|
||
}
|
||
|
||
button.apply:hover, button.apply:focus {
|
||
color: transparent;
|
||
background: var(--yes) no-repeat center center / 14px, var(--button_hover) !important;
|
||
}
|
||
|
||
button.apply:active {
|
||
color: transparent;
|
||
background: var(--yes) no-repeat center center / 14px, var(--button_active) !important;
|
||
background-blend-mode: luminosity;
|
||
}
|
||
|
||
select, input[type=number] {
|
||
width: 150px;
|
||
box-sizing: border-box;
|
||
font-size: 90% !important;
|
||
background: var(--input_text);
|
||
text-shadow: 0 1px 1px rgba(0,0,0,.6);
|
||
}
|
||
|
||
input[type=number] {
|
||
box-shadow: var(--highlight), var(--active_shadow);
|
||
outline: none;
|
||
appearance: none;
|
||
-moz-appearance: textfield;
|
||
}
|
||
|
||
input[type=number]::-webkit-inner-spin-button {
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
select {
|
||
padding: 6px 20px 6px 8px;
|
||
line-height: 1.5;
|
||
background: var(--dropdown) no-repeat right 8px center / 10px, var(--button);
|
||
box-shadow: var(--highlight);
|
||
}
|
||
|
||
select:hover, select:focus, select:active {
|
||
color: var(--link_hover);
|
||
background: var(--dropdown_hover) no-repeat right 8px center / 10px, var(--button_hover);
|
||
}
|
||
|
||
select option {
|
||
color: var(--menu-ink);
|
||
background: var(--menu);
|
||
}
|
||
|
||
select, option:hover, option:focus, option:active {
|
||
outline: none;
|
||
}
|
||
|
||
.note {
|
||
margin: 0 -6px;
|
||
padding: 15px 12px !important;
|
||
font-size: 95%;
|
||
border: 1px solid #414;
|
||
background: radial-gradient(at bottom center, rgba(48,8,48,.3), rgba(0,0,0,0) 70%),
|
||
linear-gradient(to bottom, rgba(32,0,32,.2), rgba(24,0,24,.2));
|
||
box-shadow: inset 0 0 0 1px rgba(96,0,96,.2), 0 0 0 1px #000;
|
||
white-space: normal;
|
||
}
|
||
|
||
.note::before {
|
||
margin: -3px 2px 0 -2px;
|
||
width: 24px;
|
||
height: 18px;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
background: var(--info) no-repeat center center / 16px;
|
||
content: "";
|
||
}
|
||
|
||
.routerservice {
|
||
display: inline-block;
|
||
margin: 4px 2px;
|
||
padding: 2px 10px 2px 25px;
|
||
background: #303 var(--yes) no-repeat 8px center / 10px;
|
||
border-radius: 2px;
|
||
text-align: left;
|
||
font-size: 90%;
|
||
}
|
||
|
||
table {
|
||
background: repeating-linear-gradient(to bottom, rgba(24,0,24,.3) 2px, rgba(48,0,48,.3) 4px),
|
||
repeating-linear-gradient(to right, rgba(48,0,48,.8) 2px, rgba(24,0,24,.5) 4px),
|
||
linear-gradient(to bottom, #240024, #200020);
|
||
background-size: 100% 4px, 4px 100%, 100%;
|
||
}
|
||
|
||
tr {
|
||
border-top: 1px solid var(--border);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
tr#version, tr#version ~ tr:nth-child(odd), tr.chrome, .listitem:nth-child(odd),
|
||
tr:not(.chrome):nth-child(odd), #routerinfos tr:nth-child(odd), #tunnelsummary tr:nth-child(even) {
|
||
background: linear-gradient(to bottom, rgba(16,0,16,.5), rgba(8,0,8,.5));
|
||
}
|
||
|
||
tr#version ~ tr:nth-child(even), .listitem:nth-child(even),
|
||
tr:not(.chrome):nth-child(even), #routerinfos tr:nth-child(even), #tunnelsummary tr:nth-child(odd) {
|
||
background: linear-gradient(to bottom, rgba(32,0,32,.5), rgba(24,0,24,.5));
|
||
}
|
||
|
||
tr tr, .tableitem tr:nth-child(odd) {
|
||
background: var(--tr-inner);
|
||
}
|
||
|
||
tr.chrome {
|
||
background: linear-gradient(to bottom, rgba(16,0,16,.5), rgba(8,0,8,.5));
|
||
}
|
||
|
||
.tableitem tr:nth-child(even) {
|
||
background: var(--tr);
|
||
}
|
||
|
||
th, td, .listitem {
|
||
box-shadow: var(--highlight);
|
||
font-size: 97%;
|
||
}
|
||
|
||
th, td {
|
||
padding: 5px 12px;
|
||
border: 1px solid var(--button-border);
|
||
}
|
||
|
||
th {
|
||
padding: 6px 12px;
|
||
font-weight: 600;
|
||
background: var(--th_multicolumn);
|
||
}
|
||
|
||
th.in, th.out {
|
||
font-size: 0;
|
||
}
|
||
|
||
th.in {
|
||
background: var(--arrow_down) no-repeat center center / 14px, var(--th_multicolumn);
|
||
}
|
||
|
||
th.out {
|
||
background: var(--arrow_up) no-repeat center center / 14px, var(--th_multicolumn);
|
||
}
|
||
|
||
th, #routerservices {
|
||
background: linear-gradient(to right, rgba(0,0,0.6), rgba(0,0,0,0), rgba(0,0,0,.6)), var(--th);
|
||
background: linear-gradient(to right, rgba(0,0,0,.4), rgba(0,0,0,0), rgba(0,0,0,.4)), rgba(32,0,32,.4);
|
||
}
|
||
|
||
th, .slide label {
|
||
font-size: 95%;
|
||
}
|
||
|
||
.sectiontitle, .sectiontitle th, .chrome td {
|
||
border-top: 1px solid var(--border) !important;
|
||
}
|
||
|
||
.chrome td, #last td {
|
||
border-bottom: 1px solid var(--border) !important;
|
||
}
|
||
|
||
.sectiontitle th {
|
||
padding: 0 0 10px !important;
|
||
font-weight: 700;
|
||
border-bottom: none;
|
||
background: var(--th_multicolumn);
|
||
}
|
||
|
||
.sectiontitle span:not(.routerservice):not(.hide):not(.badge) {
|
||
padding: 4px 12px;
|
||
min-width: 50%;
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
line-height: 1.6;
|
||
font-size: 11.5pt;
|
||
border: 1px solid var(--border);
|
||
border-top: none;
|
||
border-radius: 0 0 4px 4px;
|
||
box-shadow: var(--highlight), 0 2px 2px rgba(0,0,0,.4);
|
||
background: radial-gradient(at top center, rgba(64,16,64,.4), rgba(0,0,0,0) 50%), var(--sectiontitle);
|
||
}
|
||
|
||
table table th {
|
||
font-size: 80%;
|
||
}
|
||
|
||
tr:first-child {
|
||
background: var(--header);
|
||
}
|
||
|
||
td:first-child {
|
||
width: 50%;
|
||
text-align: right;
|
||
font-weight: 600;
|
||
}
|
||
|
||
td td:first-child {
|
||
width: auto;
|
||
}
|
||
|
||
td:last-child {
|
||
text-align: left;
|
||
}
|
||
|
||
#routerinfos td:first-child {
|
||
font-weight: 700;
|
||
}
|
||
|
||
.listitem, .tableitem {
|
||
padding: 5px 0;
|
||
white-space: nowrap;
|
||
font-size: 80%;
|
||
font-family: var(--monospaced);
|
||
}
|
||
|
||
.listitem {
|
||
display: inline-block;
|
||
width: 100%;
|
||
vertical-align: middle;
|
||
border-top: 1px solid var(--button-border);
|
||
}
|
||
|
||
.listitem:last-child {
|
||
border-bottom: 1px solid var(--button-border);
|
||
}
|
||
|
||
.listitem.out .arrowup, .listitem.in .arrowdown {
|
||
margin: 3px 8px 0 16px;
|
||
float: left;
|
||
}
|
||
|
||
.error, .notify {
|
||
padding: 0;
|
||
font-size: 110%;
|
||
color: #fff;
|
||
box-shadow: var(--highlight), inset 0 0 3px 3px rgba(0,0,0,.6);
|
||
text-align: center;
|
||
background: linear-gradient(to bottom, rgba(32,0,32,.5), rgba(4,0,4,.7));
|
||
}
|
||
|
||
.toast + .toast {
|
||
display: none;
|
||
}
|
||
|
||
.container {
|
||
margin: 12px;
|
||
padding: 40px 20px;
|
||
display: inline-block;
|
||
width: calc(100% - 24px);
|
||
background: linear-gradient(to bottom, rgba(96,16,96,.15), rgba(160,56,160,.15));
|
||
box-shadow: 0 0 0 1px rgba(255,160,255,.3), inset 0 0 0 2px #000, inset 0 0 0 3px #303;
|
||
box-sizing: border-box;
|
||
text-shadow: 0 1px 1px #000;
|
||
}
|
||
|
||
#warning, #success {
|
||
margin: -5px 0 10px;
|
||
width: 100%;
|
||
height: 48px;
|
||
display: block;
|
||
background: var(--error) no-repeat center top / 44px;
|
||
}
|
||
|
||
#success {
|
||
background: var(--success) no-repeat center top / 40px;
|
||
}
|
||
|
||
.thin {
|
||
width: 1%;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/*.sectiontitle.configuration ~ tr td.thin {
|
||
width: 13% !important;
|
||
}*/
|
||
|
||
#header, #navlinks {
|
||
background: var(--header);
|
||
}
|
||
|
||
#header td, #navlinks {
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
#navlinks {
|
||
padding: 10px 2px !important;
|
||
font-size: 100%;
|
||
}
|
||
|
||
#navlinks a:hover {
|
||
background: var(--button_hover);
|
||
}
|
||
|
||
#navlinks a:active {
|
||
color: var(--ink-faded);
|
||
box-shadow: var(--highlight), var(--active_shadow), 0 0 0 1px var(--button-border);
|
||
background: var(--button_active);
|
||
}
|
||
|
||
.enabled, .disabled {
|
||
font-size: 0;
|
||
display: inline-block;
|
||
width: 10px;
|
||
height: 10px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.enabled {
|
||
background: var(--yes) no-repeat left 12px center / 10px;
|
||
}
|
||
|
||
.disabled {
|
||
background: var(--no) no-repeat left 12px center / 10px;
|
||
}
|
||
|
||
.enabled.fixedsize {
|
||
margin-top: -5px;
|
||
width: 14px !important;
|
||
height: 14px !important;
|
||
background: var(--yes) no-repeat center center / 14px !important;
|
||
}
|
||
|
||
.role {
|
||
margin: -2px 3px -2px 6px;
|
||
width: 24px;
|
||
height: 24px;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
font-size: 0;
|
||
}
|
||
|
||
.role ~ .arrowright {
|
||
display: none;
|
||
}
|
||
|
||
.ibgw {
|
||
background: var(--ibgw) no-repeat center center / 24px;
|
||
}
|
||
|
||
.obep {
|
||
background: var(--obep) no-repeat center center / 24px;
|
||
}
|
||
|
||
.ptcp {
|
||
background: var(--ptcp) no-repeat center center / 24px;
|
||
}
|
||
|
||
.arrowright, .arrowleft, .arrowleftright, .arrowup, .arrowdown {
|
||
width: 12px;
|
||
height: 16px;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
font-size: 0 !important;
|
||
}
|
||
|
||
.arrowleft {
|
||
background: var(--arrow_left) no-repeat center center / 11px;
|
||
}
|
||
|
||
.arrowright {
|
||
background: var(--arrow_right) no-repeat center center / 11px;
|
||
}
|
||
|
||
.arrowleftright {
|
||
background: var(--arrow_double) no-repeat center center / 11px;
|
||
}
|
||
|
||
.arrowup {
|
||
background: var(--arrow_up) no-repeat center center / 12px;
|
||
}
|
||
|
||
.arrowdown {
|
||
background: var(--arrow_down) no-repeat center center / 12px;
|
||
}
|
||
|
||
/*
|
||
#transports .listitem .arrowup, #transports .listitem .arrowdown {
|
||
margin: 3px 10px 0 16px;
|
||
}
|
||
*/
|
||
.tableitem .button {
|
||
margin: 0 !important;
|
||
padding: 1px 4px !important;
|
||
font-size: 100% !important;
|
||
border: none;
|
||
background: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.streamid .button, .streamid .button:hover, .streamid .button:focus, .streamid .button:active {
|
||
background: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.tableitem a.button .close {
|
||
margin: -2px -6px 0 0;
|
||
width: 11px;
|
||
height: 11px;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
color: transparent !important;
|
||
text-shadow: none !important;
|
||
background: var(--no) no-repeat center center / 9px !important;
|
||
opacity: .8;
|
||
}
|
||
|
||
.tableitem a.button:hover .close, .tableitem a.button:focus .close {
|
||
opacity: 1;
|
||
}
|
||
|
||
.tunnel.established {
|
||
color: #56B734;
|
||
}
|
||
|
||
.tunnel.expiring {
|
||
color: #D3AE3F;
|
||
}
|
||
|
||
.tunnel.failed {
|
||
color: #D33F3F;
|
||
}
|
||
|
||
.tunnel.building {
|
||
color: #434343;
|
||
}
|
||
|
||
caption {
|
||
font-size: 1.5em;
|
||
text-align: center;
|
||
color: var(--link);
|
||
}
|
||
|
||
table {
|
||
display: table;
|
||
border-collapse: collapse;
|
||
text-align: center;
|
||
}
|
||
|
||
td table {
|
||
width: 100% !important;
|
||
}
|
||
|
||
table.extaddr {
|
||
text-align: left;
|
||
}
|
||
|
||
table.services {
|
||
width: 100%;
|
||
}
|
||
|
||
#b64 {
|
||
margin: 2px -4px;
|
||
padding: 3px 4px;
|
||
width: calc(100% + 8px);
|
||
word-break: break-all;
|
||
color: var(--b64-ink);
|
||
border: 1px solid var(--button-border);
|
||
background: var(--b64);
|
||
font-family: var(--monospaced);
|
||
font-size: 80%;
|
||
display: inline-block;
|
||
line-height: 1;
|
||
box-sizing: border-box;
|
||
user-select: all;
|
||
box-shadow: var(--b64-boxshadow);
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
#b64 {
|
||
margin: 4px;
|
||
width: calc(100% - 8px);
|
||
text-align: justify;
|
||
}
|
||
|
||
.streamdest {
|
||
width: 120px;
|
||
max-width: 240px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.slide div.slidecontent, .slide [type=checkbox] {
|
||
display: none;
|
||
}
|
||
|
||
.slide [type=checkbox]:checked ~ div.slidecontent {
|
||
margin-top: 0;
|
||
padding: 0;
|
||
display: block;
|
||
}
|
||
|
||
.disabled {
|
||
color: #D33F3F;
|
||
}
|
||
|
||
.enabled {
|
||
color: #56B734;
|
||
}
|
||
|
||
.nopadding {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.nopadding table {
|
||
border: none !important;
|
||
}
|
||
|
||
.tunnelid.local, .tunnel {
|
||
display: inline-block;
|
||
width: 16px;
|
||
height: 16px;
|
||
vertical-align: middle;
|
||
font-size: 0;
|
||
background: var(--local) no-repeat center center / 16px;
|
||
}
|
||
|
||
.tunnelid:not(.local) {
|
||
padding: 2px 4px 0 22px;
|
||
display: inline-block;
|
||
width: auto;
|
||
height: 16px;
|
||
vertical-align: middle;
|
||
border-radius: 2px;
|
||
box-shadow: 0 0 0 1px #000;
|
||
background: #303 var(--tunnel) no-repeat 4px center / 14px;
|
||
}
|
||
|
||
.tunnelid:not(.local) {
|
||
text-align: left;
|
||
min-width: 86px;
|
||
border-left: 5px solid var(--border2);
|
||
border-radius: 0 2px 2px 0;
|
||
}
|
||
|
||
.chain.transit .tunnelid {
|
||
margin-left: 14px;
|
||
}
|
||
|
||
.tunnel {
|
||
margin: 1px 5px 0;
|
||
width: 26px;
|
||
height: 16px;
|
||
float: left;
|
||
vertical-align: middle;
|
||
background: var(--established) no-repeat left center / 12px;
|
||
}
|
||
|
||
.tunnelid.local + .tunnel {
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.tunnel.building {
|
||
background: var(--building) no-repeat left center / 12px;
|
||
}
|
||
|
||
.tunnel.failed {
|
||
background: var(--failed) no-repeat left center / 12px;
|
||
}
|
||
|
||
.tunnel.expiring {
|
||
background: var(--expiring) no-repeat left center / 12px;
|
||
}
|
||
|
||
.tunnel.exploratory {
|
||
background: var(--established) no-repeat left center / 12px, var(--exploratory) no-repeat right 3px / 12px;
|
||
}
|
||
|
||
.tunnel.building.exploratory {
|
||
background: var(--building) no-repeat left center / 12px, var(--exploratory) no-repeat right 3px / 12px;
|
||
}
|
||
|
||
.tunnel.expiring.exploratory {
|
||
background: var(--expiring) no-repeat left center / 12px, var(--exploratory) no-repeat right 3px / 12px;
|
||
}
|
||
|
||
.tunnel.failed.exploratory {
|
||
background: var(--failed) no-repeat left center / 12px, var(--exploratory) no-repeat right 3px / 12px;
|
||
}
|
||
|
||
span[data-tooltip] {
|
||
position: relative;
|
||
text-transform: capitalize;
|
||
}
|
||
|
||
span[data-tooltip]::after {
|
||
font-family: var(--bodyfont);
|
||
}
|
||
|
||
.hops {
|
||
text-align: right;
|
||
}
|
||
|
||
.hop, .host {
|
||
padding: 1px 4px;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
border-radius: 2px;
|
||
box-shadow: 0 0 0 1px #000;
|
||
background: #303;
|
||
}
|
||
|
||
.chain.inbound .arrowright:not(.zerohop):first-of-type {
|
||
display: none !important;
|
||
}
|
||
|
||
.host {
|
||
padding-left: 17px;
|
||
background: #303 var(--planet) no-repeat 4px center / 9px;
|
||
}
|
||
|
||
a[href^="https://gwhois"]:hover, a[href^="https://gwhois"]:focus {
|
||
background: none !important
|
||
}
|
||
|
||
a:hover .host, a:focus .host, a:active .host {
|
||
background: #505 var(--exploratory) no-repeat 2px center / 13px;
|
||
}
|
||
|
||
.transferred {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
text-align: right;
|
||
}
|
||
|
||
.latency, .expiry {
|
||
padding: 2px 5px 2px 20px;
|
||
min-width: 40px;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
text-align: right;
|
||
float: right;
|
||
background: var(--page) var(--time) no-repeat 5px center / 13px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.latency {
|
||
background: var(--page) var(--ping) no-repeat 5px center / 13px;
|
||
}
|
||
|
||
.expiry {
|
||
margin-left: 10px;
|
||
float: none;
|
||
}
|
||
|
||
.latency.unknown {
|
||
color: var(--ink-faded);
|
||
}
|
||
|
||
.sent, .recvd {
|
||
padding-right: 16px;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
text-align: right;
|
||
background: var(--arrow_up) no-repeat right center / 12px;
|
||
}
|
||
|
||
.transit.sent {
|
||
background: var(--arrow_up_transit) no-repeat right center / 12px;
|
||
}
|
||
|
||
.recvd {
|
||
background: var(--arrow_down) no-repeat right center / 12px;
|
||
}
|
||
|
||
.hide {
|
||
display: none;
|
||
}
|
||
|
||
.router.sent, .router.recvd, .transit.sent {
|
||
padding-left: 17px;
|
||
padding-right: 0;
|
||
text-align: left;
|
||
background-size: 14px;
|
||
background-position: left center;
|
||
}
|
||
|
||
.router.sent {
|
||
margin-left: 6px;
|
||
}
|
||
|
||
.itag {
|
||
padding-left: 13px;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
background: var(--tag) no-repeat left center / 10px;
|
||
}
|
||
|
||
a[href^="https://gwhois"], .cmd {
|
||
position: relative;
|
||
}
|
||
|
||
span[data-tooltip]:hover::after, span[data-tooltip]:active::after,
|
||
.itag[data-tooltip]:hover::after, .itag[data-tooltip]:active::after,
|
||
.header a[data-tooltip][href*="cmd"]:hover::after,
|
||
.cmd[data-tooltip]:hover::after {
|
||
padding: 3px 6px;
|
||
display: inline-block;
|
||
position: absolute;
|
||
top: -32px;
|
||
left: -10px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: #444;
|
||
border: 1px solid #444;
|
||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, .2);
|
||
background: #fff !important;
|
||
content: attr(data-tooltip);
|
||
text-shadow: none !important;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.header a[data-tooltip][href*="cmd"]:hover::after {
|
||
top: auto;
|
||
right: -8px;
|
||
bottom: 42px;
|
||
left: auto;
|
||
}
|
||
|
||
.cmd[data-tooltip]:hover::after {
|
||
left: -16px;
|
||
}
|
||
|
||
.slide label {
|
||
margin: 0;
|
||
padding: 6px 0 6px 20px;
|
||
width: 100%;
|
||
display: block;
|
||
border: 1px solid var(--border);
|
||
border-left: none;
|
||
border-right: none;
|
||
box-shadow: var(--highlight);
|
||
background: linear-gradient(to bottom, rgba(48,8,48,.5), rgba(0,0,0,.8));
|
||
box-sizing: border-box;
|
||
color: var(--ink);
|
||
}
|
||
|
||
input[type=checkbox] + label::after {
|
||
content: "+";
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
float: right;
|
||
margin: -6px 10px 2px 0;
|
||
font-size: 16pt;
|
||
font-weight: 700;
|
||
color: var(--ink);
|
||
opacity: .7;
|
||
}
|
||
|
||
input[type=checkbox]:checked + label::after {
|
||
content: "–";
|
||
}
|
||
|
||
.slide label:hover {
|
||
color: var(--link_hover);
|
||
background: var(--button_hover);
|
||
opacity: .9;
|
||
}
|
||
|
||
.slide label:active::after {
|
||
transform: scale(.9);
|
||
}
|
||
|
||
.slide table {
|
||
width: 100%;
|
||
}
|
||
|
||
#rid {
|
||
margin: 5px 8px;
|
||
padding: 2px 4px;
|
||
display: inline-block;
|
||
font-size: 80%;
|
||
border-radius: 2px;
|
||
background: #202;
|
||
user-select: all;
|
||
word-break: break-all;
|
||
}
|
||
|
||
#loglevel {
|
||
margin-top: 9px;
|
||
}
|
||
|
||
#commands, #routerservices {
|
||
margin-top: 11px;
|
||
}
|
||
|
||
#routerservices {
|
||
background: none;
|
||
}
|
||
|
||
#consolelang, #maxtransit {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
#commands br {
|
||
display: none;
|
||
}
|
||
|
||
.cmd {
|
||
margin: 4px;
|
||
padding: 8px;
|
||
display: inline-block;
|
||
font-size: 0;
|
||
width: 42px;
|
||
height: 42px;
|
||
background: #f00;
|
||
min-width: 0;
|
||
box-sizing: border-box;
|
||
vertical-align: middle;
|
||
border: 1px solid var(--button-border);
|
||
border-radius: 2px;
|
||
box-shadow: var(--highlight);
|
||
}
|
||
|
||
.cmd:active {
|
||
box-shadow: var(--highlight), var(--active_shadow);
|
||
background-blend-mode: luminosity;
|
||
}
|
||
|
||
#testpeer {
|
||
background: var(--testpeer) no-repeat center center / 30px, var(--button);
|
||
}
|
||
|
||
#testpeer:hover, #testpeer:focus {
|
||
background: var(--testpeer) no-repeat center center / 32px, var(--button_hover);
|
||
}
|
||
|
||
#testpeer:active {
|
||
background: var(--testpeer) no-repeat center center / 28px, var(--button_active);
|
||
}
|
||
|
||
#transitaccept {
|
||
background: var(--transit) no-repeat center center / 30px, var(--button);
|
||
}
|
||
|
||
#transitaccept:hover, #transitaccept:focus {
|
||
background: var(--transit) no-repeat center center / 32px, var(--button_hover);
|
||
}
|
||
|
||
#transitaccept:active {
|
||
background: var(--transit) no-repeat center center / 28px, var(--button_active);
|
||
}
|
||
|
||
#transitdecline {
|
||
background: var(--notransit) no-repeat center center / 30px, var(--button);
|
||
}
|
||
|
||
#transitdecline:hover, #transitdecline:focus {
|
||
background: var(--notransit) no-repeat center center / 32px, var(--button_hover);
|
||
}
|
||
|
||
#transitdecline:active {
|
||
background: var(--notransit) no-repeat center center / 28px, var(--button_active);
|
||
}
|
||
|
||
#shutdownforce, #shutdowngraceful {
|
||
/* prompt user for forceful shutdown if graceful clicked when transit tunnels active */
|
||
background: var(--shutdown_hover) no-repeat center center / 30px, var(--button);
|
||
}
|
||
|
||
#shutdownforce:hover, #shutdownforce:focus,
|
||
#shutdowngraceful:hover, #shutdowngraceful:focus {
|
||
background: var(--shutdown_hover) no-repeat center center / 32px, var(--button_hover);
|
||
}
|
||
|
||
#shutdownforce:active, #shutdowngraceful:active {
|
||
background: var(--shutdown_hover) no-repeat center center / 28px, var(--button_active);
|
||
}
|
||
|
||
#shutdowngraceful {
|
||
display: none;
|
||
}
|
||
|
||
#shutdowncancel {
|
||
background: var(--noshutdown) no-repeat center center / 30px, var(--button);
|
||
}
|
||
|
||
#shutdowncancel:hover, #shutdowncancel:focus {
|
||
background: var(--noshutdown) no-repeat center center / 32px, var(--button_hover);
|
||
}
|
||
|
||
#shutdowncancel:active {
|
||
background: var(--noshutdown) no-repeat center center / 28px, var(--button_active);
|
||
}
|
||
|
||
#reloadcss {
|
||
background: var(--reloadcss) no-repeat center center / 30px, var(--button);
|
||
}
|
||
|
||
#reloadcss:hover, #reloadcss:focus {
|
||
background: var(--reloadcss) no-repeat center center / 32px, var(--button_hover);
|
||
}
|
||
|
||
#reloadcss:active {
|
||
background: var(--reloadcss) no-repeat center center / 28px, var(--button_active);
|
||
}
|
||
|
||
#tunnelsummary {
|
||
position: relative;
|
||
}
|
||
|
||
#tunnelsummary tr:last-child, #tunnelsummary, #tunnelsummary tr:last-child td {
|
||
border-bottom: none;
|
||
}
|
||
|
||
#tunnelsummary::after {
|
||
position: absolute;
|
||
bottom: -2px;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 10;
|
||
content: "";
|
||
display: inline-block;
|
||
width: 100%;
|
||
height: 1px;
|
||
background: var(--border);
|
||
}
|
||
|
||
#tunnelsummary th {
|
||
background: var(--th_multicolumn);
|
||
}
|
||
|
||
#tunnelsummary th.in {
|
||
background: var(--arrow_down) no-repeat center center / 14px, var(--th_multicolumn);
|
||
}
|
||
|
||
#tunnelsummary th.out {
|
||
background: var(--arrow_up) no-repeat center center / 14px, var(--th_multicolumn);
|
||
}
|
||
|
||
#tunnelsummary td {
|
||
text-align: center;
|
||
}
|
||
|
||
#tunnelsummary .button {
|
||
margin: 0;
|
||
display: inline-block;
|
||
width: 40px;
|
||
height: 16px;
|
||
background: var(--eye) no-repeat center center / 16px, var(--button) !important;
|
||
font-size: 0 !important;
|
||
}
|
||
|
||
#tunnelsummary .button:hover, #tunnelsummary .button:focus {
|
||
background: var(--eye_hover) no-repeat center center / 16px, var(--button_hover) !important;
|
||
}
|
||
|
||
#tunnelsummary .button:active, #tunnelsummary .button:focus {
|
||
background: var(--eye) no-repeat center center / 16px, var(--button_active) !important;
|
||
}
|
||
|
||
@media screen and (max-width: 1000px) {
|
||
body {
|
||
font-size: 13pt !important;
|
||
}
|
||
|
||
.listitem {
|
||
font-size: 90%;
|
||
}
|
||
|
||
a {
|
||
padding: 1px 3px;
|
||
}
|
||
|
||
.chrome a.button {
|
||
min-width: 40px;
|
||
}
|
||
|
||
.b32, .listitem a[href*="local_destination&b32"] {
|
||
max-width: 300px;
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.router.sent, .router.recvd, .transit.sent {
|
||
min-width: 48px;
|
||
padding-left: 15px;
|
||
background-size: 12px;
|
||
}
|
||
|
||
.tunnelid:not(.local) {
|
||
display: none;
|
||
}
|
||
|
||
.chain.transit .tunnelid {
|
||
display: inline-block;
|
||
}
|
||
|
||
.tunnel, .latency {
|
||
margin: 1px 6px 0 4px;
|
||
}
|
||
|
||
.tunnel, .hops {
|
||
margin-top: 2px;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.sectiontitle span {
|
||
font-size: 10.5pt;
|
||
}
|
||
|
||
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
||
body {
|
||
font-size: 12pt !important;
|
||
}
|
||
|
||
.i2ptunnels .b32, .i2cp .b32 {
|
||
max-width: 200px !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 800px) {
|
||
td {
|
||
padding: 5px 10px;
|
||
}
|
||
|
||
td:first-child {
|
||
width: auto;
|
||
}
|
||
|
||
#rid {
|
||
margin: 5px 10px;
|
||
padding: 0;
|
||
width: 200px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
font-size: 90%;
|
||
background: none;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.b32, .listitem a[href*="local_destination&b32"] {
|
||
max-width: 300px;
|
||
}
|
||
|
||
.arrowup, .arrowdown, .tunnel {
|
||
float: none;
|
||
}
|
||
|
||
.hops {
|
||
min-width: 190px;
|
||
}
|
||
|
||
.tunnel {
|
||
width: 13px;
|
||
}
|
||
|
||
.listitem.out .arrowup, .listitem.in .arrowdown, .tunnel, .latency {
|
||
margin: 0 1px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.listitem.out .arrowup, .listitem.in .arrowdown {
|
||
margin: 2px 0 0 1.5%;
|
||
}
|
||
|
||
.latency {
|
||
background-size: 11px;
|
||
background-color: transparent !important;
|
||
float: left;
|
||
}
|
||
|
||
.transferred {
|
||
margin-right: 1.5%;
|
||
float: right;
|
||
}
|
||
|
||
.hop {
|
||
margin: 0 -3px;
|
||
}
|
||
|
||
.tunnel.exploratory {
|
||
background-size: 12px, 11px !important;
|
||
}
|
||
|
||
.itag {
|
||
margin: 2px 1.5% 0 0;
|
||
min-width: 90px; /* force wrap to new line */
|
||
float: right;
|
||
text-align: right;
|
||
background: none;
|
||
}
|
||
|
||
.itag::before {
|
||
content: "";
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
width: 14px;
|
||
height: 10px;
|
||
background: var(--tag) no-repeat left center / 10px
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1000px) {
|
||
.tunnelid[data-tooltip]:hover::after, .tunnelid[data-tooltip]:active::after {
|
||
display: none;
|
||
}
|
||
|
||
.hops {
|
||
display: inline-block;
|
||
min-width: 240px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1200px) {
|
||
#navlinks a {
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.tunnelid {
|
||
background-size: 16px;
|
||
}
|
||
|
||
.tunnelid:not(.local), .latency, .hops {
|
||
margin-top: 1px;
|
||
margin-bottom: -1px;
|
||
}
|
||
|
||
.tunnelid:not(.local) {
|
||
margin-left: 12px;
|
||
float: right;
|
||
}
|
||
|
||
.chain {
|
||
min-width: 560px;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
#transports .chain {
|
||
min-width: 580px;
|
||
text-align: left;
|
||
}
|
||
|
||
.chain.transit {
|
||
min-width: 0;
|
||
text-align: center;
|
||
}
|
||
|
||
#transit.list {
|
||
columns: 2;
|
||
column-gap: 1px;
|
||
column-rule: 1px solid var(--border2);
|
||
}
|
||
|
||
#transit.list .listitem:nth-child(even):last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.hops {
|
||
min-width: 280px;
|
||
display: inline-block;
|
||
text-align: right;
|
||
}
|
||
|
||
.recvd, .sent {
|
||
min-width: 64px;
|
||
}
|
||
|
||
.router.recvd, .router.sent {
|
||
min-width: 80px;
|
||
}
|
||
|
||
.host {
|
||
min-width: 144px;
|
||
}
|
||
|
||
.host a {
|
||
margin-bottom: -1px;
|
||
}
|
||
|
||
.SSU .host {
|
||
min-width: 190px;
|
||
}
|
||
|
||
.i2ptunnels .listitem a {
|
||
padding: 2px 10px;
|
||
min-width: 100px;
|
||
text-align: right;
|
||
}
|
||
|
||
.i2ptunnels .listitem a:hover, .i2ptunnels .listitem a:focus {
|
||
text-align: center;
|
||
}
|
||
|
||
.listitem.out .arrowup, .listitem.in .arrowdown {
|
||
margin-top: 2px;
|
||
background-size: 14px;
|
||
}
|
||
|
||
.i2ptunnels .b32 {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.itag, .host {
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.itag {
|
||
padding: 2px 5px 2px 20px;
|
||
float: right;
|
||
min-width: 100px;
|
||
display: inline-block;
|
||
border-radius: 2px;
|
||
background-color: var(--menu);
|
||
background-position: 5px center;
|
||
}
|
||
|
||
.latency, .expiry {
|
||
padding-top: 3px;
|
||
padding-bottom: 3px;
|
||
margin-left: 12px;
|
||
}
|
||
|
||
.expiry {
|
||
float: right;
|
||
}
|
||
|
||
.transferred {
|
||
min-width: 48px;
|
||
}
|
||
|
||
.tunnel {
|
||
margin: 2px 0 0 -48px;
|
||
}
|
||
|
||
.note {
|
||
padding: 15px 90px !important;
|
||
}
|
||
|
||
.button.selected {
|
||
padding-left: 16px;
|
||
background: var(--yes) no-repeat 10px center / 12px, var(--button_active) !important;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1200px) and (min-height: 600px) {
|
||
.wrapper {
|
||
padding: 2%;
|
||
}
|
||
|
||
td, .listitem, .tableitem {
|
||
padding-top: 6px;
|
||
padding-bottom: 6px;
|
||
}
|
||
|
||
.host, .hop {
|
||
padding-top: 2px;
|
||
padding-bottom: 2px;
|
||
}
|
||
|
||
.tunnelid:not(.local) {
|
||
padding-top: 3px;
|
||
padding-bottom: 1px;
|
||
}
|
||
}
|
||
|
||
@supports (background-blend-mode: screen) {
|
||
body {
|
||
background: linear-gradient(135deg, #000, #202, #000), linear-gradient(45deg, #000, #202, #000);
|
||
background-blend-mode: screen;
|
||
}
|
||
@media screen and (min-width: 1400px) {
|
||
body {
|
||
background: repeating-linear-gradient(to bottom, #000 2px, #101 4px),
|
||
linear-gradient(135deg, #000, #180018, #000),
|
||
linear-gradient(45deg, #000, #180018, #000);
|
||
background-blend-mode: screen;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* enable for screenshots */
|
||
/*
|
||
.hop, .host, a[href*="b32"], .b32 {
|
||
filter: blur(8px);
|
||
}
|
||
*/ |