Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dont show title of note #44

Closed
9acca9 opened this issue Feb 28, 2024 · 4 comments
Closed

Dont show title of note #44

9acca9 opened this issue Feb 28, 2024 · 4 comments

Comments

@9acca9
Copy link

9acca9 commented Feb 28, 2024

Hi.

I have a zen mode script for not showing nothing except... the text of the note and the title.... but i want to get rid of the title too.

How i could change this theme or script to dont show the title and get all the screen to work?
Can you help me? i dont know how to code.

This is the theme:


:root {
  --rosewater: #f2d5cf;
  --flamingo: #eebebe;
  --pink: #f4b8e4;
  --mauve: #ca9ee6;
  --red: #e78284;
  --maroon: #ea999c;
  --peach: #ef9f76;
  --yellow: #e5c890;
  --green: #a6d189;
  --teal: #81c8be;
  --sky: #99d1db;
  --sapphire: #85c1dc;
  --blue: #8caaee;
  --lavender: #babbf1;
  --text: #c6d0f5;
  --subtext1: #b5bfe2;
  --subtext0: #a5adce;
  --overlay2: #949cbb;
  --overlay1: #838ba7;
  --overlay0: #737994;
  --surface2: #626880;
  --surface1: #51576d;
  --surface0: #414559;
  --base: #303446;
  --mantle: #292c3c;
  --crust: #232634;
}

:root {
  --theme-style: dark;

  --main-font-family: "Helvetica";
  --main-font-size: normal;

  --tree-font-family: "Helvetica";
  --tree-font-size: normal;

  --detail-font-family: "Helvetica";
  --detail-font-size: normal;

  --monospace-font-family: "FiraCode Nerd Font Mono";
  --monospace-font-size: normal;

  --main-background-color: var(--crust);
  --main-text-color: var(--text);
  --main-border-color: var(--text);

  --accented-background-color: var(--mantle);
  --more-accented-background-color: var(--surface0);

  --button-text-color: var(--text);
  --button-background-color: var(--mantle);
  --button-disabled-text-color: var(--overlay2);
  --button-disabled-background-color: var(--crust);
  --button-border-color: var(--base);
  --button-border-radius: 2px;

  --primary-button-background-color: var(--overlay1);
  --primary-button-text-color: var(--text);
  --primary-button-border-color: var(--overlay1);

  --muted-text-color: var(--overlay2);

  --input-text-color: var(--text);
  --input-background-color: var(--crust);

  --hover-item-text-color: var(--text);
  --hover-item-background-color: var(--surface0);

  --active-item-text-color: var(--text);
  --active-item-background-color: var(--surface0);
  --active-item-border-color: transparent;

  --menu-text-color: var(--text);
  --menu-background-color: var(--surface0);

  --modal-background-color: var(--crust);
  --modal-backdrop-color: var(--surface1);

  --left-pane-background-color: var(--mantle);
  --left-pane-text-color: var(--text);

  --launcher-pane-background-color: var(--mantle);
  --launcher-pane-text-color: var(--text);

  --active-tab-background-color: var(--crust);
  --active-tab-text-color: var(--text);
  --active-tab-hover-background-color: var(--mauve);

  --inactive-tab-background-color: var(--mantle);
  --inactive-tab-text-color: var(--text);
  --inactive-tab-hover-background-color: var(--surface1);

  --scrollbar-border-color: var(--mauve);
  --tooltip-background-color: var(--base);
  --link-color: var(--sapphire);

  --mermaid-theme: dark;
}

/* CANVAS NOTE */
.excalidraw.theme--dark {
  --theme-filter: none !important;
  --island-bg-color: var(--mantle) !important;
  --button-hover-bg: var(--surface1) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-border-color) !important;
}

span.fancytree-custom-icon {
  color: var(--scrollbar-border-color);
  background: none;
}

span.fancytree-node:hover {
  border: 0px !important;
  background-color: var(--hover-item-background-color) !important;
}

span.fancytree-active {
  background-color: var(--active-tab-background-color) !important;
}

