devol
/
LinkStack
mirror of https://github.com/LinkStackOrg/LinkStack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
LinkStack/littlelink/css/brands.css

442 lines
9.4 KiB
CSS
Raw Normal View History

Change public path This is one of multiple public path edits. For simplified usability, I am integrating the public Laravel directory into the root directory.  This edit is part of moving everything from root/public to root.
2022-02-14 13:15:29 +01:00
/*
* littlelink.io
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/
/*
* Built using on:
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/
/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Rounded user avatars
- Buttons
- Brand Styles
*/
/* Rounded avatars
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Disable this if you don't want rounded avatars for users */
.rounded-avatar {
border-radius: 50%;
}
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button {
display: inline-block;
text-decoration: none;
height: 48px;
text-align: center;
vertical-align: middle;
font-size: 18px;
width: 300px;
font-weight: 700;
line-height: 48px;
letter-spacing: 0.1px;
white-space: wrap;
border-radius: 8px;
cursor: pointer;
}
button:hover,
.button:focus {
color: #333;
border-color: #888;
outline: 0; }
.button.button-primary {
color: #FFF;
filter: brightness(90%) }
.button.button-primary:hover,
.button.button-primary:focus {
color: #FFF;
filter: brightness(90%) }
/* Brand Icons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.icon {
padding: 0px 8px 3.5px 0px;
vertical-align: middle;
width: 20px;
height: 20px;
}
/* Brand Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Added custom link button*/
.button.button-custom {
color: #FFFFFF;
background-color: #FFFFFF;
background-image: linear-gradient(-135deg,#0f0c29,#302b63,#24243e) }
.button.button-custom:hover,
.button.button-custom:focus {
filter: brightness(90%) }
/* Default (this is great for your own brand color!) */
.button.button-default {
color: #FFFFFF;
background-color: #0085FF }
.button.button-default:hover,
.button.button-default:focus {
filter: brightness(90%) }
/* Discord */
.button.button-discord {
color: #FFFFFF;
background-color: #5865F2 }
.button.button-discord:hover,
.button.button-discord:focus {
filter: brightness(90%) }
/* Facebook */
.button.button-facebook {
color: #FFFFFF;
background-color: #1877f2 }
.button.button-facebook:hover,
.button.button-facebook:focus {
filter: brightness(90%) }
/* Facebook Messenger */
.button.button-messenger {
color: #FFFFFF;
background-image: linear-gradient(25deg,#0099FF, #5F5DFF,#A033FF, #C740CC, #FF5280, #FF7061) }
.button.button-messenger:hover,
.button.button-messenger:focus {
filter: brightness(90%) }
/* Figma */
.button.button-figma {
color: #FFFFFF;
background-color: #000000 }
.button.button-figma:hover,
.button.button-figma:focus {
filter: brightness(90%) }
/* Github */
.button.button-github {
color: #FFFFFF;
background-color: #000000 }
.button.button-github:hover,
.button.button-github:focus {
filter: brightness(90%) }
/* Goodreads */
.button.button-goodreads {
color: #333333;
background-color: #F3F1E6 }
.button.button-goodreads:hover,
.button.button-goodreads:focus {
filter: brightness(90%) }
/* Instagram */
.button.button-instagram {
color: #FFFFFF;
background-image: linear-gradient(-135deg,#1400c8,#b900b4,#f50000) }
.button.button-instagram:hover,
.button.button-instagram:focus {
filter: brightness(90%) }
/* Kit */
.button.button-kit {
color: #FFFFFF;
background-color: #000000 }
.button.button-kit:hover,
.button.button-kit:focus {
filter: brightness(90%) }
/* LinkedIn */
.button.button-linkedin {
color: #FFFFFF;
background-color: #2867B2 }
.button.button-linkedin:hover,
.button.button-linkedin:focus {
filter: brightness(90%) }
/* Medium */
.button.button-medium {
color: #FFFFFF;
background-color: #000000 }
.button.button-medium:hover,
.button.button-medium:focus {
filter: brightness(90%) }
/* Pinterest */
.button.button-pinterest {
color: #000000;
background-color: #FFE2EB }
.button.button-pinterest:hover,
.button.button-pinterest:focus {
filter: brightness(90%) }
/* Producthunt */
.button.button-producthunt {
color: #DA552F;
border-style: solid;
border-color: #DA552F;
border-width: 2px;
background-color: #FFFFFF }
.button.button-producthunt:hover,
.button.button-producthunt:focus {
filter: brightness(90%) }
/* Reddit */
.button.button-reddit {
color: #000000;
background-color: #D7DFE2 }
.button.button-reddit:hover,
.button.button-reddit:focus {
filter: brightness(90%) }
/* Skoob */
.button.button-skoob {
color: #FFFFFF;
background-color: #3189C8 }
.button.button-skoob:hover,
.button.button-skoob:focus {
filter: brightness(90%) }
/* Snapchat */
.button.button-snapchat {
color: #000000;
background-color: #fffc00 }
.button.button-snapchat:hover,
.button.button-snapchat:focus {
filter: brightness(90%) }
/* SoundCloud */
.button.button-soundcloud {
color: #FFFFFF;
background-color: #ff5500 }
.button.button-soundcloud:hover,
.button.button-soundcloud:focus {
filter: brightness(90%) }
/* Spotify */
.button.button-spotify {
color: #FFFFFF;
background-color: #000000 }
.button.button-spotify:hover,
.button.button-spotify:focus {
filter: brightness(90%) }
/* Steam */
.button.button-steam {
color: #FFFFFF;
background-color: #171a21 }
.button.button-steam:hover,
.button.button-steam:focus {
filter: brightness(90%) }
/* Telegram */
.button.button-telegram {
color: #FFFFFF;
background-color: #3faee8 }
.button.button-telegram:hover,
.button.button-telegram:focus {
filter: brightness(90%) }
/* TikTok */
.button.button-tiktok {
color: #FFFFFF;
background-color: #000000 }
.button.button-tiktok:hover,
.button.button-tiktok:focus {
filter: brightness(90%) }
/* Tumblr */
.button.button-tumblr {
color: #FFFFFF;
background-color: #131313 }
.button.button-tumblr:hover,
.button.button-tumblr:focus {
filter: brightness(90%) }
/* Twitch */
.button.button-twitch {
color: #FFFFFF;
background-color: #9146ff }
.button.button-twitch:hover,
.button.button-twitch:focus {
filter: brightness(90%) }
/* Twitter */
.button.button-twitter {
color: #FFFFFF;
background-color: #1DA1F2 }
.button.button-twitter:hover,
.button.button-twitter:focus {
filter: brightness(90%) }
/* Vimeo */
.button.button-vimeo {
color: #FFFFFF;
background-color: #1ab7ea }
.button.button-vimeo:hover,
.button.button-vimeo:focus {
filter: brightness(90%) }
/* YouTube */
.button.button-youtube {
color: #FFFFFF;
background-color: #000000 }
.button.button-youtube:hover,
.button.button-youtube:focus {
filter: brightness(90%) }
/* Wordpress */
.button.button-wordpress {
color: #FFFFFF;
background-color: #21759b }
.button.button-wordpress:hover,
.button.button-wordpress:focus {
filter: brightness(90%) }
Added new buttons Added the following LittleLink buttons:   -  Bandcamp   -  Patreon   -  Signal   -  Venmo   -  Cash App   -  Gitlab   -  Mastodon   -  PayPal   -  WhatsApp   -  Xing
2022-02-22 17:01:07 +01:00
/* Bandcamp */
.button.button-bandcamp {
color: #ffffff;
background-color: #1d9fc3;
}
.button.button-bandcamp:hover,
.button.button-bandcamp:focus {
filter: brightness(90%);
}
/* Patreon */
.button.button-patreon {
color: #ffffff;
background-color: #ff424d;
}
.button.button-patreon:hover,
.button.button-patreon:focus {
filter: brightness(90%);
}
/* Signal */
.button.button-signal {
color: #ffffff;
background-color: #3a76f0;
}
.button.button-signal:hover,
.button.button-signal:focus {
filter: brightness(90%);
}
/* Venmo */
.button.button-venmo {
color: #ffffff;
background-color: #3d95ce;
}
.button.button-venmo:hover,
.button.button-venmo:focus {
filter: brightness(90%);
}
/* Cash App */
.button.button-cashapp {
color: #ffffff;
background-image: linear-gradient(to bottom, #00d64b, #00c244);
}
.button.button-cashapp:hover,
.button.button-cashapp:focus {
filter: brightness(90%);
}
/* Gitlab */
.button.button-gitlab {
color: #ffffff;
background-color: #6151b2;
}
.button.button-gitlab:hover,
.button.button-gitlab:focus {
filter: brightness(90%);
}
/* Mastodon */
.button.button-mastodon {
color: #ffffff;
background-color: #1f232b;
}
.button.button-mastodon:hover,
.button.button-mastodon:focus {
filter: brightness(90%);
}
/* PayPal */
.button.button-paypal {
color: #ffffff;
background-color: #003087;
}
.button.button-paypal:hover,
.button.button-paypal:focus {
filter: brightness(90%);
}
/* WhatsApp */
.button.button-whatsapp {
color: #ffffff;
background-color: #455a64;
}
.button.button-whatsapp:hover,
.button.button-whatsapp:focus {
filter: brightness(90%);
}
/* Xing */
.button.button-xing {
color: #ffffff;
background-color: #026466;
}
.button.button-xing:hover,
.button.button-xing:focus {
filter: brightness(90%);
Added new buttons Added new 'Buy me a Coffee' and 'generic Website' buttons
2022-03-17 21:19:30 +01:00
}
/* Buy Me a Coffee */
.button.button-coffee {
color: #100a26;
background-color: #ffdd00;
}
.button.button-coffee:hover,
.button.button-coffee:focus {
filter: brightness(90%);
}
/* Website */
.button.button-website {
color: #ffffff;
background-color: #000000;
}
Added Custom Website button Added new Custom Website button which visually looks similar to the previously added Website button with an except of the icon of the new button being the favicon of the chose link. The text on the button is set with the button title, just like the Custom button. The favicon request is performed via the Google API. The icon displays correctly in most cases, with some exceptions. I might add a function later on that displays a generic icon if no icon was found.
2022-03-18 14:59:45 +01:00
/* Custom Website */
.button.button-custom_website {
color: #ffffff;
background-color: #000000;
}
Added new buttons Added new 'Buy me a Coffee' and 'generic Website' buttons
2022-03-17 21:19:30 +01:00
.button.button-web:hover,
.button.button-web:focus {
filter: brightness(90%);
}