browser: replace smartmatch by equivalent syntax

[sheet.git] / style / sc.scss

diff --git a/style/sc.scss b/style/sc.scss
index 0c0a829c1b670bf950ed237363c626fef4c48264..50925e882aa56e264166eb294fb1b7aed75a1234 100644 (file)
--- a/style/sc.scss
+++ b/style/sc.scss
@@ -1,39 +1,50 @@
-.units {
-       border-collapse: separate;
-       border-spacing: 0;
-       margin: 0 auto;
-       white-space: nowrap;
-}
-.units th, .units td {
-       border: 0;
-       padding: 0 0.2em;
-       background: transparent;
-       text-align: left;
-}
-tr.alt td {
-       font-size: 70%;
-       padding-left: 0.5em;
-}
-.units tr th:first-child {
-       padding-left: 0;
-}
-

 table h2 {
        padding: 1ex 0;
        margin: 0;
        text-align: center;
 }
 table h2 {
        padding: 1ex 0;
        margin: 0;
        text-align: center;
 }

-.units thead th, .units tfoot th {
+tr.alt td {

        font-size: 70%;
        font-size: 70%;

-       font-weight: normal;
+       padding-left: 0.5em;

 }
 
 }
 

-.units td.unit {
-       padding-right: 0;
-}
-.units td.unit + td.unit {
-       padding-left: 0;
+.units {
+       border-collapse: separate;
+       border-spacing: 0;
+       margin: 0 auto;
+       white-space: nowrap;
+
+       th, td {
+               border: 0;
+               padding: 0 0.2em;
+               background: transparent;
+               text-align: left;
+       }
+
+       tr th:first-child {
+               padding-left: 0;
+       }
+
+       thead th, tfoot th {
+               font-size: 70%;
+               font-weight: normal;
+       }
+
+       td.unit {
+               & {
+                       padding-right: 0;
+               }
+               & + td.unit {
+                       padding-left: 0;
+               }
+       }
+
+       .val {
+               white-space: nowrap;
+               text-align: right;
+       }

 }
 }

+

 .unit-composed {
        font-size: 70%;
 }
 .unit-composed {
        font-size: 70%;
 }


@@ -75,109 +86,280 @@ td.hurtrel {
        font-variant: small-caps;
 }
 
        font-variant: small-caps;
 }
 

