Friendica.World | Community

Bookface Template/Scheme for Friendica Frio Theme

(No, it isn't striped like that! That's just to get your attention. And because, of course, the penguin can't decide between light or dark!)

Attached is a ZIP archive with the four files you need to add Bookface Light and Bookface Dark as customization options for the "Frio" theme on your Friendica server. Unlike the browser user stylesheets these will adopt the Accent Color setting.

Many thanks to @Matthias for giving me some clue how to do this! Once I installed Friendica on my development server their adaptation of my stylesheet to a theme template helped me figure it out.

Work-In-Progress. Use it in production at your own risk!

I'm sure I've missed some things because I've been adding styles as I encounter things that

@Matthias

like this

reshared this

in reply to Kristi H.

Kristi H.

in reply to Kristi H. • 2 months ago •

Update 1.1 fixes issue where lots of tags/mentions spill out of the post media box and profile fields to the right in one long line. This update confines them in the box, wrapping them to additional rows as needed. It also adds spacing to the left of multiple buttons floated right in Settings.

bookface_light.css

Reveal/hide

/*
	Name	   : Bookface Light
	Version    : 1.1
    Licence    : AGPL
    Created on : 19.01.2025
    Author     : Kristi H. @kmh@friendica.world feb @feb@loma.ml
*/


:root {
    --global-font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif, Noto Color Emoji;
    --nav-bg: $nav_bg;
    --link-color: $link_color;
    --nav-icon-color: $nav_icon_color;
    --background-color: $background_color;
    --contentbg-transp: $contentbg_transp;
    --font-color: $font_color;
    --font-color-darker: $font_color_darker;
    --background-image: $background_image;
    --menu-background-hover-color: $menu_background_hover_color;
    --border-color: $border_color;
}

	body

bookface_light.css

Reveal/hide

/*
	Name	   : Bookface Light
	Version    : 1.1
    Licence    : AGPL
    Created on : 19.01.2025
    Author     : Kristi H. @kmh@friendica.world feb @feb@loma.ml
*/


:root {
    --global-font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif, Noto Color Emoji;
    --nav-bg: $nav_bg;
    --link-color: $link_color;
    --nav-icon-color: $nav_icon_color;
    --background-color: $background_color;
    --contentbg-transp: $contentbg_transp;
    --font-color: $font_color;
    --font-color-darker: $font_color_darker;
    --background-image: $background_image;
    --menu-background-hover-color: $menu_background_hover_color;
    --border-color: $border_color;
}

	body {
		background-color: var(--background-color) !important;
		font-size: 15px !important;
		padding-top: 125px !important;
		font-family: var(--global-font-family);
	}
	#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: var(--nav-bg) !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 var(--link-color) !important;
		color: var(--link-color) !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;
        background-color: var(--nav-bg) !important;
        border: 1px solid var(--background-color) !important;
	}
		.dropdown-menu li {
			margin: 10px;
			width: 92% !important;
			border-radius: 8px;
		}
			.dropdown-menu li:hover {
				border-color: transparent !important;
			}
    .form-control {
    	background: #fff;
    	color: #000;
    }
    	.form-control[readonly],
    	.form-control[disabled],
    	.fieldset[disabled] .form-control {
    		opacity: .5;
    	}
			
	header #banner {
		left: 0 !important;
		right: auto !important;
	}
		header #banner #logo-img,
		.navbar-brand #logo-img {
			background-color: var(--link-color) !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: var(--background-color);
		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;
		margin-top: 2px !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: var(--link-color) !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;
		}
	/* Make Submit Buttons Pretty */
	.settings-submit,
	button[type="submit"]{
		background-color: var(--link-color) !important;
		color: white !important;
		border-radius: 8px !important;
	}
	.settings-submit.form-button-search,
	button[type="submit"].form-button-search {
		border-radius:50px !important;
		margin-top:-.5px !important;
	}
	.settings-submit:hover,
	.settings-submit:focus,
	button[type="submit"]:hover,
	button[type="submit"]:focus{
		box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
	}
	 #delegate-parent .submit button {
    	float: right;
    	padding: 8px;
    	appearance: none;
    	border: none;
    }
    	#delegate-parent .submit::after {
    		content: '';
    		display: block;
    		clear: both;
    	}
	/* make position of submit buttons in settings consistent */
    .panel-footer {
    	background-color: var(--nav-bg) !important;
    }
    .panel-footer button[type="submit"]{
        float: right !important;
        margin-left: 5px;
    }
		.panel-footer::after{
			content: '';
			display: block;
			clear: both;
		}

	/* Other people profiles */
	#mention-link {
		background-color: var(--link-color) !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;
			line-height: 45px;
			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;
	}
	#profile-extra-links .btn {
		border-radius: 8px !important;
		margin-bottom: 10px !important;
	}
	/* sidebar widgets */
	aside .widget,
	.nav-container .widget {
		background-color: var(--background-color) !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;
			}
       /* keep mentions and tags from spilling out */
       #profile-page .label,
       #profile-page .label a,
       .wall-item-bottom .label, 
       .wall-item-bottom .label a {
            display: inline-block !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: var(--link-color);
			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 */	
	/* Compose and Reply */
	#jot-modal-content,
	.wall-item-comment-wrapper {
		background-color: #fff !important;
		   border-radius: 15px !important;
	}
	#jot-modal-content input,
	#jot-modal-content .friendica-tagsinput {
		   background-color: #fff !important;
	}
	#jot-modal-content .fbrowser .folders button {
	   background-color: rgba(0,0,0,.1) !important;
	   color: black !important;
       appearance: none;
       border: none;
       border-radius: 8px;
       width: 100%;
       margin-bottom: 5px;
	}
	#jot-modal-content .fbrowser .folders button:hover,
	#jot-modal-content .fbrowser .folders button:focus {
		background-color: rgba(0,0,0,.2) !important;
	}
		   #jot-modal-content .fbrowser .folders li:hover,
	#jot-modal-content .fbrowser .folders li:focus {
		   border-color: transparent !important;
		   background-color: transparent !important;
	}
		   
	#jot-title {
		   background-color: #fff !important;
	}
		   #profile-jot-text, #profile-jot-wrapper textarea,
		   #jot-location,
		.wall-item-comment-wrapper textarea {
			background-color: #fff !important;
		}
	#jot-text-wrap, #profile-jot-wrapper .dropzone.dz-clickable,
	.wall-item-comment-wrapper .dropzone.dz-clickable {
		   background-color: var(--background-color) !important;
	}
	.jot-nav {
		   border: none !important;
	}
	.jot-nav a {
		   border: none !important;
		   border-radius: 8px !important;
		   margin-right: 5px;
	}
	.jot-nav a:hover, .jot-nav a:focus {
		   background-color: rgba(128,128,128,.2) !important;
	}
	.jot-nav .active a {
		   background-color: transparent !important;
		   border-radius: 0 !important;
		   border-bottom: 3px solid var(--link-color) !important;
	}
	.jot-nav .active a:hover, .jot-nav .active a:focus {
		   background-color: transparent !important;
	}
	[id^="comment-edit-preview"],
	.comment-edit-preview {
	  border-radius: 8px !important;
	  box-shadow: none !important;
	  background-color: rgba(0,0,0,.1);
	}
	[id^="comment-edit-preview"]:hover,
	[id^="comment-edit-preview"]:focus,
	.comment-edit-preview:hover,
	.comment-edit-preview:focus {
		   background-color: rgba(0,0,0,.2) !important;
	}
	#profile-jot-wrapper .wall-item-container.panel-body.preview {
		   border: 1px solid #666 !important;
		   margin-top:20px !important;
		   border-radius: 8px !important;
	}
		/* file browser */
		#upload-photo {
			background-color: var(--link-color) !important;
			color: white !important;
			border-radius: 8px !important;
		}
		 #upload-photo:hover,
		#upload-photo:focus {
			background-color: darkblue !important;
		}
		.fbswitcher [data-mode="attachment"] {
			display: none !important;
		}	
