Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Style changes to match updates (#18397)

This commit is contained in:
Jordan Vidrine 2022-09-28 12:31:56 -05:00 committed by GitHub
parent c3d9324d4d
commit 64601779f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 46 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/assets/stylesheets/common/base/login.scss
View File

@ -1,3 +1,6 @@
$invite-bg: absolute-image-url("/branded-background.svg");
$invite-mobile-bg: absolute-image-url("/branded-background-mobile.svg");
.caps-lock-warning {
color: var(--danger);
font-size: $font-down-1;
@ -31,10 +34,30 @@
}
}
body.invite-page {
background-image: $invite-bg;
background-size: 110vw 110vh; // crops better than cover at various viewport sizes
background-repeat: no-repeat;
background-position: bottom;
background-color: var(--secondary);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, Arial, sans-serif;
@include breakpoint("mobile-extra-large") {
background: $invite-mobile-bg;
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
}
.d-header {
display: none;
}
}
// Create Account + Login
.d-modal.create-account,
.d-modal.login-modal,
.invites-show {
.invites-show,
.admin-invite-page {
.modal-inner-container {
position: relative;
}
@ -310,12 +333,14 @@
border-radius: 10px;
margin-top: 25px;
border-top: 6px solid var(--tertiary);
background-color: var(--secondary);
}
.invite-form {
margin-bottom: 50px;
max-width: 33em;
border-top: 6px solid var(--tertiary);
box-shadow: 0 4px 19px 6px rgba(0, 0, 0, 0.05);
padding: 1em 3em;
max-width: calc(33em - 6em);
.tip {
display: block;
}

23
app/assets/stylesheets/wizard.scss
View File

@ -1,24 +1,5 @@
$wizard-bg: svg-uri(
'<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1906.75" height="980" viewBox="0 0 1906.75 980">
<path d="M488.66,863.09c-.95,0-1.9,.08-2.87,.23-10.9,1.74-20.73,12.53-18.33,27.56,2.4,15.03,16.43,23.52,27.44,21.76,5.23-.84,9.15-3.57,11.65-8.12,2.72-4.93,3.55-11.8,2.36-19.32-1.19-7.39-4.29-13.63-8.75-17.6-3.35-2.98-7.28-4.52-11.49-4.52Zm3.05,65.4c-18.96,0-36.43-14.97-39.65-35.14-3.53-22.1,10.2-42.06,31.26-45.43,9.94-1.58,19.59,1.27,27.2,8.04,7.14,6.35,12.04,15.87,13.78,26.78,1.78,11.1,.36,21.23-4.08,29.3-4.8,8.74-12.92,14.41-22.86,16-1.89,.3-3.77,.45-5.65,.45Z"/>
<path d="M252.13,687.19c0,42.64-27.43,60.69-72.35,60.69s-101.49-63.7-101.49-106.34,70.65-54.87,115.57-54.87,58.27,57.88,58.27,100.52Z" style="fill: #0ca64e; fill-rule: evenodd;"/>
<path d="M1849.08,829.55c-90.96,16.64-161.99-38.28-219.31-142.86-47.68-87.02,25.41-193.64,97.18-244.1,80.59-56.65,193.7,26.32,248.35,183.9,32.51,93.76-28.61,185.21-126.22,203.06Z" style="fill: #e84a51; fill-rule: evenodd;"/>
<path d="M1749.82,834.36c-17.29,16.8-36.86,24.94-53.76,12.76-16.9-12.18-19.47-31.75-3.5-49.8,15.58-17.6,37.62-33.19,54.52-21.02,16.9,12.18,20.84,40.46,2.74,58.05Z" style="fill: #fbf5af; fill-rule: evenodd;"/>
<path d="M269.84,223.52c0,19.4-22.98,39.33-40.94,39.33s-38.06-16.61-38.06-36.01,25.03-43.21,42.99-43.21,36.01,20.49,36.01,39.89Z" style="fill: #f0794a; fill-rule: evenodd;"/>
</svg>'
);
$wizard-mobile-bg: svg-uri(
'<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="390" height="844" viewBox="0 0 390 844">
<path d="M65.11,755.03c-.95,0-1.9,.08-2.87,.23-10.9,1.74-20.73,12.53-18.33,27.56,2.4,15.03,16.43,23.52,27.44,21.76,5.23-.84,9.15-3.57,11.65-8.12,2.72-4.93,3.55-11.8,2.36-19.32-1.19-7.39-4.29-13.63-8.75-17.6-3.35-2.98-7.28-4.52-11.49-4.52h-.01Zm3.05,65.41c-18.96,0-36.43-14.97-39.65-35.14-3.53-22.1,10.2-42.06,31.26-45.43,9.94-1.58,19.59,1.27,27.2,8.04,7.14,6.35,12.04,15.87,13.78,26.78,1.78,11.1,.36,21.23-4.08,29.3-4.8,8.74-12.92,14.41-22.86,16-1.89,.3-3.77,.45-5.65,.45h0Z"/>
<path d="M118.58,461.13c0,42.64-27.43,60.69-72.35,60.69s-101.49-63.7-101.49-106.34,70.65-54.87,115.57-54.87,58.27,57.88,58.27,100.52h0Z" style="fill: #0ca64e; fill-rule: evenodd;"/>
<path d="M492.26,712.49c-90.96,16.64-161.99-38.28-219.31-142.86-47.68-87.02,25.41-193.64,97.18-244.1,80.59-56.65,193.7,26.32,248.35,183.9,32.51,93.76-28.61,185.21-126.22,203.06h0Z" style="fill: #e84a51; fill-rule: evenodd;"/>
<path d="M393,717.3c-17.29,16.8-36.86,24.94-53.76,12.76s-19.47-31.75-3.5-49.8c15.58-17.6,37.62-33.19,54.52-21.02,16.9,12.18,20.84,40.46,2.74,58.05h0Z" style="fill: #fbf5af; fill-rule: evenodd;"/>
<path d="M69.29,124.46c0,19.4-22.98,39.33-40.94,39.33S-9.71,147.18-9.71,127.78s25.03-43.21,42.99-43.21,36.01,20.49,36.01,39.89Z" style="fill: #f0794a; fill-rule: evenodd;"/>
</svg>'
);
$wizard-bg: absolute-image-url("/branded-background.svg");
$wizard-mobile-bg: absolute-image-url("/branded-background-mobile.svg");
@keyframes bump {
0% {

8
public/images/branded-background-mobile.svg Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="390" height="844" viewBox="0 0 390 844">
<path d="M65.11,755.03c-.95,0-1.9,.08-2.87,.23-10.9,1.74-20.73,12.53-18.33,27.56,2.4,15.03,16.43,23.52,27.44,21.76,5.23-.84,9.15-3.57,11.65-8.12,2.72-4.93,3.55-11.8,2.36-19.32-1.19-7.39-4.29-13.63-8.75-17.6-3.35-2.98-7.28-4.52-11.49-4.52h-.01Zm3.05,65.41c-18.96,0-36.43-14.97-39.65-35.14-3.53-22.1,10.2-42.06,31.26-45.43,9.94-1.58,19.59,1.27,27.2,8.04,7.14,6.35,12.04,15.87,13.78,26.78,1.78,11.1,.36,21.23-4.08,29.3-4.8,8.74-12.92,14.41-22.86,16-1.89,.3-3.77,.45-5.65,.45h0Z"/>
<path d="M118.58,461.13c0,42.64-27.43,60.69-72.35,60.69s-101.49-63.7-101.49-106.34,70.65-54.87,115.57-54.87,58.27,57.88,58.27,100.52h0Z" style="fill: #0ca64e; fill-rule: evenodd;"/>
<path d="M492.26,712.49c-90.96,16.64-161.99-38.28-219.31-142.86-47.68-87.02,25.41-193.64,97.18-244.1,80.59-56.65,193.7,26.32,248.35,183.9,32.51,93.76-28.61,185.21-126.22,203.06h0Z" style="fill: #e84a51; fill-rule: evenodd;"/>
<path d="M393,717.3c-17.29,16.8-36.86,24.94-53.76,12.76s-19.47-31.75-3.5-49.8c15.58-17.6,37.62-33.19,54.52-21.02,16.9,12.18,20.84,40.46,2.74,58.05h0Z" style="fill: #fbf5af; fill-rule: evenodd;"/>
<path d="M69.29,124.46c0,19.4-22.98,39.33-40.94,39.33S-9.71,147.18-9.71,127.78s25.03-43.21,42.99-43.21,36.01,20.49,36.01,39.89Z" style="fill: #f0794a; fill-rule: evenodd;"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

8
public/images/branded-background.svg Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1906.75" height="980" viewBox="0 0 1906.75 980">
<path d="M488.66,863.09c-.95,0-1.9,.08-2.87,.23-10.9,1.74-20.73,12.53-18.33,27.56,2.4,15.03,16.43,23.52,27.44,21.76,5.23-.84,9.15-3.57,11.65-8.12,2.72-4.93,3.55-11.8,2.36-19.32-1.19-7.39-4.29-13.63-8.75-17.6-3.35-2.98-7.28-4.52-11.49-4.52Zm3.05,65.4c-18.96,0-36.43-14.97-39.65-35.14-3.53-22.1,10.2-42.06,31.26-45.43,9.94-1.58,19.59,1.27,27.2,8.04,7.14,6.35,12.04,15.87,13.78,26.78,1.78,11.1,.36,21.23-4.08,29.3-4.8,8.74-12.92,14.41-22.86,16-1.89,.3-3.77,.45-5.65,.45Z"/>
<path d="M252.13,687.19c0,42.64-27.43,60.69-72.35,60.69s-101.49-63.7-101.49-106.34,70.65-54.87,115.57-54.87,58.27,57.88,58.27,100.52Z" style="fill: #0ca64e; fill-rule: evenodd;"/>
<path d="M1849.08,829.55c-90.96,16.64-161.99-38.28-219.31-142.86-47.68-87.02,25.41-193.64,97.18-244.1,80.59-56.65,193.7,26.32,248.35,183.9,32.51,93.76-28.61,185.21-126.22,203.06Z" style="fill: #e84a51; fill-rule: evenodd;"/>
<path d="M1749.82,834.36c-17.29,16.8-36.86,24.94-53.76,12.76-16.9-12.18-19.47-31.75-3.5-49.8,15.58-17.6,37.62-33.19,54.52-21.02,16.9,12.18,20.84,40.46,2.74,58.05Z" style="fill: #fbf5af; fill-rule: evenodd;"/>
<path d="M269.84,223.52c0,19.4-22.98,39.33-40.94,39.33s-38.06-16.61-38.06-36.01,25.03-43.21,42.99-43.21,36.01,20.49,36.01,39.89Z" style="fill: #f0794a; fill-rule: evenodd;"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB