".
+ * The pointer cursor on the name cell makes the affordance visible —
+ * the swatch keeps its own (color-picker) click semantics, so leave
+ * its cursor alone.
+ */
+#otheruserstable tr[data-authorId] .usertdname {
+ cursor: pointer;
+}
+#otheruserstable tr[data-authorId]:hover .usertdname {
+ text-decoration: underline;
+}
+
+.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: 10px;
+}
+
+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/src/static/skins/margin/src/general.css b/src/static/skins/margin/src/general.css
new file mode 100644
index 00000000000..1caf6a0f752
--- /dev/null
+++ b/src/static/skins/margin/src/general.css
@@ -0,0 +1,11 @@
+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/src/static/skins/margin/src/layout.css b/src/static/skins/margin/src/layout.css
new file mode 100644
index 00000000000..1ec3886c8f5
--- /dev/null
+++ b/src/static/skins/margin/src/layout.css
@@ -0,0 +1,48 @@
+#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: calc(var(--editor-vertical-padding) + 15px);
+ padding-bottom: calc(var(--editor-vertical-padding) + 15px);
+}
+
+@media (max-width:1000px) {
+ #outerdocbody {
+ padding-top: 0;
+ }
+ #outerdocbody iframe, #outerdocbody > #innerdocbody {
+ max-width: none;
+ border-radius: 0;
+ }
+}
diff --git a/src/static/skins/margin/src/pad-editor.css b/src/static/skins/margin/src/pad-editor.css
new file mode 100644
index 00000000000..5c8a37f3329
--- /dev/null
+++ b/src/static/skins/margin/src/pad-editor.css
@@ -0,0 +1,48 @@
+/* pad-editor.css — loaded INSIDE the inner editor iframe by Etherpad.
+ * Defines theme tokens here too, since CSS from the parent document
+ * doesn't cascade into iframes. The data-theme attribute is propagated
+ * onto html/#innerdocbody by pad.js. */
+
+#innerdocbody {
+ background: transparent;
+ color: var(--text-color, #485365);
+}
+
+[data-theme="editorial"] { --text-color:#1c1916; --bg-color:#fbf8f2; --m-bg:#f5f0e8; }
+[data-theme="brutalist"] { --text-color:#000; --bg-color:#fff; --m-bg:#f3f3f0; }
+[data-theme="paper"] { --text-color:#2a2520; --bg-color:#fbf6ec; --m-bg:#f6f1e8; }
+[data-theme="crt"] { --text-color:#7fffae; --bg-color:#08200f; --m-bg:#04140a; }
+[data-theme="industrial"] { --text-color:#e6e8eb; --bg-color:#14171c; --m-bg:#0d0f12; }
+
+[data-theme] #innerdocbody,
+[data-theme] body { background: var(--m-bg) !important; color: var(--text-color) !important; }
+[data-theme] #innerdocbody a { color: var(--text-color); }
+
+[data-theme="crt"] #innerdocbody { text-shadow: 0 0 6px rgba(127,255,174,.45); font-family: "IBM Plex Mono", ui-monospace, monospace; }
+
+/* Comment highlights in the editor — upstream forces #fffacc + dark text,
+ * which looks like a white slab on dark themes. Replace with a tinted
+ * underline-ish highlight that adapts to the current theme. */
+[data-theme] #innerdocbody .ace-line .comment {
+ background-color: color-mix(in srgb, var(--accent, #f5d76e) 22%, transparent) !important;
+ color: inherit !important;
+ box-shadow: inset 0 -2px 0 0 var(--accent, #f5d76e);
+ border-radius: 1px;
+}
+[data-theme="editorial"] { --accent:#b8451f; }
+[data-theme="brutalist"] { --accent:#ff3b00; }
+[data-theme="paper"] { --accent:#7a5a2f; }
+[data-theme="crt"] { --accent:#f5d76e; }
+[data-theme="industrial"] { --accent:#ff8a3d; }
+
+/* CRT drop-cap on the very first line of the pad. Etherpad wraps each line
+ * in a , so target the first child block of #innerdocbody. */
+[data-theme="crt"] #innerdocbody > div:first-child::first-letter {
+ font-family: "VT323", "IBM Plex Mono", monospace;
+ font-size: 3.2em;
+ line-height: 0.85;
+ float: left;
+ padding: 0.05em 0.12em 0 0;
+ color: #f5d76e;
+ text-shadow: 0 0 10px rgba(245,215,110,.7), 0 0 22px rgba(245,215,110,.35);
+}
diff --git a/src/static/skins/margin/src/pad-variants.css b/src/static/skins/margin/src/pad-variants.css
new file mode 100644
index 00000000000..1b335d3ab95
--- /dev/null
+++ b/src/static/skins/margin/src/pad-variants.css
@@ -0,0 +1,228 @@
+/* =========================== */
+/* === Super Light Toolbar === */
+/* =========================== */
+.super-light-toolbar .toolbar, .super-light-toolbar .popup-content, .super-light-toolbar #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, .light-toolbar #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, .super-dark-toolbar #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, .dark-toolbar #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: 20px;
+ --editor-vertical-padding: 5px;
+ }
+}
+
+/* ===================================== */
+/* == 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: 20px !important;
+ --editor-vertical-padding: 5px !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/src/static/skins/margin/src/plugins/author_hover.css b/src/static/skins/margin/src/plugins/author_hover.css
new file mode 100644
index 00000000000..6a0fbe42a7a
--- /dev/null
+++ b/src/static/skins/margin/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/src/static/skins/margin/src/plugins/brightcolorpicker.css b/src/static/skins/margin/src/plugins/brightcolorpicker.css
new file mode 100644
index 00000000000..f267888f7cb
--- /dev/null
+++ b/src/static/skins/margin/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/src/static/skins/margin/src/plugins/comments.css b/src/static/skins/margin/src/plugins/comments.css
new file mode 100644
index 00000000000..005890ef484
--- /dev/null
+++ b/src/static/skins/margin/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/src/static/skins/margin/src/plugins/font_color.css b/src/static/skins/margin/src/plugins/font_color.css
new file mode 100644
index 00000000000..43647ac4d99
--- /dev/null
+++ b/src/static/skins/margin/src/plugins/font_color.css
@@ -0,0 +1,41 @@
+.font-color-icon {
+ display: none !important;
+}
+
+#font-color {
+ display: list-item !important;
+}
+.readonly #font-color {
+ display: none !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/src/static/skins/margin/src/plugins/set_title_on_pad.css b/src/static/skins/margin/src/plugins/set_title_on_pad.css
new file mode 100644
index 00000000000..9ab1e2a126e
--- /dev/null
+++ b/src/static/skins/margin/src/plugins/set_title_on_pad.css
@@ -0,0 +1,7 @@
+#pad_title {
+ border-bottom: 1px solid var(--border-color) !important;
+ background-color: var(--bg-color) !important;
+}
+#edit_title {
+ color: var(--text-soft-color);
+}
\ No newline at end of file
diff --git a/src/static/skins/margin/src/plugins/tables2.css b/src/static/skins/margin/src/plugins/tables2.css
new file mode 100644
index 00000000000..d24056d4b2e
--- /dev/null
+++ b/src/static/skins/margin/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/src/static/skins/margin/timeslider.css b/src/static/skins/margin/timeslider.css
new file mode 100644
index 00000000000..dc52de73c34
--- /dev/null
+++ b/src/static/skins/margin/timeslider.css
@@ -0,0 +1,108 @@
+#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;
+}
+
+.timeslider #outerdocbody > #sidediv {
+ padding-top: 30px;
+ padding-bottom: 30px;
+}
+
+.timeslider #outerdocbody > #innerdocbody {
+ padding-top: 30px;
+ padding-bottom: 30px;
+}
+
+@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;
+ }
+}
diff --git a/src/static/skins/margin/timeslider.js b/src/static/skins/margin/timeslider.js
new file mode 100644
index 00000000000..75c4a3114bd
--- /dev/null
+++ b/src/static/skins/margin/timeslider.js
@@ -0,0 +1,42 @@
+'use strict';
+
+// The timeslider page loads margin's pad.css, whose theme tokens live under
+// [data-theme="..."][data-mode="..."]. Without this bootstrap the history
+// view (and the in-place #history-frame iframe spun up by pad_mode.ts) would
+// render with no theme applied — visually broken vs the pad it came from.
+// Keep this list in sync with MARGIN_THEMES in pad.js.
+const MARGIN_THEME_VALUES = [
+ 'colibris', 'editorial', 'brutalist', 'paper', 'crt', 'industrial',
+];
+const MARGIN_THEME_DEFAULT = 'colibris';
+const MARGIN_MODE_DEFAULTS = {
+ colibris: 'light', editorial: 'light', brutalist: 'light',
+ paper: 'light', crt: 'dark', industrial: 'dark',
+};
+
+const readStorage = (key) => {
+ try { return localStorage.getItem(key); } catch (_) { return null; }
+};
+
+// When opened as the in-place history iframe (#history-frame) prefer the
+// parent doc's live attribute over localStorage — that way history mirrors
+// whatever the pad currently shows even if the user toggled theme after
+// localStorage was last written.
+const readFromParent = (attr) => {
+ try {
+ if (window.parent && window.parent !== window) {
+ return window.parent.document.documentElement.getAttribute(attr);
+ }
+ } catch (_) { /* cross-origin — ignore */ }
+ return null;
+};
+
+let theme = readFromParent('data-theme') || readStorage('marginTheme');
+if (!MARGIN_THEME_VALUES.includes(theme)) theme = MARGIN_THEME_DEFAULT;
+let mode = readFromParent('data-mode') || readStorage('marginMode');
+if (mode !== 'light' && mode !== 'dark') mode = MARGIN_MODE_DEFAULTS[theme] || 'light';
+document.documentElement.setAttribute('data-theme', theme);
+document.documentElement.setAttribute('data-mode', mode);
+
+window.customStart = () => {
+};