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;
}
.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;
}
/* 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.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: #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;
}
}
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;
}
/* 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;
}
}
Tap tap tap
like this
I’m going to try a cooking experiment now!
like this
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.
Sunshine
in reply to Kai Chang 張文愷 • •like this
Eddie Trax and Kai Chang 張文愷 like this.
Kai Chang 張文愷
in reply to Sunshine • •