ccvpn/static/css/style.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;
}

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;
}

/* Firefox fix */
.formpage.pure-g {
    text-align: center;
}
.formpage.pure-g > div{
    text-align: left;
}


/***************************************************/
/********************* Top bar                     */

#topbar{
    padding: 0 3%;
    color: #737373;
    background: #000;
}
#topbar p {
    margin: 0;
}
#topbar a:hover{
    cursor: pointer;
    background: none;
}
#topbar a{
    display: inline-block;
    color: #2c99f3;
    text-decoration: none;
    padding: 4px 5px;
}
#topbar a:hover{
    background: #222;
}
#topbar .topbar-left{
    float: left;
}
#topbar .topbar-right{
    float: right;
    text-align: right;
}
#topbar .topbar-right a{
    font-size: 1.2em;
    padding: 2px 5px 2px;
}


/***************************************************/
/********************* Header                      */

header{
    height: 80px;
    padding: 0 3%;
    color: #fff;
    background-color: #1c619a;
    border-bottom: 1px solid #000;

}
header #logo{
    float: left;
    height: 80px;
    padding-left: 75px; 
    background: url(../img/bg-logo.svg) no-repeat;
    background-size: 70px;
    background-position: left center;
}
header #logo * {
    margin: 0;
    padding: 0;
    border: 0;
}
header #logo h1, header #logo h2 {
    font-size: 100%;
}
header #logo h1 a{
    margin: 0px;
    position: relative;
    top: -24px;
    font-size: 68px;
}
header #logo h2 a{
    display: block;
    margin: 0px;
    margin-top: 3px;
    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{
    float: right;
    font-size: 1.2em;
    text-transform: uppercase;
}
header nav ul{
    margin: 0px;
    padding: 0px;
    padding-top: 26px;
}
header nav li{
    display: inline;
    margin: 0px 7px;
}
header nav li.selected{
    border-bottom: 2px solid #ddd;
}
header nav li:hover{
    border-bottom: 2px solid #1c80d4;
}
header nav a{
    color: #fff;
    text-decoration: none;
}


/***************************************************/
/********************* 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 li {
    padding: 0.3em 0;
}
.left-menu a {
    text-decoration: none;
}

.left-menu + .content{
    margin-left: 200px;
}


.content {
    padding: 0em 2em 3em 2em;
    background: #fff;
    overflow: auto;

    -webkit-box-shadow: -1px 1px 2px -1px rgba(0,0,0,0.53);
    -moz-box-shadow: -1px 1px 2px -1px rgba(0,0,0,0.53);
    box-shadow: -1px 1px 2px -1px rgba(0,0,0,0.53);
}

.content h1 {
    font-size: 2em;
    color: #1c619a;
    text-align: center;
}

.content h2 {
    font-size: 1.5em;
    font-weight: normal;
}

.content h3 {
    font-size: 1em;
    padding-left: 2em;
}

.flex-page {
    display: flex;
}
.flex-page .left-menu {
    display: block;
    float: none;
    width: 200px;
    position: relative;
    margin-left: 1em;
    flex-shrink: 0;
}

.content-box {
    margin: 1em;
    border: 1px solid #bbb;
    padding: 2em 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);
}

.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.5em 0 0.25em 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;
}


/*.kb-question-list {
    list-style-type: circle;
}
.kb-question-list a {
    font-size: 1.2em;
}*/
.kb-question-meta {
}
.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{
    padding-top: 4em;
    clear: both;
    color: #1c619a;
    text-align: center;
}
footer a { color: #1c619a; }
footer p { margin-top: 0.6em; margin-bottom: 0.5em; }


.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; }


/***************************************************/
/********************* 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 {

}
.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: 10em;
    padding-top: 1em;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 0.5em 1em;
}
.install-guides li a {
    line-height: 3em;
    text-decoration: none;
}
.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-content {
    width: 75%;
    margin: 3em auto;
}
.home-item{
    float: left;
    text-align: center;
}
.home-item img{
    width: 60%;
    margin: auto;
}
.home-item h2{
    color: #1c619a;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 1.5em;
    margin: 0.80em 0 0.60em 0;
}
.home-item p{
    margin: 0px;
    padding: 0.2em;
}
.home-item b{ color: #1c619a; }
.home-item ul{
    margin: 0;
    padding: 0 1.5em;
}
.home-item ul li{
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.home-signup {
    text-align: center;
}
a.home-signup-button {
    padding: 0.75em 2em;
}

.home-secondary > div {
    padding: 0.5em 2em;
}
.home-secondary b:first-child {
    display: block;
}

@media screen and (max-width: 80em) {
    .home-content {
        width: 100%;
    }
}

@media screen and (max-width: 48em) {
    .home-content {
        width: 100%;
        margin-top: 0;
    }
    .home-item-content {
        margin-left: 20%;
    }
    .home-item h2 {
        margin: 1em 0 0.20em 0;
    }
    .home-item img {
        width: 20%;
        float: left;
        margin-top: 3em;
    }
    .home-signup-button {
        min-width: 50%;
    }
}



/***************************************************/
/********************* Account                     */

.account-status {
    text-align: center;
    margin-bottom: 2em;
}
.account-status-paid, .account-status-disabled {
    font-weight: bold;
}

.account-aff-box {
    background: #E6F5FF;
    border-radius: 4px;
    border: 1px solid #72B6ED;
    box-shadow: 1px 1px 3px #aaa;
    padding: 0.6em 2em;
    margin: 2em 0 0 0;
}
.account-motd {
    background: #E6F5FF;
    border-radius: 4px;
    border: 1px solid #72B6ED;
    box-shadow: 1px 1px 3px #aaa;
    padding: 0.3em 2em;
    text-align: center;
    margin: 2em 0 0 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-tabs {
    float : left;
    padding: 1em;
}

.account-payment-tab > label {
    width: 50%;
    text-align: center;
    display: block;
    float: left;
    cursor: pointer;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    height: 2em;
    border: 1px solid #ccc;
    border-bottom: 0;
    border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    background: #eee;
}
.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;
}
.account-payment-tab [id^="tab"]:checked + label {
    background: #fff;
}
.account-payment-tab > input[type="radio"] {
    display: none;
}
.account-payment-tab .tab-content {
    display: none;
    border: 1px solid #ccc;
    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;
}



@media screen and (min-width: 64em) {
    .account-giftcode-box {
        padding-top: 4em;
    }
}


/***************************************************/
/********************* Gateways                    */

#gateways table {
    width: 100%;
}
#gateways table thead td {
    text-align: center;
    font-size: 1.1em;
    font-weight: 600;
    border: 1px solid #bbb;
    border-top: 0;
}
#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 {
    font-size: 1.2em;
    border-left: 0;
}
#gateways table tbody tr td {
    padding: 10px;
    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 table tr td:not(:first-child) {
    width: 20%;
}
#gateways table tr td .td-info {
    display: block;
    font-size: 0.8em;
    font-weight: normal;
}
#gateways .host_name {
    font-family: monospace;
}


/***************************************************/
/********************* 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-staff {
}
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;
}



/***************************************************/
/********************* 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;
}





@media screen and (max-width: 64em) {
    .content {
        padding: 0em 1em 3em 1em;
    }

    header{
        height: 120px;
    }
    header nav{
        float: left;
        width: 100%;
    }
    header nav ul{
        text-align: center;
        padding-top: 0;
    }

    .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;
    }
}