diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss index 8ebc45b62..cf32a70b0 100644 --- a/app/javascript/styles/application.scss +++ b/app/javascript/styles/application.scss @@ -26,3 +26,5 @@ @import 'mastodon/dashboard'; @import 'mastodon/rtl'; @import 'mastodon/accessibility'; + +@import 'markdown'; diff --git a/app/javascript/styles/contrast.scss b/app/javascript/styles/contrast.scss index 5b43aecbe..31805363c 100644 --- a/app/javascript/styles/contrast.scss +++ b/app/javascript/styles/contrast.scss @@ -1,3 +1,5 @@ @import 'contrast/variables'; @import 'application'; @import 'contrast/diff'; + +@import 'markdown'; diff --git a/app/javascript/styles/markdown.scss b/app/javascript/styles/markdown.scss new file mode 100644 index 000000000..d1c1adb9c --- /dev/null +++ b/app/javascript/styles/markdown.scss @@ -0,0 +1,196 @@ +.status__content { + + font-family: inherit; + max-height: 210px; + overflow-x: hidden; + overflow-y: auto; + + h1{ + font-size: 195%; + border-bottom: 2px solid #ff3333; + } + + h2{ + font-size: 180%; + border-bottom: 2px solid #ff3333; + } + + h3{ + font-size: 165%; + border-bottom: 2px solid #ff3333; + } + + h4{ + font-size: 150%; + border-bottom: 2px solid #ff3333; + } + + h5{ + font-size: 135%; + border-bottom: 2px solid #ff3333; + } + + h6{ + font-size: 120%; + border-bottom: 2px solid #ff3333; + } + + em{ + font-style: italic; + } + + strong{ + font-weight: bold; + } + + code{ + display: block; + border-left: 2px solid; + border-color: #079903; + color: $white; + padding-left: 10px; + margin-top: 5px; + margin-bottom: 5px; + margin-left: 5px; + background-color: #000000; + } + + pre{ + display: inline-block; + font-family: 'Noto Sans Japanese', sans-serif; + font-weight: 400; + } + + p ~ blockquote { + margin-top: -8px; + } + + blockquote{ + padding-left: 8px; + margin-top: 0.5em; + margin-bottom: 0.5em; + color: $white; + background-color: $ui-base-color; + display: block; + border-left: 4px solid $classic-highlight-color; + } + + ul{ + list-style: inside; + br{ + display: none; + } + } + + ul>ul{ + br{ + display: none; + } + } + + ul>li>ul{ + padding-left: 1em; + list-style: inside circle; + } + + ul>li{ + padding-left: 1em; + list-style: inside circle; + } + + ul>br>li{ + padding-left: 1em; + list-style: inside circle; + } + + ul>ul>li{ + padding-left: 2em; + list-style: inside circle; + } + + ul>br>ul>br>li{ + padding-left: 2em; + list-style: inside circle; + } + + ol{ + list-style: inside decimal; + } + + ol>li>ol{ + padding-left: 1em; + } + + p>a>img{ + width: 100%; + height: 100%; + object-fit: contain; + } + + a>img{ + width: 100%; + height: 100%; + object-fit: contain; + } + + p>a{ + color: #1FBFF9; + } + + a{ + color: #1FBFF9; + } + + sup{ + font-size: 75.5%; + vertical-align: top; + position: relative; + top: -0.5em; + } + + sub{ + font-size: 75.5%; + vertical-align: bottom; + position: relative; + top: 0.5em; + } + + small{ + font-size: 50.0%; + vertical-align: bottom; + position: relative; + } + + table { + margin-top: 0.5em; + margin-bottom: 0.5em; + color: $classic-highlight-color; + display: block; + width: 100%; + overflow: auto; + border-spacing: 0; + border-collapse: collapse; + } + + table tr{ + background-color: #000000; + } + + table th, table td{ + padding: 6px 13px; + border: 1px solid $classic-highlight-color; + } + + table th{ + font-weight: 600; + } + + table thead tr{ + background-color: $black; + } + + td, th{ + padding: 0; + } + + } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-light.scss b/app/javascript/styles/mastodon-light.scss index 756a12d86..c99938bfa 100644 --- a/app/javascript/styles/mastodon-light.scss +++ b/app/javascript/styles/mastodon-light.scss @@ -1,3 +1,5 @@ @import 'mastodon-light/variables'; @import 'application'; @import 'mastodon-light/diff'; + +@import 'markdown';