Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

SharePrompt styles adapted to design changes

Browse source
This commit is contained in:
svetlagasheva 2020-03-06 16:43:45 +02:00
parent 139dbeb4db
commit 37f0b56e1d
1 changed files with 48 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
src/common/SharePrompt/styles.less
View file

@ -1,15 +1,12 @@
.share-prompt-container {
min-width: 18rem;
background: var(--color-surfacelighter);
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
.share-prompt-container {
.buttons-container {
display: flex;
flex-direction: row;
.button-container {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 14rem;
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
@ -20,20 +17,11 @@
margin-right: 1rem;
}
&:hover {
filter: brightness(1.2);
}
&:focus {
outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
outline-offset: calc(-2 * var(--focus-outline-size));
}
.icon {
flex: none;
height: 1.2rem;
margin-right: 1rem;
fill: var(--color-surfacelighter);
fill: @color-surface-light5;
}
.label {
@ -41,18 +29,33 @@
flex-shrink: 1;
flex-basis: auto;
max-height: 2.4em;
font-size: 1.1rem;
font-weight: 500;
text-align: center;
color: var(--color-surfacelighter);
color: @color-surface-light5;
}
}
.facebook-button, .twitter-button {
&:focus {
outline-color: @color-background-dark5;
}
}
.facebook-button {
background-color: var(--color-facebook);
background-color: @color-secondary;
&:hover {
background-color: @color-secondary-light2;
}
}
.twitter-button {
background-color: var(--color-twitter);
background-color: @color-secondaryvariant2-light1;
&:hover {
background-color: @color-secondaryvariant2-light2;
}
}
}
@ -60,15 +63,32 @@
display: flex;
flex-direction: row;
margin-top: 1rem;
border: thin solid var(--color-surface);
background-color: @color-surface-light2;
&:hover {
.url-text-input {
background-color: @color-surface-light4;
}
.copy-button {
background-color: @color-accent3-light2;
}
}
&:focus {
outline-style: solid;
outline-width: var(--focus-outline-size);
outline-color: @color-background-dark5;
outline-offset: calc(-1 * var(--focus-outline-size));
}
.url-text-input {
flex: 1;
align-self: stretch;
padding: 1rem;
color: var(--color-backgroundlighter);
font-size: 1.1rem;
text-align: center;
border-right: thin solid var(--color-surface);
color: @color-background-dark5;
}
.copy-button {
@ -79,16 +99,11 @@
align-items: center;
justify-content: center;
width: 8rem;
padding: 0.5rem;
background-color: var(--color-surface);
&:hover {
filter: brightness(1.2);
}
padding: 1rem;
background-color: @color-accent3;
&:focus {
outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
outline-offset: calc(-1.5 * var(--focus-outline-size));
outline: none;
}
.icon {
@ -96,7 +111,7 @@
width: 1.2rem;
height: 1.2rem;
margin-right: 0.5rem;
fill: var(--color-surfacedarker);
fill: @color-surface-light5;
}
.label {
@ -104,7 +119,8 @@
flex-shrink: 1;
flex-basis: auto;
max-height: 2.4em;
color: var(--color-surfacedarker);
font-size: 1.1rem;
color: @color-surface-light5;
}
}
}