Update upstream source from tag 'upstream/1.18'

[chroma-debian.git] / browser / chroma-style.css

diff --git a/browser/chroma-style.css b/browser/chroma-style.css
new file mode 100644 (file)
index 0000000..9751fb5
--- /dev/null
+++ b/browser/chroma-style.css
@@ -0,0 +1,522 @@
+//            stroke              fill
+//    {0xcc, 0xcc, 0xcc}, {0x7f, 0x7f, 0x7f}, /* 0 */
+//    {0xff, 0x99, 0x99}, {0xff, 0x00, 0x00}, /* 1 */
+//    {0x99, 0xff, 0x99}, {0x00, 0xcc, 0x00}, /* 2 */
+//    {0xff, 0xff, 0x33}, {0xff, 0xa0, 0x00}, /* 3 */
+//    {0x99, 0x99, 0xff}, {0x00, 0x00, 0xff}, /* 4 */
+//    {0xcc, 0x99, 0xff}, {0x80, 0x00, 0xff}, /* 5 */
+//    {0x66, 0xb3, 0xff}, {0x00, 0x80, 0xff}, /* 6 */
+//    {0xff, 0xff, 0xff}, {0x7f, 0x7f, 0x7f}, /* 7 */
+//
+///* light */ - use for background blocsk
+//    {0xee, 0xee, 0xee}, {0x7f, 0x7f, 0x7f}, /* 0 */
+//    {0xff, 0xcc, 0xcc}, {0xff, 0x00, 0x00}, /* 1 */
+//    {0xcc, 0xff, 0xcc}, {0x00, 0xcc, 0x00}, /* 2 */
+//    {0xff, 0xff, 0x99}, {0xff, 0xa0, 0x00}, /* 3 */
+//    {0xcc, 0xcc, 0xff}, {0x00, 0x00, 0xff}, /* 4 */
+//    {0xe6, 0xcc, 0xff}, {0x80, 0x00, 0xff}, /* 5 */
+//    {0xb3, 0xd9, 0xff}, {0x00, 0x80, 0xff}, /* 6 */
+//    {0xff, 0xff, 0xff}, {0x7f, 0x7f, 0x7f}, /* 7 */
+//
+///* bold */
+//    {0xaa, 0xaa, 0xaa}, {0x7f, 0x7f, 0x7f}, /* 0 */
+//    {0xff, 0x5c, 0x5c}, {0xff, 0x00, 0x00}, /* 1 */
+//    {0x5c, 0xff, 0x5c}, {0x00, 0xcc, 0x00}, /* 2 */
+//    {0xff, 0xc0, 0x00}, {0xff, 0xa0, 0x00}, /* 3 */
+//    {0x5c, 0x5c, 0xff}, {0x00, 0x00, 0xff}, /* 4 */
+//    {0xae, 0x5c, 0xff}, {0x80, 0x00, 0xff}, /* 5 */
+//    {0x29, 0x94, 0xff}, {0x00, 0x80, 0xff}, /* 6 */
+//    {0xff, 0xff, 0xff}, {0x00, 0x00, 0x00}  /* 7 white, black outline */
+
+
+body
+{
+margin: 0px;
+background: #000000;
+font-family: sans-serif;
+font-size: 3vw;
+}
+
+.black, div.item.grey div.key, div.item.grey div.item-text, div.menu h1, div.menu h2
+{
+color: #7f7f7f;
+-webkit-text-fill-color: #cccccc;
+-webkit-text-stroke-width: 0.03em;
+-webkit-text-stroke-color: #7f7f7f;
+text-fill-color: #cccccc;
+text-stroke-width: 0.03em;
+text-stroke-color: #7f7f7f;
+}
+
+.red
+{
+color: ##ff0000;
+-webkit-text-fill-color: #ff9999;
+-webkit-text-stroke-width: 0.03em;
+-webkit-text-stroke-color: #ff0000;
+text-fill-color: #ff9999;
+text-stroke-width: 0.3em;
+text-stroke-color: #ff0000;
+}
+
+.green
+{
+color: #00cc00;
+-webkit-text-fill-color: #99ff99;
+-webkit-text-stroke-width: 0.03em;
+-webkit-text-stroke-color: #00cc00;
+text-fill-color: #99ff99;
+text-stroke-width: 0.03em;
+text-stroke-color: #00cc00;
+}
+
+.yellow
+{
+color: #ffa000;
+-webkit-text-fill-color: #ffff33;
+-webkit-text-stroke-width: 0.03em;
+-webkit-text-stroke-color: #ffa000;
+text-fill-color: #ffff33;
+text-stroke-width: 0.03em;
+text-stroke-color: #ffa000;
+}
+
+.blue, div.item, div.item-options, div.instructions p
+{
+color: #0000ff;
+-webkit-text-fill-color: #9999ff;
+-webkit-text-stroke-width: 0.03em;
+-webkit-text-stroke-color: #0000ff;
+text-fill-color: #9999ff;
+text-stroke-width: 0.03em;
+text-stroke-color: #0000ff;
+}
+
+.magenta
+{
+color: #8000ff;
+-webkit-text-fill-color: #cc99ff;
+-webkit-text-stroke-width: 0.03em;
+-webkit-text-stroke-color: #8000ff;
+text-fill-color: #cc99ff;
+text-stroke-width: 0.03em;
+text-stroke-color: #8000ff;
+}
+
+.cyan, div.item-options div.option.selected
+{
+color: #0080ff;
+-webkit-text-fill-color: #66b3ff;
+-webkit-text-stroke-width: 0.03em;
+-webkit-text-stroke-color: #0080ff;
+text-fill-color: #66b3ff;
+text-stroke-width: 0.03em;
+text-stroke-color: #0080ff;
+}
+
+.black-background, div.item.grey div.key, div.item.grey div.item-text 
+{
+background: #eeeeee;
+border: 0.06em solid #7f7f7f;
+}
+
+.blue-background, div.item div.key, div.item div.item-text, div.item-options div.option, div.item-slider
+{
+background:#ccccff;
+border:0.06em solid #0000ff;
+}
+
+.cyan-background, div.item-options div.option.selected
+{
+background: #b3d9ff;
+border: 0.06em solid #0080ff;
+}
+
+div.menu
+{
+position: absolute;
+top: 0px;
+right: 0px;
+opacity: 1;
+background: #ffffff;
+width: 100%;
+min-height: 100%;
+transition: width 1s ease, height 1s ease, opacity 1s ease, top 1s ease, right 1s ease;
+}
+
+div.menu h1
+{
+font-size: 100%;
+text-align: center;
+margin-top: 1em;
+margin-bottom: 1em;
+}
+
+div.menu h2
+{
+font-size: 100%;
+margin-top: 1em;
+margin-bottom: 0.25em;
+margin-left: 1em;
+margin-right: 1em;
+}
+
+div.menu div.logo
+{
+margin: auto;
+text-align: center;
+font-size: 125%;
+margin-top: 0.5em;
+margin-bottom: -0.5em;
+}
+
+div.menu div.logo.big
+{
+font-size: 500%;
+margin-top: 0em;
+margin-bottom: -0.125em;
+}
+
+div.spacer {
+height: 1em;
+}
+
+div.items {
+padding-bottom: 0.5em;
+}
+
+div.item {
+margin-top: 0.06em;
+cursor: pointer;
+width: 100%;
+}
+
+div.item div.key {
+float: left;
+width: 1.5em;
+text-align: center;
+padding-top: 0.25em;
+padding-bottom: 0.25em;
+margin-left: 1em;
+margin-right: 0.06em;
+overflow: hidden;
+
+}
+
+div.item-text {
+overflow: auto;
+text-align: left;
+padding-top: 0.25em;
+padding-bottom: 0.25em;
+padding-left: 0.5em;
+padding-right: 0.25em;
+margin-left: 2em;
+margin-right: 1em;
+
+}
+
+div.item-text select {
+float: right;
+}
+
+div.item-options
+{
+display: flex;
+flex-direction: row;
+flex-wrap: wrap;
+justify-content: space-between;
+
+margin-left: 1em;
+margin-right: 0.94em;
+
+cursor: pointer;
+
+}
+
+div.item-options div.option
+{
+flex-grow: 1;
+position: relative;
+
+margin-right: 0.06em;
+margin-top: 0.06em;
+padding: 0.25em;
+}
+
+div.item-options div.option.four
+{
+flex: 1 0 0;
+width: 0%;
+}
+
+div.item-options div.option.three
+{
+width: 25%;
+}
+
+div.item-options div.option div.key
+{
+
+display: inline-block;
+width: 1.5em;
+text-align: center;
+
+padding-top: 0.25em;
+padding-bottom: 0.25em;
+
+margin-left: -0.25em;
+margin-top: -0.25em;
+margin-bottom: 0.25em;
+margin-right: 0.5em;
+
+background:#ccccff;
+border-right: 0.06em solid #0000ff;
+border-bottom: 0.06em solid #0000ff;
+}
+
+div.item-options div.option.selected div.key
+{
+background: #b3d9ff;
+border-right: 0.06em solid #0080ff;
+border-bottom: 0.06em solid #0080ff;
+}
+
+div.item-options div.option img
+{
+width: 100%;
+display: block;
+}
+
+div.item-options div.option input
+{
+float: right;
+width: 3em;
+height: 1em;
+font-size: 100%;
+}
+
+div.item-slider
+{
+margin-left: 1em;
+margin-right: 1em;
+margin-top: 0.06em;
+padding-left: 2em;
+padding-right: 0.25em;
+padding-bottom: 0.25em;
+}
+
+div.item-slider input.slider
+{
+display: block;
+float: left;
+width: calc(100% - 6em);
+height: 1em;
+}
+
+div.item select
+{
+font-size: 100%;
+}
+
+div.item input
+{
+font-size: 100%;
+}
+
+div.item-slider input.number
+{
+float: right;
+font-size: 100%;
+width: 3em;
+height: 1em;
+}
+
+div.item-slider div.title
+{
+text-align: left;
+padding-top: 0.25em;
+padding-bottom: 0.25em;
+}
+
+div.item-left {
+float: left;
+}
+
+div.item-right {
+float: right;
+}
+
+
+div.clear {
+clear: both;
+}
+
+
+div.instructions p
+{
+margin-left: 1em;
+margin-right: 1em;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+div#menu-icon {
+display: none;
+position: fixed;
+top: 0px;
+right: 0px;
+background: #ffffff;
+cursor: pointer;
+transition: opacity 1s ease;
+opacity: 1;
+}
+
+
+
+
+div.keypad
+{
+position: fixed;
+top: 0px;
+left: 0px;
+display: table;
+background: #ffffff;
+width: auto;
+border: 1px solid black;
+font-size: 16px;
+}
+
+div.keypad.transition
+{
+transition: top 1s ease, left 1s ease;
+}
+
+div.keypad.minimised
+{
+top: -125px;
+left: -125px;
+}
+
+div.keypad div.row
+{
+display: table-row;
+width: auto;
+}
+
+div.keypad div.row div.cell
+{
+display: table-cell;
+height: 50px;
+width: 50px;
+text-align: center;
+vertical-align: middle;
+cursor: pointer;
+border: 2px solid #ffffff;
+
+}
+
+div.keypad div.row div.cell div.key
+{
+display: table-cell;
+height: 50px;
+width: 50px;
+text-align: center;
+vertical-align: middle;
+cursor: pointer;
+top: 0px;
+left: 0px;
+}
+
+div.keypad div.row div.cell div.key.cyan
+{
+background:#b3d9ff;
+border:2px solid #0080ff;
+}
+
+div.keypad div.row div.cell div.key.blue
+{
+background:#ccccff;
+border:2px solid #0000ff;
+}
+
+div.keypad div.row div.cell div.toggle
+{
+display: table-cell;
+height: 50px;
+width: 50px;
+text-align: right;
+vertical-align: bottom;
+cursor: pointer;
+}
+
+div.keypad div.row div.cell div.drag
+{
+display: table-cell;
+height: 50px;
+width: 50px;
+text-align: left;
+vertical-align: bottom;
+cursor: pointer;
+}
+
+
+
+
+
+@media (max-width: 480px)
+{
+    body
+    {
+        font-size: 14.4px;
+    }
+
+    div.item div.key, div.item-options div.option div.key
+    {
+        display: none;
+    }
+
+    div.item div.item-text, div.menu h2, div.item-options, div.item-slider, div.instructions p
+    {
+        margin-left: 0em;
+        margin-right: 0em;
+    }
+
+    div.item-slider
+    {
+        padding-left: 0.5em;
+    }
+
+    div#menu-icon
+    {
+        font-size: 200%;
+    }
+
+    div.item, div.slider
+    {
+        margin-top: 1px;
+    }
+
+    div.item-options div.option
+    {
+        margin-top: 1px;
+        margin-right: 1px;
+    }
+}
+