website/src/style.scss

;; Copyright (C) 2022 Ivan Polyakov
;;
;; This file is part of vilor's website.
;;
;; Vilor's website 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.
;;
;; Vilor's website 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/>.

()
'((|html, body|
   (height 100%)
   (margin 0))

  (|body|
   (font-family "Arial, sans-serif")
   (color white)
   (background-color "#3b4252"))

  (|.wrapper|
   (position relative)
   (min-height 100%))

  (|.container|
   (max-width 937px)
   (padding 0 16px)
   (margin 0 auto))

  (|a|
   (color white))

  (|a:hover|
   (text-decoration none))

  (|a:visited|
   (color "#bbb"))

  ;; /general
  ;; header

  (|.header|
   (background-color "#262d3e"))

  (|.header .container|
   (display flex)
   (justify-content space-between))

  (|.header__logo|
   (display inline)
   (font-size 24px)
   (padding 8px 0)
   (margin 0))

  (|.header__nav|
   (display inline)
   (list-style none)
   (font-size 16px)
   (padding 14px 0)
   (margin 0))

  (|.header__nav li|
   (display inline))

  ;; /header
  ;; content

  (|.content|
   (padding 32px 16px 138px 16px))

  (|.content__title|
   (font-size 36px)
   (margin-top 0)
   (margin-bottom 12px))

  (|.content__description|
   (font-size 20px)
   (margin-bottom 24px))

  (|.content__description .note|
   (font-size 16px)
   (margin-top 16px))

  (|.content__description p|
   (margin 0))

  ;; /content
  ;; footer

  (|.footer|
   (position absolute)
   (bottom 0)
   (width 100%)
   (text-align center)
   (background-color "#262d3e")
   (padding 14px 0))

  (|.footer__authors|
   (margin-bottom 5px))

  (|.footer .links a|
   (margin "0 5px"))

  ;; /footer

  (|.under-construction|
   (max-width 300px)
   (text-align center)
   (margin "0 auto"))

  (|.ideas table|
   (margin "0 auto"))

  (|table, th, td|
   (border "1px solid black"))

  (|th, td|
   (padding "5px"))

  (|.scrollbar-app form|
   (margin-bottom 10px))

  (|.scrollbar-app form fieldset|
   (border none)
   (padding 0)
   (margin 0))

  (|.scrollbar-app form .scrollbar-app__panel|
   (margin-bottom 16px))

  (|.scrollbar-app form h3|
   (font-size 24px)
   (margin 0))

  (|.scrollbar-app form h4|
   (font-size 20px)
   (margin 12px 0 0 0))

  (|.scrollbar-app__panel, .scrollbar-app form .scrollbar-app__panel|
   (background-color "#585F70")
   (padding 12px))

  (|.scrollbar-app__input|
   (display inline-block)
   (display inline-flex)
   (align-items center)
   (padding 8px))

  (|.scrollbar-app textarea|
   ("--sb-w" 10px)
   ("--thumb-clr" "#9b3e46")
   ("--thumb-bstl" "solid")
   ("--thumb-bw" 1px)
   ("--thumb-bclr" white)
   ("--thumb-brad" 8px)
   ("--track-clr" "#3b4252")
   ("--track-brad" 8px)
   ("--track-mt" 0px)
   ("--track-mb" 0px)
   (height 300px)
   (font-size 32px)
   (overflow-y scroll)
   (scrollbar-width "var(--sb-w)")
   (scrollbar-color "var(--thumb-clr) var(--track-clr)")
   (margin-top 60px))

  (|.scrollbar-app textarea::-webkit-scrollbar|
   (width "var(--sb-w)")
   (margin-bottom 5px))

  (|.scrollbar-app textarea::-webkit-scrollbar-thumb|
   (background-color "var(--thumb-clr)")
   (border-style "var(--thumb-bstl)")
   (border-width "var(--thumb-bw)")
   (border-color "var(--thumb-bclr)")
   (border-radius "var(--thumb-brad)"))

  (|.scrollbar-app textarea::-webkit-scrollbar-track|
   (background-color "var(--track-clr)")
   (border-radius "var(--track-brad)")
   (margin-top "var(--track-mt)")
   (margin-bottom "var(--track-mb)"))

  (|.scrollbar-app__buttons|
   (margin-top 24px))

  (|.scrollbar-app__buttons button|
   (min-width 149px)
   (font-size 18px)
   (background-color "#ced9f3")
   (padding 14px 25px)
   (border none)
   (border-radius 4px)
   (outline none)
   (margin-right 16px))

  (|.scrollbar-app__buttons button:hover|
   (background-color "#a2b8ed"))

  (|.rad-app .rtable|
   (width 100%))

  (|.rad-app table td > div|
   (resize horizontal)
   (overflow auto))

  (|.rad-app .rad-app__tree ul|
   (list-style none)
   (padding-left 10px))

  (|.rad-app .rad-app__tree ul li|
   (padding-left 5px)
   (border-left "1px solid #9b3e46"))

  (|.rad-app .rad-app__tree ul li:hover|
   (background-color "#9b3e46"))

  (|.rad-app__viewport|
   (color black)
   (background-color white)))