body .global-menu-button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 53 40'%3E%3Cdefs%3E%3CclipPath id='b'%3E%3Cuse xlink:href='%23a'/%3E%3C/clipPath%3E%3Cpath id='a' d='M53 0v40H0V0h53Z'/%3E%3C/defs%3E%3Cg clip-path='url(%23b)'%3E%3Cpath fill='none' d='M53 0v40H0V0h53Z'/%3E%3Cpath fill='%23c6d0f5' d='M41.604.77C38.8.683 37.347 1.996 36.996 2.117c.32-.604.533-.985 1.35-1.835-2.778-.03-5.352.572-7.317 2.41-2.634 2.464-2.43 4.506-2.435 4.496 0 .001-.416-1.331-.54-2.757-2.868 3.97-4 9.228-1.826 13.151 1.35-3.255 3.492-6.06 6.254-8.273.09-2.321 1.024-4.283 2.5-5.73-1.331 1.593-1.92 3.41-1.86 5.24 3.212-2.396 7.149-3.993 11.473-4.517-3.13.575-5.967 1.823-8.447 3.525 1.552.709 3.324.82 5.187.171-1.786.837-3.768.974-5.774.245a25.137 25.137 0 0 0-4.723 4.536c2.415.79 5.057.627 7.687-.713-2.414 1.559-5.25 2.143-8.28 1.48a26.672 26.672 0 0 0-3.011 5.156c.975.719 5.205 2.974 12.46-2.377a11.772 11.772 0 0 1-1.855-.732c.023.01.748.077 2.867-1.192 1.874-1.096 3.486-3.08 4.675-4.626a19.845 19.845 0 0 1-1.8-.765s1.308.088 3.337-1.466c1.81-1.385 3.832-3.394 3.838-3.338.013.012-4.458-3.291-9.152-3.436M9.283 7.988c2.128-.619 3.483.095 3.775.119-.357-.398-.591-.647-1.374-1.134 2.118-.569 4.198-.618 6.043.395 2.473 1.36 2.697 2.957 2.699 2.948 0 .001.07-1.097-.1-2.208 2.931 2.46 4.776 6.246 3.844 9.665-1.637-2.215-3.798-3.932-6.322-5.074-.501-1.751-1.58-3.063-2.979-3.876 1.315.953 2.103 2.222 2.399 3.629-2.902-1.194-6.21-1.635-9.614-1.182 2.501-.179 7.799.183 12.097 3.75-1.7 1.079-3.75 1.475-6.01.971 2.136.713 4.413.6 6.606-.503a20.556 20.556 0 0 1 3.263 3.337c-.612.74-3.426 3.292-9.97.643a9.447 9.447 0 0 0 1.282-.923c-.015.012-.557.206-2.414-.344-1.637-.466-3.238-1.661-4.436-2.605a15.886 15.886 0 0 0 1.234-.938s-.983.325-2.824-.459c-1.643-.7-3.562-1.833-3.556-1.788-.008.011 2.796-3.388 6.357-4.423m15.277 29.26c-1.552-1.444-1.619-2.914-1.741-3.166-.157.492-.25.808-.274 1.694-1.506-1.46-2.56-3.147-2.616-5.17-.074-2.711 1.145-3.69 1.137-3.687.001 0-.947.488-1.788 1.18.618-3.636 2.869-7.037 6.168-7.97a15.438 15.438 0 0 0-1.141 7.727c-1.213 1.284-1.778 2.824-1.773 4.379.152-1.556.824-2.836 1.85-3.779.422 2.983 1.666 5.924 3.702 8.501-1.367-1.97-3.648-6.51-2.775-11.822 1.725.863 3.055 2.353 3.737 4.464-.448-2.113-1.652-3.93-3.638-5.187.232-1.505.635-2.97 1.186-4.345.914.135 4.41 1.182 5.395 7.886a8.97 8.97 0 0 0-1.394-.596c.018.007.444.356.89 2.158.41 1.579.197 3.492-.004 4.946a15.082 15.082 0 0 0-1.382-.549s.75.648.994 2.553c.218 1.7.211 3.843.245 3.816.014 0-4.181-.616-6.778-3.033'/%3E%3C/g%3E%3C/svg%3E%0A");
}

