Page MenuHomePhorge
Files F33103608

scrollbar_element.style.js
No OneTemporary
Actions

Size
1 KB
Referenced Files
None
Subscribers
None

scrollbar_element.style.js
View Options

const border = (top, shadow) => ({
x: 0,
y: top ? 1 : -1,
blur: 0,
spread: 0,
color: shadow ? '#000000' : '#FFFFFF',
alpha: 0.2,
inset: true
})
const buttonInsetFakeBorders = [border(true, false), border(false, true)]
const inputInsetFakeBorders = [border(true, true), border(false, false)]
const buttonOuterShadow = {
x: 0,
y: 0,
blur: 2,
spread: 0,
color: '#000000',
alpha: 1
}
const hoverGlow = {
x: 0,
y: 0,
blur: 4,
spread: 0,
color: '--text',
alpha: 1
}
export default {
name: 'ScrollbarElement',
selector: '::-webkit-scrollbar-button',
notEditable: true, // for now
states: {
pressed: ':active',
hover: ':hover:not(:disabled)',
disabled: ':disabled'
},
validInnerComponents: [
'Text'
],
defaultRules: [
{
directives: {
background: '--fg',
shadow: [buttonOuterShadow, ...buttonInsetFakeBorders],
roundness: 3
}
},
{
state: ['hover'],
directives: {
shadow: [hoverGlow, ...buttonInsetFakeBorders]
}
},
{
state: ['pressed'],
directives: {
shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
}
},
{
state: ['hover', 'pressed'],
directives: {
shadow: [hoverGlow, ...inputInsetFakeBorders]
}
},
{
state: ['toggled'],
directives: {
background: '--accent,-24.2',
shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
}
},
{
state: ['toggled', 'hover'],
directives: {
background: '--accent,-24.2',
shadow: [hoverGlow, ...inputInsetFakeBorders]
}
},
{
state: ['disabled'],
directives: {
background: '$blend(--inheritedBackground 0.25 --parent)',
shadow: [...buttonInsetFakeBorders]
}
},
{
component: 'Text',
parent: {
component: 'Button',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
}
]
}

File Metadata

Mime Type
text/plain
Expires
Tue, Jan 20, 2:00 PM (15 h, 13 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
973811
Default Alt Text
scrollbar_element.style.js (1 KB)

Event Timeline