/* Profiles */
	#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: var(--link-color) !important;
		}
		.wall-item-actions .checkbox {
			padding-top: 6px !important;
		}
		.comment .media-body {
			padding: 10px;
			background-color: var(--background-color);
			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: var(--link-color) !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: var(--link-color) !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;
		}
	}
	@media screen and (max-width: 480px){
		#topbar-first .navbar-toggle[data-target="#search-mobile"]{
			left: 10%;
		}
		.topbar ul.nav {
			position: relative !important;
			left: 10% !important;
			margin-left: 0!important;
		}
	}

bookface_dark.css

Reveal/hide

/*
	Name	   : Bookface Dark
	Version    : 1.1
    Licence    : AGPL
    Created on : 19.01.2025
    Author     : Kristi H. @kmh@friendica.world feb @feb@loma.ml
*/

:root {
    --global-font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif, Noto Color Emoji;
    --nav-bg: $nav_bg;
    --link-color: $link_color;
    --nav-icon-color: $nav_icon_color;
    --background-color: $background_color;
    --contentbg-transp: $contentbg_transp;
    --font-color: $font_color;
    --font-color-darker: $font_color_darker;
    --background-image: $background_image;
    --menu-background-hover-color: $menu_background_hover_color;
    --border-color: $border_color;
}

body {
       background-color: var(--background-color) !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: var(--nav-bg) !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 var(--link-color) !important;
       color: var(--link-color) !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: var(--link-color) !important;
}
       ul.tabs li a {
              margin-top: 8px;
              color: var(--link-color) !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;
        background-color: var(--nav-bg) !important;
        border: 1px solid var(--background-color) !important;
    }
        .dropdown-menu li {
            margin: 10px;
            width: 92% !important;
            border-radius: 8px;
        }
            .dropdown-menu li:hover {
                border-color: transparent !important;
            }
    .form-control {
    	background: var(--nav-bg);
    	color: #fff;
    }
    	.form-control[readonly],
    	.form-control[disabled],
    	.fieldset[disabled] .form-control {
    		background-color: #666;
    		color: #fff;
    		opacity: .5;
    	}
    .table-striped > tbody > tr:nth-of-type(2n+1) {
    	background-color: var(--nav-bg);
    }
