Dark Mode V3 of my Friendica FB Facelift user stylesheet. If you're using the Firefox userContent.css make sure to wrap all of this in @-moz-document domain(friendica.world){...} (or whichever server you're on). Otherwise copy+paste into the Stylus add-on for Firefox or Stylus extension for Chrome or the Userscripts extension for Safari. Then in your Friendica Settings - Display - Theme pick "Frio" and under Settings - Display - Theme Customization either pick "Dark" or "Black." Note that the dark mode version does not use a custom schemestring.
The Stylesheet:
/* FRIENDICA MODS V3 DARK MODE */
body {
background-color: #1C1C1D !important;
font-size: 15px !important;
padding-top: 125px !important;
}
#topbar-first .nav > li > a,
#topbar-first .nav > li > button,
nav.navbar .nav > li > a,
nav.navbar .nav > li > button{
color: #B0B3B8 !important;
}
#topbar-first, nav.navbar {
background-color: #252728 !important;
color: #B0B3B8 !important;
}
#topbar-first .topbar-nav .nav-segment {
margin-right: 10px;
}
#topbar-first .nav > li > a:hover:not(.selected) {
background-color: rgba(255,255,255,.1) !important;
border-radius: 8px !important;
}
.fa-lg {
font-size: 24px !important;
}
#topbar-first .nav > li > a:hover,
#topbar-first .nav > li > a:focus,
#topbar-first .nav > li > button:not(#main-menu):hover,
#topbar-first .nav > li > button:not(#main-menu):focus,
nav.navbar .nav > li > a:hover,
nav.navbar .nav > li > a:focus,
nav.navbar .nav > li > button:hover,
nav.navbar .nav > li > button:focus {
background-color: rgba(255,255,255,.1) !important;
border-radius: 8px !important;
}
#topbar-first .nav > li > a.selected {
border-bottom: 3px solid #0866FF !important;
color: #0866FF !important;
}
#topbar-first .nav > li > a.selected:hover,
#topbar-first .nav > li > #main-menu:hover,
#topbar-first .nav > li > #main-menu:focus {
background-color: transparent !important;
border-radius: 0 !important;
}
ul.tabs li {
font-size: 15px !important;
margin-left: 10px !important;
}
ul.tabs li.active {
border-color: #0866FF !important;
}
ul.tabs li a {
margin-top: 8px;
color: rgb(90, 167, 255) !important;
}
ul.tabs li:hover:not(.active) {
border-bottom-width: 0px !important;
}
ul.tabs li:hover:not(.active) a {
background-color: rgba(255,255,255,.1) !important;
border-radius: 8px !important;
}
.dropdown-menu {
padding-bottom: 15px !important;
}
.dropdown-menu li {
margin: 10px;
width: 92% !important;
border-radius: 8px;
}
.dropdown-menu li:hover {
border-color: transparent !important;
}
header #banner {
left: 0 !important;
right: auto !important;
}
header #banner #logo-img,
.navbar-brand #logo-img {
background-color: #0866FF !important;
height: 40px !important;
width: 40px !important;
}
.topbar ul.nav {
left: 50% !important;
margin-left: -25% !important;
position: relative;
}
#topbar-first .nav > .account img {
border-radius: 100% !important;
box-shadow: 0 0 1px rgba(255,255,255,.1) !important;
height: 40px !important;
width: 40px !important;
}
#search-box {
position: fixed !important;
left: 100px;
}
#topbar-first #search-box .form-search {
height: 40px !important;
font-size: 15px;
background-position: unset;
box-shadow: none !important;
}
#search-box form > div {
background-color: #333334;
border-radius: 50px;
}
#search-box form > div::before {
content: '\f002';
font-family: ForkAwesome;
position: absolute;
left: 10px;
top: 8px;
}
#search-box .form-control.form-search {
border-radius: 50px !important;
background: transparent !important;
width: 100% !important;
}
#search-box .form-control::placeholder {
color: #B0B3B8 !important;
}
#topbar-first #search-box .btn {
font-size: 0px !important;
height: 32px;
width: 32px;
top: 2px !important;
background-color: black !important;
}
#topbar-first #search-box .btn::before {
content: '\f061';
font-family: ForkAwesome;
font-size: 15px;
color: #B0B3B8;
}
#nav-user-menu, #nav-notifications-menu {
background-color: #252728 !important;
border: 1px solid #1C1C1D !important;
}
#nav-user-menu {
min-width: 250px !important;
}
.nav-pills .dropdown-menu li a,
.nav-pills .dropdown-menu li .btn-link,
.nav-tabs .dropdown-menu li a,
.nav-tabs .dropdown-menu li .btn-link,
.account .dropdown-menu li a,
.account .dropdown-menu li .btn-link,
.contact-photo-wrapper .dropdown-menu li a,
.contact-photo-wrapper .dropdown-menu li .btn-link {
color: #B0B3B8 !important;
border-color: #252728 !important;
}
.nav-pills .dropdown-menu li > a:hover,
.nav-tabs .dropdown-menu li > a:hover,
.account .dropdown-menu li > a:hover,
.contact-photo-wrapper .dropdown-menu li > a:hover,
.nav-pills .dropdown-menu li.selected a,
.nav-tabs .dropdown-menu li.selected a,
.account .dropdown-menu li.selected a,
.contact-photo-wrapper .dropdown-menu li.selected a {
color: #333 !important;
background: #f2f2f2 !important;
border-radius: 8px;
}
.nav-pills .dropdown-menu li.divider,
.nav-tabs .dropdown-menu li.divider,
.account .dropdown-menu li.divider,
.contact-photo-wrapper .dropdown-menu li.divider {
background-color: #252728 !important;
}
#topbar-first #nav-notifications-menu {
border: 1px solid #1C1C1D !important;
}
#topbar-first #nav-notifications-menu li {
border-color: transparent !important;
box-sizing: border-box;
margin: 10px;
border-radius: 10px !important;
width: 94% !important;
}
#topbar-first .notification-unseen {
background-color: rgba(56, 88, 152,.2) !important
}
#topbar-first #nav-notifications-menu li.notif-entry:hover{
background-color:rgba(128,128,128,.2) !important;
border-color: transparent !important;
}
#topbar-second {
height: 60px !important;
background-color: #252728 !important;
border-color: #333 !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus {
border-radius: 8px !important;
}
#dropdownMenuTools {
height: 40px;
width: 40px;
background-color: rgba(255,255,255,.1) !important;
border-radius: 100% !important;
margin-top: 5px !important;
margin-right: 10px !important;
}
#dropdownMenuTools:hover,
#dropdownMenuTools:focus {
background-color: rgba(0,0,0,.1) !important;
}
#jotOpen {
border-radius: 8px !important;
background-color: #0866FF !important;
color: #ffffff !important;
border-color: #000 !important;
box-shadow: none !important;
}
#jotOpen:hover, #jotOpen:focus {
box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
}
#jotOpen::before {
content: 'Compose';
font-size: 15px;
margin-right: 10px;
line-height: 32px;
position: relative;
display: inline;
top: -4px;
}
#jotOpen .fa-pencil-square-o {
font-size: 32px !important;
position: relative;
top: 4px;
}
#topbar-second #nav-short-info {
margin-top: 10px;
}
/* Compose Window */
#upload-photo {
background-color: #0866FF !important;
color: white !important;
border-radius: 8px !important;
}
#upload-photo:hover,
#upload-photo:focus {
background-color: darkblue !important;
}
/* hide attach file option since there is no way to manage attachments */
.fbswitcher [data-mode="attachment"] {
display: none !important;
}
/* Other people profiles */
#mention-link {
border-radius: 8px !important;
background-color: #0866FF !important;
color: #ffffff !important;
border-color: #000 !important;
box-shadow: none !important;
padding: 0 16px !important;
}
#mention-link:hover,
#mention-link:focus {
box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
}
#mention-link span:first-of-type {
float: right;
font-size: 32px;
top: 4px;
}
#mention-link span:first-of-type .fa-2x {
font-size: inherit !important;
}
#mention-link span:last-of-type {
font-size: 15px;
margin-right: 10px;
line-height: 32px;
top: 6px;
position:relative;
}
#contact-edit-status-wrapper {
margin: 15px 0px !important;
border-radius: 10px;
}
/* sidebar widgets */
aside .widget,
.nav-container .widget {
background-color: #1C1C1D !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.tread-wrapper {
background-color: rgb(37, 39, 40) !important;
box-shadow: 0 0px 1px rgba(0,0,0,.5) !important;
border-radius: 10px !important;
}
.wall-item-container .media {
background-color: rgb(37, 39, 40) !important;
border-radius: 10px !important;
}
.well {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.contact-photo,
.contact-photo-xs {
border-radius: 100% !important;
border: 1px solid #252728 !important;
}
.hovercard {
background-color: #252728 !important;
border: 1px solid #1C1C1D !important;
}
.hover-card-pic img.thumbnail {
border-radius: 100% !important;
background-color: #1C1C1D !important;
border-color: black !important;
}
p.wall-item-announce,
.media .time, .media .shared-time,
.media .delivery, .media .location,
.media .location a {
font-size: 13px !important;
}
.type-link, .type-video {
padding: 0 !important;
margin: 0 !important;
background-color: rgb(51, 51, 52) !important;
border: 1px solid rgb(101, 104, 108) !important;
}
.type-link h4, .type-link blockquote, .type-link sup,
.type-video h4, .type-video blockquote, .type-video sup {
padding-left: 10px !important;
padding-right: 10px !important;
}
/* ACTION BUTTON LABELS */
.wall-item-actions-row button,
.wall-item-actions-right button {
position: relative;
display: block;
white-space: normal !important;
margin: 0 auto !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.wall-item-actions-row button::after,
.wall-item-actions-right button::after {
font-size: 14px;
font-family: sans-serif;
display: block;
margin-top: 2px;
}
.wall-item-response {
position: relative;
padding-top: 4px;
}
.button-comments::after {
content: 'Comment';
}
.button-announces::after {
content: 'Share';
}
.share-links .dropdown-toggle::after {
content: 'Share';
}
.button-votes::after {
content: 'Quote';
}
.button-likes::after {
content: 'Like';
}
[id^="dislike-"]::after{
content: 'Dislike';
}
.wall-item-actions-right .dropdown-toggle::after,
.more-links .dropdown-toggle::after {
content: 'More';
}
/* engagement counts */
.wall-item-actions-row > button span,
.wall-item-response span {
position: absolute;
text-align: center;
display: block;
background-color: #0866FF;
box-shadow: -1px 1px 1px #000;
border-radius: 4px;
color: #fff;
font-size: 12px;
font-weight: 700;
width: fit-content;
padding: 0px 7px;
left: 55%;
top: 0px;
z-index: 1;
}
/* this is some freaking ALCHEMY! */
.vote-event:not(:has(.wall-item-response:empty)) {
padding-bottom: 135px;
}
.vote-event .wall-item-response {
position: absolute;
top: 63px;
}
.vote-event .wall-item-response:empty{
display: none;
}
.vote-event .wall-item-response:nth-of-type(1){
left: 15px;
}
.vote-event .wall-item-response:nth-of-type(1) .button-event::after,
[id^="attendyes"]::after{
content: 'Going';
}
.vote-event .wall-item-response:nth-of-type(2){
left: 105px;
}
.vote-event .wall-item-response:nth-of-type(2) .button-event::after,
[id^="attendno"]::after{
content: 'Can\'t Go';
position: relative;
height: 20px;
overflow: hidden; /* or skews mobile button layout */
}
.vote-event .wall-item-response:nth-of-type(3){
left: 204px;
}
.vote-event .wall-item-response:nth-of-type(3) .button-event::after,
[id^="attendmaybe"]::after{
content: 'Maybe';
}
/* END OF ACTION BUTTON LABELS */
#profile-photo-wrapper {
overflow: visible !important;
padding: 5px;
background-color: #1C1C1D;
border-radius: 100%
}
aside .widget li {
margin-bottom: 8px;
}
aside .vcard img.u-photo, aside img.vcard-photo {
border-radius: 100% !important;
box-shadow: 0 0 1px rgba(0,0,0,.3);
border: 3px solid #1C1C1D;
}
aside .widget h3.p-name {
font-size: 32px !important;
text-align: center;
word-break: break-word;
}
aside .vcard .p-addr {
font-weight: 600;
text-align: center;
white-space: break-spaces !important;
}
aside .widget li.selected {
background-color:rgba(56, 88, 152,.2) !important;
border-color: transparent !important;
border-radius: 8px;
}
aside .widget li.selected a {
font-weight: bold;
}
aside .widget li:hover {
background-color:rgba(128,128,128,.2) !important;
border-color: transparent !important;
border-radius: 8px;
}
#widget-contacts {
background-color: rgb(37, 39, 40) !important;
border-radius: 8px !important;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2) !important;
}
.contact-block-img {
height: 100px !important;
width: 100px !important;
border-radius: 8px !important;
box-shadow: 0 0 1px rgba(0, 0, 0, .2);
margin: 5px;
}
.comment-fake-form {
border: none !important;
background-color: transparent !important;
}
.comment-fake-form textarea {
border-radius: 50px !important;
background-color: rgb(51, 51, 52) !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
.wall-item-actions button {
font-size: 24px !important;
color: #B0B3B8 !important;
}
.wall-item-actions button:hover {
color: #0866FF !important;
}
.wall-item-actions .checkbox {
padding-top: 6px !important;
}
.comment .media-body {
padding: 10px;
background-color: rgb(51, 51, 52);
border-radius: 20px;
}
.wall-item-actions-row .wall-item-emoji {
font-size: 18px;
line-height: 40px;
}
.navicon {
font-size: 20px;
position: relative;
top: 1px;
}
/* not obviously clickable or intuitive what it does */
.plink.u-url {
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
box-shadow: 0 0 1px rgba(255,255,255,.5);
border-radius: 100%;
position: relative;
padding: 6px 4px;
height: 35px;
width: 35px;
display: block;
}
.plink.u-url:hover {
background-color: rgba(255,255,255,.1) !important;
text-decoration: none !important;
}
.plink.u-url::after {
content: '\f101';
font-family: ForkAwesome;
color: #666;
}
.img-allocated-max-width {
margin: 20px auto;
}
/* Photo Albums */
.photo-album-actions .icon-padding,
.photo-edit-link-wrap .icon-padding {
margin-left: 10px !important;
}
.photos-upload-link {
font-size: 28px;
color: #0866FF !important;
opacity: 1 !important;
border-radius: 8px;
padding: 0px 8px;
}
#photo-album-link {
opacity: 1 !important;
}
.photos-upload-link i,
#photo-album-link i,
#photo-edit-link i,
#photo-toprofile-link i,
#album-edit-link i,
#album-drop-link i,
.photos-order-link i {
font-size: 24px !important;
color: #0866FF !important;
opacity: 1 !important;
border-radius: 100% !important;
padding: 8px 11px !important;
height: 40px;
width: 40px;
}
#photo-edit-link i.fa-image {
padding: 6px 7px !important;
}
.photos-order-link {
margin-top: 5px !important;
}
.photos-upload-link:hover i,
.photos-upload-link:focus i,
#photo-album-link:hover i,
#photo-album-link:focus i,
#photo-edit-link:hover i,
#photo-toprofile-link:hover i,
#photo-toprofile-link:focus i,
#album-edit-link:hover i,
#album-edit-link:focus i,
#album-drop-link:hover i,
#album-drop-link:focus i,
.photos-order-link:hover i,
.photos-upload-link:hover i,
.photos-upload-link:focus i {
background-color: rgba(255,255,255,.1) !important;
}
.photos-content-wrapper .photos-upload-link::before {
content: 'Add Photos';
font-size: 15px;
vertical-align: middle;
margin-top: -10px;
display: inline-block;
}
.justified-gallery {
overflow: visible !important;
}
.justified-gallery > a,
.justified-gallery > div,
.justified-gallery > figure{
height: 180px !important;
width: 180px !important;
border: 1px solid #ccc;
position: relative !important;
top: auto !important;
left: auto !important;
border-radius: 8px;
margin: 4px !important;
}
.justified-gallery > .jg-entry-visible > img,
.justified-gallery > .jg-entry-visible > a > img,
.justified-gallery > .jg-entry-visible > svg,
.justified-gallery > .jg-entry-visible > a > svg{
width: 100% !important;
height: 100% !important;
margin: 0 !important;
top: 0 !important;
left: 0 !important;
object-fit:cover;
object-position: center;
}
#photo-photo {
margin: 0 auto !important;
}
@media screen and (max-width: 1280px) {
#search-box {
width: 18% !important;
}
}
@media screen and (max-width: 991px){
#search-box {
left: 15%;
}
#jotOpen::before {
content: '';
margin: 0;
}
#mention-link span:last-of-type {
margin-right: 42px;
}
}
@media screen and (max-width: 768px){
#topbar-first .navbar-toggle[data-target="#search-mobile"]{
position: fixed !important;
left: 15%;
}
#search-mobile {
top: 110px !important;
}
}
like this
reshared this
Light Mode V3 of my Friendica FB Facelift user stylesheet. If you're using the Firefox userContent.css make sure to wrap all of this in @-moz-document domain(friendica.world){...} (or whichever server you're on). Otherwise copy+paste into the Stylus add-on for Firefox or Stylus extension for Chrome or the Userscripts extension for Safari. Then in your Friendica Settings - Display - Theme pick "Frio" and under Settings - Display - Theme Customization either pick "Light" or "Custom." If you pick "Custom" save settings, go back to that section, and copy+paste this schemestring in the box:
{"nav_bg":"#ffffff","nav_icon_color":"#606637","link_color":"#0866ff","background_color":"#f2f4f7","background_image":"","contentbg_transp":"100"}
The stylesheet:
/* FRIENDICA MODS V3 LIGHT MODE */
body {
background-color: #f2f4f7 !important;
font-size: 15px !important;
padding-top: 125px !important;
}
#topbar-first .nav > li > a,
#topbar-first .nav > li > button,
nav.navbar .nav > li > a,
nav.navbar .nav > li > button{
color: #65686C !important;
}
#topbar-first, nav.navbar {
background-color: #ffffff !important;
color: #65686C !important;
}
#topbar-first .topbar-nav .nav-segment {
margin-right: 10px;
}
#topbar-first .nav > li > a:hover:not(.selected) {
background-color: rgba(128,128,128,.1) !important;
border-radius: 8px !important;
}
.fa-lg {
font-size: 24px !important;
}
#topbar-first .nav > li > a:hover,
#topbar-first .nav > li > a:focus,
#topbar-first .nav > li > button:not(#main-menu):hover,
#topbar-first .nav > li > button:not(#main-menu):focus,
nav.navbar .nav > li > a:hover,
nav.navbar .nav > li > a:focus,
nav.navbar .nav > li > button:hover,
nav.navbar .nav > li > button:focus {
background-color: rgba(128,128,128,.1) !important;
border-radius: 8px !important;
}
#topbar-first .nav > li > a.selected {
border-bottom: 3px solid #0866FF !important;
color: #0866FF !important;
}
#topbar-first .nav > li > a.selected:hover,
#topbar-first .nav > li > #main-menu:hover,
#topbar-first .nav > li > #main-menu:focus {
background-color: transparent !important;
border-radius: 0 !important;
}
ul.tabs li {
font-size: 15px !important;
margin-left: 10px !important;
}
ul.tabs li a {
margin-top: 8px;
}
ul.tabs li:hover:not(.active) {
border-bottom-width: 0px !important;
}
ul.tabs li:hover:not(.active) a {
background-color: rgba(128,128,128,.1) !important;
border-radius: 8px !important;
}
.dropdown-menu {
padding-bottom: 15px !important;
}
.dropdown-menu li {
margin: 10px;
width: 92% !important;
border-radius: 8px;
}
.dropdown-menu li:hover {
border-color: transparent !important;
}
header #banner {
left: 0 !important;
right: auto !important;
}
header #banner #logo-img,
.navbar-brand #logo-img {
background-color: #0866FF !important;
height: 40px !important;
width: 40px !important;
}
.topbar ul.nav {
left: 50% !important;
margin-left: -25% !important;
position: relative;
}
#topbar-first .nav > .account img {
border-radius: 100% !important;
box-shadow: 0 0 1px rgba(255,255,255,.1) !important;
height: 40px !important;
width: 40px !important;
}
#search-box {
position: fixed !important;
left: 100px;
}
#topbar-first #search-box .form-search {
height: 40px !important;
font-size: 15px;
background-position: unset;
}
#search-box form > div {
background-color: #f2f4f7;
border-radius: 50px;
}
#search-box form > div::before {
content: '\f002';
font-family: ForkAwesome;
position: absolute;
left: 10px;
top: 8px;
}
#search-box .form-control.form-search {
border-radius: 50px !important;
background: transparent !important;
width: 100% !important;
}
#search-box .form-control::placeholder {
color: #666 !important;
}
#topbar-first #search-box .btn {
font-size: 0px !important;
height: 32px;
width: 32px;
top: 2px !important;
background-color: white !important;
}
#topbar-first #search-box .btn::before {
content: '\f061';
font-family: ForkAwesome;
font-size: 15px;
color: #666;
}
#nav-user-menu {
background-color: #ffffff !important;
min-width: 250px !important;
}
.nav-pills .dropdown-menu li a, .nav-pills .dropdown-menu li .btn-link, .nav-tabs .dropdown-menu li a, .nav-tabs .dropdown-menu li .btn-link, .account .dropdown-menu li a, .account .dropdown-menu li .btn-link, .contact-photo-wrapper .dropdown-menu li a, .contact-photo-wrapper .dropdown-menu li .btn-link {
color: #65686C !important;
border-color: white !important;
}
.nav-pills .dropdown-menu li > a:hover,
.nav-tabs .dropdown-menu li > a:hover,
.account .dropdown-menu li > a:hover,
.contact-photo-wrapper .dropdown-menu li > a:hover,
.nav-pills .dropdown-menu li.selected a,
.nav-tabs .dropdown-menu li.selected a,
.account .dropdown-menu li.selected a,
.contact-photo-wrapper .dropdown-menu li.selected a {
color: #333 !important;
background: #f2f2f2 !important;
border-radius: 8px;
}
.nav-pills .dropdown-menu li.divider, .nav-tabs .dropdown-menu li.divider, .account .dropdown-menu li.divider, .contact-photo-wrapper .dropdown-menu li.divider {
background-color: #ffffff !important;
}
#topbar-second {
height: 60px !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus {
border-radius: 8px !important;
}
#dropdownMenuTools {
height: 40px;
width: 40px;
background-color: rgba(128,128,128,.1) !important;
border-radius: 100% !important;
margin-top: 5px !important;
margin-right: 10px !important;
}
#dropdownMenuTools:hover,
#dropdownMenuTools:focus {
background-color: rgba(0,0,0,.1) !important;
}
#jotOpen {
border-radius: 8px !important;
background-color: #0866FF !important;
color: #ffffff !important;
}
#jotOpen:hover, #jotOpen:focus {
box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
}
#jotOpen::before {
content: 'Compose';
font-size: 15px;
margin-right: 10px;
line-height: 32px;
position: relative;
display: inline;
top: -4px;
}
#jotOpen .fa-pencil-square-o {
font-size: 32px !important;
position: relative;
top: 4px;
}
#topbar-second #nav-short-info {
margin-top: 10px;
}
/* Compose Window */
#upload-photo {
background-color: #0866FF !important;
color: white !important;
border-radius: 8px !important;
}
#upload-photo:hover,
#upload-photo:focus {
background-color: darkblue !important;
}
/* hide attach file option since there is no way to manage attachments */
.fbswitcher [data-mode="attachment"] {
display: none !important;
}
/* Other people profiles */
#mention-link {
background-color: #0866FF !important;
color: white !important;;
border-radius: 8px !important;;
padding: 0 16px !important;
}
#mention-link:hover,
#mention-link:focus {
box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
}
#mention-link span:first-of-type {
float: right;
font-size: 32px;
top: 4px;
}
#mention-link span:first-of-type .fa-2x {
font-size: inherit !important;
}
#mention-link span:last-of-type {
font-size: 15px;
margin-right: 10px;
line-height: 32px;
top: 6px;
position:relative;
}
#contact-edit-status-wrapper {
margin: 15px 0px !important;
border-radius: 10px;
}
/* sidebar widgets */
aside .widget,
.nav-container .widget {
background-color: #f2f4f7 !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.tread-wrapper {
box-shadow: 0 0px 1px rgba(0,0,0,.5) !important;
border-radius: 10px !important;
}
.wall-item-container .media {
background-color: #ffffff !important;
border-radius: 10px !important;
}
.contact-photo,
.contact-photo-xs {
border-radius: 100% !important;
border: 1px solid #eee !important;
}
.hover-card-pic img.thumbnail {
border-radius: 100% !important;
}
p.wall-item-announce,
.media .time, .media .shared-time,
.media .delivery, .media .location,
.media .location a {
font-size: 13px !important;
}
.type-link, .type-video {
padding: 0 !important;
margin: 0 !important;
background-color: rgb(240, 242, 245) !important;
border: 1px solid rgb(208,211,215) !important;
}
.type-link h4, .type-link blockquote, .type-link sup,
.type-video h4, .type-video blockquote, .type-video sup {
padding-left: 10px !important;
padding-right: 10px !important;
}
/* ACTION BUTTON LABELS */
.wall-item-actions-row button,
.wall-item-actions-right button {
position: relative;
display: block;
white-space: normal !important;
margin: 0 auto !important;
}
.wall-item-actions-row button::after,
.wall-item-actions-right button::after {
font-size: 14px;
font-family: sans-serif;
display: block;
margin-top: 2px;
}
.wall-item-response {
position: relative;
overflow: visible !important;
}
.button-comments::after {
content: 'Comment';
}
.button-announces::after {
content: 'Share';
}
.share-links .dropdown-toggle::after {
content: 'Share';
}
.button-votes::after {
content: 'Quote';
}
.button-likes::after {
content: 'Like';
}
[id^="dislike-"]::after{
content: 'Dislike';
}
.wall-item-actions-right .dropdown-toggle::after,
.more-links .dropdown-toggle::after {
content: 'More';
}
/* engagement counts */
.wall-item-actions-row > button span,
.wall-item-response span {
position: absolute;
text-align: center;
display: block;
background-color: #0866FF;
box-shadow: -1px 1px 1px #fff;
border-radius: 4px;
color: #fff;
font-size: 12px;
font-weight: 700;
width: fit-content;
padding: 0px 7px;
left: 55%;
top: 0px;
z-index: 1;
}
/* this is some freaking ALCHEMY! */
.vote-event:not(:has(.wall-item-response:empty)) {
padding-bottom: 135px;
}
.vote-event .wall-item-response {
position: absolute;
top: 63px;
}
.vote-event .wall-item-response:empty{
display: none;
}
.vote-event .wall-item-response:nth-of-type(1){
left: 15px;
}
.vote-event .wall-item-response:nth-of-type(1) .button-event::after,
[id^="attendyes"]::after{
content: 'Going';
}
.vote-event .wall-item-response:nth-of-type(2){
left: 105px;
}
.vote-event .wall-item-response:nth-of-type(2) .button-event::after,
[id^="attendno"]::after{
content: 'Can\'t Go';
position: relative;
height: 20px;
overflow: hidden; /* or skews mobile button layout */
}
.vote-event .wall-item-response:nth-of-type(3){
left: 204px;
}
.vote-event .wall-item-response:nth-of-type(3) .button-event::after,
[id^="attendmaybe"]::after{
content: 'Maybe';
}
/* END OF ACTION BUTTON LABELS */
#profile-photo-wrapper {
overflow: visible !important;
padding: 5px;
background-color: #ffffff;
border-radius: 100%
}
aside .widget li {
margin-bottom: 8px;
}
aside .vcard img.u-photo, aside img.vcard-photo {
border-radius: 100% !important;
box-shadow: 0 0 1px rgba(0,0,0,.3);
border: 3px solid white;
}
aside .widget h3.p-name {
font-size: 32px !important;
text-align: center;
word-break: break-word;
}
aside .vcard .p-addr {
font-weight: 600;
text-align: center;
white-space: break-spaces !important;
}
aside .widget li.selected {
background-color:rgba(128,128,128,.1) !important;
border-color: transparent !important;
border-radius: 8px;
}
aside .widget li.selected a {
font-weight: bold;
}
aside .widget li:hover {
background-color:rgba(255,255,255,1) !important;
border-color: transparent !important;
border-radius: 8px;
}
#widget-contacts {
background-color: #ffffff !important;
border-radius: 8px !important;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2) !important;
}
.contact-block-img {
height: 100px !important;
width: 100px !important;
border-radius: 8px !important;
box-shadow: 0 0 1px rgba(0, 0, 0, .2);
margin: 5px;
}
.comment-fake-form {
border: none !important;
background-color: transparent !important;
}
.comment-fake-form textarea {
border-radius: 50px !important;
}
.wall-item-actions button {
font-size: 24px !important;
color: #65686C !important;
}
.wall-item-actions button:hover {
color: #0866FF !important;
}
.wall-item-actions .checkbox {
padding-top: 6px !important;
}
.comment .media-body {
padding: 10px;
background-color: #f2f4f7;
border-radius: 20px;
}
.wall-item-actions-row .wall-item-emoji {
font-size: 18px;
line-height: 40px;
}
.navicon {
font-size: 20px;
position: relative;
top: 1px;
}
/* not obviously clickable or intuitive what it does */
.plink.u-url {
-webkit-box-shadow: 0 0 1px rgba(0,0,0,.5);
box-shadow: 0 0 1px rgba(0,0,0,.5);
border-radius: 100%;
position: relative;
padding: 6px 4px;
height: 35px;
width: 35px;
display: block;
}
.plink.u-url:hover {
background-color: rgba(0,0,0,.1) !important;
text-decoration: none !important;
}
.plink.u-url::after {
content: '\f101';
font-family: ForkAwesome;
color: #666;
}
.img-allocated-max-width {
margin: 20px auto;
}
/* Photo Albums */
.photo-album-actions .icon-padding,
.photo-edit-link-wrap .icon-padding {
margin-left: 10px !important;
}
.photos-upload-link {
font-size: 28px;
color: #0866FF !important;
opacity: 1 !important;
border-radius: 8px;
padding: 0px 8px;
}
#photo-album-link {
opacity: 1 !important;
}
.photos-upload-link i,
#photo-album-link i,
#photo-edit-link i,
#photo-toprofile-link i,
#album-edit-link i,
#album-drop-link i,
.photos-order-link i {
font-size: 24px !important;
color: #0866FF !important;
opacity: 1 !important;
border-radius: 100% !important;
padding: 8px 11px !important;
height: 40px;
width: 40px;
}
#photo-edit-link i.fa-image {
padding: 6px 7px !important;
}
.photos-order-link {
margin-top: 5px !important;
}
.photos-upload-link:hover i,
.photos-upload-link:focus i,
#photo-album-link:hover i,
#photo-album-link:focus i,
#photo-edit-link:hover i,
#photo-toprofile-link:hover i,
#photo-toprofile-link:focus i,
#album-edit-link:hover i,
#album-edit-link:focus i,
#album-drop-link:hover i,
#album-drop-link:focus i,
.photos-order-link:hover i,
.photos-upload-link:hover i,
.photos-upload-link:focus i {
background-color: rgba(128,128,128,.1) !important;
}
.photos-content-wrapper .photos-upload-link::before {
content: 'Add Photos';
font-size: 15px;
vertical-align: middle;
margin-top: -10px;
display: inline-block;
}
.justified-gallery {
overflow: visible !important;
}
.justified-gallery > a,
.justified-gallery > div,
.justified-gallery > figure{
height: 180px !important;
width: 180px !important;
border: 1px solid #ccc;
position: relative !important;
top: auto !important;
left: auto !important;
border-radius: 8px;
margin: 4px !important;
}
.justified-gallery > .jg-entry-visible > img,
.justified-gallery > .jg-entry-visible > a > img,
.justified-gallery > .jg-entry-visible > svg,
.justified-gallery > .jg-entry-visible > a > svg{
width: 100% !important;
height: 100% !important;
margin: 0 !important;
top: 0 !important;
left: 0 !important;
object-fit:cover;
object-position: center;
}
#photo-photo {
margin: 0 auto !important;
}
@media screen and (max-width: 1280px) {
#search-box {
width: 18% !important;
}
}
@media screen and (max-width: 991px){
#search-box {
left: 15%;
}
#jotOpen::before {
content: '';
margin: 0;
}
#mention-link span:last-of-type {
margin-right: 42px;
}
}
@media screen and (max-width: 768px){
#topbar-first .navbar-toggle[data-target="#search-mobile"]{
position: fixed !important;
left: 15%;
}
#search-mobile {
top: 110px !important;
}
}
You can follow us in other languages. Visit our website for more information wordsmith.social/protestation/…
Social
English– @protestation@redspinning.topFrançais– @protestation@soc.redeyes.site
Deutsch– @protestation@friendica.eskimo.com
Quotes– @protestation@telleverybody.net
like this
Tap tap tap
like this
I’m going to try a cooking experiment now!
like this
@Sunshine @Julie It's [img=url-to-image]this is a photo of a baking sheet covered in white parchment paper and a batter consisting mostly of seeds[/img]. If you uploaded the image directly to the server, just type your alt before [/img].
Or upload the picture separately and add a description to it in Photos.
Requiem for a College - A Foggy Day at SJC - 2017
It’s odd the things that pop up in one’s memory feeds. Like these three images this morning.
I’m pretty sure that these were taken by the Love of My Life (aka Evelia) on an unusually warm morning on this day in 2017 on the Saint Joseph’s College Campus. As can happen in Northern Indiana, the sudden transition from sub-zero temps to above freezing actually will cause the snow to evaporate, making things foggy as all get-out. It can be a beautiful, if somewhat haunting, break to the winter cold.
Regardless, these quick phone-snapshots, which Evelia is prone to doing, were likely of her walk from her car at the Lennane Computer Center, where I had my offices as Chief Information Officer, to the Halleck Student Center, where she would have grabbed a cup of coffee before her classes in pre-law.
In other words, on the surface, a typical uneventful morning in Higher Education, and one that is played out at Colleges and Universities all over the U.S. (and the world).
However, just 18 days later, the Board of Trustees would vote to close this school, and suspend operations of the underlying non-profit organization while seeking ways to keep it out of bankruptcy.
As the newly “official” CIO and soon-to-be member of the President’s Cabinet, I was of course aware of the disaster that was unfolding. And I was indeed doing a lot of crisis-management as a result. But even so, emotionally a part of me was still doing various strategic plan scenarios that assumed an attempt to continue operations, coupled with the belief that, like so may times in the past for this institution, we would somehow find a way to avoid our date with the executioner.
It was not to happen.
For anyone interested in the story about the Saint Joseph's College closure, there is a well-written book out there by Dr. Jonathan Nichols that covers it:
amazon.com/Requiem-College-Jon…
And remember, in the immortal words of Ferris Bueller… Life Moves Pretty Fast. If You Don't Stop and Look Around Once in a While, You Could Miss It.
Sunshine likes this.
Alternative to the Inaugural boycott
Maybe stop virtue signalling about not watching the inaugural. Maybe it's true that we lost cuz we abandoned certain spaces. Maybe Thing 1 on Day 1 shouldn't be to proudly continue to do that.
Let's all go to the nearest sports bar, have some chicken wings and a beer, and take it all in there.
Cătă likes this.
greg_laden likes this.
All the Fediverses
like this
"Linux Mint 22.1 Released"
#YouTube - youtube.com/@SwitchedtoLinux
#Odysee - odysee.com/@switchedtolinux:0
#Rumble - rumble.com/c/SwitchedToLinux
#Bitchute - bitchute.com/channel/uf9hzD216…
!!! NOTE !!! Switched To Linux is, “written by a broad spectrum computer consultant to help people learn more about the Linux platform.” This account is a supporter of @SwitchedToLinux and provides convenience posts of thumbnails art, videos and streams.
«Posts may contain hashtags as content may pertain to many distributions and/or related material/topics. Posts may be reposted, boosted, shared, etc. by bots and/or other accounts and are done so at the discretion of the bots/accounts that perform those actions. This account is not responsible for the action(s) of those bots and/or accounts. Therefore, Offended Discretion is advised.»
#SwitchedToLinux #Linux #Windows #Mac #AltTech #FOSS #YouTube #Odysee #Rumble #BitChute #Locals #DLive #Twitch #FactCheckTrue #Fediverse #Fedi22 #Fedi23 #Fedi24 #LinuxMint @LinuxMint
New Post
like this
Biden's Farewell Message
President Joe Biden's farewell message is reminiscent of Eisenhower's, in that both warned about a takeover of government by a small cabal of self-interested billionaires.
However, like most things Biden...and I love the guy...he's a little late with his message.
The astounding speed with which the billionaire tech bros and MAGA moron zealots have inserted themselves into the decision-making of the incoming administration is one big difference.
Another difference is that this newer group is into "breaking things," not making things -- except massive profits for themselves.
A third difference is that this group is taking a "whole of government" approach, not just focusing on one department's budget.
Finally, this bunch is introducing us to something worse than an oligarchy. They are bringing us a kakistocracy, rule by the incompetent.
We are in for a rough ride. You can be sure that America's rivals for world leadership will be happy to exploit these transactional idiots. Buckle up. Such a shame. We are becoming Russia, maybe just Hungary, but with the Three Stooges in charge. Sad.
Sunshine likes this.
You can follow us in other languages. Visit our website for more information wordsmith.social/protestation/…
Social
English– @protestation@redspinning.topFrançais– @protestation@soc.redeyes.site
Deutsch– @protestation@friendica.eskimo.com
Quotes– @protestation@telleverybody.net
New Star Wars Women's History Month Variant Covers Spotlight Iconic Heroes of the Galaxy Far, Far Away
Check out this year’s Star Wars Women's History Month Variant Covers, on sale this March.Marvel (Marvel Entertainment)
I am vaguely aware of something called Lemmy, which is similar to Reddit, including the inability to delete posts. Why, I don't know. Anyway, I read that it can interact with Friendica. But I'm confused regarding finding forums, joining them, and posting to them. Usually, I go to a website, enter friendica.world, am taken to my homepage, and then authorise the connection. But this seems different. Can anyone help me? Also, I primarily use Tweesecake, not the main site, so I have no idea what the bit about widgets means.
wiki.friendi.ca/docs/post_to_l…
#blind #fediverse #forums #Friendica #Lemmy #posting #Tweesecake
Sunshine likes this.
@Georgiana Brummell I think you can delete your content from there too. Yes, Lemmy is like a federated version of Reddit (just like Friendica is to Facebook).
Forum
The language in the documentation is a bit old, now the forums have been renamed to groups, but they're the same thing.
Disregarding the language used, you can go to lemmyverse.net/ and then to the communities tab. From there, click or copy the address for any community that you're looking for - the one starting with an exclamation mark - and paste it in the search bar. Once you find it, follow it like you would follow any other person.
To post in a group, simply create a normal post and tag the group with either ! or @.
Keep in mind that for Lemmy you have to add a title to your post, otherwise it will use the first 200 characters in the first line of it as the title and it might look off.
Btw, we also have some groups in Friendica. They're less active than the Lemmy communities, but they're there. And you don't have to add a title to any post to them.
Sunshine likes this.
@Georgiana Brummell I described it in a little more detail here: 🚀 A little guide on how to communicate with #Lemmy from #Mastodon #Friendica #Hubzilla #Sharkey etc
It's not only for Friendica, it also works from Mastodon, Sharkey etc. With Friendica you can also use ! instead of @ to tag the community, then the post only goes to the group and not directly to the timelines of your contacts.
🚀 A little guide on how to communicate with Lemmy from Mastodon, Friendica, Hubzilla, Sharkey etc(this is the English translation of this German post: anonsys.net/display/bf69967c-1… If something is linguistically incorrect or incomprehensible, please let me know)
Lemmy is a kind of forum software in the #Fediverse: You can subscribe to forums (called ‘communities’ in Lemmy), share links and participate in discussions. @Tealk and I have described it in more detail (in German) here.
On the one hand, you can follow #Lemmy accounts, in which case the posts will appear in your timeline and you can reply to them, share them, etc.
On the other hand, you can also create posts in Lemmy communities from Mastodon etc.Follow a community:
The easiest way is to type the account name in full into the search or copy the URL into the search field. This applies to communities (e.g. [ät]fediversede@feddit.de) and Lemmy accounts (e.g. @caos is my Lemmy account) as well as to individual posts in Lemmy (e.g. feddit.org/post/201081 is a post in Lemmy).Creating posts in communities:
You can create posts in Lemmy communities by tagging the community account
(It should be a public post)
If the community account is tagged with @, it will share the post and the post will also appear in the forum.
For example, this is a post I created from Mastodon in feddit's #Tischtennis forum: metalhead.club/@caos/112749905… ... and this is how it is displayed in Lemmy: feddit.org/post/556495The only thing to note from Mastodon and Akkoma etc. is: The beginning of the post/the first paragraph becomes the title of the forum post, as Mastodon does not have a heading field. (see also: Instructions Creating a post from Mastodon)
So it is best to start the post like this (see image 1):
This is my headline (as descriptive a title as possible)
@community@lemmy-instance
This is the further text, link etc.
if necessary a picture (only in the initial post a picture is transferred from Mastodon to Lemmy, between Lemmy and Friendica all images in answers are transferred in the meantime)Send post to multiple communities / groups at the same time
The post can only be sent to one Lemmy community at a time. If several community accounts are tagged, the post will only appear in the last one mentioned. If several different group accounts are tagged in a post, the Lemmy account should come first. According to my tests, it works in the following order: 1. lemmy community 2. friendica forum 3. a.gup.pe group . Then all groups share the post, otherwise it doesn't work with all of them so far.Search for communities
You can search for interesting forums/communities either on an instance page or here in the ‘Lemmy Explorer’ (see image 2).
If you are interested, enter the URL in the search field and follow the account.If you have found an interesting community, you can copy its URL into the search field to follow the community account (see image 3) or enter the handle of the account in the form @communityname@lemmy-instance (in Friendica etc. also with !).
The past posts are then often not displayed, but those that come in the future will appear in your timeline.
What is not possible from Mastodon etc. is to create your own community. This requires a Lemmy or kbin account. Otherwise almost everything works (except for pictures in replies, which are not federated, see in detail (in German) here).If you follow many or very active communities, it can get a bit confusing, especially in Mastodon. A clearer view is available if you view it on the page of the community itself, i.e. open it externally in the browser.
(the original URL of posts is sometimes hidden behind the #Fediverse logo)There are also other public groups in the #Fediverse, e.g. Friendica-Forums and kbin-Magazines, which work in a similar way.
#Lemmy #Mastodon #Friendica #Hubzilla #Sharkey
@Fediverse
Trying out a new #Fediverse app each day (Day 2)
Today's app is pixelfed.social, a fediverse alternative to Instagram
Pros: I have only been using pixelfed for a couple of days, but with a limit of 20 images and videos per post, it seems to do just about everything I would normally use Instagram for. Content discovery is decent with a Discover feed, but it obviously needs more users.
Cons: The site is a bit slow to load/reload and lacks the ability to "like" or comment on a post without clicking on it to open it into its own page. Oftentimes you must scroll to get to the "like" button and comments.
Overall Score: 5 out of 10, but there is a lot of potential there!
How do you filter all global posts to Friendica instances only?
like this
@Sunshine Not sure if it's possible, at least not without an app. That's how the Fediverse works - you get access to every connected network, be it Mastodon, PeerTube, Lemmy, Pixelfed (yes, I saw those too) etc.
In fact, you might have stumbled across posts from other networks on Mastodon too - you only didn't notice because Mastodon and other networks do not display where these actually come from.
Sunshine likes this.
Harm Reduction bezüglich Cannabis
Aufgrund der #prohibition wurden mir manche Dinge nicht beigebracht und ich habe meine eigenen Erfahrungen gesammelt, welche ich hier jungen Menschen oder unreflektierten Konsumenten als gut gemeinte Tipps weitergeben möchte. Ist primär für Freizeitkonsumenten von #cannabis gedacht.
siehe ausführliche Version:
hdiag.de/tipps-zur-harm-reduct…
How do I see Groups?
Thanks
like this
Daemon Silverstein
in reply to Kristi H. • •@kmh Excellent! Just a tip: Friendica allows code formatting, which makes readability better, while also escaping the code (depending on markup language, some sequences or characters, such as asterisk and underline, could accidentally be parsed as bold/italic).
I don't fully remember which one is the valid syntax for the web version, I guess it's the markdown one (I'm using an Android app to access Friendica, and the app allows me to set either bbcode, html or markdown):
Bbcode: [ code ]your code[ /code ] (remove the spaces)
Html: < code >your code< /code > (remove the spaces)
Markdown: three grave accents (`) in a single line, then the code, then another single line with three grave accents.
Example:
Becomes:
Hope this helps!
Kristi H.
in reply to Daemon Silverstein • •