b8b99bc399
Prioritized webber over builder to make sure it never times out. Prioritized the index page over the rest of the pages as it takes long due to api calls.
767 lines
17 KiB
SCSS
767 lines
17 KiB
SCSS
// This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
|
|
// Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
|
|
// structured like the flavor description below, will be included in your final CSS file.
|
|
/*
|
|
Flavor name: Default (mini-default)
|
|
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
|
Maintainers: Angelos Chalaris
|
|
mini.css version: v3.0.0-alpha.2
|
|
*/
|
|
|
|
$fore-color-var: '--f-col';
|
|
$secondary-fore-color-var: '--f-col2';
|
|
$back-color-var: '--b-col';
|
|
$secondary-back-color-var: '--b-col2';
|
|
$blockquote-color-var: '--blq-col';
|
|
$pre-color-var: '--pre-col';
|
|
$border-color-var: '--br-col';
|
|
$secondary-border-color-var: '--br-col2';
|
|
$heading-ratio-var: '--h-ratio';
|
|
$universal-margin-var: '--u-m';
|
|
$universal-padding-var: '--u-p';
|
|
$universal-border-radius-var: '--u-br-r';
|
|
$universal-box-shadow-var: '--u-bx-shd';
|
|
$a-link-color-var: '--a-l-col';
|
|
$a-visited-color-var: '--a-v-col';
|
|
|
|
$code-font-size: 0.8125em;
|
|
|
|
@import 'core';
|
|
|
|
$grid-container-name: 'container';
|
|
$grid-row-name: 'row';
|
|
$grid-row-parent-layout-prefix:'cols';
|
|
$grid-column-prefix: 'col';
|
|
$grid-column-offset-suffix: 'o';
|
|
$grid-order-normal-suffix: 'n';
|
|
$grid-order-first-suffix: 'f';
|
|
$grid-order-last-suffix: 'l';
|
|
$grid-small-prefix: 'sm';
|
|
$grid-medium-prefix: 'md';
|
|
$grid-large-prefix: 'lg';
|
|
|
|
$card-fore-color-var: '--cd-f-col';
|
|
$card-back-color-var: '--cd-b-col';
|
|
$card-border-color-var: '--cd-br-col';
|
|
|
|
$_include-parent-layout: false;
|
|
|
|
@import 'layout';
|
|
|
|
/*
|
|
Custom elements for card elements.
|
|
*/
|
|
|
|
$card-fluid-name: 'fluid'; // Class name for fluid cards.
|
|
$card-fluid-width: 100%; // Width for fluid cards.
|
|
@include make-card-alt-size ($card-fluid-name, $card-fluid-width);
|
|
|
|
$card-section-double-padded-name: 'double-padded'; // Class name for card double-padded section variant.
|
|
$card-section-double-padded-padding: calc(1.5 * var(#{$universal-padding-var})); // Padding for card sectiondouble-padded section variant.
|
|
@include make-card-section-alt-style($card-section-double-padded-name, $card-section-double-padded-padding);
|
|
|
|
.#{$card-name} {
|
|
box-shadow: 0 1.25rem 2.5rem -0.625rem rgba(0, 32, 64, 0.1);
|
|
}
|
|
|
|
.#{$card-name} > h3.#{$card-section-name}.#{$card-section-double-padded-name} {
|
|
padding: calc(3 * var(#{$universal-padding-var}));
|
|
}
|
|
|
|
.#{$card-name} > .#{$card-section-name}.#{$card-section-double-padded-name} > p {
|
|
margin: var(#{$universal-margin-var}) calc(var(#{$universal-margin-var}) / 2);
|
|
}
|
|
|
|
.#{$card-name} + .#{$card-name} {
|
|
margin-top: calc(5 * var(#{$universal-margin-var}));
|
|
}
|
|
|
|
$form-back-color-var: '--frm-b-col';
|
|
$form-fore-color-var: '--frm-f-col';
|
|
$form-border-color-var: '--frm-br-col';
|
|
$input-back-color-var: '--in-b-col';
|
|
$input-fore-color-var: '--in-f-col';
|
|
$input-border-color-var: '--in-br-col';
|
|
$input-focus-color-var: '--in-fc-col';
|
|
$input-invalid-color-var: '--in-inv-col';
|
|
$button-back-color-var: '--btn-b-col';
|
|
$button-hover-back-color-var: '--btn-h-b-col';
|
|
$button-fore-color-var: '--btn-f-col';
|
|
$button-border-color-var: '--btn-br-col';
|
|
$button-hover-border-color-var: '--btn-h-br-col';
|
|
$button-group-border-color-var: '--btn-grp-br-col';
|
|
|
|
|
|
$_include-fluid-input-group: true;
|
|
|
|
@import 'input_control';
|
|
|
|
/*
|
|
Custom elements for forms and input elements.
|
|
*/
|
|
$button-primary-name: 'primary'; // Class name for primary button color variant.
|
|
$button-primary-back-color: #1976d2; // Background color for primary button color variant.
|
|
$button-primary-hover-back-color:#1565c0; // Background color for primary button color variant (hover).
|
|
$button-primary-fore-color: #f8f8f8; // Text color for primary button color variant.
|
|
@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
|
|
|
|
|
|
$header-fore-color-var: '--hd-f-col';
|
|
$header-back-color-var: '--hd-b-col';
|
|
$header-hover-back-color-var: '--hd-hv-b-col';
|
|
$header-border-color-var: '--hd-br-col';
|
|
$nav-fore-color-var: '--nv-f-col';
|
|
$nav-back-color-var: '--nv-b-col';
|
|
$nav-hover-back-color-var: '--nv-hv-b-col';
|
|
$nav-border-color-var: '--nv-br-col';
|
|
$nav-link-color-var: '--nv-ln-col';
|
|
$footer-fore-color-var: '--ft-f-col';
|
|
$footer-back-color-var: '--ft-b-col';
|
|
$footer-border-color-var: '--ft-br-col';
|
|
$footer-link-color-var: '--ft-ln-col';
|
|
$drawer-back-color-var: '--dr-b-col';
|
|
$drawer-border-color-var: '--dr-br-col';
|
|
$drawer-hover-back-color-var: '--dr-hv-b-col';
|
|
$drawer-close-color-var: '--dr-cl-col';
|
|
|
|
|
|
$nav-sublink-depth: 1;
|
|
|
|
$_drawer-right: false;
|
|
|
|
@import 'navigation';
|
|
|
|
$mark-back-color: #424242;
|
|
$mark-font-size: 0.5em;
|
|
|
|
$toast-back-color: #212121;
|
|
|
|
$mark-back-color-var: '--mrk-b-col';
|
|
$mark-fore-color-var: '--mrk-f-col';
|
|
$toast-back-color-var: '--tst-b-col';
|
|
$toast-fore-color-var: '--tst-f-col';
|
|
$tooltip-back-color-var: '--tltp-b-col';
|
|
$tooltip-fore-color-var: '--tltp-f-col';
|
|
$modal-overlay-color-var: '--mdl-ov-col';
|
|
$modal-close-color-var: '--mdl-cl-col';
|
|
$modal-close-hover-back-color-var: '--mdl-cl-h-col';
|
|
$collapse-label-back-color-var: '--clps-lbl-b-col';
|
|
$collapse-label-fore-color-var: '--clps-lbl-f-col';
|
|
$collapse-label-hover-back-color-var: '--clps-lbl-h-b-col';
|
|
$collapse-selected-label-back-color-var: '--clps-sel-lbl-b-col';
|
|
$collapse-border-color-var: '--clps-br-col';
|
|
$collapse-content-back-color-var: '--clps-cnt-b-col';
|
|
$collapse-selected-label-border-color-var: '--clps-sel-lbl-br-col';
|
|
|
|
$_include-modal: false;
|
|
$_include-tooltip: false;
|
|
$_include-collapse: false;
|
|
|
|
@import 'contextual';
|
|
|
|
div,main,nav{
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.#{$toast-name} {
|
|
bottom: calc(var(#{$universal-margin-var}) / 2);
|
|
opacity: 1;
|
|
transition: opacity 0.3s ease-in-out;
|
|
}
|
|
|
|
mark {
|
|
position: relative;
|
|
top: -0.25rem;
|
|
left: 0.25rem;
|
|
}
|
|
|
|
/*
|
|
Custom elements for contextual background elements, toasts and tooltips.
|
|
*/
|
|
$mark-secondary-name: 'secondary'; // Class name for secondary <mark> color variant.
|
|
$mark-secondary-back-color: #d32f2f; // Background color for secondary <mark> color variant.
|
|
@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
|
|
|
|
$mark-tertiary-name: 'tertiary'; // Class name for tertiary <mark> color variant.
|
|
$mark-tertiary-back-color: #308732; // Background color for tertiary <mark> color variant.
|
|
@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
|
|
|
|
$mark-tag-name: 'tag'; // Class name, padding and border radius for tag <mark> size variant.
|
|
$mark-tag-padding: calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
|
|
$mark-tag-border-radius: 1em;
|
|
@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
|
|
|
|
// Website-specific styles
|
|
code, pre, kbd, code *, pre *, kbd *, code[class*="language-"], pre[class*="language-"] {
|
|
font-family: Menlo, Consolas, monospace !important;
|
|
}
|
|
pre {
|
|
border: 0.0625rem solid var(#{$secondary-border-color-var});
|
|
border-radius: var(#{$universal-border-radius-var});
|
|
}
|
|
|
|
.search {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
header h1.logo {
|
|
margin-top: -0.8rem;
|
|
text-align:center;
|
|
position: relative;
|
|
top: 0;
|
|
transition: top 0.3s;
|
|
a {
|
|
text-decoration:none;
|
|
color: #111;
|
|
}
|
|
@media screen and (min-width: 769px) {
|
|
&:hover {
|
|
top: -3.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
header #title {
|
|
position:relative;
|
|
top: -1rem;
|
|
@media screen and (max-width: 768px) { display: none; }
|
|
}
|
|
|
|
header h1 small {
|
|
display:block;
|
|
font-size: 0.875rem;
|
|
color: #888;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
label#menu-toggle {
|
|
position: absolute;
|
|
left: 0rem;
|
|
top: 0rem;
|
|
width: 3.4375rem;
|
|
}
|
|
|
|
main {
|
|
padding: 0;
|
|
}
|
|
|
|
:root {
|
|
#{$collapse-label-back-color-var}: $collapse-label-back-color;
|
|
#{$collapse-label-fore-color-var}: $collapse-label-fore-color;
|
|
#{$collapse-label-hover-back-color-var}: $collapse-label-hover-back-color;
|
|
#{$collapse-selected-label-back-color-var}: $collapse-selected-label-back-color;
|
|
#{$collapse-border-color-var}: $collapse-border-color;
|
|
#{$collapse-content-back-color-var} : $collapse-content-back-color;
|
|
#{$collapse-selected-label-border-color-var}: $collapse-selected-label-border-color;
|
|
}
|
|
label.#{$collapse-name} {
|
|
width: 100%;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
transition: background 0.3s;
|
|
color: var(#{$collapse-label-fore-color-var});
|
|
background: var(#{$collapse-label-back-color-var});
|
|
border: $__1px solid var(#{$collapse-border-color-var});
|
|
padding: calc(1.5 * var(#{$universal-padding-var}));
|
|
border-radius: var(#{$universal-border-radius-var});
|
|
&:hover, &:focus {
|
|
background: var(#{$collapse-label-hover-back-color-var});
|
|
}
|
|
+ pre {
|
|
box-sizing: border-box;
|
|
height: 0;
|
|
max-height: 1px;
|
|
overflow: auto;
|
|
margin: 0;
|
|
border: 0;
|
|
padding: 0;
|
|
transition: max-height 0.3s;
|
|
}
|
|
&.toggled {
|
|
background: var(#{$collapse-selected-label-back-color-var});
|
|
border-bottom-color: var(#{$collapse-selected-label-border-color-var});
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
+ pre {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
position: relative;
|
|
width: 100%;
|
|
height: auto;
|
|
border: $__1px solid var(#{$collapse-border-color-var});
|
|
border-top: 0;
|
|
padding: calc(2 * var(#{$universal-padding-var}));
|
|
max-height: $collapse-content-max-height;
|
|
}
|
|
}
|
|
}
|
|
|
|
button.primary.clipboard-copy {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
> img {
|
|
vertical-align: bottom;
|
|
}
|
|
}
|
|
|
|
code[class*="language-"],
|
|
pre[class*="language-"] {
|
|
color: #222;
|
|
text-align: left;
|
|
white-space: pre;
|
|
word-spacing: normal;
|
|
word-break: normal;
|
|
word-wrap: normal;
|
|
line-height: 1.8;
|
|
|
|
-moz-tab-size: 2;
|
|
-o-tab-size: 2;
|
|
tab-size: 2;
|
|
|
|
-webkit-hypens: none;
|
|
-moz-hyphens: none;
|
|
-ms-hyphens: none;
|
|
hyphens: none;
|
|
}
|
|
|
|
pre[class*="language-"] {
|
|
padding: calc(2 * var(#{$universal-padding-var}));
|
|
overflow: auto;
|
|
margin: var(#{$universal-margin-var}) 0;
|
|
}
|
|
|
|
|
|
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
|
|
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
|
|
background: #b3d4fc;
|
|
}
|
|
|
|
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
|
|
code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
|
background: #b3d4fc;
|
|
}
|
|
|
|
:not(pre) > code[class*="language-"] {
|
|
padding: .1em;
|
|
border-radius: .3em;
|
|
white-space: normal;
|
|
}
|
|
|
|
.token.comment,
|
|
.token.prolog,
|
|
.token.doctype,
|
|
.token.cdata {
|
|
color: #7a8490;
|
|
}
|
|
|
|
.token.punctuation {
|
|
color: #666;
|
|
}
|
|
|
|
.namespace {
|
|
opacity: .7;
|
|
}
|
|
|
|
.token.property,
|
|
.token.tag,
|
|
.token.boolean,
|
|
.token.constant,
|
|
.token.symbol,
|
|
.token.deleted,
|
|
.token.function {
|
|
color: #005cc5;
|
|
}
|
|
|
|
|
|
.token.number,
|
|
.token.class-name {
|
|
color: #832ed2;
|
|
}
|
|
|
|
.token.selector,
|
|
.token.attr-name,
|
|
.token.string,
|
|
.token.char,
|
|
.token.builtin,
|
|
.token.inserted {
|
|
color: #067e36;
|
|
}
|
|
|
|
.token.operator,
|
|
.token.entity,
|
|
.token.url,
|
|
.language-css .token.string,
|
|
.style .token.string,
|
|
.token.atrule,
|
|
.token.attr-value,
|
|
.token.keyword {
|
|
color: #d73a49;
|
|
}
|
|
|
|
.token.regex {
|
|
color: #097cab;
|
|
}
|
|
.token.important,
|
|
.token.variable {
|
|
color: #e90;
|
|
}
|
|
|
|
.token.important,
|
|
.token.bold {
|
|
font-weight: bold;
|
|
}
|
|
.token.italic {
|
|
font-style: italic;
|
|
}
|
|
|
|
.token.entity {
|
|
cursor: help;
|
|
}
|
|
|
|
button.scroll-to-top {
|
|
border-radius: 100%;
|
|
font-size: 1.5rem;
|
|
line-height: 1;
|
|
box-sizing: border-box;
|
|
width: 2.75rem;
|
|
height: 2.75rem;
|
|
position: fixed;
|
|
bottom: 1rem;
|
|
right: 2rem;
|
|
background: var(#{$back-color-var});
|
|
box-shadow: 0 .25rem .25rem 0 rgba(0,0,0,0.125),0 .125rem .125rem -.125rem rgba(0,0,0,0.25);
|
|
&:hover, &:focus {
|
|
background: var(#{$secondary-back-color-var});
|
|
}
|
|
}
|
|
|
|
.#{$card-name}#disclaimer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
z-index: 1100;
|
|
max-width: 100vw;
|
|
width: 100vw;
|
|
left: 0;
|
|
text-align: center;
|
|
font-size: 1.5rem;
|
|
margin: 0;
|
|
@media screen and (min-width: 768px){
|
|
width: 60vw;
|
|
left: 20vw;
|
|
bottom: 1rem;
|
|
}
|
|
@media screen and (min-width: 1280px){
|
|
width: 40vw;
|
|
left: 30vw;
|
|
bottom: 1.5rem;
|
|
}
|
|
}
|
|
|
|
button#disclaimer-close{
|
|
position: absolute;
|
|
top: -0.5rem;
|
|
right: -0.5rem;
|
|
font-size: 0.85rem;
|
|
background: 0;
|
|
}
|
|
|
|
// New styles for landing page
|
|
|
|
#splash {
|
|
height: auto;
|
|
padding-bottom: 1.5rem;
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(255, 174, 39, 1) 0%,
|
|
rgba(222, 73, 109, 1) 100%
|
|
);
|
|
#logo {
|
|
margin-top: 0;
|
|
margin-left: -0.5rem;
|
|
padding-top: 2rem;
|
|
text-align: center;
|
|
font-size: 2.25rem;
|
|
line-height: 2;
|
|
img {
|
|
vertical-align: top;
|
|
height: 4.5rem;
|
|
}
|
|
}
|
|
#tagline {
|
|
text-align: center;
|
|
padding: 0.5rem 25%;
|
|
}
|
|
#doc-link {
|
|
text-align: center;
|
|
margin-left: -0.5rem;
|
|
> a {
|
|
background: transparent;
|
|
border: 0.0625rem solid rgba(17, 17, 17, 0.95);
|
|
transition: all 0.3s;
|
|
&:hover,
|
|
&:focus {
|
|
background: rgba(17, 17, 17, 0.95);
|
|
color: #e86957;
|
|
}
|
|
}
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
#logo {
|
|
font-size: 1.75rem;
|
|
img {
|
|
height: 3.5rem;
|
|
}
|
|
}
|
|
#tagline {
|
|
padding: 0.25rem 17.5%;
|
|
font-size: 0.875rem;
|
|
}
|
|
#doc-link {
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
@media screen and (max-width: 383px) {
|
|
#logo {
|
|
font-size: 1.5rem;
|
|
img {
|
|
height: 3rem;
|
|
}
|
|
}
|
|
#tagline {
|
|
padding: 0.125rem 5%;
|
|
}
|
|
}
|
|
@media screen and (max-width: 479px) {
|
|
#tagline #tagline-lg {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.col-md-offset-1 {
|
|
margin-left: 8.33333%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1280px) {
|
|
.col-lg-offset-2 {
|
|
margin-left: 16.66667%;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
border-left: 0.3125rem solid #de4a6d;
|
|
padding-left: 0.625rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
#license-icon {
|
|
text-align: center;
|
|
@media screen and (min-width: 768px) {
|
|
position: relative;
|
|
top: calc(50% - 40px);
|
|
}
|
|
> svg {
|
|
border: 0.03125rem solid #444;
|
|
border-radius: 100%;
|
|
padding: 0.5rem;
|
|
fill: #444;
|
|
}
|
|
}
|
|
|
|
#license {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.no-padding {
|
|
padding: 0;
|
|
}
|
|
|
|
#in-numbers {
|
|
background: #111; //#3f88c5; //#e15554;
|
|
padding-top: 0.75rem;
|
|
padding-bottom: 0.75rem;
|
|
color: #fff;
|
|
svg {
|
|
fill: #fff;
|
|
@media screen and (min-width: 768px) {
|
|
position: relative;
|
|
top: 20px;
|
|
left: -34px;
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
}
|
|
p {
|
|
overflow-wrap: break-word;
|
|
@media screen and (min-width: 768px) {
|
|
position: relative;
|
|
top: -24px;
|
|
left: 22px;
|
|
font-size: 0.75rem;
|
|
}
|
|
margin-top: 0;
|
|
font-size: 0.625rem;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
#snippet-count,
|
|
#contrib-count,
|
|
#commit-count,
|
|
#star-count {
|
|
font-size: 1rem;
|
|
@media screen and (min-width: 768px) {
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
|
|
ul#links {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
li + li {
|
|
padding-top: 0.625rem;
|
|
}
|
|
}
|
|
|
|
.pick:not(.selected) {
|
|
display: none;
|
|
}
|
|
|
|
.card.pick {
|
|
transition: all 0.6s;
|
|
left: 0;
|
|
}
|
|
|
|
.card.pick + .card.pick {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.pick.selected {
|
|
overflow: visible;
|
|
button.next {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: -1rem;
|
|
> svg {
|
|
margin-right: -0.0625rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
#pick-slider {
|
|
position: relative;
|
|
}
|
|
|
|
button.previous {
|
|
left: -1%;
|
|
> svg {
|
|
margin-left: -0.125rem;
|
|
}
|
|
}
|
|
button.next {
|
|
right: -1%;
|
|
> svg {
|
|
margin-left: 0.0625rem;
|
|
}
|
|
}
|
|
|
|
button.previous,
|
|
button.next {
|
|
position: absolute;
|
|
top: 50%;
|
|
border-radius: 100%;
|
|
background: #f8f8f8;
|
|
border: 0.03125rem solid #ddd;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
padding: 0;
|
|
margin: 0;
|
|
transition: all 0.3s;
|
|
z-index: 2000;
|
|
> svg {
|
|
fill: #888;
|
|
transition: all 0.3s;
|
|
}
|
|
&:hover,
|
|
&:focus {
|
|
border-color: #aaa;
|
|
> svg {
|
|
fill: #444;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card.contributor {
|
|
height: calc(100% - 1rem);
|
|
justify-content: left;
|
|
> .section.media {
|
|
height: auto;
|
|
}
|
|
> .section.button {
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
transition: color 0.3s;
|
|
&:hover,
|
|
&:focus {
|
|
color: var(--a-l-col);
|
|
background: #f8f8f8;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card.fluid.contribution-guideline {
|
|
overflow: visible;
|
|
margin-top: 3rem;
|
|
padding-bottom: 0.25rem;
|
|
h3 {
|
|
padding-top: 0.5rem;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.contribution-guideline + .contribution-guideline {
|
|
&:before,
|
|
&:after {
|
|
content: "";
|
|
position: relative;
|
|
top: -2.75rem;
|
|
width: 0.375rem;
|
|
height: 0.375rem;
|
|
background: #ddd;
|
|
border: 0.03125rem solid #d0d0d0;
|
|
border-radius: 100%;
|
|
left: calc(50% - 0.1875rem);
|
|
box-shadow: inset -0.03125rem -0.03125rem 0.03125rem rgba(0, 0, 0, 0.05);
|
|
}
|
|
&:after {
|
|
position: absolute;
|
|
top: - 1.875rem;
|
|
}
|
|
}
|
|
|
|
.contribution-number {
|
|
position: absolute;
|
|
top: -1.125rem;
|
|
left: calc(50% - 1.125rem);
|
|
font-size: 1.5rem;
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(255, 174, 39, 1) 0%,
|
|
rgba(222, 73, 109, 1) 100%
|
|
);
|
|
border: 0.03125 solid #ddd;
|
|
width: 2.25rem;
|
|
text-align: center;
|
|
height: 2.25rem;
|
|
border-radius: 100%;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
}
|
|
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|