asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Fix SCSS code style

Browse source
This commit is contained in:
Cotes Chung 2021-10-26 03:04:15 +08:00
parent 2dc2175723
commit b5c26fed08
8 changed files with 103 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
_sass/addon/commons.scss
View file

@ -6,12 +6,9 @@
@mixin mode-toggle($dark-mode: false) { @mixin mode-toggle($dark-mode: false) {
@if $dark-mode { @if $dark-mode {
@include dark-scheme; @include dark-scheme;
} @else { } @else {
@include light-scheme; @include light-scheme;
} }
} }
html:not([mode]), html:not([mode]),
@ -175,15 +172,18 @@ footer {
a { a {
color: var(--footer-link); color: var(--footer-link);
&:link { &:link {
@include no-text-decoration; @include no-text-decoration;
} }
&:hover { &:hover {
@extend %link-hover; @extend %link-hover;
@include no-text-decoration; @include no-text-decoration;
} }
} }
.footer-right { .footer-right {
text-align: right; text-align: right;
} }
@ -202,22 +202,28 @@ footer {
position: -webkit-sticky; /* Safari */ position: -webkit-sticky; /* Safari */
position: sticky; position: sticky;
} }
&.topbar-down { &.topbar-down {
top: 6rem; top: 6rem;
} }
> div { > div {
padding-left: 1rem; padding-left: 1rem;
border-left: 1px solid var(--main-border-color); border-left: 1px solid var(--main-border-color);
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 4rem; margin-bottom: 4rem;
} }
} }
span { span {
@include panel-label; @include panel-label;
} }
.post-content { .post-content {
font-size: 0.9rem; font-size: 0.9rem;
} }
} }
#access-tags { #access-tags {
@ -234,6 +240,7 @@ footer {
border-radius: 0.8rem; border-radius: 0.8rem;
padding: 0.3rem 0.5rem; padding: 0.3rem 0.5rem;
margin: 0 0.35rem 0.5rem 0; margin: 0 0.35rem 0.5rem 0;
&:hover { &:hover {
background-color: #2a408e; background-color: #2a408e;
border-color: #2a408e; border-color: #2a408e;
@ -244,7 +251,6 @@ footer {
} }
#access-lastmod { #access-lastmod {
li { li {
height: 1.8rem; height: 1.8rem;
overflow: hidden; overflow: hidden;
@ -270,15 +276,18 @@ footer {
.footnotes > ol { .footnotes > ol {
padding-left: 2rem; padding-left: 2rem;
margin-top: 0.5rem; margin-top: 0.5rem;
> li { > li {
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
} }
> p { > p {
margin-left: 0.25em; margin-left: 0.25em;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
// [scroll-focus] added by `smooth-scroll.js` // [scroll-focus] added by `smooth-scroll.js`
&:target:not([scroll-focus]), &:target:not([scroll-focus]),
&[scroll-focus=true] > p { &[scroll-focus=true] > p {
@ -323,9 +332,11 @@ footer {
margin-top: 3rem; margin-top: 3rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
em { /* MarkDown italic */ em { /* MarkDown italic */
padding-right: 0.2rem; padding-right: 0.2rem;
} }
a:hover { a:hover {
code { code {
@extend %link-hover; @extend %link-hover;
@ -346,6 +357,7 @@ footer {
thead { thead {
border-bottom: solid 2px rgba(210, 215, 217, 0.75); border-bottom: solid 2px rgba(210, 215, 217, 0.75);
th { th {
@extend %table-cell; @extend %table-cell;
} }
@ -354,18 +366,21 @@ footer {
tbody { tbody {
tr { tr {
border-bottom: 1px solid var(--tb-border-color); border-bottom: 1px solid var(--tb-border-color);
&:nth-child(2n) { &:nth-child(2n) {
background-color: var(--tb-even-bg); background-color: var(--tb-even-bg);
} }
&:nth-child(2n + 1) { &:nth-child(2n + 1) {
background-color: var(--tb-odd-bg); background-color: var(--tb-odd-bg);
} }
td { td {
@extend %table-cell; @extend %table-cell;
} }
} }
} } // tbody
} }// table
} }
/* --- post --- */ /* --- post --- */
@ -377,12 +392,15 @@ footer {
.post-meta { .post-meta {
font-size: 0.85rem; font-size: 0.85rem;
word-spacing: 1px; word-spacing: 1px;
a { a {
@extend %link-color; @extend %link-color;
@extend %link-underline; @extend %link-underline;
&:not(:last-child) { &:not(:last-child) {
margin-right: 2px; margin-right: 2px;
} }
&:hover { &:hover {
@extend %link-hover; @extend %link-hover;
} }
@ -416,7 +434,7 @@ footer {
margin: 0.5rem 0; margin: 0.5rem 0;
&[data-loaded=true] { &[data-loaded=true] {
animation: fade-in linear .5s; animation: fade-in linear 0.5s;
} }
&.left { &.left {
@ -445,6 +463,7 @@ footer {
&:not(.img-link) { &:not(.img-link) {
@extend %link-color; @extend %link-color;
@extend %link-underline; @extend %link-underline;
&:hover { &:hover {
@extend %link-hover; @extend %link-hover;
} }
@ -473,6 +492,7 @@ footer {
margin: 0 0.4rem 0.2rem -1.4rem; margin: 0 0.4rem 0.2rem -1.4rem;
vertical-align: middle; vertical-align: middle;
color: var(--checkbox-color); color: var(--checkbox-color);
&.checked { &.checked {
color: var(--checkbox-checked-color); color: var(--checkbox-checked-color);
} }
@ -546,6 +566,7 @@ footer {
padding: 1px 3px; padding: 1px 3px;
border-radius: 3px; border-radius: 3px;
color: var(--link-color); color: var(--link-color);
&:focus { &:focus {
box-shadow: none; box-shadow: none;
} }
@ -755,7 +776,6 @@ $sidebar-display: "sidebar-display";
width: 100%; width: 100%;
&:last-child { &:last-child {
a { a {
position: relative; position: relative;
left: $cursor-width / 2; left: $cursor-width / 2;
@ -871,6 +891,7 @@ $sidebar-display: "sidebar-display";
display: none; display: none;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
.post-content { .post-content {
margin-top: 2rem; margin-top: 2rem;
} }
@ -959,6 +980,7 @@ $sidebar-display: "sidebar-display";
&:focus { &:focus {
box-shadow: none; box-shadow: none;
background: center; background: center;
&.form-control { &.form-control {
&::-webkit-input-placeholder { @include input-placeholder; } &::-webkit-input-placeholder { @include input-placeholder; }
&::-moz-placeholder { @include input-placeholder; } &::-moz-placeholder { @include input-placeholder; }
@ -979,6 +1001,7 @@ $sidebar-display: "sidebar-display";
border: none; border: none;
padding: 0.5rem; padding: 0.5rem;
margin: 0 1rem 1rem 0; margin: 0 1rem 1rem 0;
&::before { &::before {
content: "#"; content: "#";
color: var(--text-muted-color); color: var(--text-muted-color);
@ -989,6 +1012,7 @@ $sidebar-display: "sidebar-display";
#search-results { #search-results {
padding-bottom: 6rem; padding-bottom: 6rem;
a { a {
&:hover { &:hover {
@extend %link-hover; @extend %link-hover;
@ -1081,6 +1105,7 @@ $sidebar-display: "sidebar-display";
&:nth-child(2) { &:nth-child(2) {
margin-top: $topbar-height; /* same as the height of topbar */ margin-top: $topbar-height; /* same as the height of topbar */
} }
&:first-child { &:first-child {
/* 3rem for topbar, 6rem for footer */ /* 3rem for topbar, 6rem for footer */
min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}); min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height});
@ -1088,8 +1113,7 @@ $sidebar-display: "sidebar-display";
} }
#post-wrapper { #post-wrapper {
min-height: calc( min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
} }
#topbar-wrapper.row, #topbar-wrapper.row,
@ -1147,8 +1171,8 @@ $sidebar-display: "sidebar-display";
} }
#post-wrapper { #post-wrapper {
min-height: calc( min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
h1 { h1 {
margin-top: 2.2rem; margin-top: 2.2rem;
font-size: 1.55rem; font-size: 1.55rem;
@ -1170,6 +1194,7 @@ $sidebar-display: "sidebar-display";
footer { footer {
height: $footer-height; height: $footer-height;
> div.d-flex { > div.d-flex {
width: 100%; width: 100%;
padding: 1.5rem 0; padding: 1.5rem 0;
@ -1178,6 +1203,7 @@ $sidebar-display: "sidebar-display";
-ms-flex-pack: distribute !important; -ms-flex-pack: distribute !important;
justify-content: space-around !important; justify-content: space-around !important;
} }
.footer-left, .footer-left,
.footer-right { .footer-right {
text-align: center; text-align: center;
@ -1201,13 +1227,13 @@ $sidebar-display: "sidebar-display";
.footnotes ol > li { .footnotes ol > li {
padding-top: 3.5rem; padding-top: 3.5rem;
margin-top: -3.2rem; margin-top: -3.2rem;
&:first-child { &:first-child {
margin-top: -3.5rem; margin-top: -3.5rem;
} }
} }
[#{$sidebar-display}] { [#{$sidebar-display}] {
#sidebar { #sidebar {
transform: translateX(0); transform: translateX(0);
} }
@ -1272,6 +1298,7 @@ $sidebar-display: "sidebar-display";
&.loaded ~ a { &.loaded ~ a {
margin-right: 1rem; margin-right: 1rem;
} }
.fa-times-circle { .fa-times-circle {
right: 5.2rem; right: 5.2rem;
} }
@ -1299,6 +1326,7 @@ $sidebar-display: "sidebar-display";
#page h1.dynamic-title { #page h1.dynamic-title {
display: none; display: none;
~ .post-content { ~ .post-content {
margin-top: 3rem; margin-top: 3rem;
} }
@ -1373,7 +1401,6 @@ $sidebar-display: "sidebar-display";
/* Compact icons in sidebar & panel hidden */ /* Compact icons in sidebar & panel hidden */
@media all and (min-width: 850px) and (max-width: 1199px) { @media all and (min-width: 850px) and (max-width: 1199px) {
#sidebar { #sidebar {
width: $sidebar-width-small; width: $sidebar-width-small;
@ -1387,6 +1414,7 @@ $sidebar-display: "sidebar-display";
span { span {
width: 2rem; width: 2rem;
} }
.icon-border { .icon-border {
left: -3px; left: -3px;
} }
@ -1446,7 +1474,6 @@ $sidebar-display: "sidebar-display";
/* --- desktop mode, both sidebar and panel are visible --- */ /* --- desktop mode, both sidebar and panel are visible --- */
@media all and (min-width: 1200px) { @media all and (min-width: 1200px) {
#main > div.row > div.col-xl-8 { #main > div.row > div.col-xl-8 {
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 0 75%; -ms-flex: 0 0 75%;
@ -1476,12 +1503,15 @@ $sidebar-display: "sidebar-display";
#search-results > div { #search-results > div {
width: 46%; width: 46%;
&:nth-child(odd) { &:nth-child(odd) {
margin-right: 1.5rem; margin-right: 1.5rem;
} }
&:nth-child(even) { &:nth-child(even) {
margin-left: 1.5rem; margin-left: 1.5rem;
} }
&:last-child:nth-child(odd) { &:last-child:nth-child(odd) {
position: relative; position: relative;
right: 24.3%; right: 24.3%;
@ -1499,9 +1529,9 @@ $sidebar-display: "sidebar-display";
} }
@media all and (min-width: 1400px) { @media all and (min-width: 1400px) {
#main > div.row { #main > div.row {
padding-left: calc((100% - #{$main-content-max-width}) / 2); padding-left: calc((100% - #{$main-content-max-width}) / 2);
> div.col-xl-8 { > div.col-xl-8 {
max-width: 850px; max-width: 850px;
} }
@ -1509,6 +1539,7 @@ $sidebar-display: "sidebar-display";
#search-result-wrapper { #search-result-wrapper {
padding-right: 2rem; padding-right: 2rem;
> div { > div {
max-width: 1110px; max-width: 1110px;
} }
@ -1527,13 +1558,13 @@ $sidebar-display: "sidebar-display";
} }
@media all and (min-width: 1650px) { @media all and (min-width: 1650px) {
#breadcrumb { #breadcrumb {
padding-left: 0; padding-left: 0;
} }
#main > div.row > div.col-xl-8 { #main > div.row > div.col-xl-8 {
padding-left: 0; padding-left: 0;
> div:first-child { > div:first-child {
padding-left: 0.55rem !important; padding-left: 0.55rem !important;
padding-right: 1.9rem !important; padding-right: 1.9rem !important;
@ -1581,6 +1612,7 @@ $sidebar-display: "sidebar-display";
> a { > a {
width: 6.2rem; width: 6.2rem;
height: 6.2rem; height: 6.2rem;
&.mx-auto { &.mx-auto {
margin-left: 0 !important; margin-left: 0 !important;
} }

2
_sass/addon/syntax.scss
View file

@ -76,6 +76,7 @@ div > pre {
table { table {
padding: 0; padding: 0;
border: 0; border: 0;
td pre { td pre {
overflow: visible; /* Fixed iOS safari overflow-x */ overflow: visible; /* Fixed iOS safari overflow-x */
word-break: normal; /* Fixed iOS safari linenos code break */ word-break: normal; /* Fixed iOS safari linenos code break */
@ -157,6 +158,7 @@ div {
pre.lineno { pre.lineno {
display: none; display: none;
} }
td.rouge-code { td.rouge-code {
@extend %code-snippet-padding; @extend %code-snippet-padding;
} }

9
_sass/colors/dark-typography.scss
View file

@ -116,11 +116,13 @@
.card-header { .card-header {
background-color: var(--card-header-bg); background-color: var(--card-header-bg);
} }
.list-group-item { .list-group-item {
border-left: none; border-left: none;
border-right: none; border-right: none;
padding-left: 2rem; padding-left: 2rem;
border-color: var(--categories-border); border-color: var(--categories-border);
&:last-child { &:last-child {
border-bottom-color: var(--card-bg); border-bottom-color: var(--card-bg);
} }
@ -128,13 +130,16 @@
} }
#archives li:nth-child(odd) { #archives li:nth-child(odd) {
background-image: linear-gradient( background-image:
linear-gradient(
to left, to left,
rgb(26, 26, 30), rgb(26, 26, 30),
rgb(39, 39, 45), rgb(39, 39, 45),
rgb(39, 39, 45), rgb(39, 39, 45),
rgb(39, 39, 45), rgb(39, 39, 45),
rgb(26, 26, 30)); rgb(26, 26, 30)
);
} }
} // dark-scheme } // dark-scheme

6
_sass/layout/archives.scss
View file

@ -41,6 +41,7 @@
&:not(:first-child) { &:not(:first-child) {
position: relative; position: relative;
left: 4px; left: 4px;
&::after { &::after {
left: 67px; left: 67px;
} }
@ -98,6 +99,7 @@
.date { .date {
white-space: nowrap; white-space: nowrap;
display: inline-block; display: inline-block;
&.month { &.month {
width: 1.4rem; width: 1.4rem;
text-align: center; text-align: center;
@ -120,6 +122,7 @@
z-index: 1; z-index: 1;
} }
} }
&.day { &.day {
font-size: 85%; font-size: 85%;
font-family: 'Lato', sans-serif; font-family: 'Lato', sans-serif;
@ -127,7 +130,7 @@
margin-right: -2px; margin-right: -2px;
width: 1.2rem; width: 1.2rem;
position: relative; position: relative;
left: -.15rem; left: -0.15rem;
} }
} // #archives .date } // #archives .date
@ -136,6 +139,7 @@
@media all and (max-width: 576px) { @media all and (max-width: 576px) {
#archives { #archives {
margin-top: -1rem; margin-top: -1rem;
ul { ul {
letter-spacing: 0; letter-spacing: 0;
} }

5
_sass/layout/category-tag.scss
View file

@ -3,7 +3,7 @@
*/ */
.dash { .dash {
margin: 0 .5rem .6rem .5rem; margin: 0 0.5rem 0.6rem 0.5rem;
border-bottom: 2px dotted var(--dash-color); border-bottom: 2px dotted var(--dash-color);
} }
@ -60,8 +60,9 @@
#page-tag { #page-tag {
ul > li { ul > li {
&::before { &::before {
margin: 0 .5rem; margin: 0 0.5rem;
} }
> a { > a {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;

11
_sass/layout/home.scss
View file

@ -22,24 +22,29 @@
border-radius: 50%; border-radius: 50%;
border: 1px solid var(--btn-paginator-border-color); border: 1px solid var(--btn-paginator-border-color);
background-color: var(--button-bg); background-color: var(--button-bg);
&:hover { &:hover {
background-color: var(--btn-paginator-hover-color); background-color: var(--btn-paginator-hover-color);
} }
} }
&.active { &.active {
.page-link { .page-link {
background-color: var(--btn-paginator-hover-color); background-color: var(--btn-paginator-hover-color);
color: var(--btn-text-color); color: var(--btn-text-color);
} }
} }
&.disabled { &.disabled {
cursor: not-allowed; cursor: not-allowed;
.page-link { .page-link {
color: rgba(108, 117, 125, 0.57); color: rgba(108, 117, 125, 0.57);
border-color: var(--btn-paginator-border-color); border-color: var(--btn-paginator-border-color);
background-color: var(--button-bg); background-color: var(--button-bg);
} }
} }
&:first-child .page-link, &:first-child .page-link,
&:last-child .page-link { &:last-child .page-link {
border-radius: 50%; border-radius: 50%;
@ -70,6 +75,7 @@
i { i {
font-size: 0.73rem; font-size: 0.73rem;
} }
span:not(:last-child) { span:not(:last-child) {
margin-right: 1.2rem; margin-right: 1.2rem;
} }
@ -79,6 +85,7 @@
margin-top: 0.6rem; margin-top: 0.6rem;
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
color: var(--post-list-text-color); color: var(--post-list-text-color);
> p { > p {
/* Make preview shorter on the homepage */ /* Make preview shorter on the homepage */
margin: 0; margin: 0;
@ -96,13 +103,13 @@
padding-left: 3px; padding-left: 3px;
color: var(--pin-color); color: var(--pin-color);
} }
> span { > span {
display: none; display: none;
} }
} }
} // .post-preview } // .post-preview
} // #post-list } // #post-list
/* Hide SideBar and TOC */ /* Hide SideBar and TOC */
@ -122,9 +129,9 @@
/* Sidebar is visible */ /* Sidebar is visible */
@media all and (min-width: 831px) { @media all and (min-width: 831px) {
#post-list { #post-list {
margin-top: 1.5rem; margin-top: 1.5rem;
.post-preview .post-meta { .post-preview .post-meta {
.pin { .pin {
background: var(--pin-bg); background: var(--pin-bg);

22
_sass/layout/post.scss
View file

@ -131,9 +131,11 @@
top: 4rem; top: 4rem;
transition: top 0.2s ease-in-out; transition: top 0.2s ease-in-out;
animation: fade-up 0.8s; animation: fade-up 0.8s;
&.topbar-down { &.topbar-down {
top: 6rem; top: 6rem;
} }
> span { > span {
@include panel-label; @include panel-label;
} }
@ -162,6 +164,7 @@ nav[data-toggle=toc] {
> h3 { > h3 {
@include label(1.1rem, 600); @include label(1.1rem, 600);
} }
.card { .card {
border-color: var(--card-border-color); border-color: var(--card-border-color);
background-color: var(--card-bg); background-color: var(--card-bg);
@ -169,9 +172,11 @@ nav[data-toggle=toc] {
-webkit-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
h3 { h3 {
color: var(--text-color); color: var(--text-color);
} }
&:hover { &:hover {
-webkit-transform: translate3d(0, -3px, 0); -webkit-transform: translate3d(0, -3px, 0);
transform: translate3d(0, -3px, 0); transform: translate3d(0, -3px, 0);
@ -200,6 +205,7 @@ nav[data-toggle=toc] {
ul { ul {
list-style-type: none; list-style-type: none;
padding-inline-start: 1.5rem; padding-inline-start: 1.5rem;
> li::before { > li::before {
background: #c2c9d4; background: #c2c9d4;
width: 5px; width: 5px;
@ -238,17 +244,21 @@ nav[data-toggle=toc] {
.share-icons { .share-icons {
font-size: 1.2rem; font-size: 1.2rem;
a { a {
&:not(:last-child) { &:not(:last-child) {
margin-right: 0.25rem; margin-right: 0.25rem;
} }
&:hover { &:hover {
text-decoration: none; text-decoration: none;
> i { > i {
@extend %btn-share-hovor; @extend %btn-share-hovor;
} }
} }
} }
> i { > i {
position: relative; position: relative;
bottom: 1px; bottom: 1px;
@ -259,16 +269,20 @@ nav[data-toggle=toc] {
@extend %btn-share-hovor; @extend %btn-share-hovor;
} }
} }
.fab { .fab {
&.fa-twitter { &.fa-twitter {
@include btn-sharing-color(rgba(29, 161, 242, 1)); @include btn-sharing-color(rgba(29, 161, 242, 1));
} }
&.fa-facebook-square { &.fa-facebook-square {
@include btn-sharing-color(rgb(66, 95, 156)); @include btn-sharing-color(rgb(66, 95, 156));
} }
&.fa-telegram { &.fa-telegram {
@include btn-sharing-color(rgb(39, 159, 217)); @include btn-sharing-color(rgb(39, 159, 217));
} }
&.fa-weibo { &.fa-weibo {
@include btn-sharing-color(rgb(229, 20, 43)); @include btn-sharing-color(rgb(229, 20, 43));
} }
@ -292,8 +306,10 @@ nav[data-toggle=toc] {
.license-wrapper { .license-wrapper {
line-height: 1.2rem; line-height: 1.2rem;
> a { > a {
font-weight: 600; font-weight: 600;
&:hover { &:hover {
@extend %link-hover; @extend %link-hover;
} }
@ -308,6 +324,7 @@ nav[data-toggle=toc] {
.post-tail-bottom { .post-tail-bottom {
-ms-flex-wrap: wrap-reverse !important; -ms-flex-wrap: wrap-reverse !important;
flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important;
> div:first-child { > div:first-child {
width: 100%; width: 100%;
margin-top: 1rem; margin-top: 1rem;
@ -327,6 +344,7 @@ nav[data-toggle=toc] {
> div:not(:first-child)::before { > div:not(:first-child)::before {
@include dot(0.5rem, 0.2rem); @include dot(0.5rem, 0.2rem);
} }
&.flex-column { &.flex-column {
-webkit-box-orient: horizontal !important; -webkit-box-orient: horizontal !important;
-webkit-box-direction: normal !important; -webkit-box-direction: normal !important;
@ -342,7 +360,7 @@ nav[data-toggle=toc] {
.post-navigation { .post-navigation {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
margin-left: -.5rem; margin-left: -0.5rem;
margin-right: -.5rem; margin-right: -0.5rem;
} }
} }

1
_sass/layout/tags.scss
View file

@ -10,6 +10,7 @@
letter-spacing: 0; letter-spacing: 0;
border: 1px solid var(--tag-border) !important; border: 1px solid var(--tag-border) !important;
box-shadow: 0 0 3px 0 var(--tag-shadow); box-shadow: 0 0 3px 0 var(--tag-shadow);
span { span {
margin-left: 0.6em; margin-left: 0.6em;
font-size: 0.7em; font-size: 0.7em;