diff --git a/src/stylesheets/bootstrap-override.scss b/src/stylesheets/bootstrap-override.scss
index 75dde22ca..106ec7432 100644
--- a/src/stylesheets/bootstrap-override.scss
+++ b/src/stylesheets/bootstrap-override.scss
@@ -245,12 +245,13 @@ textarea {
}
.modal-header, .modal-footer {
- margin: 0 $gutter-width;
+ margin: 0;
}
.modal-content {
border: $border-width solid $modal-content-border-color;
width: 100%;
+ border-radius: 8px;
}
.pager li > a {
diff --git a/src/stylesheets/bootstrap/bootstrap/_modals.scss b/src/stylesheets/bootstrap/bootstrap/_modals.scss
index 31e2ab918..330588a0b 100644
--- a/src/stylesheets/bootstrap/bootstrap/_modals.scss
+++ b/src/stylesheets/bootstrap/bootstrap/_modals.scss
@@ -77,7 +77,7 @@
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
- padding: $modal-title-padding 0;
+ padding: $modal-inner-padding ($modal-inner-padding * 2);
border-bottom: 1px solid $modal-header-border-color;
@include clearfix;
}
@@ -96,14 +96,15 @@
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
position: relative;
- padding: $modal-inner-padding;
+ padding: $modal-inner-padding ($modal-inner-padding * 2);
}
// Footer (for actions)
.modal-footer {
- padding: $modal-inner-padding 0;
+ padding: $modal-inner-padding ($modal-inner-padding * 2);
text-align: right; // right align buttons
border-top: 1px solid $modal-footer-border-color;
+ background-color: $gray-lighter;
@include clearfix; // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons
diff --git a/src/stylesheets/details.scss b/src/stylesheets/details.scss
index 3f654161a..0023664f6 100644
--- a/src/stylesheets/details.scss
+++ b/src/stylesheets/details.scss
@@ -339,8 +339,8 @@ $modal-content-bg: $brand-menu;
$modal-content-border-color: $border-color;
$modal-content-fallback-border-color: $gray-light;
-$modal-backdrop-bg: #000;
-$modal-backdrop-opacity: .5;
+$modal-backdrop-bg: #000000;
+$modal-backdrop-opacity: 0.8;
$modal-header-border-color: $border-color;
$modal-footer-border-color: $modal-header-border-color;
diff --git a/src/stylesheets/variables.scss b/src/stylesheets/variables.scss
index 18fcd18a8..b7752e749 100644
--- a/src/stylesheets/variables.scss
+++ b/src/stylesheets/variables.scss
@@ -16,10 +16,18 @@ $gray-lighter: #18181B;
$brand-primary: #C87B28;
$brand-highlight: #1D4ED8;
+
$brand-success: #166534;
+$brand-success-lighter: #22C55E;
+
$brand-info: #1D4ED8;
+$brand-info-lighter: #60A5FA;
+
$brand-warning: #FACC15;
+$brand-warning-lighter: #FEF08A;
+
$brand-danger: #991B1B;
+$brand-danger-lighter: #EF4444;
$brand-bg: $gray-lighter;
$brand-menu: $gray-light;
diff --git a/src/util/bbcode.ts b/src/util/bbcode.ts
index 263d8a024..af11bc6ff 100644
--- a/src/util/bbcode.ts
+++ b/src/util/bbcode.ts
@@ -7,6 +7,7 @@ import LinkTag from './bbcode/LinkTag';
import MoreTag from './bbcode/MoreTag';
import SizeTag from './bbcode/SizeTag';
import SpoilerTag from './bbcode/SpoilerTag';
+import StyleTag from './bbcode/StyleTag';
import SvgTag from './bbcode/SvgTag';
import TooltipTag from './bbcode/TooltipTag';
import YoutubeTag from './bbcode/YoutubeTag';
@@ -49,11 +50,12 @@ fullParser.registerTag('heading', HeadingTag);
fullParser.registerTag('svg', SvgTag);
fullParser.registerTag('more', MoreTag);
fullParser.registerTag('tooltip', TooltipTag);
+fullParser.registerTag('style', StyleTag);
const stripParser = new bbcode.Parser();
stripParser.registerTag('br', BrTag);
['size', 'email', 'font', 'link', 'url', 'spoiler',
- 'font', 'youtube', 'line', 'heading', 'svg', 'b', 'u']
+ 'font', 'youtube', 'line', 'heading', 'svg', 'b', 'u', 'style']
.forEach(tag => stripParser.registerTag(tag, IdentityTag));
let convertDiv: HTMLDivElement;
diff --git a/src/util/bbcode/StyleTag.tsx b/src/util/bbcode/StyleTag.tsx
new file mode 100644
index 000000000..eac704151
--- /dev/null
+++ b/src/util/bbcode/StyleTag.tsx
@@ -0,0 +1,20 @@
+import { Tag } from 'bbcode-to-react';
+import * as React from 'react';
+
+class StyleTag extends Tag {
+ public toHTML(): string[] {
+ const style = this.params.style;
+
+ return [``, this.getContent(), ''];
+ }
+
+ public toReact() {
+ const style = this.params.style;
+
+ return (
+ {this.getComponents()}
+ );
+ }
+}
+
+export default StyleTag;
\ No newline at end of file