progs/display/style.css
author Christian Urban <christian dot urban at kcl dot ac dot uk>
Fri, 24 Jul 2020 12:58:19 +0100
changeset 738 03f46065ef04
permissions -rw-r--r--
updated
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
738
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
     1
body {
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
     2
  font-family: Calibri, Segoe, "Segoe UI", "Gill Sans", "Gill Sans MT", sans-serif;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
     3
}
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
     4
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
     5
/* It's supposed to look like a tree diagram */
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
     6
.tree, .tree ul, .tree li {
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
     7
    list-style: none;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
     8
    margin: 0;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
     9
    padding: 0;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    10
    position: relative;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    11
}
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    12
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    13
.tree {
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    14
    margin: 0 0 1em;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    15
    text-align: center;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    16
}
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    17
.tree, .tree ul {
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    18
    display: table;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    19
}
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    20
.tree ul {
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    21
  width: 100%;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    22
}
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    23
    .tree li {
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    24
        display: table-cell;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    25
        padding: .5em 0;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    26
        vertical-align: top;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    27
    }
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    28
        /* _________ */
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    29
        .tree li:before {
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    30
            outline: solid 1px #666;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    31
            content: "";
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    32
            left: 0;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    33
            position: absolute;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    34
            right: 0;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    35
            top: 0;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    36
        }
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    37
        .tree li:first-child:before {left: 50%;}
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    38
        .tree li:last-child:before {right: 50%;}
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    39
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    40
        .tree code, .tree span {
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    41
            border: solid .1em #666;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    42
            border-radius: .2em;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    43
            display: inline-block;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    44
            margin: 0 .2em .5em;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    45
            padding: .2em .5em;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    46
            position: relative;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    47
        }
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    48
        /* If the tree represents DOM structure */
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    49
        .tree code {
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    50
            font-family: monaco, Consolas, 'Lucida Console', monospace;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    51
        }
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    52
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    53
            /* | */
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    54
            .tree ul:before,
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    55
            .tree code:before,
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    56
            .tree span:before {
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    57
                outline: solid 1px #666;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    58
                content: "";
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    59
                height: .5em;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    60
                left: 50%;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    61
                position: absolute;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    62
            }
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    63
            .tree ul:before {
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    64
                top: -.5em;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    65
            }
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    66
            .tree code:before,
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    67
            .tree span:before {
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    68
                top: -.55em;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    69
            }
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    70
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    71
/* The root node doesn't connect upwards */
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    72
.tree > li {margin-top: 0;}
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    73
    .tree > li:before,
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    74
    .tree > li:after,
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    75
    .tree > li > code:before,
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    76
    .tree > li > span:before {
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    77
      outline: none;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    78
    }
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    79
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    80
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    81
/* Create two equal columns that floats next to each other */
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    82
.column {
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    83
  float: left;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    84
  width: 40%;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    85
  padding: 10px;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    86
}
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    87
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    88
/* Clear floats after the columns */
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    89
.row:after {
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    90
  content: "";
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    91
  display: table;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    92
  clear: both;
03f46065ef04 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    93
}