Custom background, 4 custom choice styles for choiceofgames and dashingdon (+ a toggle to show a tiny avatar of your PC)
dashingdon/choiceofgames-custom background/choices by patapun
Details
Authorpatapun
LicenseNo License
Categorydashingdon, choiceofgames
Created
Updated
Size9.2 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Features:
- custom background + glassmorphism body
- 4 custom choices: TES-esque for medieval fantasy stories, Cyberpunk(?) for... cyberpunk stories, Horizontal for horizontal stories???, Minimal for minimalists.
- toggle on a tiny avatar of your PC (or anyone) to judge your decision silently
- this userstyle can also be applied on moody.ink but the custom background will mess up its layout
Source code
/* ==UserStyle==
@name dashingdon, choiceofgames - custom background/choices
@namespace dashingdon.com, choiceofgames.com
@version 1.0.0
@description dashingdon, choiceofgames - custom background/choices
@author patapun
@preprocessor stylus
@var text fontSize "Font size" 102%
@var checkbox maximalismWoo "Show background" 0
@var text bgUrl "Background URL (insert between quotation marks)" "''"
@var checkbox toggleAvatar "Toggle avatar (PC/Tablet only)" 0
@var text avtUrl "Avatar URL (insert between quotation marks)" "''"
@var color checkedColor "Color for selected choice (excl. Minimal/None)" #297871
@var select choiceStyle "Choice style" {"TESesque":"tes", "Horizontal":"horizontal", "Cyberpunkesque":"cyberpunk", "Minimal":"minimal", "None*":"none"}
==/UserStyle== */
@-moz-document regexp("^https:\\/\\/dashingdon\\.com\\/play\\/(?!.*\\/scenes\\/).*\\/?$"), domain("choiceofgames.com") {
$main-bg=#f7f4f1;
$main-bg-dark=#121212;
if maximalismWoo {
create-gradient(color-main) {
radial-gradient(circle, rgba(color-main, 0.9) 0%, rgba(color-main, 0.5) 80%, rgba(color-main, 0.5) 100%)
}
create-button() {
#buttons button { background: @background }
}
html {
background: url(bgUrl) no-repeat fixed center;
background-size: cover
}
.container { padding: 0 1rem }
body {
background: create-gradient(rgb($main-bg))
backdrop-filter: blur(12px) saturate(55%)
-webkit-backdrop-filter: blur(12px) saturate(55%)
border-radius: 12px
border: 1.5px solid rgba(255, 255, 255, 0.155)
create-button()
}
body.nightmode {
background: create-gradient(rgb($main-bg-dark))
create-button()
}
body.whitemode {
background: create-gradient(white)
create-button()
}
.container {
max-height: 95vh
overflow-y: scroll
&::-webkit-scrollbar {
width: 10px
}
}
}
#buttons button {
color: currentColor
background: transparent;
border: 1.3px solid rgba(#959595, .25);
border-radius: 6px
cursor: pointer
padding: 2px
padding-inline: 6px
}
if choiceStyle=="minimal" {
.choice {
border-left: 1px solid transparent
padding: 11px 8px 11px 0
text-align: start
div {
border: 0
border-radius: 0
}
label {
opacity: 0.75
border: none
border-radius: 0 !important
transition: all .3s ease-in-out
&:has( > input:focus-visible) {
outline: 2px auto -webkit-focus-ring-color
}
&:has( > input:checked) {
border-left: 1.5px solid currentColor
opacity: 1
padding: 11px 8px 11px 1.1rem
}
}
input {
-webkit-appearance: none
margin: 0
}
.disabled {
opacity: 1
text-decoration-line: line-through
}
}
}
if choiceStyle=="tes" {
create-gradient(color-main, color-middle) {
linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, color-main 10%, color-middle 50%, color-main 90%, rgba(255, 255, 255, 0) 100%)
}
.choice {
input {
-webkit-appearance: none
margin: 0
}
div {
border: 0
border-radius: 0
&:first-of-type {
border-radius: 0
}
&:last-of-type {
border-radius: 0
}
&:hover {
background: transparent
}
}
label {
border: none
border-radius: 0 !important
display: block
padding: 0.45rem
margin: 0.9rem 2rem
text-align: center
text-wrap: balance
mask-image: create-gradient(black, black)
background: alpha(#959595, 0.35)
transition: all 0.3s cubic-bezier(.15, .54, .65, .89)
transition: all 0.1s cubic-bezier(.15, .54, .65, .89)
&:hover {
background: alpha(#959595, 0.55) !important
}
&:has( input:checked) {
padding: 0.7rem 0.3rem
color: lighten(checkedColor, 80%)
font-size: 1.1rem
text-shadow: 0 0 2px lighten(checkedColor, 25%)
background: create-gradient(checkedColor, darken(checkedColor, 20%)) !important
border-top: 1px solid lighten(checkedColor, 10%)
border-bottom: 1px solid lighten(checkedColor, 10%)
}
&:has( > input:focus-visible) {
outline: 2px auto -webkit-focus-ring-color
}
}
.disabled {
color: #808080
text-shadow: none
}
}
}
if choiceStyle=="horizontal" {
.shuttle { display: none; }
.choice input {
-webkit-appearance: none
margin: 0
}
.choice { /*credit to smolcss.dev*/
--min: 18ch
--gap: 1rem
display: grid
grid-gap: var(--gap)
margin: 1.8rem auto
grid-template-columns: @css {repeat(auto-fit, minmax(min(100%, var(--min)), 1fr))}
}
.choice div {
position: relative
border: 0
box-sizing: border-box
border-radius: 0 0 10px 10px !important
transition: all 0.3s ease-in-out
&:first-of-type {
border-radius: 0
}
&:last-of-type {
border-radius: 0
}
}
.choice div::before {
content: ''
display: block
box-sizing: border-box
position: absolute
width: 100%
height: 100%
border-top: 0.25rem solid darken(checkedColor, 15%)
pointer-events: none
}
body.nightmode .choice div::before { border-top: 0.25rem solid lighten(checkedColor, 15%) }
.choice label {
border: none
border-radius: 0 !important
display: block
height: fit-content
padding: 0.8rem
word-break: break-word
text-align: center
text-wrap: balance
}
.choice div:hover {
background: alpha(checkedColor, 0.18)
}
body.nightmode .choice div:hover { background: alpha(lighten(checkedColor, 15%), 0.18) }
.choice label:hover {
background: none !important
}
.choice div:has( input:checked) {
background: alpha(checkedColor, 0.25)
}
body.nightmode .choice div:has( input:checked) { background: alpha(lighten(checkedColor, 15%), 0.25) }
.choice label:has( > input:focus-visible) {
outline: 2px auto -webkit-focus-ring-color
}
.choice .disabled, .choice div:has( .disabled) {
filter: grayscale(100%)
opacity: 0.95
}
}
if choiceStyle=="cyberpunk" {
gradient-hack(color) {
linear-gradient(90deg, alpha(color, 1) 0%, alpha(color, 1) 50%, alpha(color, 0) 50%)
}
.choice {
margin: 2rem auto
}
.choice input {
-webkit-appearance: none
margin: 0
}
.choice div {
box-sizing: border-box
width: fit-content
border: 0
border-radius: 0
margin-top: 0.3rem
border-left: 3px solid darken(checkedColor, 3%)
mask-image: linear-gradient(140deg, rgba(0, 0, 0, 1) 96%, rgba(0, 0, 0, 0) 96.2%, rgba(0, 0, 0, 0) 100%)
transition: all 0.3s ease-in-out
&:first-of-type {
border-radius: 0
}
&:last-of-type {
border-radius: 0
}
}
.choice label {
border: none
border-radius: 0 !important
display: block
width: fit-content
color: darken(checkedColor, 3%)
padding: 0.3rem 2rem 0.3rem 0.8rem
transition: all 0.3s ease-in
}
body.nightmode .choice label { color: lighten(checkedColor, 15%) }
.choice label:hover {
background: none !important
}
.choice div:hover {
background: alpha(checkedColor, 0.15)
}
.choice div:has( input:checked) {
background-image: gradient-hack(checkedColor)
text-shadow: 0 0 2px lighten(checkedColor, 60%)
background-size: 200% 200%
animation: background 0.5s ease-in-out forwards
}
@keyframes background {
0% {
background-position: right
}
100% {
background-position: left
}
}
.choice label:has( input:checked) {
color: lighten(checkedColor, 95%)
}
.choice label:has( > input:focus-visible) {
outline: 2px auto -webkit-focus-ring-color
}
.choice div:has( .disabled), .choice .disabled {
filter: grayscale(100%)
text-shadow: none
}
}
if toggleAvatar {
@media (min-width: calc(43rem + 100px)) {
body::before {
content: ''
display: block
position: fixed
box-shadow: 0px 5px 15px 5px rgba(0,0,0,0.1),inset 0px 0px 10px 3px rgba(0,0,0,0.2);
border-radius: 12px
width: clamp(3rem,5vw,80px)
height: clamp(3rem,5vw,80px)
background: url(avtUrl) no-repeat center;
background-size: cover
margin-left: calc(0px - clamp(3rem, 0.2308rem + 6.1538vi, 5rem)) /*credit to utopia.fyi*/
top: 1rem
}
}
}
}