You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1246 lines
22 KiB
CSS

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
margin: 0 auto;
background: #eee;
display: flex;
flex-direction: column;
}
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
font-family: 'Open Sans', Arial, sans-serif;
}
a{
color: #0b2d4f;
}
em {
font-style: normal;
font-weight: bold;
}
pre {
font-family: monospace;
margin-top: 1em;
margin-bottom: 1em;
}
div#captcha > div {
margin: 1em auto;
}
.h-captcha {
text-align: center;
}
.signuppage .h-captcha {
margin-top: 1em;
}
/* Firefox fix */
.formpage.pure-g {
text-align: center;
}
.formpage.pure-g > div{
text-align: left;
}
.flex-spacer { flex-grow: 1; }
/***************************************************/
/********************* Header */
header{
color: #fff;
background-color: #1c619a;
border-bottom: 1px solid #000;
padding: 0.6em 6em;
}
header .inner {
display: flex;
flex-wrap: wrap;
}
header #logo{
display: flex;
flex-direction: column;
padding: 0 0 0 75px;
background: url(../img/bg-logo.svg) no-repeat;
background-size: 70px;
background-position: left center;
}
/* ok but what about the second reset */
header #logo > * { margin: 0; padding: 0; }
/* i dont think he knows about the second reset */
header #logo h1, header #logo h2 {
font-size: 100%;
line-height: 0.8;
}
header #logo h1 a{
margin: 0px;
font-size: 68px;
}
header #logo h2 a{
display: block;
font-size: 16px;
font-weight: normal;
letter-spacing: 0.425em;
}
header #logo h1 a, header #logo h2 a {
color: white;
text-decoration: none;
}
header nav {
display: flex;
flex-direction: column;
margin-left: 6em;
flex-grow: 1;
}
header ul {
list-style-type: none;
padding: 0;
margin: 0;
}
header li {
display: inline;
}
header nav > div {
display: flex;
flex-direction: row;
align-items: end;
}
header .lang-menu {
}
header .lang-menu,
header .lang-menu a {
color: #ddd;
}
header .user-menu {
margin-left: 3em;
font-size: 1.1em;
}
header .user-menu li {
margin-left: 0.75em;
}
header .user-menu li a {
color: #fff;
}
header .site-menu{
font-size: 1.2em;
text-transform: uppercase;
text-align: right;
}
header .site-menu ul{
margin: 0px;
}
header .site-menu li{
margin: 0px 7px;
position: relative;
bottom: -5px;
}
header .site-menu li:first-child{
margin-left: 0;
}
header .site-menu li:last-child{
margin-right: 0;
}
header .site-menu li.selected{
border-bottom: 2px solid #ddd;
}
header .site-menu li:hover{
border-bottom: 2px solid #1c80d4;
}
header .site-menu a{
color: #fff;
text-decoration: none;
}
@media screen and (max-width: 64em) {
header {
padding: 0.6em 1em;
}
header nav {
margin-left: 3em;
}
}
@media screen and (max-width: 40em) {
header .inner {
flex-direction: column;
align-items: center;
}
header nav {
margin-left: 0;
}
header #logo {
margin-bottom: 1em;
}
}
/***************************************************/
/********************* Common layout */
.left-menu {
float: left;
display: block;
width: 200px;
line-height: 20px;
position: absolute;
}
.left-menu p.menu-title {
text-align: center;
padding-top: 1.5em;
margin: 0;
}
.left-menu .title a {
color: white;
font-weight: 600;
}
.left-menu ul {
list-style-type: none;
padding: 0.5em 1em 0.5em 1em;
margin: 0;
}
.left-menu ul:first-child {
padding-top: 0;
}
.left-menu li {
padding: 0.3em 0;
}
.left-menu a {
text-decoration: none;
}
.left-menu + .content{
margin-left: 200px;
}
.content {
padding: 0em 2em 3em 2em;
flex-grow: 1;
min-height: min-content;
}
.content.pure-g {
justify-content: center;
}
.content h1 {
font-size: 2em;
color: #1c619a;
text-align: center;
}
.content h2 {
font-size: 1.5em;
font-weight: normal;
font-weight: 400;
text-align: center;
font-family: 'Arvo', serif;
font-size: 1.6em;
margin: 1em;
}
.content h3 {
font-size: 1em;
padding-left: 2em;
}
.flex-page {
display: flex;
margin: 0 auto 0 auto;
}
.flex-page .left-menu {
display: block;
float: none;
width: 200px;
position: relative;
flex-shrink: 0;
}
.flex-page-content {
overflow: auto;
flex-grow: 2;
margin: 0 1em 2em 1em;
}
.flex-page .content-box {
margin: 0;
}
.flex-page-content .content-box:not(:first-child) {
margin-top: 1em;
}
.content-box {
margin: 1em;
border: 1px solid #bbb;
padding: 1em 2em;
background: #fff;
overflow: auto;
flex-grow: 2;
-webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.21);
-moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.21);
box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.21);
}
.flex-page-content h2, .content-box h2 {
margin-top: 0;
font-size: 1.5em;
font-weight: bold;
color: #1c619a;
}
.content-box h3 {
font-weight: bold;
font-size: 1.2em;
margin: 0.75em 0;
}
.content-box h4 {
font-weight: bold;
font-size: 1.0em;
margin: 1em 0 0.25em 2em;
}
.content-box ul {
margin: 0.25em 0 0.5em 0;
}
.content-box ul {
list-style-type: circle;
}
.content-box hr {
height: 0;
border: 0;
border-top: 1px solid #ccc;
padding: 0;
margin: 1.5em 0;
}
.content-box a {
color: #1c619a;
}
/*.kb-question-list {
list-style-type: circle;
}
.kb-question-list a {
font-size: 1.2em;
}*/
.kb-question-meta .kb-vote-buttons {
padding-left: 0.5em;
}
.kb-vote-buttons button {
padding: 0 0.4em 0.2em 0.4em;
border: 1px solid #ccc;
border-radius: 3px;
}
.kb-question-meta p {
margin: 0 0;
}
footer{
clear: both;
display: flex;
justify-content: center;
background: #002D5F;
margin-top: 6em;
padding-bottom: 2em;
font-size: 0.9em;
flex-wrap:wrap;
}
footer, footer a {
color: #ccc;
}
footer .footer-column {
text-align: left;
list-style-type:none;
padding-left: 0;
margin: 2em;
}
.message p {
text-align: center;
width: 100%;
padding: 1.2em;
margin: 0;
color: white;
}
.message.motd p {
color: black;
}
.message p.info, .message p.success {
background-color: #062D4D;
}
.message p.error, .message p.critical, .message .warning {
background-color: #A7332F;
}
table.admin-list {
width: 100%;
}
table.admin-list thead td {
text-align: center;
font-size: 1.1em;
font-weight: 600;
border: 1px solid #bbb;
border-top: 0;
}
table.admin-list thead tr td:first-child { border-left: 0; }
table.admin-list thead tr td:last-child { border-right: 0; }
table.admin-list tbody tr td:first-child { font-size: 1.1em; border-left: 0; }
table.admin-list tbody tr td { padding: 6px; border: 1px solid #bbb; }
table.admin-list tbody tr td:first-child { border-left: 0; }
table.admin-list tbody tr td:last-child { border-right: 0; }
table.admin-list tbody tr:last-child td { border-bottom: 0; }
table.admin-list tbody tr:nth-child(even) { background: #eee; }
.table-header {
display: flex;
flex-direction: row;
align-items: center;
}
.table-header > *:first-child {
flex-grow: 1;
}
/***************************************************/
/********************* Account Pages */
.account-settings > div {
margin: 0 auto 2em auto;
}
.account-settings .content-box {
padding: 0em 1em;
}
/***************************************************/
/********************* Forms / Buttons */
.pure-form select {
height: 2.5em;
}
.pure-button-primary, .pure-button-selected,
a.pure-button-primary, a.pure-button-selected {
color: #fff;
background-color: #1c619a;
padding: 0.5em 2em;
}
.button-danger {
background-color: #A7332F;
}
form p.inputinfo {
font-size: 0.8em;
display: block;
margin: 0.5em 1em 1em 180px;
}
.formpage div.pure-g > div {
margin: auto;
}
.formpage form.pure-form label {
margin-top: 1.25em 0 0.25em 0;
}
.formpage form.pure-form input,
.formpage form.pure-form select,
.formpage form.pure-form textarea {
margin-left: auto;
margin-right: auto;
margin: 0.10em auto;
width: 90%;
}
.formpage form.pure-form {
text-align: center;
}
.formpage form.pure-form input[type=submit] {
margin-top: 1.25em;
}
.formpage form.pure-form .inputhelp {
width: 80%;
display: inline-block;
margin: 0;
color: #606060;
font-size: 0.8em;
}
.formpage > div {
margin: auto;
}
ul.errorlist {
list-style-type: none;
color: #b00000;
}
.formpage div.links {
margin: 20px auto 0 auto;
}
.formpage div.links ul{
padding: 0px 20px 0 20px;
}
.formpage div.links ul li{
list-style: none;
}
.formpage div.links ul li:before{
content: "→ ";
}
.formpage div.links a{
text-decoration: none;
}
.formpage div.links a:hover{
text-decoration: underline;
}
.formpage form.pure-form input.button-1-2 {
width: 45%;
}
/***************************************************/
/********************* Help Pages */
.install-guides {
text-align: center;
list-style-type: none;
}
.install-guides li {
display: inline-block;
width: 7em;
padding-top: 0.5em;
text-align: center;
border: 1px solid #ccc;
border-radius: 5px;
margin: 0.5em 0.50em;
}
.install-guides li a {
line-height: 2.2em;
text-decoration: none;
display: block;
}
.install-guides li i {
display: block;
color: #0b2d4f;
}
.page > .content > p {
margin: 1.5em 0;
}
.download-button {
text-align: center;
margin-top: 0.5em;
}
/***************************************************/
/********************* Home Page */
.home-signup {
text-align: center;
}
a.home-signup-button {
padding: 0.75em 2em;
}
@media screen and (max-width: 48em) {
.home-signup-button {
min-width: 50%;
}
}
.homepage h2 {
font-weight: 400;
text-align: center;
font-family: 'Arvo', serif;
font-size: 1.6em;
margin: 3em;
}
.homepage .title {
color: #1c619a
}
.homepage .title h3 {
width: 50%;
margin: auto;
border-bottom: 3px solid #1c619a;
border-radius: 5px;
}
.homepage .inner {
width: 50%;
margin: auto;
}
.homepage .features {
margin: 2em 0;
}
.homepage .right h3 {
text-align: right;
}
.homepage h3 {
font-family: 'Arvo', serif;
font-weight: normal;
font-size: 1.2em;
}
.homepage ul {
list-style-type: circle;
margin: 1em;
padding-left: 1em;
}
.homepage p {
margin: 0.75em;
}
.homepage .home-signup {
margin: 3em 1em;
}
.homepage .locations {
width: 70%;
margin: 4em auto;
}
.homepage .more {
text-align: right;
font-size: 0.9em;
}
.homepage .map {
display: block;
}
#worldmap svg {
stroke-width: 0.5;
}
#map {
display: block;
width: 100%;
margin: auto;
}
@media screen and (max-width: 80em) {
.homepage .features {
margin-left: 0;
margin-right: 0;
}
.homepage .title h3, .homepage .inner {
width: 70%;
}
}
@media screen and (max-width: 48em) {
.homepage .title h3, .homepage .inner {
width: 90%;
}
.homepage .locations {
width: 100%;
}
}
/***************************************************/
/********************* Account */
.account-status {
margin-bottom: 2em;
padding: 0;
}
.account-status-paid, .account-status-disabled {
font-weight: bold;
}
.account-status__status {
font-weight: bold;
}
.account-status h3 {
margin-left: 2em;
margin: 1em;
}
.account-status table {
width: 100%;
}
.account-status table tr:not(:first-child) {
border-top: 1px solid #ddd;
}
.account-status table td {
padding: 0.5em 1em;
width: 50%;
}
.account-status table td:first-child {
border-right: 1px solid #ddd;
text-align: right;
}
.account-aff-box {
background: #f8F8FF;
border-radius: 4px;
border: 3px solid #1c619a;
margin: 1em 0 0 0;
-webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.13);
-moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.13);
box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.13);
}
.account-aff-box {
padding: 1.5em 1.5em;
}
.account-aff-box p {
margin: 0 0 0.75em 0;
}
.account-aff-box fieldset {
padding: 0;
}
.account-motd {
background: #E6F5FF;
border-radius: 4px;
border: 1px solid #A8B3BA;
padding: 0.3em 2em;
text-align: center;
margin: 0 auto 0 auto;
-webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.13);
-moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.13);
box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.13);
}
.account-motd p {
margin: 0.25em 0;
}
.account-fund {
padding: 0;
}
.account-payment-box form label, .account-giftcode-box form label {
width: 8em;
}
.account-payment-box h3 {
text-align: center;
}
.account-payment-box {
margin-bottom: 2em;
}
.pure-form-aligned.centered-form .pure-controls {
width: 100%;
margin-left: 0;
}
.pure-form-aligned.centered-form .pure-controls input[type=submit] {
display: block;
margin: auto;
}
.account-giftcode-box .pure-control-group {
display: flex;
align-items: center;
justify-content: center;
}
.account-giftcode-box .pure-form-aligned.centered-form .pure-control-group label {
width: auto;
}
.account-payment-tab > label {
width: 33.32%;
text-align: center;
display: block;
float: left;
cursor: pointer;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
height: 2em;
border-right: 1px solid #ccc;
background: #eee;
}
.account-payment-tab:last-child > label {
border-right: 0;
}
.account-payment-tab > label span {
display: block;
width: 100%;
height: 100%;
padding: 0.3em 0.5em 0 0.5em;
position: relative;
top: 1px;
}
.account-payment-tab [id^="tab"]:checked + label span {
background: #fff;
font-weight: bold;
}
.account-payment-tab [id^="tab"]:checked + label {
background: #fff;
}
.account-payment-tab > input[type="radio"] {
display: none;
}
.account-payment-tab .tab-content {
display: none;
float: right;
width: 100%;
margin: 2em 0 0 -100%;
padding: 1em 1em 0 1em;
}
.account-payment-tab [id^="tab"]:checked ~ .tab-content {
display: block;
}
.account-payment-tab .tab-content p {
margin: 0.5em 0 0 0;
text-align: center;
font-size: 0.8em;
color: #666;
}
.account-trial {
padding: 0;
}
.account-trial p {
margin: 1em 2em;
}
@media screen and (min-width: 64em) {
.account-giftcode-box {
padding-top: 4em;
}
}
/***************************************************/
/********************* Gateways */
#gateways table {
width: 100%;
}
#gateways td {
padding: 10px;
}
#gateways table thead td {
text-align: center;
font-size: 1.1em;
border: 1px solid #bbb;
border-top: 0;
color: #1c619a;
background: #ddd;
}
#gateways table thead tr td:first-child {
border-left: 0;
}
#gateways table thead tr td:last-child {
border-right: 0;
}
#gateways table tbody tr td:first-child {
border-left: 0;
}
#gateways table tbody tr td {
border: 1px solid #bbb;
}
#gateways table tbody tr td:first-child {
border-left: 0;
}
#gateways table tbody tr td:last-child {
border-right: 0;
}
#gateways table tbody tr:last-child td {
border-bottom: 0;
}
#gateways table tbody tr:nth-child(even) {
background: #eee;
}
#gateways .host_name {
font-family: monospace;
}
#gateways td {
white-space: nowrap;
}
#gateways .right {
text-align: right;
}
.bandwidth {
display: block;
position: relative;
width: 100%;
border: 1px solid #666;
background: #eee;
text-align: center;
}
.bandwidth .inner {
position: absolute;
top: 0; left: 0; bottom: 0;
background-color: #BCC8D1;
z-index: 100;
}
.bandwidth .inner.high {
background-color: #D1B2B2;
}
.bandwidth .label {
position: relative;
z-index: 200;
}
.no-p2p, .no-ipv6 {
display: inline-block;
font-weight: bold;
font-size: 0.7em;
text-align: center;
line-height: 0.9;
margin: 0 0.2em;
}
.no-p2p {
color: #88171a;
}
.no-ipv6 {
color: #555;
}
/***************************************************/
/********************* WireGuard */
.wireguard-peer-actions a {
margin: 0 0.25em;
}
.wireguard-qr {
text-align: center;
}
.wireguard-qr img {
width: 305px;
}
.wireguard-peer-info td {
padding: 0.25em 0.5em;
}
.wireguard-key {
font-family: monospace;
font-size: 1.1em;
background: #ddd;
padding: 5px 3px 0 3px;
}
.wireguard-list-header h3 {
display: inline-block;
}
.wireguard-list-header a {
float: right;
}
.page-wg-title {
display: flex;
flex-direction: row;
}
.page-wg-title h3 {
flex-grow: 1;
}
.page-wg-title p {
margin: 0;
}
.page-wg-table {
width: 100%;
margin-top: 0.5em;
}
.page-wg-table__action {
text-align: center;
}
.page-wg-shadow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.page-wg-shadow__loading {
width: 100%;
height: 100%;
background: url("../img/spinner.gif") center no-repeat;
}
.page-wg-shadow canvas, .page-wg-shadow img {
border: 3px solid white;
}
td.page-wg-table__action {
padding: 0.5em 0.27em;
}
td.page-wg-table__action--more {
border-left: 0;
}
/***************************************************/
/********************* Tickets */
div.ticket-messages {
margin: 2em 2em;
border: 1px solid #c7c7c7;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
div.ticket-message {
background: #f4f4f4;
border-bottom: 1px solid #c7c7c7;
padding: 0.25em 1em 1em 1em;
}
div.ticket-message:last-child {
border-bottom: 0;
}
div.ticket-message-user {
background: #e8e8e8;
}
div.ticket-message-private {
background: #f8e7e7;
}
.ticket-message-author,
.ticket-message-date {
font-weight: bold;
font-size: 0.9em;
margin: 0;
margin-bottom: 0.5em;
}
.ticket-message-author {
text-align: left;
float: left;
}
.ticket-message-date {
text-align: right;
}
.ticket-message-content {
margin: 0;
}
.ticket-message-reply textarea {
width: 80%;
margin: auto;
}
.ticket-message-reply input[type=submit] {
margin: auto;
}
.pages {
text-align: center;
}
.pages a {
margin: 1em 0.5em;
padding: 0.20em 0.6em;
border: 1px solid #c7c7c7;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
text-decoration: none;
}
/***************************************************/
/********************* Payments */
.payments-cancel-page hr {
margin: 2em 1em;
border-bottom: 0;
}
.payments-cancel-page .feedback {
width: 100%;
}
.payments-cancel-page .pure-controls {
text-align: center;
}
/***************************************************/
/********************* Live chat */
#livechat-info {
border-bottom: 1px solid black;
text-align: center;
}
.livechat-thing {
position: fixed;
bottom: 0;
right: 0;
}
.livechat-thing .icon{
width: 1.4em;
height: 1.4em;
display: inline-block;
background: url(../img/chat.svg);
background-size: contain;
background-repeat: no-repeat;
margin-right: 0.4em;
margin-bottom: -0.4em;
}
.livechat-thing a {
display: block;
padding: 0.6em 0.9em;
background-color: #1c619a;
color: white;
text-decoration: none;
font-size: 0.9em;
border-left: 1px solid #1c619a;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}
#livechat-iframe {
border: 0;
width: 100%;
height: 80%;
}
.stripe-button-el {
display: block !important;
margin: 4em auto 3em auto;
}
/***************************************************/
/********************* Fonts */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(../fonts/OpenSans.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(../fonts/OpenSansB.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
font-family: 'Arvo';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/arvo-0.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Arvo';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/arvo-1.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/***************************************************/
/********************* Icons */
.icon {
display: inline-block;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.icon-wireguard { background-image: url(../img/icon-wireguard.png); }
.icon-wireguard {
/* fix for wireguard at least */
height: 0.9em;
position: relative;
bottom: -1px;
}
.icon-wireguard.large {
height: 3em;
color: #88171a;
}
.fa.external-link {
font-size: 0.7em;
position: relative;
top: -1px;
}
@media screen and (max-width: 64em) {
.content {
padding: 0em 1em 3em 1em;
}
.flex-page {
width: 100%;
flex-direction: column;
}
.flex-page .left-menu {
width: 100%;
display: flex;
flex-direction: row;
}
.flex-page .left-menu ul {
padding: 1em 0.25em;
}
.install-guides {
padding-left: 0;
}
.install-guides li {
display: block;
padding: 0.25em 1.5em;
width: auto;
text-align: left;
}
.install-guides li a {
line-height: 1em;
}
.install-guides li i {
display: inline-block;
font-size: 1.4em;
width: 1.5em;
}
}