body .global-menu-button:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 53 40'%3E%3Cdefs%3E%3CclipPath id='b'%3E%3Cuse xlink:href='%23a'/%3E%3C/clipPath%3E%3Cpath id='a' d='M53 0v40H0V0h53Z'/%3E%3C/defs%3E%3Cg clip-path='url(%23b)'%3E%3Cpath fill='none' d='M53 0v40H0V0h53Z'/%3E%3Cpath fill='%23ca9ee6' d='M41.604.77C38.8.683 37.347 1.996 36.996 2.117c.32-.604.533-.985 1.35-1.835-2.778-.03-5.352.572-7.317 2.41-2.634 2.464-2.43 4.506-2.435 4.496 0 .001-.416-1.331-.54-2.757-2.868 3.97-4 9.228-1.826 13.151 1.35-3.255 3.492-6.06 6.254-8.273.09-2.321 1.024-4.283 2.5-5.73-1.331 1.593-1.92 3.41-1.86 5.24 3.212-2.396 7.149-3.993 11.473-4.517-3.13.575-5.967 1.823-8.447 3.525 1.552.709 3.324.82 5.187.171-1.786.837-3.768.974-5.774.245a25.137 25.137 0 0 0-4.723 4.536c2.415.79 5.057.627 7.687-.713-2.414 1.559-5.25 2.143-8.28 1.48a26.672 26.672 0 0 0-3.011 5.156c.975.719 5.205 2.974 12.46-2.377a11.772 11.772 0 0 1-1.855-.732c.023.01.748.077 2.867-1.192 1.874-1.096 3.486-3.08 4.675-4.626a19.845 19.845 0 0 1-1.8-.765s1.308.088 3.337-1.466c1.81-1.385 3.832-3.394 3.838-3.338.013.012-4.458-3.291-9.152-3.436M9.283 7.988c2.128-.619 3.483.095 3.775.119-.357-.398-.591-.647-1.374-1.134 2.118-.569 4.198-.618 6.043.395 2.473 1.36 2.697 2.957 2.699 2.948 0 .001.07-1.097-.1-2.208 2.931 2.46 4.776 6.246 3.844 9.665-1.637-2.215-3.798-3.932-6.322-5.074-.501-1.751-1.58-3.063-2.979-3.876 1.315.953 2.103 2.222 2.399 3.629-2.902-1.194-6.21-1.635-9.614-1.182 2.501-.179 7.799.183 12.097 3.75-1.7 1.079-3.75 1.475-6.01.971 2.136.713 4.413.6 6.606-.503a20.556 20.556 0 0 1 3.263 3.337c-.612.74-3.426 3.292-9.97.643a9.447 9.447 0 0 0 1.282-.923c-.015.012-.557.206-2.414-.344-1.637-.466-3.238-1.661-4.436-2.605a15.886 15.886 0 0 0 1.234-.938s-.983.325-2.824-.459c-1.643-.7-3.562-1.833-3.556-1.788-.008.011 2.796-3.388 6.357-4.423m15.277 29.26c-1.552-1.444-1.619-2.914-1.741-3.166-.157.492-.25.808-.274 1.694-1.506-1.46-2.56-3.147-2.616-5.17-.074-2.711 1.145-3.69 1.137-3.687.001 0-.947.488-1.788 1.18.618-3.636 2.869-7.037 6.168-7.97a15.438 15.438 0 0 0-1.141 7.727c-1.213 1.284-1.778 2.824-1.773 4.379.152-1.556.824-2.836 1.85-3.779.422 2.983 1.666 5.924 3.702 8.501-1.367-1.97-3.648-6.51-2.775-11.822 1.725.863 3.055 2.353 3.737 4.464-.448-2.113-1.652-3.93-3.638-5.187.232-1.505.635-2.97 1.186-4.345.914.135 4.41 1.182 5.395 7.886a8.97 8.97 0 0 0-1.394-.596c.018.007.444.356.89 2.158.41 1.579.197 3.492-.004 4.946a15.082 15.082 0 0 0-1.382-.549s.75.648.994 2.553c.218 1.7.211 3.843.245 3.816.014 0-4.181-.616-6.778-3.033'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-color: transparent !important;
}

.form-control:focus {
  box-shadow: 0px 0px transparent;
}

.tab-row-widget .note-tab[active]:hover .note-tab-wrapper {
  color: var(--active-tab-background-color) !important;
}

button.bx-history,
.bx-dots-vertical-rounded,
.bx-dock-right,
.bx-edit-alt,
.floating-button,
.bx-x {
  background-color: transparent !important;
}

