Update Project Website

static/css/index.css

@@ -1,146 +1,215 @@
- p {
-     text-align: justify;
-     font-size: 16px;
- }
-
- ol {
-     text-align: justify;
- }
-
- body {
-     font-family: 'Noto Sans', sans-serif;
- }
-
- #tabResults td:nth-child(2),
- #tabResults td:nth-child(3),
- #tabResults td:nth-child(8),
- #tabResults td:nth-child(14) {
-     /* border-left: 1px solid black;
-        border-right: 1px solid black; */
- }
-
- .subtitle {
-     font-size: 16px;
-     text-align: justify;
- }
-
- .footer .icon-link {
-     font-size: 25px;
-     color: #000;
- }
-
- .link-block a {
-     margin-top: 5px;
-     margin-bottom: 5px;
- }
-
- .dnerf {
-     font-variant: small-caps;
- }
-
- .teaser .hero-body {
-     padding-top: 0;
-     padding-bottom: 3rem;
- }
-
- .teaser {
-     font-family: 'Google Sans', sans-serif;
- }
-
- .publication-title {}
-
- .publication-banner {
-     max-height: parent;
- }
-
- .publication-banner video {
-     position: relative;
-     left: auto;
-     top: auto;
-     transform: none;
-     object-fit: fit;
- }
-
- .publication-header .hero-body {}
-
- .publication-title {
-     font-family: 'Google Sans', sans-serif;
- }
-
- .publication-authors {
-     font-family: 'Google Sans', sans-serif;
- }
-
- .publication-venue {
-     color: #555;
-     width: fit-content;
-     font-weight: bold;
- }
-
- .publication-awards {
-     color: #ff3860;
-     width: fit-content;
-     font-weight: bolder;
- }
-
- .publication-authors {}
-
- .publication-authors a {
-     color: hsl(204, 86%, 53%) !important;
- }
-
- .publication-authors a:hover {
-     text-decoration: underline;
- }
-
- .author-block {
-     display: inline-block;
- }
-
- .publication-banner img {}
-
- .publication-authors {
-     /*color: #4286f4;*/
- }
-
- .publication-video {
-     position: relative;
-     width: 100%;
-     height: 0;
-     padding-bottom: 56.25%;
-     overflow: hidden;
-     border-radius: 10px !important;
- }
-
- .publication-video iframe {
-     position: absolute;
-     top: 0;
-     left: 0;
-     width: 100%;
-     height: 100%;
- }
-
- .publication-body img {}
-
- .results-carousel {
-     overflow: hidden;
- }
-
- .results-carousel .item {
-     margin: 5px;
-     overflow: hidden;
-     padding: 20px;
-     font-size: 0;
- }
-
- .results-carousel video {
-     margin: 0;
- }
-
- .slider-pagination .slider-page {
-     background: #000000;
- }
-
- .eql-cntrb {
-     font-size: smaller;
- }
+body {
+  font-family: 'Noto Sans', sans-serif;
+}
+
+
+.footer .icon-link {
+    font-size: 25px;
+    color: #000;
+}
+
+.link-block a {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.mmmu {
+  font-variant: small-caps;
+  font-weight: bold;
+}
+
+
+.teaser .hero-body {
+  padding-top: 0;
+  padding-bottom: 3rem;
+}
+
+.teaser {
+  font-family: 'Google Sans', sans-serif;
+}
+
+
+.publication-links {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center; 
+}
+
+
+.publication-title {
+}
+
+.publication-banner {
+  max-height: parent;
+
+}
+
+.publication-banner video {
+  position: relative;
+  left: auto;
+  top: auto;
+  transform: none;
+  object-fit: fit;
+}
+
+.publication-header .hero-body {
+}
+
+.publication-title {
+    font-family: 'Google Sans', sans-serif;
+}
+
+.publication-authors {
+    font-family: 'Google Sans', sans-serif;
+}
+
+.publication-venue {
+    color: #555;
+    width: fit-content;
+    font-weight: bold;
+}
+
+.publication-awards {
+    color: #ff3860;
+    width: fit-content;
+    font-weight: bolder;
+}
+
+.publication-authors {
+}
+
+.publication-authors a {
+   color: hsl(204, 86%, 53%) !important;
+}
+
+.publication-authors a:hover {
+    text-decoration: underline;
+}
+
+.author-block {
+  display: inline-block;
+}
+
+.publication-banner img {
+}
+
+.publication-authors {
+  /*color: #4286f4;*/
+}
+
+.publication-video {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-bottom: 56.25%;
+
+    overflow: hidden;
+    border-radius: 10px !important;
+}
+
+.publication-video iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.publication-body img {
+}
+
+.results-carousel {
+  overflow: hidden;
+}
+
+/* .results-carousel .item {
+  margin: 20px;
+  overflow: hidden;
+  border: 1px solid #bbb;
+  border-radius: 10px;
+  padding: 5px;
+  font-size: 0;
+} */
+
+.stats-image {
+  max-height: 250px;
+}
+
+#org-banners {
+  display:flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.org-banner {
+  /* margin: 5px; */
+  max-width: 100%;
+  height: 6em;
+  margin: 10px;
+  padding: 10px;
+}
+
+.chart-grid {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+}
+
+.chart-item {
+  text-align: center;
+}
+
+.chart-label {
+  margin-top: 5px;
+}
+
+/* 媒体查询，只有当浏览器窗口宽度大于600px时才会应用 */
+@media (min-width: 600px) {
+  .chart-grid {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  }
+}
+
+/* 当浏览器窗口宽度大于900px时 */
+@media (min-width: 900px) {
+  .chart-grid {
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  }
+}
+
+.bottom-text {
+  margin-top: 30px; 
+}
+
+
+.model-labels-container {
+  text-align: center;
+  margin-top: 8px;
+  margin-bottom: 8px; 
+}
+
+.model-label {
+  display: inline-block;
+  padding: 4px 10px;
+  margin: 5px;
+  border-radius: 3px;
+  color: rgb(255, 255, 255);
+}
+
+.leaderboard-label {
+  display: inline-block;
+  padding: 4px 10px;
+  margin: 5px;
+  border-radius: 3px;
+  color: rgb(48, 48, 48);
+}
+
+.box {
+  display: flex;
+  align-items: center; 
+  justify-content: center; 
+  height: 100%;
+  margin: 5px; 
+}