CSS snippets for SBS

The website allows you to customize the styling of basically anything you want. If you've come up with something cool that you think people will like, post it here with a short description of what it does. A screenshot would be nice too.

Get rid of the send button in chat:

section.chat #sendpane input[type="submit"] { display: none !important; } section.chat #sendpane draw-area { right: 2px !important; }

Sorry if this is necroposting, but I found a cool and very simple way to have a sticky header on modern browsers:

header {
 position: sticky;
 top: 0;
 z-index: 999;
}

/*'Solarized Dark theme for [code] blocks *
 *'- Y                                    */
.bbcode code, .bbcode code * {
    /*'default text color/background color */
    color: #839496; /*'base0 */
    background-color: #002b36; /*'base03 */
}
.bbcode code .keyword {
    color: #268bd2; /*'blue */
}
.bbcode code .number {
    color: #2aa198; /*'cyan */
}
.bbcode code .label {
    color: #d33682; /*'magenta */
}
.bbcode code .function {
    /*'builtin functions (CHR$,MID,etc.) */
    color: #859900; /*'green */
}
.bbcode code .variable {
    /*'user-defined vars and function calls */
    color: #93a1a1; /*'base2 */
}
.bbcode code .def + .variable {
    /*'user function definitions */
    /* DEF [FOO] */
    color: #b58900; /*'yellow */
}
.bbcode code .comment {
    color: #657b83; /*'base00 */
    background-color: #073642; /*'base02 */
    /*'when applying a background-color, this *
     *'eliminates uncolored gap between lines */
    display: inline-block;
    font-style: italic;
}
.bbcode code .operator {
    color: #859900; /*'green */
}
.bbcode code .equals {
    /*'assignment operator */
    color: #93a1a1; /*'base1 */
}
.bbcode code .string {
    color: #657b83; /*'base00 */
}

Sample: https://smilebasicsource.com/editor?type=css

img.smallavatar, img.bigavatar, #openUserHomeAvatar img {
	width: 0;
	height: 0;
	
	background: url("//kland.smilebasicsource.com/i/cqdjb.png");
	background-size: cover;
	
	box-sizing: content-box;
}

img.smallavatar {
	padding: 0 3.5rem 3.5rem 0;
}

img.bigavatar {
	padding: 0 100px 100px 0;
}

#openUserHomeAvatar img {
	padding: 0 8rem 8rem 0;
}

@media (min-width: 500px) {
	img.bigavatar {
		padding: 0 150px 150px 0;
	}
}

@media (min-width: 700px) {
	img.bigavatar {
		padding: 0 200px 200px 0;
	}
}

SmileBASIC Source Early November 2018 Simulator CHAOS, CHAOS... Edit: just saw that the image URL has some BB Code around it, please disregard that. edit: thank 12me21; Edit: Want to be able to know who's who, but still want this chaos? Use my brand-new Site JS!

//' Get all profile pictures.
var pfp = document.querySelectorAll("img.smallavatar, img.bigavatar, #openUserHomeAvatar img");

//' For each profile picture, move the main picture to the background, and swap the src picture for a Ralsei picture.
for (var i = 0; i < pfp.length; i++) {
	pfp[i].style.backgroundImage = "url(" + pfp[i].src + ")";
	pfp[i].style.backgroundSize = "cover";
	pfp[i].src = "//kland.smilebasicsource.com/i/vggbp.png";
}

^{Honestly I'm having way too much fun with this Ralsei profile picture thing}

Have an aesthetic circular icon in chat.

#messagepane ol li figure img {
    border-radius: 50%;
}

img.smallavatar, img.bigavatar, #openUserHomeAvatar img {
    width: 0;
    height: 0;
    
    background: url("//kland.smilebasicsource.com/i/cqdjb.png");
    background-size: cover;
    
    box-sizing: content-box;
}

img.smallavatar {
    padding: 0 3.5rem 3.5rem 0;
}

img.bigavatar {
    padding: 0 100px 100px 0;
}

#openUserHomeAvatar img {
    padding: 0 8rem 8rem 0;
}

@media (min-width: 500px) {
    img.bigavatar {
        padding: 0 150px 150px 0;
    }
}

@media (min-width: 700px) {
    img.bigavatar {
        padding: 0 200px 200px 0;
    }
}

SmileBASIC Source Early November 2018 Simulator CHAOS, CHAOS... Edit: just saw that the image URL has some BB Code around it, please disregard that. I can't remove it and it doesn't show up in the preview.

yeah that's a bug with our awful bbcode parser. If you change the url to //kland.smilebasicsource.com/i/cqdjb.png it should work.