/* CODEMIRROR */
div#root-widget
  div#rest-pane
  div#center-pane
  div.note-detail
  div.note-detail-code
  div.note-detail-code-editor
  div.CodeMirror-code
  span {
  font-family: var(--monospace-font-family);
}
div.CodeMirror span.cm-atom {
  color: var(--peach);
}
div.CodeMirror span.cm-builtin {
  color: var(--lavender);
}
div.CodeMirror span.cm-callee {
  color: var(--sky) !important;
}
div.CodeMirror span.cm-comment {
  color: var(--overlay1);
  padding: 5px 2px;
  margin: -5px -2px;
}
div.CodeMirror span.cm-def {
  color: var(--yellow);
}
div.CodeMirror span.cm-keyword {
  color: var(--mauve);
}
div.CodeMirror span.cm-matchhighlight {
  color: var(--base) !important;
  background-color: var(--mauve) !important;
}
div.CodeMirror span.cm-number {
  color: var(--maroon);
}
div.CodeMirror span.cm-operator {
  color: var(--mauve);
}
div.CodeMirror span.cm-overlay {
  color: var(--base);
}
div.CodeMirror span.cm-property {
  color: var(--blue);
}
div.CodeMirror span.cm-variable {
  color: var(--yellow);
}
div.CodeMirror span.cm-variable-2 {
  color: var(--text);
}
div.CodeMirror span.cm-variable-3,
div.CodeMirror span.cm-meta {
  color: var(--mauve);
}
div.CodeMirror span.cm-qualifier {
  color: var(--yellow);
}
div.CodeMirror span.cm-string {
  color: var(--green);
}
div.CodeMirror span.cm-string-2 {
  color: var(--teal);
}
div.CodeMirror span.cm-tag {
  color: var(--red);
}
div.CodeMirror-lines {
  color: var(--flamingo);
}
div.CodeMirror-cursor {
  filter: invert(100%);
}

.cm-s-default .cm-attribute {
  color: var(--yellow);
}

.ck-find-result_selected {
  color: var(--crust) !important;
  background-color: var(--maroon);
}

.ck-find-result {
  color: var(--crust) !important;
  background-color: var(--yellow);
}

.note-detail-code-editor div.CodeMirror-selected,
.note-detail-code-editor div.CodeMirror-line::selection {
  background-color: var(--surface0);
}

.CodeMirror-matchingbracket {
  text-decoration: none;
  color: var(--mauve) !important;
  border: 1px solid var(--sapphire);
}

.CodeMirror-linenumber {
  color: var(--lavender);
  font-family: var(--monospace-font-family) !important;
}

/* codeblocks */
.ck-content pre {
    background: var(--base);
    border: 1px solid var(--surface2);
}

.ck-editor__editable pre[data-language]:after {
    background: transparent !important;
    color: transparent !important;
}

/**** Zen mode - you need to create a button to toggle it on/off!! ****/

.zen-mode #launcher-pane {
    display:none !important; 
   }

.zen-mode #left-pane {
    display:none !important; 
   }

.zen-mode .tab-row-widget {
    visibility:hidden !important; 
   }

.zen-mode .title-bar-buttons {
    visibility:hidden !important; 
   }


.zen-mode .ribbon-container {
        display:none !important; 
}

.zen-mode .title-row .button-widget {
        display:none !important; 
}

This is the script:

api.addButtonToToolbar({
      title: 'Zen mode',
      icon: 'spa',
      action: function() {
           $("body").toggleClass("zen-mode");
      },
      shortcut: 'alt+z'
  });

Thanks!
@Nriver
Copy link
Owner

Nriver commented Feb 29, 2024 •
edited
Loading

Hi, I've made some change to the css. It should be able to hide what you want now. I also add some code to hide the child note, backlink, code buttons, etc.

/* Zen mode - you need to create a button to toggle it on/off!! */

/* hide launcher */
.zen-mode #launcher-pane {
    display: none !important; 
}

/* hide note tree */
.zen-mode #left-pane {
    display: none !important; 
}

/* hide ribbon buttons */
.zen-mode .ribbon-container {
    display: none !important; 
}

/* hide note title */
.zen-mode .title-row {
    display: none !important; 
}
.zen-mode .title-bar-buttons {
    display: none !important;
}
.zen-mode #rest-pane > div:nth-child(1) {
    display: none !important; 
}

/* hide preview of child notes */
.zen-mode .note-list-widget {
    display: none !important; 
}

/* hide backlink, code buttons, etc. */
.zen-mode .floating-buttons-children{
    display: none !important; 
}

By the way, you can create a CSS note with #appCSS tag/label. Then this zen mode can be used in any theme.

@Nriver
Copy link
Owner

Nriver commented Feb 29, 2024

I've packed the code here, anyone who is interested can simply import this to your note and try it.

Zen mode.zip

@9acca9
Copy link
Author

9acca9 commented Feb 29, 2024

Thank you! is working perfect!!!!!!!!!!!!!!!!!!!

@9acca9 9acca9 closed this as completed Feb 29, 2024
@Nriver
Copy link
Owner

Nriver commented Mar 5, 2024 •
edited
Loading

I find this zen mode works very well with my tomato timer. You can try it if you like. https://github.com/Nriver/tomato-timer-widget

Don't forget to rest your self : )

work with zen mode

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Nriver @9acca9