html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* Need to fix background size */
body {
margin: 0;
padding: 0;
overflow-x: auto;
overflow-y: auto;
background-color: #d6d6d6;
min-width: 1000px;
/* opacity: 0; /* Initially hide the page content */
/* transition: opacity 0.1s ease-in-out; */
/* Add a smooth fade-in effect */
/* font-size: 16px; */
/* tab-size: 4; */
}
p {
font-size: 1.2rem;
line-height: 1.3;
}
.hrnext {
border: 2px solid #000;
}
.hitEnter, .clickEnter {
color: #333333;
padding-top: 5px;
}
.command, .commands {
font-weight: 800;
}
.r-code, .R-code, .rCode, .RCode {
background-color: rgb(68, 68, 68);
border: 1px solid black;
border-radius: 5px;
color: rgb(234, 233, 233);
padding-left: 15px;
padding-right: 5px;
padding-top: 15px;
padding-bottom: 15px;
text-align: left;
font-size: 1.0rem;
line-height: 1.2rem;
font-family: Courier;
}
.varname {
color: #1c0aa9;
font-size: 1.0rem;
font-weight: 00;
line-height: 1.1rem;
font-family: Courier;
}
/* .workplan, .outcomes */
.list {
padding-top: 5px;
padding-left: 100px;
padding-right: 50px;
padding-bottom: 10px;
margin-bottom: 0px;
}
.section {
display: block;
width: 100%;
}
/* ************************ */
/* ********* TOP MENU ********** */
/* ************************ */
#menuContainer {
height: 70px;
background-color: #d6d6d6;
top: 0;
position: sticky;
z-index: 10000000000000;
}
.scaffolding {
display: flex;
justify-content: space-between;
position: relative;
height: 30px;
width: 100px;
/* background-color: #90abfb; */
transform: perspective(200px) rotateY(65deg);
}
.pole {
background-color: #000;
width: 2px;
height: 100%;
}
.platform {
background-color: #000;
height: 2px;
width: 100%;
position: absolute;
left: 0;
}
.platform:nth-child(5) { top: 0%; }
.platform:nth-child(6) { top: 25%; }
.platform:nth-child(7) { top: 50%; }
.platform:nth-child(8) { top: 75%; }
.menuLinksContainerLeft {
position: absolute;
top: 5px;
left: 0;
display: flex;
justify-content: flex-end;
}
.icon {
display: flex;
}
.menuLinksContainerRight {
position: absolute;
top: 10px;
right: 0;
display: flex;
justify-content: flex-end;
}
.menuLinksRight {
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 1rem;
text-decoration: none;
background-color: #d5d5d5;
border-radius: 8px;
padding: 8px;
color: black;
margin: 10px;
}
.menuLinksLeft {
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 1rem;
text-decoration: none;
background-color: #d5d5d5;
border-radius: 8px;
padding: 8px;
color: black;
margin: 10px;
}
#goToHome {
}
#goToCatalog {
}
/* ************************ */
/* ********* Home page ********** */
/* ************************ */
.homeContainer {
/* position: absolute; */
/* margin-top: 30px; */
/* background-color: #eaeaea; */
/* left: 10px; */
width: 100%;
border-radius: 10px;
border: 0px solid #a7a7a8;
/* margin-left: 10px; */
overflow-y: auto;
padding: 5px;
top: 65px;
position: static;
}
.homeTitle {
font-size:1.6rem; margin:0; font-weight:600; color:#333333"
}
.homeBody {
font-size:1.3rem;
font-weight: 200;
}
.homeOdd {
background: linear-gradient(to bottom, #f0f0f0, #e0e0e0)
}
.homeEven {
background: linear-gradient(to bottom, #e0e0e0, #f0f0f0)
}
#topBanner {
padding: 0px 40px 0px 40px;
}
.homePageSection {
min-height: 50px;
padding: 0px 40px 0px 40px;
}
#aboutThisCourse, #aboutMe, #aboutProjects, #topBanner, #learnDesktop, #learnBasics, #learnOrganization, #learnPractice {
font-size: 1.7rem;
font-weight: 400;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
/* ************************ */
/* ********* Folders ********** */
/* ************************ */
.finderTitle {
position: absolute;
left: 120px;
top: 120px;
}
.programContainer {
text-align: center;
}
.rstudio-logo {
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
background-color: #0073e6; /* Blue background color */
border-radius: 50%; /* Create a circular shape */
color: white; /* White text color */
font-size: 5rem;
font-weight: bold;
font-family: Arial, sans-serif;
}
.r-logo {
font-size: 120px;
font-weight: bold;
font-family: Arial, sans-serif;
color: #0073e6; /* Blue color for the "R" */
width: 120px; /* Adjust as needed */
height: 120px; /* Adjust as needed */
text-align: right;
z-index: 50;
}
.r-circle {
width: 100px; /* Adjust as needed */
height: 60px; /* Adjust as needed */
border-radius: 50%; /* Create a circular shape */
border: 15px solid #77777777;
position: absolute;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); /* Rotate along x, y, and z axes */
z-index: 1;
}
.folder-container {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 100px;
margin-left: 100px;
margin-right: 100px;
height: 150px;
border: 2px solid gray;
border-radius: 10px;
padding: 100px 30px 100px 30px;
background-color: rgb(186, 185, 185);
/* padding-top: 100px; */
}
.folder {
width: 120px;
height: 80px;
background-color: #f0c419;
border-radius: 0 10px 10px 10px;
position: relative;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
}
.folder-tab {
width: 60px;
height: 20px;
background-color: #e5b517;
border-radius: 10px 10px 0 0;
position: absolute;
top: -10px;
left: 10px;
}
.big-folder {
width: 300px;
height: 200px;
background-color: #e5b517;
border-radius: 0 10px 10px 10px;
position: relative;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
margin: 10px;
padding-left: 20px;
}
.big-folder-tab {
width: 120px;
height: 40px;
background-color: #e5b517;
border-radius: 10px 10px 0 0;
position: absolute;
top: -30px;
left: 10px;
padding-top: 10px;
padding-left: 20px;
color: rgb(87, 87, 87);
}
.folder-name {
color: #000;
font-size: 16px;
position: absolute;
}
.file-name {
color: #494949;
font-size: 1.3rem;
margin-top: 15px;
width: 400px;
/* border-bottom: 1px solid gray; */
}
.program-name {
color: #494949;
font-size: 1.3rem;
margin-top: 15px;
/* border-bottom: 1px solid gray; */
}
/* ************************ */
/* ********* Catalog ********** */
/* ************************ */
.WIP a {
pointer-events: none; /* This prevents the link from being clickable */
}
.comingSoon {
position: relative;
background-color: #BB8888BB;
/* left: 30px; */
width: 180px;
height: 30px;
/* margin-top: 17px; */
font-size: 1.5rem;
top: 50px;
margin-top:-30px;
text-align: center;
border-radius: 8px;
color: black;
transform: rotate(-10deg);
}
#catalogExplainer {
font-size: 1.5rem;
color: #333333;
padding: 20px;
margin-left: 10px;
}
#catalogContainer {
display: flex;
justify-content: center;
align-items: center;
/* margin: 0; */
padding-top: 50px;
}
#catalogList {
/* position: absolute; */
margin-top: 50px;
padding: 10px;
width: 100%px;
height: 100%;
border-radius: 10px;
border: 0px solid #a7a7a8;
margin: 2px;
font-family: sans-serif;
}
#catalogList a {
text-decoration: none;
}
#catalogList a:hover {
color: blue;
}
.catalogGroupContainer {
background-color: #e7e7e7;
margin: 10px;
padding: 20px;
border-radius: 10px;
width: 720px;
}
.catalogGroupTitle::before {
content: "▸ "; /* default to the 'collapsed' state */
}
.catalogGroupTitle:hover {
color: #3004a9; /* Change to the color you want */
cursor: pointer;
}
.catalogGroupContainer:not(.collapsed) .catalogGroupTitle::before {
content: "▾ "; /* show a different icon when not collapsed */
}
.catalogGroupContainer.collapsed > :not(.catalogGroupTitle) {
display: none;
}
.catalogGroupTitle {
display: flex;
justify-content: space-between;
padding-left: 0px;
font-size: 1.1rem;
}
.catalogGroupTitle h2 {
/* Your styles here */
font-size: 1.5rem;
color: #333;
margin-top: 0.0em;
margin-left: .3em;
margin-bottom: .3rem
}
/* TURNED OFF FOR NOW */
.catalogDescription {
display: none;
position: absolute;
margin-left: 200px; /* Start at 200px from the left */
text-align: left;
text-wrap: nowrap;
}
.catalogGroupTitle div:first-child {
margin-right: auto; /* Forces the first div to stay on the left */
margin-left: 10px;
text-align: left; /* Ensures text within the div is aligned to the left */
}
.catalogGroupTitle div:last-child {
margin-left: auto; /* Forces the last div to the right */
}
.collapseButtons {
font-size: 1.1rem;
border-radius: 5px;
border: 1px solid #333333;
margin-left: 22px;
margin-bottom: 10px;
background-color: #dddddd;
padding: 7px 15px 7px 15px;
}
.collapseButtons:hover {
background-color: #555555;
color: white;
cursor: pointer;
}
.catalogItem {
display: flex;
flex-direction: row;
/* height: 30px; */
/* width: 400px; */
cursor: pointer;
margin-left: 10px;
margin-top: 10px;
border: 1px solid #292828;
border-radius: 6px;
width: 705px;
height: 60px;
box-shadow: 2px 2px 2px #AAAAAA;
/* border-radius: 2px; */
/* background-color: #ebe9e9; */
/* border-radius: 4px; */
/* padding: 5px; */
/* border: */
}
.catalogItem:hover {
transform: scale(1.02);
border: 2px solid #292828;
border-radius: 8px;
}
.courseTitle {
width: 150px;
background-color: rgb(112, 112, 124);
color: #f5f5f5;
padding: 10px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
margin: 0;
/* width: 170px; */
}
/* Code to change the course title on hover */
/* .courseTitle:hover {
color: black;
background-color: rgb(120, 120, 127);
} */
.courseContent {
width: 250px;
background-color: #f6f3f8;
padding: 10px;
color: #2d3b2d;
/* width: 170px; */
/* left: 120px; */
}
.courseQuestionContainer {
width: 400px;
background-color: #f6f3f8;
color: #2121c5;
padding: 5px 15px 5px 5px;
font-size: 0.9rem;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.courseQuestion {
background-color: #f6f3f8;
color: #464545;
padding: 1px;
}
.courseData {
background-color: #f6f3f8;
padding: 1px;
color: #444444;
}
/* ************************ */
/* ****** VIDEOS ********** */
/* ************************ */
.captionExhibit video {
position: absolute;
width: 500px;
}
.videoLesson {
position: absolute;
top: -570px;
left: -25px;
width: 857px;
height: 531px;
border: 2px solid #333333;
border-radius: 5px;
text-align: center;
background-color: #9e9d9d;
}
.imageLesson {
position: absolute;
top: -570px;
left: -25px;
width: 857px;
height: 531px;
border: 2px solid #333333;
border-radius: 5px;
text-align: center;
background-color: #9e9d9d;
}
.imageLesson img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70%;
height: 70%;
}
video {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: auto;
}
.video-container {
width: 640px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.homePageSection video {
position: relative;
/* top: 150px; */
width: 400px;
height: auto;
}
/* ************************ */
/* ********* TOC ********** */
/* ************************ */
#wrapperTOC {
/* display: flex; */
position: absolute;
top: 60px;
border-radius: 1px;
font-family: "Arial", sans-serif;
height: 700px;
width: 160px;
z-index: 1000000000;
/* margin-top: -9px; */
}
#wrapperProjectTitleTOC {
border-bottom: 1px solid #555555;
background-color: #333333;
height: 55px;
}
.projectTitleTOC {
/* Unsure why this margin is needed - bug with toc on subsection 2+ */
margin-top: 15px;
color: #DDDDDD;
/* font-weight: 800; */
font-size: 1.1rem;
letter-spacing: 0.0rem;
padding: 20px 10px 10px 5px;
}
.catalogTOC {
/* font-weight: 800; */
font-size: 0.9rem;
letter-spacing: 0.0rem;
padding-left: 10px;
}
.catalogTOC a {
text-decoration: none !important;
padding: 2px;
background-color: #BBBBBB;
border-radius: 5px;
text-decoration: none !important;
border: 1px solid #999999;
/* color: #333333 !important; */
/* font-weight: 800; */
}
.catalogTOC a:hover {
color: purple;
background-color: #DDDDDD;
}
.wrapperContentTOC {
background-color: #303030;
padding-top: 10px;
padding-left: 5px;
overflow-y: scroll;
height: 100%;
}
.sectionTitleTOC {
color: #FFFFFF;
font-weight: 500;
font-size: 0.8rem;
letter-spacing: 0.03rem;
}
.listTOC {
/* margin-top: 4px; */
/* margin-bottom: 10px; */
line-height: 1.3;
font-size: 0.7rem;
letter-spacing: 0.02rem;
/* This changes indents of bullet list
padding: 0px; */
}
/* Some of the TOC.html files are inconsistent here */
.sectionTitleTOC ul, .wrapperContentTOC ul, .question-container ul {
list-style: none;
padding-left: 5px;
}
#sidebarTOC {
font-size: 0.7rem;
height: 100%;
transition: width 0.5s; /* Add transition for smoother toggle */
}
.listTOC a {
text-decoration: none;
color: #bbbbbb;
}
.listTOC a:hover {
text-decoration: none;
color: #FFFFFF;
}
/* Button Styles */
#toggleTOC {
margin-top: 10px;
font-size: 1rem;
}
.pageTOC {
color: #AAAAFF;
/* Consider this color for consistency */
/* #007BFF */
letter-spacing: 0.05em;
}
/* ************************ */
/* ****** Search page ********** */
/* ************************ */
.search-enter {
position: relative;
border-radius: 5px;
border: 1px solid #6f6f6f;
padding: 5px;
width:100px;
font-size: 1.1rem;
background-color: #a9a8a8;
margin-bottom: 30px;
}
#searchResults {
font-family: 'Cascadia Code', sans-serif;
line-height: 1.5;
}
/* ************************ */
/* ****** COMMANDS PAGE ********** */
/* ************************ */
.search-bar {
position: relative;
margin-top: 5%;
margin-left:5%;
border-radius: 5px;
border: 1px solid #AAAAAA;
padding: 5px;
width:200px;
font-size: 1.1rem;
}
.commandList {
list-style-type: none; /* Remove bullets */
cursor: pointer;
height: 520px;
width: 200px;
overflow-y: scroll;
border: 1px solid black;
border-radius: 5px;
padding: 10px;
background-color: #DDDDDD
}
.commandList li {
padding: 5px;
border-bottom: 1px solid #ccc;
border-radius: 5px;
font-family: 'Cascadia Code', sans-serif;
}
.commandList li.active {
font-weight: 400; /* Make font bold for active items */
color: white;
background-color: #007BFF;
}
.content-display {
width: 70%; /* Adjust the width as needed */
height: 500px;
overflow-y: scroll;
border: 1px solid #AAAAAA;
border-radius: 5px;
padding: 20px;
font-family: 'Cascadia Code', sans-serif;
color: #444444;
}
/* -------------------------------
----- COMPUTER SIMULATION -----
------------------------------- */
/* Need to fix background size */
#walkthruContainer, #errorContainer {
font-family: 'Cascadia Code', sans-serif;
}
.visible {
opacity: 1; /* When the 'visible' class is applied, the content becomes visible */
}
.hidden {
opacity: 0; /* Initially, the content is invisible */
transition: opacity 0.5s ease-in;
}
#computer {
position: absolute;
top: 75px;
background-color: #eaeaea;
left: 160px;
width: 867px;
height: 545px;
border-radius: 2px;
border: 2px solid #cccccc;
}
.hiddenButton {
display: none;
}
.panelTitle {
/* font-family: "Arial", sans-serif;
font-size: 1rem; */
margin: 0;
font-family: "Menlo", monospace;
font-size: 0.9rem;
font-weight: 700;
color: #2e2e2e;
background-color: #cfd1d5;
z-index:1000000;
padding-left: 4px;
padding-top: 2px;
padding-bottom: 2px;
border-radius: 2px;
border: 1px solid #bfbebe;
}
/* ******************* */
/* Quick start guide */
/* ******************* */
#contentContainer, #referenceContainer, #quizContainer, #dataContainer {
}
#quizPage {
position: absolute;
padding: 85px 110px 15px 110px;
top: 76px;
left: 160px;
height: 571px;
width: 646px;
font-family: "Arial", sans-serif;
font-size: 1rem;
color: #383737;
background-color: #fafafa;
overflow-y: scroll;
border: 2px solid #ccc;
border-radius: 4px;
line-height: 1.3;
}
#referencePage {
position: absolute;
padding: 105px 110px 15px 110px;
top: 76px;
left: 160px;
height: 550px;
width: 647px;
font-family: "Arial", sans-serif;
font-size: 1rem;
color: #303030;
background-color: #efeeee;
overflow-y: scroll;
border: 2px solid #ccc;
border-radius: 4px;
line-height: 1.3;
}
#referencePage p {
font-size: 1.1rem;
}
#contentPage {
position: absolute;
padding: 105px 110px 15px 110px;
top: 73px;
left: 160px;
height: 531px;
width: 630px;
font-family: "Arial", sans-serif;
font-size: 1rem;
color: #383737;
background-color: #eaeaea;
overflow: hidden;
border: 2px solid #ccc;
border-radius: 4px;
}
#dataContent p {
font-size: 1.0rem;
}
#dataContent {
position: absolute;
padding: 95px 110px 15px 110px;
top: 77px;
left: 160px;
height: 559px;
width: 646px;
font-family: "Arial", sans-serif;
font-size: 1rem;
color: #383737;
background-color: #fafafa;
overflow-y: scroll;
overflow-x: hidden;
border: 2px solid #ccc;
border-radius: 4px;
}
#clickEnter {
display: none;
color: rgb(149, 149, 149);
font-size: 0.7rem;
position: absolute;
left: 700px;
top: 80px;
}
#wrapperQS {
position: absolute;
display: flex;
top: 76px;
left: 160px;
height: 540px;
width: 867px;
font-family: "Menlo", monospace;
font-size: 0.9rem;
color: #d6d6d6;
overflow-y: scroll;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #212121;
}
#sidebarQS {
border: 1px solid #ccc ;
margin-top: 50px;
width: 100px;
height: 100%;
background-color: #e2e1e1;
overflow-y: auto;
}
.word-list-container {
list-style-type: none; /* Remove bullet points */
padding: 0; /* Optional: Remove default padding */
margin: 0; /* Optional: Remove default margin */
}
.word-item {
cursor: pointer;
}
#quickstartContent {
padding-left: 15px;
white-space: pre-wrap;
letter-spacing: 0.005em;
user-select: none; /* Prevent text selection */
}
#htmlContent {
/* padding: 20px; */
}
.linkScriptQS {
cursor: pointer;
color: #f8f8fd;
border: 1px solid #1417ba;
background-color: #2f2d6d;
border-radius: 4px;
text-decoration: none;
}
#explainBoxQS {
font-family: 'Cascadia Code', sans-serif;
font-size: 1.1rem;
position:absolute;
top: 622px; /* Position the container 50% from the top of the viewport */
height: 84px;
width: 825px;
left: 160px;
z-index:1000000;
color: #383737;
background-color: #c8c8c8;
border: 2px solid #ccc;
border-radius: 4px;
padding: 20px;
}
/* ---------- */
/* QUIZ */
/* ---------- */
#quiz-container {
position: absolute;
width: 400px;
display: flex;
flex-direction: column;
}
.question-container {
border: 1px solid gray;
padding: 20px;
border-radius: 10px;
}
#submit-button, #result, #submittedButton {
margin-top: 10px;
}
#submitAndResult {
order: 1;
display: flex;
flex-direction: row;
}
#submit-button, #submittedButton {
order: 1; /* Adjust the order as needed */
width: 100px;
border-radius: 5px;
}
.questionNumber {
font-size: 1.2rem;
}
#result {
order: 2; /* Adjust the order as needed */
padding-left: 10px;
}
#answerExplain {
order: 2; /* Adjust the order as needed */
margin-top: 10px;
color: rgb(18, 41, 23);
background-color: #e3e3e3;
padding: 10px;
border-radius: 5px;
}
/* Accordion quick start guide */
.accordion-item {
margin-bottom: 5px;
padding: 5px;
border: 1px solid #ccc;
}
.accordion-link {
cursor: pointer;
display: block;
font-weight: bold;
}
#accordion-content {
margin-top: 5px;
padding: 5px;
border: 1px solid #ccc;
display: none;
}
#topContainer {
display: none;
/* background-image: url("top.jpg");
background-repeat: no-repeat;
background-size: 100%; */
height:1px;
width: 990px;
top: 15px;
padding-top: 7px;
left: 0px;
position: absolute;
background-color: #e7e8ea;
color: #555555;
border-radius: 5px;
border: 1px solid #e3e6e8;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 0.8rem;
}
#tabs {
/* background-image: url("tabs.jpg");
background-repeat: no-repeat;
background-size: 100%; */
position: absolute;
top: 100px; /* Position the container 50% from the top of the viewport */
left: 0px; /* Position the container 50% from the left of the viewport */
height:25px;
width: 700px;
}
pre {
/* white-space: pre-wrap; */
margin-block: 0px;
}
#textContainer, #enviroContainer, #consoleContainer, #outputContainer {
background-color: #1f1f1f;
border: 4px solid #e3e6e8;
}
#textContainer {
border-radius: 5px;
/* background-image: url("viewer.jpg");
background-repeat: no-repeat;
background-size: 100%;
*/
position: relative;
/* Position the container 50% from the top of the viewport */
top: 4px;
left: 5px; /* Position the container 50% from the left of the viewport */
height:430px;
width: 670px;
overflow: hidden;
font-size: 0.90rem;
/* letter-spacing: 0.005rem; */
z-index: 10;
}
#scrollContent {
display: flex;
overflow-x: scroll;
overflow-y: scroll;
/* margin-top: 37px ; */
padding-top: 0px;
height: 100%;
width: 99%;
position: absolute;
/* Add any other styles you need for the scrollable content */
}
#lineNumbersContent {
font-family: "Menlo", monospace;
/* font-family: 'Cascadia Code', sans-serif; */ font-size: 0.90rem;
display: flex;
flex: 0 0 auto;
width: 80%;
min-height: 100%;
padding-left: 7px;
padding-right: 5px;
padding-top: 1px;
text-align: right;
color: #BBBBBB;
background-color: #353030;
/* border-right: 1px solid #ccc; */
}
.lineNumberContainer {
}
#codeContainer {
user-select: none; /* Prevent text selection */
}
#textLastDisplay {
flex: 1 1 auto;
/* font-family: "Arial", sans-serif; */
font-family: "Menlo", monospace;
font-size: 0.90rem;
color: #d6d6d6;
padding-left: 15px;
white-space: pre;
/* margin-top: 40px; */
}
#textDisplay {
/* font-family: "Arial", sans-serif; */
font-family: "Menlo", monospace;
font-size: 0.90rem;
color: #d6d6d6;
padding-left: 15px;
white-space: pre;
/* CSS transition for the zoom effect */
/* transition: transform 0.5s ease-in-out;
transform-origin: top left; Set the transform origin to top left */
}
.tableExample {
background-color: #99999933;
border-radius: 2px;
line-height: 1.5rem;
/* letter-spacing: 0.02rem; */
border-color: 2px solid #222222;
padding: 3px;
}
table {
border-collapse: collapse;
background-color: #101010;
color: #d6d6d6;
/* trying to fix weird border in small n table */
border: 1px solid black;
}
th, td {
border: 1px solid #cccccc;
padding: 5px;
background-color: #1f1f1f;
color: #e6e3fc;
}
thead {
position: sticky;
top: -1px; /* Position the header at the top of the container */
background-color: #353030; /* Add background color to the header */
z-index: 1; /* Ensure the header stays on top of the content */
}
.valueItem {
font-size: 0.8rem;
padding-left: 5px;
padding-bottom: 1px;
border-top: none;
border-bottom: 0.25px solid #a0a0a0;
overflow: hidden;
white-space: nowrap;
}
.dataButton {
text-align: left;
font-family: "Menlo", monospace;
font-size: 0.8rem;
border: 0.25px solid #cacaca;
overflow: auto;
width:100%;
cursor: pointer;
overflow: hidden;
}
#dataCsvDisplay {
/* font-family: "Arial", sans-serif; */
font-family: "Courier", monospace;
font-size: 0.9rem;
display: none;
margin-top: 1px ;
margin-bottom: 1px ;
margin-left: 1px ;
height: 100%;
width: 100%;
overflow: scroll;
z-index: 10000;
}
.hideData {
position: relative;
font-size: 0.5rem;
border-radius: 10px;
top: -2px;
}
#enviroContainer {
/* background-image: url("environment.jpg");
background-repeat: no-repeat;
background-size: 100%; */
border-radius: 5px;
font-family: "Menlo", monospace;
color: #d6d6d6;
position: absolute;
height: 380px;
width: 160px;
top: 5px; /* Position the container 50% from the top of the viewport */
left: 690px; /* Position the container 50% from the left of the viewport */
overflow-y: auto;
}
#textLastEnviroDisplay, #textEnviroDisplay, #textValuesDisplay {
font-family: "Menlo", monospace;
font-size: 0.8rem;
margin-left: 0px;
margin-top: 5px;
}
#textEnviroDisplay {
display: none;
}
#outputContainer {
border-radius: 5px;
position: absolute;
height: 140px;
width: 160px;
top: 392px; /* Position the container 50% from the top of the viewport */
left: 690px; /* Position the container 50% from the left of the viewport */
/* background-image: url("output.jpg");
background-repeat: no-repeat;
background-size: 100%;
*/
}
#outputGraph, #outputLastGraph {
display: none;
top: 21px;
width: 100%;
position: absolute; /* Set the position to absolute */
z-index: 1; /* Set a higher z-index to place the image over the text */
margin-left: 0%;
}
#consoleContainer {
position: relative;
border-radius: 5px;
/* background-image: url("console.jpg");
background-repeat: no-repeat;
background-size: 100%; */
height: 90px;
width: 670px;
top: 5px; /* Position the container 50% from the top of the viewport */
left: 5px; /* Position the container 50% from the left of the viewport */
}
#consoleText {
}
/* I don't like how the consoleLog moves around horizontally - NEED TO FIX */
#consoleLog {
/* display: flex; REMOVING TO HELP HIGHLIGHT WORD */
/* position: absolute; */
/* font-family: "Arial", sans-serif; */
font-family: "Menlo", monospace;
font-size: 0.8rem;
height: 62px;
width: 99%;
top: 20px;
margin-top: 0px;
margin-left: 1%;
color: #e6e3fc;
overflow-y: scroll;
overflow-x: hidden;
white-space: pre-wrap;
line-height: 1.3;
}
#consoleLog .errorMessage {
color: red !important;
}
/* Error message not working */
.errorMessage {
color: red;
}
#consoleLog .errorMessage {
color: red !important;
}
#consoleDisplay {
font-family: "Menlo", monospace;
font-size: 1rem;
width: 98%;
padding-top: 2px;
margin-left: 1%;
color: #260cfc;
}
/* .highlighted-enviro {
background-color: #fedcdc;
color: black;
border: 1px solid red;
border-radius: 2px;
width: 110%;
padding-left: 5%;
padding-right: 5%;
} */
.enviroSubHeader {
color: #e6e6e6;
padding-left: 2px;
font-size: 0.9rem;
background-color: #353030;
border: 1px solid #a0a0a0;
}
.highlighted-enviro, .highlighted-word {
/* background-color: #afffcb; */
/* text-shadow: 0 0 1px rgba(0, 0, 0, 0.5); */
background-color: #fff5f5;
color: black;
border: 1px solid #00000055;
border-radius: 2px;
margin: -1px;
/* padding: 0px 1px 1px 1px; */
/* margin: -3px; */
/* outline: 1px solid red;
box-shadow: 5px 5px 5px 5px #fedcdc55; */
/* animation: highlightAnimation 1s 4 alternate; */
/* 1s duration, infinite loop, alternate direction */
}
.explainWord, .enviroWord, .csvWord, .consoleWord {
/* background-color: #afffcb; */
/* text-shadow: 0 0 1px rgba(0, 0, 0, 0.5); */
font-weight: 800;
/* outline: 1px solid red;
box-shadow: 5px 5px 5px 5px #fedcdc55; */
/* animation: highlightAnimation 1s 4 alternate; */
/* 1s duration, infinite loop, alternate direction */
}
@keyframes highlightAnimation {
0% {
background-color: #afffcb; /* Fully visible */
text-shadow: 0 0 1px rgba(232, 232, 232, 0.5);
}
100% {
background-color: transparent; /* Completely transparent */
text-shadow: none;
}
}
.arrowContent {
position: absolute;
animation: blinkAndMove 2s infinite; /* Increased duration to 2s */
color: white;
opacity: 1;
}
.arrowSVG {
animation: blinkAndMove 2s infinite; /* Increased duration to 2s */
color: white;
opacity: 1;
}
@keyframes blinkAnimation {
0% {
opacity: 0; /* Fully-or-close to invisible */
}
25% {
opacity: 0; /* Completely invisible */
}
100% {
opacity: 1; /* Completely visible */
}
}
@keyframes blinkAndMove {
0% {
transform: translate(0, 0); /* No movement */
}
25% {
transform: translate(-1px, -1px); /* Move slightly */
}
50% {
transform: translate(1px, 1px); /* Move slightly */
}
75% {
transform: translate(-1px, 1px); /* Move slightly */
}
100% {
transform: translate(0, 0); /* Return to original position */
}
}
/* .explainWord {
color: red;
} */
/* #menuContainer {
display: none;
margin-left: 10px;
height: 30px;
justify-content: left;
} */
#actionButtons {
position: absolute;
margin-left: 50px;
left: 400px;
width:500px;
}
#reloadButton {
margin-top: 10px;
font-size: 1rem;
}
#typeNewCodeButton {
}
#runNewCodeButton {
}
#runButton {
}
#checkYourWorkButton {
}
#finishButton {
}
#playButton {
margin-top: 10px;
font-size: 1rem;
/* display: none; */
}
#progressTitle {
font-size:0.5rem;
margin-top:5px;
margin-bottom: -10px;
}
.myProgress {
font-size: 0.5rem;
border-radius: 0px;
margin-top: 10px;
margin-right: -5px;
color: #343433;
}
.getStartedButton {
display: inline-block;
padding: 10px 20px;
font-size: 1.9rem;
color: white;
background-color: #007BFF; /* You can change the color */
border: none;
border-radius: 5px;
width: 200px;
height: 40px;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
.myButton {
border-radius: 10px;
}
.myButton:active {
background-color: #AABB0099; /* slightly more transparent */
}
.clickedButton {
font-size: 0.5rem;
background-color: #470ac8; /* Change to the desired color */
border-radius: 0px;
margin-top: 10px;
margin-right: -5px;
color: #e7e7e9;
}
#duration-container {
position: absolute;
color: #222222;
font-size: 0.9rem;
z-index: 100000000;
padding: 5px;
width: 150px;
left: 500px;
top: 800px;
text-align: right;
font-family: "Arial", sans-serif;
transition: opacity 1s;
opacity: 1;
}
.audioDuration {
padding: 5px;
/* Set the width of the button */
}
.audioPartial {
padding: 5px;
/* Set the width of the button */
}
.audioPage {
padding: 5px;
/* Set the width of the button */
}
.pageNumberCount {
position: absolute;
border-radius: 13px;
/* Set the width of the button */
padding: 5px;
top: 820px;
left: 920px;
width: 60px;
font-size: 0.9rem;
color: #555555;
z-index: 100000000;
}
.pageNumberCountSteps {
position: absolute;
color: #555555;
border-radius: 13px;
/* Set the width of the button */
padding: 5px;
margin-top: 20px;
top: 725px;
left: 765px;
width: 90px;
font-size: 0.7rem;
z-index: 100000000;
}
.backToQSButton {
display: flex;
justify-content: center; /* Horizontal centering */
align-items: center; /* Vertical centering */
position: absolute;
top: 20px;
left: 700px;
height: 40px;
width: 90px;
color: rgb(23, 23, 23);
background-color: #c0bfbf;
font-size: 1.0rem;
text-decoration: none;
border-radius: 10px;
border: 1px solid #636363;
padding: 5px;
}
.startLessonButton {
position: absolute;
border-radius: 13px;
width: 80px; /* Set the width of the button */
height: 40px; /* Set the height of the button */
font-size: 0.7rem; /* Set the font size of the button text */
padding: 5px;
top:25px;
left: 680px;
z-index: 100000000;
border: 1px solid #ababab;
}
.nextPageButton {
position: absolute;
border-radius: 13px;
width: 50px; /* Set the width of the button */
height: 50px; /* Set the height of the button */
top: 745px;
left: 943px;
font-size: 1.7rem;
text-align: center;
color: black;
border: 1px solid #ababab;
z-index: 100000000;
cursor: pointer;
}
.nextDocButton {
position: absolute;
border-radius: 13px;
width: 50px; /* Set the width of the button */
height: 50px; /* Set the height of the button */
top: 765px;
left: 963px;
font-size: 1.7rem;
text-align: center;
color: black;
border: 1px solid #ababab;
z-index: 100000000;
cursor: pointer;
}
.nextButton {
position: absolute;
border-radius: 13px;
width: 50px; /* Set the width of the button */
height: 50px; /* Set the height of the button */
top: 687px;
left: 800px;
font-size: 1.7rem;
text-align: center;
color: black;
border: 1px solid #ababab;
z-index: 100000000;
cursor: pointer;
}
.lastPageButton {
position: absolute;
border-radius: 13px;
width: 50px; /* Set the width of the button */
height: 50px; /* Set the height of the button */
top: 745px;
left: 883px;
font-size: 1.7rem;
text-align: center;
border: 1px solid #ababab;
z-index: 100000000;
cursor: pointer;
}
.lastDocButton {
position: absolute;
border-radius: 13px;
width: 50px; /* Set the width of the button */
height: 50px; /* Set the height of the button */
top: 765px;
left: 903px;
font-size: 1.7rem;
text-align: center;
border: 1px solid #ababab;
z-index: 100000000;
cursor: pointer;
}
.lastButton {
position: absolute;
border-radius: 13px;
width: 50px; /* Set the width of the button */
height: 50px; /* Set the height of the button */
top: 687px;
left: 740px;
font-size: 1.7rem;
text-align: center;
border: 1px solid #ababab;
z-index: 100000000;
cursor: pointer;
}
.nextButton:hover, .nextPageButton:hover, .lastButton:hover, .lastPageButton:hover, .backToQSButton:hover {
background-color: #69696a; /* Example hover background color */
}
.nowNextButton {
animation: blinkAnimation 1s infinite alternate;
}
.audioLoading {
font-family: 'Cascadia Code', sans-serif;
}
#audioContainer {
/* float: right; */
position: absolute;
padding-left: 40px;
width: 200px;
z-index: 10000000;
}
#customAudioPlayer {
height : 20px;
width: 140px;
padding: 1px;
}
audio#voiceover {
left: 150px;
/* width: 220px; */
height: 50px;
}
video#voiceover {
position: absolute;
top: 320px;
/* width: 220px; */
}
#playPauseButton {
width: 165px;
padding: 1px;
margin: 2px;
border-radius: 5px;
height: 50px;
font-size: 1.1rem;
text-align: center;
font-family: 'Cascadia Code', sans-serif;
}
#progress-container {
display: flex;
align-items: center;
width: 265px;
padding: 5px;
margin: 2px;
border-radius: 5px;
height: 36px;
font-size: 1.1rem;
border: 2px solid #333333;
text-align: center;
font-family: 'Cascadia Code', sans-serif;
background-color: #EEEEEE;
}
#progress-bar {
width: 55%;
}
#autoPageButton, #speed-button {
width: 125px;
padding: 1px;
margin: 2px;
border-radius: 5px;
height: 50px;
font-size: 1.1rem;
text-align: center;
font-family: 'Cascadia Code', sans-serif;
background-color: #DDDDDD;
}
#autoPageButton:hover, #playPauseButton:hover, #speed-button:hover {
background-color: #69696a;
cursor: pointer;
}
#volume-container {
width: 100px;
height: 50px;
font-family: 'Cascadia Code', sans-serif;
padding: 1px;
}
#progress-label {
font-size: 1.5rem;
color: #FFFFFF;
text-shadow:
-1px -1px 0 black,
1px -1px 0 black,
-1px 1px 0 black,
1px 1px 0 black;
}
#volume-label {
margin-bottom: 5px;
font-size: 1.0rem;
}
input[type="range"] {
width: 100%;
-webkit-appearance: none; /* Removes default styling for WebKit browsers */
background: transparent; /* Make background transparent */
height: 5px;
}
/* WebKit browsers (Chrome, Safari) */
input[type="range"]::-webkit-slider-runnable-track {
background: #ccc;
height: 5px;
border-radius: 5px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background: #1F449C;
height: 20px;
width: 20px;
border-radius: 50%;
cursor: pointer;
margin-top: -7px; /* Center thumb over track */
}
/* Mozilla Firefox */
input[type="range"]::-moz-range-track {
background: #ccc;
height: 5px;
border-radius: 5px;
}
input[type="range"]::-moz-range-thumb {
background: #1F449C;
height: 20px;
width: 20px;
border-radius: 50%;
cursor: pointer;
}
/* Ensure focus styles are consistent across browsers */
input[type="range"]:focus {
outline: none;
}
.audioContainer{
padding: 0px 20px 0px 20px;
position: absolute;
top: 728px;
left: 161px;
width: 811px;
height: 82px;
background-color: #666666;
border-radius: 2px;
border: 1px solid #555555;
display: flex;
align-items: center; /* Vertically centers the child elements */
/* justify-content: center; */
/* Horizontally centers the child elements */
gap: 10px; /* Adds space between the audio player and the button */
}
.noAudioContainer{
padding: 0px 20px 0px 20px;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: absolute;
top: 751px;
left: 161px;
width: 826px;
height: 73px;
background-color: #666666;
border: 1px solid #555555;
border-radius: 2px;
color: white;
display: flex;
align-items: center; /* Vertically centers the child elements */
/* justify-content: center; */
/* Horizontally centers the child elements */
gap: 10px; /* Adds space between the audio player and the button */
}
.settingsWrapper {
position: relative;
}
.gearButton {
background: none;
border: none;
font-size: 2.5rem;
cursor: pointer;
color: white;
text-shadow:
-1px -1px 0 black,
1px -1px 0 black,
-1px 1px 0 black,
1px 1px 0 black;
}
.volumeButton {
background: none;
border: none;
font-size: 1.8rem;
cursor: pointer;
}
.settingsPanel {
position: absolute;
bottom: 120%; /* show above the gear icon */
right: 0;
display: none;
flex-direction: column;
background: white;
border: 1px solid #ccc;
border-radius: 8px;
padding: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
z-index: 100000000000;
}
.settingsPanel button {
background: none;
border: none;
padding: 6px 10px;
text-align: left;
cursor: pointer;
}
.settingsPanel button:hover {
background: #f0f0f0;
}
.volumePanel {
position: absolute;
bottom: 120%; /* show above the gear icon */
right: -20px;
display: none;
flex-direction: column;
background: white;
border: 1px solid #ccc;
border-radius: 8px;
padding: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
z-index: 100000000000;
}
.volumePanel button {
background: none;
border: none;
padding: 6px 10px;
text-align: left;
cursor: pointer;
}
.volumePanel button:hover {
background: #f0f0f0;
}
/* Get rid of timeline */
audio::-webkit-media-controls-timeline,
video::-webkit-media-controls-timeline {
/* display: none; */
}
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
/* display: none; */
}
/* https://codepen.io/emilcarlsson/pen/PPNLPy */
/* audio::-webkit-media-controls-volume-slider {
background-color: #B1D4E0;
border-radius: 25px;
padding-left: 8px;
padding-right: 8px;
} */
#restartButton {
width: 70px;
}
#muteButton {
width: 50px;
}
/* Might be hard to change the look of audio player since it's a browser thing */
#customAudioPlayer audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-panel {
background-color: #eaeaea;
}
.enterText {
color: #AAAAAA;
}
/* Maybe going to get rid of this */
.startOverButton {
display: none;
}
/* Maybe going to get rid of this */
#explainButton {
display: none;
margin-top: 10px;
margin-left: 20px;
font-size: 1rem;
z-index: 9999;
}
#explainContainer {
font-family: 'Cascadia Code', sans-serif;
font-size: 1.1rem;
line-height: 1.2;
position:absolute;
top: 626px; /* Position the container 50% from the top of the viewport */
height: 120px;
width: 865px;
left: 160px;
z-index:1000000;
color: #383737;
background-color: #c8c8c8;
border: 2px solid #ccc;
border-radius: 4px;
}
#explanation {
position: absolute;
top: 10px;
width: 95%;
padding: 10px;
z-index: 1;
}
#explainList {
top: 1px;
position: absolute;
height: 50px;
left: 20px;
}
.radar {
position: absolute;
width: 0;
height: 0;
border-radius: 50%;
border: 2px solid rgba(255, 0, 0, 0.7);
pointer-events: none;
transform: scale(0);
animation: radarEffect 0.8s linear;
}
@keyframes radarEffect {
to {
transform: scale(6);
opacity: 0;
}
}
/* Scrollbar WIP*/
/* For Webkit-based browsers */
::-webkit-scrollbar {
width: 8px; /* You can adjust the width as needed */
height: 8px;
}
::-webkit-scrollbar-thumb {
background-color: #55555577;
border-radius: 20px;
}
/* To override thumb */
.dataButton {
/* Set background color to transparent ?? */
/* background-color: transparent; */
background-color: #353030 ;
color: #d6d6d6;
border-top: none;
border-bottom: 0.5px solid #a0a0a0;
}
::-webkit-scrollbar-thumb:hover {
background-color: #88888877; /* Change to your desired hover background color */
}
/* DATA DOWNLOAD STYLES */
#passwordContainer {
background-color: #EEEEEE;
border: 1px solid gray;
border-radius: 5px;
padding: 10px;
}
/* ------------------------------- */
/* ----------- CAPTIONS ---------- */
/* ------------------------------- */
#loadingMessage {
position: absolute;
/* top: 670px; */
top: 300px;
left: 160px;
width: 800px;
height: 36px;
text-align: center;
padding: 20px;
font-size: 2.3rem;
background-color: rgb(196, 196, 250);
border-radius: 5px;
border: 2px solid #ccc;
z-index: 10000000000000;
}
.alanSpeak {
color: red;
display: none;
}
#type-it {
visibility: hidden;
}
.item1, .item2, .item3, .item4, .item5 {
display: none;
}
.captionHeader {
position: absolute;
font-size: 2.2rem;
/* padding: 10px 10px 10px 10px; */
margin-top: 100px;
width: 600px;
text-align: center;
/* height: 40px; */
letter-spacing: 0.01em;
line-height: 1.5;
/* color: #007BFF; */
/* background-color: #dddddd; */
/* border: 2px solid #BBBBBB; */
/* border-radius: 3px; */
/* text-align: center; */
}
.captionHeader-small {
visibility: hidden;
/* position: relative;
color: #555555;
font-size: 1.8rem;
padding: 10px 10px 10px 20px;
width: 520px;
margin-top: -40px;
text-align: left;
height: 40px;
letter-spacing: 0.01em;
line-height: 1.5; */
/* color: #007BFF; */
/* background-color: #dddddd; */
/* border: 2px solid #BBBBBB; */
/* border-radius: 3px; */
/* text-align: center; */
}
.captionExhibit ol {
position: absolute;
top: 10%;
}
.captionExhibit {
position: absolute;
font-size: 1.5rem;
width: 600px;
height: 400px;
/* padding-top: 10px; */
letter-spacing: 0.01em;
line-height: 1.5;
visibility: hidden;
}
.captionExhibit img {
border: 2px solid #DDDDDD;
margin-top: -50px;
height: 100%; /* Set a maximum height for the image */
width: auto; /* Maintain aspect ratio */
position: relative;
/* position relative Required for positioning the flashlight relative to the image */
display: block;
margin-left: auto;
margin-right: auto;
}
.captionExhibit table {
font-size: 1rem;
}
/* Hidden to start */
.subtitleBox {
/* overflow: display; */
position: absolute;
overflow: visible;
min-height: 65px;
bottom: 10px;
width: 768px;
left: 14px;
background-color: #f8f8f8;
border: 2px solid #e1e1e1;
border-radius: 5px;
color: #333333;
padding: 25px;
transition: opacity 1s;
opacity: 1;
letter-spacing: 0.02em;
z-index: 100000000000;
}
#caption-container {
}
.caption {
width: 100%;
display: inline;
visibility: hidden;
}
.caption-hidden {
display: none;
position: absolute;
visibility: hidden;
}
.caption-visible {
font-size: 1.3rem;
display: inline;
position: relative;
visibility: visible;
transition: opacity 0.5s;
opacity: 1;
min-width: 100%;
line-height: 1.5;
}
.caption-final {
display: inline;
position: relative;
visibility: visible;
transition: opacity 0.5s;
opacity: 1;
min-width: 100%;
font-size: 0.9rem !important;
white-space: normal;
line-height: 1; /* Adjust line-height as needed */
}
/* Flashlight effect - transparent box */
.flashlight {
position: absolute;
background: rgba(255, 255, 0, 0.3); /* Semi-transparent yellow */
border: 2px solid rgba(255, 255, 0, 0.6); /* Optional border for the flashlight */
}
.flashlight-hidden {
visibility: hidden;
}
.flashlight-visible {
visibility: visible;
animation: oscillate 2s infinite ease-in-out;
}
/* Keyframes for oscillation */
@keyframes oscillate {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(-3px, 2px);
}
50% {
transform: translate(0, 4px);
}
75% {
transform: translate(3px, 2px);
}
100% {
transform: translate(0, 0);
}
}
/* ------------------------------- */
/* ----------- Accessibility ---------- */
/* ------------------------------- */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ------------------------------- */
/* ----------- STICK FIGURE ---------- */
/* ------------------------------- */
.stick-figure {
stroke: black;
stroke-width: 2;
fill: none;
}
/* ------------------------------- */
/* -----------MOVING FACE ---------- */
/* ------------------------------- */
.face {
width: 200px;
height: 200px;
background-color: #ffe0b2;
border-radius: 50%;
position: relative;
margin: 0 auto;
}
.eye {
width: 30px;
height: 30px;
background-color: black;
border-radius: 50%;
position: absolute;
}
.eye.left {
top: 50px;
left: 50px;
}
.eye.right {
top: 50px;
right: 50px;
}
.mouth {
width: 60px;
height: 20px;
background-color: black;
border-radius: 0 0 50px 50px;
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
}