custom.css
/* Remove underlay (in cases you don't use a wallpaper in the background */
.underlay {
opacity: 0;
}
/* This removes the placeholder in the post text box*/
.form-post-body::placeholder {
opacity: 0;
}
/* adjustments for the scope buttons */
.ScopeSelector .scope {
margin-right: 0 !important;
}
.ScopeSelector {
font-size: smaller;
margin-right: auto;
}
.button-unstyled {
font-size: 1em !important;
}
.post-status-form .form-bottom {
height: 1.5em !important;
}
.post-status-form .media-upload-icon, .post-status-form .poll-icon, .post-status-form .emoji-icon {
font-size: 1.2em !important;
}
.post-status-form .form-bottom-left {
margin-right: 74px !important;
max-width: 6em !important;
}
/* Language selector */
/* removes all language from the dropdown*/
label#post-language > select > option
{
display: none;
}
/* Choose which languages you wanna see in the selector*/
[value="en"], [value="pt"], [value="es"] {
display: unset !important;
}
.language-selector {
padding-right: 0.5em !important;
}
.edit-form-modal-panel > * > * > * > .visibility-tray {
justify-content: end !important;
}
label.Select select {
padding: 0 1.5em 0 0.4em !important;
}
/* Reduce the custom to 16px emoji size*/
.emoji {
--_still_image-label-scale: 0.5;
--emoji-size: 16px !important;
}
/* Set the reaction emoji size, on the notification panel, to the same size of the emoji everywhere else */
.notification-reaction-emoji {
width: var(--emoji-size) !important;
}
/* avoid clipping the enlarged emoji */
p:has(> .emoji):hover, .content:hover {
overflow: visible !important;
}
/* enlarge emoji on mouse hover*/
.emoji:hover {
transform: scale(3) !important;
transition: 0.5s !important;
z-index: 1000 !important;
vertical-align: top !important;
cursor: none;
}
/* set unicode emoji to regular size*/
.unicode-emoji
{
font-size: 100% !important;
}
.emoji-reaction .reaction-emoji {
max-height: 1em !important;
margin-right: 0.5em !important;
}
/* fix instance panel padding and margins (using the same values as in the other panels), this requires adding the class 'instance-panel' to the parent element in 'panel.html' */
.instance-panel{
padding: 0 1em 1em 1em;
}
/* remove duplicate of the instace panel*/
.column-inner > .instance-specific-panel {
display: none;
}
/* remove staff panel*/
.staff-panel {
display: none;
}
/* Terms of Service panel this requires adding the class 'tos' to the parent element and adding the title (as shown in my example) in 'terms-of-service.html' */
.column-inner .panel-body {
display: table;
}
.tos-content {
display: table-footer-group;;
}
.tos-header {
display: table-header-group;
padding: 0 1em 1em 1em;
}
.tos {
margin: 1em
}
panel.html
<div class="panel-heading timeline-heading base02-background"><div class="title">Instance</div></div>
<div class="instance-panel">
<h2>Welcome to <a href="https://akkoma.dev" target="_blank">Akkoma</a>!</h2>
<h3>Front-ends</h3>
<ul>
<li><a href="/">Akkoma</a></li>
<li><a href="/web/">Mastodon</a></li>
<li><a href="/akkoma/swaggerui/">API</a></li>
<li><a href="/akkoma/frontend/">FE Picker</a></li>
</ul>
<h3><a href="/about">About</a> this instance.</h3>
</div>
terms-of-service.html
<div class="panel-heading timeline-heading base02-background tos-header"><div class="title">Terms of Service</div></div>
<div class="tos">
<h1>Welcome to 'your instance'</h1>
<hr>
<h3>Our guidelines</h3>
<ul>
<li>Hate speech is <u>not</u> tolerated.</li>
<li>Lewd or violent content is always tagged as sensitive.</li>
<li>No restrictions on Subjects/Content Warnings.</li>
<li>No restrictions on the scopes.</li>
<li>No spamming nor any behavior that bother others.</li>
<li>No bots.</li>
<li>No promotional content.</li>
</ul>
<h3>Registrations are open/closed.</h3>
</div>
