Billy Wilcosky ha rilasciato uno splendido tema per Flarum, che non possiamo non citare o condividere con voi. Si tratta di un tema che vi riporterà indietro nel passato (per chi come me ha una certa età 🙂 ).
Retro Gaming Theme
Ecco un CSS gratuito che puoi copiare e incollare nella sezione "modifica CSS" del pannello amministrazione di Flarum. Almeno per ora, ho deciso di non renderla una vera e propria estensione. Forse se un giorno realizzerò una versione premium. Ma questa versione in realtà non ha molto codice. Non ha senso per me renderlo un'estensione quando si può semplicemente incollarlo nel pannello admin e modificarlo a piacimento.
Step 1
Raccomandiamo di impostare i colori di flarum primario e secondario su #000:
Step 2
Incolla il css seguente nella sezione "modifica CSS"
@import (css) url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
html,
body,
pre,
code,
kbd,
samp {
font-family: 'Press Start 2P', courier;
}
html,
body {
font-size: 12px !important;
}
body a:hover {
text-decoration: none;
}
.Post-body {
font-size: 11px;
}
#app-navigation .Button,
#app-navigation .Button::after {
border: none !important;
border-width: 0 !important;
border-style: none !important;
box-shadow: none !important;
}
.App-titleControl .Button.Dropdown-toggle {
border: none !important;
border-width: 0 !important;
border-style: none !important;
box-shadow: none !important;
font-size: 80%;
}
@media (max-width: 767px) {
.App-primaryControl>.Button,
.App-backControl>.Button {
border: none;
box-shadow: none !important;
border-style: none !important;
}
}
@media (max-width: 767px) {
.App-primaryControl>.Button::after,
.App-backControl>.Button::after {
border: none;
box-shadow: none !important;
border-style: none !important;
}
}
.Button,
.Button--primary,
.Composer,
{
border-image-slice: 2;
border-image-width: 2;
border-image-repeat: stretch;
border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>');
border-image-outset: 2;
position: relative;
display: inline-block;
padding: 0px;
padding-bottom: 5px;
text-align: center;
vertical-align: middle;
cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAzElEQVRYR+2X0Q6AIAhF5f8/2jYXZkwEjNSVvVUjDpcrGgT7FUkI2D9xRfQETwNIiWO85wfINfQUEyxBG2ArsLwC0jioGt5zFcwF4OYDPi/mBYKm4t0U8ATgRm3ThFoAqkhNgWkA0jJLvaOVSs7j3qMnSgXWBMiWPXe94QqMBMBc1VZIvaTu5u5pQewq0EqNZvIEMCmxAawK0DNkay9QmfFNAJUXfgGgUkLaE7j/h8fnASkxHTz0DGIBMCnBeeM7AArpUd3mz2x3C7wADglA8BcWMZhZAAAAAElFTkSuQmCC) 14 0, pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #212529;
background-color: #fff;
border-radius: 0px;
}
@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
.Button {
border-image-repeat: space;
}
}
@supports (-moz-appearance: meterbar) {
.Button {
border-image-repeat: stretch;
}
}
.Button::after {
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
content: "";
box-shadow: inset -4px -4px #adafbc;
}
.Button:hover {
color: #212529;
text-decoration: none;
background-color: #e7e7e7;
}
.Button:hover::after {
box-shadow: inset -4px -4px #adafbc;
}
.Button:focus {
box-shadow: 0 0 0 6px rgba(173, 175, 188, 0.3);
}
.Button:active:not(.is-disabled)::after {
box-shadow: inset 4px 4px #adafbc;
}
.Button:active,
.Button.active,
.open>.Button.Dropdown-toggle {
box-shadow: inherit;
outline: none;
}
.Button:focus {
outline: 0;
}
.Button--disabled,
.Button--disabled:hover,
.Button--disabled:focus {
color: #212529;
cursor: not-allowed;
background-color: #d3d3d3;
box-shadow: inset -4px -4px #adafbc;
opacity: 0.6;
}
.Button input[type="file"] {
position: absolute;
pointer-events: none;
opacity: 0;
}
.Button,
textarea,
input,
select,
.Composer {
border-style: solid;
border-width: 4px;
}
.Button--flat {
background: #fff;
border-radius: 0px;
}
@media (min-width: 768px) {
.NotificationsDropdown .Dropdown-toggle {
padding: 0px;
margin-left: 3px;
}
}
@media (min-width: 768px) {
.NotificationsDropdown .Dropdown-toggle {
padding: 0px;
}
}
@media (min-width: 768px) {
.NotificationsDropdown .Dropdown-toggle .Button-icon {
font-size: 18px;
padding-bottom: 4px;
vertical-align: -1px;
margin: 0;
}
}
.SessionDropdown .Dropdown-toggle {
border-radius: 0px;
margin-left: 20px;
border-radius: 18px;
padding: 5px;
}
.Search-input input {
margin-right: 10px;
}
@media (min-width: 768px) and (min-width: 768px) {
.App-header {
height: 62px;
}
}
@media (min-width: 768px) {
.Header-navigation {
margin-top: 5px;
}
}
@media (min-width: 768px) {
.Header-title {
margin-top: 5px;
}
}
.TagTiles li {
border-radius: 0px !important;
}
.TextEditor-toolbar .Button--icon,
.Composer-controls button {
border: none;
}
.TextEditor-toolbar .Button--icon::after,
.Composer-controls button::after {
box-shadow: none;
}
.TextEditor-controls.Composer-footer button {
padding-left: 5px;
padding-right: 5px;
}
.item-sort button {
padding: 3px;
}
.IndexPage-nav .item-newDiscussion .Button {
overflow: visible;
}
.Button.Navigation-back.Button--icon.hasIcon {
overflow: visible;
}
.Navigation-back .icon {
font-size: 16px;
}
.Avatar {
border-radius: 3px !important;
}
.item-reply,
.item-like {
margin-right: 8px !important;
}
@media (max-width: 767px) {
.SessionDropdown .Dropdown-toggle {
margin-left: 0px;
margin-top: 20px;
border-radius: 0;
}
}
@media (max-width: 767px) {
.FormControl {
font-size: 12px;
}
}
.IndexPage-nav .item-newDiscussion .Button {
margin-left: 5px;
}
.AvatarEditor .Dropdown-toggle {
border-radius: 0;
}
.PostUser-avatar {
line-height: 70px;
}
.Button.SubscriptionMenu-button.SubscriptionMenu-button--null.hasIcon {
padding-right: 5px;
}
Per contribuire:
https://github.com/zerosonesfun/flarum-nes
