FFFFFF

  • More
Discussions
Forum's Comments
  • Hi Alex T⚜️ 

    Thank you for your reply, Hope this explanation helps. 

    Please see the image at the end of this post. Primary Changes the Top and Bottom navigation bars, but it does not change the "android:navigationBarColor" which sits below the bottom navigation bar and it is not defined in the app theme. 

    Adding "navigationBarColor:" line to Theme.js does not change the "navigationBarColor:" as it is not defined in the App. 

    Please add this <item name="android:navigationBarColor"></item> to styles.xml in the Android folder and compile the app to see the bar in RED. 

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:textColor"></item>
    <item name="android:navigationBarColor"></item>
    </style>


    image_transcoder.php?o=bx_froala_image&h=5234&dpx=2&t=1625668572


    💓0 😆0 😲0 😥0 😠0 0
    • <nav class="menu">

         <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open" />

         <label class="menu-open-button" for="menu-open">

          <span class="lines line-1"></span>

          <span class="lines line-2"></span>

          <span class="lines line-3"></span>

        </label>


         <a href="#" class="menu-item blue"> <i class="fad fa-film"></i> </a>

         <a href="#" class="menu-item green"> <i class="fad fa-waveform-path"></i> </a>

         <a href="#" class="menu-item red"> <i class="far fa-calendar-star"></i> </a>

         <a href="#" class="menu-item purple"> <i class="fas fa-users"></i> </a>

         <a href="#" class="menu-item orange"> <i class="fal fa-money-bill-wave"></i> </a>

         <a href="#" class="menu-item lightblue"> <i class="fal fa-sparkles"></i> </a>

      </nav>


      <style>

      body {

         padding: 0;

         margin: 0;

         background: #596778;

         color: ;

         text-align: center;

         font-family: "Lato", sans-serif;

      }


      @media screen and (max-width: 700px) {

         body {

            padding: 170px 0 0 0;

            width: 100%

         }

      }


      a {

         color: inherit;

      }


      .menu-item,

      .menu-open-button {

         background: ;

         border-radius: 100%;

         width: 80px;

         height: 80px;

         margin-left: -40px;

         position: absolute;

         color: ;

         text-align: center;

         line-height: 80px;

         -webkit-transform: translate3d(0, 0, 0);

         transform: translate3d(0, 0, 0);

         -webkit-transition: -webkit-transform ease-out 200ms;

         transition: -webkit-transform ease-out 200ms;

         transition: transform ease-out 200ms;

         transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;

      }


      .menu-open {

         display: none;

      }


      .lines {

         width: 25px;

         height: 3px;

         background: #596778;

         display: block;

         position: absolute;

         top: 50%;

         left: 50%;

         margin-left: -12.5px;

         margin-top: -1.5px;

         -webkit-transition: -webkit-transform 200ms;

         transition: -webkit-transform 200ms;

         transition: transform 200ms;

         transition: transform 200ms, -webkit-transform 200ms;

      }


      .line-1 {

         -webkit-transform: translate3d(0, -8px, 0);

         transform: translate3d(0, -8px, 0);

      }


      .line-2 {

         -webkit-transform: translate3d(0, 0, 0);

         transform: translate3d(0, 0, 0);

      }


      .line-3 {

         -webkit-transform: translate3d(0, 8px, 0);

         transform: translate3d(0, 8px, 0);

      }


      .menu-open:checked + .menu-open-button .line-1 {

         -webkit-transform: translate3d(0, 0, 0) rotate(45deg);

         transform: translate3d(0, 0, 0) rotate(45deg);

      }


      .menu-open:checked + .menu-open-button .line-2 {

         -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);

         transform: translate3d(0, 0, 0) scale(0.1, 1);

      }


      .menu-open:checked + .menu-open-button .line-3 {

         -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);

         transform: translate3d(0, 0, 0) rotate(-45deg);

      }


      .menu {

         margin: auto;

         position: absolute;

         top: 0;

         bottom: 0;

         left: 0;

         right: 0;

         width: 80px;

         height: 80px;

         text-align: center;

         box-sizing: border-box;

         font-size: 26px;

      }



      /* .menu-item {

         transition: all 0.1s ease 0s;

      } */


      .menu-item:hover {

         background: ;

         color: #3290B1;

      }


      .menu-item:nth-child(3) {

         -webkit-transition-duration: 180ms;

         transition-duration: 180ms;

      }


      .menu-item:nth-child(4) {

         -webkit-transition-duration: 180ms;

         transition-duration: 180ms;

      }


      .menu-item:nth-child(5) {

         -webkit-transition-duration: 180ms;

         transition-duration: 180ms;

      }


      .menu-item:nth-child(6) {

         -webkit-transition-duration: 180ms;

         transition-duration: 180ms;

      }


      .menu-item:nth-child(7) {

         -webkit-transition-duration: 180ms;

         transition-duration: 180ms;

      }


      .menu-item:nth-child(8) {

         -webkit-transition-duration: 180ms;

         transition-duration: 180ms;

      }


      .menu-item:nth-child(9) {

         -webkit-transition-duration: 180ms;

         transition-duration: 180ms;

      }


      .menu-open-button {

         z-index: 2;

         -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);

         transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);

         -webkit-transition-duration: 400ms;

         transition-duration: 400ms;

         -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);

         transform: scale(1.1, 1.1) translate3d(0, 0, 0);

         cursor: pointer;

         box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);

      }


      .menu-open-button:hover {

         -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);

         transform: scale(1.2, 1.2) translate3d(0, 0, 0);

      }


      .menu-open:checked + .menu-open-button {

         -webkit-transition-timing-function: linear;

         transition-timing-function: linear;

         -webkit-transition-duration: 200ms;

         transition-duration: 200ms;

         -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);

         transform: scale(0.8, 0.8) translate3d(0, 0, 0);

      }


      .menu-open:checked ~ .menu-item {

         -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);

         transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);

      }


      .menu-open:checked ~ .menu-item:nth-child(3) {

         transition-duration: 180ms;

         -webkit-transition-duration: 180ms;

         -webkit-transform: translate3d(0.08361px, -104.99997px, 0);

         transform: translate3d(0.08361px, -104.99997px, 0);

      }


      .menu-open:checked ~ .menu-item:nth-child(4) {

         transition-duration: 280ms;

         -webkit-transition-duration: 280ms;

         -webkit-transform: translate3d(90.9466px, -52.47586px, 0);

         transform: translate3d(90.9466px, -52.47586px, 0);

      }


      .menu-open:checked ~ .menu-item:nth-child(5) {

         transition-duration: 380ms;

         -webkit-transition-duration: 380ms;

         -webkit-transform: translate3d(90.9466px, 52.47586px, 0);

         transform: translate3d(90.9466px, 52.47586px, 0);

      }


      .menu-open:checked ~ .menu-item:nth-child(6) {

         transition-duration: 480ms;

         -webkit-transition-duration: 480ms;

         -webkit-transform: translate3d(0.08361px, 104.99997px, 0);

         transform: translate3d(0.08361px, 104.99997px, 0);

      }


      .menu-open:checked ~ .menu-item:nth-child(7) {

         transition-duration: 580ms;

         -webkit-transition-duration: 580ms;

         -webkit-transform: translate3d(-90.86291px, 52.62064px, 0);

         transform: translate3d(-90.86291px, 52.62064px, 0);

      }


      .menu-open:checked ~ .menu-item:nth-child(8) {

         transition-duration: 680ms;

         -webkit-transition-duration: 680ms;

         -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);

         transform: translate3d(-91.03006px, -52.33095px, 0);

      }


      .menu-open:checked ~ .menu-item:nth-child(9) {

         transition-duration: 780ms;

         -webkit-transition-duration: 780ms;

         -webkit-transform: translate3d(-0.25084px, -104.9997px, 0);

         transform: translate3d(-0.25084px, -104.9997px, 0);

      }


      .blue {

         background-color: #669AE1;

         box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);

         text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);

      }


      .blue:hover {

         color: #669AE1;

         text-shadow: none;

      }


      .green {

         background-color: #70CC72;

         box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);

         text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);

      }


      .green:hover {

         color: #70CC72;

         text-shadow: none;

      }


      .red {

         background-color: ;

         box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);

         text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);

      }


      .red:hover {

         color: ;

         text-shadow: none;

      }


      .purple {

         background-color: ;

         box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);

         text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);

      }


      .purple:hover {

         color: ;

         text-shadow: none;

      }


      .orange {

         background-color: ;

         box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);

         text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);

      }


      .orange:hover {

         color: ;

         text-shadow: none;

      }


      .lightblue {

         background-color: #62C2E4;

         box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);

         text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);

      }


      .lightblue:hover {

         color: #62C2E4;

         text-shadow: none;

      }


      .credit {

         margin: 24px 20px 120px 0;

         text-align: right;

         color: ;

      }


      .credit a {

         padding: 8px 0;

         color: ;

         text-decoration: none;

         transition: all 0.3s ease 0s;

      }


      .credit a:hover {

         text-decoration: underline;

      }

      </style>

      💓0 😆0 😲0 😥0 😠0 0
      • Hello Leonids!

        Many thanks for help! 

        Fot those also starting on UNA and with no knownoledge on CSS, the line to add is:

                background-color: ;

        💓0 😆0 😲0 😥0 😠0 0

        • div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom li .sys-action-do-icon, div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom li .bx-menu-item-icon {

          1.     background-color: rgba(0, 0, 0, 1.0);
          2.     border: 1px solid ;

          }

          💓0 😆0 😲0 😥0 😠0 0
          • This is what I have in my injections: 


            <link href="https://fonts.googleapis.com/css?family=Play" rel="stylesheet">


            <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">

            <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">

            <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">

            <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">

            <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">

            <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">

            <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">

            <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">

            <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">

            <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">

            <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

            <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

            <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

            <link rel="manifest" href="/manifest.json">

            <meta name="msapplication-TileColor" content="">

            <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">

            <meta name="theme-color" content="">


            <!-- Global site tag (gtag.js) - Google Analytics -->

            <script async src="https://www.googletagmanager.com/gtag/js?id=G-QBVVsdfsCC"></script>

            <script>

              window.dataLayer = window.dataLayer || [];

              function gtag(){dataLayer.push(arguments);}

              gtag('js', new Date());


              gtag('config', 'G-QBVV3sdfCC');

            </script>


            <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>

            <script>

              var OneSignal = window.OneSignal || [];

              OneSignal.push(function() {

                OneSignal.init({

                  appId: "5a1d0551-d73d-4c3c-8036-73asdfs282d",

                });

              });

            </script>


            <!-- Facebook Pixel Code -->

            <script>

              !function(f,b,e,v,n,t,s)

              {if(f.fbq)return;n=f.fbq=function(){n.callMethod?

              n.callMethod.apply(n,arguments):n.queue.push(arguments)};

              if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';

              n.queue=[];t=b.createElement(e);t.async=!0;

              t.src=v;s=b.getElementsByTagName(e)[0];

              s.parentNode.insertBefore(t,s)}(window, document,'script',

              'https://connect.facebook.net/en_US/fbevents.js');

              fbq('init', '44073449679gff8');

              fbq('track', 'PageView');

            </script>

            <noscript><img height="1" width="1" style="display:none"

              src="https://www.facebook.com/tr?id=44073449fgf3598&ev=PageView&noscript=1"

            /></noscript>

            <!-- End Facebook Pixel Code -->

            💓0 😆0 😲0 😥0 😠0 0
            Added a discussion  to  , FFFFFF

            Gab is becoming an influential  social media and alternative PayPal payment processor. Software is complete and functional they are just waiting for the legal process to put it on line.

            I hope UNA takes a look at adding them as a payment processor. There are conservative sites and social media companies that are constantly being banded from using Paypal, Visa, MC, Stripe etc.. When we reach a effective outreach we will become another one. I have read several references from UNA's staff that indicates they strive to be independent of large corporations  who wish to shut down free speech by canceling site hosting to monetizing. 

            I requested maybe 4 months ago to add sharing to gab platform and even-though they included a way to create (VS 12.1.0) sharing) using other platforms sharing URL, Gab does not have one. Instead they have a script that adds a sharing button on the site, but not sure if it can be integrated to show up on every type of post.

            If any one knows how to use the script below please let me know.

            HTML/CSS code to provide a link to Gab from your web site:

            <html>
            <head>
            <title>Share Button Testing Page</title>
            <meta name="description" content="The Gab Social share button demo and testing page.">
            </head>
            <body>

            <style type="text/css">
            a.gab-share-btn {
            display: inline-block;
            padding: 8px 12px;
            background: #00d178;
            color: ;
            border: solid 1px transparent;
            border-radius: 8px;
            font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            text-decoration: none;
            font-weight: bold;
            font-size: inherit;
            cursor: pointer;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            }
            a.gab-share-btn:hover {
            border-color: black;
            }
            a.gab-share-btn:active {
            border-color: ;
            background: #01854b;
            box-shadow: 0 0 4px rgba(0,0,0,0.2) inset;
            }
            </style>

            <a
            id="gab-share-btn"
            class="gab-share-btn"
            title="Share to Gab"
            target="_blank"
            >Share to Gab</a>

            <script>
            (async function ( ) {
            const button = document.getElementById('gab-share-btn');
            const title = document.querySelector('head title');
            if (!title) { button.setAttribute('hidden', true); }
            let description = document.querySelector('head meta[name="description"]');
            let text = title.textContent + '\n';
            if (description) { text += description.getAttribute('content') + '\n\n'; }
            button.setAttribute('href', `https://gab.com/compose?url=${encodeURIComponent(window.location.href)}&text=${encodeURIComponent(text)}`);
            })();
            </script>

            </body>
            </html>

            • 343
              • Hello James Prince !

                You may insert the RAW block on the View Post page and insert there the code from your post between <body> and </body> tags.

                💓0 😆0 😲0 😥0 😠0 0
                Not logged in users can't 'Comments Post'.

                Hi Alex T⚜️ 

                Thank you for your reply, Hope this explanation helps. 

                Please see the image at the end of this post. Primary Changes the Top and Bottom navigation bars, but it does not change the "android:navigationBarColor" which sits below the bottom navigation bar and it is not defined in the app theme. 

                Adding "navigationBarColor:" line to Theme.js does not change the "navigationBarColor:" as it is not defined in the App. 

                Please add this <item name="android:navigationBarColor"></item> to styles.xml in the Android folder and compile the app to see the bar in RED. 

                <!-- Base application theme. -->
                <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
                <!-- Customize your theme here. -->
                <item name="android:textColor"></item>
                <item name="android:navigationBarColor"></item>
                </style>


                image_transcoder.php?o=bx_froala_image&h=5234&dpx=2&t=1625668572


                • 76

                <nav class="menu">

                   <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open" />

                   <label class="menu-open-button" for="menu-open">

                    <span class="lines line-1"></span>

                    <span class="lines line-2"></span>

                    <span class="lines line-3"></span>

                  </label>


                   <a href="#" class="menu-item blue"> <i class="fad fa-film"></i> </a>

                   <a href="#" class="menu-item green"> <i class="fad fa-waveform-path"></i> </a>

                   <a href="#" class="menu-item red"> <i class="far fa-calendar-star"></i> </a>

                   <a href="#" class="menu-item purple"> <i class="fas fa-users"></i> </a>

                   <a href="#" class="menu-item orange"> <i class="fal fa-money-bill-wave"></i> </a>

                   <a href="#" class="menu-item lightblue"> <i class="fal fa-sparkles"></i> </a>

                </nav>


                <style>

                body {

                   padding: 0;

                   margin: 0;

                   background: #596778;

                   color: ;

                   text-align: center;

                   font-family: "Lato", sans-serif;

                }


                @media screen and (max-width: 700px) {

                   body {

                      padding: 170px 0 0 0;

                      width: 100%

                   }

                }


                a {

                   color: inherit;

                }


                .menu-item,

                .menu-open-button {

                   background: ;

                   border-radius: 100%;

                   width: 80px;

                   height: 80px;

                   margin-left: -40px;

                   position: absolute;

                   color: ;

                   text-align: center;

                   line-height: 80px;

                   -webkit-transform: translate3d(0, 0, 0);

                   transform: translate3d(0, 0, 0);

                   -webkit-transition: -webkit-transform ease-out 200ms;

                   transition: -webkit-transform ease-out 200ms;

                   transition: transform ease-out 200ms;

                   transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;

                }


                .menu-open {

                   display: none;

                }


                .lines {

                   width: 25px;

                   height: 3px;

                   background: #596778;

                   display: block;

                   position: absolute;

                   top: 50%;

                   left: 50%;

                   margin-left: -12.5px;

                   margin-top: -1.5px;

                   -webkit-transition: -webkit-transform 200ms;

                   transition: -webkit-transform 200ms;

                   transition: transform 200ms;

                   transition: transform 200ms, -webkit-transform 200ms;

                }


                .line-1 {

                   -webkit-transform: translate3d(0, -8px, 0);

                   transform: translate3d(0, -8px, 0);

                }


                .line-2 {

                   -webkit-transform: translate3d(0, 0, 0);

                   transform: translate3d(0, 0, 0);

                }


                .line-3 {

                   -webkit-transform: translate3d(0, 8px, 0);

                   transform: translate3d(0, 8px, 0);

                }


                .menu-open:checked + .menu-open-button .line-1 {

                   -webkit-transform: translate3d(0, 0, 0) rotate(45deg);

                   transform: translate3d(0, 0, 0) rotate(45deg);

                }


                .menu-open:checked + .menu-open-button .line-2 {

                   -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);

                   transform: translate3d(0, 0, 0) scale(0.1, 1);

                }


                .menu-open:checked + .menu-open-button .line-3 {

                   -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);

                   transform: translate3d(0, 0, 0) rotate(-45deg);

                }


                .menu {

                   margin: auto;

                   position: absolute;

                   top: 0;

                   bottom: 0;

                   left: 0;

                   right: 0;

                   width: 80px;

                   height: 80px;

                   text-align: center;

                   box-sizing: border-box;

                   font-size: 26px;

                }



                /* .menu-item {

                   transition: all 0.1s ease 0s;

                } */


                .menu-item:hover {

                   background: ;

                   color: #3290B1;

                }


                .menu-item:nth-child(3) {

                   -webkit-transition-duration: 180ms;

                   transition-duration: 180ms;

                }


                .menu-item:nth-child(4) {

                   -webkit-transition-duration: 180ms;

                   transition-duration: 180ms;

                }


                .menu-item:nth-child(5) {

                   -webkit-transition-duration: 180ms;

                   transition-duration: 180ms;

                }


                .menu-item:nth-child(6) {

                   -webkit-transition-duration: 180ms;

                   transition-duration: 180ms;

                }


                .menu-item:nth-child(7) {

                   -webkit-transition-duration: 180ms;

                   transition-duration: 180ms;

                }


                .menu-item:nth-child(8) {

                   -webkit-transition-duration: 180ms;

                   transition-duration: 180ms;

                }


                .menu-item:nth-child(9) {

                   -webkit-transition-duration: 180ms;

                   transition-duration: 180ms;

                }


                .menu-open-button {

                   z-index: 2;

                   -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);

                   transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);

                   -webkit-transition-duration: 400ms;

                   transition-duration: 400ms;

                   -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);

                   transform: scale(1.1, 1.1) translate3d(0, 0, 0);

                   cursor: pointer;

                   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);

                }


                .menu-open-button:hover {

                   -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);

                   transform: scale(1.2, 1.2) translate3d(0, 0, 0);

                }


                .menu-open:checked + .menu-open-button {

                   -webkit-transition-timing-function: linear;

                   transition-timing-function: linear;

                   -webkit-transition-duration: 200ms;

                   transition-duration: 200ms;

                   -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);

                   transform: scale(0.8, 0.8) translate3d(0, 0, 0);

                }


                .menu-open:checked ~ .menu-item {

                   -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);

                   transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);

                }


                .menu-open:checked ~ .menu-item:nth-child(3) {

                   transition-duration: 180ms;

                   -webkit-transition-duration: 180ms;

                   -webkit-transform: translate3d(0.08361px, -104.99997px, 0);

                   transform: translate3d(0.08361px, -104.99997px, 0);

                }


                .menu-open:checked ~ .menu-item:nth-child(4) {

                   transition-duration: 280ms;

                   -webkit-transition-duration: 280ms;

                   -webkit-transform: translate3d(90.9466px, -52.47586px, 0);

                   transform: translate3d(90.9466px, -52.47586px, 0);

                }


                .menu-open:checked ~ .menu-item:nth-child(5) {

                   transition-duration: 380ms;

                   -webkit-transition-duration: 380ms;

                   -webkit-transform: translate3d(90.9466px, 52.47586px, 0);

                   transform: translate3d(90.9466px, 52.47586px, 0);

                }


                .menu-open:checked ~ .menu-item:nth-child(6) {

                   transition-duration: 480ms;

                   -webkit-transition-duration: 480ms;

                   -webkit-transform: translate3d(0.08361px, 104.99997px, 0);

                   transform: translate3d(0.08361px, 104.99997px, 0);

                }


                .menu-open:checked ~ .menu-item:nth-child(7) {

                   transition-duration: 580ms;

                   -webkit-transition-duration: 580ms;

                   -webkit-transform: translate3d(-90.86291px, 52.62064px, 0);

                   transform: translate3d(-90.86291px, 52.62064px, 0);

                }


                .menu-open:checked ~ .menu-item:nth-child(8) {

                   transition-duration: 680ms;

                   -webkit-transition-duration: 680ms;

                   -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);

                   transform: translate3d(-91.03006px, -52.33095px, 0);

                }


                .menu-open:checked ~ .menu-item:nth-child(9) {

                   transition-duration: 780ms;

                   -webkit-transition-duration: 780ms;

                   -webkit-transform: translate3d(-0.25084px, -104.9997px, 0);

                   transform: translate3d(-0.25084px, -104.9997px, 0);

                }


                .blue {

                   background-color: #669AE1;

                   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);

                   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);

                }


                .blue:hover {

                   color: #669AE1;

                   text-shadow: none;

                }


                .green {

                   background-color: #70CC72;

                   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);

                   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);

                }


                .green:hover {

                   color: #70CC72;

                   text-shadow: none;

                }


                .red {

                   background-color: ;

                   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);

                   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);

                }


                .red:hover {

                   color: ;

                   text-shadow: none;

                }


                .purple {

                   background-color: ;

                   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);

                   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);

                }


                .purple:hover {

                   color: ;

                   text-shadow: none;

                }


                .orange {

                   background-color: ;

                   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);

                   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);

                }


                .orange:hover {

                   color: ;

                   text-shadow: none;

                }


                .lightblue {

                   background-color: #62C2E4;

                   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);

                   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);

                }


                .lightblue:hover {

                   color: #62C2E4;

                   text-shadow: none;

                }


                .credit {

                   margin: 24px 20px 120px 0;

                   text-align: right;

                   color: ;

                }


                .credit a {

                   padding: 8px 0;

                   color: ;

                   text-decoration: none;

                   transition: all 0.3s ease 0s;

                }


                .credit a:hover {

                   text-decoration: underline;

                }

                </style>

                • 79
                Followers
                Empty

                UNA - Network Infrastructure for Communities

                Close