site/components/arcade/showcase/readme-renderer.module.css
2024-08-21 11:12:13 -04:00

403 lines
7.9 KiB
CSS

.reactMarkDown {
text-align: left;
}
.reactMarkDown img {
max-width: 100%;
padding: 0.5rem
}
/*
Copyright (c) 2017 Chris Patuzzo
https://twitter.com/chrispatuzzo
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
.reactMarkDown a {
color: #4183C4;
text-decoration: none;
}
.reactMarkDown a.absent {
color: #cc0000;
}
.reactMarkDown a.anchor {
display: block;
padding-left: 30px;
margin-left: -30px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
.reactMarkDown h1, .reactMarkDown h2, .reactMarkDown h3, .reactMarkDown h4, .reactMarkDown h5, .reactMarkDown h6 {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
cursor: text;
position: relative;
}
.reactMarkDown h2:first-child, .reactMarkDown h1:first-child, .reactMarkDown h1:first-child + h2, .reactMarkDown h3:first-child, .reactMarkDown h4:first-child, .reactMarkDown h5:first-child, .reactMarkDown h6:first-child {
margin-top: 0;
padding-top: 0;
}
.reactMarkDown h1:hover a.anchor, .reactMarkDown h2:hover a.anchor, .reactMarkDown h3:hover a.anchor, .reactMarkDown h4:hover a.anchor, .reactMarkDown h5:hover a.anchor, .reactMarkDown h6:hover a.anchor {
text-decoration: none;
}
.reactMarkDown h1 tt, .reactMarkDown h1 code {
font-size: inherit;
}
.reactMarkDown h2 tt, .reactMarkDown h2 code {
font-size: inherit;
}
.reactMarkDown h3 tt, .reactMarkDown h3 code {
font-size: inherit;
}
.reactMarkDown h4 tt, .reactMarkDown h4 code {
font-size: inherit;
}
.reactMarkDown h5 tt, .reactMarkDown h5 code {
font-size: inherit;
}
.reactMarkDown h6 tt, .reactMarkDown h6 code {
font-size: inherit;
}
.reactMarkDown h1 {
font-size: 28px;
/* color: black; */
}
.reactMarkDown h2 {
font-size: 24px;
border-bottom: 1px solid #cccccc;
/* color: black; */
}
.reactMarkDown h3 {
font-size: 18px;
}
.reactMarkDown h4 {
font-size: 16px;
}
.reactMarkDown h5 {
font-size: 14px;
}
.reactMarkDown h6 {
font-size: 14px;
}
.reactMarkDown p, .reactMarkDown blockquote, .reactMarkDown ul, .reactMarkDown ol, .reactMarkDown dl, .reactMarkDown li, .reactMarkDown table, .reactMarkDown pre {
margin: 15px 0;
}
.reactMarkDown hr {
border: 0 none;
color: #cccccc;
height: 4px;
padding: 0;
}
.reactMarkDown .reactMarkDown > h2:first-child {
margin-top: 0;
padding-top: 0;
}
.reactMarkDown .reactMarkDown > h1:first-child {
margin-top: 0;
padding-top: 0;
}
.reactMarkDown .reactMarkDown > h1:first-child + h2 {
margin-top: 0;
padding-top: 0;
}
.reactMarkDown .reactMarkDown > h3:first-child, .reactMarkDown .reactMarkDown > h4:first-child, .reactMarkDown .reactMarkDown > h5:first-child, .reactMarkDown .reactMarkDown > h6:first-child {
margin-top: 0;
padding-top: 0;
}
.reactMarkDown a:first-child h1, .reactMarkDown a:first-child h2, .reactMarkDown a:first-child h3, .reactMarkDown a:first-child h4, .reactMarkDown a:first-child h5, .reactMarkDown a:first-child h6 {
margin-top: 0;
padding-top: 0;
}
.reactMarkDown h1 p, .reactMarkDown h2 p, .reactMarkDown h3 p, .reactMarkDown h4 p, .reactMarkDown h5 p, .reactMarkDown h6 p {
margin-top: 0;
}
.reactMarkDown li p.first {
display: inline-block;
}
.reactMarkDown ul, .reactMarkDown ol {
padding-left: 30px;
}
.reactMarkDown ul :first-child, .reactMarkDown ol :first-child {
margin-top: 0;
}
.reactMarkDown ul :last-child, .reactMarkDown ol :last-child {
margin-bottom: 0;
}
.reactMarkDown dl {
padding: 0;
}
.reactMarkDown dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px;
}
.reactMarkDown dl dt:first-child {
padding: 0;
}
.reactMarkDown dl dt > :first-child {
margin-top: 0;
}
.reactMarkDown dl dt > :last-child {
margin-bottom: 0;
}
.reactMarkDown dl dd {
margin: 0 0 15px;
padding: 0 15px;
}
.reactMarkDown dl dd > :first-child {
margin-top: 0;
}
.reactMarkDown dl dd > :last-child {
margin-bottom: 0;
}
.reactMarkDown blockquote {
border-left: 4px solid #dddddd;
padding: 0 15px;
color: #777777;
}
.reactMarkDown blockquote > :first-child {
margin-top: 0;
}
.reactMarkDown blockquote > :last-child {
margin-bottom: 0;
}
.reactMarkDown table {
padding: 0;
}
.reactMarkDown table tr {
border-top: 1px solid #cccccc;
background-color: white;
margin: 0;
padding: 0;
}
.reactMarkDown table tr:nth-child(2n) {
background-color: #f8f8f8;
}
.reactMarkDown table tr th {
font-weight: bold;
border: 1px solid #cccccc;
text-align: left;
margin: 0;
padding: 6px 13px;
}
.reactMarkDown table tr td {
border: 1px solid #cccccc;
text-align: left;
margin: 0;
padding: 6px 13px;
}
.reactMarkDown table tr th :first-child, .reactMarkDown table tr td :first-child {
margin-top: 0;
}
.reactMarkDown table tr th :last-child, .reactMarkDown table tr td :last-child {
margin-bottom: 0;
}
.reactMarkDown img {
max-width: 100%;
}
.reactMarkDown span.frame {
display: block;
overflow: hidden;
}
.reactMarkDown span.frame > span {
border: 1px solid #dddddd;
display: block;
float: left;
overflow: hidden;
margin: 13px 0 0;
padding: 7px;
width: auto;
}
.reactMarkDown span.frame span img {
display: block;
float: left;
}
.reactMarkDown span.frame span span {
clear: both;
color: #333333;
display: block;
padding: 5px 0 0;
}
.reactMarkDown span.align-center {
display: block;
overflow: hidden;
clear: both;
}
.reactMarkDown span.align-center > span {
display: block;
overflow: hidden;
margin: 13px auto 0;
text-align: center;
}
.reactMarkDown span.align-center span img {
margin: 0 auto;
text-align: center;
}
.reactMarkDown span.align-right {
display: block;
overflow: hidden;
clear: both;
}
.reactMarkDown span.align-right > span {
display: block;
overflow: hidden;
margin: 13px 0 0;
text-align: right;
}
.reactMarkDown span.align-right span img {
margin: 0;
text-align: right;
}
.reactMarkDown span.float-left {
display: block;
margin-right: 13px;
overflow: hidden;
float: left;
}
.reactMarkDown span.float-left span {
margin: 13px 0 0;
}
.reactMarkDown span.float-right {
display: block;
margin-left: 13px;
overflow: hidden;
float: right;
}
.reactMarkDown span.float-right > span {
display: block;
overflow: hidden;
margin: 13px auto 0;
text-align: right;
}
.reactMarkDown code, .reactMarkDown tt {
margin: 0 2px;
padding: 0 5px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px;
}
.reactMarkDown pre code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}
.reactMarkDown .highlight pre {
background-color: #f8f8f8;
border: 1px solid #cccccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
}
.reactMarkDown pre {
background-color: #f8f8f8;
border: 1px solid #cccccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
}
.reactMarkDown code, .reactMarkDown pre tt {
background-color: transparent;
border: none;
}
code:not(pre code) {
color: #e8912d;
font-size: 0.95rem;
border: 1px solid #CCCCCC !important;
}