header #banner {
       left: 0 !important;
       right: auto !important;
}
       header #banner #logo-img,
       .navbar-brand #logo-img {
              background-color: var(--link-color) !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;
       margin-top: 2px !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: var(--nav-bg) !important;
       border: 1px solid var(--background-color) !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: var(--nav-bg) !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: var(--nav-bg) !important;
}    
#topbar-first #nav-notifications-menu {
       border: 1px solid var(--background-color) !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(255,255,255,.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: var(--nav-bg) !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: var(--link-color) !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;
       }
    /* Make Submit Buttons Pretty */
    .settings-submit,
    button[type="submit"]{
        background-color: var(--link-color) !important;
        color: white !important;
        border-radius: 8px !important;
        border: none !important;
        box-shadow: none !important;
    }
    .settings-submit.form-button-search,
    button[type="submit"].form-button-search {
        border-radius:50px !important;
        margin-top:-.5px !important;
    }
    .settings-submit:hover,
    .settings-submit:focus,
    button[type="submit"]:hover,
    button[type="submit"]:focus{
        box-shadow: inset 0 0 100px rgba(255,255,255,.1) !important;
    }
    #delegate-parent .submit button {
    	float: right;
    	padding: 8px;
    	appearance: none;
    	border: none;
    }
    	#delegate-parent .submit::after {
    		content: '';
    		display: block;
    		clear: both;
    	}
    /* make position of submit buttons in settings consistent */
    .panel-footer {
    	background-color: var(--nav-bg) !important;
    }
    .panel-footer button[type="submit"]{
        float: right !important;
        margin-left: 5px;
    }
        .panel-footer::after{
            content: '';
            display: block;
            clear: both;
        }
    /* Compose Window */
    #upload-photo {
        background-color: var(--link-color) !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: var(--link-color) !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;
              line-height: 45px;
              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;
}
#profile-extra-links .btn {
	border-radius: 8px !important;
	margin-bottom: 10px !important;
}
/* sidebar widgets */
aside .widget,
.nav-container .widget {
       background-color: var(--background-color) !important;
       -webkit-box-shadow: none !important;
       -moz-box-shadow: none !important;
       box-shadow: none !important;
}
/* Posts */
.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 var(--nav-bg) !important;
       }
.hovercard {
       background-color: var(--nav-bg) !important;
       border: 1px solid var(--background-color) !important;        
}
       .hover-card-pic img.thumbnail {
              border-radius: 100% !important;
              background-color: var(--background-color) !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;
              }
       /* keep mentions and tags from spilling out */
       #profile-page .label,
       #profile-page .label a,
       .wall-item-bottom .label, 
       .wall-item-bottom .label a {
            display: inline-block !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: var(--link-color);
              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 */        
/* Compose and Reply */
#jot-modal-content,
.wall-item-comment-wrapper {
	background-color: rgb(37,39,40) !important;
       border-radius: 15px !important;
}
#jot-modal-content input,
#jot-modal-content .friendica-tagsinput {
       background-color: var(--background-color) !important;
}
#jot-modal-content .fbrowser .folders button {
       background-color: rgba(255,255,255,.1) !important;
       color: black !important;
       appearance: none;
       border: none;
       border-radius: 8px;
       width: 100%;
       margin-bottom: 5px;
}
	#jot-modal-content .fbrowser .folders button:hover,
	#jot-modal-content .fbrowser .folders button:focus {
		background-color: rgba(255,255,255,.2) !important;
	}
       #jot-modal-content .fbrowser .folders li:hover,
#jot-modal-content .fbrowser .folders li:focus {
       border-color: transparent !important;
       background-color: transparent !important;
}
       
#jot-title,
#jot-category {
       background-color: rgb(51,51,52) !important;
}
       #profile-jot-text, #profile-jot-wrapper textarea,
       #jot-location,
	.wall-item-comment-wrapper textarea {
		background-color: rgb(51, 51, 52) !important;
	}
#jot-text-wrap, #profile-jot-wrapper .dropzone.dz-clickable,
.wall-item-comment-wrapper .dropzone.dz-clickable {
       background-color: var(--background-color) !important;
}
.jot-nav {
       border: none !important;
}
.jot-nav a {
       border: none !important;
       border-radius: 8px !important;
       margin-right: 5px;
}
.jot-nav a:hover, .jot-nav a:focus {
       background-color: rgba(255,255,255,.2) !important;
}
.jot-nav .active a {
       background-color: transparent !important;
       border-radius: 0 !important;
       border-bottom: 3px solid var(--link-color) !important;
}
.jot-nav .active a:hover, .jot-nav .active a:focus {
       background-color: transparent !important;
}
[id^="comment-edit-preview"],
.comment-edit-preview {
  border-radius: 8px !important;
  box-shadow: none !important;
  background-color: rgba(255,255,255,.1);
}
[id^="comment-edit-preview"]:hover,
[id^="comment-edit-preview"]:focus,
.comment-edit-preview:hover,
.comment-edit-preview:focus {
       background-color: rgba(255,255,255,.2) !important;
}
#profile-jot-wrapper .wall-item-container.panel-body.preview {
       border: 1px solid #666 !important;
       margin-top:20px !important;
       border-radius: 8px !important;
}
/* Profile */
#profile-photo-wrapper {
    overflow: visible !important;
    padding: 5px;
    background-color: var(--background-color);
    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 var(--background-color);
}    
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: var(--link-color) !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.ul-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: var(--link-color) !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: var(--link-color) !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;
    }
}
@media screen and (max-width: 480px){
	#topbar-first .navbar-toggle[data-target="#search-mobile"]{
		left: 10%;
	}
	.topbar ul.nav {
		position: relative !important;
		left: 10% !important;
		margin-left: 0!important;
	}
}

