OneBoard.user.css

/* OneBoard - full screen whiteboard with OneNote Online

Copyright (C) 2020-25 Vincenzo Mantova <v.l.mantova@leeds.ac.uk>

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.

*/

/* ==UserStyle==
@name           OneBoard
@namespace      github.com/vlmantova
@version        0.3.3
@description    Whiteboard skin for OneNote Online
@author         Vincenzo Mantova <v.l.mantova@leeds.ac.uk>
@homepageURL    https://vlmantova.github.io/OneBoard
@supportURL     https://github.com/vlmantova/OneBoard/issues
@updateURL      https://vlmantova.github.io/OneBoard/OneBoard.user.css
@license        MIT
@preprocessor   stylus
@var select mode "Mode" [ "presentation:Presentation", "draw:Draw", "type:Type", "normal:Normal" ]
@var checkbox hide-navigation "Hide navigation panel" 1
@var checkbox hide-scrollbars "Hide scrollbars" 1
@var checkbox hide-background "Hide background" 1
@var range laser-size "Laser pointer size" [16, 4, 64, 4]
@var checkbox prevent-scroll-x "Prevent horizontal scrolling (read warning)" 0
==/UserStyle== */

@-moz-document domain("onenote.officeapps.live.com"), domain("euc-onenote.officeapps.live.com"), domain("ukc-onenote.officeapps.live.com"), domain("usc-onenote.officeapps.live.com") {
  #AppHeaderPanel {
    display: none;
  }

  if hide-navigation {
    #applicationWACNavigationPanel {
      display: none;
    }
  }

  if mode==presentation {

    /* Hide the ribbon */
    #WACRibbonPanel {
      /* Ribbon still visible if missing !important */
      display: none !important;
    }

    /* Set the cursor to a transparent led circle */
    #WACViewPanel,
    #WACViewPanel * {
      cursor: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='" + laser-size + "' height='" + laser-size + "'%3E%3Ccircle cx='" + (laser-size/2) + "' cy='" + (laser-size/2) + "' r='" + (laser-size/2 - 1) + "' fill='rgba(256,0,0,0.5)'/%3E%3C/svg%3E") (laser-size/2) (laser-size/2), pointer !important;
      user-select: none;
    }
  }

  if mode==presentation or mode==draw {

    /* Hide the border around note containers that appears on selection and
       hover */
    .ContentSelected,
    .OutlineHover {
      border-color: transparent !important;
    }

    /* Hide the bar on top of note containers and the triangular drag
       handles */
    .OutlineTitleArea,
    .ShowDragHandle {
      display: none !important;
    }

    /* Hide the insertion caret */
    #WACViewPanel {
      caret-color: transparent;
    }

    /* Hide selected text */
    .Selected,
    .Selected p,
    .Selected p * {
      background-color: transparent !important;
    }

    .Selected .EOP,
    .EOP.Selected,
    .LineBreakBlob.Selected,
    .TabRun.Selected,
    .TextRun .Selected {
      border-color: transparent !important;
    }

    /* Hide spelling errors */
    span.SpellingError {
      background-image: none !important;
      border-bottom: inherit !important;
    }
  }

  if mode==presentation or mode==draw or mode==type {
    #WACRibbonPanel div[data-automation-type="RibbonTopBarContainer"] {
      display: none !important;
    }
  }

  if hide-scrollbars {

    /* WebKit browsers */
    #WACViewPanel::-webkit-scrollbar {
      display: none;
    }

    /* Firefox */
    #WACViewPanel {
      scrollbar-width: none;
    }
  }

  if hide-background {
    #WACViewPanel {
      background: #fff !important;
    }
  }

  if prevent-scroll-x {
    #WACViewPanel {
      /* Not recommended yet - clicking on the page causes "programmatic"
         scrolling. `overflow-x: clip` implements the desired behaviour, but it
         is experimental and not supported yet by any browser.*/
      overflow-x: hidden;
    }
  }
}