diff --git a/ui/experiments/seporate-image-and-background.html b/ui/experiments/seporate-image-and-background.html index 9d40cb3e..8b936d70 100755 --- a/ui/experiments/seporate-image-and-background.html +++ b/ui/experiments/seporate-image-and-background.html @@ -167,6 +167,7 @@ width: 0px; margin-left: 0px; border: none; + box-sizing: border-box; } .mark.blue:after, .mark.red:after, @@ -185,19 +186,21 @@ left: auto; right: 10px; + box-sizing: border-box; border-radius: 50%; } .mark.blue:after { left: -25px; - background: blue; + border: solid 3px blue; } .mark.red:after { - left: -42px; + left: -44px; background: red; + border-radius: 50%; } .mark.yellow:after { - left: -59px; + left: -67px; background: yellow; } @@ -205,23 +208,31 @@ - The current structure... +
+ + The current structure... (not current anymore) +
-
+
- Image bg transparent while the ribbon's bg is black...
+
+ + Image bg transparent while the ribbon's bg is black... +
+
-
- - Add a seporate bg tag
+
+ + Add a seporate bg tag (rejected) + - this effectively doubles the number of tags used for a ribbon...
+ the only API that needs changing is what deals with previews and filters
+ will simplify different image indicator CSS
@@ -235,10 +246,13 @@

-
+
- Keep the images on one level and marks outside, after the image...
- + one tag per UI element
+
+ + Keep the images on one level and marks outside, after the image... + + + one tag per UI element, or if we make things a bit more comlicated, up to 3 per tag (self, before and after)
+ generic and extensible
- a little bit more complicated mark manipulation during image shifting – potential orphaned or misplaces marks...
@@ -255,6 +269,7 @@
+