Wafrn Carrot Edition is a theme for the federated social media site, Wafrn! This theme contains:
- Many Carrots! such as the background.
- Green, Purple and Orange as priamry colors!
- Red for many boxs, such as the ^'s
- Non styled notes because you can't style them!!!!!!!!!
- Box shadows Everywhere!
- Really basic animated elements when you hover over things!
- Carrots!
It's bad! I know right?
the desktop dashboard
le mobiles v
Paste this into Wafrn theme editor:
/* VARIABLES */ :root { /* ELEMENT VARIABLES */ --main-bgcolor: #fcac33; --main-textcolor: #a034fa; --container-bordercolor: #88a8e3; --link-textcolor: #38fef1; --link-textcolor-hover: #38fef1; --link-textcolor-visited: #fad1f9; --button-bgcolor: #ff4242; --button-bgcolor-hover: #4fdf92; --button-accent-color: #69f0ae; --button-accent-color-hover: #69f0ae; --element-bgcolor: #1fc242; --username-textcolor: #30ff00; --username-textcolor-hover: #38fef1; --url-textcolor: #38fef1; --popup-textcolor: black; --popup-bgcolor: #424242; --color-trans: 0.37s cubic-bezier(0.77, 0, 0.23, 1); --image-transoff: 0.37s cubic-bezier(0.88, 0.52, 0.48, 1); --image-trans: 0.37s cubic-bezier(0.81, -0.19, 0.27, 0.34); } /* BACKGROUND */ .mat-drawer-content { background-color: var(--main-bgcolor) !important; background-image:url("https://clipart-library.com/img1/994621.png"), url("https://lilysen.neocities.org/wafrncarrotedition.png"); } /* LINKS */ a { color: var(--link-textcolor); transition: var(--color-trans); } a:visited { color: var(--link-textcolor-visited); } a:hover { color: var(--link-textcolor-hover); transition: var(--color-trans); } a:active { color: var(--link-textcolor-hover); } /* BUTTONS - these may be overwritten by the class of the button, see below */ button { background-color: var(--button-bgcolor); color: var(--main-textcolor); border-color: var(--button-accent-color); border-style: solid; border-width: ppx; border-radius: 3px; color: var(--main-textcolor); transition: var(--color-trans); } button:hover { background-color: var(--button-bgcolor-hover); color: var(button-accent-color); border-color: var(--button-accent-color-hover); border-style: solid; border-width: 4px; border-radius: 3px; color: var(--main-textcolor); transition: var(--color-trans); } button:active { background-color: var(--button-bgcolor-hover); color: var(button-accent-color); border-color: var(--button-accent-color-hover); border-style: double; border-width: 8px; border-radius: 6px; color: var(--main-textcolor); transition: var(--color-trans); } /* SIDE MENU */ mat-drawer.side-menu { box-shadow: 2px 5px purple; border:orange double 2px; } // never renders usually img[alt="instance logo" ] { background-image:url("https://lilysen.neocities.org/wafrncarrotedition.png"); } mat-drawer.side-menu hr { color: var(--main-textcolor); box-shadow: 2px 5px purple; border:orange double 2px; } mat-nav-list { color: var(--main-textcolor); box-shadow: 12px 15px red; border:purple solid 4px; } mat-nav-list app-menu-item { max-width: 57%; color: var(--username-textcolor); transition: var(--color-trans); display:flex; margin-left: auto; margin-right: auto; } /* DASHBOARD TITLE */ div.wafrn-container.mx-1 { display: block; box-shadow: 2px 5px purple; border:orange double 2px; background-color: var(--main-bgcolor); } div.wafrn-container.mx-1 h3 { display: inline-block; font-family: sans-serif; } /* BUTTONS - use these i think */ .mat-mdc-unelevated-button.mat-primary { background-color: var(--button-bgcolor); border-color: var(--button-accent-color); color: var(--main-textcolor); box-shadow: 2px 5px purple; border:orange double 2px; transition: var(--color-trans); } .mat-mdc-unelevated-button.mat-primary:hover { background-color: var(--button-bgcolor-hover); border-color: var(--button-accent-color-hover); box-shadow: 12px 15px red; border:purple solid 4px; color: var(--main-textcolor); border-width: 4px; transition: var(--color-trans); } .mat-mdc-unelevated-button { background-color: var(--button-bgcolor); border-color: var(--button-accent-color); box-shadow: 2px 5px purple; border:orange double 2px; border-width: 0px; color: var(--main-textcolor); transition: var(--color-trans); } .mat-mdc-unelevated-button:hover { background-color: var(--button-bgcolor-hover); box-shadow: 12px 15px red; border:purple solid 4px; border-color: var(--button-accent-color-hover); color: var(--main-textcolor); border-width: 0px; transition: var(--color-trans); } button[aria-label="Go back to the dashboard"] { background-color: var(--button-bgcolor); border-color: var(--button-accent-color); font-size:40; color: red; transition: var(--color-trans); } button[aria-label="Go back to the dashboard"]:hover { background-color: var(--button-bgcolor-hover); border-color: var(--button-accent-color-hover); font-size:80; color: red; color: var(--main-textcolor); transition: var(--color-trans); } /* LOADING - not quite sure this works */ mat-spinner { width: 42px; height: 42px; } circle { color: #8531a9 !important; stroke-dasharray: 77px; stroke-width: 33px; } p#if-you-see-this-load-more-posts { color: var(--main-textcolor); } /* POPUP TOOLTIPS */ .mdc-tooltip__surface { background-color: var(--popup-bgcolor) !important; color: var(--popup-textcolor) !important; border-radius: 2px; } /* UNIVERSAL WAFRN CONTAINER */ .wafrn-container { background-color: var(--element-bgcolor) !important; color: var(--main-textcolor); border-radius: 1px; border-width: 4px; border-style: dashed; border-color: var(--container-bordercolor); box-shadow: 12px 39px purple; } /* PROFILE */ app-view-blog mat-card.wafrn-container {} app-view-blog img[alt="user avatar"] {} /* UNFOLLOW BUTTON */ .mat-mdc-unelevated-button.mat-warn { color: var(--main-textcolor); background-color: #f44336; transition: var(--color-trans); } .mat-mdc-unelevated-button.mat-warn:hover { background-color: #f44336; transition: var(--color-trans); } /* FOLLOW COUNT */ div.follow-counts { border-color: var(--button-accent-color); font-size:40; color: red; } /* TEXT EDITOR */ .ql-snow > .ql-editor { background-color: var(--element-bgcolor); color: var(--main-textcolor) !important; max-height: 600px; } .ql-snow > .ql-editor:focus { background-color: var(--element-bgcolor); color: var(--main-textcolor); } /* POSTS */ /* POST CONTAINER */ .mat-mdc-card { color: var(--main-textcolor); border-radius: 2px; box-shadow: 12px 39px purple; border-color: var(--button-accent-color); border:inset orange 4px; box-shadow: 4px 12px lightcyan; } /* DIVIDER LINE */ app-post hr { color: var(--element-bgcolor); border: 10px white solid; box-shadow: 4px 12px lightcyan; } /* POSTER INFO */ .original-poster-name { color: var(--username-textcolor) !important; border-color: var(--button-accent-color); font-size:40; color: red; transition: var(--color-trans); } .original-poster-name:hover { color: var(--username-textcolor-hover) !important; transition: var(--color-trans); } .original-poster-url { color: var(--url-textcolor); font-family: monospace; } .avatar { height: 45px; width: 45px; } .avatar img { border-radius: 3px; height: 45px; width: 45px; } .user-name { color: var(--username-textcolor) !important; transition: var(--color-trans); } .user-name:hover { color: var(--username-textcolor-hover) !important; transition: var(--color-trans); } span.user-url { color: var(--url-textcolor); font-family: monospace; } /* FOLLOW BUTTON */ button.follow-button { background: none !important; color: #69f0ae !important; border: none !important; transition: var(--color-trans); } button.follow-button:hover { background: none !important; color: var(--link-textcolor-hover) !important; border: 10px white solid; transition: var(--color-trans); } .mat-mdc-button-persistent-ripple { display: none; } /* POST DATE */ /* div.date-line { border-color: var(--button-accent-color); font-size:40; color: red; } svg.fa-globe { border-color:grey; border-style:solid; border-color: var(--button-accent-color); font-size:40; color: red; } */ /* POST SHARE */ app-post-actions button:hover { background: none !important; box-shadow: 12px 39px purple; border-width: 3px; } svg.fa-share-nodes { color: var(--button-accent-color); box-shadow: -2px 3px purple; border-width: 3px; border:blue double 1px; transition: var(--color-trans); } svg.fa-share-nodes:hover { color: var(--button-accent-color-hover); box-shadow: 12px 15px red; border:blue double 4px; transition: var(--color-trans); } svg.fa-chevron-down { color: var(--button-accent-color); box-shadow: 2px 5px red; border:orange double 2px; transition: var(--color-trans); } svg.fa-chevron-down:hover { color: var(--button-accent-color-hover); box-shadow: 12px 15px red; border:orange double 4px; transition: var(--color-trans); } /* CONTENT WARNING */ #fragment-content-warning { color: var(--main-textcolor); background-color:grey; border-width: 3px; border:grey solid 4px; font-family: monospace; } /* div.fragment-content-warning div.fragment-content {} div.fragment-content-warning button {} */ /* POST TEXT */ div.wafrn-text-default { color: var(--main-textcolor); font-family: Georgia, serif; } /* MENTIONS */ a.mention { color: var(--username-textcolor); transition: var(--color-trans); } a.mention:hover { color: var(--username-textcolor-hover); transition: var(--color-trans); } /* MEDIA CONTAINER */ app-wafrn-media { max-width: 57%; display: block; margin-left: auto; margin-right: auto; } /* IMAGES */ app-wafrn-media img { filter: brightness(0.7); transition: var(--image-transoff); } app-wafrn-media img:hover { filter: brightness(1); transition: var(--image-trans); } /* MEDIA DESCRIPTION */ app-wafrn-media div.media-description { background-color: var(--element-bgcolor) !important; border-radius: 0px; font-family: monospace; font-size: 11px; } /* VOTING */ /* .mdc-linear-progress__bar-inner {} .mdc-linear-progress__buffer-bar {} */ /* TAGS */ a.tag { background-color: #8531a9 !important; border:double 4px orange; color: var(--link-textcolor) !important; box-shadow: 12px 15px red; transition: var(--color-trans); font-family: ariel; } a.tag:hover { color: var(--link-textcolor-hover) !important; border:dashed 2px orange; transition: var(--color-trans); } /* container of quoted post */ div.quoted-post { border-width: 2px; border-color: var(--button-accent-color); border-style: dotted; box-shadow: none; } /* REACTS */ #emoji-reactions button { background-color: var(--element-bgcolor); border-width: 0px !important; transition: var(--color-trans); fill: var(--main-textcolor); } #emoji-reactions button:hover { background-color: var(--button-bgcolor-hover); transition: var(--color-trans); fill: var(--main-textcolor); } /* #emoji-reactions .mat-mdc-tooltip-trigger {} #emoji-reactions .mat-mdc-tooltip-trigger:hover {} */ app-emoji-react svg { fill: var(--main-textcolor); transition: var(--color-trans); } app-emoji-react svg:hover { fill: var(--link-textcolor-hover); transition: var(--color-trans); } /* div.emojireact-overlay {} */ /* POST ACTIONS */ app-post hr > div a { box-shadow: 2px 5px purple; border:orange double 2px; } app-post hr > div a:hover { box-shadow: 12px 15px red; border:purple solid 4px; } fa-icon[mattooltip="Quote woot"] { color: var(--main-textcolor); box-shadow: 2px 5px purple; border:orange double 2px; transition: var(--color-trans); } fa-icon[mattooltip="Quote woot"]:hover { color: var(--main-textcolor); box-shadow: 12px 15px red; border:purple solid 4px; transition: var(--color-trans); } fa-icon[mattooltip="Quick rewoot"] { color: var(--main-textcolor); box-shadow: 2px 5px purple; border:orange double 2px; transition: var(--color-trans); } fa-icon[mattooltip="Quick rewoot"]:hover { color: var(--main-textcolor); box-shadow: 12px 15px red; border:purple solid 4px; transition: var(--color-trans); } fa-icon[mattooltip="Delete rewoot"] { color: var(--main-textcolor); box-shadow: 2px 5px purple; border:orange double 2px; transition: var(--color-trans); } fa-icon[mattooltip="Delete rewoot"]:hover { color: var(--main-textcolor); box-shadow: 12px 15px red; border:red solid 4px; transition: var(--color-trans); } fa-icon[mattooltip="Reply woot"] { color: var(--main-textcolor); box-shadow: 2px 5px purple; border:orange double 2px; transition: var(--color-trans); } fa-icon[mattooltip="Reply woot"]:hover { color: var(--main-textcolor); box-shadow: 12px 15px red; border:purple solid 4px; transition: var(--color-trans); } fa-icon[mattooltip="Like woot"] { color: var(--main-textcolor); box-shadow: 2px 5px purple; border:orange double 2px; transition: var(--color-trans); } fa-icon[mattooltip="Like woot"]:hover { color: var(--main-textcolor); box-shadow: 12px 15px red; border:purple solid 4px; transition: var(--color-trans); } fa-icon[mattooltip="Remove like"] { color: var(--main-textcolor); box-shadow: 2px 5px purple; border:orange double 2px; transition: var(--color-trans); } fa-icon[mattooltip="Remove like"]:hover { color: var(--main-textcolor); box-shadow: 12px 15px red; border:purple solid 4px; transition: var(--color-trans); } fa-icon[mattooltip="Delete woot"] { color: var(--main-textcolor); box-shadow: 2px 5px red; border:red double 2px; transition: var(--color-trans); } fa-icon[mattooltip="Delete woot"]:hover { color: var(--main-textcolor); box-shadow: 12px 15px red; border:purple solid 4px; transition: var(--color-trans); }
It is not perfect, nor butifual??? have fun :)