fix(browser): fix css issues

public/static/css/default.css

@@ -0,0 +1,481 @@
+.hidden {
+  display: none;
+}
+
+.txt-cap {
+  text-transform: capitalize;
+}
+
+.font-xs {
+  font-size: 1.2rem;
+  line-height: 1.8rem;
+}
+
+.font-s {
+  font-size: 1.4rem;
+  line-height: 2.1rem;
+}
+
+.font-m {
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+}
+
+.font-l {
+  font-size: 1.8rem;
+  line-height: 2.7rem;
+}
+
+.font-xl {
+  font-size: 2rem;
+  line-height: 3rem;
+}
+
+.padding-xs {
+  padding: 0.25rem;
+}
+
+.padding-s {
+  padding: 0.5rem;
+}
+
+.padding-m {
+  padding: 1rem;
+}
+
+.padding-l {
+  padding: 2rem;
+}
+
+.padding-xl {
+  padding: 4rem;
+}
+
+.padding-l-xs {
+  padding-left: 0.25rem;
+}
+
+.padding-l-s {
+  padding-left: 0.5rem;
+}
+
+.padding-l-m {
+  padding-left: 1rem;
+}
+
+.padding-l-l {
+  padding-left: 2rem;
+}
+
+.padding-l-xl {
+  padding-left: 4rem;
+}
+
+.padding-r-xs {
+  padding-right: 0.25rem;
+}
+
+.padding-r-s {
+  padding-right: 0.5rem;
+}
+
+.padding-r-m {
+  padding-right: 1rem;
+}
+
+.padding-r-l {
+  padding-right: 2rem;
+}
+
+.padding-r-xl {
+  padding-right: 4rem;
+}
+
+.padding-t-xs {
+  padding-top: 0.25rem;
+}
+
+.padding-t-s {
+  padding-top: 0.5rem;
+}
+
+.padding-t-m {
+  padding-top: 1rem;
+}
+
+.padding-t-l {
+  padding-top: 2rem;
+}
+
+.padding-t-xl {
+  padding-top: 4rem;
+}
+
+.padding-b-xs {
+  padding-bottom: 0.25rem;
+}
+
+.padding-b-s {
+  padding-bottom: 0.5rem;
+}
+
+.padding-b-m {
+  padding-bottom: 1rem;
+}
+
+.padding-b-l {
+  padding-bottom: 2rem;
+}
+
+.padding-b-xl {
+  padding-bottom: 4rem;
+}
+
+.margin-xs {
+  margin: 0.25rem;
+}
+
+.margin-s {
+  margin: 0.5rem;
+}
+
+.margin-m {
+  margin: 1rem;
+}
+
+.margin-l {
+  margin: 2rem;
+}
+
+.margin-xl {
+  margin: 4rem;
+}
+
+.margin-l-xs {
+  margin-left: 0.25rem;
+}
+
+.margin-l-s {
+  margin-left: 0.5rem;
+}
+
+.margin-l-m {
+  margin-left: 1rem;
+}
+
+.margin-l-l {
+  margin-left: 2rem;
+}
+
+.margin-l-xl {
+  margin-left: 4rem;
+}
+
+.margin-r-xs {
+  margin-right: 0.25rem;
+}
+
+.margin-r-s {
+  margin-right: 0.5rem;
+}
+
+.margin-r-m {
+  margin-right: 1rem;
+}
+
+.margin-r-l {
+  margin-right: 2rem;
+}
+
+.margin-r-xl {
+  margin-right: 4rem;
+}
+
+.margin-t-xs {
+  margin-top: 0.25rem;
+}
+
+.margin-t-s {
+  margin-top: 0.5rem;
+}
+
+.margin-t-m {
+  margin-top: 1rem;
+}
+
+.margin-t-l {
+  margin-top: 2rem;
+}
+
+.margin-t-xl {
+  margin-top: 4rem;
+}
+
+.margin-b-xs {
+  margin-bottom: 0.25rem;
+}
+
+.margin-b-s {
+  margin-bottom: 0.5rem;
+}
+
+.margin-b-m {
+  margin-bottom: 1rem;
+}
+
+.margin-b-l {
+  margin-bottom: 2rem;
+}
+
+.margin-b-xl {
+  margin-bottom: 4rem;
+}
+
+.blue0-font {
+  color: #3498db;
+}
+
+.blue1-font {
+  color: #2980b9;
+}
+
+.cyan0-font {
+  color: #1abc9c;
+}
+
+.cyan1-font {
+  color: #16a085;
+}
+
+.purple0-font {
+  color: #9b59b6;
+}
+
+.purple1-font {
+  color: #8e44ad;
+}
+
+.red0-font {
+  color: #e74c3c;
+}
+
+.red1-font {
+  color: #c0392b;
+}
+
+.yellow0-font {
+  color: #f1c40f;
+}
+
+.yellow1-font {
+  color: #f39c12;
+}
+
+.yellow2-font {
+  color: #e67e22;
+}
+
+.yellow3-font {
+  color: #d35400;
+}
+
+.green0-font {
+  color: #2ecc71;
+}
+
+.green1-font {
+  color: #27ae60;
+}
+
+.green2-font {
+  color: #15cd3d;
+}
+
+.white-font {
+  color: #fff;
+}
+
+.white0-font {
+  color: #ecf0f1;
+}
+
+.white1-font {
+  color: #bdc3c7;
+}
+
+.grey0-font {
+  color: #95a5a6;
+}
+
+.grey1-font {
+  color: #7f8c8d;
+}
+
+.grey2-font {
+  color: #ecf0f6;
+}
+
+.grey3-font {
+  color: #697384;
+}
+
+.black-font {
+  color: #000;
+}
+
+.black0-font {
+  color: #34495e;
+}
+
+.black1-font {
+  color: #2c3e50;
+}
+
+.blue0-bg {
+  background-color: #3498db;
+}
+
+.blue1-bg {
+  background-color: #2980b9;
+}
+
+.blue2-bg {
+  background-color: #2f45c5;
+}
+
+.cyan0-bg {
+  background-color: #1abc9c;
+}
+
+.cyan1-bg {
+  background-color: #16a085;
+}
+
+.purple0-bg {
+  background-color: #9b59b6;
+}
+
+.purple1-bg {
+  background-color: #8e44ad;
+}
+
+.red0-bg {
+  background-color: #e74c3c;
+}
+
+.red1-bg {
+  background-color: #c0392b;
+}
+
+.yellow0-bg {
+  background-color: #f1c40f;
+}
+
+.yellow1-bg {
+  background-color: #f39c12;
+}
+
+.yellow2-bg {
+  background-color: #e67e22;
+}
+
+.yellow3-bg {
+  background-color: #15cd3d;
+}
+
+.yellow3-bg {
+  background-color: #d35400;
+}
+
+.green0-bg {
+  background-color: #2ecc71;
+}
+
+.green1-bg {
+  background-color: #27ae60;
+}
+
+.green2-bg {
+  background-color: #15cd3d;
+}
+
+.white-bg {
+  background-color: #fff;
+}
+
+.white0-bg {
+  background-color: #ecf0f1;
+}
+
+.white1-bg {
+  background-color: #bdc3c7;
+}
+
+.grey0-bg {
+  background-color: #95a5a6;
+}
+
+.grey1-bg {
+  background-color: #7f8c8d;
+}
+.grey2-bg {
+  background-color: #ecf0f6;
+}
+
+.grey3-bg {
+  color: #697384;
+}
+
+.black-bg {
+  background-color: #000;
+}
+
+.black0-bg {
+  background-color: #34495e;
+}
+
+.black1-bg {
+  background-color: #2c3e50;
+}
+
+.title-l {
+  font-size: 1.8rem;
+  font-weight: bold;
+  line-height: 2rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+  display: block;
+}
+
+.desc-l {
+  font-size: 1.2rem;
+  line-height: 2rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+  display: block;
+}
+
+.title-m {
+  font-size: 1.4rem;
+  /* font-weight: bold; */
+  line-height: 2rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+  display: block;
+}
+
+.desc-m {
+  font-size: 1.2rem;
+  line-height: 2rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+  display: block;
+}