/** Styling for the Crossforum Theatre stage. */ /** Styling for HTML tables. */ /** - plain ---------------------------- * * Ensure any override of padding has a more specific than these ones. Otherwise, if any * subsequent style sheet re-imports this one, the last import will take precedence (at * least with Firefox 9). */ table.plain { border-collapse: collapse; } table.plain td, table.plain th { padding: 0; /* overriding the default */ } /** General styling rules for the Google Web Tookit. * * These rules extend or modify the built-in GWT styles for general use in Votorola. If * you only want to customize a widget for a particular use, then place your rules in the * component or application style sheet. See also the caveat below. * * GWT links to (and injects) its built in styles at the bottom of the element, * where they take precedence over any previously linked style sheets, such as your own, * and this one. The CSS source for the built in styles is located together with the * Java source and (if your app inherits from a theme module) * /user/src/com/google/gwt/user/theme/. To override these styles, it is usually * sufficient give your rule more specificity based on the DOM structure of your app [1]. * That option isn't always available here in gwt.css, because this is intended as a * general style sheet applicable to all apps. As a last resort when working on the * style rules below, you may increase the weight of the property assignment using * !important. [2] * * Standard z-index layers * ----------------------- * * -9 - 9 ordinary elements * 75 - 79 non-modal popup * 85 - 89 modal popup * * Notes * ----- * * [1] http://www.w3.org/TR/CSS2/cascade.html#cascading-order * * [2] The alternative of using GWT's own style inclusion mechanism seems unwise. It * appears to bury the styling rules beneath too many complexities such as * obfuscations, and indeterminancies such as automated rule changes. * https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle#CssResource */ /** - PushButton ----------------------- * * Why would a button want a block layout? Defer this till it's actually needed. *//* div.gwt-PushButton, div.gwt-PushButton div { display: inline; } */ /** - PopupPanel ----------------------- */ .gwt-PopupPanel { z-index: 87; /* popup layer */ } .gwt-PopupPanelGlass /* for PopupPanel.setGlassEnabled() */ { background-color: #000; opacity: 0.3; /* filter: alpha(opacity=30); *//* IE if really needed */ } /** Styling for count engine components under GWT. */ /** a.css - styling specific to Votorola */ /** - fadeRight5 ----------------------- * * A truncation indicator in lieu of text-overflow (which Firefox does not support till * v.7) and browsers that only support the ellipsis form (WebKit), the glyph of which * which is rather too wide. This provides no sure indication of the fact of truncation, * as often the fade out will occur between glyphs, but it does alleviate the visual * confusion associated with abrupt truncation. * * Give the truncee element an absolute width and set its overflow 'hidden' to effect the * truncation. Note that display 'inline-block' together with overflow 'hidden' will * change the effect of vertical-align 'baseline' in compliant layout engines. [1] * * Ensure the truncee establishes a "containing block". If it has an inline layout, such * as a span, then it may need to be relatively positioned for this purpose. * http://www.w3.org/TR/CSS2/visudet.html#containing-block-details * * Append this span as the last child of the truncee. Give it a single " " as * content so the browser is sure to render it (height 100% does not do the trick). */ span.fadeRight5 { background-image: url( "../fadeRight5.png" ); /* backgrounded in a span... */ background-repeat: repeat-y; /* ... so we can use repeat-y to fill the height */ position: absolute; width: 5px; right: 0; } /** - icon ----------------------------- */ a img.icon { border: none; /* defeat browser's link decorations */ } /** - opaqueEnabled -------------------- * * Documented in s/gwt/stage/link/LinkTrackV.java */ .opaqueEnabled { opacity: 0.5; /* filter: alpha(opacity=50); *//* IE if really needed */ } .opaqueEnabled.enabled { opacity: 1; /* filter: alpha(opacity=100); */ } /*-- N O T E S --------------------------------------------------------------------------- * * [1] See bottom of http://www.w3.org/TR/CSS2/visudet.html * * Correct behaviour (baseline misaligned) in Gecko (and Presto): * http://stackoverflow.com/questions/4310047 * https://bugzilla.mozilla.org/show_bug.cgi?id=491549 * https://bugzilla.mozilla.org/show_bug.cgi?id=615712 * * Wrong behaviour (baseline aligned) in WebKit: * https://bugs.webkit.org/show_bug.cgi?id=53498 * https://bugs.webkit.org/show_bug.cgi?id=36084 * * Apparently the misalignment is not isolated to the component that causes it * (inline-block with overflow hidden), but it somehow affects the vertical alignment * of sibling components, too (at least in Firefox 3.6). */ /** - countingMethod ------------------- */ .countingMethods- .countingMethod, .countingMethod- { color: #999; } svg .countingMethod-, .countingMethods- svg .countingMethod { fill: #999; } /** - countingMethod - q --------------- */ .countingMethods-q .countingMethod, .countingMethod-q { color: #1BEC1B; } svg .countingMethod-q, .countingMethods-q svg .countingMethod { fill: #1BEC1B; } .countingMethods-q .countingMethod.dim, .countingMethods-q .countingMethod .dim { color: #0EA50E; } .countingMethods-q svg .countingMethod.dim, .countingMethods-q svg .countingMethod .dim { fill: #0EA50E; } /** - countingMethod - v --------------- */ .countingMethod-v, .countingMethods-v .countingMethod { color: #FF914E; } svg .countingMethod-v, .countingMethods-v svg .countingMethod { fill: #FF914E; } .countingMethods-v .countingMethod.dim, .countingMethods-v .countingMethod .dim { color: #B86B3D; } .countingMethods-v svg .countingMethod.dim, .countingMethods-v svg .countingMethod .dim { fill: #B86B3D; } /** - SacSelectionV -------------------- * * Class name "count-SacSelectionV" is applied both to the outer span in the theatre * link track that holds "sacV", and to the separate "gwt-PopupPanel" that holds "sacList". * The rules below apply to both. */ .count-SacSelectionV { cursor: default; } .count-SacSelectionV .accountName span.firstLetter /* rather than CSS first-letter selector, which only applies to blocks */ { font-weight: bold; } .count-SacSelectionV .accountName span.firstLetter.countingMethod-nul { font-weight: normal; } /** - SacSelectionV - gwt-PopupPanel --- */ .count-SacSelectionV.gwt-PopupPanel .sacList { background-color: #000; /* instead of transparent */ padding: 0.4em; /* space out from background */ user-select: none; -moz-user-select: none; -webkit-user-select: none; /* let mouse drag over choices without selecting them */ white-space: nowrap; /* max-width: 10em; *//* ignored with or without GWT ScrollPane (Firefox, Chrome) */ overflow-x: hidden; max-height: 10em; /* overflow-y: auto; *//* scroll if needed, this rule applied automatically by GWT ScrollPane */ } .count-SacSelectionV.gwt-PopupPanel .sacList div.cell { cursor: default; /* chrome disobeys if property instead set on ancestor .sacList */ padding: 0.1em; /* for hover outline */ padding-right: 18px; /* leave room for vertical scroll bar, hopefully this is enough for all browsers. The popup panel does not size itself to accomodate the appearance of the scroll bar, perhaps being unaware of it. The appearance of the scroll bar within the panel therefore squeezes the cells. This extra padding prevents the cells with the longest text from being clipped in the squeeze. */ padding-left: 10px; /* 1px margin + 5px dropArrowRight + 4px spacing */ } .count-SacSelectionV.gwt-PopupPanel .sacList div.GALD-WOM /* the already selected one */ { background-color: inherit; /* defeat GWT blue */ background-image: url( "../dropArrowRight.png" ); background-position: 1px 50%; background-repeat: no-repeat; color: inherit; } .count-SacSelectionV.gwt-PopupPanel .sacList.xsArmed div.hover div.cell /* pseudo-class :hover fails after mouse is pressed and dragged to another item (Chrome 13), and :active does not help because it applies only where originally pressed. So we set a proper class. */ { outline: thin solid #999; } /** - SacSelectionV.sacV --------------- */ .count-SacSelectionV.sacV { display: inline; /* not CellWidget's inline-block, else misaligns when given padding */ user-select: none; -moz-user-select: none; -webkit-user-select: none; /* let mouse drag onto popup, after it appears */ } .count-SacSelectionV.sacV span.dropArrow /* backgrounding the image in a span, so mouse drag gesture does not initiate drag of image itself (Firefox 3.6). Give this span a single " " as content so the browser gives it some height */ { background-image: url( "../dropArrow.png" ); background-position: 100% 75%; /* right edge, near bottom */ background-repeat: no-repeat; padding-right: 7px; /* image width */ display: inline-block; /* so it obeys width property */ } .count-SacSelectionV.sacV span.dropArrow, .count-SacSelectionV.sacV span.dropArrow span.accountName { width: 4em; /* not "100%" for child, or it extends into padding */ } .count-SacSelectionV.sacV span.dropArrow span.accountName { position: absolute; /* so it obeys width property and also establishes containing block for child span.fadeRight5. Must not use display:inline-block for these purposes, as together with hidden overflow it will mess up the baseline vertical alignment of the link track, per a.css */ left: 0; top: 0; /* clip: rect( auto, 4em, auto, auto ), but this is perhaps plainer: */ overflow: hidden; } /** Styling for the LinkTrackV stage component. * * Icon images in links and other tools must have a maximum height of 16 pixels, and will * normally be aligned at the bottom. All tools should have a computed CSS display * property of "inline" or "inline-block". Consider using one of the styling patterns * below. If your tool is implemented as a hyperlink or some other container that wraps * an image, then use this pattern: * * *

* * Or if it contains text, or a combination of text and images: * * * ... * * The "tool" element must be outermost because it gets margins. The "hoverOutlined" * element gets an outline style whenever the mouse is over it. For this to work * correctly it must be the clickable element or the clickable element must be a * descendant of exactly the same size. * * The "opaqueEnabled" class works in conjunction with sister classes "enabled" and * "disabled" to implement a rudimentary form of disabled styling. To use it, ensure * that exactly one of the two sister classes is always set according to the tool state. * When the tool is disabled, its opacity is reduced to give it a faded appearance. */ table.LinkTrack { border-collapse: collapse; white-space: nowrap; } table.LinkTrack td { padding: 0; /* overriding the default */ padding-top: 2px; /* for sake of .hoverOutlined */ padding-left: 0.5em; /* between sections */ } table.LinkTrack td:first-child { padding-left: 4px; /* Room for overlying switchPopper.png when Outcast toolset switch used. This style was enabled by config option, but actually we always want it so there's no layout difference when navigating between pages with/without switch. */ } /** - caption -------------------------- */ td#LinkTrack-caption { width: 100%; /* expand to squish other cells. This also restricts big strings from breaking layout */ } td#LinkTrack-caption div.containingBlock { position: relative; /* containing block for absolutely positioned captions http://www.w3.org/TR/CSS2/visudet.html#containing-block-details For some reason this rule fails when applied directly to td#LinkTrack-caption (Gecko and WebKit), so use this intermediate div. Give it a single non-breaking space as content to avoid misalignment (Firefox 9). This might also be needed (probably not) to maintain a stable track height when the track is empty of text. */ } td#LinkTrack-caption div.containingBlock span.left, td#LinkTrack-caption div.containingBlock span.right { position: absolute; /* have no effect on layout */ overflow: hidden; } td#LinkTrack-caption div.containingBlock span.left { left: 0; max-width: 95%; /* does not matter provided it's <= 100%, because it slips beneath the right side and obscures nothing */ } td#LinkTrack-caption div.containingBlock span.right { right: 0; max-width: 75%; /* leaving margin for underlying left caption to peek through on left */ background-image: url( "../fadeRight5.png" ); background-repeat: repeat-y; padding-left: 5px; /* room for the image */ } td#LinkTrack-caption div.containingBlock span.right span { padding-left: 0.2em; background-color: #000; /* keep text legible, cover any overlap of left span */ } /** - hoverOutlined -------------------- * * Firefox 3.6.17 may show gaps/lines for hoverOutlined styling within a table unless the * table is border-collapse:separate. */ table.LinkTrack td .hoverOutlined { outline-offset: 1px; } table.LinkTrack td .hoverOutlined:hover, table.LinkTrack td .tool:hover .hoverOutlined { outline: 1px dotted #999; } table.LinkTrack td .disabled.hoverOutlined:hover, table.LinkTrack td .tool.disabled:hover .hoverOutlined { outline: none; } /** - icon ----------------------------- */ table.LinkTrack td .tool .icon { vertical-align: baseline; padding: 2px 0 0 0; /* TRBL */ border-top: 2px solid transparent; } table.LinkTrack td .tool .icon.me { border-top-color: #bbb; } /** - tool ----------------------------- */ table.LinkTrack td .tool { margin-left: 2px; /* by default, for sake of .hoverOutlined */ margin-right: 2px; /* unexpectedly these margins do not collapse, which is exactly what we need here */ } table.LinkTrack td .tool.relaxed /* these need a little more room */ { margin-left: 3px; /* assymetry gives 5px gap (2+3), which looks best. It does not cause off-centering only because all siblings are 'relaxed', or none are. */ } table.LinkTrack td .tool.relaxed:first-child { margin-left: 2px; } /** Styling for the PolltrackV stage component. */ div.Polltrack { position: relative; /* establish containing block for absolutely positioned headsUp */ } /** - headsUp -------------------------- */ div.Polltrack div.headsUp { overflow: hidden; /* no scroll bar when shuttle passes right edge */ pointer-events: none; /* because visiblity controlled in code via shuttle opacity (for sake of transitions) and we don't want it interacting with mouse when invisible */ bottom: 14px; /* clear 9px of track + 9px of listV cursor - 2px field border - 2px field padding */ position: absolute; width: 100%; z-index: 15; /* raise above normal content */ } div.Polltrack div.headsUp div.shuttle { transition: opacity .2s ease-in .3s; /* property, duration, timing function, delay */ -moz-transition: opacity .2s ease-in .3s; -webkit-transition: opacity .2s ease-in .3s; position: relative; /* shuttles horizontally, tracking mouse */ } div.Polltrack div.headsUp div.shuttle span.expander { text-align: right; display: inline-block; width: 150px; /* same as HeadsUpDisplay.EXPANDER_WIDTH */ } div.Polltrack div.headsUp div.shuttle span.field { background-color: #000; border: 2px solid #777; /* width used in position calculation for headsUp */ border-radius: 4px; /* -moz-border-radius: 4px; */ /* -webkit-border-radius: 4px; */ font-size: .85em; display: inline-block; /* to allow top/bottom padding */ padding-top: 2px; padding-bottom: 2px; /* used in position calculation for headsUp */ } div.Polltrack div.headsUp div.shuttle span.field.left { border-right: none; color: #999; padding-left: 0.3em; } div.Polltrack div.headsUp div.shuttle span.field.right { border-left: none; padding-right: 0.3em; } /** - listV ---------------------------- */ div.Polltrack div.listV { height: 9px; /* same as child images */ overflow: hidden; white-space: nowrap; } div.Polltrack div.listV img { cursor: url(poll/cursor.cur) 10 10, auto; /* CSS3 hotspot redundant with .cur file's internal hotspot encoding, which Chrome (22) ignores. Could therefore have used PNG instead. Final entry is fallback cursor. */ vertical-align: top; /* default is baseline, which is below track */ } /** Styling for the VoteTrackV stage component. */ div.VoteTrack { font-size: 0.8em; padding: 0 2px 0 2px; position: relative; /* establish containing block for div.headsUp and div.overlay */ white-space: nowrap; } div.VoteTrack table { border-collapse: collapse; width: 100%; } div.VoteTrack table td { padding: 0; /* overriding the default */ /* vertical-align: top; *//* else Firefox (9) aligns top of SVG with cell midline. This misalignment apparently depends on td.Board>div, and does not affect CandidateV */ } div.VoteTrack table svg { /* position: absolute; *//* distorts stroke in Chrome 25, and enlarges cell height somewhat in both Firefox and Chrome */ height: 1.2em; /* Used in position calculation for headsUp div.display. Firefox (9) requires SVG element in table cell (td) to have absolute height (not 'auto' or 100%, and not 100% set via 'height' attribute) else it balloons the height of table. Nevertheless it must not be sized at less than 100%, otherwise the internal drawing is likely to be clipped. For the reason, see: http://reluk.ca/project/votorola/_/javadoc/votorola/s/gwt/stage/vote/NodeVPainter.html Here it is sized a little larger than the content of the other cells (FlowVolume), which forcefully expands the entire row of cells to (it is hoped) exactly the same height as the svg element. For this to work, it is crucial that the cells have no padding, and their line-height be set to normal. Alternatively, giving the SVG an 'absolute' CSS position will correct the basic problem of distorting the table size. But it has the mysterious side effect (in Chrome 18 too) of stretching the scrollable view horizontally and activating the scroll bar. */ width: 100%; /* required for Firefox or it balloons */ } div.VoteTrack.animate > div.animationBed { overflow: hidden; /* else horizontal scrollbar may appear during animation when child table slides off right side */ } div.VoteTrack.animate > div.animationBed > table { position: relative; /* moved by VoteTrackV.Animation */ } /** - ArrowSegment --------------------- */ div.VoteTrack table g.CountNode { fill: #999; } div.VoteTrack table g.CountNode.occupied, div.VoteTrack div.overlay circle.Podium { fill: #ccc; } div.VoteTrack table g.CountNode path.ArrowSegment { fill: inherit; /* using 'inherit' as base value allows for effective cancellation of an overriding rule (a) by another override (b) that simply re-specifies 'inherit'. This trick is used in decorative props, such as DifferenceLight */ stroke: #000; stroke-width: 2px; /* per NodeV.STROKE_WIDTH, causes SVG_STROKE_BUF distortion */ } div#StageV-bottom div.VoteTrack table g.CountNode path.ArrowSegment { /* shape-rendering: crispEdges; */ /* because bottom edge is blurry, at least on Firefox; but this wrecks precise interpacing of segments */ } body.voDartLight-v0 div.VoteTrack g.CountNode.clickable.v0 path.ArrowSegment,/* voters */ body.voDartLight-v1 div.VoteTrack g.CountNode.clickable.v1 path.ArrowSegment, body.voDartLight-v2 div.VoteTrack g.CountNode.clickable.v2 path.ArrowSegment, body.voDartLight-v3 div.VoteTrack g.CountNode.clickable.v3 path.ArrowSegment, body.voDartLight-v4 div.VoteTrack g.CountNode.clickable.v4 path.ArrowSegment, body.voDartLight-v5 div.VoteTrack g.CountNode.clickable.v5 path.ArrowSegment, body.voDartLight-v6 div.VoteTrack g.CountNode.clickable.v6 path.ArrowSegment, body.voDartLight-v7 div.VoteTrack g.CountNode.clickable.v7 path.ArrowSegment, body.voDartLight-v8 div.VoteTrack g.CountNode.clickable.v8 path.ArrowSegment, body.voDartLight-v9 div.VoteTrack g.CountNode.clickable.v9 path.ArrowSegment, body.voDartLight-v10 div.VoteTrack g.CountNode.clickable.v10 path.ArrowSegment, body.voDartLight-v11 div.VoteTrack g.CountNode.clickable.v11 path.ArrowSegment, body.voDartLight-v12 div.VoteTrack g.CountNode.clickable.v12 path.ArrowSegment, body.voDartLight-v13 div.VoteTrack g.CountNode.clickable.v13 path.ArrowSegment, body.voDartLight-v14 div.VoteTrack g.CountNode.clickable.v14 path.ArrowSegment, body.voDartLight-v15 div.VoteTrack g.CountNode.clickable.v15 path.ArrowSegment, body.voDartLight-v16 div.VoteTrack g.CountNode.clickable.v16 path.ArrowSegment, body.voDartLight-v17 div.VoteTrack g.CountNode.clickable.v17 path.ArrowSegment, body.voDartLight-v18 div.VoteTrack g.CountNode.clickable.v18 path.ArrowSegment, body.voDartLight-v19 div.VoteTrack g.CountNode.clickable.v19 path.ArrowSegment, body.voDartLight-v20 div.VoteTrack g.CountNode.clickable.v20 path.ArrowSegment, body.voDartLight-o0 div.VoteTrack g.CountNode.clickable.o0 path.ArrowSegment,/* peers */ body.voDartLight-o1 div.VoteTrack g.CountNode.clickable.o1 path.ArrowSegment, body.voDartLight-o2 div.VoteTrack g.CountNode.clickable.o2 path.ArrowSegment, body.voDartLight-o3 div.VoteTrack g.CountNode.clickable.o3 path.ArrowSegment, body.voDartLight-o4 div.VoteTrack g.CountNode.clickable.o4 path.ArrowSegment, body.voDartLight-o5 div.VoteTrack g.CountNode.clickable.o5 path.ArrowSegment, body.voDartLight-o6 div.VoteTrack g.CountNode.clickable.o6 path.ArrowSegment, body.voDartLight-o7 div.VoteTrack g.CountNode.clickable.o7 path.ArrowSegment, body.voDartLight-o8 div.VoteTrack g.CountNode.clickable.o8 path.ArrowSegment, body.voDartLight-o9 div.VoteTrack g.CountNode.clickable.o9 path.ArrowSegment, body.voDartLight-o10 div.VoteTrack g.CountNode.clickable.o10 path.ArrowSegment, body.voDartLight-o11 div.VoteTrack g.CountNode.clickable.o11 path.ArrowSegment, body.voDartLight-o12 div.VoteTrack g.CountNode.clickable.o12 path.ArrowSegment, body.voDartLight-o13 div.VoteTrack g.CountNode.clickable.o13 path.ArrowSegment, body.voDartLight-o14 div.VoteTrack g.CountNode.clickable.o14 path.ArrowSegment, body.voDartLight-o15 div.VoteTrack g.CountNode.clickable.o15 path.ArrowSegment, body.voDartLight-o16 div.VoteTrack g.CountNode.clickable.o16 path.ArrowSegment, body.voDartLight-o17 div.VoteTrack g.CountNode.clickable.o17 path.ArrowSegment, body.voDartLight-o18 div.VoteTrack g.CountNode.clickable.o18 path.ArrowSegment, body.voDartLight-o19 div.VoteTrack g.CountNode.clickable.o19 path.ArrowSegment, body.voDartLight-o20 div.VoteTrack g.CountNode.clickable.o20 path.ArrowSegment, body.voDartLight-y div.VoteTrack g.CountNode.clickable.y path.ArrowSegment,/* cycler */ body.voDartLight-c div.VoteTrack g.CountNode.clickable.c path.ArrowSegment,/* candidate */ div.VoteTrack div.overlay circle.Podium:hover { fill: #ebebeb; } div.VoteTrack table g.CountNode.occupied.highlit path.ArrowSegment, div.VoteTrack div.overlay circle.Podium.highlit { fill: #ddc0af; /* orange/brown */ } body.voDartLight-v0 div.VoteTrack g.CountNode.clickable.highlit.v0 path.ArrowSegment,/* voters */ body.voDartLight-v1 div.VoteTrack g.CountNode.clickable.highlit.v1 path.ArrowSegment, body.voDartLight-v2 div.VoteTrack g.CountNode.clickable.highlit.v2 path.ArrowSegment, body.voDartLight-v3 div.VoteTrack g.CountNode.clickable.highlit.v3 path.ArrowSegment, body.voDartLight-v4 div.VoteTrack g.CountNode.clickable.highlit.v4 path.ArrowSegment, body.voDartLight-v5 div.VoteTrack g.CountNode.clickable.highlit.v5 path.ArrowSegment, body.voDartLight-v6 div.VoteTrack g.CountNode.clickable.highlit.v6 path.ArrowSegment, body.voDartLight-v7 div.VoteTrack g.CountNode.clickable.highlit.v7 path.ArrowSegment, body.voDartLight-v8 div.VoteTrack g.CountNode.clickable.highlit.v8 path.ArrowSegment, body.voDartLight-v9 div.VoteTrack g.CountNode.clickable.highlit.v9 path.ArrowSegment, body.voDartLight-v10 div.VoteTrack g.CountNode.clickable.highlit.v10 path.ArrowSegment, body.voDartLight-v11 div.VoteTrack g.CountNode.clickable.highlit.v11 path.ArrowSegment, body.voDartLight-v12 div.VoteTrack g.CountNode.clickable.highlit.v12 path.ArrowSegment, body.voDartLight-v13 div.VoteTrack g.CountNode.clickable.highlit.v13 path.ArrowSegment, body.voDartLight-v14 div.VoteTrack g.CountNode.clickable.highlit.v14 path.ArrowSegment, body.voDartLight-v15 div.VoteTrack g.CountNode.clickable.highlit.v15 path.ArrowSegment, body.voDartLight-v16 div.VoteTrack g.CountNode.clickable.highlit.v16 path.ArrowSegment, body.voDartLight-v17 div.VoteTrack g.CountNode.clickable.highlit.v17 path.ArrowSegment, body.voDartLight-v18 div.VoteTrack g.CountNode.clickable.highlit.v18 path.ArrowSegment, body.voDartLight-v19 div.VoteTrack g.CountNode.clickable.highlit.v19 path.ArrowSegment, body.voDartLight-v20 div.VoteTrack g.CountNode.clickable.highlit.v20 path.ArrowSegment, body.voDartLight-o0 div.VoteTrack g.CountNode.clickable.highlit.o0 path.ArrowSegment,/* peers */ body.voDartLight-o1 div.VoteTrack g.CountNode.clickable.highlit.o1 path.ArrowSegment, body.voDartLight-o2 div.VoteTrack g.CountNode.clickable.highlit.o2 path.ArrowSegment, body.voDartLight-o3 div.VoteTrack g.CountNode.clickable.highlit.o3 path.ArrowSegment, body.voDartLight-o4 div.VoteTrack g.CountNode.clickable.highlit.o4 path.ArrowSegment, body.voDartLight-o5 div.VoteTrack g.CountNode.clickable.highlit.o5 path.ArrowSegment, body.voDartLight-o6 div.VoteTrack g.CountNode.clickable.highlit.o6 path.ArrowSegment, body.voDartLight-o7 div.VoteTrack g.CountNode.clickable.highlit.o7 path.ArrowSegment, body.voDartLight-o8 div.VoteTrack g.CountNode.clickable.highlit.o8 path.ArrowSegment, body.voDartLight-o9 div.VoteTrack g.CountNode.clickable.highlit.o9 path.ArrowSegment, body.voDartLight-o10 div.VoteTrack g.CountNode.clickable.highlit.o10 path.ArrowSegment, body.voDartLight-o11 div.VoteTrack g.CountNode.clickable.highlit.o11 path.ArrowSegment, body.voDartLight-o12 div.VoteTrack g.CountNode.clickable.highlit.o12 path.ArrowSegment, body.voDartLight-o13 div.VoteTrack g.CountNode.clickable.highlit.o13 path.ArrowSegment, body.voDartLight-o14 div.VoteTrack g.CountNode.clickable.highlit.o14 path.ArrowSegment, body.voDartLight-o15 div.VoteTrack g.CountNode.clickable.highlit.o15 path.ArrowSegment, body.voDartLight-o16 div.VoteTrack g.CountNode.clickable.highlit.o16 path.ArrowSegment, body.voDartLight-o17 div.VoteTrack g.CountNode.clickable.highlit.o17 path.ArrowSegment, body.voDartLight-o18 div.VoteTrack g.CountNode.clickable.highlit.o18 path.ArrowSegment, body.voDartLight-o19 div.VoteTrack g.CountNode.clickable.highlit.o19 path.ArrowSegment, body.voDartLight-o20 div.VoteTrack g.CountNode.clickable.highlit.o20 path.ArrowSegment, body.voDartLight-y div.VoteTrack g.CountNode.clickable.highlit.y path.ArrowSegment,/* cycler */ body.voDartLight-c div.VoteTrack g.CountNode.clickable.highlit.c path.ArrowSegment,/* candidate */ div.VoteTrack div.overlay circle.Podium.highlit:hover { fill: #eddacf; /* lighter orange/brown */ } /** - Board ---------------------------- */ div.VoteTrack table td.Board { width: 100%; /* sqeeze adjacent FlowVolume to minimum width */ } div.VoteTrack table td.Board, div.VoteTrack table td.Candidate g.CountNode, div.VoteTrack div.overlay circle.Podium { cursor: crosshair; } /** - BreakLine ------------------------ */ div.VoteTrack table g.CountNode path.BreakLine { display: none; /* till changed in code */ stroke: #000; /* same as stage */ stroke-linecap: square; /* ensuring full width of stroke extends past edge of arrow segement */ stroke-width: 0.3em; } /** - CycleSpot ------------------------ */ div.VoteTrack table g.CountNode circle.CycleSpot { display: none; /* till changed in code */ fill: #000; /* same as stage */ } /** - FlowVolume ----------------------- */ div.VoteTrack table td.FlowVolume { color: #d09470; padding: 0 0.4em 1px 0.4em; /* TRBL, B to align with g.CountNode, which is drawn with 1px extra margin on bottom */ } div.VoteTrack table td.FlowVolume strong { color: #ffa168; } /** - fadeable ------------------------- */ div.VoteTrack .fadeable { transition: opacity .2s ease-in 0s; /* property, duration, timing function, delay */ -moz-transition: opacity .2s ease-in 0s; -webkit-transition: opacity .2s ease-in 0s; } div.VoteTrack .fadeable.fadedOut { opacity: 0; transition-duration: 0s; -moz-transition-duration: 0s; -webkit-transition-duration: 0s; } /** - headsUp -------------------------- */ div.VoteTrack div.headsUp { pointer-events: none; /* because visiblity controlled in code via opacity (for sake of transitions) and we don't want it interacting with mouse when invisible */ transition: opacity .2s ease-in .3s; /* property, duration, timing function, delay */ -moz-transition: opacity .2s ease-in .3s; -webkit-transition: opacity .2s ease-in .3s; position: absolute; left: 0; right: 0; /* fill div.voteTrack parent. 100% width too wide owing to parent padding */ top: 0; bottom: 0; z-index: 15; /* raise above normal content */ } div.VoteTrack div.headsUp div.display { display: none; /* overridden by HeadsUpDisplay.java */ left: 0; right: 0; /* fill div.headsUp parent */ position: absolute; /* not relative because that changes the meaning of 'bottom' position if height differs from container height (as it usually will) */ } div.VoteTrack div.headsUp div.display.top { bottom: 2.4em; /* clear 1.2em svg * 2 at y offset zero, so bottom edge drops from 2X to 1X svg height */ } div.VoteTrack div.headsUp div.display.bottom { top: 1.2em; /* clear 1.2em svg at cursor y offset zero, so top edge drops from 1X to 2X svg height */ } div.VoteTrack div.headsUp div.display span.field /* this 'outside' one never actually displayed */ { background-color: #303030; border-color: #909090; color: #f4f4f4; } div.VoteTrack div.headsUp div.display.inside span.field { background-color: #eee; background: linear-gradient(#f8f8f8, #dadada); background: -moz-linear-gradient(#f8f8f8, #dadada); background: -webkit-linear-gradient(#f8f8f8, #dadada); border-color: #bbb; color: #000; } div.VoteTrack div.headsUp div.rail /* on which shuttle slides horizontally */ { overflow: hidden; /* Suppress scroll bar when shuttle passes right edge. Cannot hide overflow-x alone, as Firefox (16) then forces overflow-y to auto, hiding it too. Therefore overflow-x must be hidden on innermost container, which must be at the correct y position (itself or its parents). So we cannot have a single rail/shuttle for top and bottom displays, as that would require y positioning the child displays to top and bottom. */ position: relative; /* HeadsUpDisplay.Shuttler rides it vertically, tracking mouse */ } div.VoteTrack div.headsUp div.rail span.shuttle { display: inline-block; /* no need for full block, also to match form of field */ position: relative; /* HeadsUpDisplay.Shuttler slides it horizontally, tracking mouse */ } div.VoteTrack div.headsUp div.rail span.shuttle span.field { border-style: solid; border-radius: 4px; /* -moz-border-radius: 4px; */ /* -webkit-border-radius: 4px; */ border-width: thin; font-size: 1.0625em; /* 0.85 (actual) = 0.8 (track) / 1.0625 (formal) */ display: inline-block; /* to allow top/bottom padding */ /* padding: 0.2em 0.3em 0.2em 0.3em; but then Chrome (25) clips bottom border on top field, so use px instead: */ padding: 2px 3px 2px 3px; /*TRBL*/ } /** - overlay -------------------------- */ div.VoteTrack div.overlay /* div wrapper around SVG element, which itself might be unable to handle absolute positioning, not being an HTML element */ { pointer-events: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } div.VoteTrack div.overlay svg { width: 100%; } /** - pin ------------------------------- * * This image only present when track inanimate, per VoteTrack.toPin. */ div.VoteTrack table td.Board img.pin { pointer-events: none; /* it intrudes in scene, so minimize the intrusion */ position: absolute; z-index: 1; /* above scene content below, e.g. above MediaWiki Vector skin panels, which otherwise eclipse the image after page refresh */ } div#StageV-bottom div.VoteTrack table td.Board img.pin { transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); /* Opera */ } /** - Podium --------------------------- */ div.VoteTrack div.overlay circle.Podium { opacity: 0; pointer-events: auto; transition: opacity .3s ease-in .2s; /* property, duration, timing function, delay */ -moz-transition: opacity .3s ease-in .2s; -webkit-transition: opacity .3s ease-in .2s; visibility: hidden; } /** - spotlit -------------------------- */ table.LinkTrack.VoteTrack-spotlit td#LinkTrack-caption div.containingBlock span.right span { /* background-color: #8d5731; */ color: #f3d5c3; /* outline: #f3d5c3 thin solid; outline-offset: 1px; */ } /** - track table ---------------------- */ div.VoteTrack table.track { table-layout: fixed; /* independent of cell content */ } div.VoteTrack table.track td.Candidate { width: 13%; /* 100 - td.peers - td.voters */ } div.VoteTrack table.track td.peers { width: 44%; /* slightly wider than peers because its td.FlowVolume will usually be wider */ } div.VoteTrack table.track td.voters { width: 43%; } /** - voDifferencesShadowed ------------ * * In draft page, per * http://reluk.ca/project/votorola/_/javadoc/votorola/s/gwt/stage/Stage.html#areDifferencesShadowed() */ body.voDifferencesShadowed span.CaptionV /* which sits inside of VoteTrackV */ { position: fixed; } /* @import "talk/TalkTrack.css"; pending CWFIX, http://mail.zelea.com/list/votorola/2013-June/001763.html */ .staged /* cf. stageVDefault.css */ { background-color: #000; color: #ccc; font-family: sans-serif; /* regardless of what the host page prefers */ } /** - WarnV ---------------------------- */ img.WarnV { cursor: help; position: absolute; top: 0; right: 50%; z-index: 9; /* raise above ordinary stage content */ }