in reply to Kristi H.

OldKid ⁂

in reply to Kristi H. • 2 months ago from sekretaerbaer.de • •

@Kristi H.

I noticed that the button for the attachment upload is not displayed.

@Kristi H.

in reply to OldKid ⁂

Matthias

in reply to OldKid ⁂ • 2 months ago from [ˈloma] | Friendica • •

@OldKid ⁂
With this patch you can upload MP3/4 via drag & drop github.com/friendica/friendica…

@Kristi H.

@OldKid ⁂ @Kristi H.

Jools [Friendica] likes this.

in reply to Matthias

Frend

in reply to Matthias • 2 months ago • •

So only drag and drop and not both?

Jools [Friendica] likes this.

in reply to Frend

Matthias

in reply to Frend • 2 months ago from [ˈloma] | Friendica • •

@Frend
Both should be possible.
The patch will only be available with the next release.

@OldKid ⁂ @Kristi H.

@OldKid ⁂ @Kristi H. @Frend

like this

in reply to Matthias

OldKid ⁂

in reply to Matthias • 2 months ago from sekretaerbaer.de • •

@Matthias Thanks for the link/patch... but it doesn't work on my test instance (develop branch).

@Matthias

in reply to OldKid ⁂

Matthias

in reply to OldKid ⁂ • 2 months ago from [ˈloma] | Friendica • •

Auf meiner Stable funzt es ;)

Frend likes this.

in reply to Matthias

OldKid ⁂

in reply to Matthias • 2 months ago from sekretaerbaer.de • •

@Matthias muss ich morgen noch mal testen, jetzt pfelge ich erstmal meine Grippe weiter und schau mir das Handball WM Spiel Deutschland : Dänemark an

@Matthias

in reply to OldKid ⁂

Matthias

in reply to OldKid ⁂ • 2 months ago from [ˈloma] | Friendica • •

Oh, gute Besserung!

in reply to Matthias

OldKid ⁂

in reply to Matthias • 2 months ago from sekretaerbaer.de • •

@Matthias Danke

So jetzt funtzt der Patch auch bei mir ... war nen Addon von Firefox dran Schuld das es nicht funktioniert.
Ich hätte nur gerne den Attachment Button wieder, weil ich über den ja auch immer schon hochgeladen Attachments sehen konnte.

@Matthias

Frend likes this.

in reply to OldKid ⁂

Kristi H.

in reply to OldKid ⁂ • 2 months ago •

Yes, I hid that button on purpose because file attachment (other than photos) is a partially-implemented/broken feature, as there is no interface for managing/deleting them, only listing them. And, yes, I'm aware of the irony of my having used that file attachment function in my OP above. But I'm annoyed I have no way to manage or delete any of the files I've uploaded, and other people I know who came from Facebook were confused by it. I think it's better to not present a semi-broken feature to new users, it just frustrates them. But I apologize for frustrating you in the process.

in reply to Kristi H.

Matthias

in reply to Kristi H. • 2 months ago from [ˈloma] | Friendica • •

A great piece of work. Many thanks for that 😀

Daemon Silverstein

2 months ago •

(Brazil)

Daemon Silverstein
2 months ago — (Brazil) •

Ineloquibilis

There is a well-known phenomenon that happens to those who write, I don't know if it's called "blank page problem", "blinking text cursor problem" or something else. It's when you open your favorite writing application and spend hours staring at a blinking cursor (you know, the vertical bar that indicates the current position where the next character will be inserted if you decide to type any letter) inside a blank document/text field.

It's not as if there were no ideas or thoughts going on within their minds, it's because they can't be translated into words... They could fully tap into their unconscious, a process called "stream-of-(un)consciousness", but it's easy said than done: try to describe the taste of chocolate without using "chocolate", "cacao", "sweet", "sweetener", "sugar", among similar terms, and you'll realize you simply can't do it.

And there are situations where the thing *can* be translated into words, but they *shouldn't* be. It's when they're aware of the possible unwanted consequences of expressing that thing, so they keep it restricted to their own thoughts. It's not as if they were thinking an unsavory thing, but they know that it can't be said out loudly.

One of those situations is when the thing is a secret. Say someone told them a very deep and serious secret. A secret so intricate that can't be expressed without compromising the secrecy of the thing (as well as the secrecy of the person who told the secret). It's like having to carry a heavy boulder, forever.

All of those situations will face the same things: a blank page, a blinking cursor and a desire that simply can't be fulfilled to express something that can't be said. It's uncomfortable, it's on the verge of the painful.

