style update

This commit is contained in:
Balakrishnan Balasubramanian 2023-07-05 22:27:09 -04:00
parent b159820f6c
commit 1e045964fa

View File

@ -66,44 +66,72 @@
} }
</script> </script>
<style> <style>
.outer {
display: flex;
justify-content: center;
background: grey;
}
.inner {
border: 1px solid;
background: white;
padding: 5px;
// flex: 1 0 0;
// max-width: 700px;
}
.m41-box { .m41-box {
display: grid; display: grid;
grid-template-columns: 1fr 2fr; grid-template-columns: 1fr 3fr;
margin: 10px;
// background-color: lightblue;
} }
#web-cfg-boxes { #web-cfg-boxes {
display: grid; // display: grid;
grid-template-columns: 1fr ; // grid-template-columns: 1fr ;
width: 1200px; width: 100%;
//justify-content: space-around; //justify-content: space-around;
// justify-content: flex-start; // justify-content: flex-start;
// background-color: blue; // background-color: blue;
} }
.m41-box:nth-of-type(odd) {
background: lightblue;
}
.m41-box:nth-of-type(even) {
background: lightgrey;
}
.m41-box-info { .m41-box-info {
display: grid; display: grid;
grid-template-columns: 3fr 1fr 5fr; grid-template-columns: 4fr 2fr 5fr;
align-items: stretch; // align-items: stretch;
// justify-content: space-around; // justify-content: space-around;
// background-color: grey;
} }
.button-group { .button-group {
display: grid; display: flex;
grid-template-columns: 1fr 1fr 1fr; justify-content: center;
align-items: stretch; // grid-template-columns: 1fr 1fr 1fr;
// align-items: stretch;
// display: inline-flex; // display: inline-flex;
} }
.m41-box-rule:only-child div.button-group button{ .m41-box-rule:only-child div.button-group button{
display: none; // display: none;
visibility: hidden;
} }
.m41-box:only-child div div.button-group button{ .m41-box:only-child div div.button-group button{
display: none; // display: none;
visibility: hidden;
} }
.m41-box-rule { .m41-box-rule {
display: grid; display: flex;
grid-template-columns: 1fr 3fr 1fr 1fr; // grid-template-columns: 1fr 3fr 1fr 1fr;
align-items: center; align-items: center;
justify-items: center; justify-items: center;
// background-color: lightblue;
} }
</style> </style>
@ -289,6 +317,8 @@
</div> </div>
</div> </div>
</template> </template>
<div class="outer">
<div class="inner">
<h1>Mail4one Web config</h1> <h1>Mail4one Web config</h1>
<table border id="web-cfg-matches"> <table border id="web-cfg-matches">
<thead> <thead>
@ -316,5 +346,7 @@
<h3>After</h3> <h3>After</h3>
<pre id="after"></pre> <pre id="after"></pre>
<hr> <hr>
</div>
</div>
</body> </body>
</html> </html>