Commit 8c62067e authored by Marco Cavalli's avatar Marco Cavalli
Browse files

feat: update CSS styles for improved typography and layout consistency

parent 883b92d0

public/ETSIstyles.css

+106 −24
Original line number Diff line number Diff line
@@ -9,31 +9,44 @@ 
.TAH {

  font-family: Arial;

  font-size: 9pt;

  font-weight: bold;

  font-weight: 600;

  text-align: center;

  color: #121619;

}



.TAC {

  font-family: Arial;

  font-family: Rubik, Arial;

  font-size: 9pt;

  text-align: center;

}



.TAC strong {

  font-weight: 700;

  color: #02488d;

  font-size: 1.25em;

  font-family: "Maven Pro", Arial;

}



.TAL {

  font-family: Arial;

  font-size: 9pt;

  text-align: left;

}



.HTML-Variable {

  font-family: "Roboto Mono", Monospace;

  font-size: 8pt;

  font-size: 1em;

  font-style: italic;

}



.HTML-Variable strong {

  font-weight: 700;

  color: #121619;

}



.HTML-Keyboard {

  font-family: Times New Roman;

  font-size: 10pt;

  color: #595959;

  font-size: 1.06em;

  color: #121619;

}



.HTML-Definition {
@@ -50,19 +63,20 @@ 


.HTML-Code {

  font-family: "Roboto Mono", Monospace;

  font-size: 8pt;

  font-size: 1em;

  color: #31849b;

}



.Plain_Text_Char {

  font-family: Courier New;

  font-family: "Roboto Mono", Consolas, "Liberation Mono", Menlo, Courier,

    monospace;

}



.HTML-Error {

  font-family: Times New Roman;

  font-weight: bold;

  font-family: Arial;

  font-weight: 600;

  font-style: italic;

  color: #595959;

  color: #6e151e;

}



.TAJ {
@@ -75,21 +89,42 @@ 
}



.ZA {

  font-family: Arial;

  font-family: "Maven Pro", Arial;

  font-size: 20pt;

  text-align: right;

  color: #121619;

}



/*

.ZT::before {

  content: url("https://www.etsi.org/templates/etsi/img/logo.svg");

  content: url("https://oascities.org/wp-content/uploads/2018/04/ETSI.png");

  content: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Logo_ETSI.svg/320px-Logo_ETSI.svg.png")

}*/



.ZGSM {

}







.ZT {

  font-family: Arial;

  font-size: 17pt;

  font-weight: bold;

  color: #121619;

  font-weight: 700;

  font-size: 2em;

  font-family: "Maven Pro", Arial;

  text-align: center;

}



.ZT ~ .ZT {

  font-size: 1.5em;

  color: rgb(62, 72, 79);

  font-weight: 400;

}



.ZT ~ .ZT::before {

  content: none;

}



.ZG {

  font-family: Arial;

  text-align: right;
@@ -111,23 +146,47 @@ 
  margin-top: 6pt;

  margin-bottom: 9pt;

}

.NO,

.TAN {

  display: flex;

  gap: 12pt;

  border: 1px solid;

  border-color: #4078c0;

  background-color: aliceblue;

  border-radius: 3px;

}



.NO {

  padding-left: 12pt;

  padding-right: 12pt;

  margin-bottom: 9pt;

  display: flex;

  gap: 12pt;

}



.NO > p {

.NO > p,

.TAN > p {

  margin: 0;

  padding: 0;

  white-space: pre-wrap;

}



.NO > p:first-of-type {

div > .TAN {

  margin-bottom: 6px;

}



div > .TAN:last-of-type {

  margin-bottom: 0;

}



.NO > p:first-of-type,

.TAN > p:first-of-type {

  white-space: nowrap;

}



.NO > div:first-of-type,

.TAN > div:first-of-type {

  font-weight: 600;

}



.EQ {

  text-align: center;

}
@@ -138,6 +197,8 @@ 
  display: flex;

  gap: 12pt;

  align-items: flex-start;

  min-width: 100%;

  max-width: 100%;

}



.EX > p {
@@ -150,6 +211,14 @@ 
  white-space: nowrap;

}



.EX > div:first-of-type {

  font-weight: 600;

}



.EX > div:nth-child(2) {

  width: 100%;

}



.EW {

  gap: 12pt;

  display: flex;
@@ -167,15 +236,26 @@ 


.FL {

  font-family: Arial;

  font-weight: bold;

  font-weight: 600;

  text-align: center;

  margin-top: 3pt;

  margin-bottom: 9pt;



  overflow: auto;

  border-radius: 3px;

  border: 1px solid;

  border-color: #e1e2e3;

  min-width: 100%;

  max-width: 100%;

  width: 100%;

  padding: 16px;

  background-color: white;

  border-radius: 3px;

}



.TF {

  font-family: Arial;

  font-weight: bold;

  font-weight: 600;

  text-align: center;

  margin-bottom: 12pt;

}
@@ -186,7 +266,7 @@ 


.TH {

  font-family: Arial;

  font-weight: bold;

  font-weight: 600;

  text-align: center;

  margin-top: 3pt;

  margin-bottom: 9pt;
@@ -197,7 +277,8 @@ 
}



.HTML-Sample {

  font-family: Courier New;

  font-family: "Roboto Mono", Consolas, "Liberation Mono", Menlo, Courier,

    monospace;

  font-size: 8pt;

}
@@ -210,7 +291,8 @@ 
}



.PL {

  font-family: Courier New;

  font-family: "Roboto Mono", Consolas, "Liberation Mono", Menlo, Courier,

    monospace;

  font-size: 8pt;

}

public/customCSS.css

+112 −26
Original line number Diff line number Diff line 
@import url('https://fonts.googleapis.com/css?family=Roboto:400,600,700|Roboto+Mono:400,500,600');

@import url('https://fonts.googleapis.com/css?family=Rubik:400,500,600,700');

@import url('https://fonts.googleapis.com/css?family=Maven+Pro:400,600');

/*! normalize.css v3.0.1 | MIT License | git.io/normalize */



/**
@@ -16,18 +19,19 @@ html { 
  * Remove default margin.

  */



body {

  margin: 0;

body: {

  color: #586269;

  font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

}



#TOC {

  top: 0;

  top: 0px;

  left: 0;

  height: 100%;

  min-height: calc(100vh - 30px);

  max-height: calc(100vh - 30px);

  width: unset;

  position: relative;



  background-color: rgba(100, 100, 100, 0.6);

  background-color: #ccc;

  overflow-y: auto;

  scrollbar-width: none;

  -ms-overflow-style: none;
@@ -43,6 +47,60 @@ body { 
  text-overflow: ellipsis;

}



#TOC h1 {

   background-color: #02488d;

   border-bottom-style: none;

   padding-top: 10px;

   margin-bottom: 0px !important;

}



#TOC:before {

  content: url("https://www.etsi.org/templates/etsi/img/logo.svg");

  display: block;

  background-color: white;

  padding-left: 30px;

  padding-top:  5px;

  position: sticky;

  top: 0px;

}



flex-item:has(#TOC) {

  background-color: #3e484f;

}



flex-item:has(#TOC):after {

  background-color: #3e484f;

  color: white;

  padding-left: 30px;

  padding-top:  5px;

  content: "© Copyright 2025, ETSI";

  display: block;

  font-family: "Rubik";

  font-size: 0.9rem;

}





#TOC h1 a {

   color: white;

}

