My website. http://www.vilor.one/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

233 lines
8.6 KiB

3 years ago
;; 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/>.
3 years ago
(import sxml-serializer)
(import scss)
3 years ago
(load "./src/general.scm")
(define title "vilor/webapps/scrollbar")
(define page-name "Scrollbar styling")
(define page-desc
'((p "Demonstration of possible customization of the scrollbar.")
(p (@ (class "note"))
(b "Note")
": The result will look different in different browsers, try checking the result in browsers based on different engines.")))
(define page-styles '("scrollbar.css"))
(define page-scripts '("scrollbar.js"))
(define page-embedded-style
'(css+
(.scrollbar-app__demo
(scrollbar-width "{{ sbw }}")
(scrollbar-color "{{ thumbclr }} {{ trackclr }}")
((& ::-webkit-scrollbar)
(width "{{ sbw }}"))
((& ::-webkit-scrollbar-thumb)
(background-color "{{ thumbclr }}")
(border-width "{{ thumbbw }}")
(border-style "{{ thumbbstl }}")
(border-color "{{ thumbbclr }}")
(border-radius "{{ thumbbrad }}"))
((& ::-webkit-scrollbar-track)
(background-color "{{ trackclr }}")
(border-radius "{{ trackbrad }}")
(margin-top "{{ trackmt }}")
(margin-bottom "{{ trackmb }}")))))
(define example-text "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
3 years ago
(define content
`(div (@ (class "scrollbar-app"))
(form (@ (method "GET") (action "/webapps/scrollbar.xhtml"))
(fieldset (@ (class "scrollbar-app__panel"))
(h3 "Bar:")
(div (@ (class "scrollbar-app__input"))
(label (@ (for "sbw")) "Width: ")
(input (@
(type "text")
(id "sbw")
(name "sbw")
(value "{{ sbw }}")
(pattern "\\d+px")
(title "Size in pixels with format: \"<NUMBER>px\"")))))
(fieldset (@ (class "scrollbar-app__panel"))
(h3 "Thumbnail:")
(div (@ (class "scrollbar-app__input"))
(label (@ (for "thumbclr")) "Color: ")
(input (@
(type "color")
(id "thumbclr")
(name "thumbclr")
(value "{{ thumbclr }}")))
(input (@
(type "text")
(id "thumbclrtxt")
(name "thumbclrtxt")
(value "{{ thumbclr }}")
3 years ago
(pattern "#[0-9A-Fa-f]{6}")
(title "Hexadecimal RGB color with \"#\" at the beginning"))))
(fieldset
(h4 "Border:")
(div (@ (class "scrollbar-app__input"))
(label (@ (for "thumbbstl")) "Style: ")
(select (@ (id "thumbbstl") (name "thumbbstl"))
(option (@ (value "none")) "none")
(option (@ (value "hidden")) "hidden")
(option (@ (value "solid") (selected "selected")) "solid")
(option (@ (value "dotted")) "dotted")
(option (@ (value "dashed")) "dashed")
(option (@ (value "double")) "double")
(option (@ (value "groove")) "groove")
(option (@ (value "ridge")) "ridge")
(option (@ (value "inset")) "inset")
(option (@ (value "outset")) "outset")))
(div (@ (class "scrollbar-app__input"))
(label (@ (for "thumbbrad")) "Radius: ")
(input (@
(type "text")
(id "thumbbrad")
(name "thumbbrad")
(value "{{ thumbbrad }}")
(pattern "\\d+(px|%)")
(title "Radius in pixels or percents with format: \"<NUMBER>px\" or \"<NUMBER>%\""))))
(div (@ (class "scrollbar-app__input"))
(label (@ (for "thumbbw")) "Width: ")
(input (@
(type "text")
(id "thumbbw")
(name "thumbbw")
(value "{{ thumbbw }}")
(pattern "\\d+px")
(title "Size in pixels with format: \"<NUMBER>px\""))))
(div (@ (class "scrollbar-app__input"))
(label (@ (for "thumbbclr")) "Color: ")
(input (@
(type "color")
(id "thumbbclr")
(name "thumbbclr")
(value "{{ thumbbclr }}")))
(input (@
(type "text")
(id "thumbbclrtxt")
(name "thumbbclrtxt")
(value "{{ thumbbclr }}")
3 years ago
(pattern "#[0-9A-Fa-f]{6}")
(title "Hexadecimal RGB color with \"\#\" at the beginning"))))))
(fieldset (@ (class "scrollbar-app__panel"))
(h3 "Track:")
(div (@ (class "scrollbar-app__input"))
(label (@ (for "trackclr")) "Color: ")
(input (@
(type "color")
(id "trackclr")
(name "trackclr")
(value "{{ trackclr }}")))
(input (@
(type "text")
(id "trackclrtxt")
(name "trackclrtxt")
(value "{{ trackclr }}")
3 years ago
(pattern "#[0-9A-Fa-f]{6}")
(title "Hexadecimal RGB color with \"#\" at the beginning"))))
(div (@ (class "scrollbar-app__input"))
(label (@ (for "trackbrad")) "Border radius: ")
(input (@
(type "text")
(id "trackbrad")
(name "trackbrad")
(value "{{ trackbrad }}")
(pattern "\\d+(px|%)")
(title "Radius in pixels or percents with format: \"<NUMBER>px\" or \"<NUMBER>%\""))))
(div (@ (class "scrollbar-app__input"))
(label (@ (for "trackmt")) "Margin top: ")
(input (@
(type "text")
(id "trackmt")
(name "trackmt")
(value "{{ trackmt }}")
(pattern "\\d+px")
(title "Size in pixels with format: \"<NUMBER>px\""))))
(div (@ (class "scrollbar-app__input"))
(label (@ (for "trackmb")) "Margin bottom: ")
(input (@
(type "text")
(id "trackmb")
(name "trackmb")
(value "{{ trackmb }}")
(pattern "\\d+px")
(title "Size in pixels with format: \"<NUMBER>px\"")))))
(div (@ (class "scrollbar-app__buttons") (id "sbBtns"))
(button (@ (type "submit") (id "sbUpdBtn")) "update")))
(pre (@ (class "scrollbar-app__panel") (id "sbScssOut"))
"
.selector {
scrollbar-color: {{ thumbclr }} {{ trackclr }};
&::-webkit-scrollbar {
width: {{ sbw }};
}
&::-webkit-scrollbar-track {
background-color: {{ trackclr }};
border-radius: {{ trackbrad }};
margin-top: {{ trackmt }};
margin-bottom: {{ trackmb }};
}
&::-webkit-scrollbar-thumb {
background-color: {{ thumbclr }};
border: {{ thumbbw }} {{ thumbbstl }} {{ thumbbclr }};
border-radius: {{ thumbbrad }};
}
}")
(textarea (@ (class "scrollbar-app__demo")
(readonly "readonly")
(rows 5)
(cols 30))
,example-text)))
3 years ago
(load "./src/templates/default.scm")
(display xhtml-1.0-doctype)
(display (serialize-sxml
3 years ago
(default-tpl
title
content
page-name
page-desc
page-embedded-style
3 years ago
page-styles
page-scripts
`(((name "description")
(content "Demonstration of possible customization of the scrollbar."))
((name "keywords")
(content "CSS, SCSS, scrollbar, styling, constructor"))))))