github-deploy-action-workers2

workers2/style.css

@@ -303,12 +303,37 @@ body {
   user-select: none;
 }
 
+:root {
+  scrollbar-color: #dac898 #0000;
+  scrollbar-width: thin;
+}
+
+:root::-webkit-scrollbar {
+  width: 0.8em;
+}
+:root::-webkit-scrollbar:horizontal {
+  height: 0.8em;
+}
+:root::-webkit-scrollbar-track {
+  background-color: #fdf6e300;
+}
+:root::-webkit-scrollbar-thumb {
+  background-color: #e1d1a6;
+  border-radius: 1em;
+  border: 0.2em solid #fdf6e3;
+}
+/* set button(top and bottom of the scrollbar) */
+:root::-webkit-scrollbar-button,
+:root::-webkit-scrollbar-corner {
+  display: none;
+}
+
+
 #main {
   grid-row: 2;
   grid-column: 1 / span 1;
   overflow: auto;
-  scrollbar-color: #dac898 #0000;
-  scrollbar-width: thin;
+
 }
 
 #main.Scratch,
@@ -329,39 +354,18 @@ body {
   justify-content: space-between;
   gap: 1.2em;
 }
-#main.Scratch .cell-container,
-#main.Documentation .cell-container {
+#main.Scratch .cell,
+#main.Documentation .cell {
   min-width: 30em;
 }
-#main.Exercises .cell-container {
+#main.Exercises .cell {
   width: auto;
 }
 
-#main::-webkit-scrollbar {
-  width: 0.8em;
-}
-::-webkit-scrollbar:horizontal {
-  height: 0.8em;
-}
-#main::-webkit-scrollbar-track {
-  background-color: #fdf6e300;
-}
-#main::-webkit-scrollbar-thumb {
-  background-color: #e1d1a6;
-  border-radius: 1em;
-  border: 0.2em solid #fdf6e3;
-}
-
 #main .code-container {
   cursor: text;
 }
 
-/* set button(top and bottom of the scrollbar) */
-#main::-webkit-scrollbar-button,
-#main::-webkit-scrollbar-corner {
-  display: none;
-}
-
 select {
   cursor: pointer;
 }
@@ -678,13 +682,13 @@ select {
   /*white-space: nowrap;*/
 }
 
-.cell-container {
+.cell {
   width: fit-content;
   border-radius: 0.4em;
   border-left: 2px solid var(--top_bar_icon_fill);
 }
 
-.cell-container.selected {
+.cell.selected {
   border-left: 2px solid var(--cell-selected-accent);
   background-color: #fffcf3;
 }
@@ -1460,7 +1464,7 @@ svg.tile-selected {
   gap: 1em;
   justify-content: space-between;
   align-items: stretch;
-  background-color: #fbecaa;
+  background-color: #f9e8bb;
   outline: 0.6px solid #c7b480;
 }
 
@@ -1521,6 +1525,9 @@ svg.tile-selected {
   grid-row: 2 / span 1;
   grid-column: 2 / span 1;
   border-left: 0.6px solid #c7b480;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  width: max-content;
 }
 
 .explain-this {
@@ -1553,29 +1560,19 @@ svg.tile-selected {
   padding-top: 0.75em;
 }
 
-.explain-this .example .code-text {
-  position: relative;
-}
-
-.explain-this .example .ex-result {
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
-  padding-top: 5px;
+.explain-this .example .cell {
+  width: auto;
+  background-color: #f7ebd3;
 }
 
-.explain-this .code-container {
-  margin-bottom: 0em;
+.explain-this .example .cell-result {
+  background-color: #ede0c6;
 }
 
 .explain-this .explanation {
   white-space: normal;
 }
 
-.explain-this .code-text {
-  position: relative;
-}
-
 .specificity-options-menu {
   transform-origin: top;
   transform: scaleY(0);
@@ -1601,21 +1598,17 @@ svg.tile-selected {
 
 .explain-this .top-bar .close {
   cursor: pointer;
-  font-family: "Source Code Pro";
   color: var(--top_bar_icon_fill);
-  width: 1.2em;
-  height: 1.2em;
-  border-radius: 2em;
   display: flex;
-  align-items: end;
-  justify-content: center;
   margin-left: auto;
+  align-items: flex-start;
 }
 
 .explain-this .top-bar .close:hover {
-  animation: wobble 0.4s ease 0s 1 normal none;
-  color: var(--light-page-color);
-  background-color: #c7b480;
+  color: #f55c27;
+  text-shadow: 0.3px 0.3px 0px black;
+  border-radius: 0.2em;
+  scale: 1.8;
 }
 
 .explain-this .section {
@@ -1826,7 +1819,7 @@ svg.expandable path {
   border-left: 1px solid var(--top_bar_icon_fill);
 }
 
-.cell-item.cell-result:has(.timeout),
+.cell-item.cell-result:has(.fail),
 .cell-item.cell-result:has(.exception) {
   background-color: #ffa2a2;
 }