#TOC ul {

  background-color: rgba(200, 200, 200);

}



#TOC ul:after {

   background-color: #02488d;

}



#TOC ul:first-child {

   background-color: #02488d;

   list-style: none;

   margin-bottom: 0px !important;

   position: sticky;

   top: 50px;

}







#TOC li > ul {

  display: none;

}
@@ -79,7 +137,8 @@ body { 
}



#editor {

  padding: 0 2rem;

  padding: 0 2rem 2rem 2rem;

  max-width: 1140px;

}



@media screen and (max-width: 600px) {
@@ -220,7 +279,8 @@ abbr[title] { 


b,

strong {

  font-weight: bold;

  font-weight: 500;

  color: #3e484f

}



/**
@@ -554,11 +614,11 @@ th { 
  box-sizing: border-box;

}

body {

  font-family: -apple-system, BlinkMacSystemFont, "Times New Roman", "Segoe UI",

  font-family: Rubik, -apple-system, BlinkMacSystemFont, "Times New Roman", "Segoe UI",

    Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji",

    "Segoe UI Emoji", "Segoe UI Symbol";

  font-size: 10pt;

  line-height: 1.6;

  font-size: 0.9rem;

  line-height: 1.4;

  /* margin: auto; */

  /* max-width: 920px;

    min-width: 360px; */
@@ -567,6 +627,8 @@ body { 
  position: relative;

  padding: 2rem;

  word-wrap: break-word;

  background-color: rgb(248, 249, 250);

  color: rgb(62, 72, 79)

}



/* Headers
@@ -578,20 +640,26 @@ h3, 
h4,

h5,

h6 {

  font-weight: 600;

 

  line-height: 1.25;

  margin-bottom: 16px;

  margin-top: 24px;

  margin-top: 2em;

  color: #02488d;

  font-family: "Maven Pro";

}

h1 {

  margin-top: 1.5em;

  padding-bottom: 0.3em;

  font-size: 2em;

  border-bottom: 1px solid #eee;

   font-weight: 700;

  border-bottom: 1px solid rgb(62, 72, 79);

}

h2 {

  margin-top: 1.5em;

  padding-bottom: 0.3em;

  font-size: 1.5em;

  border-bottom: 1px solid #eee;

   font-weight: 600;

  border-bottom: 1px solid rgb(62, 72, 79)

}

h3 {

  font-size: 1.25em;
@@ -653,13 +721,14 @@ a:first-child h6 { 
  ========================================================================== */



a {

  color: #4078c0;

  color: rgb(2, 72, 141);

  text-decoration: none;

}

a:active,

a:hover {

  outline: 0;

  text-decoration: underline;

  text-decoration: none;

  color: #012142;

}

sup,

sub,
@@ -783,11 +852,13 @@ table { 
}

table th {

  font-weight: normal;

  border: 1px solid #ccc;

  border: 1px solid rgb(153, 160, 165);

  padding: 6px 13px;

  background-color: #eaebec;



}

table td {

  border: 1px solid #ccc;

  border: 1px solid rgb(153, 160, 165);

  padding: 6px 13px;

}

table td > p:first-child {
@@ -797,8 +868,9 @@ table td > p:last-child { 
  margin-bottom: 0;

}

table tr {

  border-top: 1px solid #ccc;

  background-color: #fff;

  border-top: 1px solid rgb(153, 160, 165);

  background-color: rgb(241, 241, 241)

  color: #1a1f23;

}



/* STRIPED TABLES DOES NOT WORK WITH GRID TABLES AS THEY REQUIRE CUSTOM CSS TO WORK PROPERLY
@@ -820,8 +892,8 @@ tt { 
  padding-top: 0.2em;

  padding-bottom: 0.2em;

  margin: 0;

  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;

  font-size: 10pt;

  font-family: "Roboto Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace;

  font-size: 1em;

  background-color: rgba(0, 0, 0, 0.04);

  border-radius: 3px;

}
@@ -841,6 +913,14 @@ pre { 
  line-height: 19px;

  overflow: auto;

  border-radius: 3px;

  border: 1px solid;

  border-color: #e1e2e3;

  min-width: 100%;

  max-width: 100%;

  width: 100%;

  padding-right: 16px;

  border-radius: 3px;



}

pre code,

pre tt {
@@ -1047,6 +1127,12 @@ code > span.in { 
  text-wrap: nowrap;

}



code span.er {

  color: rgb(62, 72, 79) !important;

  font-weight: 500;

}





#Table_6\.2-1 + table tbody {

  tr {

    background-color: #fff !important;

public/styles.css

+116 −30
Original line number Diff line number Diff line
@@ -9,34 +9,47 @@ 
.TAH {

  font-family: Arial;

  font-size: 9pt;

  font-weight: bold;

  font-weight: 600;

  text-align: center;

  color: #121619;

}



.TAC {

  font-family: Arial;

  font-family: Rubik, Arial;

  font-size: 9pt;

  text-align: center;

}



.TAC strong {

  font-weight: 700;

  color: #02488d;

  font-size: 1.25em;

  font-family: "Maven Pro", Arial;

}



.TAL {

  font-family: Arial;

  font-size: 9pt;

  text-align: left;

}



.HTML_Variable {

.HTML-Variable {

  font-family: "Roboto Mono", Monospace;

  font-size: 8pt;

  font-size: 1em;

  font-style: italic;

}



.HTML_Keyboard {

  font-family: Times New Roman;

  font-size: 10pt;

  color: #595959;

.HTML-Variable strong {

  font-weight: 700;

  color: #121619;

}



.HTML_Definition {

.HTML-Keyboard {

  font-size: 1.06em;

  color: #121619;

}



.HTML-Definition {

  font-style: italic;

}
@@ -48,21 +61,22 @@ 
  gap: 12pt;

}



.HTML_Code {

.HTML-Code {

  font-family: "Roboto Mono", Monospace;

  font-size: 8pt;

  font-size: 1em;

  color: #31849b;

}



.Plain_Text_Char {

  font-family: Courier New;

  font-family: "Roboto Mono", Consolas, "Liberation Mono", Menlo, Courier,

    monospace;

}



.HTML_Error {

  font-family: Times New Roman;

  font-weight: bold;

.HTML-Error {

  font-family: Arial;

  font-weight: 600;

  font-style: italic;

  color: #595959;

  color: #6e151e;

}



.TAJ {
@@ -75,21 +89,42 @@ 
}



.ZA {

  font-family: Arial;

  font-family: "Maven Pro", Arial;

  font-size: 20pt;

  text-align: right;

  color: #121619;

}



/*

.ZT::before {

  content: url("https://www.etsi.org/templates/etsi/img/logo.svg");

  content: url("https://oascities.org/wp-content/uploads/2018/04/ETSI.png");

  content: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Logo_ETSI.svg/320px-Logo_ETSI.svg.png")

}*/



.ZGSM {

}







.ZT {

  font-family: Arial;

  font-size: 17pt;

  font-weight: bold;

  color: #121619;

  font-weight: 700;

  font-size: 2em;

  font-family: "Maven Pro", Arial;

  text-align: center;

}



.ZT ~ .ZT {

  font-size: 1.5em;

  color: rgb(62, 72, 79);

  font-weight: 400;

}



.ZT ~ .ZT::before {

  content: none;

}



.ZG {

  font-family: Arial;

  text-align: right;
@@ -111,29 +146,59 @@ 
  margin-top: 6pt;

  margin-bottom: 9pt;

}

.NO,

.TAN {

  display: flex;

  gap: 12pt;

  border: 1px solid;

  border-color: #4078c0;

  background-color: aliceblue;

  border-radius: 3px;

}



.NO {

  padding-left: 12pt;

  padding-right: 12pt;

  margin-bottom: 9pt;

  display: flex;

  gap: 12pt;

}



.NO > p {

.NO > p,

.TAN > p {

  margin: 0;

  padding: 0;

  white-space: pre-wrap;

}



.NO > p:first-of-type {

div > .TAN {

  margin-bottom: 6px;

}



div > .TAN:last-of-type {

  margin-bottom: 0;

}



.NO > p:first-of-type,

.TAN > p:first-of-type {

  white-space: nowrap;

}



.NO > div:first-of-type,

.TAN > div:first-of-type {

  font-weight: 600;

}



.EQ {

  text-align: center;

}



.EX {

  padding-left: 12pt;

  margin-bottom: 9pt;

  display: flex;

  gap: 12pt;

  align-items: flex-start;

  min-width: 100%;

  max-width: 100%;

}



.EX > p {
@@ -146,6 +211,14 @@ 
  white-space: nowrap;

}



.EX > div:first-of-type {

  font-weight: 600;

}



.EX > div:nth-child(2) {

  width: 100%;

}



.EW {

  gap: 12pt;

  display: flex;
@@ -163,15 +236,26 @@ 


.FL {

  font-family: Arial;

  font-weight: bold;

  font-weight: 600;

  text-align: center;

  margin-top: 3pt;

  margin-bottom: 9pt;



  overflow: auto;

  border-radius: 3px;

  border: 1px solid;

  border-color: #e1e2e3;

  min-width: 100%;

  max-width: 100%;

  width: 100%;

  padding: 16px;

  background-color: white;

  border-radius: 3px;

}



.TF {

  font-family: Arial;

  font-weight: bold;

  font-weight: 600;

  text-align: center;

  margin-bottom: 12pt;

}
@@ -182,7 +266,7 @@ 


.TH {

  font-family: Arial;

  font-weight: bold;

  font-weight: 600;

  text-align: center;

  margin-top: 3pt;

  margin-bottom: 9pt;
@@ -192,8 +276,9 @@ 
  margin-bottom: 9pt;

}



.HTML_Sample {

  font-family: Courier New;

.HTML-Sample {

  font-family: "Roboto Mono", Consolas, "Liberation Mono", Menlo, Courier,

    monospace;

  font-size: 8pt;

}
@@ -206,7 +291,8 @@ 
}



.PL {

  font-family: Courier New;

  font-family: "Roboto Mono", Consolas, "Liberation Mono", Menlo, Courier,

    monospace;

  font-size: 8pt;

}

public/styling.css

+113 −27
Original line number Diff line number Diff line 
@import url('https://fonts.googleapis.com/css?family=Roboto:400,600,700|Roboto+Mono:400,500,600');

@import url('https://fonts.googleapis.com/css?family=Rubik:400,500,600,700');

@import url('https://fonts.googleapis.com/css?family=Maven+Pro:400,600');

/*! normalize.css v3.0.1 | MIT License | git.io/normalize */



/**
@@ -16,18 +19,19 @@ html { 
  * Remove default margin.

  */



body {

  margin: 0;

body: {

  color: #586269;

  font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

}



#TOC {

  top: 0;

  top: 0px;

  left: 0;

  height: 100%;

  min-height: calc(100vh - 30px);

  max-height: calc(100vh - 30px);

  width: unset;

  position: relative;



  background-color: rgba(100, 100, 100, 0.6);

  background-color: #ccc;

  overflow-y: auto;

  scrollbar-width: none;

  -ms-overflow-style: none;
@@ -43,6 +47,60 @@ body { 
  text-overflow: ellipsis;

}



#TOC h1 {

   background-color: #02488d;

   border-bottom-style: none;

   padding-top: 10px;

   margin-bottom: 0px !important;

}



#TOC:before {

  content: url("https://www.etsi.org/templates/etsi/img/logo.svg");

  display: block;

  background-color: white;

  padding-left: 30px;

  padding-top:  5px;

  position: sticky;

  top: 0px;

}



flex-item:has(#TOC) {

  background-color: #3e484f;

}



flex-item:has(#TOC):after {

  background-color: #3e484f;

  color: white;

  padding-left: 30px;

  padding-top:  5px;

  content: "© Copyright 2025, ETSI";

  display: block;

  font-family: "Rubik";

  font-size: 0.9rem;

}





#TOC h1 a {

   color: white;

}

#TOC ul {

  background-color: rgba(200, 200, 200);

}



#TOC ul:after {

   background-color: #02488d;

}



#TOC ul:first-child {

   background-color: #02488d;

   list-style: none;

   margin-bottom: 0px !important;

   position: sticky;

   top: 50px;

}







#TOC li > ul {

  display: none;

}
@@ -79,7 +137,8 @@ body { 
}



