Skip to content

Instantly share code, notes, and snippets.

@justinkelly
Last active November 14, 2023 23:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save justinkelly/95e7ea152be9ffc149cfd435b4714d65 to your computer and use it in GitHub Desktop.
Save justinkelly/95e7ea152be9ffc149cfd435b4714d65 to your computer and use it in GitHub Desktop.
Synology Notes UI update using TamperMonkey, install Tampermonkely extension in your browser, then click the Raw button on this page to install the script
// ==UserScript==
// @name Synology Notes UI
// @homepage https://github.com/justinkelly/Synology-Notes-UI-update-tampermonkey
// @version 0.2.8
// @description Make Synology Notes UI look similar to Notion
// @author Justin Kelly
// @include https://*/?launchApp=SYNO.SDS.NoteStation.Application*
// @icon https://global.download.synology.com/download/Package/img/NoteStation/2.6.1-2450/thumb_256.png
// @namespace https://github.com/justinkelly/Synology-Notes-UI-update-tampermonkey
// @supportURL https://github.com/justinkelly/Synology-Notes-UI-update-tampermonkey
// @downloadURL https://gist.github.com/justinkelly/95e7ea152be9ffc149cfd435b4714d65/raw/Synology_Notes_UI.user.js
// @updateURL https://gist.github.com/justinkelly/95e7ea152be9ffc149cfd435b4714d65/raw/Synology_Notes_UI.user.js
// @grant none
// ==/UserScript==
function GM_addStyle(css) {
const style = document.getElementById("GM_addStyleBy8626") || (function() {
const style = document.createElement('style');
style.type = 'text/css';
style.id = "GM_addStyleBy8626";
document.head.appendChild(style);
return style;
})();
const sheet = style.sheet;
sheet.insertRule(css, (sheet.rules || sheet.cssRules || []).length);
}
//body
GM_addStyle("body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif';}");
GM_addStyle(".syno-ns-win .syno-ns-note-snippet-container .syno-ns-note-snippet-title { font-weight: 600;}");
GM_addStyle(".sds-window-v5 .x-layout-split.x-layout-split-west {border-right-width: 0px;}");
GM_addStyle(".syno-ns-note-container-panel {border-right-width: 1px;border-right-color: rgb(223, 225, 228);}");
GM_addStyle(".x-layout-split-west {background: rgba(55, 53, 47, 0.08)}");
//remove snippet/date in list
GM_addStyle(".syno-ns-note-snippet-thumbnail{display:none;}");
//top menu bar
GM_addStyle(".syno-ns-win .x-window-tl {background: rgb(244, 245, 247)}");
GM_addStyle(".sds-standalone-main-window-header-text {display:none}");
GM_addStyle("#ext-gen60 {display:none}");
GM_addStyle("#ext-gen65 {z-index: 2; overflow: initial;}");
GM_addStyle(".sds-standalone-main-window .sds-standalone-main-window-header { padding: 7px 18px;}");
GM_addStyle("#ext-gen65 {float:right}");
GM_addStyle(".syno-ns-win .syno-ns-mainpanel .syno-ns-toolbar {padding-top: 8px;}");
GM_addStyle("#ext-comp-1230 {background-color: rgb(244, 245, 247); border-bottom: 1px solid rgb(223, 225, 228);}");
GM_addStyle(".sds-window-v5 .x-panel-tbar .x-toolbar-layout-ct { padding-bottom: 4px;}");
GM_addStyle(".syno-ns-win .syno-ns-mainpanel .syno-ns-toolbar { padding-top: 4px;}");
GM_addStyle("#ext-comp-1233 { padding-top: 0px;}");
//left panel
GM_addStyle("#ext-gen96 {border-right: 1px solid rgb(223, 225, 228)}");
//middle panel
GM_addStyle(".syno-ns-win .syno-ns-note-container-panel {padding-left: 0px;padding-top:5px;}");
GM_addStyle(".syno-ns-win .syno-ns-note-snippet-container .syno-ns-note-snippet-content { color: rgb(46, 46, 46); opacity: .5;}");
//search bar
GM_addStyle("#ext-gen79 {background:#f3f2f1}");
//tree background
GM_addStyle("div.syno-ux-treepanel {background: rgb(238, 239, 241);}");
//tree border right
GM_addStyle("#ext-comp-1022 {border-right: 1px solid #edebe9;}");
//tree icons
GM_addStyle(".syno-ns-win .x-tree-node .x-tree-node-el .x-tree-node-icon { opacity: 0.7; }");
//tree text
GM_addStyle(".syno-ux-treepanel .x-tree-root-ct .x-tree-node-ct a span {color: rgba(25, 23, 17, 0.6);font-weight: 500; }");
//tree text selected
GM_addStyle(".syno-ns-win .x-tree-node .x-tree-selected .syno-ns-notebook-title {font-weight: 600; color: rgb(55, 53, 47);}");
GM_addStyle(".syno-ns-win .x-tree-node .x-tree-selected .syno-ns-notebook-total {font-weight: 600; color: rgb(55, 53, 47);}");
GM_addStyle(".syno-ns-win .x-tree-node .x-tree-selected .x-tree-node-icon {background-position: 0px 0px;}");
GM_addStyle("div.x-tree-selected {color: rgb(253, 253, 253);")
GM_addStyle(".syno-ns-win .x-tree-node .x-tree-selected {background: rgb(253, 253, 253);");
//main white section
GM_addStyle("#ext-comp-1239 { padding-top: 0px;}");
GM_addStyle("#ext-comp-1022-xsplit {border-top: 1px solid #edebe9;}");
//middle panel
GM_addStyle("#ext-gen135 {padding-left: 7px;}");
GM_addStyle("#ext-comp-1028-xsplit {display:none;}");
GM_addStyle(".syno-ns-win .syno-ns-note-snippet-container {margin: 0;padding: 8px 2px 0px 5px;border-color: rgb(223, 225, 228);}");
GM_addStyle(".syno-ns-win .syno-ns-note-snippet-group-container.syno-ns-note-snippet-container-select .syno-ns-note-snippet-container { background-color: rgb(244, 245, 247); border-left: 2px solid rgb(8, 109, 214); }");
GM_addStyle(".syno-ns-win .syno-ns-note-toolbar-ct { margin-right: 0; border-color: rgb(223, 225, 228); }");
GM_addStyle(".syno-ns-win .syno-ns-note-group-header { background-color: rgb(238, 239, 241); color: rgba(25, 23, 17, 0.6); font-weight: 500; padding: 0px 10px; border-color: rgb(223, 225, 228); margin-right: 0px;}");
//buttons
GM_addStyle(".syno-ux-button-default { background-color: inherit;}");
GM_addStyle(".syno-ns-win .syno-ns-mainpanel .syno-ns-toolbar .syno-ns-create-btn {background-image: none; background-color: rgb(8, 109, 214); border: 1px solid rgb(8, 109, 214);}");
GM_addStyle(".syno-ns-win .syno-ns-mainpanel .syno-ns-toolbar .syno-ns-create-btn:hover {background-image: none; --tw-brightness: brightness(1.25);filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);}");
GM_addStyle(".syno-ns-win .syno-ns-mainpanel .syno-ns-toolbar .syno-ns-create-btn.syno-ux-button-dropdown.syno-ux-button-split button:first-child { border-right-color: rgb(8, 109, 214);}");
//3rd level notes
GM_addStyle("[aria-level='3'] .syno-ns-notebook-fullmenu-notebook-common-icon { margin-left:10px;}");
//editor
GM_addStyle(".synohdpack .syno-ns-win .syno-ns-editor-normal-panel .mce-container .mce-container-body .mce-toolbar-grp {border-bottom: 1px solid rgb(223, 225, 228);padding:0;background-image: none;}");
GM_addStyle(".syno-ns-win .syno-ns-editor-normal-panel { padding: 5px 0px 0px 4px;}");
GM_addStyle("#ext-comp-1053 table.x-toolbar-ct { color: rgb(55, 53, 47); opacity: 0.5;}");
/* Colours
--themeDarker: #004578;
--themeDark: #005A9E;
--themeDarkAlt: #106EBE;
--themePrimary: #0078d4;
--themeSecondary: #2B88D8;
--themeTertiary: #71AFE5;
--themeLight: #C7E0F4;
--themeLighter: #DEECF9;
--themeLighterAlt: #EFF6FC;
--neutralDark: #201f1e;
--neutralPrimary: #323130;
--neutralPrimaryAlt: #3b3a39;
--neutralSecondary: #605e5c;
--neutralTertiary: #a19f9d;
--neutralTertiaryAlt: #c8c6c4;
--neutralQuaternary: #d2d0ce;
--neutralQuaternaryAlt: #e1dfdd;
--neutralLight: #edebe9;
--neutralLighter: #f3f2f1;
--neutralLighterAlt: #faf9f8;
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment