WordPress.org
Get WordPress

Plugin Directory

Changeset 1958198


Ignore:
Timestamp:
10/17/2018 05:31:30 PM (7 years ago)
Author:
clym
Message:

Fix css mobile

Location:
clym
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • clym/tags/1.3/templates/desktop/css/style.css

    r1958193 r1958198  
    1 @import url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
    2 
    3 body {
    4     background-color: #fafafa !important;
    5     overflow: hidden;
    6 }
    7 
    8 .clym-plugin-container, .clym-plugin-container button {
    9     font-family: "Muli", Verdana, sans-serif;
    10 }
    11 
    12 .clym {
    13     position: absolute;
    14     top: 0;
    15     left: 0;
    16     right: 0;
    17     background-color: #fafafa;
    18 
    19 }
    20 
    21 .clym-plugin-container {
    22     --buttonColor: #13c5d4;
    23     --lightColor: #ffffff;
    24     --greyColor: #666666;
    25     --darkColor: #444;
    26 }
    27 
    28 .header-title {
    29     background-color: #ffffff;
    30     box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
    31     margin-left: -20px;
    32 }
    33 
    34 .header-title img {
    35     position: relative;
    36     margin-top: 16px;
    37     margin-left: 24px;
    38     margin-bottom: 16px;
    39 }
    40 
    41 .header-right {
    42     display: flex;
    43     position: absolute;
    44     top: 24px;
    45     right: 170px;
    46 }
    47 
    48 .header-social {
    49     position: fixed;
    50     right: 24px;
    51     top: 50px;
    52 }
    53 
    54 a{
    55     text-decoration: none !important;
    56     box-shadow: none !important;
    57 }
    58 
    59 .header-social img {
    60     width: 31px;
    61     height: 31px;
    62     margin: 0;
    63     padding-left: 14px;
    64 }
    65 
    66 .header-help {
    67     font-size: 15px;
    68     cursor: pointer;
    69     padding-right: 20px;
    70     text-transform: uppercase;
    71 }
    72 
    73 .header-lang {
    74     margin-top: -6px;
    75     width: 25px;
    76     height: 25px;
    77     border-radius: 50%;
    78     background: rgb(49, 198, 211);
    79     border: 3px solid rgb(49, 198, 211);
    80     cursor: pointer;
    81 }
    82 
    83 .header-lang p {
    84     margin-top: 2px;
    85     margin-left: 2px;
    86     color: #ffffff;
    87     font-size: 15px;
    88     text-transform: capitalize;
    89 }
    90 
    91 .dropdown-content {
    92     min-width: 100px;
    93     border: 10px;
    94     box-sizing: border-box;
    95     display: none;
    96     font-family: Roboto, sans-serif;
    97     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    98     cursor: pointer;
    99     text-decoration: none;
    100     margin-top: -14px;
    101     margin-right: -14px;
    102     padding: 0px;
    103     outline: none;
    104     font-size: 14px;
    105     font-weight: inherit;
    106     position: absolute;
    107     color: rgb(56, 56, 56);
    108     background-color: #ffffff;
    109     line-height: 48px;
    110     transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    111     min-height: 48px;
    112     white-space: nowrap;
    113     box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
    114     border-radius: 2px;
    115     z-index: 1;
    116 }
    117 
    118 .dropdown-content div {
    119     padding-left: 8px;
    120 }
    121 
    122 .dropdown-content div:hover {
    123     background-color: rgba(153, 153, 153, 0.2);
    124     font-size: 14px;
    125 }
    126 
    127 .content {
    128     overflow-y: hidden;
    129     min-width: 520px;
    130     min-height: 600px;
    131 }
    132 
    133 .app-content {
    134     position: relative;
    135     margin-top: 24px;
    136     margin-right: 24px;
    137     color: rgb(56, 56, 56);
    138     background-color: rgb(255, 255, 255);
    139     transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    140     box-sizing: border-box;
    141     font-family: Roboto, sans-serif;
    142     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    143     box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
    144     border-radius: 2px;
    145     min-width: 520px;
    146     height: calc(100vh - 130px);
    147 }
    148 
    149 .app-toolbar {
    150     box-sizing: border-box;
    151     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    152     background-color: rgb(234, 234, 234);
    153     height: 64px;
    154     padding: 0px 24px;
    155     display: flex;
    156     justify-content: space-between;
    157 }
    158 
    159 .app-toolbar .app-toolbar-title {
    160     font-family: Roboto, sans-serif;
    161     text-transform: uppercase;
    162     letter-spacing: .2em;
    163     font-size: 24px;
    164     line-height: 45px;
    165     color: rgba(0, 0, 0, .75) !important;
    166     overflow: hidden;
    167     text-overflow: ellipsis;
    168     white-space: nowrap;
    169 }
    170 
    171 .app-toolbar .app-toolbar-right {
    172     position: relative;
    173     display: flex;
    174     align-items: center;
    175 }
    176 
    177 .app-toolbar .app-toolbar-right .app-tabs .app-tabs-title {
    178     display: flex;
    179 }
    180 
    181 .app-toolbar .app-toolbar-right .app-tabs .app-tabs-item {
    182     margin-bottom: 0;
    183     font-size: 16px;
    184     font-weight: 700;
    185     line-height: 48px;
    186 }
    187 
    188 .app-tabs-item a {
    189     font-weight: 300;
    190     margin-left: 24px;
    191     text-transform: uppercase;
    192     text-decoration: none;
    193     color: #4b4b4b;
    194     height: 48px;
    195     display: inline-block;
    196     cursor: pointer;
    197 }
    198 
    199 .app-tabs-item a:hover {
    200     color: #31c6d3;
    201     text-decoration: none;
    202 }
    203 
    204 .app-tabs-item .active {
    205     color: #31c6d3;
    206 }
    207 
    208 .app-page-title {
    209     margin-left: 24px;
    210     font-weight: 300;
    211 }
    212 
    213 .clym-code, .clym-action {
    214     display: block;
    215     padding: 0px;
    216     position: relative;
    217     background-color: #f6f6f6;
    218 }
    219 
    220 .clym-code .clym-text-area, .clym-action .clym-text-area {
    221     color: var(--darkColor);
    222     width: 100%;
    223     outline: none;
    224     resize: none;
    225     font-family: "Lucida Console", Monaco, monospace;
    226     border: none;
    227     margin: 0;
    228     position: relative;
    229     background-color: transparent;
    230     word-wrap: break-word;
    231 }
    232 
    233 .clym-code .clym-text-area:disabled {
    234     color: #888;
    235 }
    236 
    237 .clym-copy-code {
    238     background-color: rgb(49, 198, 211);
    239     color: #FFFFFF;
    240     position: absolute;
    241     border: none;
    242     padding: 4px 16px;
    243     border-radius: 0 0 0 3px;
    244     top: 0;
    245     right: 0;
    246     filter: opacity(0.8);
    247     outline: transparent;
    248     cursor: pointer;
    249 }
    250 
    251 .clym-copy-code:hover {
    252     filter: opacity(1);
    253 }
    254 
    255 #footer-left, #footer-upgrade, #dolly {
    256     display: none;
    257 }
    258 
    259 .form-meta, .form-widget, .form-plugins, .form-account {
    260     min-width: 745px;
    261     max-width: 745px;
    262 }
    263 
    264 .meta-tag, .widget, .plugin, .clym-account {
    265     margin: -6px 0 0 24px;
    266 }
    267 
    268 .clym-button {
    269     padding-top: 20px;
    270     float: right;
    271 }
    272 
    273 .app-button-cancel {
    274     border: 10px;
    275     box-sizing: border-box;
    276     display: inline-block;
    277     font-family: Roboto, sans-serif;
    278     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    279     cursor: pointer;
    280     text-decoration: none;
    281     margin: 0px 16px;
    282     padding: 0px;
    283     outline: none;
    284     font-size: inherit;
    285     font-weight: inherit;
    286     position: relative;
    287     height: 36px;
    288     line-height: 36px;
    289     min-width: 88px;
    290     color: rgb(56, 56, 56);
    291     transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    292     border-radius: 2px;
    293     user-select: none;
    294     overflow: hidden;
    295     background-color: rgba(0, 0, 0, 0);
    296     text-align: center;
    297     text-transform: uppercase;
    298 }
    299 
    300 .app-button-cancel:hover {
    301     border: 10px;
    302     box-sizing: border-box;
    303     display: inline-block;
    304     font-family: Roboto, sans-serif;
    305     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    306     cursor: pointer;
    307     text-decoration: none;
    308     margin: 0px 16px;
    309     padding: 0px;
    310     outline: none;
    311     font-size: inherit;
    312     font-weight: inherit;
    313     position: relative;
    314     height: 36px;
    315     line-height: 36px;
    316     min-width: 88px;
    317     color: rgb(56, 56, 56);
    318     transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    319     border-radius: 2px;
    320     user-select: none;
    321     overflow: hidden;
    322     background-color: rgba(153, 153, 153, 0.2);
    323     text-align: center;
    324 
    325 }
    326 
    327 .app-button-save, .app-button-add, .app-button-register{
    328     border: 10px;
    329     box-sizing: border-box;
    330     display: inline-block;
    331     font-family: Roboto, sans-serif;
    332     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    333     cursor: pointer;
    334     text-decoration: none;
    335     margin: 0px;
    336     padding: 0px;
    337     outline: none;
    338     font-size: inherit;
    339     font-weight: inherit;
    340     position: relative;
    341     height: 36px;
    342     line-height: 36px;
    343     min-width: 88px;
    344     transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    345     border-radius: 2px;
    346     user-select: none;
    347     overflow: hidden;
    348     background-color: rgb(49, 198, 211);
    349     text-align: center;
    350     color: #f2f2f2;
    351     text-transform: uppercase;
    352 }
    353 
    354 .add-plugin {
    355     float: right;
    356     margin-top: -24px;
    357     padding-right: 24px;
    358 }
    359 
    360 .plugin-item {
    361     padding-top: 1px;
    362     max-width: 745px;
    363 }
    364 
    365 .plugin-default {
    366     line-height: 40px;
    367     color: #000;
    368     background-color: #f0f4f5;
    369     vertical-align: middle;
    370 }
    371 
    372 .plugin-warn {
    373     color: #9F6000;
    374     background-color: #FEEFB3;
    375 }
    376 
    377 .plugin-default i, .plugin-warn i {
    378     cursor: pointer;
    379     float: right;
    380     margin: 8px 24px 0 16px;
    381 }
    382 
    383 .plugin-default button {
    384     display: none;
    385     cursor: pointer;
    386     float: right;
    387     margin: 8px 24px 0 16px;
    388 }
    389 
    390 .plugin-default i:hover, .plugin-warn i:hover {
    391     color: rgb(49, 198, 211);
    392 }
    393 
    394 .plugin-default img, .plugin-warn img {
    395     margin: 0 24px -2px 16px;
    396 }
    397 
    398 .active {
    399     color: rgb(49, 198, 211);
    400 }
    401 
    402 .signal {
    403     border: 5px solid rgb(49, 198, 211);
    404     border-radius: 30px;
    405     height: 30px;
    406     left: 50%;
    407     margin: -15px 0 0 -15px;
    408     opacity: 0;
    409     position: absolute;
    410     top: 400px;
    411     width: 30px;
    412 
    413     animation: pulsate 1s ease-out;
    414     animation-iteration-count: infinite;
    415 }
    416 
    417 @keyframes pulsate {
    418     0% {
    419         transform: scale(.1);
    420         opacity: 0.0;
    421     }
    422     50% {
    423         opacity: 1;
    424     }
    425     100% {
    426         transform: scale(1.2);
    427         opacity: 0;
     1function showContent(divShow) {
     2    var divs = ['meta_tag', 'widget', 'plugins'];
     3    for (var i = 0; i < divs.length; i++) {
     4        if (divShow === divs[i]) {
     5            document.getElementById('toolbar_title_general').style.display = 'block';
     6            document.getElementById('toolbar_title_account').style.display = 'none';
     7            document.getElementById('clym_account').style.display = 'none';
     8            document.getElementById(divShow).style.display = 'block';
     9            document.getElementById('link-' + divShow).classList.add("active");
     10        } else {
     11            document.getElementById(divs[i]).style.display = 'none';
     12            document.getElementById('link-' + divs[i]).classList.remove("active");
     13        }
    42814    }
    42915}
    43016
    431 .clym-notification {
    432     width: 100%;
    433     position: relative;
    434 }
    435 
    436 .notification-success {
    437     font-family: "Muli", Verdana, sans-serif;
    438     display: none;
    439     font-size: 14px;
    440     width: 180px;
    441     padding: 5px 0;
    442     position: absolute;
    443     top: 0;
    444     left: 50%;
    445     margin-left: -90px;
    446     box-sizing: border-box;
    447     background-color: rgb(49, 198, 211);
    448     color: #FFFFFF;
    449     text-align: center;
    450 }
    451 
    452 .notification-error {
    453     font-family: "Muli", Verdana, sans-serif;
    454     display: none;
    455     font-size: 14px;
    456     width: 230px;
    457     padding: 5px 0;
    458     position: absolute;
    459     top: 0;
    460     left: 50%;
    461     margin-left: -90px;
    462     box-sizing: border-box;
    463     background-color: #ef5350;
    464     color: #FFFFFF;
    465     text-align: center;
    466 }
    467 
    468 .animateOpen {
    469     -webkit-animation: moveOpen 1s;
    470     -webkit-animation-fill-mode: forwards;
    471 }
    472 
    473 .verify-domain {
    474     color: #4b4b4b;
    475     text-decoration: none;
    476 }
    477 
    478 .verify-domain:hover {
    479     color: rgb(49, 198, 211);
    480 }
    481 
    482 /* Safari and Chrome */
    483 @-webkit-keyframes moveOpen {
    484     from {
    485         -webkit-transform: translate(0, 40px);
    486     }
    487     25% {
    488         -webkit-transform: translate(0, 32px);
    489     }
    490     75% {
    491         -webkit-transform: translate(0, 30px);
    492     }
    493     to {
    494         -webkit-transform: translate(0, -30px);
     17function showCode(divCode) {
     18    if (document.getElementById(divCode).style.display == 'none') {
     19        document.getElementById('i-' + divCode).className = "fa fa-angle-up fa-2x active";
     20        document.getElementById(divCode).style.display = 'block';
     21    } else {
     22        document.getElementById(divCode).style.display = 'none';
     23        document.getElementById('i-' + divCode).className = "fa fa-angle-down fa-2x";
    49524    }
    49625}
    49726
    498 /* The Modal (background) */
    499 .modal {
    500     display: none; /* Hidden by default */
    501     position: fixed; /* Stay in place */
    502     left: 0;
    503     top: 100px;
    504     width: 100%; /* Full width */
    505     height: 100%; /* Full height */
    506     overflow: auto; /* Enable scroll if needed */
    507     background-color: rgb(0, 0, 0); /* Fallback color */
    508     background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
    509     animation-duration: 0.4s
     27if (document.getElementById("clym-language")) {
     28    document.addEventListener("click", function (evt) {
     29        var flyoutElement = document.getElementById("header-lang"),
     30            targetElement = evt.target;
     31        do {
     32            if (targetElement == flyoutElement) {
     33                document.getElementById("clym-language").style.display = 'block';
     34                return;
     35            }
     36            targetElement = targetElement.parentNode;
     37        } while (targetElement);
     38        document.getElementById("clym-language").style.display = 'none';
     39    });
    51040}
    51141
    512 /* Modal Content */
    513 .modal-content {
    514     top: 20%;
    515     position: fixed;
    516     width: 500px;
    517     left: 70%;
    518     margin-left: -32%;
    519     background-color: #fefefe;
    520     height: 480px;
     42function clymCopyCode(id) {
     43    let area = document.getElementById(id);
     44    area.disabled = false;
     45    area.select();
     46    document.execCommand('copy');
     47    area.disabled = true;
     48    var item = {
     49        field: 'clym_plugin',
     50        value:  id.replace("code-copy-", "")
     51    };
     52    updateData(item);
    52153}
    52254
    523 /* The Close Button */
    524 .close {
    525     color: white;
    526     float: right;
    527     font-size: 28px;
    528     font-weight: bold;
     55function updateData(data) {
     56    var value,
     57        info;
     58    switch (data.field) {
     59        case 'clym_lang':
     60            info = {
     61                field: data.field,
     62                value: data.value
     63            };
     64            break;
     65        case 'clym_meta_tag':
     66            value = document.getElementById("clym_meta_tag").value;
     67            info = {
     68                field: data.field,
     69                value: value
     70            };
     71            break;
     72        case 'clym_widget':
     73            var locationWidget = 'head';
     74            if (document.getElementById('widget_footer').checked) {
     75                locationWidget = 'footer';
     76            }
     77            var script = document.getElementById("clym_widget").value;
     78            info = {
     79                field: data.field,
     80                value: {
     81                    script: script,
     82                    location: locationWidget
     83                }
     84            };
     85            break;
     86        case 'clym_plugin':
     87            info = data;
     88            break;
     89        case 'clym_account':
     90            info = {
     91                field: data.field
     92            };
     93            break;
     94        default:
     95            value = null;
     96            break;
     97    }
     98    if (info) {
     99        jQuery.ajax({
     100                url: 'admin-ajax.php',
     101                type: 'post',
     102                data: {
     103                    action: 'clym_update_option',
     104                    data: info
     105                },
     106                success: function (response) {
     107                    if (info.field == 'clym_plugin' || info.field == 'clym_account') return;
     108                    if (response === 'success') {
     109                        document.getElementById("clym-notification-success").style.display = 'block';
     110                        document.getElementById("clym-notification-error").style.display = 'none';
     111                    } else {
     112                        document.getElementById("clym-notification-error").style.display = 'block';
     113                        document.getElementById("clym-notification-success").style.display = 'none';
     114                    }
     115                    setTimeout(function () {
     116                        if (response === 'success') {
     117                            document.getElementById("clym-notification-success").style.display = 'none';
     118                        } else {
     119                            document.getElementById("clym-notification-error").style.display = 'none';
     120                        }
     121                    }, 2000);
     122                    if (info.field == 'clym_lang') location.reload();
     123                }
     124            }
     125        )
     126        ;
     127    }
    529128}
    530129
    531 .close:hover,
    532 .close:focus {
    533     color: #000;
    534     text-decoration: none;
    535     cursor: pointer;
     130function openModal() {
     131    document.getElementById('myModal').style.display = "block";
     132    var x = document.getElementsByClassName("clym-code");
     133    var i;
     134    for (i = 0; i < x.length; i++) {
     135        x[i].style.display = 'none';
     136    }
     137}
     138function closeModal() {
     139    document.getElementById('myModal').style.display = "none";
     140    location.reload();
    536141}
    537142
    538 .modal-header {
    539     padding: 2px 16px;
    540     background-color: #e7ecef;
    541     color: white;
     143function haveAccount() {
     144    updateData({field: 'clym_account'});
     145    document.getElementById('toolbar_title_general').style.display = 'block';
     146    document.getElementById('toolbar_title_account').style.display = 'none';
     147    showContent('meta_tag');
    542148}
    543 
    544 .modal-header h3 {
    545     color: #4b4b4b;
    546     text-transform: uppercase;
    547     font-weight: normal;
    548 }
    549 
    550 .modal-body {
    551     padding: 2px 16px;
    552 }
    553 
    554 .modal-footer {
    555     padding: 4px 16px;
    556     color: white;
    557     float: right;
    558 }
    559 
    560 .app-select {
    561     font-size: 16px;
    562     line-height: 24px;
    563     width: 100%;
    564     height: 72px;
    565     display: inline-block;
    566     position: relative;
    567     background-color: transparent;
    568     font-family: Roboto, sans-serif;
    569     transition: height 200ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    570     cursor: auto;
    571 }
    572 
    573 .app-label {
    574     position: absolute;
    575     line-height: 22px;
    576     font-size: 14px;
    577     top: 38px;
    578     transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    579     transform: scale(1) translate(0px, 0px);
    580     transform-origin: left top 0px;
    581     pointer-events: none;
    582     user-select: none;
    583     color: #272822;
    584 }
    585 
    586 .app-svg {
    587     display: inline-block;
    588     color: rgb(56, 56, 56);
    589     height: 24px;
    590     width: 24px;
    591     fill: rgb(212, 212, 212);
    592     user-select: none;
    593     transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    594     float: right;
    595     margin-top: 36px;
    596 }
    597 
    598 .app-small-text {
    599     margin-bottom: 10px;
    600     color: #272822;
    601 }
    602 
    603 .clym-footer {
    604     position: absolute;
    605     bottom: 0px;
    606     min-width: 745px;
    607     max-width: 745px;
    608     left: 24px;
    609     right: 0;
    610 }
    611 
    612 .clym-login {
    613     font-size: 14px;
    614     padding-right: 24px;
    615     color: rgb(56, 56, 56);
    616     cursor: pointer;
    617     text-decoration: none;
    618 }
    619 
    620 .clym-login:hover {
    621     color: #13c5d4;
    622 }
    623 .app-button-register:hover, .app-button-register:active, .app-button-register:focus  {
    624     color: #ffffff !important;
    625 }
    626 
    627 @media only screen and (max-width: 480px) {
    628     .clym {
    629         top: 35px;
    630     }
    631 
    632     .header-title {
    633         height: 56px;
    634     }
    635 
    636     .header-right {
    637         right: 13px;
    638     }
    639 
    640     .header-social {
    641         display: none;
    642     }
    643 
    644     .app-toolbar {
    645         width: 100%;
    646         position: fixed;
    647         z-index: 2;
    648     }
    649 
    650     .app-toolbar-title {
    651         font-size: 20px !important;
    652         margin-left: -10px;
    653     }
    654 
    655     .app-content {
    656         display: inline-block;
    657         min-width: 320px;
    658         margin-top: 3px;
    659         margin-left: -10px;
    660         margin-right: 0;
    661         overflow: auto;
    662         box-shadow: none;
    663     }
    664 
    665     .app-toolbar-right {
    666         background-color: #f0f4f5;
    667         position: fixed !important;
    668         top: 128px;
    669         margin-left: -24px;
    670         width: 100%;
    671         height: 28px;
    672     }
    673 
    674     .app-tabs {
    675         margin-left: 80px;
    676     }
    677 
    678     .content {
    679         padding-top: 55px;
    680         min-width: 320px;
    681         margin-bottom: 0px;
    682     }
    683 
    684     .form-account, .form-meta, .form-widget, .form-plugins, .clym-footer {
    685         min-width: 320px;
    686         margin-right: 24px
    687     }
    688 
    689     .form-widget {
    690         margin-left: 24px;
    691     }
    692 
    693     .app-toolbar {
    694         height: 35px;
    695     }
    696 
    697     .clym-footer {
    698         display: none;
    699     }
    700 
    701     .header-help {
    702         padding-right: 12px;
    703         padding-top: 2px;
    704     }
    705 }

  • clym/trunk/templates/desktop/css/style.css

    r1958193 r1958198  
    1 @import url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
    2 
    3 body {
    4     background-color: #fafafa !important;
    5     overflow: hidden;
    6 }
    7 
    8 .clym-plugin-container, .clym-plugin-container button {
    9     font-family: "Muli", Verdana, sans-serif;
    10 }
    11 
    12 .clym {
    13     position: absolute;
    14     top: 0;
    15     left: 0;
    16     right: 0;
    17     background-color: #fafafa;
    18 
    19 }
    20 
    21 .clym-plugin-container {
    22     --buttonColor: #13c5d4;
    23     --lightColor: #ffffff;
    24     --greyColor: #666666;
    25     --darkColor: #444;
    26 }
    27 
    28 .header-title {
    29     background-color: #ffffff;
    30     box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
    31     margin-left: -20px;
    32 }
    33 
    34 .header-title img {
    35     position: relative;
    36     margin-top: 16px;
    37     margin-left: 24px;
    38     margin-bottom: 16px;
    39 }
    40 
    41 .header-right {
    42     display: flex;
    43     position: absolute;
    44     top: 24px;
    45     right: 170px;
    46 }
    47 
    48 .header-social {
    49     position: fixed;
    50     right: 24px;
    51     top: 50px;
    52 }
    53 
    54 a{
    55     text-decoration: none !important;
    56     box-shadow: none !important;
    57 }
    58 
    59 .header-social img {
    60     width: 31px;
    61     height: 31px;
    62     margin: 0;
    63     padding-left: 14px;
    64 }
    65 
    66 .header-help {
    67     font-size: 15px;
    68     cursor: pointer;
    69     padding-right: 20px;
    70     text-transform: uppercase;
    71 }
    72 
    73 .header-lang {
    74     margin-top: -6px;
    75     width: 25px;
    76     height: 25px;
    77     border-radius: 50%;
    78     background: rgb(49, 198, 211);
    79     border: 3px solid rgb(49, 198, 211);
    80     cursor: pointer;
    81 }
    82 
    83 .header-lang p {
    84     margin-top: 2px;
    85     margin-left: 2px;
    86     color: #ffffff;
    87     font-size: 15px;
    88     text-transform: capitalize;
    89 }
    90 
    91 .dropdown-content {
    92     min-width: 100px;
    93     border: 10px;
    94     box-sizing: border-box;
    95     display: none;
    96     font-family: Roboto, sans-serif;
    97     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    98     cursor: pointer;
    99     text-decoration: none;
    100     margin-top: -14px;
    101     margin-right: -14px;
    102     padding: 0px;
    103     outline: none;
    104     font-size: 14px;
    105     font-weight: inherit;
    106     position: absolute;
    107     color: rgb(56, 56, 56);
    108     background-color: #ffffff;
    109     line-height: 48px;
    110     transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    111     min-height: 48px;
    112     white-space: nowrap;
    113     box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
    114     border-radius: 2px;
    115     z-index: 1;
    116 }
    117 
    118 .dropdown-content div {
    119     padding-left: 8px;
    120 }
    121 
    122 .dropdown-content div:hover {
    123     background-color: rgba(153, 153, 153, 0.2);
    124     font-size: 14px;
    125 }
    126 
    127 .content {
    128     overflow-y: hidden;
    129     min-width: 520px;
    130     min-height: 600px;
    131 }
    132 
    133 .app-content {
    134     position: relative;
    135     margin-top: 24px;
    136     margin-right: 24px;
    137     color: rgb(56, 56, 56);
    138     background-color: rgb(255, 255, 255);
    139     transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    140     box-sizing: border-box;
    141     font-family: Roboto, sans-serif;
    142     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    143     box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
    144     border-radius: 2px;
    145     min-width: 520px;
    146     height: calc(100vh - 130px);
    147 }
    148 
    149 .app-toolbar {
    150     box-sizing: border-box;
    151     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    152     background-color: rgb(234, 234, 234);
    153     height: 64px;
    154     padding: 0px 24px;
    155     display: flex;
    156     justify-content: space-between;
    157 }
    158 
    159 .app-toolbar .app-toolbar-title {
    160     font-family: Roboto, sans-serif;
    161     text-transform: uppercase;
    162     letter-spacing: .2em;
    163     font-size: 24px;
    164     line-height: 45px;
    165     color: rgba(0, 0, 0, .75) !important;
    166     overflow: hidden;
    167     text-overflow: ellipsis;
    168     white-space: nowrap;
    169 }
    170 
    171 .app-toolbar .app-toolbar-right {
    172     position: relative;
    173     display: flex;
    174     align-items: center;
    175 }
    176 
    177 .app-toolbar .app-toolbar-right .app-tabs .app-tabs-title {
    178     display: flex;
    179 }
    180 
    181 .app-toolbar .app-toolbar-right .app-tabs .app-tabs-item {
    182     margin-bottom: 0;
    183     font-size: 16px;
    184     font-weight: 700;
    185     line-height: 48px;
    186 }
    187 
    188 .app-tabs-item a {
    189     font-weight: 300;
    190     margin-left: 24px;
    191     text-transform: uppercase;
    192     text-decoration: none;
    193     color: #4b4b4b;
    194     height: 48px;
    195     display: inline-block;
    196     cursor: pointer;
    197 }
    198 
    199 .app-tabs-item a:hover {
    200     color: #31c6d3;
    201     text-decoration: none;
    202 }
    203 
    204 .app-tabs-item .active {
    205     color: #31c6d3;
    206 }
    207 
    208 .app-page-title {
    209     margin-left: 24px;
    210     font-weight: 300;
    211 }
    212 
    213 .clym-code, .clym-action {
    214     display: block;
    215     padding: 0px;
    216     position: relative;
    217     background-color: #f6f6f6;
    218 }
    219 
    220 .clym-code .clym-text-area, .clym-action .clym-text-area {
    221     color: var(--darkColor);
    222     width: 100%;
    223     outline: none;
    224     resize: none;
    225     font-family: "Lucida Console", Monaco, monospace;
    226     border: none;
    227     margin: 0;
    228     position: relative;
    229     background-color: transparent;
    230     word-wrap: break-word;
    231 }
    232 
    233 .clym-code .clym-text-area:disabled {
    234     color: #888;
    235 }
    236 
    237 .clym-copy-code {
    238     background-color: rgb(49, 198, 211);
    239     color: #FFFFFF;
    240     position: absolute;
    241     border: none;
    242     padding: 4px 16px;
    243     border-radius: 0 0 0 3px;
    244     top: 0;
    245     right: 0;
    246     filter: opacity(0.8);
    247     outline: transparent;
    248     cursor: pointer;
    249 }
    250 
    251 .clym-copy-code:hover {
    252     filter: opacity(1);
    253 }
    254 
    255 #footer-left, #footer-upgrade, #dolly {
    256     display: none;
    257 }
    258 
    259 .form-meta, .form-widget, .form-plugins, .form-account {
    260     min-width: 745px;
    261     max-width: 745px;
    262 }
    263 
    264 .meta-tag, .widget, .plugin, .clym-account {
    265     margin: -6px 0 0 24px;
    266 }
    267 
    268 .clym-button {
    269     padding-top: 20px;
    270     float: right;
    271 }
    272 
    273 .app-button-cancel {
    274     border: 10px;
    275     box-sizing: border-box;
    276     display: inline-block;
    277     font-family: Roboto, sans-serif;
    278     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    279     cursor: pointer;
    280     text-decoration: none;
    281     margin: 0px 16px;
    282     padding: 0px;
    283     outline: none;
    284     font-size: inherit;
    285     font-weight: inherit;
    286     position: relative;
    287     height: 36px;
    288     line-height: 36px;
    289     min-width: 88px;
    290     color: rgb(56, 56, 56);
    291     transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    292     border-radius: 2px;
    293     user-select: none;
    294     overflow: hidden;
    295     background-color: rgba(0, 0, 0, 0);
    296     text-align: center;
    297     text-transform: uppercase;
    298 }
    299 
    300 .app-button-cancel:hover {
    301     border: 10px;
    302     box-sizing: border-box;
    303     display: inline-block;
    304     font-family: Roboto, sans-serif;
    305     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    306     cursor: pointer;
    307     text-decoration: none;
    308     margin: 0px 16px;
    309     padding: 0px;
    310     outline: none;
    311     font-size: inherit;
    312     font-weight: inherit;
    313     position: relative;
    314     height: 36px;
    315     line-height: 36px;
    316     min-width: 88px;
    317     color: rgb(56, 56, 56);
    318     transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    319     border-radius: 2px;
    320     user-select: none;
    321     overflow: hidden;
    322     background-color: rgba(153, 153, 153, 0.2);
    323     text-align: center;
    324 
    325 }
    326 
    327 .app-button-save, .app-button-add, .app-button-register{
    328     border: 10px;
    329     box-sizing: border-box;
    330     display: inline-block;
    331     font-family: Roboto, sans-serif;
    332     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    333     cursor: pointer;
    334     text-decoration: none;
    335     margin: 0px;
    336     padding: 0px;
    337     outline: none;
    338     font-size: inherit;
    339     font-weight: inherit;
    340     position: relative;
    341     height: 36px;
    342     line-height: 36px;
    343     min-width: 88px;
    344     transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    345     border-radius: 2px;
    346     user-select: none;
    347     overflow: hidden;
    348     background-color: rgb(49, 198, 211);
    349     text-align: center;
    350     color: #f2f2f2;
    351     text-transform: uppercase;
    352 }
    353 
    354 .add-plugin {
    355     float: right;
    356     margin-top: -24px;
    357     padding-right: 24px;
    358 }
    359 
    360 .plugin-item {
    361     padding-top: 1px;
    362     max-width: 745px;
    363 }
    364 
    365 .plugin-default {
    366     line-height: 40px;
    367     color: #000;
    368     background-color: #f0f4f5;
    369     vertical-align: middle;
    370 }
    371 
    372 .plugin-warn {
    373     color: #9F6000;
    374     background-color: #FEEFB3;
    375 }
    376 
    377 .plugin-default i, .plugin-warn i {
    378     cursor: pointer;
    379     float: right;
    380     margin: 8px 24px 0 16px;
    381 }
    382 
    383 .plugin-default button {
    384     display: none;
    385     cursor: pointer;
    386     float: right;
    387     margin: 8px 24px 0 16px;
    388 }
    389 
    390 .plugin-default i:hover, .plugin-warn i:hover {
    391     color: rgb(49, 198, 211);
    392 }
    393 
    394 .plugin-default img, .plugin-warn img {
    395     margin: 0 24px -2px 16px;
    396 }
    397 
    398 .active {
    399     color: rgb(49, 198, 211);
    400 }
    401 
    402 .signal {
    403     border: 5px solid rgb(49, 198, 211);
    404     border-radius: 30px;
    405     height: 30px;
    406     left: 50%;
    407     margin: -15px 0 0 -15px;
    408     opacity: 0;
    409     position: absolute;
    410     top: 400px;
    411     width: 30px;
    412 
    413     animation: pulsate 1s ease-out;
    414     animation-iteration-count: infinite;
    415 }
    416 
    417 @keyframes pulsate {
    418     0% {
    419         transform: scale(.1);
    420         opacity: 0.0;
    421     }
    422     50% {
    423         opacity: 1;
    424     }
    425     100% {
    426         transform: scale(1.2);
    427         opacity: 0;
     1function showContent(divShow) {
     2    var divs = ['meta_tag', 'widget', 'plugins'];
     3    for (var i = 0; i < divs.length; i++) {
     4        if (divShow === divs[i]) {
     5            document.getElementById('toolbar_title_general').style.display = 'block';
     6            document.getElementById('toolbar_title_account').style.display = 'none';
     7            document.getElementById('clym_account').style.display = 'none';
     8            document.getElementById(divShow).style.display = 'block';
     9            document.getElementById('link-' + divShow).classList.add("active");
     10        } else {
     11            document.getElementById(divs[i]).style.display = 'none';
     12            document.getElementById('link-' + divs[i]).classList.remove("active");
     13        }
    42814    }
    42915}
    43016
    431 .clym-notification {
    432     width: 100%;
    433     position: relative;
    434 }
    435 
    436 .notification-success {
    437     font-family: "Muli", Verdana, sans-serif;
    438     display: none;
    439     font-size: 14px;
    440     width: 180px;
    441     padding: 5px 0;
    442     position: absolute;
    443     top: 0;
    444     left: 50%;
    445     margin-left: -90px;
    446     box-sizing: border-box;
    447     background-color: rgb(49, 198, 211);
    448     color: #FFFFFF;
    449     text-align: center;
    450 }
    451 
    452 .notification-error {
    453     font-family: "Muli", Verdana, sans-serif;
    454     display: none;
    455     font-size: 14px;
    456     width: 230px;
    457     padding: 5px 0;
    458     position: absolute;
    459     top: 0;
    460     left: 50%;
    461     margin-left: -90px;
    462     box-sizing: border-box;
    463     background-color: #ef5350;
    464     color: #FFFFFF;
    465     text-align: center;
    466 }
    467 
    468 .animateOpen {
    469     -webkit-animation: moveOpen 1s;
    470     -webkit-animation-fill-mode: forwards;
    471 }
    472 
    473 .verify-domain {
    474     color: #4b4b4b;
    475     text-decoration: none;
    476 }
    477 
    478 .verify-domain:hover {
    479     color: rgb(49, 198, 211);
    480 }
    481 
    482 /* Safari and Chrome */
    483 @-webkit-keyframes moveOpen {
    484     from {
    485         -webkit-transform: translate(0, 40px);
    486     }
    487     25% {
    488         -webkit-transform: translate(0, 32px);
    489     }
    490     75% {
    491         -webkit-transform: translate(0, 30px);
    492     }
    493     to {
    494         -webkit-transform: translate(0, -30px);
     17function showCode(divCode) {
     18    if (document.getElementById(divCode).style.display == 'none') {
     19        document.getElementById('i-' + divCode).className = "fa fa-angle-up fa-2x active";
     20        document.getElementById(divCode).style.display = 'block';
     21    } else {
     22        document.getElementById(divCode).style.display = 'none';
     23        document.getElementById('i-' + divCode).className = "fa fa-angle-down fa-2x";
    49524    }
    49625}
    49726
    498 /* The Modal (background) */
    499 .modal {
    500     display: none; /* Hidden by default */
    501     position: fixed; /* Stay in place */
    502     left: 0;
    503     top: 100px;
    504     width: 100%; /* Full width */
    505     height: 100%; /* Full height */
    506     overflow: auto; /* Enable scroll if needed */
    507     background-color: rgb(0, 0, 0); /* Fallback color */
    508     background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
    509     animation-duration: 0.4s
     27if (document.getElementById("clym-language")) {
     28    document.addEventListener("click", function (evt) {
     29        var flyoutElement = document.getElementById("header-lang"),
     30            targetElement = evt.target;
     31        do {
     32            if (targetElement == flyoutElement) {
     33                document.getElementById("clym-language").style.display = 'block';
     34                return;
     35            }
     36            targetElement = targetElement.parentNode;
     37        } while (targetElement);
     38        document.getElementById("clym-language").style.display = 'none';
     39    });
    51040}
    51141
    512 /* Modal Content */
    513 .modal-content {
    514     top: 20%;
    515     position: fixed;
    516     width: 500px;
    517     left: 70%;
    518     margin-left: -32%;
    519     background-color: #fefefe;
    520     height: 480px;
     42function clymCopyCode(id) {
     43    let area = document.getElementById(id);
     44    area.disabled = false;
     45    area.select();
     46    document.execCommand('copy');
     47    area.disabled = true;
     48    var item = {
     49        field: 'clym_plugin',
     50        value:  id.replace("code-copy-", "")
     51    };
     52    updateData(item);
    52153}
    52254
    523 /* The Close Button */
    524 .close {
    525     color: white;
    526     float: right;
    527     font-size: 28px;
    528     font-weight: bold;
     55function updateData(data) {
     56    var value,
     57        info;
     58    switch (data.field) {
     59        case 'clym_lang':
     60            info = {
     61                field: data.field,
     62                value: data.value
     63            };
     64            break;
     65        case 'clym_meta_tag':
     66            value = document.getElementById("clym_meta_tag").value;
     67            info = {
     68                field: data.field,
     69                value: value
     70            };
     71            break;
     72        case 'clym_widget':
     73            var locationWidget = 'head';
     74            if (document.getElementById('widget_footer').checked) {
     75                locationWidget = 'footer';
     76            }
     77            var script = document.getElementById("clym_widget").value;
     78            info = {
     79                field: data.field,
     80                value: {
     81                    script: script,
     82                    location: locationWidget
     83                }
     84            };
     85            break;
     86        case 'clym_plugin':
     87            info = data;
     88            break;
     89        case 'clym_account':
     90            info = {
     91                field: data.field
     92            };
     93            break;
     94        default:
     95            value = null;
     96            break;
     97    }
     98    if (info) {
     99        jQuery.ajax({
     100                url: 'admin-ajax.php',
     101                type: 'post',
     102                data: {
     103                    action: 'clym_update_option',
     104                    data: info
     105                },
     106                success: function (response) {
     107                    if (info.field == 'clym_plugin' || info.field == 'clym_account') return;
     108                    if (response === 'success') {
     109                        document.getElementById("clym-notification-success").style.display = 'block';
     110                        document.getElementById("clym-notification-error").style.display = 'none';
     111                    } else {
     112                        document.getElementById("clym-notification-error").style.display = 'block';
     113                        document.getElementById("clym-notification-success").style.display = 'none';
     114                    }
     115                    setTimeout(function () {
     116                        if (response === 'success') {
     117                            document.getElementById("clym-notification-success").style.display = 'none';
     118                        } else {
     119                            document.getElementById("clym-notification-error").style.display = 'none';
     120                        }
     121                    }, 2000);
     122                    if (info.field == 'clym_lang') location.reload();
     123                }
     124            }
     125        )
     126        ;
     127    }
    529128}
    530129
    531 .close:hover,
    532 .close:focus {
    533     color: #000;
    534     text-decoration: none;
    535     cursor: pointer;
     130function openModal() {
     131    document.getElementById('myModal').style.display = "block";
     132    var x = document.getElementsByClassName("clym-code");
     133    var i;
     134    for (i = 0; i < x.length; i++) {
     135        x[i].style.display = 'none';
     136    }
     137}
     138function closeModal() {
     139    document.getElementById('myModal').style.display = "none";
     140    location.reload();
    536141}
    537142
    538 .modal-header {
    539     padding: 2px 16px;
    540     background-color: #e7ecef;
    541     color: white;
     143function haveAccount() {
     144    updateData({field: 'clym_account'});
     145    document.getElementById('toolbar_title_general').style.display = 'block';
     146    document.getElementById('toolbar_title_account').style.display = 'none';
     147    showContent('meta_tag');
    542148}
    543 
    544 .modal-header h3 {
    545     color: #4b4b4b;
    546     text-transform: uppercase;
    547     font-weight: normal;
    548 }
    549 
    550 .modal-body {
    551     padding: 2px 16px;
    552 }
    553 
    554 .modal-footer {
    555     padding: 4px 16px;
    556     color: white;
    557     float: right;
    558 }
    559 
    560 .app-select {
    561     font-size: 16px;
    562     line-height: 24px;
    563     width: 100%;
    564     height: 72px;
    565     display: inline-block;
    566     position: relative;
    567     background-color: transparent;
    568     font-family: Roboto, sans-serif;
    569     transition: height 200ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    570     cursor: auto;
    571 }
    572 
    573 .app-label {
    574     position: absolute;
    575     line-height: 22px;
    576     font-size: 14px;
    577     top: 38px;
    578     transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    579     transform: scale(1) translate(0px, 0px);
    580     transform-origin: left top 0px;
    581     pointer-events: none;
    582     user-select: none;
    583     color: #272822;
    584 }
    585 
    586 .app-svg {
    587     display: inline-block;
    588     color: rgb(56, 56, 56);
    589     height: 24px;
    590     width: 24px;
    591     fill: rgb(212, 212, 212);
    592     user-select: none;
    593     transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    594     float: right;
    595     margin-top: 36px;
    596 }
    597 
    598 .app-small-text {
    599     margin-bottom: 10px;
    600     color: #272822;
    601 }
    602 
    603 .clym-footer {
    604     position: absolute;
    605     bottom: 0px;
    606     min-width: 745px;
    607     max-width: 745px;
    608     left: 24px;
    609     right: 0;
    610 }
    611 
    612 .clym-login {
    613     font-size: 14px;
    614     padding-right: 24px;
    615     color: rgb(56, 56, 56);
    616     cursor: pointer;
    617     text-decoration: none;
    618 }
    619 
    620 .clym-login:hover {
    621     color: #13c5d4;
    622 }
    623 .app-button-register:hover, .app-button-register:active, .app-button-register:focus  {
    624     color: #ffffff !important;
    625 }
    626 
    627 @media only screen and (max-width: 480px) {
    628     .clym {
    629         top: 35px;
    630     }
    631 
    632     .header-title {
    633         height: 56px;
    634     }
    635 
    636     .header-right {
    637         right: 13px;
    638     }
    639 
    640     .header-social {
    641         display: none;
    642     }
    643 
    644     .app-toolbar {
    645         width: 100%;
    646         position: fixed;
    647         z-index: 2;
    648     }
    649 
    650     .app-toolbar-title {
    651         font-size: 20px !important;
    652         margin-left: -10px;
    653     }
    654 
    655     .app-content {
    656         display: inline-block;
    657         min-width: 320px;
    658         margin-top: 3px;
    659         margin-left: -10px;
    660         margin-right: 0;
    661         overflow: auto;
    662         box-shadow: none;
    663     }
    664 
    665     .app-toolbar-right {
    666         background-color: #f0f4f5;
    667         position: fixed !important;
    668         top: 128px;
    669         margin-left: -24px;
    670         width: 100%;
    671         height: 28px;
    672     }
    673 
    674     .app-tabs {
    675         margin-left: 80px;
    676     }
    677 
    678     .content {
    679         padding-top: 55px;
    680         min-width: 320px;
    681         margin-bottom: 0px;
    682     }
    683 
    684     .form-account, .form-meta, .form-widget, .form-plugins, .clym-footer {
    685         min-width: 320px;
    686         margin-right: 24px
    687     }
    688 
    689     .form-widget {
    690         margin-left: 24px;
    691     }
    692 
    693     .app-toolbar {
    694         height: 35px;
    695     }
    696 
    697     .clym-footer {
    698         display: none;
    699     }
    700 
    701     .header-help {
    702         padding-right: 12px;
    703         padding-top: 2px;
    704     }
    705 }
Note: See TracChangeset for help on using the changeset viewer.