[Glitch] Change labels and styles on the onboarding screen in web UI

Port a985d587e1 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko
2023-06-23 16:34:27 +02:00
committed by Claire
parent d5bad93460
commit 06e819537b
6 changed files with 75 additions and 40 deletions

View File

@@ -36,12 +36,37 @@
}
&__note {
font-size: 14px;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
color: $ui-secondary-color;
margin-top: 10px;
color: $darker-text-color;
&--missing {
color: $dark-text-color;
}
p {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
a {
color: inherit;
&:hover,
&:focus,
&:active {
text-decoration: none;
}
}
}
}

View File

@@ -951,13 +951,15 @@ $ui-header-height: 55px;
.onboarding__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: $highlight-text-color;
background: lighten($ui-base-color, 4%);
border-radius: 8px;
padding: 10px;
padding: 10px 15px;
box-sizing: border-box;
font-size: 17px;
font-size: 14px;
font-weight: 500;
height: 56px;
text-decoration: none;
@@ -1019,6 +1021,7 @@ $ui-header-height: 55px;
align-items: center;
gap: 10px;
padding: 10px;
padding-inline-end: 15px;
margin-bottom: 2px;
text-decoration: none;
text-align: start;
@@ -1031,14 +1034,14 @@ $ui-header-height: 55px;
&__icon {
flex: 0 0 auto;
background: $ui-base-color;
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: $dark-text-color;
color: $highlight-text-color;
font-size: 1.2rem;
@media screen and (min-width: 600px) {
display: flex;
@@ -1062,16 +1065,33 @@ $ui-header-height: 55px;
}
}
&__go {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 21px;
height: 21px;
color: $highlight-text-color;
font-size: 17px;
svg {
height: 1.5em;
width: auto;
}
}
&__description {
flex: 1 1 auto;
line-height: 18px;
line-height: 20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
h6 {
color: $primary-text-color;
font-weight: 700;
color: $highlight-text-color;
font-weight: 500;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
}