Christian/Johnny
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Updated styling

Browse Source
This commit is contained in:
Christian
2021-05-09 15:36:48 +02:00
parent 51d8ccf148
commit f4ad57b544
6 changed files with 788 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
out/css/pc.css
View File

@ -68,15 +68,6 @@
}
/* CONTROLS COLORS */
.controls button, .controls .button {
/* background-color: whitesmoke; */
color: var(--color-controls-button-text);
border-color: var(--color-controls-button-border);
}
.controls button:hover, .controls .button:hover{
color: var(--color-controls-button-text-hover);
}
.pc .controls .checker::before {
border: 1px solid var(--color-controls-button-border);
}
@ -119,7 +110,7 @@
box-sizing: border-box;
padding: 1em;
padding: 1em 0;
display: grid;
grid-template-columns: auto auto auto;
@ -170,9 +161,9 @@
margin: 1em 0 0 0;
}
.pc .scroller:last-child {
/*.pc .scroller:last-child {
margin-bottom: -1em;
}
}*/
.pc .scroller table {
margin: 0;
@ -182,8 +173,9 @@
position: sticky;
top: -2px;
left: 0;
height: 1em;
padding: 1em;
/*height: 1em;*/
/*padding: 1em;*/
font-size: .8em;
transition: 0.2s;
}
@ -192,21 +184,27 @@
position: -webkit-sticky;
position: sticky;
top: 0;
width: min-content;
}
.pc .scroller table thead th:last-child {
width: max-content;
}
.pc .scroller table thead.head.shrunk {
height: .5rem;
font-size: .8em;
/*height: .5rem;*/
/*font-size: .8em;*/
}
.pc .scroller table thead.head th {
padding: 12px 4px 12px 15px;
padding: .2em 3px;
transition: 0.2s;
text-align: center;
/*border: 1px solid black !important;*/
}
.pc .scroller table thead.head.shrunk th {
padding-top: .2em;
padding-bottom: .2em;
/*padding-top: .2em;
padding-bottom: .2em;*/
}
.pc .scroller table .num {
@ -214,15 +212,37 @@
white-space: nowrap;
}
.pc .scroller table td:first-child,
.pc .scroller table td:last-child {
padding: 12px 15px;
.pc .scroller table td {
padding: 6px 3px;
vertical-align: baseline;
/*border: 1px solid black !important;*/
}
.pc .scroller table tr.empty td {
padding: 3px 15px;
.pc .scroller table tr td:first-child {
padding: 12px 8px;
}
.pc .scroller table tr.empty td:first-child {
padding: 3px 8px;
}
.pc .cu .scroller table tr.empty select {
padding: 3px 8px;
height: min-content;
}
.pc .scroller table tr td :last-child {
margin: 0;
}
.pc .scroller tr:first-child td {
padding-top: 1.5rem !important;
}
/*.pc .ram .comment {
padding: 12px 5px;
}*/
.pc .scroller table tbody button:last-child {
text-decoration: none;
text-transform: none;
@ -233,10 +253,6 @@
padding: 0px 10px;
}
.pc .scroller tr:first-child td{
padding-top: 1.5rem !important;
}
th.address {
width: 5rem;
padding-left: 8px;
@ -331,28 +347,29 @@ th.address {
}
.pc .ram table tr td:nth-child(2){
text-align: left;
text-align: center;
}
.pc .ram .scroller table tbody button:last-child{
.pc .ram .scroller table tbody tr:last-child button{
background-color: var(--color-table-ram-select);
color: var(--color-table-ram-select-text);
border-color: var(--color-table-ram-select-border);
border-color: var(--color-table-ram-button-border);
width: 9.5em;
height: 2.5rem;
padding: 2px 1px;
line-height: 1em;
}
.pc .ram .ram-entry:last-child {
margin-right: 0 !important;
}
.pc .ram .comment {
padding: 12px 5px;
}
.pc .ram .comment input{
border: none;
margin: 0;
font-size: .8em;
width: 100%;
padding: 0;
}
@ -384,7 +401,7 @@ th.address {
}
.pc .cu input[type=number] {
width: 12.5em;
width: 9.5em;
}
.pc .cu label {
@ -401,10 +418,19 @@ th.address {
border: 1px solid var(--color-table-cu-select-border);
}
.pc .cu .scroller table tbody button:last-child {
.pc .cu .scroller table tbody tr:last-child button {
background-color: var(--color-table-cu-select);
color: var(--color-table-cu-select-text);
border: 1px solid var(--color-table-cu-select-border);
border: 1px solid var(--color-table-cu-button-border);
width: 100%;
height: min-content;
padding: 3px 15px;
text-align: left;
}
.pc .cu .scroller table tr td:first-child {
padding: 12px 12px 12px 8px;
}
.pc .cu button,
@ -417,6 +443,21 @@ th.address {
background-color: transparent;
}
.pc .modal .download-button {
display: block;
margin-bottom: 2em;
padding: 2px 15px;
font-weight: normal;
font-size: inherit;
height: min-content;
line-height: 1.6;
}
.pc .action-button {
width: 8em;
padding: 4px;
}
/* ALU */
.pc .alu input, .pc .alu .button, .pc .alu button{
color: var(--color-alu-text);
@ -525,11 +566,11 @@ th.address {
}
.pc .arrow.up ~ .arrow.up {
left: 25%;
left: 50%;
}
.pc .arrow.up ~ .arrow.up ~ .arrow.up {
left: 50%;
left: 25%;
}
.pc .arrow.top {
@ -642,6 +683,12 @@ th.address {
width: 100%;
}
.input-group > *{
margin-right: 0.5em !important;
}
.input-group :last-child {
margin-right: 0;
}
@media(max-width: 1000px){