Services/web/transitions.css

0001
0002 :root {
0003     --colr-black: #3C3530;
0004     --colr-green: #AACD6E;
0005     --colr-gray: #C5C6B6;
0006 }
0007 html {
0008     box-sizing: border-box;
0009     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "PingFang TC", "Heiti TC", 微軟正黑體, sans-serif;
0010     font-size: 16px;
0011     -webkit-font-smoothing: antialiased;
0012 }
0013
0014 *,
0015 *:before,
0016 *:after {
0017     box-sizing: inherit;
0018 }
0019
0020 body {
0021     width: 100%;
0022     height: 100vh;
0023     margin: 0;
0024     padding: 0;
0025 }
0026
0027 .header {
0028     height: 30px;
0029     float: bottom;
0030     bottom:0;
0031 }
0032 .core {
0033     height: 95vh;
0034 }
0035 .container {
0036     display: grid;
0037
0038     width: 100%;
0039     height: 100vh;
0040     margin: 0;
0041     padding: 0;
0042         grid-template-columns: repeat(10, 1fr);
0043         grid-template-rows: 1fr 30px 30px;
0044 }
0045
0046 .name_div {
0047     background-color: var(--colr-green);
0048         grid-column: 1/2;
0049         grid-row: 1/8;
0050 }
0051 #name_view {
0052     width: 100%;
0053     height: 100%;
0054 }
0055
0056 .graph_div {
0057         grid-column: 2/11;
0058         grid-row: 1/8;
0059     background-color: var(--colr-gray);
0060 }
0061 #graph_view {
0062     width: 100%;
0063     height: 100%;
0064 }
0065 .time_div {
0066         grid-column: 2/11;
0067         grid-row: 9;
0068     background-color: #FF0000;
0069 }
0070
0071 #time_view {
0072         height: 50px;
0073     width: 100%;
0074 }
0075
0076 .selected {
0077         grid-column: 1/11;
0078         grid-row: 10;
0079         height: 50px;
0080 }
0081
0082 .controls {
0083     grid-column: 1/1;
0084     grid-row: 9;
0085 }