But wait: there's more! There's a worse scenario, a scenario I wouldn't wish on my worst enemy. A scenario where those three situations happen simultaneously: it's a secret, it's a thing that have no words to express it, and it's a thing that can't be shouted out loudly.

Words have consequences. Actions have consequences. Yet holding things to oneself also has consequences. Internal pressure increases until it reaches critical state. One's brain will keep rehashing and rehashing it, it's inevitable. It's akin to a Cassandra curse: they have something going on inside their mind, yet nice/good reactions wouldn't be found if they decided to express it (supposing that they could translate it into words).

So they keep it to themselves, just as Cassandra. They're the only ones that could potentially understand it... or could they? It's where the situation becomes even worse: it's a thing that they can't understand by themselves, they need help to understand it, but they're forbidden to seek help to understand it, because they can't say it in the first place. Even when they have close friends or familiar people, they couldn't use their help, and these people probably wouldn't understand either.

And this is where it becomes the worst scenario: ain't no close friends to even consider the possibility of talking to, nor "far friends", no one. Maybe they should rely on LLMs? Lol, they can't "understand" a thing, they're just fancy auto-completing algorithms, they can't reason, they can't help with the ineffable. Neither can that writing app, which is still blank, while they lost count on how many times its cursor blinked. Ain't no one besides themselves to try to tell the thing.

This is the ineloquibilis scenario: can't be said, can't be held to oneself either...

Images By MEK

2 months ago •

Images By MEK
2 months ago •

Hello, and Welcome to Images By MEK in The Fediverse:

A bit over a decade ago I built a small following on Facebook. This was actually the first image I posted there:

Along with many others for reasons I won’t go into on this post, I felt the time had arrived to move to a different ‘verse for my creative content. The Fediverse.

And while many, many others have moved to the Pixelfed-verse (a terrific subset of the Fediverse ecosystem), I have decided to use the Friendica-verse instead.

Why? Well for starters, I like to tell stories when posting my Imagery. I like to share what was involved in the creation of it, perhaps share some background of the where/when/why that moment occurred, and maybe engage in a discussion with-like minded people. To me my images are also stories. And to do all that, a Facebook like format simply works better for me than an Instagram-like one.

like this

Protestation (English)

2 months ago from Protestation •

Protestation (English)
2 months ago from Protestation •

You can follow us in other languages. Visit our website for more information wordsmith.social/protestation/…

leastaction

2 months ago •

leastaction
2 months ago •

Another federated medium: Bookwyrm

Here's a #federated service we don't often hear about: #Bookwyrm . If you are, well, a book worm, check out the #community at bookwyrm.social/.

BookWyrm

Social Reading and Reviewing

^{bookwyrm.social}

#community #federated #Bookwyrm

Matt Hodgkinson likes this.

tomasarad

2 months ago •

tomasarad
2 months ago •

cats

pxscdn.com/public/m/_v2/786469…

AnnaCav

2 months ago •

AnnaCav
2 months ago •

Here is hoping this sucks far less than facebook

like this

leastaction

2 months ago •

leastaction
2 months ago •

Ready to quit X on Tuesday

Downloaded my data from #Twitter today (not entirely sure why; I'll probably delete it in a year). Already on #Mastodon at @Alfredo and on #Pixelfed at @AlfredoL@pixey.org . Joining the crowd at helloquittex.com on Tuesday.

#twitter @Alfredo

like this

in reply to leastaction

Cătă

in reply to leastaction • 2 months ago from Not sent from my iPhone (I don't have one) • •

@leastaction @Alfredo I'm always downloading my data whenever I leave a platform. I mean, it's my entire history there. It's a pity to lose it like that in a snap.

@Alfredo @leastaction

Sunshine likes this.

Justin Richardson

2 months ago •

Justin Richardson
2 months ago •

My Best Friend Mocha

Mocha

She's so adorable!

#Dog #MyBestFriend #Pitty #Pitbull

#dog #pitbull #MyBestFriend #Pitty

Mary G

2 months ago •

Mary G
2 months ago •

Sunday Runday

A little chilly 🥶 on the Lakefront this morning! But we did it! ❤️ Love you ladies!!

Sunshine likes this.

Saint Clinton

2 months ago •

Saint Clinton
2 months ago •

TikTok starts restoring service in the U.S. after shutting down over divest-or-ban law cbsnews.com/news/tiktok-volunt… via @CBSNews

Mike Leger

2 months ago •

Mike Leger
2 months ago •

Lazy Sunday

First Post: Lazy Sunday day, got a ham in the slow cooker with some roasted veg in the oven while I work my way through the Star Trek Movies. The Undiscovered Country is next.

#startrek #slowsunday

colapunk

2 months ago •

colapunk
2 months ago •

zie ik dit nou op mijn mastodon?

en hoe dan?

in reply to colapunk

colapunk

in reply to colapunk • 2 months ago •

nee dus. andersom werkt wel, wat ik op mijn masto doe zie ik hier wel, wat ik hier doe zie ik daaro niet.

in reply to colapunk

Ruud

in reply to colapunk • 2 months ago •

dat heeft te maken met een issue die we nu hebben. Wordt aan gewerkt. (Moet normaal dus wel werken)

grutjes likes this.

colapunk

2 months ago •

colapunk
2 months ago •

poepjes

kakjes

Ruud likes this.

in reply to colapunk

colapunk

in reply to colapunk • 2 months ago •

this was a test ;)

