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: #ffffff;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: #e8e8e8;background: #01854b;box-shadow: 0 0 4px rgba(0,0,0,0.2) inset;}</style><aid="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>
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">#e60000</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">#ffffff</item> <item name="android:navigationBarColor">#e60000</item> </style>
<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: #EEEEEE;
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: #EEEEEE;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
color: #FFFFFF;
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: #EEEEEE;
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: #FE4365;
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: #FE4365;
text-shadow: none;
}
.purple {
background-color: #C49CDE;
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: #C49CDE;
text-shadow: none;
}
.orange {
background-color: #FC913A;
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: #FC913A;
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: #EEEEEE;
}
.credit a {
padding: 8px 0;
color: #C49CDE;
text-decoration: none;
transition: all 0.3s ease 0s;
}
.credit a:hover {
text-decoration: underline;
}
</style>
