Mercurial > hg > webaudioevaluationtool
annotate interfaces/timeline.css @ 3141:335bc77627e0 tip
fixing discrete interface to allow labels to display
author | Dave Moffat <me@davemoffat.com> |
---|---|
date | Mon, 26 Jul 2021 12:15:24 +0100 |
parents | 3a2dbff86da9 |
children |
rev | line source |
---|---|
nicholas@2479 | 1 div.timeline-element { |
nicholas@2479 | 2 display: flex; |
nicholas@2479 | 3 justify-content: center; |
nicholas@2479 | 4 } |
nicholas@2479 | 5 div.timeline-element-content { |
nicholas@2808 | 6 width: 90%; |
nicholas@2479 | 7 min-width: 200px; |
nicholas@2479 | 8 border: 1px solid black; |
nicholas@2479 | 9 margin: 10px 0px; |
nicholas@2479 | 10 padding: 20px; |
nicholas@2479 | 11 } |
nicholas@2479 | 12 div.timeline-element-canvas-holder { |
nicholas@2479 | 13 width: inherit; |
nicholas@2480 | 14 height: 160px; |
nicholas@2808 | 15 margin: auto; |
nicholas@2479 | 16 } |
nicholas@2538 | 17 canvas.canvas-layer1 { |
nicholas@2479 | 18 position: absolute; |
nicholas@2479 | 19 } |
nicholas@2479 | 20 canvas.canvas-layer2 { |
nicholas@2479 | 21 position: absolute; |
nicholas@2479 | 22 z-index: -1; |
nicholas@2479 | 23 } |
nicholas@2479 | 24 canvas.canvas-layer3 { |
nicholas@2479 | 25 position: absolute; |
nicholas@2479 | 26 z-index: -2; |
nicholas@2479 | 27 } |
nicholas@2479 | 28 canvas.canvas-layer4 { |
nicholas@2479 | 29 position: absolute; |
nicholas@2479 | 30 z-index: -3; |
nicholas@2479 | 31 } |
nicholas@2479 | 32 canvas.timeline-element-canvas { |
nicholas@2479 | 33 border: 1px solid black; |
nicholas@2479 | 34 } |
nicholas@2479 | 35 canvas.canvas-disabled { |
nicholas@2479 | 36 background-color: gray; |
nicholas@2480 | 37 } |
nicholas@2808 | 38 div.timeline-element-comment-holder {} |
nicholas@2809 | 39 img.timeline-element-image { |
nicholas@2809 | 40 height: 150px; |
nicholas@2809 | 41 max-width: 20%; |
nicholas@2809 | 42 display: inline-block; |
nicholas@2809 | 43 float: right; |
nicholas@2809 | 44 } |
nicholas@2480 | 45 div.comment-entry { |
nicholas@2480 | 46 border: 1px solid #444444; |
nicholas@2480 | 47 max-width: 600px; |
nicholas@2480 | 48 min-width: 400px; |
nicholas@2480 | 49 margin: 0px 0px 5px 5px; |
nicholas@2480 | 50 padding: 5px; |
nicholas@2480 | 51 height: 80px; |
nicholas@2480 | 52 border-radius: 10px; |
nicholas@2808 | 53 display: inline-block; |
nicholas@2808 | 54 text-align: center; |
nicholas@2480 | 55 } |
nicholas@2480 | 56 div.comment-entry-header { |
nicholas@2808 | 57 display: table; |
nicholas@2808 | 58 text-align: unset; |
nicholas@2808 | 59 width: 100%; |
nicholas@2808 | 60 } |
nicholas@2808 | 61 div.comment-entry-header span { |
nicholas@2808 | 62 float: left; |
nicholas@2808 | 63 } |
nicholas@2808 | 64 div.comment-entry-header button { |
nicholas@2808 | 65 float: right; |
nicholas@2480 | 66 } |
nicholas@2480 | 67 textarea.comment-entry-text { |
nicholas@2480 | 68 resize: none; |
nicholas@2480 | 69 margin: auto; |
nicholas@2808 | 70 width: 90%; |
nicholas@2538 | 71 } |