diff --git a/core/ui/Palettes/Preview/Alert.tid b/core/ui/Palettes/Preview/Alert.tid new file mode 100644 index 000000000..8c0328ee1 --- /dev/null +++ b/core/ui/Palettes/Preview/Alert.tid @@ -0,0 +1,17 @@ +title: $:/core/ui/Palettes/Preview/Alert +tags: $:/tags/Preview/Page + +\whitespace trim +<$colour.div class="tc-palette-preview-thumbnail-alert" styleName="background-color" styleColour="alert-background"> + <$colour.div class="tc-palette-preview-thumbnail-alert-border" styleName="border-color" styleColour="alert-border"> + <$colour.div class="tc-palette-preview-thumbnail-alert-subtitle"> + Lorem Ipsum + <$colour.div class="tc-palette-preview-thumbnail-alert-highlight"> + (Count: 1) + + + <$colour.div class="tc-palette-preview-thumbnail-alert-body"> + Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit Sed Do Eiusmod Tempor Incididunt. + + + \ No newline at end of file diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index d27adce57..8022c6c72 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -2939,6 +2939,7 @@ input.tc-palette-manager-colour-input { .tc-palette-preview-thumbnail { display: inline-block; + position: relative; padding: 0.5em 0.5em 0 0.5em; display: flex; flex-direction: row; @@ -2947,6 +2948,34 @@ input.tc-palette-manager-colour-input { line-height: 1.2; } +.tc-palette-preview-thumbnail-alert { + position: absolute; + top: 3px; + left: 3px; + width: 15em; + font-size: 2px; + border-radius: 2px; +} + +.tc-palette-preview-thumbnail-alert-border { + border-width: 1px; + border-style: solid; + padding: 3px; + border-radius: 2px; +} + +.tc-palette-preview-thumbnail-alert-subtitle { + +} + +.tc-palette-preview-thumbnail-alert-highlight { + +} + +.tc-palette-preview-thumbnail-alert-body { + +} + .tc-palette-preview-thumbnail-story { flex-grow: 2; }