-.units .val {
-       white-space: nowrap;
-       text-align: right;
-}
-
-.legend dt {
-       float: none;
-       text-align: left;
-       margin-top: 1ex;
-       font-weight: bold;
-}
-.legend dd:before {
-       content: '• ';
-}
-.legend dd {
-       text-indent: -1em;
-       margin-left: 1em;
-}
-

 .legend {
 .legend {

-       display: table-cell;
-       min-width: 20em;
-       text-align: left;
+       dt {
+               float: none;
+               text-align: left;
+               margin-top: 1ex;
+               font-weight: bold;
+       }
+       dd:before {
+               content: '• ';
+       }
+       dd {
+               text-indent: -1em;
+               margin-left: 1em;
+       }
+
+       & {
+               display: table-cell;
+               min-width: 20em;
+               text-align: left;
+       }

 }
 .units {
        float: left;
        padding-bottom: 1em;
        margin-right: 2em;
 }
 .units {
        float: left;
        padding-bottom: 1em;
        margin-right: 2em;

-}

 
 

-@media (max-width: 52em) {
-       .units thead th:first-child,
-       .units tbody .cat {
-               position: absolute;
-               visibility: hidden;
+       @media (max-width: 52em) {
+               thead th:first-child,
+               tbody .cat {
+                       position: absolute;
+                       visibility: hidden;
+               }

        }
 }
 @media (max-width: 48em) {
        .units {
        }
 }
 @media (max-width: 48em) {
        .units {

-               width: auto;
+               & {
+                       width: auto;
+               }
+               th, td {
+                       vertical-align: top;
+               }
+               td {
+                       height: 2em;
+               }
+
+               td:nth-child(2) {
+                       white-space: normal;
+                       padding: 0;
+               }
+
+               tr.sub td:nth-child(2),
+               .cat,
+               .unit-speed,
+               .hurtrel,
+               .unit-pop, .unit-type,
+               .unit-shield,
+               .unit-gas {
+                       padding: 0;
+                       position: absolute;
+                       margin-top: 3.2ex;
+                       margin-top: 1rem;
+                       min-width: 4em;
+                       text-align: right;
+                       margin-left: -4.3em;
+                       font-size: 70%;
+               }
+               th.unit-attr {
+                       position: absolute;
+               }
+               .unit-type {
+                       text-align: left;
+                       margin-left: 0;
+               }
+               .unit-speed {
+                       margin-left: -6em;
+               }
+               .alt {
+                       thead th:first-child,
+                       .cat,
+                       .unit-speed,
+                       .hurtrel,
+                       .unit-pop, .unit-type,
+                       .unit-shield,
+                       .gas {
+                               margin-top: 2ex;
+                       }
+               }
+               .cat {
+                       margin-top: -2ex;
+                       margin-left: 0;
+                       text-align: left;
+               }
+
+               thead th:first-child {
+                       margin-left: 0.5em;
+               }
+               thead th:first-child,
+               th.unit-speed,
+               th.hurtrel,
+               th.unit-shield,
+               th.gas {
+                       margin-top: 2.2ex;
+               }

        }
        }

-       .units th, .units td {
-               vertical-align: top;
+}
+
+.units tbody tr:hover:not(.race) {
+       background: #EEE;
+}
+.unit-gas {
+       color: #040;
+}
+.unit-min, .unit-min a:not(:hover) {
+       color: #004;
+}
+.unit-supply {
+       color: #080;
+}
+.unit-o {color: #C08} /* organic */
+.unit-u {color: #44C} /* mechanic */
+.unit-p {color: #0A8} /* psionic */
+.unit-composed {
+       color: #C88;
+}
+.unit-air {
+       color: #08C;
+}
+.unit-x {color: #888}
+.unit-s {color: #890}
+.unit-m {color: #C70}
+.unit-l {color: #D22}
+.unit-h {color: #804}
+.magic-opt:before,
+.magic-opt:after {
+       color: #000;
+}
+.hurtrel, .units .hurtrel {
+       color: #778;
+}
+tbody .unit-shield {
+       color: #64A;
+}
+.unit-pdd {
+       color: #A8C;
+}
+.unit-splash {
+       color: #4A0;
+}
+.hurt-a {
+       color: #036;
+}
+.hurt-g {
+       color: #063;
+}
+.unit-massive {
+       color: #D88;
+}
+.unit-detect::before {
+       color: #0A8;
+}
+.unit-jump {
+       color: #8A4;
+}
+body .magic-perma {
+               text-decoration-color: #8C0;
+          -moz-text-decoration-color: #8C0;
+       -webkit-text-decoration-color: #8C0;
+}
+
+.s-dark {
+       .units tbody tr:hover:not(.race) {
+               background: #222;

        }
        }

-       .units td {
-               height: 2em;
+       .unit-gas {
+               color: #AC9;

        }
        }

-
-       .units td:nth-child(2) {
-               white-space: normal;
-               padding: 0;
+       .unit-min, .unit-min a:not(:hover) {
+               color: #ABC;

        }
        }

-
-       .units tr.sub td:nth-child(2),
-       .units .cat,
-       .units .unit-speed,
-       .units .hurtrel,
-       .units .unit-pop, .units .unit-type,
-       .units .unit-shield,
-       .units .unit-gas {
-               padding: 0;
-               position: absolute;
-               margin-top: 3.2ex;
-               margin-top: 1rem;
-               min-width: 4em;
-               text-align: right;
-               margin-left: -4.3em;
-               font-size: 70%;
+       .unit-supply {
+               color: #8C6;

        }
        }

-       .units th.unit-attr {
-               position: absolute;
+       .unit-o {color: #C5A} /* organic */
+       .unit-u {color: #66B} /* mechanic */
+       .unit-p {color: #0A8} /* psionic */
+       .unit-composed {
+               color: #A44;

        }
        }

-       .units .unit-type {
-               text-align: left;
-               margin-left: 0;
-       }
-       .units .unit-speed {
-               margin-left: -6em;
-       }
-       .units .alt thead th:first-child,
-       .units .alt .cat,
-       .units .alt .unit-speed,
-       .units .alt .hurtrel,
-       .units .alt .unit-pop, .units .alt .unit-type,
-       .units .alt .unit-shield,
-       .units .alt .gas {
-               margin-top: 2ex;
-       }
-       .units .cat {
-               margin-top: -2ex;
-               margin-left: 0;
-               text-align: left;
+       .unit-air {
+               color: #4AC;

        }
        }

-
-       .units thead th:first-child {
-               margin-left: 0.5em;
+       .unit-x {color: #666}
+       .unit-s {color: #AC6}
+       .unit-m {color: #C70}
+       .unit-l {color: #C44}
+       .unit-h {color: #C06}
+       .magic-opt:before,
+       .magic-opt:after {
+               color: #CCC;
+       }
+       .hurtrel, .units .hurtrel {
+               color: #887;
+       }
+       tbody .unit-shield {
+               color: #88A;
+       }
+       .unit-pdd {
+               color: #A8C;
+       }
+       .unit-splash {
+               color: #4A0;
+       }
+       .hurt-a {
+               color: #8AC;
+       }
+       .hurt-g {
+               color: #8CA;
+       }
+       .unit-massive {
+               color: #844;
+       }
+       .unit-detect::before {
+               color: #0A8;

        }
        }

-       .units thead th:first-child,
-       .units th.unit-speed,
-       .units th.hurtrel,
-       .units th.unit-shield,
-       .units th.gas {
-               margin-top: 2.2ex;
+       .unit-jump {
+               color: #780;
+       }
+       body .magic-perma {
+                               text-decoration-color: #460;
+                  -moz-text-decoration-color: #460;
+               -webkit-text-decoration-color: #460;

        }
 }
 
        }
 }
 

+.s-mono {
+       .unit-min {color: #000}
+       .unit-gas {color: #888}
+
+       .unit-o {color: #888}
+       .unit-u {color: #444}
+       .unit-p {color: #666}
+       .unit-supply {color: #888}
+
+       // distinctions significant in bonus damage
+       .unit-air {color: #AAA}
+       .unit-x {color: #000; text-shadow: #888 0 0 .1em}
+       .unit-s {color: #888}
+       .unit-m {color: #444}
+       .unit-l {color: #222}
+       .unit-h {color: #000}
+
+       tbody .unit-shield {
+               color: #888;
+       }
+       .unit-pdd {
+               color: #666;
+       }
+       .unit-splash {
+               color: #444;
+       }
+       .hurt-a {
+               color: #000;
+       }
+       .hurt-g {
+               color: #000;
+       }
+       .unit-massive {
+               color: #444;
+       }
+       .unit-detect::before {
+               color: #888;
+       }
+       .unit-jump {
+               color: #222;
+       }
+}