1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-30 05:19:57 +00:00

Add alert preview

This commit is contained in:
Jeremy Ruston 2024-11-17 14:45:52 +00:00
parent b2d0c22d75
commit 32ac67166a
2 changed files with 46 additions and 0 deletions

View File

@ -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>
</$colour.div>
<$colour.div class="tc-palette-preview-thumbnail-alert-body">
Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit Sed Do Eiusmod Tempor Incididunt.
</$colour.div>
</$colour.div>
</$colour.div>

View File

@ -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;
}