Update color scheme to match latest design system (#1508)
* import variables from main UI * apply colors * change hint styles * update table styling * remove box shadow from images * update sponsor and page ref styles * change code highlighting theme to add more contrast * replace link icon with google material svg * replace fontawesome with google material icons * remove fa assets * fix missing mastodon fa icon in footer * tweak alignment of hint svg icons * tweak inline code background
This commit is contained in:
Michael Stanclift
GitHub
parent
b59b7fea62
commit
1d43a44b22
29 changed files with 122 additions and 3919 deletions
|
|
@ -1,17 +1,44 @@
|
|||
@import 'fontawesome.scss';
|
||||
@import 'roboto-mono.scss';
|
||||
@import 'manrope.scss';
|
||||
|
||||
$white: #fff; // color5
|
||||
$lightest: #d9e1e8; // color2
|
||||
$lighter: #9baec8; // color3
|
||||
$darkest: #1F232B; // color1
|
||||
$black: #000; // color8
|
||||
$darker: lighten($darkest, 34%);
|
||||
// Values from the Mastodon UI
|
||||
$black: #000000; // Black
|
||||
$white: #ffffff; // White
|
||||
$red-600: #b7253d !default; // Deep Carmine
|
||||
$red-500: #df405a !default; // Cerise
|
||||
$blurple-600: #563acc; // Iris
|
||||
$blurple-500: #6364ff; // Brand purple
|
||||
$blurple-400: #7477fd; // Medium slate blue
|
||||
$blurple-300: #858afa; // Faded Blue
|
||||
$grey-600: hsl(240deg, 8%, 33%); // Trout
|
||||
$grey-100: hsl(240deg, 51%, 90%); // Topaz
|
||||
|
||||
$vibrant: #6364FF; // color4
|
||||
$error: #df405a; // color6
|
||||
$success: #79bd9a; // color7
|
||||
$success-green: #79bd9a !default; // Padua
|
||||
$error-red: $red-500 !default; // Cerise
|
||||
$warning-red: #ff5050 !default; // Sunset Orange
|
||||
$gold-star: #ca8f04 !default; // Dark Goldenrod
|
||||
|
||||
$classic-base-color: hsl(240deg, 16%, 19%);
|
||||
$classic-primary-color: hsl(240deg, 29%, 70%);
|
||||
$classic-secondary-color: hsl(255deg, 25%, 88%);
|
||||
$classic-highlight-color: $blurple-500;
|
||||
|
||||
// Custom values
|
||||
|
||||
$lightest: $white; // color2
|
||||
$lighter: $classic-secondary-color; // color3
|
||||
$darkest: darken($classic-base-color, 8%); // color1
|
||||
$darker: $classic-primary-color;
|
||||
|
||||
$vibrant: lighten($blurple-500, 8%); // color4
|
||||
$error: $warning-red; // color6
|
||||
$success: $success-green; // color7
|
||||
|
||||
$background-border-color: lighten($classic-base-color, 4%);
|
||||
$highlight-border-color: $vibrant;
|
||||
$warning-border-color: $gold-star;
|
||||
$alert-border-color: $warning-red;
|
||||
$success-border-color: $success-green;
|
||||
|
||||
$transition-in: 100ms linear;
|
||||
$transition-out: 250ms linear;
|
||||
|
|
@ -275,14 +302,19 @@ body {
|
|||
padding: 10px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
color: $darker;
|
||||
}
|
||||
|
||||
&>ul a {
|
||||
display: block;
|
||||
color: $white;
|
||||
color: $lighter;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
padding: 10px;
|
||||
|
||||
&:hover {
|
||||
color: $lightest;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-menu {
|
||||
|
|
@ -320,6 +352,10 @@ body {
|
|||
color: $darker;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -328,9 +364,9 @@ main {
|
|||
font-size: 36px;
|
||||
line-height: 1.48;
|
||||
font-weight: 600;
|
||||
color: $lightest;
|
||||
color: $lighter;
|
||||
padding-bottom: 35px;
|
||||
border-bottom: 1px solid lighten($darkest, 8%);
|
||||
border-bottom: 1px solid $background-border-color;
|
||||
margin-bottom: 35px;
|
||||
margin-left: -2.63px;
|
||||
text-align: left;
|
||||
|
|
@ -345,14 +381,14 @@ main {
|
|||
margin-top: 50px;
|
||||
margin-bottom: 30px;
|
||||
font-weight: 600;
|
||||
color: $lightest;
|
||||
color: $lighter;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 21px;
|
||||
line-height: 1.22;
|
||||
font-weight: 500;
|
||||
color: $lightest;
|
||||
color: $lighter;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 30px;
|
||||
margin-left: -1.75px;
|
||||
|
|
@ -363,7 +399,7 @@ main {
|
|||
font-size: 18px;
|
||||
line-height: 1.22;
|
||||
font-weight: 500;
|
||||
color: $lightest;
|
||||
color: $lighter;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 30px;
|
||||
margin-left: -1.75px;
|
||||
|
|
@ -374,7 +410,7 @@ main {
|
|||
font-size: 18px;
|
||||
line-height: 1.22;
|
||||
font-weight: 500;
|
||||
color: $lightest;
|
||||
color: $lighter;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 30px;
|
||||
margin-left: -1.75px;
|
||||
|
|
@ -386,7 +422,7 @@ main {
|
|||
margin-top: 25px;
|
||||
margin-left: -1.75px;
|
||||
text-align: left;
|
||||
color: $lightest;
|
||||
color: $lighter;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 26px;
|
||||
|
|
@ -419,7 +455,12 @@ main {
|
|||
}
|
||||
|
||||
a {
|
||||
color: lighten($vibrant, 18%);
|
||||
color: $darker;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -428,7 +469,6 @@ main {
|
|||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
box-shadow: 4px 6px 18px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.image-large {
|
||||
|
|
@ -492,11 +532,10 @@ main {
|
|||
width: 100%;
|
||||
margin-bottom: 26px;
|
||||
color: $lightest;
|
||||
|
||||
tr:nth-child(2n),
|
||||
thead tr {
|
||||
background-color: darken($darkest, 4%);
|
||||
}
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
border: 1px solid $background-border-color;
|
||||
border-radius: 4px;
|
||||
|
||||
th,
|
||||
td {
|
||||
|
|
@ -504,7 +543,7 @@ main {
|
|||
line-height: 28px;
|
||||
padding: 10px 15px;
|
||||
vertical-align: middle;
|
||||
border: 1px solid lighten($darkest, 8%);
|
||||
border-bottom: 1px solid $background-border-color;
|
||||
|
||||
.fa-check {
|
||||
color: $success;
|
||||
|
|
@ -518,7 +557,15 @@ main {
|
|||
thead th {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
tr:first-child th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
figure {
|
||||
figcaption {
|
||||
|
|
@ -535,7 +582,7 @@ main {
|
|||
hr {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-top: 1px solid $darker;
|
||||
border-top: 1px solid $background-border-color;
|
||||
margin: 26px 0;
|
||||
}
|
||||
|
||||
|
|
@ -543,7 +590,7 @@ main {
|
|||
margin-bottom: 26px;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
background-color: lighten($darkest, 8%);
|
||||
background-color: lighten($darkest, 4%);
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
|
|
@ -558,8 +605,8 @@ main {
|
|||
margin: 0;
|
||||
font-size: 85%;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
background-color: lighten($darkest, 8%);
|
||||
border-radius: 3px;
|
||||
background-color: lighten($darkest, 4%);
|
||||
border-radius: 4px;
|
||||
-webkit-hyphens: none;
|
||||
hyphens: none;
|
||||
white-space: pre;
|
||||
|
|
@ -616,7 +663,7 @@ main {
|
|||
}
|
||||
|
||||
#TableOfContents {
|
||||
color: $lighter;
|
||||
color: $darker;
|
||||
|
||||
ul li {
|
||||
color: inherit;
|
||||
|
|
@ -632,11 +679,15 @@ main {
|
|||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
color: $darker;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
padding-bottom: 35px - 14px;
|
||||
border-bottom: 1px solid lighten($darkest, 8%);
|
||||
border-bottom: 1px solid $background-border-color;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
|
|
@ -680,10 +731,10 @@ main {
|
|||
|
||||
&.secondary {
|
||||
padding: 2px 14px;
|
||||
border: 2px solid #fff;
|
||||
border: 2px solid $white;
|
||||
background: transparent;
|
||||
margin-left: 4px;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 375px) {
|
||||
|
|
@ -694,51 +745,50 @@ main {
|
|||
|
||||
.hint {
|
||||
margin: 26px 0;
|
||||
padding: 16px 16px 16px 56px;
|
||||
padding: 16px 16px 16px 66px;
|
||||
position: relative;
|
||||
border-left: 4px solid;
|
||||
border-radius: 4px;
|
||||
background-color: lighten($darkest, 8%);
|
||||
border: 1px solid $background-border-color;
|
||||
color: $white;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
|
||||
&-info {
|
||||
border-color: $vibrant;
|
||||
border-color: $highlight-border-color;
|
||||
|
||||
.hint-icon {
|
||||
color: $vibrant;
|
||||
color: $highlight-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-warning {
|
||||
border-color: #ca8f04;
|
||||
border-color: $warning-border-color;
|
||||
|
||||
.hint-icon {
|
||||
color: #ca8f04;
|
||||
color: $warning-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-success {
|
||||
border-color: $success;
|
||||
border-color: $success-border-color;
|
||||
|
||||
.hint-icon {
|
||||
color: $success;
|
||||
color: $success-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-danger {
|
||||
border-color: $error;
|
||||
border-color: $alert-border-color;
|
||||
|
||||
.hint-icon {
|
||||
color: $error;
|
||||
color: $alert-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 16px;
|
||||
top: 14px;
|
||||
left: 18px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
|
@ -757,7 +807,7 @@ main {
|
|||
|
||||
&-icon {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
|
@ -766,6 +816,7 @@ main {
|
|||
&:focus,
|
||||
&:active {
|
||||
background: lighten($darkest, 8%);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -817,7 +868,7 @@ main {
|
|||
}
|
||||
|
||||
.api-method-parameters-list {
|
||||
border: 1px solid lighten($darkest, 8%);
|
||||
border: 1px solid $background-border-color;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
|
@ -835,7 +886,7 @@ main {
|
|||
|
||||
.api-method-parameter {
|
||||
display: flex;
|
||||
border-bottom: 1px solid lighten($darkest, 8%);
|
||||
border-bottom: 1px solid $background-border-color;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
|
|
@ -895,15 +946,15 @@ main {
|
|||
}
|
||||
|
||||
.sponsorship {
|
||||
background: darken($darkest, 4%);
|
||||
border-radius: 4px;
|
||||
border: 1px solid $background-border-color;
|
||||
padding: 40px 0;
|
||||
|
||||
h2 {
|
||||
line-height: 21px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: lighten($darkest, 40%);
|
||||
color: $darker;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue