puniko/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

more default shadows, replaced original shadows with generated ones. maybe gotta

Browse source 
update fallbacks...
This commit is contained in:
Henry Jameson 2018-11-21 21:23:07 +03:00
parent 3bdcdefc9b
commit 621ab806e6
5 changed files with 98 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/App.scss
View file

@ -58,9 +58,10 @@ button {
border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius);
cursor: pointer;
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
/* border-top: 1px solid rgba(255, 255, 255, 0.2); */
/* border-bottom: 1px solid rgba(0, 0, 0, 0.2); */
box-shadow: 0px 0px 2px black;
box-shadow: var(--buttonShadow);
font-size: 14px;
font-family: sans-serif;
@ -75,11 +76,12 @@ button {
&:hover {
box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
box-shadow: var(--buttonHoverShadow);
}
&:active {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
border-top: 1px solid rgba(0, 0, 0, 0.2);
/* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
/* border-top: 1px solid rgba(0, 0, 0, 0.2); */
}
&:disabled {
@ -104,9 +106,10 @@ input, textarea, .select {
border: none;
border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
border-top: 1px solid rgba(0, 0, 0, 0.2);
/* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
/* border-top: 1px solid rgba(0, 0, 0, 0.2); */
box-shadow: 0px 0px 2px black inset;
box-shadow: var(--inputShadow);
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
color: $fallback--lightText;
@ -184,6 +187,7 @@ input, textarea, .select {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
border-top: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 2px black inset;
box-shadow: var(--inputShadow);
margin-right: .5em;
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
@ -365,6 +369,7 @@ main-router {
background-color: $fallback--fg;
background-color: var(--panel, $fallback--fg);
align-items: baseline;
box-shadow: var(--panelHeaderShadow);
.title {
flex: 1 0 auto;

1
src/components/status/status.vue
View file

@ -146,6 +146,7 @@
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
box-shadow: var(--popupShadow);
margin-top: 0.25em;
margin-left: 0.5em;
z-index: 50;

1
src/components/user_card_content/user_card_content.vue
View file

@ -155,6 +155,7 @@
width: 56px;
height: 56px;
box-shadow: 0px 1px 8px rgba(0,0,0,0.75);
box-shadow: var(--avatarShadow);
object-fit: cover;
&.animated::before {

13
src/i18n/en.json
View file

@ -212,11 +212,16 @@
"inset": "Inset",
"components": {
"panel": "Panel",
"panelHeader": "Panel header",
"topBar": "Top bar",
"avatar": "User avatar (in post display)",
"avatarStatus": "User avatar (in profile view)",
"popup": "Popups and tooltips",
"button": "Button",
"button_hover": "Button (hover)",
"button_pressed": "Button (pressed)",
"button_pressed_hover": "Button (pressed+hover)",
"input_box": "Input field"
"buttonHover": "Button (hover)",
"buttonPressed": "Button (pressed)",
"buttonPressedHover": "Button (pressed+hover)",
"input": "Input field"
}
}
}

76
src/services/style_setter/style_setter.js
View file

@ -258,6 +258,40 @@ const generateRadii = (input) => {
}
const generateShadows = (input) => {
const buttonInsetFakeBorders = [{
x: 0,
y: 101,
blur: 0,
spread: -100,
color: '#FFFFFF',
alpha: 0.2,
inset: true
}, {
x: 0,
y: -101,
blur: 0,
spread: -100,
color: '#000000',
alpha: 0.2,
inset: true
}]
const inputInsetFakeBorders = [{
x: 0,
y: 101,
blur: 0,
spread: -100,
color: '#000000',
alpha: 0.2,
inset: true
}, {
x: 0,
y: -101,
blur: 0,
spread: -100,
color: '#FFFFFF',
alpha: 0.3,
inset: true
}]
const shadows = {
panel: [{
x: 1,
@ -267,6 +301,48 @@ const generateShadows = (input) => {
color: '#000000',
alpha: 0.6
}],
popup: [{
x: 2,
y: 2,
blur: 3,
spread: 0,
color: '#000000',
alpha: 0.5
}],
avatar: [{
x: 0,
y: 1,
blur: 8,
spread: 0,
color: '#000000',
alpha: 0.7
}],
panelHeader: [],
button: [{
x: 0,
y: 0,
blur: 2,
spread: 0,
color: '#000000',
alpha: 1
}, ...buttonInsetFakeBorders],
buttonHover: [{
x: 0,
y: 0,
blur: 4,
spread: 0,
color: '--faint',
alpha: 1
}, ...buttonInsetFakeBorders],
input: [{
x: 0,
y: 0,
blur: 2,
inset: true,
spread: 0,
color: '#000000',
alpha: 1
}, ...inputInsetFakeBorders],
...(input.shadows || {})
}