| <!-- |
| This in an HTML Import-able file that contains sharable CSS for Skia elements. |
| |
| To use this file import it: |
| |
| <link href="/res/imp/styles-sk.html" rel="import" /> |
| |
| Then use it: |
| |
| <style include="styles-sk"> |
| ... |
| </style> |
| --> |
| <dom-module id="styles-sk"> |
| <template> |
| <style> |
| /** |
| * Color palette. |
| * |
| * Taken from http://blog.mollietaylor.com/2012/10/color-blindness-and-palette-choice.html |
| */ |
| |
| /* CSS variables */ |
| :root { |
| --color-bluegreen: #1B9E77; |
| --color-redorange: #D95F02; |
| --color-purple: #7570B3; |
| --color-pink: #E7298A; |
| --color-lightgreen: #66A61E; |
| --color-lightgreen-translucent: rgba(102, 166, 30, 0.3); |
| --color-lightorange: #E6AB02; |
| --color-burntorange: #A6761D; |
| --color-gray: #666666; |
| } |
| |
| /* Background colors */ |
| .bg-bluegreen { |
| background-color: var(--color-bluegreen); |
| } |
| .bg-redorange { |
| background-color: var(--color-redorange); |
| } |
| .bg-purple { |
| background-color: var(--color-purple); |
| } |
| .bg-pink { |
| background-color: var(--color-pink); |
| } |
| .bg-lightgreen { |
| background-color: var(--color-lightgreen); |
| } |
| .bg-lightorange { |
| background-color: var(--color-lightorange); |
| } |
| .bg-burntorange { |
| background-color: var(--color-burntorange); |
| } |
| .bg-gray { |
| background-color: var(--color-gray); |
| } |
| |
| /* Success/Failure/Exception background colors. */ |
| .bg-success { |
| background-color: var(--color-lightgreen-translucent); |
| } |
| .bg-failure { |
| background-color: var(--color-redorange); |
| } |
| .bg-exception { |
| background-color: var(--color-purple); |
| } |
| .bg-inprogress { |
| background-color: rgba(255, 255, 255, 0.0); |
| } |
| .bg-unknown { |
| background-color: #BBB; |
| } |
| |
| /* Foreground colors */ |
| .fg-bluegreen { |
| color: var(--color-bluegreen); |
| } |
| .fg-redorange { |
| color: var(--color-redorange); |
| } |
| .fg-purple { |
| color: var(--color-purple); |
| } |
| .fg-pink { |
| color: var(--color-pink); |
| } |
| .fg-lightgreen { |
| color: var(--color-lightgreen); |
| } |
| .fg-lightorange { |
| color: var(--color-lightorange); |
| } |
| .fg-burntorange { |
| color: var(--color-burntorange); |
| } |
| .fg-gray { |
| color: var(--color-gray); |
| } |
| |
| /* Success/Failure/Exception foreground colors. */ |
| .fg-success { |
| color: var(--color-lightgreen); |
| } |
| .fg-failure { |
| color: var(--color-redorange); |
| } |
| .fg-exception { |
| color: var(--color-purple); |
| } |
| .fg-inprogress { |
| color: var(--color-lightorange); |
| } |
| .fg-unknown { |
| color: var(--color-gray); |
| } |
| |
| /** |
| * Styling for div table layout. |
| */ |
| .table { |
| border-collapse: collapse; |
| display: table; |
| } |
| .tr { |
| border-bottom: 1px solid #EEEEEE; |
| display: table-row; |
| } |
| .tr:hover { |
| background-color: #F5F5F5; |
| } |
| .tr:hover .tr:hover { |
| background-color: #FFFFFF; |
| } |
| .tr-container { |
| display: table-row-group; |
| } |
| .td,.th { |
| display: table-cell; |
| padding: 10px; |
| } |
| .td { |
| font-size: 0.813em; |
| vertical-align: middle; |
| } |
| .th { |
| color: #767676; |
| font-size: 0.75em; |
| } |
| .number { |
| text-align: right; |
| } |
| |
| /** |
| * Styling for simple container divs. |
| */ |
| .container { |
| font-family: sans-serif; |
| margin: 5px; |
| padding: 10px; |
| border: 1px solid #eeeeee; |
| } |
| .container h2 { |
| font-size: 18px; |
| margin-bottom: 5px; |
| } |
| </style> |
| </template> |
| </dom-module> |