skins/st, ep_set_title_on_pad_st and submodule ep_line_height added

44 files changed, 2104 insertions, 0 deletions

diff --git a/.gitmodules b/.gitmodules
index eb7133a..d64c9c6 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,3 +1,6 @@
 [submodule "ep_embedmedia"]
 	path = ep_embedmedia
 	url = https://github.com/afix-space/ep_embedmedia.git
+[submodule "ep_line_height"]
+	path = ep_line_height
+	url = https://github.com/afix-space/ep_line_height.git
diff --git a/README.txt b/README.txt
index 476709f..2d64d92 100644
--- a/README.txt
+++ b/README.txt
@@ -6,3 +6,7 @@ A collection of customized etherpad modules for a simplified install
 git clone git://git.afix.space/ep_modules_st.git
 cd ep_modules_st
 git submodule init
+git submodule update
+
+Don't forget to mv skins/st directory to etherpad src/static/skins/st06/
+
diff --git a/ep_line_height b/ep_line_height
new file mode 160000
+Subproject 3d749084e8f6e9d277807cd8c0a60175405ef0d
diff --git a/ep_set_title_on_pad_st/.ep_initialized b/ep_set_title_on_pad_st/.ep_initialized
new file mode 100644
index 0000000..348ebd9
--- /dev/null
+++ b/ep_set_title_on_pad_st/.ep_initialized
@@ -0,0 +1 @@
+done
\ No newline at end of file
diff --git a/ep_set_title_on_pad_st/README.md b/ep_set_title_on_pad_st/README.md
new file mode 100644
index 0000000..5acc780
--- /dev/null
+++ b/ep_set_title_on_pad_st/README.md
@@ -0,0 +1,12 @@
+# Pad titles
+
+![Screenshot](https://i.imgur.com/h2elf1z.jpg "Pad Title")
+
+## Installation
+Install using http://%youretherpad%/admin/plugins or ``npm install ep_set_title_on_pad``
+
+## TODO
+* i18n support
+
+## License
+Usual Apache 2 license.
diff --git a/ep_set_title_on_pad_st/README.md.save b/ep_set_title_on_pad_st/README.md.save
new file mode 100644
index 0000000..2f1af09
--- /dev/null
+++ b/ep_set_title_on_pad_st/README.md.save
@@ -0,0 +1,6 @@
+# A file menu / toolbar
+
+## Installation
+Install using /admin/plugins or npm install ep_prompt_for_name
+Edit settings in settings.json <-- sponsor this
+
diff --git a/ep_set_title_on_pad_st/eejs.js b/ep_set_title_on_pad_st/eejs.js
new file mode 100644
index 0000000..ad03120
--- /dev/null
+++ b/ep_set_title_on_pad_st/eejs.js
@@ -0,0 +1,12 @@
+var eejs = require('ep_etherpad-lite/node/eejs/');
+
+exports.eejsBlock_styles = function(hook_name, args, cb){
+  return cb();
+}
+
+exports.eejsBlock_body = function (hook_name, args, cb)
+{
+  args.content = eejs.require('ep_set_title_on_pad/templates/title.ejs', {settings : false}) + args.content;
+}
+
+
diff --git a/ep_set_title_on_pad_st/ep.json b/ep_set_title_on_pad_st/ep.json
new file mode 100644
index 0000000..af83676
--- /dev/null
+++ b/ep_set_title_on_pad_st/ep.json
@@ -0,0 +1,18 @@
+{
+  "parts": [
+    {
+      "name": "set_title_on_pad",
+      "client_hooks": {
+        "postAceInit": "ep_set_title_on_pad/static/js/index:documentReady",
+        "handleClientMessage_CUSTOM": "ep_set_title_on_pad/static/js/index"
+      },
+      "hooks": {
+        "eejsBlock_body":"ep_set_title_on_pad/eejs",
+        "eejsBlock_styles":"ep_set_title_on_pad/eejs",
+        "handleMessage": "ep_set_title_on_pad/handleMessage",
+        "exportFileName":"ep_set_title_on_pad/index",
+        "clientVars": "ep_set_title_on_pad/handleMessage"
+      }
+    }
+  ]
+}
diff --git a/ep_set_title_on_pad_st/handleMessage.js b/ep_set_title_on_pad_st/handleMessage.js
new file mode 100644
index 0000000..7363de9
--- /dev/null
+++ b/ep_set_title_on_pad_st/handleMessage.js
@@ -0,0 +1,112 @@
+/***
+*
+* Responsible for negotiating messages between two clients
+*
+****/
+
+var authorManager = require("../../src/node/db/AuthorManager"),
+padMessageHandler = require("../../src/node/handler/PadMessageHandler"),
+               db = require('ep_etherpad-lite/node/db/DB').db,
+            async = require('../../src/node_modules/async');
+
+
+
+// Remove cache for this procedure
+db['dbSettings'].cache = 0;
+
+var buffer = {};
+
+/*
+* Handle incoming messages from clients
+*/
+exports.handleMessage = async function(hook_name, context, callback){
+  // Firstly ignore any request that aren't about chat
+  var isTitleMessage = false;
+  if(context){
+    if(context.message && context.message){
+      if(context.message.type === 'COLLABROOM'){
+        if(context.message.data){
+          if(context.message.data.type){
+            if(context.message.data.type === 'title'){
+              isTitleMessage = true;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  if(!isTitleMessage){
+    callback(false);
+    return false;
+  }
+  var message = context.message.data;
+  /***
+    What's available in a message?
+     * action -- The action IE chatPosition
+     * padId -- The padId of the pad both authors are on
+     * targetAuthorId -- The Id of the author this user wants to talk to
+     * message -- the actual message
+     * myAuthorId -- The Id of the author who is trying to talk to the targetAuthorId
+  ***/
+  if(message.action === 'sendTitleMessage'){
+    var authorName = await authorManager.getAuthorName(message.myAuthorId); // Get the authorname
+    var msg = {
+      type: "COLLABROOM",
+      data: { 
+        type: "CUSTOM",
+        payload: {
+          action: "recieveTitleMessage",
+          authorId: message.myAuthorId,
+          authorName: authorName,
+          padId: message.padId,
+          message: message.message
+        }
+      }
+    };
+    sendToRoom(message, msg);
+    saveRoomTitle(message.padId, message.message);
+  }
+
+  if(isTitleMessage === true){
+    callback([null]);
+  }else{
+    callback(true);
+  }
+}
+
+function saveRoomTitle(padId, message){
+  db.set("title:"+padId, message);
+}
+
+function sendToRoom(message, msg){
+  var bufferAllows = true; // Todo write some buffer handling for protection and to stop DDoS -- myAuthorId exists in message.
+  if(bufferAllows){
+    setTimeout(function(){ // This is bad..  We have to do it because ACE hasn't redrawn by the time the chat has arrived
+      padMessageHandler.handleCustomObjectMessage(msg, false, function(){
+        // TODO: Error handling.
+      })
+    }
+    , 100);
+  }
+}
+
+exports.clientVars = function(hook, pad, callback){
+  var padId = pad.pad.id;
+  db.get("title:"+padId, function(err, value){
+
+    var msg = {
+      type: "COLLABROOM",
+      data: {
+        type: "CUSTOM",
+        payload: {
+          action: "recieveTitleMessage",
+          padId: padId,
+          message: value
+        }
+      }
+    }
+    sendToRoom(false, msg);
+  });
+  return callback();
+}
diff --git a/ep_set_title_on_pad_st/index.js b/ep_set_title_on_pad_st/index.js
new file mode 100644
index 0000000..ecd4b24
--- /dev/null
+++ b/ep_set_title_on_pad_st/index.js
@@ -0,0 +1,15 @@
+var settings = require('ep_etherpad-lite/node/utils/Settings'),
+          db = require('ep_etherpad-lite/node/db/DB').db;
+
+// Remove cache for this procedure
+db['dbSettings'].cache = 0;
+
+exports.exportFileName = function(hook, padId, callback){
+  var title = padId;
+  // Sets Export File Name to the same as the title
+  db.get("title:"+padId, function(err, value){
+    console.log("Found ", value, " for ", padId);
+    if(value) title = value;
+  });
+  callback(title);
+}
diff --git a/ep_set_title_on_pad_st/package.json b/ep_set_title_on_pad_st/package.json
new file mode 100644
index 0000000..a7aadb6
--- /dev/null
+++ b/ep_set_title_on_pad_st/package.json
@@ -0,0 +1,48 @@
+{
+  "_from": "ep_set_title_on_pad",
+  "_id": "ep_set_title_on_pad@0.2.0",
+  "_inBundle": false,
+  "_integrity": "sha512-qt7Z+xJscGUB6A5R/vHsYbdOhmN3XG56LLtIxOzg/x3/ppHpBCmAf/y4cMNYyrm+6+lgwjt77aa6CchVRyUF7Q==",
+  "_location": "/ep_set_title_on_pad",
+  "_phantomChildren": {},
+  "_requested": {
+    "type": "tag",
+    "registry": true,
+    "raw": "ep_set_title_on_pad",
+    "name": "ep_set_title_on_pad",
+    "escapedName": "ep_set_title_on_pad",
+    "rawSpec": "",
+    "saveSpec": null,
+    "fetchSpec": "latest"
+  },
+  "_requiredBy": [
+    "#USER",
+    "/"
+  ],
+  "_resolved": "https://registry.npmjs.org/ep_set_title_on_pad/-/ep_set_title_on_pad-0.2.0.tgz",
+  "_shasum": "c565b2d99d00101fbb2974a240a6e54a9548c46f",
+  "_spec": "ep_set_title_on_pad",
+  "_where": "/home/pad/etherpad-lite",
+  "author": {
+    "name": "johnyma22",
+    "email": "john@mclear.co.uk",
+    "url": "John McLear"
+  },
+  "bugs": {
+    "url": "https://github.com/JohnMcLear/ep_set_title_on_pad/issues"
+  },
+  "bundleDependencies": false,
+  "dependencies": {},
+  "deprecated": false,
+  "description": "Set the title on a pad in Etherpad, also includes real time updates to the UI",
+  "engines": {
+    "node": ">= 0.4.1"
+  },
+  "homepage": "https://github.com/JohnMcLear/ep_set_title_on_pad#readme",
+  "name": "ep_set_title_on_pad",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JohnMcLear/ep_set_title_on_pad.git"
+  },
+  "version": "0.2.0"
+}
diff --git a/ep_set_title_on_pad_st/static/image/logo.png b/ep_set_title_on_pad_st/static/image/logo.png
new file mode 100644
index 0000000..82f6771
--- /dev/null
+++ b/ep_set_title_on_pad_st/static/image/logo.png
diff --git a/ep_set_title_on_pad_st/static/js/index.js b/ep_set_title_on_pad_st/static/js/index.js
new file mode 100644
index 0000000..ef26b00
--- /dev/null
+++ b/ep_set_title_on_pad_st/static/js/index.js
@@ -0,0 +1,60 @@
+exports.handleClientMessage_CUSTOM = function(hook, context, cb){
+  if(context.payload.action == "recieveTitleMessage"){
+    var message = context.payload.message;
+    if(!$("#input_title").is(":visible")){ // if we're not editing..
+      if(message){
+        window.document.title = message;
+        $('#title > h1').text(message);
+        $('#input_title').val(message);
+      }
+    }
+  }
+}
+
+exports.documentReady = function(){
+  if (!$('#editorcontainerbox').hasClass('flex-layout')) {
+      $.gritter.add({
+          title: "Error",
+          text: "Ep_set_title_on_pad: Please upgrade to etherpad 1.9 for this plugin to work correctly",
+          sticky: true,
+          class_name: "error"
+      })
+  }
+  $('#edit_title').click(function(){
+    $('#input_title, #save_title').show();
+    $('#title, #edit_title').hide();
+    $('#input_title').focus();
+  });
+
+  $('#save_title').click(function(){
+    sendTitle();
+    window.document.title = $('#input_title').val();
+    $('#title > h1').text($('#input_title').val());
+    $('#title, #edit_title').show();
+    $('#input_title, #save_title').hide();
+  });
+
+  $('#input_title').keyup(function(e){
+    sendTitle();
+    window.document.title = $('#input_title').val();
+    $('#title > h1').text($('#input_title').val());
+    if(e.keyCode === 13){
+      $('#save_title').click();
+    }
+  });
+}
+
+function sendTitle(){
+  var myAuthorId = pad.getUserId();
+  var padId = pad.getPadId();
+  var message = $('#input_title').val();
+  // Send chat message to send to the server
+  var message = {
+    type : 'title',
+    action : 'sendTitleMessage',
+    message : message,
+    padId : padId,
+    myAuthorId : myAuthorId
+  }
+  pad.collabClient.sendMessage(message);  // Send the chat position message to the server
+}
diff --git a/ep_set_title_on_pad_st/static/tests/frontend/specs/atest.js b/ep_set_title_on_pad_st/static/tests/frontend/specs/atest.js
new file mode 100644
index 0000000..afec37f
--- /dev/null
+++ b/ep_set_title_on_pad_st/static/tests/frontend/specs/atest.js
@@ -0,0 +1,47 @@
+describe("Set Title On Pad", function(){
+
+  //create a new pad before each test run
+  beforeEach(function(cb){
+    testPad = helper.newPad(cb);
+    this.timeout(60000);
+  });
+
+  // Create Pad
+   // Check Default Pad Title is Untitled
+    // Set Pad title & Ensure it's right
+     // Re-open Pad and check Pad Title is stored.
+
+  it("Checked Default Pad Title is 'Untitled Pad'", function(done) {
+    this.timeout(60000);
+    var chrome$ = helper.padChrome$;
+    var $editorContainer = chrome$("#editorcontainer");
+    chrome$("#edit_title").click();
+    chrome$("#input_title").val("JohnMcLear");
+    chrome$("#save_title").click();
+    helper.waitFor(function(){
+      return chrome$("#pad_title > #title > h1").text() === "JohnMcLear";
+    }).done(function(){
+      expect(chrome$("#pad_title > #title > h1").text()).to.be("JohnMcLear");
+      done();
+    });
+  });
+
+  it("Check updating pad title to 'JohnMcLear' works", function(done) {
+    this.timeout(60000);
+    var chrome$ = helper.padChrome$;
+    var $editorContainer = chrome$("#editorcontainer");
+    chrome$("#edit_title").click();
+    chrome$("#input_title").val("JohnMcLear");
+    chrome$("#save_title").click();
+
+    helper.waitFor(function(){
+      console.log(chrome$("#pad_title > #title > h1").text());
+      return chrome$("#pad_title > #title > h1").text() === "JohnMcLear";
+    }).done(function(){
+       expect(chrome$("#pad_title > #title > h1").text()).to.be("JohnMcLear");
+       done();
+    });
+
+  });
+
+});
diff --git a/ep_set_title_on_pad_st/templates/title.ejs b/ep_set_title_on_pad_st/templates/title.ejs
new file mode 100644
index 0000000..ebc2697
--- /dev/null
+++ b/ep_set_title_on_pad_st/templates/title.ejs
@@ -0,0 +1,64 @@
+<div id='pad_title'>
+  <a href="http://www.st06.eu"><img id="logo-st06" title="www.st06.eu" src="/static/plugins/ep_set_title_on_pad/static/image/logo.png" alt="st06"></a>
+  <div id='title'><h1>Untitled Pad</h1></div>
+  <input id='input_title'>
+  <div id='edit_title' class='acl-write buttonicon buttonicon-pencil-alt'></div>
+  <div id='save_title'><button class="btn btn-primary">OK</button></div>
+</div>
+
+<style type="text/css">
+  #logo-st06 {
+    margin-right: 1em;
+  }
+	
+  #pad_title {
+    display: flex !important;
+    flex-direction: row;
+    align-items: center;
+    border-bottom: 1px solid #ccc;
+    margin: 0 !important;
+    padding: 3px 10px;
+  }
+  #input_title{
+    display:none;
+    flex: 1 auto;
+    padding: 8px 10px !important;
+  }
+  #title, #title-st {
+    line-height:30px;
+    max-width: calc(100% - 30px);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  #title h1{
+    line-height:160%;
+  }
+  #edit_title{
+    padding-top: 5px;
+    margin-left: 10px;
+    cursor:pointer;
+  }
+  #save_title{
+    display:none;
+    cursor:pointer;
+    margin-left:8px;
+  }
+  #save_title button{
+    margin-right: 0 !important;
+  }
+  @media print{
+    #edit_title, #save_title{
+      display:none;
+    }
+  }
+  @media (max-width: 720px){
+    #pad_title{
+      display:none !important;
+    }
+ }
+</style>
+
+<script src="../static/js/jquery.js"></script>
+
+
diff --git a/skins/st/images/fond.jpg b/skins/st/images/fond.jpg
new file mode 100644
index 0000000..81357c7
--- /dev/null
+++ b/skins/st/images/fond.jpg
diff --git a/skins/st/images/screenshot.png b/skins/st/images/screenshot.png
new file mode 100644
index 0000000..d461192
--- /dev/null
+++ b/skins/st/images/screenshot.png
diff --git a/skins/st/index.css b/skins/st/index.css
new file mode 100644
index 0000000..5129c43
--- /dev/null
+++ b/skins/st/index.css
@@ -0,0 +1,88 @@
+#button,
+body,
+form {
+  border: none
+}
+
+body {
+  background: url(images/fond.jpg) center center no-repeat fixed #fff;
+  font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  line-height: 1.42857143;
+  color: #333;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+}
+
+#wrapper {
+  border-top: none;
+  margin-top: 0;
+  padding: 0;
+  background: 0 0;
+  box-shadow: none
+}
+
+input {
+  color: #4a5d5c;
+}
+
+#inner {
+  background: transparent;
+  padding-top: 0;
+  width: 350px;
+  max-width: 350px;
+  text-align: center;
+  color:#FFF;
+}
+
+#label {
+  text-shadow: none;
+  color: #FFF;
+  font-weight: normal;
+  text-align: center;
+}
+
+#button {
+  margin: 0 auto;
+  text-align: center;
+  width: 100%;
+  text-shadow: none;
+  font-size: 23px;
+  line-height: 1.8;
+  color: #64d29b;
+  background: #586a69;
+  border-radius: 3px;
+  box-shadow: none;
+  height: 53px;
+  border: none;
+  display: block;
+}
+
+
+button[type=submit] {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  left: 305px;
+  color: #64d29b;
+  background: #586a69;
+  border: none;
+  top: 0;
+  opacity: 1;
+  transition: .2s background;
+}
+
+#button:hover,
+button[type=submit]:hover {
+  cursor: pointer;
+  background: #4a5d5c;
+  color: #64d29b;
+}
+
+#padname {
+  height: 38px;
+  max-width: 350px;
+  padding: 0 12px;
+  position: relative;
+}
\ No newline at end of file
diff --git a/skins/st/index.js b/skins/st/index.js
new file mode 100644
index 0000000..152c3d5
--- /dev/null
+++ b/skins/st/index.js
@@ -0,0 +1,6 @@
+function customStart()
+{
+  //define your javascript here
+  //jquery is available - except index.js
+  //you can load extra scripts with $.getScript http://api.jquery.com/jQuery.getScript/
+}
diff --git a/skins/st/pad.css b/skins/st/pad.css
new file mode 100644
index 0000000..158bc0b
--- /dev/null
+++ b/skins/st/pad.css
@@ -0,0 +1,80 @@
+@import url("src/general.css");
+@import url("src/layout.css");
+@import url("src/pad-editor.css");
+
+@import url("src/components/scrollbars.css");
+@import url("src/components/buttons.css");
+@import url("src/components/popup.css");
+
+@import url("src/components/chat.css");
+@import url("src/components/sidediv.css");
+@import url("src/components/gritter.css");
+@import url("src/components/table-of-content.css");
+@import url("src/components/toolbar.css");
+@import url("src/components/users.css");
+@import url("src/components/form.css");
+@import url("src/components/import-export.css");
+
+@import url("src/plugins/brightcolorpicker.css");
+@import url("src/plugins/font_color.css");
+@import url("src/plugins/tables2.css");
+@import url("src/plugins/set_title_on_pad.css");
+@import url("src/plugins/author_hover.css");
+@import url("src/plugins/comments.css");
+
+@import url("src/pad-variants.css");
+
+/* -----------------------------------------------------------------
+ * COLORS
+ * If you want to change main colors, please replace following CSS variables
+ * -----------------------------------------------------------------
+ */
+ 
+:root {
+  --super-dark-color: #485365; /*#374256;*/
+  --dark-color: #576273; /*#4d5d77*/
+
+  --super-dark-color: #01a0ff; /*#4d5d77*/
+  --super-dark-color: #204d68; /*#4d5d77*/
+  --dark-color: #275e7f; /*#374256;*/
+
+  --primary-color: #4a9637;
+  --middle-color: #d2d2d2; /* kind of grey, use for border for examples */
+
+  --light-color: #f2f3f4; /*#f9f9f9;*/
+  --super-light-color: white;
+
+  --text-color: var(--super-dark-color);
+  --text-soft-color: var(--dark-color);
+  --border-color: var(--middle-color);
+  --bg-soft-color: var(--light-color);
+  --bg-color: var(--super-light-color);
+
+  --toolbar-border: none;
+
+  --main-font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+
+  --editor-horizontal-padding: 55px;
+  --editor-vertical-padding: 40px;
+}
+
+@media (max-width:1000px) {
+  :root {
+    --editor-horizontal-padding: 15px;
+    --editor-vertical-padding: 15px;
+  }
+}
+
+@media (max-width:600px) {
+  :root {
+    --editor-horizontal-padding: 15px;
+    --editor-vertical-padding: 15px;
+  }
+}
+
+/* Default scrollbar values */
+body {
+  --scrollbar-bg: var(--light-color);
+  --scrollbar-track: var(--super-light-color);
+  --scrollbar-thumb: var(--dark-color);
+}
diff --git a/skins/st/pad.js b/skins/st/pad.js
new file mode 100644
index 0000000..1a7bd93
--- /dev/null
+++ b/skins/st/pad.js
@@ -0,0 +1,6 @@
+function customStart()
+{
+  $('#pad_title').show();
+  $('.buttonicon').mousedown(function() { $(this).parent().addClass('pressed'); })
+  $('.buttonicon').mouseup(function() { $(this).parent().removeClass('pressed'); })
+}
diff --git a/skins/st/src/components/buttons.css b/skins/st/src/components/buttons.css
new file mode 100644
index 0000000..f5a6cb1
--- /dev/null
+++ b/skins/st/src/components/buttons.css
@@ -0,0 +1,31 @@
+button, .btn
+{
+  padding: 5px 20px;
+  border-radius: 4px;
+  line-height: 1.5;
+  width: auto;
+  border: none;
+  font-weight: bold;
+  text-transform: uppercase;
+  position: relative;
+  background: none;
+  cursor: pointer;
+}
+
+.btn-primary
+{
+  background-color: #64d29b;
+  background-color: var(--super-dark-color);
+  color: #ffffff;
+  color: var(--super-light-color);
+}
+.btn-default {
+  color: #485365;
+  color: var(--text-color);
+}
+
+.buttonicon:before, [class^="buttonicon-"]:before, [class*=" buttonicon-"]:before {
+  line-height: 18px;
+}
+
+
diff --git a/skins/st/src/components/chat.css b/skins/st/src/components/chat.css
new file mode 100644
index 0000000..3ad768f
--- /dev/null
+++ b/skins/st/src/components/chat.css
@@ -0,0 +1,90 @@
+#chatbox {
+  background-color: transparent !important;
+  color: var(--text-color);
+  color: var(--super-dark-color);
+}
+.chat-content {
+  background: none;
+  padding: 0;
+  width: 400px;
+  height: 300px;
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+}
+
+.chat-content, #chaticon {
+  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+  border: none;
+}
+
+#chaticon {
+  padding: 10px 20px;
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+  color: #485365;
+  color: var(--text-color);
+  right: 30px;
+}
+
+#chatbox.stickyChat .chat-content {
+  border: none;
+  box-shadow: none;
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+}
+
+#titlebar {
+  bottom: 0;
+  line-height: 44px;
+  height: 44px;
+  padding: 0 7px;
+  z-index: 20000;
+}
+
+#titlelabel, #chatlabel {
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+#titlelabel {
+  color: var(--super-dark-color);
+  font-weight: bold;
+}
+
+#titlebar #titlelabel { font-size: 16px; }
+#chatlabel { margin-right: 15px; }
+
+#chattext {
+  padding: 0;
+  border-top: 1px solid #ffffff;
+  border-top: 1px solid var(--bg-color);
+  border-bottom: 1px solid #ffffff;
+  border-bottom: 1px solid var(--bg-color);
+  background-color: inherit;
+  color: inherit;
+}
+#chattext p {
+  padding: 4px 10px;
+}
+#chattext:not(.authorColors) p:first-child {
+  padding-top: 10px;
+}
+#chattext:not(.authorColors) p:last-child {
+  padding-bottom: 10px;
+}
+
+#chatinputbox {
+  padding: 8px;
+}
+#chatinputbox #chatinput {
+  background-color: #ffffff;
+  background-color: var(--bg-color);
+}
+
+@media (max-width: 800px) {
+  #chaticon {
+    right: 0;
+  }
+
+  .stick-to-screen-btn { display: none; }
+}
diff --git a/skins/st/src/components/form.css b/skins/st/src/components/form.css
new file mode 100644
index 0000000..aa82218
--- /dev/null
+++ b/skins/st/src/components/form.css
@@ -0,0 +1,114 @@
+input[type="text"], select, textarea, .nice-select {
+  border-radius: 3px;
+  box-shadow: none;
+  border: none;
+  outline: 0;
+}
+
+input[type="text"], textarea {
+  padding: 8px 10px;
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+  border: none;
+  color: #485365;
+  color: var(--text-color);
+}
+input[type="text"]::placeholder, textarea::placeholder {
+  color: #576273;
+  color: var(--text-soft-color);
+}
+select, .nice-select {
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+  border: none;
+  padding: 4px 10px;
+  padding-right: 25px;
+  font-weight: bold;
+  line-height: inherit;
+}
+.nice-select .list {
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+}
+.nice-select .option:hover,.nice-select .option.focus,.nice-select .option.selected.focus {
+  background-color: #ffffff;
+  background-color: var(--bg-color);
+}
+.nice-select .option {
+  padding: 0 15px;
+}
+.popup .nice-select .list {
+  right: 0;
+  left: auto;
+}
+
+
+/* Checkboxes
+   ========================================================================== */
+/* Remove default checkbox */
+[type="checkbox"]:not(:checked),
+[type="checkbox"]:checked {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+[type="checkbox"] + label {
+  position: relative;
+  padding-left: 2.5rem;
+  cursor: pointer;
+  display: inline-block;
+  height: 1.4rem;
+  line-height: 1.4rem;
+  font-size: 1rem;
+}
+
+[type="checkbox"] + label:before,
+[type="checkbox"] + label:after {
+  content: '';
+  position: absolute;
+  margin-top: 4px;
+  transition: all .2s ease-in-out;
+}
+
+/* BEFORE, the container*/
+[type="checkbox"] + label:before {
+  width: 24px;
+  height: 14px;
+  top: 0;
+  left: 0;
+  border-radius: 6px;
+  border: 2px solid #576273;
+  border: 2px solid var(--text-soft-color);
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+  opacity: .7;
+}
+[type="checkbox"]:checked + label:before {
+  background-color: transparent;
+  border-color: #64d29b;
+  border-color: var(--primary-color);
+}
+
+/* AFTER, the circle moving */
+[type="checkbox"] + label:after {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #576273;
+  background-color: var(--text-soft-color);
+  top: -1px;
+  left: -3px;
+}
+[type="checkbox"]:checked + label:after {
+  background-color: #64d29b;
+  background-color: var(--primary-color);
+  transform: translateX(14px);
+}
+
+[type="checkbox"]:checked:disabled + label,
+[type="checkbox"]:checked:disabled + label:before,
+[type="checkbox"]:checked:disabled + label:after {
+  cursor: not-allowed;
+  opacity: .4;
+}
diff --git a/skins/st/src/components/gritter.css b/skins/st/src/components/gritter.css
new file mode 100644
index 0000000..e612c4d
--- /dev/null
+++ b/skins/st/src/components/gritter.css
@@ -0,0 +1,70 @@
+.gritter-item:not(.error) .popup-content{
+  background-color: #64d29b;
+  background-color: var(--primary-color);
+  color: #ffffff;
+  color: var(--super-light-color);
+}
+.gritter-item .popup-content {
+  padding: 15px;
+  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+}
+#gritter-container.bottom .gritter-item .popup-content {
+  margin-top: 10px;
+}
+#gritter-container.top .gritter-item .popup-content {
+  margin-bottom: 10px;
+}
+.gritter-item p {
+  margin: 0 !important;
+}
+.gritter-item .gritter-title {
+  margin-bottom: 10px;
+}
+.gritter-item .gritter-close {
+  margin-left: 15px;
+  margin-right: 0px;
+}
+.gritter-item:not(.error) .gritter-close .buttonicon {
+  color: #ffffff;
+  color: var(--super-light-color);
+}
+
+/* CHAT GRIITER ITEM */
+.gritter-item.chat-gritter-msg:not(.error) .popup-content {
+  background-color: white;
+  background-color: var(--bg-color);
+  color: #485365;
+  color: var(--text-color);
+}
+.gritter-item.chat-gritter-msg .gritter-content {
+  text-align: left;
+}
+.gritter-item.chat-gritter-msg .author-name {
+  font-weight: bold;
+  margin-right: 5px;
+}
+.gritter-item.chat-gritter-msg:not(.error) .gritter-close .buttonicon {
+  color: #485365;
+  color: var(--text-color);
+}
+
+.gritter-item.saved-revision {
+  max-width: 600px;
+}
+
+#gritter-container.top .gritter-item.popup > .popup-content {
+  transform: scale(0.8) translateY(-100px);
+}
+#gritter-container.bottom .gritter-item.popup > .popup-content {
+  transform: scale(0.8) translateY(0px);
+}
+
+.gritter-item.popup.popup-show > .popup-content {
+  transform: scale(1) translateY(0) !important;
+  transition: all 0.4s cubic-bezier(0.74, -0.05, 0.27, 1.75) !important;
+}
+
+/* for ep_deleted_after_delay */
+.gritter-item #close_expiration_notif {
+  display: none;
+}
diff --git a/skins/st/src/components/import-export.css b/skins/st/src/components/import-export.css
new file mode 100644
index 0000000..d8425d8
--- /dev/null
+++ b/skins/st/src/components/import-export.css
@@ -0,0 +1,17 @@
+#importmessageabiword {
+  font-style: italic;
+  color: #64d29b;
+  color: var(--primary-color);
+}
+#importmessageabiword > a {
+  font-weight: bold;
+  text-decoration: underline;
+  color: #64d29b;
+  color: var(--primary-color);
+}
+
+#importmessagefail {
+  margin-top: 10px;
+}
+
+#importsubmitinput[disabled] { opacity: .6; }
\ No newline at end of file
diff --git a/skins/st/src/components/popup.css b/skins/st/src/components/popup.css
new file mode 100644
index 0000000..cef4a5e
--- /dev/null
+++ b/skins/st/src/components/popup.css
@@ -0,0 +1,71 @@
+.popup-content {
+  border-radius: 5px;
+  padding: 25px;
+  background: none;
+  background-color: #ffffff;
+  background-color: var(--bg-color);
+  color: #576273;
+  color: var(--text-soft-color);
+  border: none;
+  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+}
+
+#mycolorpicker, #users {
+  min-width: 0;
+}
+
+.popup h1 {
+  margin-bottom: 20px;
+  font-size: 1.6rem;
+  color: var(--super-light-color);
+}
+
+.popup h2 {
+  margin-bottom: 15px;
+  margin-top: 20px;
+  color: #485365;
+  color: var(--text-color);
+}
+
+.popup:not(.comment-modal) p {
+  margin: 10px 0;
+}
+
+.popup .dropdowns-container .dropdown-line {
+  margin-top: 15px;
+}
+.popup .dropdowns-container label {
+  width: 120px;
+  display: inline-block;
+}
+.popup .dropdowns-container .nice-select {
+  min-width: 180px;
+}
+
+@media (max-width: 800px) {
+  .popup-content {
+    padding: 1rem;
+    box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), -1px 1px 16px 3px rgba(27, 39, 51, 0.12);
+  }
+  .popup .dropdowns-container select {
+    min-width: 0;
+  }
+}
+
+/* SKIN Variants Popup */
+#skin-variants {
+  bottom: 0;
+  left: 0;
+  right: auto;
+  top: auto;
+}
+#skin-variants .popup-content > p {
+  margin-top: 25px;
+}
+#skin-variants-result{
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+}
+.skin-variant-container {
+  text-transform: capitalize;
+}
diff --git a/skins/st/src/components/scrollbars.css b/skins/st/src/components/scrollbars.css
new file mode 100644
index 0000000..85f942b
--- /dev/null
+++ b/skins/st/src/components/scrollbars.css
@@ -0,0 +1,41 @@
+@media (min-width: 721px) {
+  ::-webkit-scrollbar-track {
+    background-color: white;
+    background-color: var(--scrollbar-track);
+    border-radius: 10px;
+    border: 7px solid #f2f3f4;
+    border: 7px solid var(--scrollbar-bg);
+  }
+
+  ::-webkit-scrollbar {
+    width: 22px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    min-height: 40px;
+    border-radius: 10px;
+    background-color: #576273;
+    background-color: var(--scrollbar-thumb);
+    border: 7px solid #f2f3f4;
+    border: 7px solid var(--scrollbar-bg);
+  }
+}
+
+.thin-scrollbar::-webkit-scrollbar-track {
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+  border-radius: 0px;
+  border: none;
+}
+
+.thin-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.thin-scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 0px;
+  min-height: 40px;
+  background-color: #d2d2d2;
+  background-color: var(--middle-color);
+  border: none;
+}
\ No newline at end of file
diff --git a/skins/st/src/components/sidediv.css b/skins/st/src/components/sidediv.css
new file mode 100644
index 0000000..6f5556d
--- /dev/null
+++ b/skins/st/src/components/sidediv.css
@@ -0,0 +1,19 @@
+#sidediv {
+  background-color: transparent;
+  border: none;
+  opacity: .8;
+}
+
+#sidedivinner>div:before {
+  font-family: var(--main-font-family); /* the parent div have font-family monospace (line number) */
+  color: #485365;
+  color: var(--text-color);
+  font-weight: bold;
+}
+
+#sidedivinner>div .line-number {
+  line-height: 24px;
+  font-family: RobotoMono;
+  color: #576273;
+  color: var(--text-soft-color);
+}
\ No newline at end of file
diff --git a/skins/st/src/components/table-of-content.css b/skins/st/src/components/table-of-content.css
new file mode 100644
index 0000000..fd6c5ea
--- /dev/null
+++ b/skins/st/src/components/table-of-content.css
@@ -0,0 +1,21 @@
+#toc {
+  padding: 20px 20px 10px 10px !important;
+  min-width: 146px !important;
+  background-color: transparent !important;
+  border: none !important;
+  order: -2;
+}
+
+#tocItems {
+  line-height: 40px !important;
+}
+
+.plugin-ep_resizable_bars #toc {
+  min-width: 186px !important;
+}
+
+@media (max-width: 1200px) {
+  #toc {
+    padding-top: 10px !important
+  }
+}
\ No newline at end of file
diff --git a/skins/st/src/components/toolbar.css b/skins/st/src/components/toolbar.css
new file mode 100644
index 0000000..c262214
--- /dev/null
+++ b/skins/st/src/components/toolbar.css
@@ -0,0 +1,155 @@
+.toolbar {
+  border-bottom: none;
+  padding: 0;
+  background-color: #ffffff;
+  background-color: var(--bg-color);
+  color: #576273;
+  color: var(--text-soft-color);
+  border-bottom: none;
+}
+
+#editbar.editor-scrolled {
+  border-bottom: 1px solid #d2d2d2;
+  border-bottom: var(--toolbar-border);
+}
+
+.toolbar ul {
+  align-items: center;
+}
+
+.toolbar ul.menu_left {
+  padding-left: 5px;
+}
+
+.toolbar ul li {
+  margin: 7px 1px;
+}
+
+.toolbar ul li a, .toolbar .buttonicon {
+  color: inherit;
+}
+
+.toolbar .buttonicon {
+  background-color: transparent;
+  font-size: 15px;
+}
+.buttonicon-insertorderedlist:before,
+.buttonicon-insertunorderedlist:before,
+.buttonicon-indent:before,
+.buttonicon-outdent:before {
+  font-size: 16px !important;
+}
+
+.toolbar ul li.separator {
+  visibility: hidden;
+  width: 1px;
+  margin: 0 10px;
+  position: relative;
+}
+
+.toolbar.condensed ul li {
+  margin-left: 0;
+}
+
+.toolbar.condensed ul li.separator {
+  margin: 0 5px;
+}
+
+.toolbar ul li a {
+  background-color: transparent;
+  background: none;
+  border: none;
+  border-radius: 3px !important;
+  transition: background-color .1s;
+}
+
+.toolbar ul li a:hover, .toolbar ul li select:hover  {
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+  color: #485365;
+  color: var(--text-color);
+}
+.toolbar ul li a.selected {
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+}
+.toolbar ul li a.pressed,
+.toolbar ul li select:active {
+  color: #64d29b;
+  color: var(--primary-color);
+}
+
+.toolbar ul li select:active option {
+  background-color: #ffffff;
+  background-color: var(--bg-color);
+  color: #576273;
+  color: var(--text-soft-color);
+  padding: 5px;
+}
+
+.toolbar .menu_right li a.selected {
+  background-color: #576273;
+  background-color: var(--text-soft-color);
+  color: #ffffff;
+  color: var(--bg-color);
+}
+
+.toolbar ul li[data-key=showusers] {
+  margin: 0;
+  margin-left: 15px;
+  width: 45px;
+  height: 100%;
+}
+.toolbar ul li[data-key=showusers] > a {
+  width: 100%;
+  height: 100%;
+  border-radius: 0 !important;
+  box-shadow: 0px 0px 30px #4a9637 inset !important;
+  /* 4a9637 */
+}
+
+.toolbar .menu_right .separator {
+  display: none;
+}
+.toolbar .menu_right li {
+  margin-left: 10px;
+}
+
+.toolbar.cropped .menu_left {
+  height: 39px;
+  padding-top: 1px;
+}
+.toolbar .show-more-icon-btn {
+  font-size: 1.8rem;
+  color: #64d29b;
+  color: var(--primary-color);
+}
+
+@media (max-width: 1000px) {
+  .toolbar ul li.separator {
+    margin: 0 5px;
+    background: none;
+    display: block;
+  }
+}
+
+@media (max-width: 800px) {
+
+  .toolbar ul li {
+    margin: 5px 2px;
+  }
+
+  .toolbar .menu_right {
+    border-top: 1px solid #d2d2d2;
+    border-top: var(--toolbar-border);
+    background-color: #ffffff;
+    background-color: var(--bg-color);
+    padding: 0;
+  }
+
+  .toolbar ul li a:hover { background-color: transparent; }
+
+  .toolbar ul li.separator { margin: 0; display: none; }
+}
+
+
diff --git a/skins/st/src/components/users.css b/skins/st/src/components/users.css
new file mode 100644
index 0000000..beb498e
--- /dev/null
+++ b/skins/st/src/components/users.css
@@ -0,0 +1,52 @@
+table#otheruserstable {
+  margin-top: 20px;
+}
+
+.popup#users.chatAndUsers > .popup-content {
+  padding: 20px 10px;
+  height: 250px;
+  border-left: none;
+  transition: none;
+  border-bottom-color: #d2d2d2;
+  border-bottom-color: var(--border-color);
+}
+.popup#users.chatAndUsers #mycolorpicker.popup {
+  right: calc(100% + 30px);
+  top: 15px;
+}
+
+#otheruserstable .swatch {
+  border: none !important;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  margin-left: 1px;
+  margin-right: 15px;
+}
+
+#myusernameform {
+  margin-left: 35px;
+}
+
+input#myusernameedit {
+  min-width: 110px;
+  border: none !important;
+  background-color: transparent !important;
+  border-bottom: 1px solid #d2d2d2 !important;
+  border-bottom: 1px solid var(--border-color) !important;
+  border-radius: 0;
+  padding-bottom: 5px;
+}
+
+#myswatch {
+  border-radius: 50%;
+}
+
+#colorpicker {
+  margin-bottom: 25px;
+}
+
+#mycolorpickerpreview {
+  border-radius: 50%;
+}
\ No newline at end of file
diff --git a/skins/st/src/general.css b/skins/st/src/general.css
new file mode 100644
index 0000000..f51d46c
--- /dev/null
+++ b/skins/st/src/general.css
@@ -0,0 +1,15 @@
+html {
+  font-size: 15px;
+}
+
+body {
+  color: #485365;
+  color: var(--text-color);
+  font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family: var(--main-font-family);
+}
+
+h1 {
+  color: #64d29b;
+  color: var(--primary-color);
+}
\ No newline at end of file
diff --git a/skins/st/src/layout.css b/skins/st/src/layout.css
new file mode 100644
index 0000000..dc27f94
--- /dev/null
+++ b/skins/st/src/layout.css
@@ -0,0 +1,55 @@
+#outerdocbody {
+  margin: 0 auto;
+  padding-top: 20px;
+  width: 100%;
+}
+
+#editorcontainerbox {
+  background-color: #f2f3f4;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+}
+
+#editorcontainerbox .sticky-container {
+  width: 250px;
+}
+
+#outerdocbody iframe, #outerdocbody > #innerdocbody {
+  max-width: 900px;
+  padding: 40px 55px;
+  padding-left: var(--editor-horizontal-padding);
+  padding-right: var(--editor-horizontal-padding);
+  padding-top: var(--editor-vertical-padding);
+  padding-bottom: var(--editor-vertical-padding);
+  box-shadow: none;
+  border: 0;
+  border-radius: 8px 8px 0 0;
+  background-color: #ffffff;
+  background-color: var(--bg-color);
+  color: #485365;
+  color: var(--text-color);
+}
+#sidediv {
+  /* Padding must be the same than editor, otherwise it creates problem */
+  padding-top: 40px; /* = #innerdocbody iframe vertical padding */
+  padding-bottom: 40px;
+  padding-top: var(--editor-vertical-padding);
+  padding-bottom: var(--editor-vertical-padding);
+}
+
+@media (max-width:1000px) {
+  #outerdocbody {
+    padding-top: 0;
+  }
+  #outerdocbody iframe, #outerdocbody > #innerdocbody {
+    max-width: none;
+    border-radius: 0;
+  }
+}
+
+@media only screen and (max-width: 800px) {
+  #editorcontainerbox {
+    margin-bottom: 39px; /* margin for bottom toolbar */
+  }
+}
+
diff --git a/skins/st/src/pad-editor.css b/skins/st/src/pad-editor.css
new file mode 100644
index 0000000..f8436e8
--- /dev/null
+++ b/skins/st/src/pad-editor.css
@@ -0,0 +1,8 @@
+#innerdocbody {
+  font-size: 15px;
+  line-height: 25px;
+  padding: 0;
+  background: transparent;
+  color: #485365;
+  color: var(--text-color);
+}
diff --git a/skins/st/src/pad-variants.css b/skins/st/src/pad-variants.css
new file mode 100644
index 0000000..bd63604
--- /dev/null
+++ b/skins/st/src/pad-variants.css
@@ -0,0 +1,228 @@
+/* =========================== */
+/* === Super Light Toolbar === */
+/* =========================== */
+.super-light-toolbar .toolbar, .super-light-toolbar .popup-content, #pad_title  {
+  --text-color: var(--super-dark-color);
+  --text-soft-color: var(--dark-color);
+  --border-color: #e4e6e9;
+  --bg-soft-color: var(--light-color);
+  --bg-color: var(--super-light-color);
+}
+/* ===================== */
+/* === Light Toolbar === */
+/* ===================== */
+.light-toolbar .toolbar, .light-toolbar .popup-content, #pad_title {
+  --text-color: var(--super-dark-color);
+  --text-soft-color: var(--dark-color);
+  --border-color: var(--middle-color);
+  --bg-soft-color: var(--super-light-color);
+  --bg-color: var(--light-color);
+}
+/* ========================== */
+/* === Super Dark Toolbar === */
+/* ========================== */
+.super-dark-toolbar .toolbar, .super-dark-toolbar .popup-content, #pad_title {
+  --text-color: var(--super-light-color);
+  --text-soft-color: var(--light-color);
+  --border-color: var(--dark-color);
+  --bg-soft-color: var(--dark-color);
+  --bg-color: var(--super-dark-color);
+}
+.super-dark-toolbar.super-dark-editor .popup-content {
+  border: 1px solid var(--dark-color);
+  box-shadow: none;
+}
+/* ==================== */
+/* === Dark Toolbar === */
+/* ==================== */
+.dark-toolbar .toolbar, .dark-toolbar .popup-content, #pad_title  {
+  --text-color: var(--super-light-color);
+  --text-soft-color: var(--light-color);
+  --border-color: var(--super-dark-color);
+  --bg-soft-color: var(--super-dark-color);
+  --bg-color: var(--dark-color);
+}
+
+
+
+
+
+/* ============================ */
+/* == Super Light Background == */
+/* ============================ */
+.super-light-background #editorcontainerbox, .super-light-background #sidediv,
+.super-light-background #chatbox, .super-light-background #outerdocbody, .super-light-background {
+  --text-color: var(--super-dark-color);
+  --text-soft-color: var(--dark-color);
+  --border-color: #e4e6e9;
+  --bg-soft-color: var(--light-color);
+  --bg-color: var(--super-light-color);
+}
+.super-light-background  body, .full-width-editor.super-light-editor body:not(.comments-active) {
+  --scrollbar-bg: var(--super-light-color);
+  --scrollbar-track: var(--light-color);
+  --scrollbar-thumb: var(--dark-color);
+}
+.super-light-background .compact-display-content {
+  background-color: var(--super-light-color);
+}
+/* ====================== */
+/* == Light Background == */
+/* ====================== */
+.light-background #editorcontainerbox, .light-background #sidediv,
+.light-background #chatbox, .light-background #outerdocbody, .light-background {
+  --text-color: var(--super-dark-color);
+  --text-soft-color: var(--dark-color);
+  --border-color: var(--middle-color);
+  --bg-soft-color: var(--super-light-color);
+  --bg-color: var(--light-color);
+}
+.light-background  body, .full-width-editor.light-editor body:not(.comments-active) {
+  --scrollbar-bg: var(--light-color);
+  --scrollbar-track: var(--super-light-color);
+  --scrollbar-thumb: var(--dark-color);
+}
+.light-background .compact-display-content {
+  background-color: var(--light-color);
+}
+/* =========================== */
+/* == Super Dark Background == */
+/* =========================== */
+.super-dark-background #editorcontainerbox, .super-dark-background #sidediv,
+.super-dark-background #chatbox, .super-dark-background #outerdocbody, .super-dark-background {
+  --text-color: var(--super-light-color);
+  --text-soft-color: var(--light-color);
+  --border-color: var(--dark-color);
+  --bg-soft-color: var(--dark-color);
+  --bg-color: var(--super-dark-color);
+}
+.super-dark-background body, .full-width-editor.super-dark-editor body:not(.comments-active) {
+  --scrollbar-bg: var(--super-dark-color);
+  --scrollbar-track: var(--dark-color);
+  --scrollbar-thumb: var(--light-color);
+}
+.super-dark-background .compact-display-content {
+  background-color: var(--super-dark-color);
+}
+/* Special combinaison with toolbar */
+.super-dark-background.super-dark-toolbar .popup-content {
+  border: 1px solid var(--dark-color);
+  box-shadow: none;
+}
+/* ===================== */
+/* == Dark Background == */
+/* ===================== */
+.dark-background #editorcontainerbox, .dark-background #sidediv,
+.dark-background #chatbox, .dark-background #outerdocbody, .dark-background  {
+  --text-color: var(--super-light-color);
+  --text-soft-color: var(--light-color);
+  --border-color: var(--super-dark-color);
+  --bg-soft-color: var(--super-dark-color);
+  --bg-color: var(--dark-color);
+}
+.dark-background  body, .full-width-editor.dark-editor body:not(.comments-active) {
+  --scrollbar-bg: var(--dark-color);
+  --scrollbar-track: var(--super-dark-color);
+  --scrollbar-thumb: var(--light-color);
+}
+.dark-background .compact-display-content {
+  background-color: var(--dark-color);
+}
+/* Special combinaison with toolbar */
+.dark-background.dark-toolbar .popup-content, .dark-editor.dark-toolbar .popup-content {
+  box-shadow: 0 0 14px 0px var(--super-dark-color);
+}
+
+
+
+
+
+/* ======================== */
+/* == Super Light Editor == */
+/* ======================== */
+.super-light-editor #outerdocbody iframe, .super-light-editor #outerdocbody > #innerdocbody {
+  --bg-color: var(--super-light-color);
+}
+.super-light-editor #innerdocbody {
+  --text-color: var(--super-dark-color);
+}
+/* ================== */
+/* == Light Editor == */
+/* ================== */
+.light-editor #outerdocbody iframe, .light-editor #outerdocbody > #innerdocbody {
+  --bg-color: var(--light-color);
+}
+.light-editor #innerdocbody {
+  --text-color: var(--super-dark-color);
+}
+/* ======================= */
+/* == Super Dark Editor == */
+/* ======================= */
+.super-dark-editor #outerdocbody iframe, .super-dark-editor #outerdocbody > #innerdocbody {
+  --bg-color: var(--super-dark-color);
+}
+.super-dark-editor #innerdocbody {
+  --text-color: var(--super-light-color);
+}
+/* ================= */
+/* == Dark Editor == */
+/* ================= */
+.dark-editor #outerdocbody iframe, .dark-editor #outerdocbody > #innerdocbody {
+  --bg-color: var(--dark-color);
+}
+.dark-editor #innerdocbody {
+  --text-color: var(--super-light-color);
+}
+
+
+/* ======================================== */
+/* == Combinaison with background/editor == */
+/* ======================================== */
+.super-light-editor.super-light-background #outerdocbody,
+.light-editor.light-background #outerdocbody,
+.super-dark-editor.super-dark-background #outerdocbody,
+.dark-editor.dark-background #outerdocbody {
+  padding-top: 0;
+}
+@media (min-width: 1001px) {
+  .super-light-editor.super-light-background,
+  .light-editor.light-background,
+  .super-dark-editor.super-dark-background,
+  .dark-editor.dark-background {
+    --editor-horizontal-padding: 35px;
+    --editor-vertical-padding: 20px;
+  }
+}
+
+/* ===================================== */
+/* == Combinaison with toolbar/editor == */
+/* ===================================== */
+.super-light-editor.super-light-toolbar .toolbar,
+.light-editor.light-toolbar .toolbar,
+.super-dark-editor.super-dark-toolbar .toolbar,
+.dark-editor.dark-toolbar .toolbar {
+  --toolbar-border: 1px solid var(--border-color);
+}
+
+
+/* ======================= */
+/* == Full Width Editor == */
+/* ======================= */
+.full-width-editor #outerdocbody iframe, .full-width-editor #outerdocbody > #innerdocbody {
+  max-width: none !important;
+  border-radius: 0;
+}
+.full-width-editor #outerdocbody {
+  padding: 0;
+  margin: 0;
+}
+@media (min-width: 1001px) {
+  .full-width-editor {
+    --editor-horizontal-padding: 35px !important;
+    --editor-vertical-padding: 20px !important;
+  }
+}
+.full-width-editor ::-webkit-scrollbar-track,
+.full-width-editor ::-webkit-scrollbar-thumb {
+  border-radius: 0px;
+}
\ No newline at end of file
diff --git a/skins/st/src/plugins/author_hover.css b/skins/st/src/plugins/author_hover.css
new file mode 100644
index 0000000..6a0fbe4
--- /dev/null
+++ b/skins/st/src/plugins/author_hover.css
@@ -0,0 +1,10 @@
+.authortooltip {
+  opacity: 1!important;
+  border-radius: 2px;
+  padding: 4px 10px 3px!important;
+  text-transform: uppercase;
+  font-size: 13px!important;
+  font-weight: 700;
+  color: #000;
+  background-color: rgba(255, 255, 255, 0.85) !important;
+}
\ No newline at end of file
diff --git a/skins/st/src/plugins/brightcolorpicker.css b/skins/st/src/plugins/brightcolorpicker.css
new file mode 100644
index 0000000..8db2880
--- /dev/null
+++ b/skins/st/src/plugins/brightcolorpicker.css
@@ -0,0 +1,14 @@
+#colorpicker a.brightColorPicker-cancelButton {
+    background: none;
+    padding: 0;
+    padding-top: 10px;
+    font-weight: bold;
+    border: none;
+}
+
+.brightColorPicker-colorPanel {
+    background-color: white !important;
+    box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08) !important;
+    border-radius: 3px !important;
+    padding: 15px !important;
+}
\ No newline at end of file
diff --git a/skins/st/src/plugins/comments.css b/skins/st/src/plugins/comments.css
new file mode 100644
index 0000000..005890e
--- /dev/null
+++ b/skins/st/src/plugins/comments.css
@@ -0,0 +1,112 @@
+.sidebar-comment .btn {
+  margin-top: 10px;
+  padding: 3px 8px;
+  font-size: .9rem;
+  margin: 10px 0 5px 0;
+}
+.sidebar-comment .btn.btn-primary:not(#comment-create-btn) {
+  background-color: #576273;
+  background-color: var(--text-soft-color);
+}
+.sidebar-comment .suggestion-create {
+  margin-top: 10px;
+}
+.suggestion-display .from-value, .suggestion-display .to-value {
+  color: #64d29b;
+  color: var(--primary-color);
+  font-weight: bold;
+  opacity: 1;
+}
+.suggestion-display .from-value {
+  margin-right: 5px;
+}
+.comment-actions-wrapper .buttonicon {
+  opacity: .8;
+}
+.comment-actions-wrapper .buttonicon:hover {
+  opacity: 1;
+}
+.comment-actions-wrapper .comment-edit {
+  margin-right: 5px;
+}
+[type="checkbox"] + label.label-suggestion-checkbox {
+  margin-left: 5px;
+  padding-left: 2.4rem;
+}
+.sidebar-comment .full-display-content {
+  margin-left: -10px;
+  box-shadow: none;
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+  border: 1px solid #ffffff;
+  border: 1px solid var(--bg-color);
+}
+.comment-reply {
+  border-top: 1px solid #ffffff;
+  border-top: 1px solid var(--bg-color);
+  background-color: inherit;
+}
+.comment-reply textarea, .comment-reply input[type="text"] {
+  background-color: #ffffff;
+  background-color: var(--bg-color);
+}
+.btn.revert-suggestion-btn {
+  padding-left: 0;
+}
+.comment-edit-form {
+  margin-top: 15px;
+}
+
+/* MODAL */
+.comment-modal .full-display-content {
+  box-shadow: none;
+  margin: 0 !important;
+  border: none;
+  background-color: #ffffff;
+  background-color: var(--bg-color);
+}
+.comment-modal .comment-modal-comment {
+  padding: 0;
+}
+.comment-modal .comment-reply textarea, .comment-modal .comment-reply input[type="text"] {
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+}
+.comment-modal .comment-reply {
+  border-top: 1px solid #f2f3f4;
+  border-top: 1px solid var(--bg-soft-color);
+}
+.comment-modal .full-display-content .comment-title-wrapper,
+.comment-modal .full-display-content .comment-reply {
+  padding: 15px;
+}
+
+
+/* NEW COMMENT POPUP */
+.new-comment-popup textarea {
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+}
+.new-comment-popup .suggestion {
+  margin-bottom: 10px;
+}
+
+
+/* EDITOR COMMENTEED LINE */
+#innerdocbody .ace-line .comment {
+  background-color: #fffacc;
+  color: var(--super-dark-color);
+}
+
+
+@media (min-width: 1200px) {
+  #comments {
+    width: 300px;
+  }
+  .sidebar-comment .full-display-content {
+    margin-left: 10px;
+  }
+  .compact-display-content {
+    padding-left: 20px;
+  }
+}
\ No newline at end of file
diff --git a/skins/st/src/plugins/font_color.css b/skins/st/src/plugins/font_color.css
new file mode 100644
index 0000000..95f81cf
--- /dev/null
+++ b/skins/st/src/plugins/font_color.css
@@ -0,0 +1,38 @@
+.font-color-icon {
+  display: none !important;
+}
+
+#font-color {
+  display: list-item !important;
+}
+
+.color\:black,
+[data-color=black] {
+  color: #485365;
+  color: var(--text-color);
+}
+
+.color\:red,
+[data-color=red] {
+  color: #F44336;
+}
+
+.color\:green,
+[data-color=green] {
+  color: #66d29c;
+}
+
+.color\:blue,
+[data-color=blue] {
+  color: #2196f3;
+}
+
+.color\:yellow,
+[data-color=yellow] {
+  color: #ffeb3b;
+}
+
+.color\:orange,
+[data-color=orange] {
+  color: #FF9800;
+}
\ No newline at end of file
diff --git a/skins/st/src/plugins/set_title_on_pad.css b/skins/st/src/plugins/set_title_on_pad.css
new file mode 100644
index 0000000..da30f7e
--- /dev/null
+++ b/skins/st/src/plugins/set_title_on_pad.css
@@ -0,0 +1,21 @@
+#pad_title {
+  border-bottom: 1px solid var(--border-color) !important;
+  border-bottom: 1px solid white !important;
+/*
+  background-color: var(--bg-color) !important;
+*/
+	
+  background-color: white;
+	/*
+  background: -webkit-linear-gradient(to bottom,#009000,#51a574);
+  background: linear-gradient(to bottom,#009000,#51a574);
+  */
+}
+#edit_title {
+  /*color: var(--text-soft-color);*/
+  color: #4a9637;
+}
+
+#title h1 {
+  color: #4a9637;
+}
diff --git a/skins/st/src/plugins/tables2.css b/skins/st/src/plugins/tables2.css
new file mode 100644
index 0000000..d24056d
--- /dev/null
+++ b/skins/st/src/plugins/tables2.css
@@ -0,0 +1,239 @@
+/* MENU ICON*/
+#editbar #tbl_menu_list {
+  width: auto !important;
+}
+#tbl-menu {
+  background: none !important;
+  width: 18px !important;
+  padding-left: 2px !important;
+}
+#tbl-menu:before {
+  content: "\F0CE";
+}
+
+#tbl_menu_list > a {
+  font-size: 16px;
+  margin-top: 8px;
+  padding-left: 0;
+  padding-right: 2px;
+  padding-bottom: 4px;
+}
+
+/* DROP DOWN MENU */
+#tbl_context_menu {
+  margin-left: -24px;
+  border: none;
+  margin-top: 9px;
+  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+  border-radius: 3px;
+  background-color: white;
+  font-size: 100%;
+  line-height: 1.7;
+}
+
+#tbl_context_menu > .bd {
+  border: none;
+  background-color: transparent;
+}
+
+#tbl_context_menu > .bd > ul {
+  padding: 6px 0;
+}
+
+/* TABLE SIZE PICKER */
+#tbl_insert  {
+  background-color: white;
+  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+  border-radius: 3px;
+}
+
+#tbl_insert .bd {
+  border: none;
+  text-align: center;
+  background-color: transparent;
+  padding-top: 4px;
+}
+
+#tbl_insert .yuimenuitemlabel { text-align: center; }
+
+#tbl_insert .ft {
+  margin: 0;
+  border: none;
+  background-color: transparent;
+  padding: 6px;
+  padding-top: 0;
+}
+
+#matrix_table tr td {
+  border: 1px solid #d7d7d7;
+  height: 1px;
+  padding: 7px;
+  width: 11px;
+  background-color: #fbfbfb;
+  border-radius: 1px;
+}
+#matrix_table tr td.selected {
+  border: 1px solid #789dce;
+  background-color: #b3d4ff;
+}
+
+/* TABLE SETTINGS POPUP */
+.yui-skin-sam .yui-panel-container {
+  padding: 0;
+  margin: 0;
+  background-color: #fff;
+  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+  border-radius: 5px;
+  padding-bottom: 15px;
+}
+
+.yui-skin-sam .yui-panel-container .yui-panel {
+  border: none !important;
+  background: none;
+  box-shadow: none !important;
+}
+
+.yui-skin-sam .yui-panel-container .yui-panel .hd {
+  cursor: move;
+  padding: 0;
+  border: 0;
+  background: 0;
+  margin: 0;
+  font-size: 14px;
+  line-height: 40px;
+  text-transform: uppercase;
+  padding: 0 15px;
+  padding-top: 5px;
+  font-weight: bold;
+  border-bottom: 1px solid #d2d2d2;
+}
+
+.yui-skin-sam .yui-panel-container .yui-panel .container-close {
+  top: 15px;
+  border: none;
+  background: none;
+  color: white;
+  text-indent: 0;
+}
+.yui-skin-sam .yui-panel-container .yui-panel .container-close::before {
+  content: "x";
+  color: #6f757a;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.yui-skin-sam .yui-panel-container .yui-panel .bd {
+  background: none;
+  border: none;
+  box-shadow: none;
+  padding: 15px;
+  background-color: transparent !important;
+}
+
+.yui-panel .underlay, .yui-skin-sam .yui-panel-container.shadow .underlay {
+  display: none !important;
+}
+
+#div_tbl_btn_close {
+  float: right;
+  position: relative;
+  width: 100%;
+  margin-top: 10px;
+  right: 0;
+  bottom: 0;
+}
+
+#tbl_btn_close {
+  border: none;
+  color: #ffffff;
+  height: 30px;
+  width: 100%;
+  border-radius: 3px;
+  text-transform: uppercase;
+}
+#tbl_btn_close:hover { cursor: pointer; }
+
+.yui-skin-sam .yui-button {
+  background: none;
+  background-color: white;
+  border: none;
+  height: 24px;
+  margin-bottom: -4px;
+  margin-top: 5px;
+}
+
+.yui-skin-sam .yui-button .first-child { margin: 0; border: none; }
+
+.yui-skin-sam .yui-split-button button {
+  padding: 0;
+  background: none !important;
+}
+
+.yui-skin-sam .yui-split-button button em:not(.color-picker-button) {
+  font-style: normal !important;
+  border-bottom: 1px solid #b5b7b7;
+  padding: 0 5px;
+  margin: 0 5px;
+  padding-bottom: 3px;
+}
+
+button#yui-gen13-button {
+  margin-left: -5px;
+}
+
+button .color-picker-button {
+  border: 1px solid #c1c2c2;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+}
+
+#even-row-bg-color, #single-row-bg-color {
+  margin-right: 5px;
+}
+#single-col-bg-color, #odd-row-bg-color {
+  margin-left: 7px;
+}
+
+#yui-tbl-prop-panel .text-input[type=text] {
+  border: 1px solid #d2d2d2;
+  float: right;
+  height: 10px;
+  border-radius: 3px;
+  padding: 8px 10px;
+}
+
+#text_input_message {
+  background-color: #64d29b;
+  padding: 0 5px;
+  color: white;
+  font-size: 12px;
+  border-radius: 5px;
+  font-weight: bold;
+  display: none;
+}
+
+/* TABLES INSIDE THE PAD */
+td[name=tData] {
+  /*border: 1px solid grey !important;*/
+}
+
+#yui-picker-panel_c
+{
+  padding-bottom: 40px;
+}
+
+div#yui-picker-panel_h {
+  line-height: 1.8em;
+  font-size: 13px;
+  padding: 9px 15px 5px;
+}
+
+#yui-picker-panel .ft {
+  position: relative;
+  border: none;
+  width: 100%;
+  padding: 0;
+  margin-top: 20px;
+}
\ No newline at end of file
diff --git a/skins/st/timeslider.css b/skins/st/timeslider.css
new file mode 100644
index 0000000..263e0e5
--- /dev/null
+++ b/skins/st/timeslider.css
@@ -0,0 +1,98 @@
+#timeslider-slider #ui-slider-handle {
+  border-radius: 3px;
+  width: 12px;
+  height: 28px;
+  background-color: #64d29b;
+  background-color: var(--primary-color);
+}
+
+#timeslider-slider #ui-slider-bar {
+  border-radius: 3px;
+  background-color: #d2d2d2;
+  background-color: var(--border-color);
+}
+#slider-btn-container {
+  margin: -18px 15px 0 20px;
+}
+#slider-btn-container #playpause_button_icon {
+  color: #ffffff;
+  color: var(--bg-color);
+  background-color: #64d29b;
+  background-color: var(--primary-color);
+  border: none;
+  margin-right: 5px;
+  padding-top: 3px;
+  width: 45px;
+  height: 45px;
+}
+#slider-btn-container #playpause_button_icon:not(.pause) {
+  padding-left: 4px;
+}
+#slider-btn-container .stepper {
+  border: 2px solid !important;
+  height: 30px;
+  width: 30px;
+  line-height: 28px;
+  margin-left: 5px;
+  font-size: 13px;
+  color: #64d29b;
+  color: var(--primary-color);
+  border-color: #64d29b;
+  border-color: var(--primary-color);
+}
+#slider-btn-container .stepper.disabled {
+  opacity: .5;
+}
+
+.timeslider #editbar .buttontext {
+  background-color: #576273;
+  background-color: var(--text-soft-color);
+  color: #ffffff;
+  color: var(--bg-color);
+  margin: 0;
+}
+
+#editbar {
+  display: block;
+  padding-bottom: 5px;
+}
+
+#editbar li > a {
+  border-radius: 3px;
+}
+
+#timeslider-slider #timer {
+  opacity: .7;
+  top: -12px;
+  font-size: .8em;
+}
+
+.timeslider #authorsList .author {
+  padding: 2px 5px;
+  border-radius: 3px;
+  margin-right: 4px;
+  margin-bottom: 4px;
+}
+
+.timeslider-title {
+  font-size: 1.8rem !important;
+}
+.timeslider-subtitle {
+  margin-top: 6px;
+  font-size: .9em;
+}
+
+@media (max-width: 800px) {
+
+  #slider-btn-container {
+    margin-top: 0;
+    margin-right: 5px;
+  }
+  #slider-btn-container #playpause_button_icon {
+    width: 30px;
+    height: 30px;
+  }
+  #slider-btn-container #playpause_button_icon:before {
+    font-size: 18px;
+  }
+}
\ No newline at end of file
diff --git a/skins/st/timeslider.js b/skins/st/timeslider.js
new file mode 100644
index 0000000..1322ec4
--- /dev/null
+++ b/skins/st/timeslider.js
@@ -0,0 +1,3 @@
+function customStart()
+{
+}