#editor {

  padding: 0 2rem;

  padding: 0 2rem 2rem 2rem;

  max-width: 1140px;

}



@media screen and (max-width: 600px) {
@@ -220,7 +279,8 @@ abbr[title] { 


b,

strong {

  font-weight: bold;

  font-weight: 500;

  color: #3e484f

}



/**
@@ -554,11 +614,11 @@ th { 
  box-sizing: border-box;

}

body {

  font-family: -apple-system, BlinkMacSystemFont, "Times New Roman", "Segoe UI",

  font-family: Rubik, -apple-system, BlinkMacSystemFont, "Times New Roman", "Segoe UI",

    Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji",

    "Segoe UI Emoji", "Segoe UI Symbol";

  font-size: 10pt;

  line-height: 1.6;

  font-size: 0.9rem;

  line-height: 1.4;

  /* margin: auto; */

  /* max-width: 920px;

    min-width: 360px; */
@@ -567,6 +627,8 @@ body { 
  position: relative;

  padding: 2rem;

  word-wrap: break-word;

  background-color: rgb(248, 249, 250);

  color: rgb(62, 72, 79)

}



/* Headers
@@ -578,32 +640,38 @@ h3, 
h4,

h5,

h6 {

  font-weight: 600;

 

  line-height: 1.25;

  margin-bottom: 16px;

  margin-top: 24px;

  margin-top: 2em;

  color: #02488d;

  font-family: "Maven Pro";

}

h1 {

  margin-top: 1.5em;

  padding-bottom: 0.3em;

  font-size: 2em;

  border-bottom: 1px solid #eee;

   font-weight: 700;

  border-bottom: 1px solid rgb(62, 72, 79);

}

h2 {

  margin-top: 1.5em;

  padding-bottom: 0.3em;

  font-size: 1.5em;

  border-bottom: 1px solid #eee;

   font-weight: 600;

  border-bottom: 1px solid rgb(62, 72, 79)

}

h3 {

  font-size: 1.25em;

}

h4 {

  font-size: 1em;

  font-size: 1.1em;    

} 

h5 {

  font-size: 0.875em;

  font-size: 1.05em; 

}

h6 {

  font-size: 0.85em;

  font-size: 1em;

  color: #777;

}

h1 tt,
@@ -653,13 +721,14 @@ a:first-child h6 { 
  ========================================================================== */



a {

  color: #4078c0;

  color: rgb(2, 72, 141);

  text-decoration: none;

}

a:active,

a:hover {

  outline: 0;

  text-decoration: underline;

  text-decoration: none;

  color: #012142;

}

sup,

sub,
@@ -783,11 +852,13 @@ table { 
}

table th {

  font-weight: normal;

  border: 1px solid #ccc;

  border: 1px solid rgb(153, 160, 165);

  padding: 6px 13px;

  background-color: #eaebec;



}

table td {

  border: 1px solid #ccc;

  border: 1px solid rgb(153, 160, 165);

  padding: 6px 13px;

}

table td > p:first-child {
@@ -797,8 +868,9 @@ table td > p:last-child { 
  margin-bottom: 0;

}

table tr {

  border-top: 1px solid #ccc;

  background-color: #fff;

  border-top: 1px solid rgb(153, 160, 165);

  background-color: rgb(241, 241, 241)

  color: #1a1f23;

}



/* STRIPED TABLES DOES NOT WORK WITH GRID TABLES AS THEY REQUIRE CUSTOM CSS TO WORK PROPERLY
@@ -820,8 +892,8 @@ tt { 
  padding-top: 0.2em;

  padding-bottom: 0.2em;

  margin: 0;

  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;

  font-size: 10pt;

  font-family: "Roboto Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace;

  font-size: 1em;

  background-color: rgba(0, 0, 0, 0.04);

  border-radius: 3px;

}
@@ -841,6 +913,14 @@ pre { 
  line-height: 19px;

  overflow: auto;

  border-radius: 3px;

  border: 1px solid;

  border-color: #e1e2e3;

  min-width: 100%;

  max-width: 100%;

  width: 100%;

  padding-right: 16px;

  border-radius: 3px;



}

pre code,

pre tt {
@@ -1047,6 +1127,12 @@ code > span.in { 
  text-wrap: nowrap;

}



code span.er {

  color: rgb(62, 72, 79) !important;

  font-weight: 500;

}





#Table_6\.2-1 + table tbody {

  tr {

    background-color: #fff !important;