split css files

update flipswitch design

Dockerfile

@@ -18,6 +18,8 @@ COPY md/ /app/md
 COPY assets/ /app/assets
 # Copy the middlewares folder to app directory.
 COPY middlewares/ /app/middlewares
+# Copy the css folder to app directory.
+COPY css/ /app/css
 
 # Copy package.json app directory.
 COPY package.json /app

css/body.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: Inter;
+  text-rendering: optimizeLegibility;
+  font-size: 16px;
+}
+
+#wrapper {
+  display: flex;
+  flex-direction: row;
+  padding-top: 50px;
+}

css/buttons.css

@@ -0,0 +1,143 @@
+.sl-button {
+  appearance: none;
+  background-color: #FAFBFC;
+  border: 1px solid rgba(27, 31, 35, 0.15);
+  border-radius: 6px;
+  box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
+  box-sizing: border-box;
+  color: #24292E;
+  cursor: pointer;
+  display: inline-block;
+  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  list-style: none;
+  padding: 6px;
+  position: relative;
+  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  vertical-align: middle;
+  white-space: nowrap;
+  word-wrap: break-word;
+}
+
+.sl-button:hover {
+  background-color: #F3F4F6;
+  text-decoration: none;
+  transition-duration: 0.1s;
+}
+
+.sl-button:disabled {
+  background-color: #FAFBFC;
+  border-color: rgba(27, 31, 35, 0.15);
+  color: #959DA5;
+  cursor: default;
+}
+
+.sl-button:active {
+  background-color: #EDEFF2;
+  box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
+  transition: none 0s;
+}
+
+.sl-button:focus {
+  outline: 1px transparent;
+}
+
+.sl-button:before {
+  display: none;
+}
+
+.sl-button:-webkit-details-marker {
+  display: none;
+}
+
+.sl-button-accent {
+  appearance: none;
+  background-color: #e7f0f9;
+  border: 1px solid rgba(27, 31, 35, 0.15);
+  border-radius: 6px;
+  box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
+  box-sizing: border-box;
+  color: #24292E;
+  cursor: pointer;
+  display: inline-block;
+  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  list-style: none;
+  padding: 6px;
+  position: relative;
+  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  vertical-align: middle;
+  white-space: nowrap;
+  word-wrap: break-word;
+}
+
+.sl-button-accent:hover {
+  background-color: #e0e6f3;
+  text-decoration: none;
+  transition-duration: 0.1s;
+}
+
+.sl-button-accent:disabled {
+  background-color: #e6f0f9;
+  border-color: rgba(27, 31, 35, 0.15);
+  color: #959DA5;
+  cursor: default;
+}
+
+.sl-button-accent:active {
+  background-color: #d6dfeb;
+  box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
+  transition: none 0s;
+}
+
+.sl-button-accent:focus {
+  outline: 1px transparent;
+}
+
+.sl-button-accent:before {
+  display: none;
+}
+
+.sl-button-accent:-webkit-details-marker {
+  display: none;
+}
+
+.button-group-right {
+  height: 32px;
+  margin: 0px;
+  padding-top: 6px;
+  margin-left: -4px;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+.button-group-middle {
+  height: 32px;
+  margin: 0px;
+  padding-top: 6px;
+  margin-right: -4px;
+  margin-left: -4px;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+.button-group-left {
+  height: 32px;
+  margin: 0px;
+  padding-top: 6px;
+  margin-right: -4px;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}

css/callouts.css

@@ -0,0 +1,39 @@
+.obsidian-callout {
+  line-height: 20.8px;
+  padding: 12px;
+  padding-left: 25px;
+  padding-right: 25px;
+  border-radius: 5px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.obsidian-callout-icon {
+  width: 18px;
+  height: 18px;
+  line-height: 20.8px;
+  margin-right: 2px;
+}
+
+.obsidian-callout-title {
+  line-height: 20.8px;
+  position: relative;
+  top: -2px;
+  font-size: 16px;
+  font-weight: 600;
+  display: inline-block;
+}
+
+.obsidian-callout-content {
+  vertical-align: middle;
+  padding-top: 0px;
+}
+
+.collapsable {
+  vertical-align: middle;
+  opacity: 0;
+  padding-top: 0px;
+  max-height: 0;
+  overflow: hidden;
+  transition: padding 0.3s ease, max-height 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
+}

css/fixes.css

@@ -0,0 +1,30 @@
+.highlight {
+  background-color: #dfeffc;
+}
+
+.dark-mode{
+  background-color: #1c1c1c !important;
+  color: #ffffff;
+}
+.dark-mode.width-reveal, .dark-mode.width-reveal .sidebar-menu a.dark-mode {
+  background-color: #2d2d2df0 !important;
+}
+a.dark-mode.highlight {
+  background-color: #004b88 !important;
+}
+
+/* Fix autoscroller. */
+#markdown-content::before {
+  content: "";
+  display: block;
+  height: 50px;
+  /* Equivalent to your header's height */
+  margin-top: -50px;
+  /* Negative equivalent to your header's height */
+  visibility: hidden;
+}
+
+.topdown-menu-chevron {
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out, transform 0.3s ease;
+}

css/flipswitch.css

@@ -0,0 +1,99 @@
+.flipswitch {
+  position: relative;
+  width: 80px;
+}
+
+.flipswitch input[type=checkbox] {
+  display: none;
+}
+
+.flipswitch-label {
+  display: block;
+  overflow: hidden;
+  cursor: pointer;
+  border: 1px solid #999999;
+  border-radius: 8px;
+}
+
+.flipswitch-inner {
+  width: 200%;
+  margin-left: -100%;
+  transition: margin 0.3s ease-in 0s;
+}
+
+.flipswitch-inner:before, .flipswitch-inner:after {
+  float: left;
+  width: 50%;
+  height: 20px;
+  padding: 0;
+  line-height: 12px;
+  font-size: 14px;
+  color: #fffffff0;
+  font-family: Consolas, monospace;
+  font-weight: bold;
+  box-sizing: border-box;
+}
+
+.flipswitch-inner:before {
+  content: "student";
+  padding-left: 8px;
+  padding-right: 20px;
+  padding-top: 3px;
+  background-color: #256799f0;
+  color: #FFFFFF;
+}
+
+.flipswitch-inner:after {
+  content: "teacher";
+  padding-right: 8px;
+  padding-top: 3px;
+  background-color: #ff5050f0;
+  color: #ffffff;
+  text-align: right;
+}
+
+.flipswitch-switch {
+  width: 15px;
+  margin: -3.5px;
+  background: #FAFBFCf0;
+  border: 1px solid #999999f0;
+  border-radius: 8px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 75px;
+  transition: all 0.3s ease-in 0s;
+}
+
+.flipswitch-cb:checked + .flipswitch-label .flipswitch-inner {
+  margin-left: 0;
+}
+
+.flipswitch-cb:checked + .flipswitch-label .flipswitch-switch {
+  right: 0;
+}
+
+.menu.flipswitch {
+  width: 180px;
+}
+.menu.flipswitch-inner:before {
+  background-color: #256799;
+}
+.menu.flipswitch-inner:after {
+  background-color: #9d4444;
+}
+.menu.flipswitch-switch {
+  right: 170px;
+}
+.answers.flipswitch-inner:before {
+  content: "no answers";
+}
+.answers.flipswitch-inner:after {
+  content: "answers";
+}
+.exam.flipswitch-inner:before {
+  content: "show practice";
+}
+.exam.flipswitch-inner:after {
+  content: "show exam";
+}

css/main.css

@@ -0,0 +1,10 @@
+@import "body.css";
+@import "topbar.css";
+@import "sidebar.css";
+@import "markdown.css";
+@import "callouts.css";
+@import "movement.css";
+@import "flipswitch.css";
+@import "buttons.css";
+@import "fixes.css";
+@import "media.css";