171 lines
3.9 KiB
CSS
171 lines
3.9 KiB
CSS
:root {
|
|
--black : hsl(0, 0%, 0%);
|
|
--black2 : hsl(60, 17%, 11%);
|
|
--black3 : hsl(70, 8%, 15%);
|
|
--blue : hsl(190, 81%, 67%);
|
|
--grey : hsl(55, 8%, 26%);
|
|
--orange : hsl(32, 98%, 56%);
|
|
--orange2 : hsl(30, 83%, 34%);
|
|
--orange3 : hsl(47, 100%, 79%);
|
|
--purple : hsl(261, 100%, 75%);
|
|
--red : hsl(0, 93%, 59%);
|
|
--red2 : hsl(338, 95%, 56%);
|
|
--white : hsl(0, 0%, 97%);
|
|
--white2 : hsl(60, 36%, 96%);
|
|
--white3 : hsl(60, 30%, 96%);
|
|
--yellow : hsl(54, 70%, 68%);
|
|
--yellow2 : hsl(80, 76%, 53%);
|
|
--yellow3 : hsl(60, 12%, 79%);
|
|
--yellow4 : hsl(55, 11%, 22%);
|
|
--yellow5 : hsl(50, 11%, 41%);
|
|
}
|
|
|
|
.red {
|
|
color: red;
|
|
}
|
|
|
|
.black { color: var(--black); }
|
|
.black2 { color: var(--black2); }
|
|
.black3 { color: var(--black3); }
|
|
.blue { color: var(--blue); }
|
|
.grey { color: var(--grey); }
|
|
.orange { color: var(--orange); }
|
|
.orange2 { color: var(--orange2); }
|
|
.orange3 { color: var(--orange3); }
|
|
.purple { color: var(--purple); }
|
|
.red { color: var(--red); }
|
|
.red2 { color: var(--red2); }
|
|
.white { color: var(--white); }
|
|
.white2 { color: var(--white2); }
|
|
.white3 { color: var(--white3); }
|
|
.yellow { color: var(--yellow); }
|
|
.yellow2 { color: var(--yellow2); }
|
|
.yellow3 { color: var(--yellow3); }
|
|
.yellow4 { color: var(--yellow4); }
|
|
.yellow5 { color: var(--yellow5); }
|
|
|
|
.bak-black { background-color: var(--black); }
|
|
.bak-black2 { background-color: var(--black2); }
|
|
.bak-black3 { background-color: var(--black3); }
|
|
.bak-blue { background-color: var(--blue); }
|
|
.bak-grey { background-color: var(--grey); }
|
|
.bak-orange { background-color: var(--orange); }
|
|
.bak-orange2 { background-color: var(--orange2); }
|
|
.bak-orange3 { background-color: var(--orange3); }
|
|
.bak-purple { background-color: var(--purple); }
|
|
.bak-red { background-color: var(--red); }
|
|
.bak-red2 { background-color: var(--red2); }
|
|
.bak-white { background-color: var(--white); }
|
|
.bak-white2 { background-color: var(--white2); }
|
|
.bak-white3 { background-color: var(--white3); }
|
|
.bak-yellow { background-color: var(--yellow); }
|
|
.bak-yellow2 { background-color: var(--yellow2); }
|
|
.bak-yellow3 { background-color: var(--yellow3); }
|
|
.bak-yellow4 { background-color: var(--yellow4); }
|
|
.bak-yellow5 { background-color: var(--yellow5); }
|
|
|
|
.columns {
|
|
display: flex;
|
|
}
|
|
|
|
.columns > div {
|
|
flex: 1;
|
|
}
|
|
|
|
/* Tallsystemer */
|
|
.num-systems > div {
|
|
font-size: 0.75em;
|
|
text-align: left;
|
|
}
|
|
|
|
.num-system-title {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.num-span-red > span {
|
|
color: var(--red);
|
|
margin-left: 0.2em;
|
|
}
|
|
.num-span-blue > span {
|
|
color: var(--blue);
|
|
margin-left: 0.2em;
|
|
}
|
|
.num-span-green > span {
|
|
color: var(--yellow2);
|
|
margin-left: 0.2em;
|
|
}
|
|
.num-span-orange > span {
|
|
color: var(--orange);
|
|
margin-left: 0.2em;
|
|
}
|
|
|
|
/* Fetch Decode Execute*/
|
|
.fde-table-item {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.fde-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(8, 1fr);
|
|
column-gap: 0;
|
|
row-gap: 0;
|
|
justify-items: stretch;
|
|
}
|
|
|
|
.fde-grid > * {
|
|
margin: 0;
|
|
}
|
|
|
|
.fde-c2 { grid-column-start: 2; }
|
|
.fde-c3 { grid-column-start: 3; }
|
|
.fde-c4 { grid-column-start: 4; }
|
|
.fde-c5 { grid-column-start: 5; }
|
|
.fde-c6 { grid-column-start: 6; }
|
|
.fde-c7 { grid-column-start: 7; }
|
|
.fde-c8 { grid-column-start: 8; }
|
|
|
|
.fde-r2 { grid-row-start: 2; }
|
|
.fde-r3 { grid-row-start: 3; }
|
|
.fde-r4 { grid-row-start: 4; }
|
|
.fde-r5 { grid-row-start: 5; }
|
|
.fde-r6 { grid-row-start: 6; }
|
|
.fde-r7 { grid-row-start: 7; }
|
|
.fde-r8 { grid-row-start: 8; }
|
|
|
|
/* RGB */
|
|
.rgb-pvv {color: #283681;}
|
|
.rgb-red {color: #FF0000;}
|
|
.rgb-gre {color: #00FF00;}
|
|
.rgb-blu {color: #0000FF;}
|
|
.rgb-cof {color: #C0FFEE;}
|
|
.rgb-whi {color: #FFFFFF;}
|
|
.rgb-bla {color: #000000;}
|
|
|
|
/* Network diagrams */
|
|
.prev-netdiagram {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* TODO: fix at Mac address */
|
|
.right-corner-logo {
|
|
position: absolute;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
bottom: ;
|
|
left: 10px;
|
|
}
|
|
|
|
/* Misc */
|
|
|
|
.replacable-fragment {
|
|
position: relative;
|
|
margin: auto;
|
|
}
|
|
|
|
.replacable-fragment > div {
|
|
position:absolute;
|
|
top:0;
|
|
/* TODO: fix this properly */
|
|
left:25%;
|
|
}
|