phle

2 months ago •

phle
2 months ago •

and then Ylvis' The Cabin came to mind ...

"You know there's no such thing as bad weather, only bad kleather."

#Ylvis #TheCabin #TVNorge #English #Norway #video #YouTube #song #music #hytte #cabin #kleather

#Music #english #video #norway #youtube #song #cabin #Ylvis #TheCabin #TVNorge #hytte #kleather

Music Feed reshared this.

in reply to phle

phle

in reply to phle • 2 months ago •

Hm. Interesting.
Coming from diaspora*, I notice that Friendica
- doesn't seem to embed link previews
- also doesn't "collapse" long posts

Ashiqur Rahman likes this.

in reply to phle

skribe

in reply to phle • 2 months ago from RaccoonForFriendica •

@phle but you can edit posts, which I noticed was sadly missing from diaspora.

in reply to skribe

phle

in reply to skribe • 2 months ago •

Yes!
I actually wrote a longer thing about it (clicky-link), from my diaspora* account.

All platforms have their pros and cons ... for better or for worse. 🤷‍♀️

♇ ✱ [phle]

2025-01-19 21:45:00

A week ago, I got myself a #Friendica account, and I've been #exploring it since then.
My plan is to leave Facebook a bit later this year (not just "pause", or "visit sparsely", as I've done for the last couple of years),
and I've made an online event where I've invited all of my Facebook acquaintances. A small subset might be interested in exploring additional platforms.
Friendica has its advantages, but so do diaspora*.
Friendica has a #Calendar function, kind of like Facebook's #Events. In my opinion, that's the only thing "missing" on Diaspora (or does it exist, and I'm the one who have missed it?), and acquiring that, it might help me move some people with me (even if they don't leave Facebook, it would be nice to still have some place to interact with them, and I think they too should explore other options).
Diaspora auto-embeds / gives a preview of links. As far as I've noticed, Friendica does not.
Diaspora auto-collapses long posts. As far as I've noticed, Friendica does not.
Then again, posts (and comments) are editable on Friendica. Editing posts and/or comments are not possible on diaspora* (or were they for a while? ... can't remember). There are advantages of both approaches.
My posts on diaspora* seem to #federate fine to Friendica, but (my) posts on Friendica seem to take their time (none has federated in that direction as of yet). Then again, the admin on the Friendica instance I'm on posted about a backlog, so that may flow better with time?
I'm also considering whether to get a #Mastodon account. I had Twitter, but stopped using it, and then (quite recently) finally deleted my account.
I have no plans to leave diaspora*, but as things are at the moment, I think it will be easier to "lure" people over to Friendica or Mastodon (than to diaspora*), so if they're "there" — or whichever non-Meta platform they chose — I think I would like to have profiles there as well.
#federation #fediverse #socialnetworks #socialnetwork

in reply to phle

phle

in reply to phle • 2 months ago •

Hupp! 😯 — the Friendica-link got embedded! 😅

in reply to phle

phle

in reply to phle • 2 months ago •

and, as I commented over on my diasp.-post:

Hm. Just found out about the Friendica add-on “Show more”, where I can set the number of characters to show before an auto-collapse. 👍👍
peertube.stream/w/edEjYFmve3wm…

Now, let's see if using BBCode, instead of just throwing in the link "as text", makes that Ylvis link embedded:

YouTube link: Ylvis - "The Cabin"

(edit) Hm, no. But the peerview link was. But I posted that ahead of it. I'll try it in another comment.

and, as I commented over on my diasp.-post:

Hm. Just found out about the Friendica add-on “Show more”, where I can set the number of characters to show before an auto-collapse. 👍👍
peertube.stream/w/edEjYFmve3wm…

Now, let's see if using BBCode, instead of just throwing in the link "as text", makes that Ylvis link embedded:

YouTube link: Ylvis - "The Cabin"

(edit) Hm, no. But the peerview link was. But I posted that ahead of it. I'll try it in another comment.

Anubis2814

2024-03-24 18:56:29

Friendica Tutorial 2 of 6: Friendica as a One Stop Social Media Hub. Ver 2023.12

Since the internet was severely lacking it, This is a comprehensive tutorial on how you can do pretty much anything in friendica that you can on facebook. This episode covers how how to join friendica, how to customize your profile, how to make a post, and join a group. PS this is an atheist/liberal/leftish channel and my opinions and beliefs are not that of the friendica organization, so please do not let any of the examples I use have any impact on whether or not you decide to use the site.
Fediverse Shorts for Beginners
peertube.stream/w/p/hsi6Va4XaU…
The Skeptical Buddha the Tao of Science
amazon.com/dp/B09NGRY4L6/ref=c…
Also available in most european, North and South American nations, Indian, Japan and Australia Amazon website.
Twitter @Anubis2814
Fediverse(mastodon, friendica, etc) anubis2814@friendica.myportal.social
Peertube ("new" old videos daily) Anubis2814@peetube.stream
Leftish Peertube ("new" old videos daily) Anubis2814@watch.breadtube.tv
Vaults of Anubis and After School Democracy Podcasts are Available on Stitcher, Apple podcast, Google Podcast, Spotify IheartRadio
youtube.com/user/anubis2814
Also please support me on patreon patreon.com/Anubis2814 anubis2814.wordpress.com/

Amazon.com
^{www.amazon.com}

in reply to phle

phle

in reply to phle • 2 months ago •

Now, then?
YouTube link: Ylvis - "The Cabin"

This, then?
youtube.com/watch?v=ua1FAlHt_Y…

(via peertube.stream/w/p/4K4MWYXMEY… )

Hm ...

Nico Geelen

2 months ago from Fedilab •

Nico Geelen
2 months ago from Fedilab •

@Wilhelmina58 Heb vandaag trouwens ook afscheid genomen van Twitter. Wil morgen voor zijn en dat zullen er vast wel meer gedacht hebben. Liefs, Nico

@Wilhelmina58

Wilhelmina58 likes this.

in reply to Nico Geelen

Wilhelmina58

in reply to Nico Geelen • 2 months ago •

Twitter heb ik nooit gehad. Evenmin TikTok...Maar ben razend benieuwd hoe morgen eruit gaat zien. Denk dat het chaos wordt... Goed van je dat je van Twitter af bent! Dit is een manier van vreedzaam protesteren en mits dit mondiaal gebeurt, kan dit niet zonder gevolgen zijn. Deze media zijn een onderdeel van de macht van Trump en consorten. Elk klein beetje wat we ze kunnen afnemen , is weer iets! Niets doen is geen optie. Liefs terug ❤

Wade Stewart

2 months ago •

Wade Stewart
2 months ago •

Musing about Tik Tok

It seems like an absurd joke to me that Tik Tok shut themselves down, practically begging for Vice President Trump's help. Now it seems it's back up and they thank the incoming VP.

I think this post over at Mastodon nailed it.

like this

Halyihev reshared this.

Evan Fetherolf

2 months ago •

Evan Fetherolf
2 months ago •

Obligatory Cat Picture

So Louie likes Tony now I guess...

Sunshine likes this.

Peter Sørensen

2 months ago •

Peter Sørensen
2 months ago •

Just told my girlfriend about the fediverse. I think I lost her a bit when I started enumerating all the services I can use here.
I got her back when we discussed how to utilize this for smaller groups to get out of Silicon Hell Valleys grip

like this

Unknown parent

Peter Sørensen

Unknown parent • 2 months ago •

Thats a good point! I guess I just got kinda excited when I discovered all the possibilities, that I didn't recognize when to stop 😀
I think that the use of those three, you mention, should help alot of people feel more at home here

Sunshine likes this.

Linda

2 months ago •

Linda
2 months ago •

Hello

I'm new here. Anyone else around here who likes patchwork/quilting, pottery, reading and gardening?

like this

in reply to Linda

phle

in reply to Linda • 2 months ago •

Hello! 👋

#patchwork/#quilting: ...
#pottery: ...
#reading #books: ✅
#gardening: ...
#krokning (a.k.a. #TunisianCrochet ): ✅

#books #gardening #reading #pottery #quilting #patchwork #TunisianCrochet #krokning

like this

AstralApteryx

2 months ago •

AstralApteryx
2 months ago •

Hello World!

This is my first post.

like this

jjjacq

2 months ago •

jjjacq
2 months ago •

Cruising on Westernport bay - January 2025

like this

in reply to jjjacq

jjjacq

in reply to jjjacq • 2 months ago •

In the background, French Island!

Sunshine likes this.

Protestation (English)

2 months ago from Protestation •

Protestation (English)
2 months ago from Protestation •

You can follow us in other languages. Visit our website for more information wordsmith.social/protestation/…

DoSe

2 months ago •

DoSe
2 months ago •

Jan 19

View public calendar Appointment

Sun 7:15 PM

If you can see ist: *yeah*
if not: *wth*

like this

attend

phle attends maybe.

in reply to DoSe

phle

in reply to DoSe • 2 months ago •

*yeah* (can see your public calendar appointment: yes 👍)

DoSe likes this.

in reply to DoSe

Cătă

in reply to DoSe • 2 months ago from Not sent from my iPhone (I don't have one) • •

@DoSe Can't see it 🙁

Here's what you need to do

Just kidding, I couldn't comment if I couldn't see it, haha

@DoSe

like this

arthurpizza

2 months ago •

arthurpizza
2 months ago •

2025 Goals for Social Media

I plan on using federated and open social media more in 2025. The TikTok ban, the strait up nazification of Twitter and Facebook. It's time to stop trusting these billionaires to protect us.

like this

Doris kompániája

2 months ago •

Doris kompániája
2 months ago •

Tartalmas énidő segédlet

Mandala

Fél éve lettem 43 éves, azon az éjszakán felriadtam álmomból és rádöbbentem milyen sokféle nő v...

^{BányászDoris (Blog.hu)}

BányászBerci likes this.

Doris kompániája

2 months ago •

Doris kompániája
2 months ago •

"Életem női" címmel, kiscsoportos női workshopot tartunk Budapesten

Képzeld el, hogy egy különleges vacsorára készülsz és még különlegesebb vendégeket vársz.
Érezhető ahogy pezseg a véred, ahogy ver a szíved és vele lüktet az egész tested, a lélekzeted szapora és mély.
Mert olyan fényes társaság gyűlik össze nálad hamarosan, most először és talán utoljára akiket mindig is ismertél! Akik mind másfélék és mégis egy valami teljesen közös bennük:

Ők azok a nők, akik egyszer már mind voltál! A kislány, a serdülő, a kisasszony, az önmegvalósító, a naív, az anya, a feleség, a barátnő, a csalódott, a szerelmes, a tündér és a papnő is és kitudja még hányféle voltál már.

Életed Női ők, mind hoznak

BányászBerci likes this.

Doris kompániája

2 months ago •

Doris kompániája
2 months ago •

Felnőttek beszélgetnek:

- félek! -mondta.
- tudom! - válaszoltam.

- akkor most mit csináljunk? -kérdezte.
- amit tudunk! - mondtam.

- hogy érted ezt? - kérdezte.
- megyünk tovább és kiderül! - mondtam.

- így? félve? -kérdezte.
- így! - mondtam.

- vigyázol rám? -kérdezte.
- nem! - mondtam.

- miért? -kérdezte.
- nem tudok! -- mondtam.

- felnőttek vagyunk, ugy-e? -kérdezte.
- felnőttek! - mondtam.

doriscompanio.blog.hu

BányászBerci likes this.

in reply to Doris kompániája

BányászBerci

in reply to Doris kompániája • 2 months ago •

megrengette a lelkem ez

in reply to BányászBerci

Doris kompániája

in reply to BányászBerci • 2 months ago •

💗🤍

BányászBerci likes this.

BányászBerci

2 months ago •

BányászBerci
2 months ago •

@Doris kompániája isten hozott az jövő faceboookján

@Doris kompániája

Doris kompániája likes this.

BányászBerci

2 months ago •

BányászBerci
2 months ago •

Feb 14

FrontTeeth

Fri 5:59 PM - 6:59 PM online at owncast

Bassmusic radio show hosted by Lamaskier

Doris kompániája likes this.

BányászBerci attends.

Carolyn Jewel

2 months ago •

(North Bay, California)

Carolyn Jewel
2 months ago — (North Bay, California) •

Bound In Smoke

This is the cover for the WIP (Work in Progress). Bound in Smoke is the first book of a new series for me and a new genre. It's going to be more in the Romantasy genre. My readers know this book is really, really late. I'm in the final stages of tidying things up so I can send it to my editor.

I'll say more about the book in the near future.

Anachronology likes this.

⇧

Kristi H. 2 months ago •

Daemon Silverstein 2 months ago — (Brazil) •

Images By MEK 2 months ago •

Protestation (English) 2 months ago from Protestation •

leastaction 2 months ago •

tomasarad 2 months ago •

AnnaCav 2 months ago •

leastaction 2 months ago •

Justin Richardson 2 months ago •

Mary G 2 months ago •

Saint Clinton 2 months ago •

Mike Leger 2 months ago •

colapunk 2 months ago •

colapunk 2 months ago •

phle 2 months ago •

Friendica Tutorial 2 of 6: Friendica as a One Stop Social Media Hub. Ver 2023.12

Nico Geelen 2 months ago from Fedilab •

Wade Stewart 2 months ago •

Evan Fetherolf 2 months ago •

Peter Sørensen 2 months ago •

Linda 2 months ago •

AstralApteryx 2 months ago •

jjjacq 2 months ago •

Protestation (English) 2 months ago from Protestation •

DoSe 2 months ago •

arthurpizza 2 months ago •

Doris kompániája 2 months ago •

Doris kompániája 2 months ago •

Doris kompániája 2 months ago •

BányászBerci 2 months ago •

BányászBerci 2 months ago •

Carolyn Jewel 2 months ago — (North Bay, California) •

Kristi H.
2 months ago •

Daemon Silverstein
2 months ago — (Brazil) •

Images By MEK
2 months ago •

Protestation (English)
2 months ago from Protestation •

leastaction
2 months ago •

tomasarad
2 months ago •

AnnaCav
2 months ago •

leastaction
2 months ago •

Justin Richardson
2 months ago •

Mary G
2 months ago •

Saint Clinton
2 months ago •

Mike Leger
2 months ago •

colapunk
2 months ago •

colapunk
2 months ago •

phle
2 months ago •

Nico Geelen
2 months ago from Fedilab •

Wade Stewart
2 months ago •

Evan Fetherolf
2 months ago •

Peter Sørensen
2 months ago •

Linda
2 months ago •

AstralApteryx
2 months ago •

jjjacq
2 months ago •

Protestation (English)
2 months ago from Protestation •

DoSe
2 months ago •

arthurpizza
2 months ago •

Doris kompániája
2 months ago •

Doris kompániája
2 months ago •

Doris kompániája
2 months ago •

BányászBerci
2 months ago •

BányászBerci
2 months ago •

Carolyn Jewel
2 months ago — (North Bay, California) •