Raw Source Toggle Dropdown

• Minified Source

Lily / SS Beautify

// ==UserScript==
// @author Lily
// @name SS Beautify
// @description Beautifies texts on sexstories.com, making them prettier and easier on the eyes.
// @license MIT
// @version 1.0.0
// @include https://www.sexstories.com/story/*
// ==/UserScript==

/* SCRIPT START */

console.time('SS Beautify Script Execution Time');

// Warn the user regarding possible cross-browser issues
if (!navigator.userAgent.toLowerCase().includes('firefox')) {
  console.warn('SS Beautify may have trouble working as intended as the current browser is not Firefox.');
}

// Import Open Sans font
const link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', 'https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700');
document.head.appendChild(link);

/* General page theme -
   using an object here to make things neater. */
window.theme = {
  backgroundColour: '#0e0e0e',
  font: 'Open Sans',
  fontSize: '14px',
  borderBottom: '#242424',
  highlights: '#887dff',
  blockPanel: '#0b0b0b',
  submitButton: '#ffffff',
  buttons: {
    background: '#6e6e6e',
    content: '#ffffff'
  },
  mainPanel: {
    top: '#1a1a1a',
    main: '#000001'
  },
  commentInput: {
    background: '#151515',
    border: '2px solid #222222',
    textColour: '#eeeeee'
  }
};

// Key elements
const hyperlinks = document.getElementsByTagName('a');
const mainPanel = document.getElementById('story_center_panel');
const blockPanel = document.getElementsByClassName('block_panel');
const topPanel = document.getElementById('top_panel');
const fontSizer = document.getElementsByClassName('fontSize');
const breaks = document.getElementsByTagName('hr');
const highlights = document.getElementsByClassName('color2');
const voteButtons = document.getElementsByClassName('bouton_vote');
const titlePanel = document.getElementsByClassName('title_panel')[0];
const submit = document.getElementsByName('Submit')[0];
const charCount = document.getElementById('commentsc');
const commentInput = document.getElementById('commenttext');
const activePage = document.getElementsByClassName('active');
const footer = document.getElementById('footer');

// Remove main header
document.getElementsByTagName('h1')[0].remove();

// Float & increase main panel width
mainPanel.style.float = 'left';
mainPanel.style.border = 'none';
mainPanel.style.width = '1000px';
mainPanel.style.background = window.theme.blockPanel;

// Align footer with main panel
footer.style.marginRight = '330px';

// Hyperlinks
for (let e of hyperlinks) {
  e.style.color = window.theme.highlights;
  e.style.background = 'rgba(0, 0, 0, 0)';
}

// Font size selector
for (let e of fontSizer) {
  e.style.background = window.theme.buttons.background;
  e.style.border = 'none';
  e.style.padding = '0';
  e.style.color = window.theme.buttons.content;
  e.style.height = '';
}

// Space between text and container perimeter 
topPanel.style.padding = '10px';
for (let e of blockPanel) {
  e.style.margin = '8px';
  e.style.background = window.theme.blockPanel;
  e.style.borderBottomColor = window.theme.borderBottom;
}

// Reformat <hr>
for (let e of breaks) {
  e.style.background = window.theme.borderBottom;
  e.style.margin = '30px 0px 30px 0px';
  e.style.width = '100%';
  e.style.height = '2px';
}

// Colour of highlights ('color2' class)
for (let e of highlights) {
  e.style.color = window.theme.highlights;
}

// Active page icons
for (let e of activePage) {
  e.style.background = 'rgba(0, 0, 0, 0)';
}

// Rating buttons
for (let e of voteButtons) {
  e.style.background = window.theme.buttons.background;
  e.style.color = window.theme.buttons.content;
  e.style.border = 'none';
  e.style.padding = '6px';
  e.style.borderRadius = '5px';
}
voteButtons[0].value = '👎';
voteButtons[1].value = '👍';

// Comment text area
commentInput.style.background = window.theme.commentInput.background;
commentInput.style.border = window.theme.commentInput.border;
commentInput.style.padding = '6px';
commentInput.style.color = window.theme.commentInput.textColour;

// Post comment button
// Even out height with char counter
submit.style.height = '27px';
submit.style.border = 'none';
submit.style.borderRadius = '6px';
submit.style.cursor = 'pointer';
submit.value = 'SUBMIT';
submit.style.background = window.theme.submitButton;

// Comment character counter
charCount.style.border = 'none';
charCount.style.borderRadius = '6px';
charCount.style.padding = '4px';
charCount.style.marginLeft = '6px';
charCount.style.textAlign = 'center';
charCount.style.background = window.theme.submitButton;

// Title panel
titlePanel.style.background = window.theme.mainPanel.top;
titlePanel.style.margin = '0px 10px 0px 10px';

// Colour styling
document.body.style.background = window.theme.backgroundColour;
topPanel.style.backgroundColor = window.theme.mainPanel.top;

// Font configuration
document.body.style.fontFamily = window.theme.font;
document.body.style.fontSize = window.theme.fontSize;

console.timeEnd('SS Beautify Script Execution Time');

/* SCRIPT END */