oui-kit/stylus/preset/app.styl

🎯 *UI toolkit with a French touch* 🇫🇷

// Use this to start a web app. It makes the viewport non-scroll
// and full height so you can easily go ahead with stack-x and stack-y
// to pack it with views
@require "../mixins/base.styl";
@require "../mixins/text.styl";
@require "reset.styl";

statusbar(color) {
  position: fixed;
  zindex: 99999;
  top: 0;
  left: 0;
  right: 0;
  height: -safe-top;
  background: var(color, black);
}

oui-app() {
  if __oui_once("app") {
    oui-reset();

    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    body {
      // padding: -safe-top -safe-right -safe-bottom -safe-left;
      font-family: var(--font-sans);
    }

    // assume this being an app container, usually #app
    #app, .app {
      use: stack-y;
      height: 100%;
    }

    /* :not(button, input, optgroup, select, textarea, [contenteditable], [contenteditable] *, .ProseMirror *, .selectable *, .selectable) { */
    * {
      user-select: none;
      -webkit-user-select: none;
      cursor: default;
      // border: none;
    }

    [contenteditable], [contenteditable] *, .ProseMirror *, .selectable *, .selectable, input, textarea {
      user-select: text;
      -webkit-user-select: text;
      // border: 2px solid red;
    }
  }
}

oui-app-full() {
  if __oui_once("app-full") {
    oui-app();
    /*
        html, body {
          overflow: hidden;
        }
    
    
        .app, #app {      
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        } */
  }
}