bring stock theme to be on par with v2 pleroma-dark/light
This commit is contained in:
parent
3cab1faaf4
commit
28955d8444
6 changed files with 53 additions and 17 deletions
|
@ -35,11 +35,11 @@ export default {
|
||||||
{
|
{
|
||||||
component: 'Root',
|
component: 'Root',
|
||||||
directives: {
|
directives: {
|
||||||
'--buttonDefaultHoverGlow': 'shadow | 0 0 4 --text / 0.5',
|
'--buttonDefaultHoverGlow': 'shadow | 0 0 1 2 --text / 0.4',
|
||||||
'--buttonDefaultFocusGlow': 'shadow | 0 0 4 4 --link / 0.5',
|
'--buttonDefaultFocusGlow': 'shadow | 0 0 1 2 --link / 0.5',
|
||||||
'--buttonDefaultShadow': 'shadow | 0 0 2 #000000',
|
'--buttonDefaultShadow': 'shadow | 0 0 2 #000000',
|
||||||
'--buttonDefaultBevel': 'shadow | $borderSide(#FFFFFF top 0.2 2), $borderSide(#000000 bottom 0.2 2)',
|
'--buttonDefaultBevel': 'shadow | $borderSide(#FFFFFF top 0.2 1), $borderSide(#000000 bottom 0.2 1)',
|
||||||
'--buttonPressedBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2 2), $borderSide(#000000 top 0.2 2)'
|
'--buttonPressedBevel': 'shadow | inset 0 0 4 #000000, $borderSide(#FFFFFF bottom 0.2 1), $borderSide(#000000 top 0.2 1)'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -78,28 +78,28 @@ export default {
|
||||||
{
|
{
|
||||||
state: ['toggled'],
|
state: ['toggled'],
|
||||||
directives: {
|
directives: {
|
||||||
background: '--inheritedBackground,-14.2',
|
background: '--accent,-24.2',
|
||||||
shadow: ['--buttonDefaultShadow', '--buttonPressedBevel']
|
shadow: ['--buttonDefaultShadow', '--buttonPressedBevel']
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
state: ['toggled', 'hover'],
|
state: ['toggled', 'hover'],
|
||||||
directives: {
|
directives: {
|
||||||
background: '--inheritedBackground,-14.2',
|
background: '--accent,-24.2',
|
||||||
shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
|
shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
state: ['toggled', 'disabled'],
|
state: ['toggled', 'disabled'],
|
||||||
directives: {
|
directives: {
|
||||||
background: '$blend(--inheritedBackground 0.25 --parent)',
|
background: '$blend(--accent 0.25 --parent)',
|
||||||
shadow: ['--buttonPressedBevel']
|
shadow: ['--buttonPressedBevel']
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
state: ['disabled'],
|
state: ['disabled'],
|
||||||
directives: {
|
directives: {
|
||||||
background: '$blend(--inheritedBackground 0.25 --parent)',
|
background: '$blend(--accent 0.25 --parent)',
|
||||||
shadow: ['--buttonDefaultBevel']
|
shadow: ['--buttonDefaultBevel']
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -38,12 +38,21 @@ export default {
|
||||||
roundness: 3,
|
roundness: 3,
|
||||||
blur: '5px',
|
blur: '5px',
|
||||||
shadow: [{
|
shadow: [{
|
||||||
x: 1,
|
x: 0,
|
||||||
y: 1,
|
y: 0,
|
||||||
blur: 4,
|
blur: 3,
|
||||||
spread: 0,
|
spread: 0,
|
||||||
color: '#000000',
|
color: '#000000',
|
||||||
alpha: 0.6
|
alpha: 0.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 0,
|
||||||
|
y: 4,
|
||||||
|
blur: 6,
|
||||||
|
spread: 3,
|
||||||
|
inset: false,
|
||||||
|
color: '#000000',
|
||||||
|
alpha: 0.3
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,7 +17,24 @@ export default {
|
||||||
directives: {
|
directives: {
|
||||||
backgroundNoCssColor: 'yes',
|
backgroundNoCssColor: 'yes',
|
||||||
background: '--fg',
|
background: '--fg',
|
||||||
shadow: []
|
shadow: [{
|
||||||
|
x: 0,
|
||||||
|
y: 1,
|
||||||
|
blur: 3,
|
||||||
|
spread: 0,
|
||||||
|
inset: false,
|
||||||
|
color: '#000000',
|
||||||
|
alpha: 0.4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 0,
|
||||||
|
y: 1,
|
||||||
|
blur: 0,
|
||||||
|
spread: 0,
|
||||||
|
inset: true,
|
||||||
|
color: '#ffffff',
|
||||||
|
alpha: 0.2
|
||||||
|
}]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
@ -16,11 +16,20 @@ export default {
|
||||||
background: '--fg',
|
background: '--fg',
|
||||||
shadow: [{
|
shadow: [{
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 1,
|
||||||
blur: 4,
|
blur: 4,
|
||||||
spread: 0,
|
spread: 0,
|
||||||
color: '#000000',
|
color: '#000000',
|
||||||
alpha: 0.6
|
alpha: 0.4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 0,
|
||||||
|
y: 2,
|
||||||
|
blur: 7,
|
||||||
|
spread: 0,
|
||||||
|
inset: false,
|
||||||
|
color: '#000000',
|
||||||
|
alpha: 0.3
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -11,10 +11,10 @@ export default {
|
||||||
shadow: [{
|
shadow: [{
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 1,
|
y: 1,
|
||||||
blur: 8,
|
blur: 4,
|
||||||
spread: 0,
|
spread: 0,
|
||||||
color: '#000000',
|
color: '#000000',
|
||||||
alpha: 0.7
|
alpha: 0.2
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -127,6 +127,7 @@ export const shadowFunctions = {
|
||||||
args: [
|
args: [
|
||||||
'color: border color',
|
'color: border color',
|
||||||
'side: string indicating on which side border should be, takes either one word or two words joined by dash (i.e. "left" or "bottom-right")',
|
'side: string indicating on which side border should be, takes either one word or two words joined by dash (i.e. "left" or "bottom-right")',
|
||||||
|
'width: border width (thickness)',
|
||||||
'[alpha]: (Optional) border opacity, defaults to 1 (fully opaque)',
|
'[alpha]: (Optional) border opacity, defaults to 1 (fully opaque)',
|
||||||
'[inset]: (Optional) whether border should be on the inside or outside, defaults to inside'
|
'[inset]: (Optional) whether border should be on the inside or outside, defaults to inside'
|
||||||
],
|
],
|
||||||
|
|
Loading…
Add table
Reference in a new issue