---------CustomCSS-Mastodon---2023-Dec-XXI--
<![CDATA[
@import url(https://34.si/402/1.css);
/*--Backup--https://ry3yr.github.io/OSTR/release/0mine/documents/pb.todon.de.css --*/
.compose-form::after {
display: none !important;
}
body
{
--font: sans-serif;
--toot-font: var(--font);
/* Modify if different from the interface font */
--actionable: #fca3b7;
--actionable-hover: #fca3b7;
--text: #7f00ff;
--text-secondary: rgba(207,74,114,.6);
--background: rgba(255,255,255,0);
--background-alt: rgba(240,248,255,1);
--body: rgba(255,255,255,0);
/* image URLs and gradints can also be placed here */;
}
.status-link {
color: #fca3b7 !important;}
body,
.tabs-bar__wrapper,
.column > .scrollable,
.detailed-status,
.detailed-status__action-bar,
.column-header__back-button,
.admin-wrapper .sidebar-wrapper__inner,
.search__input,
.account__header,
.account__section-headline, .notification__filter-bar {
background: rgba(173, 216, 230, .2) !important;}
/*custom publish box*/
.compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input {
background: linear-gradient(to right, #ffffff, #f0f8ff);}
.compose-form .compose-form__modifiers .compose-form__uploads-wrapper {
background: #ffdbe0;}
.compose-form .compose-form__buttons-wrapper {
background: #ffdbe0;}
/* FONTS */
body,
body.system-font
{
font-family: var(--font);
}
.status__content
{
font-family: var(--toot-font);
}
.reply-indicator__content p, .status__content p
{
font-size: 18px;
line-height: 1.3;
}
/* PRIMARY COLORS */
a.status-link,
.public-layout .public-account-bio .account__header__fields a,
.reply-indicator__content a, .status__content a,
.column-back-button,
.account__header
.account__header__username,
.account__header__fields a,
.emoji-mart-anchor-selected,
.column-header>.column-header__back-button,
.column-link:hover,
.reply-indicator__content .status__content__spoiler-link, .status__content
.status__content__spoiler-link,
.text-icon-button.active
{
color: var(--actionable);
}
a.status-link:focus,
a.status-link:hover,
.public-layout .public-account-bio .account__header__fields a:hover,
.reply-indicator__content a, .status__content a:hover,
.column-back-button:hover,
.account__header .account__header__username:hover,
.account__header__fields a:hover,
.notification__display-name:hover,
.column-header>.column-header__back-button:hover,
.reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link:hover
{
color: var(--actionable-hover);
}
.button,
.admin-wrapper .sidebar ul ul a.selected,
.simple_form .block-button, .simple_form .button, .simple_form button,
.public-layout .public-account-header__tabs__tabs .counter.active:after,
.button.logo-button,
.emoji-mart-anchor-bar,
.privacy-dropdown__option.active, .privacy-dropdown__option:hover,
.privacy-dropdown.active .privacy-dropdown__value.active
{
background-color: var(--actionable);
}
.public-layout .public-account-header__tabs__tabs .counter.active:after
{
border-bottom-color: var(--actionable);
}
.button:hover,
.admin-wrapper .sidebar ul ul a.selected:hover,
.simple_form .block-button:hover, .simple_form .button:hover, .simple_form button:hover,
.button.logo-button:hover
{
background-color: var(--actionable-hover);
}
.simple_form input[type=email]:active, .simple_form input[type=email]:focus, .simple_form input[type=number]:active, .simple_form input[type=number]:focus, .simple_form input[type=password]:active, .simple_form input[type=password]:focus, .simple_form input[type=text]:active, .simple_form input[type=text]:focus, .simple_form textarea:active, .simple_form textarea:focus
{
border-bottom-color: var(--actionable-hover);
}
/* BASE COLORS */
body,
body.app-body,
.ui
{
background: var(--body);
color: var(--text);
}
.public-layout .public-account-header__tabs__tabs .counter .counter-number,
.reply-indicator__content, .status__content,
.muted .status__content a, .muted .status__content p, .muted .status__display-name strong,
.status__prepend,
.account__action-bar__tab strong,
.public-layout .public-account-header__tabs__name h1,
.public-layout .public-account-header__extra__links a strong
{
color: var(--text);
text-shadow: none;
}
.public-layout .public-account-header__tabs__tabs .counter,
.account__section-headline a.active,
.account__section-headline a,
.account__display-name strong, .status__display-name strong,
.status__display-name,
.status__relative-time,
.account__header__fields dt,
.account__header__fields dd,
.public-layout .public-account-bio .roles, .public-layout .public-account-bio__extra,
.icon-button,
.public-layout .footer,
.public-layout .footer h4,
.public-layout .footer ul a,
.public-layout .footer .grid .column-2 h4 a,
.status__prepend .status__display-name strong,
.notification__message,
.account__action-bar__tab>span,
.account__header .account__header__fields dd,
.account__header .account__header__fields dt,
.navigation-bar strong,
.navigation-bar,
.detailed-status__display-name strong,
.detailed-status__display-name span, .detailed-status__display-name strong,
.flex-spacer, .getting-started, .getting-started__wrapper,
.getting-started__footer p,
.getting-started__footer a,
.column-link,
.public-layout .public-account-header__tabs__name h1 small,
.public-layout .public-account-header__extra__links a
{
color: var(--text-secondary);
}
.muted
{
opacity: .6;
transition: all .2s ease-in-out;
}
.muted:hover
{
opacity: 0.2;
}
.drawer__inner,
.drawer__header,
.account__section-headline,
.column-header,
.column-header__button,
.column-header__button:hover,
.column-back-button,
.account__header,
.drawer__tab,
.drawer__tab:hover,
.account__header .account__header__fields,
.drawer__header a:hover,
.search__input,
.status.status-direct,
.notification.notification-follow.focusable,
.focusable:focus,
.detailed-status,
.detailed-status__action-bar,
.column-link__badge, .column-subheading,
.column-link,
.column-link:hover,
.public-layout .public-account-header__bar
{
background: var(--background-alt);
color: var(--text-secondary);
}
.public-layout .header,
.public-layout .public-account-header__bar:before,
.activity-stream .entry,
.public-layout .public-account-bio,
.column>.scrollable,
.flex-spacer, .getting-started, .getting-started__wrapper,
.column-link,
.reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link
{
background: var(--background);
}
.public-layout .public-account-header__bar .avatar img
{
border-color: var(--background);
}
.account__header__fields dt,
.account__header .account__header__fields dt,
.account__header>div,
.account__header .account__header__fields dd
{
background: none;
}
.public-layout .public-account-header__tabs__tabs .counter,
.public-layout .public-account-header__tabs__tabs .counter:after,
.account__section-headline,
.account__action-bar__tab,
.account__action-bar,
.account__header .account__header__fields dl
{
border-color: rgba(100,100,100,.1);
}
.public-layout .public-account-header__tabs__tabs .counter:hover:after,
.account__header__fields dl,
.status,
.account__header__fields,
.status.account__header .account__header__fields dl,
.account,
.detailed-status__action-bar,
.public-layout .public-account-header__extra .public-account-bio .account__header__fields
{
border-color: rgba(207,74,114,.6);
}
.account__section-headline a.active:after,
.account__section-headline a.active:before
{
border-color: transparent transparent rgba(100,100,100,.2);
}
::-webkit-scrollbar-track
{
background: var(--background-alt) !important;
}
::-webkit-scrollbar-thumb
{
background-color: rgba(0,0,0,.1) !important;
}
/* REMOVE ELEMENTS*/
.drawer__inner__mastodon,
.hero-widget,
.public-layout .header
{
display: none;
}
.public-layout
{padding-top: 0;}
/* ENHANCEMENTS */
.activity-stream
{
overflow: visible;
}
.activity-stream .entry
{
transition: all .2s ease-in-out;
}
@media screen and (min-width: 600px)
{
.activity-stream .entry:hover
{
transform: scale(1.025);
box-shadow: 0 1px 6px rgba(0,0,0,.3);
z-index: 100;
}
}
/*Stars to hearts*/
.notification__favourite-icon-wrapper .star-icon,
.star-icon.active,
.star-icon:hover,
.star-icon:active
{color: crimson !important;}
.fa-star:before {content: "♥";}
/*emoji zoom*/
.emojione:hover
{
width: 50px !important;
height: 50px !important;
transition: all 0.3s ease-in-out !important;
}
.emojione
{
transition: all 0.2s ease-in-out;
}
/*===Mastodon Logo Change===*/
}
.logo-container h1 a {
background: transparent url('https://alceawisteria.codeberg.page/images/alceawisterialogo.png') no-repeat bottom/100% auto !important;
padding: 79px;
}
.public-layout .header .brand {
background: transparent url(https://alceawisteria.codeberg.page/images/alceawisterialogo.png) no-repeat center/160% auto !important;
margin-top: 1px;
margin-left: 10px;
}
.landing-page__logo {
background: transparent url(https://alceawisteria.codeberg.page/images/alceawisterialogo.png) no-repeat bottom/100% auto !important;
padding: 30px;
}
@media(min-width:800px) {
a[href="/"]:not(.logofont):not(.button) {
background: transparent url(https://alceawisteria.codeberg.page/images/alceawisterialogo.png) no-repeat center/75% auto !important;
box-sizing: border-box;
display: block;
margin-left: -24px;
margin-top: 1px;
}
}
@media(max-width:800px) {
a[href="/"]:not(.button) {
background: transparent url(https://alceawisteria.codeberg.page/images/alceawisterialogo.png) no-repeat top/50% auto !important;
box-sizing: border-box;
display: block;
margin-left: -160px;
margin-top: 8px;
}
}
.brand {
background: transparent url(https://alceawisteria.codeberg.page/images/alceawisterialogo.png) no-repeat top/170% auto !important;
padding: 60px;
width: 90px;
}
.public-layout .footer .brand {
display: inline-block;
padding: 30px;
}
.landing-page h1 small:after {
content: "A cute Mastodon server!";
visibility: visible;
display: block;
position: absolute;
}
img[alt="Mastodon"],
.landing-page h1 small,
a[href="/"] svg {
visibility: hidden;
}
.modal-layout__mastodon,
.public-layout .header .brand svg,
.brand__tagline,
a[href="https://joinmastodon.org/"],
.landing-page__forms .button[href="https://joinmastodon.org"],
.landing__brand svg,
.public-layout .footer .brand svg,
.logo-container h1 svg {
display: none;
}
a.logofont {
background: transparent !important;
}
.button.logo-button svg {
display: none;
}
.logo-container > h1:nth-child(1) > a:nth-child(1) {
background-size: 160% !important;
}
.logo-container {
margin: 0 !important;
}
.column-title .logo > use {
visibility: hidden;
}
.column-title .logo {
background: transparent url(https://alceawisteria.codeberg.page/images/alceawisterialogo.png) no-repeat top/100% auto !important;
}
.column-actions {
padding: 40px;
}
.column-actions__background {
display: none;
}
.scrollable.follow-recommendations-container {
background-image: url(https://alceawisteria.codeberg.page/images/alceawisterialogo.png);
background-repeat: no-repeat;
background-position: top;
background-size: 20%;
background-position-y: 10px;
}
.follow-recommendations-container > .column-title > svg {
visibility: hidden;
}
.logo-container h1 {
display: auto;
}
b {
font-weight: bold !important;
}
#web a {
background: transparent !important;
margin: 0;
}
/*===Mastodon Logo Change===*/
/*Make Avatars / pfp circular*/
.account__avatar {border-radius: 100%;z-index: 1;}
/*darkmode enabler*/
@media (prefers-color-scheme: dark) {
/*Dark Mode CSS Start*/
body,
.tabs-bar__wrapper,
.column > .scrollable,
.detailed-status,
.detailed-status__action-bar,
.column-header__back-button,
.admin-wrapper .sidebar-wrapper__inner,
.search__input,
.account__header,
.account__section-headline,
.notification__filter-bar {
background: rgba(207, 74, 114, .6) !important;
}
.column-header > button,
.column-back-button,
.column-header > button,
.column-header__button,
.column-header {
background: none !important;
}
.tabs-bar__wrapper {
background: rgba(0, 0, 0, 0.5) !important;
backdrop-filter: blur(10px) saturate(200%);
}
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input {
color: inherit !important;
background: none !important;
}
.compose-panel .compose-form__autosuggest-wrapper {
background-color: rgba(255, 255, 255, 0.06) !important;
}
.compose-form .compose-form__buttons-wrapper,
.compose-form .compose-form__modifiers {
background: none !important;
}
.compose-form .emoji-picker-dropdown {
display: true;
}
/* Additional rule to override ".btn" and ".button" classes */
.btn,
.button {
background-color: #7f00ff!important;
border:3px outset #ffcfdf!important;
color:black!important;
border-radius: 15px !important;
}
.btn:hover,
.button:hover {
border-style:outset !important;
color:black!important;
}
/*Additional rule end*/
}
/*Darkmode CSS End*/
/*Red Line Around #noalttext content*/
a.status-link:not(.mention) {
text-decoration: underline;
}
.media-gallery__item-thumbnail img:not([alt]),
.audio-player__canvas:not([title]),
.video-player video:not([title]),
.media-gallery__gifv video:not([title]),
.media-gallery__item-thumbnail img[alt=""], .audio-player__canvas[title=""], .video-player video[title=""], .media-gallery__gifv video[title=""]
{
border: 3px dashed rgba(251, 47, 47, 0.5);
box-sizing: border-box;
}
/* Make property fields inline-blocks instead of blocks, allowing them
to sit next to each other instead of line breaking between them. */
.account__header__fields dl dt,
.account__header__fields dl dd {
display: inline-block;
}
/*Hide stupid Toast error messages*/
.notification-bar {
display: none !important;
}
/* General button appearance */
.btn,
.button {
/*background-color: lightpink !important;*/
border:3px outset #ffcfdf !important;
color:black!important;
border-radius: 15px !important;
}
.btn:hover,
.button:hover {
border-style:inset!important;
color:black!important;
}
/* Make Header Fields 2x2 */
.account__header__fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
}
.account__header__fields a {
animation: colorAnimation 6s infinite;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
max-width: 13ch;
width: 100%;
box-sizing: border-box;
}
.account__header__fields::before {
content: "";
align-self: stretch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@keyframes colorAnimation {
0% { color: blue; }50% { color: violet; }100% { color: darkviolet; }}
]]></plaintext></body>