Merge pull request #83 from dms-viz/simplify-css

Overhaul CSS and UI components

v0/css/base.css

@@ -1,4 +1,5 @@
 /* CSS properties that apply to all elements of a particular type  */
+
 *,
 ::before,
 ::after {

v0/css/components.css

@@ -1,274 +1,14 @@
-/* CSS for components on the website including the sidebar, navbar, and form elements  */
-
-/* Header Styles */
-header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: var(--nav-height);
-  background: white;
-  z-index: var(--z-index-nav);
-  padding: 0 3em 0 calc(var(--sidebar-width) + 3em);
-  transition: 0.5s;
-}
-
-nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: var(--nav-height);
-}
-
-nav .controls {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-nav a {
-  text-decoration: none;
-}
-
-nav .trigger {
-  display: flex;
-  align-items: center;
-  border: none;
-  outline: none;
-  background: none;
-  font-size: 1.25em;
-}
-
-nav .sidebar-toggle {
-  font-size: 1.25em;
-  color: rgba(0, 0, 0, 0.5);
-  cursor: pointer;
-}
-
-nav .sidebar-toggle:hover {
-  color: rgba(0, 0, 0, 0.75);
-}
-
-/* Sidebar Styles */
-.sidebar {
-  position: fixed;
-  top: 0;
-  width: var(--sidebar-width);
-  height: 100vh;
-  background-color: var(--sidebar-bg-color);
-  z-index: 100;
-  overflow: scroll;
-  transition: 0.5s;
-  display: flex;
-  flex-direction: column;
-}
-.sidebar .main-content {
-  display: flex;
-  flex-direction: column;
-  height: calc(100% - 3px);
-  overflow: auto;
-}
-
-.sidebar .header {
-  margin-bottom: 2.5rem;
-  height: var(--nav-height);
-  font-size: 1.25rem;
-  font-weight: bold;
-  color: rgba(0, 0, 0, 0.75);
-}
-
-.sidebar .header .logo {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-family: "Press Start 2P", monospace;
-  font-size: 1em;
-  font-weight: bold;
-  color: rgba(0, 0, 0, 0.75);
-  white-space: nowrap;
-  transition: justify-content 0.5s ease;
-  width: 100%;
-  gap: 10px;
-}
-
-.logo-img {
-  width: var(--sidebar-icon-width);
-  height: auto;
-}
-
-.sidebar.sidebar--collapsed .header .logo {
-  justify-content: flex-start;
-}
-
-.sidebar .accordion {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  border: none;
-  outline: none;
-  background: none;
-  color: rgba(0, 0, 0, 0.75);
-  cursor: pointer;
-  font-size: 1.25rem;
-  font-weight: bold;
-  margin-bottom: 0.5em;
-  padding: 0;
-  white-space: nowrap;
-}
-
-.sidebar .accordion:hover {
-  background-color: #dddddd;
-}
-
-.sidebar .accordion-content {
-  padding: 0 20px;
-  max-height: 0;
-  overflow: hidden;
-  gap: 0.5em;
-  transition: max-height 0.2s ease-in-out;
-}
-
-.sidebar .accordion-content label {
-  font-size: 0.8rem;
-}
-
-.sidebar .accordion-content select {
-  width: 100%;
-  height: 2em;
-}
-.sidebar .accordion-content input[type="range"] {
-  width: 100%;
-}
-
-.sidebar .color {
-  display: flex;
-  justify-content: space-between;
-}
-.sidebar .accordion-option {
-  padding-bottom: 10px;
-}
-
-.sidebar .accordion-option .output {
-  float: right;
-  font-size: 0.75rem;
-  font-family: monospace;
-  color: #963c10;
-}
-
-.sidebar .icon {
-  width: var(--sidebar-icon-width);
-  height: var(--sidebar-icon-width);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  font-size: 1.75rem;
-}
-.legend {
-  padding-top: 0.2em;
-}
-
-#url-json-file {
-  width: 100%;
-  height: 2em;
-}
-
-#url-markdown-file {
-  width: 100%;
-  height: 2em;
-}
-
-.sidebar--collapsed {
-  width: var(--sidebar-icon-width);
-  overflow-x: hidden;
-}
-
-.body-pad {
-  padding: 0 2.5em 0 calc(var(--sidebar-icon-width) + 2.5em) !important;
-}
-
-.download-toggle {
-  width: 100%;
-  height: 1.5em;
-  position: relative;
-  background: white;
-  border: 1px solid rgba(0, 0, 0, 0.75);
-  border-radius: 25px;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.download-toggle button {
-  text-align: center;
-  line-height: 50px;
-  color: black;
-  flex: 1;
-  margin: 0;
-  border: none;
-  background: white;
-  border-radius: 25px 0 0 25px;
-}
-
-.download-toggle .upload-method {
-  color: white;
-  background: #007bff;
-}
-
-.download-toggle button:last-child {
-  border-radius: 0 25px 25px 0;
-}
-
-.github-link {
-  margin-top: auto;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1px;
-  box-sizing: border-box;
-  background-color: var(--sidebar-bg-color);
-}
-
-.github-link .icon {
-  width: 30px;
-  height: 30px;
-}
-
-.github-link a {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  color: rgba(0, 0, 0, 0.75);
-}
-
-.software-version {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1px;
-  box-sizing: border-box;
-  background-color: var(--sidebar-bg-color);
-}
-
-.software-version span {
-  display: flex;
-  color: rgba(44, 44, 44, 0.75);
-  font-size: small;
-}
+/* CSS for components on the website including the loading spinner and alerts  */
 
 /* Alert Styles */
 .alert {
-  padding: 15px;
+  padding: 10px;
   margin-bottom: 20px;
   border: 1px solid transparent;
   border-radius: 4px;
   position: relative;
   padding-right: 35px;
+  font-size: 14px;
 }
 
 .alert.error {
@@ -307,7 +47,7 @@ nav .sidebar-toggle:hover {
 .alert-close {
   position: absolute;
   right: 10px;
-  top: 15px;
+  top: 10px;
   cursor: pointer;
 }
 

v0/css/layout.css

@@ -1,29 +1,52 @@
 /* CSS for the application layout and resizing  */
 
-.main {
-  margin-top: 3em;
+.app-navbar {
+  position: fixed;
+  top: 0px;
+  left: 0;
+  z-index: var(--z-index-nav);
+  width: 100%;
+  pointer-events: none;
+}
+
+.app-sidebar {
+  position: fixed;
+  top: 0;
+  width: var(--sidebar-width);
+  height: 100vh;
+  background-color: var(--sidebar-bg-color);
+  z-index: 100;
+  overflow: scroll;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 10px;
   padding: 0 2.5em 0 calc(var(--sidebar-width) + 2.5em);
-  transition: 0.5s;
+  min-height: 100vh;
 }
 
-.chart {
-  max-width: 1200px;
-  min-width: 300px;
+.app-main.sidebar-collapsed {
+  padding: 0 4em 0 calc(var(--sidebar-icon-width) + 4em);
 }
 
-.protein {
-  max-width: 1080px;
-  min-width: 300px;
-  min-height: 300px;
-  max-height: 600px;
-  border-radius: 10px;
+.app-main .container {
+  max-width: calc(var(--layout-max-width) - var(--sidebar-width));
+  min-width: var(--layout-min-width);
+  width: 100%;
+  box-sizing: border-box;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.app-main.sidebar-collapsed .container {
+  max-width: calc(var(--layout-max-width) - var(--sidebar-icon-width));
 }
 
-@media (min-width: 1400px) {
-  .body-pad {
-    padding: 0 4em 0 calc(var(--sidebar-icon-width) + 4em) !important;
-  }
-  .main {
-    padding: 0 4em 0 calc(var(--sidebar-width) + 4em);
-  }
+.protein {
+  border-radius: 10px;
 }

v0/css/main.css

@@ -4,4 +4,6 @@
 @import "./base.css";
 @import "./layout.css";
 @import "./components.css";
+@import "./navbar.css";
+@import "./sidebar.css";
 @import "./visualization.css";