108 lines
2.3 KiB
SCSS
108 lines
2.3 KiB
SCSS
.authorize {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: var(--main-darker);
|
|
margin: 2rem -4rem;
|
|
padding: 2rem 1rem;
|
|
box-shadow: inset 0px 6px 62px -14px rgba(0, 0, 0, 0.45);
|
|
|
|
@include break-on(xs, down) {
|
|
margin: 1rem -1rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
&__user,
|
|
&__client {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
&-image {
|
|
width: 120px;
|
|
height: 120px;
|
|
flex-shrink: 0;
|
|
background-color: var(--main-darker);
|
|
|
|
img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
&-title {
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
|
|
&__center {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M10,4H14V13L17.5,9.5L19.92,11.92L12,19.84L4.08,11.92L6.5,9.5L10,13V4Z' /%3E%3C/svg%3E");
|
|
width: 80px;
|
|
height: 80px;
|
|
opacity: 0.4;
|
|
margin: 2rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__user {
|
|
&-user {
|
|
color: #b5b5b5;
|
|
}
|
|
}
|
|
|
|
&__client {
|
|
min-height: 120px;
|
|
|
|
&-urls {
|
|
margin-top: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
&-url {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
&-description {
|
|
margin-bottom: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.scopes {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 400px;
|
|
margin: auto;
|
|
|
|
.scopes__scope {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
width: 32px;
|
|
height: 32px;
|
|
margin: 4px;
|
|
}
|
|
|
|
&--allowed::before {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='%2300f000' d='M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z' /%3E%3C/svg%3E");
|
|
}
|
|
|
|
&--disallowed::before {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='%23f00000' d='M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z' /%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
}
|