gouki510/MechInterp_ja
0
1/* style.css */2/* Define colors */3:root {4 --distill-gray: rgb(107, 114, 128);5 --distill-gray-light: rgb(185, 185, 185);6 --distill-gray-lighter: rgb(228, 228, 228);7 --distill-gray-lightest: rgb(245, 245, 245);8 --distill-blue: #007BFF;9}10 11/* Container for the controls */12[id^="plot-"] {13 display: flex;14 flex-direction: column;15 align-items: center;16 gap: 15px; /* Adjust the gap between controls as needed */17}18[id^="plot-"] figure {19 margin-bottom: 0px;20 margin-top: 0px;21 padding: 0px;22}23.plotly_caption {24 font-style: italic;25 margin-top: 10px;26}27 28.plotly_controls {29 display: flex;30 flex-wrap: wrap;31 flex-direction: row;32 justify-content: center;33 align-items: flex-start;34 gap: 30px;35}36 37 38.plotly_input_container {39 display: flex;40 align-items: center;41 flex-direction: column;42 gap: 10px;43}44 45/* Style for the select dropdown */46.plotly_input_container > select {47 padding: 2px 4px;48 /* border: 1px solid #ccc; */49 line-height: 1.5em;50 text-align: center;51 border-radius: 4px;52 font-size: 12px;53 background-color: var(--distill-gray-lightest);54 outline: none;55}56 57/* Style for the range input */58 59.plotly_slider {60 display: flex;61 align-items: center;62 gap: 10px;63}64 65.plotly_slider > input[type="range"] {66 -webkit-appearance: none;67 height: 2px;68 background: var(--distill-gray-light);69 border-radius: 5px;70 outline: none;71}72 73.plotly_slider > span {74 font-size: 14px;75 line-height: 1.6em;76 min-width: 16px;77}78 79.plotly_slider > input[type="range"]::-webkit-slider-thumb {80 -webkit-appearance: none;81 appearance: none;82 width: 18px;83 height: 18px;84 border-radius: 50%;85 background: var(--distill-blue);86 cursor: pointer;87}88 89.plotly_slider > input[type="range"]::-moz-range-thumb {90 width: 18px;91 height: 18px;92 border-radius: 50%;93 background: var(--distill-blue);94 cursor: pointer;95}96 97/* Style for the labels */98.plotly_input_container > label {99 font-size: 14px;100 font-weight: bold;101}102 103.main-plot-container {104 margin-top: 21px;105 margin-bottom: 35px;106}107 108.main-plot-container > figure {109 display: block !important;110 /* Let this be handled by graph-container */111 margin-bottom: 0px;112 margin-top: 0px;113}114.main-plot-container > div {115 display: none !important;116}117 118 119@media (min-width: 768px) {120 .main-plot-container > figure {121 display: none !important;122 }123 .main-plot-container > div {124 display: flex !important;125 }126}127 128d-byline .byline {129 grid-template-columns: 1fr;130 grid-column: text;131 font-size: 0.9rem;132 line-height: 1.8em;133}134 135@media (min-width: 768px) {136 d-byline .byline {137 grid-template-columns: 5fr 1fr 1fr;138 }139}140 141#title-plot {142 margin-top: 0px;143 margin-bottom: 0px;144}145 146d-contents > nav a.active {147 text-decoration: underline;148}149 150@media (max-width: 1199px) {151 d-contents {152 display: none;153 background: white;154 justify-self: start;155 align-self: start;156 padding-bottom: 0.5em;157 margin-bottom: 1em;158 padding-left: 0.25em;159 border-bottom: 1px solid rgba(0, 0, 0, 0.1);160 border-bottom-width: 1px;161 border-bottom-style: solid;162 border-bottom-color: rgba(0, 0, 0, 0.1);163 overflow-y: scroll;164 height: calc(100vh - 40px);165 scrollbar-width: none;166 z-index: -100;167 }168}169 170d-contents a:hover {171 border-bottom: none;172}173 174toc-title {175 font-weight: bold;176 font-size: 1.2em;177 color: #333;178}179 180toggle-icon {181 transition: transform 0.3s;182}183 184toggle-icon.collapsed {185 transform: rotate(90deg);186}187 188.toc-content {189 margin-top: 15px;190 overflow: hidden;191 /* max-height: 1000px; */192 transition: max-height 0.3s ease-out;193}194 195.toc-content.collapsed {196 max-height: 0;197 margin-top: 0;198}199 200@media (min-width: 1200px) {201 d-article {202 /* Ensure d-article does not prevent sticky positioning */203 overflow: visible;204 }205 206 d-contents {207 align-self: start;208 background: white;209 grid-column-start: 1 !important;210 grid-column-end: 4 !important;211 grid-row: auto / span 6;212 justify-self: end;213 margin-top: 0em;214 padding-right: 3em;215 padding-left: 2em;216 /* border-right: 1px solid rgba(0, 0, 0, 0.1);217 border-right-width: 1px;218 border-right-style: solid;219 border-right-color: rgba(0, 0, 0, 0.1); */220 position: -webkit-sticky; /* For Safari */221 position: sticky;222 top: 10px; /* Adjust this value if needed */223 overflow-y: auto;224 height: calc(100vh - 40px);225 scrollbar-width: none;226 transition: max-height 0.3s ease-out;227 z-index: -100;228 }229}230 231d-contents nav h3 {232 margin-top: 0;233 margin-bottom: 1em;234}235 236d-contents nav div div {237 color: rgba(0, 0, 0, 0.8);238 font-weight: bold;239}240 241d-contents nav a {242 color: rgba(0, 0, 0, 0.8);243 border-bottom: none;244 text-decoration: none;245}246 247d-contents li {248 list-style-type: none;249}250 251d-contents ul, d-article d-contents ul {252 padding-left: 1em;253}254 255d-contents nav ul li {256 margin-bottom: .25em;257}258 259d-contents nav a:hover {260 text-decoration: underline solid rgba(0, 0, 0, 0.6);261}262 263d-contents nav ul {264 margin-top: 0;265 margin-bottom: 6px;266}267 268 269d-contents nav > div {270 display: block;271 outline: none;272 margin-bottom: 0.5em;273}274 275d-contents nav > div > a {276 font-size: 13px;277 font-weight: 600;278}279 280d-article aside {281 margin-bottom: 1em;282}283 284d-article img {285 max-width: 100%;286}287 288@media (min-width: 768px) {289 d-article aside {290 margin-bottom: 0;291 }292}293 294d-contents nav > div > a:hover,295d-contents nav > ul > li > a:hover {296 text-decoration: none;297}298 299.note-box {300 background-color: #f6f8fa;301 border-left: 4px solid #444444;302 padding: 1rem;303 margin: 1rem 0; /* Keep this modest margin */304 border-radius: 6px;305 /* Add this to ensure the box only takes up needed space */306 display: inline-block;307 width: 100%;308}309 310.note-box-title {311 margin: 0;312 color: #444444;313 font-weight: 600;314 font-size: 1em;315}316 317.note-box-content {318 margin-top: 0.5rem;319 margin-bottom: 0; /* Ensure no bottom margin */320 color: #24292f;321 font-size: 0.9em;322 line-height: 1.5em;323}324 325/* For dark mode support */326@media (prefers-color-scheme: dark) {327 .note-box {328 background-color: #1c1c1c;329 border-left-color: #888888;330 }331 .note-box-title {332 color: #888888;333 }334 .note-box-content {335 color: #d4d4d4;336 }337}338 339d-article {340 font-size: 1.0em;341}342 343.figure-legend {344 font-size: 0.9em;345 font-style: italic;346 color: var(--distill-gray);347 line-height: 1.5em;348}349 350d-code {351 font-size: 12px;352}353 354.large-image-background {355 width: 100vw;356 padding-top: 10px;357 padding-bottom: 10px;358 margin-left: calc(-50vw + 50%);359 margin-right: calc(-50vw + 50%);360 background: white;361 height: fit-content; /* This will make it match the image height */362 display: flex;363 justify-content: center; /* This will center your image */364}365 366.large-image-background-transparent {367 /* width: 100vw; */368 padding-top: 10px;369 padding-bottom: 10px;370 /* margin-left: calc(-50vw + 50%); */371 margin-left:-100px;372 margin-right: -100px;373 /* margin-right: calc(-50vw + 50%); */374 /* background: white; */375 height: fit-content; /* This will make it match the image height */376 display: flex;377 justify-content: center; /* This will center your image */378}379 380.boxed-image {381 padding: 0.5rem;382 background: white;383 border-radius: 12px;384 border: 1px solid #e5e7eb;385 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);386}387 388d-article li {389 margin-bottom: 0.0em;390}391 392d-article ul ul {393 margin-bottom: 0.0em;394}395 396d-article ol ol {397 margin-bottom: 0.0em;398}399 400d-article hr {401 grid-column: text;402}403 404/* Memory visualization */405#graph-all {406 min-width: 500px;407 margin-right: 10px;408 margin-bottom: 2rem;409 padding: 0.5rem;410 background: #f9fafb;411 border-radius: 12px;412 border: 1px solid #e5e7eb;413 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);414}415 416 417/* Main container styles */418#controls {419 max-width: 1200px;420 /* margin: 2rem auto; */421 margin-bottom: 2rem;422 margin-left: 10px;423 padding: 0.6rem;424 background: #f9fafb;425 border-radius: 12px;426 border: 1px solid #e5e7eb;427 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);428}429 430/* Grid layout */431#controls {432 display: grid;433 grid-template-columns: 1fr 1fr;434 /* gap: 2rem; */435}436 437/* Cell styles */438.cell {439 margin-bottom: 0.2rem;440}441 442/* Label styles */443label {444 display: block;445 /* margin-bottom: 0.5rem; */446 font-size: 0.8rem;447 font-weight: 500;448 color: #374151;449}450 451/* Input container for range + number combination */452.input-container {453 display: flex;454 gap: 1rem;455 align-items: center;456}457 458/* Range input styling */459input[type="range"] {460 flex: 1;461 height: 6px;462 background: #e5e7eb;463 border-radius: 3px;464 appearance: none;465 outline: none;466}467 468input[type="range"]::-webkit-slider-thumb {469 appearance: none;470 width: 16px;471 height: 16px;472 background: #3b82f6;473 border-radius: 50%;474 cursor: pointer;475 transition: background 0.15s ease;476}477 478input[type="range"]::-webkit-slider-thumb:hover {479 background: #2563eb;480}481 482/* Number input styling */483input[type="number"] {484 width: 80px;485 padding: 0.5rem;486 border: 1px solid #e5e7eb;487 border-radius: 6px;488 font-size: 0.9rem;489 color: #374151;490}491 492/* Select styling */493select {494 width: 100%;495 padding: 0.5rem;496 border: 1px solid #e5e7eb;497 border-radius: 6px;498 background: white;499 font-size: 0.9rem;500 color: #374151;501 cursor: pointer;502}503 504/* Checkbox styling */505input[type="checkbox"] {506 width: 1.2rem;507 height: 1.2rem;508 margin-right: 0.5rem;509 border: 2px solid #e5e7eb;510 border-radius: 4px;511 cursor: pointer;512}513 514/* Column specific styles */515.column-1 {516 padding-right: 0.5rem;517}518 519.column-2 {520 padding-left: 0.5rem;521}522 523/* Checkbox container */524.checkbox-container {525 display: flex;526 align-items: center;527 margin-bottom: 1rem;528}529 530/* Memory visualization styles */531.memory-block {532 background: #fff;533 border-radius: 8px;534 padding: 1rem;535 margin-bottom: 1rem;536 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);537}538 539.memory-title {540 font-size: 1.1rem;541 font-weight: 500;542 color: #374151;543 margin-bottom: 0.5rem;544}545 546.memory-value {547 font-size: 1.5rem;548 font-weight: 600;549 color: #3b82f6;550}551 552/* Responsive adjustments */553@media (max-width: 768px) {554 #controls {555 grid-template-columns: 1fr;556 padding: 1rem;557 }558 559 .column-1, .column-2 {560 padding: 0;561 }562}563 564/* Hover states and transitions */565input:hover, select:hover {566 border-color: #3b82f6;567}568 569input:focus, select:focus {570 border-color: #2563eb;571 outline: none;572 box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);573}574 575/* Add smooth transitions */576input, select, button {577 transition: all 0.15s ease;578}579 580/* Preset dropdown special styling */581select[name="presets"] {582 background-color: #f3f4f6;583 font-weight: 500;584}585 586/* Memory graph enhancements */587.activation-memory {588 background: #dbeafe;589 padding: 1rem;590 border-radius: 8px;591 margin-bottom: 1rem;592}593 594.gradient-memory {595 background: #ede9fe;596 padding: 1rem;597 border-radius: 8px;598}599 600