More custom CSS! Here's some funkier user-ranks (those bracket things, or not anymore as I changed them to capsule kinda things)

user-rank[data-level] {
    border-radius: 8rem; /*.5em*/
    padding: 0 .75rem;
    
    color: white;
    
    font-size: .75em;
}
/*[data-poster="TheV360"] { display: none !important; }*/
user-rank::before, user-rank::after { content: none; }
user-rank[data-level="1"] { color: black; background-color: #777; }
user-rank[data-level="2"] { color: white; background-color: #00779d; }
user-rank[data-level="3"] { color: white; background-color: #128409; }
user-rank[data-level="4"] { color: white; background-color: #6f6aac; }
user-rank[data-level="5"] { color: black; background-color: #dd6e86; }
user-rank[data-level="6"] { color: black; background-color: #db8d10; }
user-rank[data-level="7"] { color: white; background-color: #5c257c; }
user-rank[data-level="-1"] { color: black; background-color: #777; }

And a small style for the code tag that fixes tab spacing!

code {
    tab-size: 2em;
    -o-tab-size: 2em;
    -moz-tab-size: 2em;
    -webkit-tab-size: 2em;
}

Also, a cool blinky underscore for the nav tabs!

nav ul li a {
    font-family: monospace !important;
}
nav ul li.active a::after {
    content: "_";
    
    animation: blink_underscore 1s linear infinite;
}
@keyframes blink_underscore {
    0% { opacity: 1; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

How do I remove all profile pictures?

Here's a basic thing for that. Doesn't cover everything, but it works in forum threads and most other places. Now it does cover everything.

.smallavatar, .bigavatar, #openUserHomeAvatar img, post-count {
    display: none !important;
}

Here's a thing that certainly exists now You can also check your score in the user tab. CSS

#ralsei-point-total {
    background-image: url("//kland.smilebasicsource.com/i/oxpjh.png");
    
    cursor: pointer;
}
.score-toast {
    position: absolute;
    
    border-radius: .25rem;
    padding: .5rem;
    
    color: white;
    background-color: #128409;
    
    animation: 2s linear 1 toastFly;
}
@keyframes toastFly {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-32px);
        opacity: 0;
    }
}

JS

(function(){
var storage = window.localStorage;

// No tampering, unless you hate fun
if (!storage.getItem("ralsei-score")) storage.setItem("ralsei-score", 0);

var userNav = document.querySelector("user-nav");
var thing = document.createElement("a");
thing.id = "ralsei-point-total";
thing.title = "Ralsei Point Total";
thing.innerHTML = "Ralsei Point Total";
thing.addEventListener("click", (e)=>{
    alert("You've accumulated " + storage.getItem("ralsei-score") + " Ralsei points. Why?");
});
thing = userNav.insertBefore(thing, document.getElementById("sign-out"));

// Get all profile pictures.
var pfp = document.querySelectorAll("img.smallavatar, img.bigavatar, #openUserHomeAvatar img");

var ev = function(e) {
    ralseiify(e);
    e.target.removeEventListener("click", ev, false);
};

// For each profile picture, move the main picture to the background, and swap the src picture for a Ralsei picture.
for (var i = 0; i < pfp.length; i++) {
    eventThingy(pfp[i]);
}

function ralseiify(e) {
    var scoreElement;
    
    // Edit profile picture
    e.target.style.backgroundImage = "url(" + e.target.src + ")";
    e.target.style.backgroundSize = "cover";
    if (Math.random() > 0.5) e.target.style.transform = "scaleX(-1)";
    e.target.src = "http://kland.smilebasicsource.com/i/vggbp.png";
    
    // Add to score
    storage.setItem("ralsei-score", parseInt(storage.getItem("ralsei-score")) + 1);
    
    // Score popup
    scoreElement = document.createElement("div");
    scoreElement.className = "score-toast";
    scoreElement.innerHTML = "+1 Ralsei Points";
    scoreElement.style.left = (e.pageX + 24) + "px";
    scoreElement.style.top = (e.pageY - 8) + "px";
    scoreElement = document.body.appendChild(scoreElement);
    window.setTimeout((el)=>{el.remove();}, 2000, scoreElement);
}

function eventThingy(element) {
    element.addEventListener("click", ev, false);
}
})();

Here's a thing that certainly exists now You can also check your score in the user tab. CSS

#ralsei-point-total {
    background-image: url("//kland.smilebasicsource.com/i/oxpjh.png");
    
    cursor: pointer;
}
.score-toast {
    position: absolute;
    
    border-radius: .25rem;
    padding: .5rem;
    
    color: white;
    background-color: #128409;
    
    animation: 2s linear 1 toastFly;
}
@keyframes toastFly {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-32px);
        opacity: 0;
    }
}

JS

(function(){
var storage = window.localStorage;

// No tampering, unless you hate fun
if (!storage.getItem("ralsei-score")) storage.setItem("ralsei-score", 0);

var userNav = document.querySelector("user-nav");
var thing = document.createElement("a");
thing.id = "ralsei-point-total";
thing.title = "Ralsei Point Total";
thing.innerHTML = "Ralsei Point Total";
thing.addEventListener("click", (e)=>{
    alert("You've accumulated " + storage.getItem("ralsei-score") + " Ralsei points. Why?");
});
thing = userNav.insertBefore(thing, document.getElementById("sign-out"));

// Get all profile pictures.
var pfp = document.querySelectorAll("img.smallavatar, img.bigavatar, #openUserHomeAvatar img");

var ev = function(e) {
    ralseiify(e);
    e.target.removeEventListener("click", ev, false);
};

// For each profile picture, move the main picture to the background, and swap the src picture for a Ralsei picture.
for (var i = 0; i < pfp.length; i++) {
    eventThingy(pfp[i]);
}

function ralseiify(e) {
    var scoreElement;
    
    // Edit profile picture
    e.target.style.backgroundImage = "url(" + e.target.src + ")";
    e.target.style.backgroundSize = "cover";
    if (Math.random() > 0.5) e.target.style.transform = "scaleX(-1)";
    e.target.src = "http://kland.smilebasicsource.com/i/vggbp.png";
    
    // Add to score
    storage.setItem("ralsei-score", parseInt(storage.getItem("ralsei-score")) + 1);
    
    // Score popup
    scoreElement = document.createElement("div");
    scoreElement.className = "score-toast";
    scoreElement.innerHTML = "+1 Ralsei Points";
    scoreElement.style.left = (e.pageX + 24) + "px";
    scoreElement.style.top = (e.pageY - 8) + "px";
    scoreElement = document.body.appendChild(scoreElement);
    window.setTimeout((el)=>{el.remove();}, 2000, scoreElement);
}

function eventThingy(element) {
    element.addEventListener("click", ev, false);
}
})();

This is a fun game. The Ralsei icon in the user menu fits right in with Randomous' icons. 10/10. Edit:I had over 100 Ralsei Points™ but then the next day they all vanished! My new rating is 8/10

The score won't persist across different computers since it uses localStorage

the score won't persist across different computers and/or browsers since it uses localStorage

It was the same browser and device

Make [co​de] not fill entire screen width

code {
    display: inline-block !important;
	max-width: 100% !important;
	overflow-x: auto;
	margin-right: 69420px !important;
}

button code {
    margin-right: 0 !important;
}

.bbcode, .bbcode blockquote {
    overflow-x: hidden;
    overflow-x: -moz-hidden-unscrollable;
}

This is a really awful hack because CSS is terrible. Very high chance of breaking the entire site

Can I have a template for the code block? I tried to edit Y’s custom code, but it had a lot of edited parts, and I didn’t know what to delete because I don’t really know how the code block works.

I feel like it's pretty self-explanatory? Each class under <.bbcode code> is a token type, with two exceptions: The first rule selects the entire code element, setting a background-color here sets the code background, and setting a text color sets the default color. The other exception is .bbcode code .def + .variable, which selects variables (or rather, unknown identifiers, i.e. user vars/functions) if and only if they follow the DEF keyword. This is used to target function definition names for attention. Since comments have a background-color specifically for that token, and because text on SBS has a line-height > 1.0, I use the display: inline-block; property so that the background takes up the entire line height, to avoid gaps in background color in comment blocks.

With this script, you can change the syntax colors in the code block to match SmileBASIC's.

/*'SmileBASIC 3 colors for [code] blocks */
.bbcode code, .bbcode code * {
    color: #ffffff;
    background-color: #000000;
}
.bbcode code .keyword {
    color: #7bb5f7;
}
.bbcode code .number {
    color: #f77bb5;
}
.bbcode code .label {
    color: #f7a500;
}
.bbcode code .function {
    color: #7b7bf7;
}
.bbcode code .comment {
    color: #10bd42;
}
.bbcode code .string {
    color: #a5ada5;
}

Please let me know if there are any problems with this code.

Ralsei POINTS!!!

... WONT WORK!

YOU CANT CLICK USER BECAUSE SMILEBASICSOURCE IS SAD AND WONT LET YOU

*{
    filter:grayscale(100%);
}

with this, Randomous looks like he came outta da flipnotes haneta!

*{
    filter:contrast(200%);
}