Initial commit: WordPress wp-content (themes, plugins, languages)
- Theme: momentry (custom theme with REST API routes) - Plugins: code-snippets (contains all API proxies) - Languages: zh_TW translations - Excludes: cache, backups, uploads, logs
This commit is contained in:
OpenCode
126
plugins/code-snippets/css/common/_badges.scss
Normal file
126
plugins/code-snippets/css/common/_badges.scss
Normal file
@@ -0,0 +1,126 @@
|
||||
@use 'sass:map';
|
||||
@use 'sass:list';
|
||||
@use 'sass:color';
|
||||
@use 'theme';
|
||||
|
||||
.badge {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
min-inline-size: 43px;
|
||||
min-block-size: 24px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-block: 0;
|
||||
padding-inline: 3px;
|
||||
box-sizing: border-box;
|
||||
gap: 5px;
|
||||
line-height: 1;
|
||||
|
||||
@at-root .row-actions & {
|
||||
color: #8c8c8c;
|
||||
padding-inline: 0;
|
||||
text-transform: capitalize;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dashicons {
|
||||
font-size: 18px;
|
||||
inline-size: 18px;
|
||||
block-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.network-shared {
|
||||
color: #2271b1;
|
||||
font-size: 22px;
|
||||
inline-size: 100%;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.small-badge {
|
||||
block-size: auto;
|
||||
inline-size: auto;
|
||||
font-size: smaller;
|
||||
padding-block: 0;
|
||||
padding-inline: 0.5em;
|
||||
}
|
||||
|
||||
.wp-core-ui .button.nav-tab-button {
|
||||
margin-inline-start: 0.5em;
|
||||
float: inline-end;
|
||||
color: #a7aaad;
|
||||
background: #f6f7f7;
|
||||
border-color: #f6f7f7;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
@each $name, $colors in theme.$badges {
|
||||
$text-color: #fff;
|
||||
$background-color: list.nth($colors, 1);
|
||||
|
||||
@if list.length($colors) > 1 {
|
||||
$text-color: list.nth($colors, 2);
|
||||
}
|
||||
|
||||
.badge.#{$name}-badge,
|
||||
.nav-tab-inactive:hover .badge.#{$name}-badge,
|
||||
:hover > .inverted-badges .#{$name}-badge {
|
||||
color: $text-color;
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
.badge.#{$name}-badge:hover {
|
||||
color: $text-color;
|
||||
background-color: color.adjust($background-color, $lightness: -5%);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tab-inactive .badge,
|
||||
.inverted-badges .badge {
|
||||
color: #fff;
|
||||
background-color: #a7aaad;
|
||||
border-color: #fff !important;
|
||||
|
||||
.dashicons {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tab-inactive {
|
||||
$colors: map.get(theme.$badges, 'pro');
|
||||
$text-color: list.nth($colors, 2);
|
||||
$background-color: list.nth($colors, 1);
|
||||
|
||||
.badge.pro-badge {
|
||||
color: $text-color;
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&.button, .dashicons-external {
|
||||
color: #3c434a;
|
||||
}
|
||||
|
||||
.badge.pro-badge {
|
||||
color: $background-color;
|
||||
background-color: $text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tab-inactive {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.nav-tab-button .dashicons-external {
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
}
|
||||
109
plugins/code-snippets/css/common/_codemirror.scss
Normal file
109
plugins/code-snippets/css/common/_codemirror.scss
Normal file
@@ -0,0 +1,109 @@
|
||||
.CodeMirror {
|
||||
border: 1px solid #dfdfdf;
|
||||
border-radius: 3px;
|
||||
block-size: auto !important;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.CodeMirror-code {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.CodeMirror-focused .cm-matchhighlight {
|
||||
color: white !important;
|
||||
outline: 1px solid green;
|
||||
}
|
||||
|
||||
/* Add a bit of extra space above the editor */
|
||||
.CodeMirror-sizer {
|
||||
&::before, &::after {
|
||||
display: block;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
padding-block-end: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fix cursor color with rubyblue theme (see https://goo.gl/3HDgRm */
|
||||
.cm-s-rubyblue .CodeMirror-cursor {
|
||||
border-inline-start: 1px solid white !important;
|
||||
}
|
||||
|
||||
[class*='CodeMirror-lint-marker'], [class*='CodeMirror-lint-message'], .CodeMirror-lint-marker-multiple {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.CodeMirror-lint-marker-error, .CodeMirror-lint-marker-warning {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.CodeMirror-lint-marker-multiple {
|
||||
position: absolute;
|
||||
inset-block-start: 0;
|
||||
}
|
||||
|
||||
[class*='CodeMirror-lint-marker']::before {
|
||||
font: normal 18px/1 dashicons;
|
||||
position: relative;
|
||||
inset-block-start: -2px;
|
||||
}
|
||||
|
||||
[class*='CodeMirror-lint-message']::before {
|
||||
font: normal 16px/1 dashicons;
|
||||
position: absolute;
|
||||
inset-inline-start: 16px;
|
||||
}
|
||||
|
||||
.CodeMirror-lint-message-error,
|
||||
.CodeMirror-lint-message-warning {
|
||||
box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
|
||||
margin-block: 5px 2px;
|
||||
padding-block: 3px;
|
||||
margin-inline: 0;
|
||||
padding-inline: 28px 12px;
|
||||
}
|
||||
|
||||
.CodeMirror-lint-message-warning {
|
||||
background-color: #fff8e5;
|
||||
border-inline-start: 4px solid #ffb900;
|
||||
}
|
||||
|
||||
.CodeMirror-lint-marker-warning::before, .CodeMirror-lint-message-warning::before {
|
||||
content: '\f534';
|
||||
color: #f6a306;
|
||||
}
|
||||
|
||||
.CodeMirror-lint-message-error {
|
||||
background-color: #fbeaea;
|
||||
border-inline-start: 4px solid #dc3232;
|
||||
}
|
||||
|
||||
.CodeMirror-lint-marker-error::before, .CodeMirror-lint-message-error::before {
|
||||
content: '\f153';
|
||||
color: #dc3232;
|
||||
}
|
||||
|
||||
.CodeMirror-lint-tooltip {
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.CodeMirror .CodeMirror-matchingbracket {
|
||||
background: rgb(255 150 0 / 30%);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.CodeMirror .CodeMirror-linenumber {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.CodeMirror-foldmarker {
|
||||
color: inherit;
|
||||
margin-inline: 0.25em;
|
||||
font-weight: bold;
|
||||
}
|
||||
8
plugins/code-snippets/css/common/_direction.scss
Normal file
8
plugins/code-snippets/css/common/_direction.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
:root {
|
||||
--cs-direction-multiplier: 1; // LTR = 1, RTL = -1
|
||||
}
|
||||
|
||||
html[dir="rtl"],
|
||||
body.rtl {
|
||||
--cs-direction-multiplier: -1;
|
||||
}
|
||||
53
plugins/code-snippets/css/common/_modal.scss
Normal file
53
plugins/code-snippets/css/common/_modal.scss
Normal file
@@ -0,0 +1,53 @@
|
||||
.code-snippets-modal {
|
||||
.components-modal__header {
|
||||
padding-block-end: 24px;
|
||||
}
|
||||
|
||||
.components-modal__content {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
background: #f6f7f7;
|
||||
overflow: initial;
|
||||
max-inline-size: 100%;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
flex: 1;
|
||||
padding-block: 36px;
|
||||
padding-inline: 45px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.components-modal__header + div {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-block-start: 1px solid #e2e2e4;
|
||||
display: flex;
|
||||
flex-flow: row-reverse;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
inset-block-end: 0;
|
||||
background: #f6f7f7;
|
||||
inline-size: 100%;
|
||||
padding: 11px 19px;
|
||||
|
||||
.button-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button-large {
|
||||
block-size: 45px;
|
||||
|
||||
&.button-primary {
|
||||
padding: 0 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
5
plugins/code-snippets/css/common/_select.scss
Normal file
5
plugins/code-snippets/css/common/_select.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
.code-snippets-select {
|
||||
input[type="text"]:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
102
plugins/code-snippets/css/common/_switch.scss
Normal file
102
plugins/code-snippets/css/common/_switch.scss
Normal file
@@ -0,0 +1,102 @@
|
||||
@use 'theme';
|
||||
|
||||
$off-color: #789;
|
||||
|
||||
.snippet-execution-button,
|
||||
.snippet-activation-switch,
|
||||
input[type='checkbox'].switch {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.snippet-activation-switch,
|
||||
input[type='checkbox'].switch {
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
inline-size: 32px;
|
||||
block-size: 19px;
|
||||
border-radius: 34px;
|
||||
text-align: start;
|
||||
border: 1px solid $off-color;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::before {
|
||||
transition: all .1s;
|
||||
content: '';
|
||||
block-size: 13px;
|
||||
inline-size: 13px;
|
||||
display: inline-block;
|
||||
background-color: $off-color;
|
||||
border-radius: 50%;
|
||||
margin: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.active-snippet .snippet-activation-switch,
|
||||
input[type='checkbox'].switch:checked {
|
||||
background-color: #0073aa;
|
||||
|
||||
&::before {
|
||||
background-color: white;
|
||||
transform: translateX(calc(100% * var(--cs-direction-multiplier)));
|
||||
}
|
||||
}
|
||||
|
||||
.erroneous-snippet .snippet-activation-switch::before {
|
||||
content: '!';
|
||||
transform: translateX(calc(50% * var(--cs-direction-multiplier)));
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
a.snippet-condition-count {
|
||||
border-radius: 50%;
|
||||
border: 1.8px solid currentcolor;
|
||||
block-size: 29px;
|
||||
inline-size: 29px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.inactive-snippet & {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.active-snippet & {
|
||||
font-weight: bold;
|
||||
color: theme.$accent;
|
||||
}
|
||||
}
|
||||
|
||||
.snippet-execution-button {
|
||||
margin-inline-start: 11px;
|
||||
margin-block-start: 9px;
|
||||
inline-size: 0;
|
||||
block-size: 0;
|
||||
border-block: 9px solid transparent;
|
||||
border-inline-start: 10px solid #ccc;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -14px -8px -14px -21px;
|
||||
border-radius: 50%;
|
||||
border: 1.8px solid #ccc;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-inline-start-color: theme.$accent;
|
||||
transition: border-inline-start-color 0.6s;
|
||||
|
||||
&::before {
|
||||
border-color: theme.$accent;
|
||||
transition: border-color 0.6s;
|
||||
}
|
||||
}
|
||||
}
|
||||
56
plugins/code-snippets/css/common/_theme.scss
Normal file
56
plugins/code-snippets/css/common/_theme.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
@use 'sass:color';
|
||||
|
||||
$accent: #2271b1;
|
||||
$primary: #03c7d2;
|
||||
$secondary: #d46f4d;
|
||||
$outline: #9e9e9e;
|
||||
$brand-discord: #5865f2;
|
||||
$brand-facebook: #3b5998;
|
||||
$cloud: #00bcd4;
|
||||
$cloud-update: #ff9800;
|
||||
|
||||
/* format: background-color [color] */
|
||||
$badges: (
|
||||
php: #1d97c6,
|
||||
html: #ef6a36,
|
||||
css: #9b59b6,
|
||||
js: #ffeb3b #1c1f20,
|
||||
cond: #2eae95,
|
||||
core: #61c5cb,
|
||||
pro: #f7e8e3 #df9279,
|
||||
cloud: $cloud,
|
||||
bundles: #50575e,
|
||||
cloud_search: #ff9800,
|
||||
private: #f7e6be #ca961b,
|
||||
public: #dbebf7 $accent,
|
||||
success: #d3e8d1 #447340,
|
||||
failure: #fad7c1 #a24b16,
|
||||
info: #d2e6f4 #2b71a3,
|
||||
neutral: #e2e5e5 #6c7e7e,
|
||||
special: #dfc5ef #6e249c
|
||||
);
|
||||
$notices: (
|
||||
success: #d3e9d3 #377a37,
|
||||
warning: #f2ebc3 #b0730a,
|
||||
error: #f8d7da #721c24,
|
||||
);
|
||||
|
||||
@function contrasting-text-color($bg-color) {
|
||||
$sum: 0;
|
||||
|
||||
@each $color, $multiplier in (red 0.299, green 0.587, blue 0.114) {
|
||||
$sum: $sum + color.channel($bg-color, $color, $space: rgb) * $multiplier;
|
||||
}
|
||||
|
||||
@return if ($sum > 186, #1c1f20, #fff)
|
||||
}
|
||||
|
||||
@mixin link-colors($color, $lightness: 15%) {
|
||||
a {
|
||||
color: $color;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
color: color.adjust($color, $lightness: $lightness);
|
||||
}
|
||||
}
|
||||
}
|
||||
184
plugins/code-snippets/css/common/_tooltips.scss
Normal file
184
plugins/code-snippets/css/common/_tooltips.scss
Normal file
@@ -0,0 +1,184 @@
|
||||
$bg-color: hsl(0deg 0% 20% / 90%);
|
||||
|
||||
.help-tooltip {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border-block-end: 1px dotted;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.help-tooltip-anchor {
|
||||
cursor: help;
|
||||
padding-block: 0.3em 0;
|
||||
padding-inline: 0.3em;
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
cursor: help !important;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.dashicons {
|
||||
color: lightslategrey;
|
||||
}
|
||||
|
||||
&.badge {
|
||||
display: inline-flex;
|
||||
|
||||
.dashicons {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip::before,
|
||||
.tooltip-content {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out,
|
||||
visibility 0.2s ease-in-out,
|
||||
transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
|
||||
transform: translate3d(0, 0, 0);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tooltip::before {
|
||||
z-index: 1001;
|
||||
border: 6px solid transparent;
|
||||
background: transparent;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.tooltip-inline::before {
|
||||
inset-block-start: 4px;
|
||||
}
|
||||
|
||||
.tooltip-content {
|
||||
z-index: 1000;
|
||||
padding: 8px;
|
||||
background-color: $bg-color;
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
font-size: small;
|
||||
font-weight: normal;
|
||||
text-transform: none;
|
||||
min-inline-size: 200px;
|
||||
backdrop-filter: blur(3px);
|
||||
|
||||
.tooltip-block & {
|
||||
margin-inline-start: -80px;
|
||||
}
|
||||
|
||||
.tooltip-inline & {
|
||||
margin-inline-start: 0;
|
||||
margin-block-end: -16px;
|
||||
}
|
||||
|
||||
.tooltip-inline.tooltip-start & {
|
||||
inset-block-start: -50%;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-block.tooltip-start {
|
||||
&::before {
|
||||
margin-inline-start: -6px;
|
||||
margin-block-end: -12px;
|
||||
border-block-start-color: $bg-color;
|
||||
}
|
||||
|
||||
&::before, .tooltip-content {
|
||||
inset-block-end: 100%;
|
||||
inset-inline-start: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-block.tooltip-end {
|
||||
&::before {
|
||||
margin-block: -12px 0;
|
||||
border-block-start-color: transparent;
|
||||
border-block-end-color: $bg-color;
|
||||
}
|
||||
|
||||
&::before, .tooltip-content {
|
||||
inset-block: 100% auto;
|
||||
margin-inline-start: 25%;
|
||||
}
|
||||
|
||||
.tooltip-content {
|
||||
inset-inline-end: -70%;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-inline.tooltip-start {
|
||||
&::before {
|
||||
inset-block-end: 50%;
|
||||
margin-inline: 0 -12px;
|
||||
margin-block-end: 0;
|
||||
border-block-start-color: transparent;
|
||||
border-inline-start-color: $bg-color;
|
||||
}
|
||||
|
||||
&::before, .tooltip-content {
|
||||
inset-inline: auto 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-inline.tooltip-end {
|
||||
&::before {
|
||||
margin-block-end: 0;
|
||||
margin-inline-start: -12px;
|
||||
border-block-start-color: transparent;
|
||||
border-inline-end-color: $bg-color;
|
||||
}
|
||||
|
||||
&::before, .tooltip-content {
|
||||
inset-inline-start: 100%;
|
||||
}
|
||||
|
||||
.tooltip-content {
|
||||
inset-block-start: -50%;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip:hover,
|
||||
.tooltip:focus {
|
||||
&::before, .tooltip-content {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-block.tooltip-start:hover,
|
||||
.tooltip-block.tooltip-start:focus {
|
||||
&::before, .tooltip-content {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-block.tooltip-end:hover,
|
||||
.tooltip-block.tooltip-end:focus {
|
||||
&::before, .tooltip-content {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-inline.tooltip-end:hover,
|
||||
.tooltip-inline.tooltip-end:focus {
|
||||
&::before, .tooltip-content {
|
||||
transform: translateX(calc(10px * var(--cs-direction-multiplier)));
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-inline.tooltip-start:hover,
|
||||
.tooltip-inline.tooltip-start:focus {
|
||||
&::before, .tooltip-content {
|
||||
transform: translateX(calc(-10px * var(--cs-direction-multiplier)));
|
||||
}
|
||||
}
|
||||
134
plugins/code-snippets/css/common/_upsell.scss
Normal file
134
plugins/code-snippets/css/common/_upsell.scss
Normal file
@@ -0,0 +1,134 @@
|
||||
@use 'sass:color';
|
||||
@use 'theme';
|
||||
|
||||
.code-snippets-upsell-banner {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
gap: 10px;
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.components-external-link__contents {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background-color: theme.$secondary;
|
||||
border: 0;
|
||||
font-weight: bold;
|
||||
margin-inline-start: auto;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: color.adjust(theme.$secondary, $lightness: -10%);
|
||||
}
|
||||
}
|
||||
|
||||
.button-link.button-small {
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
padding: 0;
|
||||
color: #a7aaad;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.code-snippets-upsell-dialog {
|
||||
background: linear-gradient(116.04deg, #edfcff -0.75%, #fcdfd4 93.04%);
|
||||
inline-size: 794px;
|
||||
box-shadow: 0 4px 80px rgb(0 0 0 / 10%);
|
||||
border-radius: 8px;
|
||||
font-family: 'SF Pro', sans-serif;
|
||||
color: #1c3f41;
|
||||
line-height: 1.5;
|
||||
max-block-size: unset;
|
||||
|
||||
.components-modal__content {
|
||||
margin: 0;
|
||||
padding-block: 48px;
|
||||
padding-inline: 80px;
|
||||
}
|
||||
|
||||
.components-modal__content > div:last-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 18px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
margin: 0;
|
||||
|
||||
span {
|
||||
color: #d46f4d;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-block: 0;
|
||||
margin-inline: 2em;
|
||||
}
|
||||
|
||||
h1 + p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
img {
|
||||
inline-size: 82px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: grid;
|
||||
inline-size: 100%;
|
||||
grid-auto-flow: column;
|
||||
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 11px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
li::before {
|
||||
content: '✓';
|
||||
color: #fff;
|
||||
inline-size: 24px;
|
||||
block-size: 24px;
|
||||
border-radius: 50%;
|
||||
background-color: #0ca0a9;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button.button-large {
|
||||
background-color: #d46f4d;
|
||||
padding-block: 15px;
|
||||
padding-inline: 20px;
|
||||
font-size: 16px;
|
||||
line-height: inherit;
|
||||
margin-block: 16px 24px;
|
||||
margin-inline: auto;
|
||||
border-color: currentcolor;
|
||||
|
||||
&:hover {
|
||||
background-color: color.adjust(#d46f4d, $lightness: -10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user