diff --git a/apps/Info.html b/apps/Info.html index 7f964f635..2efa0594a 100644 --- a/apps/Info.html +++ b/apps/Info.html @@ -38,6 +38,7 @@ + @@ -65,6 +66,21 @@
  • Signup
    • + + +
  • + +
    • + + + diff --git a/apps/dev-workbench/workbench.css b/apps/dev-workbench/workbench.css index ef82ffc0f..ac648abab 100644 --- a/apps/dev-workbench/workbench.css +++ b/apps/dev-workbench/workbench.css @@ -67,3 +67,97 @@ margin-left: 0 !important; } } + +/* Dark Mode Options */ + +.darkmode-btn{ + background-color: transparent; + box-shadow: inset 0 0 0 2px rgba(144, 144, 144, 0.25); + color: #4d5968 !important; + letter-spacing: 0.05em; + text-transform: uppercase; + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + border-radius: 5px; + border: 0; + cursor: pointer; + display: inline-block; + font-size: 0.8em; + font-weight: 700; + line-height: 3.35em; + padding: 0 2em; + text-align: center; + text-decoration: none; + white-space: nowrap; + + +} + + +/* Dark mode hover effect */ +.dark-mode .darkmode-btn:hover { + background-color: transparent !important; /* No background in dark mode hover */ + color: #ccc; /* Optional: Light gray text on hover in dark mode */ + border-color: #ccc; /* Optional: Adjust border color in dark mode */ + transform: scale(1.05); /* Keep the hover scaling effect */ + box-shadow: none !important; /* Ensure no shadow in dark mode */ +} + +/* Dark Mode Styles */ +.dark-mode { + background-color: black; +} + +.dark-mode ul.stepper li a .circle { + display: inline-block; + width: 1.75rem; + height: 1.75rem; + margin-right: .5rem; + line-height: 1.7rem; + color: #fff !important; + text-align: center; + background: grey !important; + border-radius: 50%; +} + +.dark-mode .stepper-vertical li:not(:last-child):after { + background-color: grey !important; +} + +.dark-mode .step-content.grey.grey.lighten-3{ + color: white !important; + background-color: #212529 !important; +} + + +.dark-mode h1, +.dark-mode h2, +.dark-mode h3, +.dark-mode span, +.dark-mode a{ + color: white !important; /* Force text to be white */ +} + + +@media screen and (max-width: 736px) { + .dark-mode .posts .post .image { + width: 30%; + min-width: 6em; + } + + .dark-mode .posts .post .content { + width: 70%; + } +} + +@media screen and (max-width: 480px) { + .dark-mode .posts .post .image { + margin-right: 1.5em; + } +} diff --git a/apps/dev-workbench/workbench.html b/apps/dev-workbench/workbench.html index 2cd832a60..c93ac1fe0 100644 --- a/apps/dev-workbench/workbench.html +++ b/apps/dev-workbench/workbench.html @@ -95,6 +95,23 @@ aria-expanded="false" >Options + + +
  • + +
    • + + + + +
    - + @@ -49,6 +49,20 @@
  • Feedback
    • + + +
  • + +
    • + +
    @@ -69,8 +83,6 @@

    caMicroscope

    - - @@ -133,4 +150,4 @@

    User Signup

      - \ No newline at end of file + diff --git a/apps/table.css b/apps/table.css index d11cd8d75..c939457a1 100644 --- a/apps/table.css +++ b/apps/table.css @@ -6,6 +6,8 @@ body { font-family: Arial, Helvetica, sans-serif; } + + footer { position: relative; bottom: 0; @@ -243,7 +245,7 @@ nav li:not(.active):hover { td { text-align: center; /* or left, right, justify, etc. */ -======= +} .d-md-inline-flex{ display: flex; @@ -259,5 +261,153 @@ td { line-height: 1; font-size: 24px; +}/* Mobile View: Adjust layout for screens <= 500px */ +@media (max-width: 500px) { + .d-md-inline-flex { + display: flex; /* Flexbox for layout */ + flex-wrap: wrap; /* Allow wrapping */ + justify-content: auto; /* Center align all buttons */ + gap: 10px; /* Add spacing between buttons */ + } + + .d-md-inline-flex > div { + flex: 1 1 calc(50% - 10px); /* Each child takes 50% of the row width minus spacing */ + margin: 5px; /* Add spacing around items */ + text-align: center; /* Center content within each item */ + } + + .btn-group { + display: flex; /* Ensure buttons in groups stay together */ + flex-wrap: nowrap; /* Prevent wrapping within the group */ + justify-content: center; /* Center align dropdown buttons */ + + } + + .btn-group .btn { + flex: 1; /* Ensure equal width for buttons within the group */ + } + + .btn { + width: 100%; /* Buttons take full width of their container */ + text-align: center; /* Center-align text within buttons */ + } +} + + + +/* Dark Mode Options */ + +.darkmode-btn{ + background-color: transparent; + box-shadow: inset 0 0 0 2px rgba(144, 144, 144, 0.25); + color: #4d5968 !important; + letter-spacing: 0.05em; + text-transform: uppercase; + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + border-radius: 5px; + border: 0; + cursor: pointer; + display: inline-block; + font-size: 0.8em; + font-weight: 700; + line-height: 3.35em; + padding: 0 2em; + text-align: center; + text-decoration: none; + white-space: nowrap; + + +} + +/* Darkmode button styling */ +.darkmode-btn { + background-color: transparent; /* Override parent styles */ + color: #bcbbbb; + transition: all 0.3s ease; +} + + +/* Dark mode hover effect */ +.dark-mode .darkmode-btn:hover { + background-color: transparent !important; /* No background in dark mode hover */ + color: #ccc; /* Optional: Light gray text on hover in dark mode */ + border-color: #ccc; /* Optional: Adjust border color in dark mode */ + transform: scale(1.05); /* Keep the hover scaling effect */ + box-shadow: none !important; /* Ensure no shadow in dark mode */ +} + + + +/* Dark mode hover effect */ +.dark-mode .darkmode-btn:hover { + background-color: transparent !important; /* No background in dark mode hover */ + color: #ccc; /* Optional: Light gray text on hover in dark mode */ + border-color: #ccc; /* Optional: Adjust border color in dark mode */ + transform: scale(1.05); /* Keep the hover scaling effect */ + box-shadow: none !important; /* Ensure no shadow in dark mode */ +} + +/* Dark Mode Styles */ +.dark-mode { + background-color: black; + color: white; +} + +.dark-mode .page-container{ + background-color: black !important; +} + +.dark-mode .header.text-center.text-white.bg-info.p-4 { + background-color:#17a2b8 !important; +} + +.dark-mode .nav-item.active.link{ + color:black !important; } +.dark-mode .form-control { + background-color: #a4a6a837 ; + color: white !important; +} + + +.dark-mode .bg-light{ + background-color: #343a405c !important; +} + +.dark-mode .has-search .form-control-feedback{ + color: #aaa !important; +} + +.dark-mode h1, +.dark-mode h2, +.dark-mode h3, +.dark-mode p, +.dark-mode span{ + color: white !important; /* Force text to be white */ +} + + +@media screen and (max-width: 736px) { + .dark-mode .posts .post .image { + width: 30%; + min-width: 6em; + } + + .dark-mode .posts .post .content { + width: 70%; + } +} + +@media screen and (max-width: 480px) { + .dark-mode .posts .post .image { + margin-right: 1.5em; + } +} diff --git a/apps/table.html b/apps/table.html index ae8075125..722300ae3 100644 --- a/apps/table.html +++ b/apps/table.html @@ -70,6 +70,18 @@
  • Signup
    • + +
  • + +
    • +