nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

button: IE color fallback #240

Browse source
This commit is contained in:
Sören Weber 2022-05-29 22:48:51 +02:00
parent e661a95828
commit 74e908ecfa
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
2 changed files with 119 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
exampleSite/content/shortcodes/button.en.md
View file

@ -5,7 +5,9 @@ title = "Button"
The `button` shortcode displays a clickable button with adjustable color, title and icon. The `button` shortcode displays a clickable button with adjustable color, title and icon.
{{% button href="https://gohugo.io/" icon="download" %}}Get Hugo{{% /button %}} {{% button href="https://gohugo.io/" icon="download" icon-position="right" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="default" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" icon="dragon" style="warning" %}}Get Hugo{{% /button %}}
## Usage ## Usage

123
static/css/ie.css
View file

@ -85,7 +85,7 @@
} }
div.box { div.box {
background-color: #808080; /* var(--INTERNAL-BOX-NEUTRAL-color) */ background-color: rgba( 128, 128, 128, 1 ); /* var(--INTERNAL-BOX-NEUTRAL-color) */
} }
div.box > .box-label { div.box > .box-label {
@ -162,7 +162,7 @@
} }
div.box.grey { div.box.grey {
background-color: #808080; /* var(--INTERNAL-BOX-GREY-color) */ background-color: rgba( 128, 128, 128, 1 ); /* var(--INTERNAL-BOX-GREY-color) */
} }
div.box.grey > .box-content { div.box.grey > .box-content {
@ -277,14 +277,123 @@
background-color: #ffffff; /* var(--MAIN-BG-color) */ background-color: #ffffff; /* var(--MAIN-BG-color) */
} }
.btn-default { .btn {
background-color: rgba( 128, 128, 128, 1 ); /* var(--BOX-NEUTRAL-color) */
}
.btn a {
border-color: rgba( 128, 128, 128, 1 ); /* var(--BOX-NEUTRAL-color) */
color: rgba( 255, 255, 255, 1 ); /* var(--BOX-CAPTION-color) */
}
.btn a:hover,
.btn a:focus,
.btn a:active {
background-color: rgba( 255, 255, 255, .833 ); /* var(--BOX-BG-color) */
color: rgba( 16, 16, 16, 1 ); /* var(--BOX-NEUTRAL-TEXT-color) */
}
.btn.cstyle.info {
background-color: rgba( 48, 117, 229, 1 ); /* var(--BOX-INFO-color) */
}
.btn.cstyle.info a {
border-color: rgba( 48, 117, 229, 1 ); /* var(--BOX-INFO-color) */
}
.btn.cstyle.note {
background-color: rgba( 237, 153, 9, 1 ); /* var(--BOX-NOTE-color) */
}
.btn.cstyle.note a {
border-color: rgba( 237, 153, 9, 1 ); /* var(--BOX-NOTE-color) */
}
.btn.cstyle.tip {
background-color: rgba( 42, 178, 24, 1 ); /* var(--BOX-TIP-color) */
}
.btn.cstyle.tip a {
border-color: rgba( 42, 178, 24, 1 ); /* var(--BOX-TIP-color) */
}
.btn.cstyle.warning {
background-color: rgba( 224, 62, 62, 1 ); /* var(--BOX-WARNING-color) */
}
.btn.cstyle.warning a {
border-color: rgba( 224, 62, 62, 1 ); /* var(--BOX-WARNING-color) */
}
.btn.cstyle.primary {
background-color: #7dc903; /* var(--PRIMARY-color) */
}
.btn.cstyle.primary a {
border-color: #7dc903; /* var(--PRIMARY-color) */
}
.btn.cstyle.secondary {
background-color: #486ac9; /* var(--SECONDARY-color) */
}
.btn.cstyle.secondary a {
border-color: #486ac9; /* var(--SECONDARY-color) */
}
.btn.cstyle.blue {
background-color: rgba( 48, 117, 229, 1 ); /* var(--BOX-BLUE-color) */
}
.btn.cstyle.blue a {
border-color: rgba( 48, 117, 229, 1 ); /* var(--BOX-BLUE-color) */
}
.btn.cstyle.green {
background-color: rgba( 42, 178, 24, 1 ); /* var(--BOX-GREEN-color) */
}
.btn.cstyle.green a {
border-color: rgba( 42, 178, 24, 1 ); /* var(--BOX-GREEN-color) */
}
.btn.cstyle.grey {
background-color: rgba( 128, 128, 128, 1 ); /* var(--BOX-GREY-color) */
}
.btn.cstyle.grey a {
border-color: rgba( 128, 128, 128, 1 ); /* var(--BOX-GREY-color) */
}
.btn.cstyle.orange {
background-color: rgba( 237, 153, 9, 1 ); /* var(--BOX-ORANGE-color) */
}
.btn.cstyle.orange a {
border-color: rgba( 237, 153, 9, 1 ); /* var(--BOX-ORANGE-color) */
}
.btn.cstyle.red {
background-color: rgba( 224, 62, 62, 1 ); /* var(--BOX-RED-color) */
}
.btn.cstyle.red a {
border-color: rgba( 224, 62, 62, 1 ); /* var(--BOX-RED-color) */
}
.btn.cstyle.transparent {
background-color: transparent;
color: #101010; /* var(--MAIN-TEXT-color) */ color: #101010; /* var(--MAIN-TEXT-color) */
} }
.btn-default:hover, .btn.cstyle.transparent:hover,
.btn-default:focus, .btn.cstyle.transparent:focus,
.btn-default:active { .btn.cstyle.transparent:active {
color: #ffffff;/* var(--MAIN-BG-color) */ background-color: rgba( 128, 128, 128, 1 ); /* var(--BOX-NEUTRAL-color) */
}
.btn.cstyle.transparent a {
color: #4a4a4a; /* var(--MAIN-TITLES-TEXT-color) */
} }
#body .tags a.tag-link { #body .tags a.tag-link {