diff --git a/css/activities.css b/css/activities.css
index e8f2aebee7..9057483e0f 100644
--- a/css/activities.css
+++ b/css/activities.css
@@ -15,1722 +15,1733 @@
@import url("play-only-mode.css");
*:focus:not(:focus-visible) {
- outline: none;
+ outline: none;
}
*:focus-visible {
- outline: 2px solid #0066FF !important;
- outline-offset: 2px;
+ outline: 2px solid #0066ff !important;
+ outline-offset: 2px;
}
-body:not(.dark) #helpfulSearch,
-body:not(.dark) .ui-autocomplete {
- background-color: #fff !important;
- color: #000 !important;
+body:not(.dark):not(.highcontrast) #helpfulSearch,
+body:not(.dark):not(.highcontrast) .ui-autocomplete {
+ background-color: #fff !important;
+ color: #000 !important;
}
-body:not(.dark) .ui-autocomplete li:hover {
- background-color: #ddd !important;
+body:not(.dark):not(.highcontrast) .ui-autocomplete li:hover {
+ background-color: #ddd !important;
}
-body:not(.dark) #helpfulSearchDiv {
- background-color: #f9f9f9 !important;
+body:not(.dark):not(.highcontrast) #helpfulSearchDiv {
+ background-color: #f9f9f9 !important;
+}
+
+/* High Contrast Mode Search Suggestions */
+.highcontrast .ui-menu {
+ background-color: #000000 !important;
+ border: 1px solid #ffffff !important;
+}
+
+.highcontrast .ui-menu .ui-menu-item {
+ color: #ffffff !important;
+}
+
+.highcontrast .ui-menu .ui-menu-item:hover,
+.highcontrast .ui-menu .ui-state-focus {
+ background-color: #333333 !important;
+ color: #00ffff !important;
}
#newdropdown {
- font-size: 16px;
- background-color: #fff;
- border: 1px solid #cccccc;
- color: #000000;
- padding: 24px;
- width: 400px;
- border-radius: 8px;
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+ font-size: 16px;
+ background-color: #fff;
+ border: 1px solid #cccccc;
+ color: #000000;
+ padding: 24px;
+ width: 400px;
+ border-radius: 8px;
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}
#newdropdown li {
- text-align: center;
- width: fit-content;
- margin: 0 auto;
+ text-align: center;
+ width: fit-content;
+ margin: 0 auto;
}
#newdropdown li:hover {
- background-color: transparent !important;
+ background-color: transparent !important;
}
/* confirm and cancel buttons align horizontally (for newproject dropdown)*/
#newdropdown .button-row {
- display: flex;
- gap: 16px;
- justify-content: center;
- align-items: center;
- width: 100%;
- margin-top: 16px;
+ display: flex;
+ gap: 16px;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ margin-top: 16px;
}
.new-project-title {
- line-height: normal;
- font-size: 24px;
- text-align: left;
- color: #0066FF;
+ line-height: normal;
+ font-size: 24px;
+ text-align: left;
+ color: #0066ff;
}
#confirmation-message {
- font-size: 16px;
- text-align: left;
- color: black;
+ font-size: 16px;
+ text-align: left;
+ color: black;
}
.modalBox {
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 400px;
- padding: 24px;
- background-color: #fff;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
- border-radius: 8px;
- z-index: 10000;
- text-align: left;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 400px;
+ padding: 24px;
+ background-color: #fff;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+ border-radius: 8px;
+ z-index: 10000;
+ text-align: left;
}
.modal-title {
- color: #0066FF;
- font-size: 24px;
- margin: 0 0 16px 0;
+ color: #0066ff;
+ font-size: 24px;
+ margin: 0 0 16px 0;
}
.modal-message {
- color: black;
- font-size: 16px;
- margin-bottom: 24px;
+ color: black;
+ font-size: 16px;
+ margin-bottom: 24px;
}
.clear-button-container {
- display: flex;
- justify-content: flex-start;
+ display: flex;
+ justify-content: flex-start;
}
.confirm-button {
- border: none;
- border-radius: 4px;
- padding: 8px 16px;
- font-weight: bold;
- cursor: pointer;
- background-color: #0066FF;
- color: white;
- margin-right: 16px;
- transition: background-color 0.2s ease;
+ border: none;
+ border-radius: 4px;
+ padding: 8px 16px;
+ font-weight: bold;
+ cursor: pointer;
+ background-color: #0066ff;
+ color: white;
+ margin-right: 16px;
+ transition: background-color 0.2s ease;
}
.confirm-button:hover {
- background-color: #023a76;
+ background-color: #023a76;
}
.cancel-button {
- border: none;
- border-radius: 4px;
- padding: 8px 16px;
- font-weight: bold;
- cursor: pointer;
- transition: background-color 0.2s ease;
- background-color: #f1f1f1;
- color: black;
+ border: none;
+ border-radius: 4px;
+ padding: 8px 16px;
+ font-weight: bold;
+ cursor: pointer;
+ transition: background-color 0.2s ease;
+ background-color: #f1f1f1;
+ color: black;
}
.cancel-button:hover {
- background-color: #afafaf;
+ background-color: #afafaf;
}
.modal {
- display: none;
- position: fixed;
- z-index: 1;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- overflow: auto;
- background-color: rgba(0, 0, 0, 0.4);
+ display: none;
+ position: fixed;
+ z-index: 1;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 400px;
- padding: 24px;
- background-color: #fefefe;
- box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px;
- border-radius: 8px;
- z-index: 10000;
- text-align: left;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 400px;
+ padding: 24px;
+ background-color: #fefefe;
+ box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px;
+ border-radius: 8px;
+ z-index: 10000;
+ text-align: left;
}
.block-count-dropdown {
- padding: 4px !important;
- font-size: 16px;
- border: 2px solid #ccc;
- border-radius: 8px;
- background: #dedededd;
- cursor: pointer;
- width: fit-content;
- text-align: center;
+ padding: 4px !important;
+ font-size: 16px;
+ border: 2px solid #ccc;
+ border-radius: 8px;
+ background: #dedededd;
+ cursor: pointer;
+ width: fit-content;
+ text-align: center;
}
.block-count-dropdown.expanded {
- max-height: 200px;
- overflow-y: auto;
+ max-height: 200px;
+ overflow-y: auto;
}
.message-container {
- display: flex;
- align-items: center;
- gap: 10px;
+ display: flex;
+ align-items: center;
+ gap: 10px;
}
.close {
- color: #aaa;
- float: right;
- font-size: 28px;
- font-weight: bold;
+ color: #aaa;
+ float: right;
+ font-size: 28px;
+ font-weight: bold;
}
.close:hover,
.close:focus {
- color: black;
- text-decoration: none;
- cursor: pointer;
+ color: black;
+ text-decoration: none;
+ cursor: pointer;
}
#search[type="text"] {
- width: 300px;
- box-sizing: border-box;
- position: absolute;
- background-color: white;
- background-repeat: no-repeat;
- padding: 4.5px 10px 4.5px 20px;
- -webkit-transition: width 0.4s ease-in-out;
- transition: width 0.4s ease-in-out;
- font-size: 24px;
- color: black;
- max-width: 100%;
+ width: 300px;
+ box-sizing: border-box;
+ position: absolute;
+ background-color: white;
+ background-repeat: no-repeat;
+ padding: 4.5px 10px 4.5px 20px;
+ -webkit-transition: width 0.4s ease-in-out;
+ transition: width 0.4s ease-in-out;
+ font-size: 24px;
+ color: black;
+ max-width: 100%;
}
#search:focus {
- border: 2px solid #87cefa;
+ border: 2px solid #87cefa;
}
#search.open {
- margin-top: 60px;
+ margin-top: 60px;
}
#helpfulSearchDiv {
- display: block !important;
- position: absolute;
- background-color: #f0f0f0;
- padding: 2px;
- border: 1px solid #ccc;
- width: 230px;
- z-index: 1;
+ display: block !important;
+ position: absolute;
+ background-color: #f0f0f0;
+ padding: 2px;
+ border: 1px solid #ccc;
+ width: 230px;
+ z-index: 1;
}
#helpfulSearch {
- padding: 2px;
- border: 2px solid grey;
- width: 220px;
- height: 20px;
- font-size: large;
+ padding: 2px;
+ border: 2px solid grey;
+ width: 220px;
+ height: 20px;
+ font-size: large;
}
#crossButton {
- position: absolute;
- top: 50%;
- right: -30px;
- transform: translateY(-50%);
- background: transparent;
- border: none;
- font-size: large;
- cursor: pointer;
+ position: absolute;
+ top: 50%;
+ right: -30px;
+ transform: translateY(-50%);
+ background: transparent;
+ border: none;
+ font-size: large;
+ cursor: pointer;
}
.trash-view {
- position: relative;
- background-color: white;
- max-width: 396px;
- max-height: 200px;
- overflow-y: auto;
- font-size: 16px;
- color: black;
- border: 2px solid #87cefa;
- list-style-type: none;
- margin: 0;
- padding: 0;
- text-align: left;
+ position: relative;
+ background-color: white;
+ max-width: 396px;
+ max-height: 200px;
+ overflow-y: auto;
+ font-size: 16px;
+ color: black;
+ border: 2px solid #87cefa;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ text-align: left;
}
.button-container {
- position: sticky;
- display: flex;
- justify-content: space-between;
- top: 0;
- z-index: 10;
- display: flex;
- gap: 10px;
- background: #2196F3;
- margin: 0;
- padding: 5px;
- border-bottom: 1px solid #d9d9d9;
+ position: sticky;
+ display: flex;
+ justify-content: space-between;
+ top: 0;
+ z-index: 10;
+ display: flex;
+ gap: 10px;
+ background: #2196f3;
+ margin: 0;
+ padding: 5px;
+ border-bottom: 1px solid #d9d9d9;
}
.trash-item {
- padding: 2px 12px;
- margin: 1px 0;
- border-radius: 4px;
- transition: background-color 0.3s;
+ padding: 2px 12px;
+ margin: 1px 0;
+ border-radius: 4px;
+ transition: background-color 0.3s;
}
.trash-item.hover {
- background-color: #d9d9d9;
+ background-color: #d9d9d9;
}
.trash-item-icon {
- width: 30px;
- height: 30px;
- margin-right: 10px;
- vertical-align: middle;
+ width: 30px;
+ height: 30px;
+ margin-right: 10px;
+ vertical-align: middle;
}
#restoreLastIcon,
#restoreAllIcon {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 48px;
- height: 48px;
- cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 48px;
+ cursor: pointer;
}
-
.material-icons.md-48 {
- font-size: 32px;
+ font-size: 32px;
}
-
.hidden {
- display: none;
+ display: none;
}
.ui-menu {
- position: relative;
- background-color: rgba(255, 255, 255, 1);
- max-width: 396px;
- max-height: 200px;
- overflow-y: auto;
- font-size: 18px;
- border: 2px solid #87cefa;
- list-style-type: none;
+ position: relative;
+ background-color: rgba(255, 255, 255, 1);
+ max-width: 396px;
+ max-height: 200px;
+ overflow-y: auto;
+ font-size: 18px;
+ border: 2px solid #87cefa;
+ list-style-type: none;
}
#ui-id-1 {
- margin: 0;
- padding: 0;
- -webkit-margin-before: 0;
- -webkit-margin-after: 0;
- -webkit-margin-start: 0;
- -webkit-margin-end: 0;
- -webkit-padding-start: 0;
- list-style-type: none;
+ margin: 0;
+ padding: 0;
+ -webkit-margin-before: 0;
+ -webkit-margin-after: 0;
+ -webkit-margin-start: 0;
+ -webkit-margin-end: 0;
+ -webkit-padding-start: 0;
+ list-style-type: none;
}
#ui-id-1 li {
- padding-top: 5px;
+ padding-top: 5px;
}
#ui-id-1 li img {
- margin-left: 10px;
+ margin-left: 10px;
}
#ui-id-1 li:before {
- margin-right: 5px;
- font-size: 20px;
- font-weight: bold;
- margin-left: 4px;
+ margin-right: 5px;
+ font-size: 20px;
+ font-weight: bold;
+ margin-left: 4px;
}
#ui-id-1 li:hover:before {
- background-color: #d0d3d4;
+ background-color: #d0d3d4;
}
.ui-state-focus {
- background-color: #d0d3d4;
+ background-color: #d0d3d4;
}
.scrollSearch {
- max-height: 215px;
- width: 380px;
- padding-left: 10px;
- margin-bottom: 10px;
- box-sizing: border-box;
- overflow-x: auto;
- overflow-y: auto;
+ max-height: 215px;
+ width: 380px;
+ padding-left: 10px;
+ margin-bottom: 10px;
+ box-sizing: border-box;
+ overflow-x: auto;
+ overflow-y: auto;
}
#myProgress {
- width: 180px;
- background-color: #92b5c8;
- position: absolute;
+ width: 180px;
+ background-color: #92b5c8;
+ position: absolute;
}
#myBar {
- width: 0%;
- height: 40px;
- background-color: #ffffff;
- line-height: 30px;
+ width: 0%;
+ height: 40px;
+ background-color: #ffffff;
+ line-height: 30px;
}
.blink {
- animation: blink-animation 1.5s infinite;
+ animation: blink-animation 1.5s infinite;
}
@keyframes blink-animation {
- 50% {
- opacity: 0;
- }
+ 50% {
+ opacity: 0;
+ }
}
/*CSS for load animation*/
#load-container {
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- position: fixed;
- display: block;
- background-color: #fff;
- opacity: 0.7;
- z-index: 99;
- text-align: center;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ position: fixed;
+ display: block;
+ background-color: #fff;
+ opacity: 0.7;
+ z-index: 99;
+ text-align: center;
}
#messageText {
- margin-top: 200px;
- font-size: 30px;
- z-index: 100;
+ margin-top: 200px;
+ font-size: 30px;
+ z-index: 100;
}
#loading-image {
- z-index: 100;
+ z-index: 100;
}
#popdown-palette {
- display: none;
- position: absolute;
- z-index: 9999;
- top: 0;
- left: 0;
- width: 60%;
- max-height: 100%;
- overflow-y: scroll;
- background: rgba(255, 255, 255, 0.85);
+ display: none;
+ position: absolute;
+ z-index: 9999;
+ top: 0;
+ left: 0;
+ width: 60%;
+ max-height: 100%;
+ overflow-y: scroll;
+ background: rgba(255, 255, 255, 0.85);
}
#popdown-palette:last-child {
- margin-bottom: 2.5em;
+ margin-bottom: 2.5em;
}
#popdown-palette.show {
- display: block;
+ display: block;
}
-#popdown-palette.show~.canvasHolder {
- filter: blur(10px);
- -webkit-filter: blur(10px);
+#popdown-palette.show ~ .canvasHolder {
+ filter: blur(10px);
+ -webkit-filter: blur(10px);
}
#popdown-palette ul {
- display: none;
+ display: none;
}
#popdown-palette .palette.show ul {
- display: block;
+ display: block;
}
#popdown-palette li {
- list-style: none;
+ list-style: none;
}
#popdown-palette h3 {
- border-bottom: 1px solid #444;
- width: 50%;
- padding: 0 10%;
+ border-bottom: 1px solid #444;
+ width: 50%;
+ padding: 0 10%;
}
#popdown-palette h2 span {
- vertical-align: 50%;
+ vertical-align: 50%;
}
#popdown-palette h2 img {
- display: block;
- float: right;
+ display: block;
+ float: right;
}
#popdown-palette .palette.show .show-button {
- display: none;
+ display: none;
}
#popdown-palette .palette:not(.show) .hide-button {
- display: none;
+ display: none;
}
#popdown-palette .palette:not(.show) .popout-button {
- display: none;
+ display: none;
}
div.back {
- display: block;
- position: fixed;
- height: 2.5em;
- width: 100%;
- top: calc(100% - 2.5em);
- background-color: #4682b4;
+ display: block;
+ position: fixed;
+ height: 2.5em;
+ width: 100%;
+ top: calc(100% - 2.5em);
+ background-color: #4682b4;
}
div.back h2 {
- margin-top: 0.25em;
- border-bottom: none !important;
- color: white;
+ margin-top: 0.25em;
+ border-bottom: none !important;
+ color: white;
}
div.back:active {
- background-color: black;
+ background-color: black;
}
.canvasHolder {
- transition: 0.75s ease all;
- transform-origin: 0 0;
- position: absolute;
- top: 0;
- left: 0;
+ transition: 0.75s ease all;
+ transform-origin: 0 0;
+ position: absolute;
+ top: 0;
+ left: 0;
- height: calc(var(--vh, 1vh) * 100);
+ height: calc(var(--vh, 1vh) * 100);
}
.canvasHolder.hide {
- display: none;
+ display: none;
}
nav {
- position: fixed;
- top: 0px;
- left: 0px;
- z-index: 100;
- background-color: #8bc34a;
- height: 64px;
- width: 100%;
- box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
- font: 32px sans;
- vertical-align: middle;
- line-height: 64px;
- color: white;
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ z-index: 100;
+ background-color: #8bc34a;
+ height: 64px;
+ width: 100%;
+ box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
+ font: 32px sans;
+ vertical-align: middle;
+ line-height: 64px;
+ color: white;
}
nav .nav-container {
- padding: 0 0px;
+ padding: 0 0px;
}
nav h1 {
- font-size: 32px;
- position: relative;
- top: -12px;
- display: inline;
+ font-size: 32px;
+ position: relative;
+ top: -12px;
+ display: inline;
}
nav imghover {
- background-color: rgba(255, 255, 255, 0.3);
+ background-color: rgba(255, 255, 255, 0.3);
}
nav imgactive {
- background-color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.8);
}
nav ul {
- list-style: none;
- text-align: right;
- display: inline;
+ list-style: none;
+ text-align: right;
+ display: inline;
}
nav ul li {
- display: inline;
- padding-right: 12px;
- /* float: right; */
+ display: inline;
+ padding-right: 12px;
+ /* float: right; */
}
.nav-spacer {
- height: 96px;
+ height: 96px;
}
.content {
- padding: 0px;
- margin: 0px;
- display: flex;
- flex-wrap: wrap;
+ padding: 0px;
+ margin: 0px;
+ display: flex;
+ flex-wrap: wrap;
}
.content li {
- display: block;
- list-style: none;
- width: 23.75%;
- float: left;
- padding-left: 1%;
+ display: block;
+ list-style: none;
+ width: 23.75%;
+ float: left;
+ padding-left: 1%;
}
.content li[current="true"] img.thumbnail {
- opacity: 0;
+ opacity: 0;
}
@media (max-width: 500px) {
- .content li {
- width: 48.5%;
- padding-left: 1%;
- }
+ .content li {
+ width: 48.5%;
+ padding-left: 1%;
+ }
- .canvasHolder.hide {
- transform: scale(0.485);
- }
+ .canvasHolder.hide {
+ transform: scale(0.485);
+ }
- nav h1 {
- display: none;
- }
+ nav h1 {
+ display: none;
+ }
}
@media (max-width: 800px) and (min-width: 501px) {
- .content li {
- width: 32%;
- padding-left: 1%;
- }
+ .content li {
+ width: 32%;
+ padding-left: 1%;
+ }
- .canvasHolder.hide {
- transform: scale(0.32);
- }
+ .canvasHolder.hide {
+ transform: scale(0.32);
+ }
}
.content li img.thumbnail {
- background: #96d3f3;
- width: 100%;
- padding: 0;
+ background: #96d3f3;
+ width: 100%;
+ padding: 0;
}
.content li .options,
.content li .options input {
- text-align: center;
+ text-align: center;
}
#planet-iframe {
- width: 100vw;
- height: calc(var(--vh, 1vh) * 100);
- background-color: #fff;
- position: absolute;
- top: 0;
- left: 0;
+ width: 100vw;
+ height: calc(var(--vh, 1vh) * 100);
+ background-color: #fff;
+ position: absolute;
+ top: 0;
+ left: 0;
}
iframe,
canvas {
- overflow: clip !important;
- width: 100%;
- height: 100%;
+ overflow: clip !important;
+ width: 100%;
+ height: 100%;
}
.projectname {
- word-wrap: break-word;
+ word-wrap: break-word;
}
img.icon {
- border-radius: 100%;
- width: 30px;
+ border-radius: 100%;
+ width: 30px;
}
img.icon:hover {
- background-color: rgba(139, 195, 74, 0.8);
+ background-color: rgba(139, 195, 74, 0.8);
}
#loading-image-container {
- z-index: 89999;
+ z-index: 89999;
}
body {
- background-color: #92b5c8 !important;
- /* 2.5B 7/4 */
- padding: 0;
- margin: 0;
- font-family: sans-serif;
- overflow: hidden;
+ background-color: #92b5c8 !important;
+ /* 2.5B 7/4 */
+ padding: 0;
+ margin: 0;
+ font-family: sans-serif;
+ overflow: hidden;
}
body.noScroll {
- overflow: hidden;
+ overflow: hidden;
}
body.samples-shown {
- overflow-y: scroll;
- background: white !important;
+ overflow-y: scroll;
+ background: white !important;
}
select {
- background-color: #88e20a;
- text-align: center;
- font-weight: bold !important;
- resize: none !important;
- padding: 0 !important;
- border: 0 !important;
- width: 20px;
+ background-color: #88e20a;
+ text-align: center;
+ font-weight: bold !important;
+ resize: none !important;
+ padding: 0 !important;
+ border: 0 !important;
+ width: 20px;
}
input.input {
- background-color: #fff !important;
- text-align: center;
- font-weight: bold !important;
- font-size: 24px !important;
- resize: none !important;
- padding: 0px !important;
- border: 1px !important;
- width: 200px;
+ background-color: #fff !important;
+ text-align: center;
+ font-weight: bold !important;
+ font-size: 24px !important;
+ resize: none !important;
+ padding: 0px !important;
+ border: 1px !important;
+ width: 200px;
}
input.text {
- background-color: #ff5942 !important;
- text-align: center;
- font-weight: bold !important;
- resize: none !important;
- padding: 0 !important;
- border: 0 !important;
- width: 100px;
+ background-color: #ff5942 !important;
+ text-align: center;
+ font-weight: bold !important;
+ resize: none !important;
+ padding: 0 !important;
+ border: 0 !important;
+ width: 100px;
}
input.boolean {
- background-color: #c96df3 !important;
- /* */
- text-align: center;
- font-weight: bold !important;
- resize: none !important;
- padding: 0 !important;
- border: 0 !important;
- width: 100px;
+ background-color: #c96df3 !important;
+ /* */
+ text-align: center;
+ font-weight: bold !important;
+ resize: none !important;
+ padding: 0 !important;
+ border: 0 !important;
+ width: 100px;
}
input.number {
- background-color: #ff5293 !important;
- /* 0RP 8/10 */
- text-align: center;
- font-weight: bold !important;
- resize: none !important;
- padding: 0 !important;
- border: 0 !important;
- width: 100px;
+ background-color: #ff5293 !important;
+ /* 0RP 8/10 */
+ text-align: center;
+ font-weight: bold !important;
+ resize: none !important;
+ padding: 0 !important;
+ border: 0 !important;
+ width: 100px;
}
input.musicratio1,
input.musicratio2 {
- background-color: #8cc6ff !important;
- text-align: center;
- font-size: 24px;
- font-weight: bold !important;
- resize: none !important;
- padding: 0 !important;
- border: 0 !important;
- width: 100% !important;
- height: 100% !important;
+ background-color: #8cc6ff !important;
+ text-align: center;
+ font-size: 24px;
+ font-weight: bold !important;
+ resize: none !important;
+ padding: 0 !important;
+ border: 0 !important;
+ width: 100% !important;
+ height: 100% !important;
}
input.BPMInput {
- background-color: #8cc6ff !important;
- text-align: center;
- font-size: 24px;
- font-weight: bold !important;
- resize: none !important;
- padding: 0 !important;
- border: 0 !important;
- width: 100% !important;
- height: 100% !important;
+ background-color: #8cc6ff !important;
+ text-align: center;
+ font-size: 24px;
+ font-weight: bold !important;
+ resize: none !important;
+ padding: 0 !important;
+ border: 0 !important;
+ width: 100% !important;
+ height: 100% !important;
}
table {
- border-collapse: separate;
- border-spacing: 1px 1px;
+ border-collapse: separate;
+ border-spacing: 1px 1px;
}
#canvas {
- overflow-y: visible;
+ overflow-y: visible;
}
#statusDiv {
- position: absolute;
- top: 20%;
- left: 20%;
- background: rgba(255, 255, 255, 0.85) !important;
+ position: absolute;
+ top: 20%;
+ left: 20%;
+ background: rgba(255, 255, 255, 0.85) !important;
}
#statusTableDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85) !important;
- width: 680px;
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85) !important;
+ width: 680px;
}
#statusButtonsDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85);
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85);
}
#statusOuterDiv {
- position: absolute;
- left: 0px;
- top: 0px;
- right: 5em;
- overflow-y: auto;
- overflow-x: none;
- background: rgba(255, 255, 255, 0.85);
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ right: 5em;
+ overflow-y: auto;
+ overflow-x: none;
+ background: rgba(255, 255, 255, 0.85);
}
#statusInnerDiv {
- overflow-x: auto;
- margin-left: 53px;
+ overflow-x: auto;
+ margin-left: 53px;
}
#playbackDiv {
- position: absolute;
- top: 20%;
- left: 20%;
- background: rgba(255, 255, 255, 0.85) !important;
+ position: absolute;
+ top: 20%;
+ left: 20%;
+ background: rgba(255, 255, 255, 0.85) !important;
}
#playbackTableDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85) !important;
- width: 680px;
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85) !important;
+ width: 680px;
}
#playbackButtonsDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85);
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85);
}
#playbackOuterDiv {
- position: absolute;
- left: 0px;
- top: 0px;
- right: 5em;
- overflow-y: auto;
- overflow-x: none;
- background: rgba(255, 255, 255, 0.85);
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ right: 5em;
+ overflow-y: auto;
+ overflow-x: none;
+ background: rgba(255, 255, 255, 0.85);
}
#playbackInnerDiv {
- overflow-x: auto;
- margin-left: 53px;
+ overflow-x: auto;
+ margin-left: 53px;
}
#ptmDiv {
- position: absolute;
- top: 20%;
- left: 20%;
- background: rgba(255, 255, 255, 0.85) !important;
+ position: absolute;
+ top: 20%;
+ left: 20%;
+ background: rgba(255, 255, 255, 0.85) !important;
}
#ptmTableDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 1 !important;
- background: rgba(255, 255, 255, 0.85) !important;
- width: 680px;
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 1 !important;
+ background: rgba(255, 255, 255, 0.85) !important;
+ width: 680px;
}
#ptmButtonsDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85);
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85);
}
#ptmOuterDiv {
- position: absolute;
- left: 0px;
- top: 0px;
- right: 5em;
- overflow-y: auto;
- overflow-x: none;
- background: rgba(255, 255, 255, 0.85);
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ right: 5em;
+ overflow-y: auto;
+ overflow-x: none;
+ background: rgba(255, 255, 255, 0.85);
}
#ptmInnerDiv {
- overflow-x: auto;
- margin-left: 53px;
+ overflow-x: auto;
+ margin-left: 53px;
}
#arpeggioDiv {
- position: absolute;
- top: 20%;
- left: 20%;
- background: rgba(255, 255, 255, 0.85) !important;
+ position: absolute;
+ top: 20%;
+ left: 20%;
+ background: rgba(255, 255, 255, 0.85) !important;
}
#arpeggioTableDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 1 !important;
- background: rgba(255, 255, 255, 0.85) !important;
- width: 680px;
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 1 !important;
+ background: rgba(255, 255, 255, 0.85) !important;
+ width: 680px;
}
#arpeggioButtonsDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85);
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85);
}
#arpeggioOuterDiv {
- position: absolute;
- left: 0px;
- top: 0px;
- right: 5em;
- overflow-y: auto;
- overflow-x: none;
- background: rgba(255, 255, 255, 0.85);
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ right: 5em;
+ overflow-y: auto;
+ overflow-x: none;
+ background: rgba(255, 255, 255, 0.85);
}
#arpeggioInnerDiv {
- overflow-x: auto;
- margin-left: 53px;
+ overflow-x: auto;
+ margin-left: 53px;
}
#modeDiv {
- position: absolute;
- top: 20%;
- left: 20%;
- background: rgba(255, 255, 255, 0.85) !important;
+ position: absolute;
+ top: 20%;
+ left: 20%;
+ background: rgba(255, 255, 255, 0.85) !important;
}
#modeTableDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85) !important;
- width: 680px;
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85) !important;
+ width: 680px;
}
#modeButtonsDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85);
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85);
}
#meterDiv {
- position: absolute;
- top: 20%;
- left: 20%;
- background: rgba(255, 255, 255, 0.85) !important;
+ position: absolute;
+ top: 20%;
+ left: 20%;
+ background: rgba(255, 255, 255, 0.85) !important;
}
#meterTableDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85) !important;
- width: 680px;
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85) !important;
+ width: 680px;
}
#meterButtonsDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85);
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85);
}
#pdmDiv {
- position: absolute;
- top: 20%;
- left: 20%;
- background: rgba(255, 255, 255, 0.85) !important;
+ position: absolute;
+ top: 20%;
+ left: 20%;
+ background: rgba(255, 255, 255, 0.85) !important;
}
#pdmTableDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85) !important;
- width: 680px;
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85) !important;
+ width: 680px;
}
#pdmButtonsDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85);
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85);
}
#pdmOuterDiv {
- position: absolute;
- left: 0px;
- top: 0px;
- right: 5em;
- background: rgba(255, 255, 255, 0.85);
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ right: 5em;
+ background: rgba(255, 255, 255, 0.85);
}
#pdmInnerDiv {
- overflow-x: auto;
- overflow-y: auto;
+ overflow-x: auto;
+ overflow-y: auto;
}
#mkbDiv {
- position: absolute;
- top: 0px;
- left: 0px;
- background: rgba(255, 255, 255, 0.85) !important;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ background: rgba(255, 255, 255, 0.85) !important;
}
#mkbKeyboardDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85) !important;
- width: 1020px;
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85) !important;
+ width: 1020px;
}
#mkbTableDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85) !important;
- width: 1020px;
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85) !important;
+ width: 1020px;
}
#mkbButtonsDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85);
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85);
}
#mkbOuterDiv {
- position: absolute;
- max-height: 400px;
- overflow-y: scroll;
- width: 100% !important;
- display: flex;
- left: 0px;
- top: 140px;
- right: 5em;
- background: rgba(255, 255, 255, 0.85);
+ position: absolute;
+ max-height: 400px;
+ overflow-y: scroll;
+ width: 100% !important;
+ display: flex;
+ left: 0px;
+ top: 140px;
+ right: 5em;
+ background: rgba(255, 255, 255, 0.85);
}
#mkbInnerDiv {
- overflow-x: auto;
- margin-left: 0px;
+ overflow-x: auto;
+ margin-left: 0px;
}
#tempoDiv {
- position: absolute;
- top: 20%;
- left: 20%;
- background: rgba(255, 255, 255, 0.85) !important;
- user-select: none;
- -webkit-user-select: none;
+ position: absolute;
+ top: 20%;
+ left: 20%;
+ background: rgba(255, 255, 255, 0.85) !important;
+ user-select: none;
+ -webkit-user-select: none;
}
#tempoButtonsDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85);
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85);
}
#right-arrow {
- right: 25px;
- background: url("../header-icons/right-arrow.png");
+ right: 25px;
+ background: url("../header-icons/right-arrow.png");
}
#left-arrow {
- left: 10px;
- background: url("../header-icons/left-arrow.png");
+ left: 10px;
+ background: url("../header-icons/left-arrow.png");
}
#left-arrow.disabled {
- opacity: 0.5;
- cursor: not-allowed;
+ opacity: 0.5;
+ cursor: not-allowed;
}
#right-arrow.disabled {
- opacity: 0.5;
- cursor: not-allowed;
+ opacity: 0.5;
+ cursor: not-allowed;
}
#playbackBtn.disabled {
- opacity: 0.5;
- cursor: not-allowed;
+ opacity: 0.5;
+ cursor: not-allowed;
}
#right-arrow,
#left-arrow {
- position: absolute;
- background-size: 40px;
- top: 195px;
- height: 40px;
- width: 40px;
+ position: absolute;
+ background-size: 40px;
+ top: 195px;
+ height: 40px;
+ width: 40px;
}
.hover:hover {
- cursor: pointer;
+ cursor: pointer;
}
@media (max-width: 600px) {
-
- #right-arrow,
- #left-arrow {
- height: 30px;
- width: 30px;
- background-size: 30px;
- }
+ #right-arrow,
+ #left-arrow {
+ height: 30px;
+ width: 30px;
+ background-size: 30px;
+ }
}
@media (max-width: 450px) {
-
- #right-arrow,
- #left-arrow {
- height: 25px;
- width: 25px;
- background-size: 25px;
- }
+ #right-arrow,
+ #left-arrow {
+ height: 25px;
+ width: 25px;
+ background-size: 25px;
+ }
}
@media (max-width: 320px) {
-
- #right-arrow,
- #left-arrow {
- height: 20px;
- width: 20px;
- background-size: 20px;
- }
+ #right-arrow,
+ #left-arrow {
+ height: 20px;
+ width: 20px;
+ background-size: 20px;
+ }
}
.top-wrapper {
- width: 100%;
- position: absolute;
- top: 0;
- background: #2196f3;
- font-family: sans-serif;
- display: flex;
- flex-direction: column;
- justify-content: center;
- color: #fff;
- font-size: 1.1em;
- text-align: center;
- height: 55px;
+ width: 100%;
+ position: absolute;
+ top: 0;
+ background: #2196f3;
+ font-family: sans-serif;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ color: #fff;
+ font-size: 1.1em;
+ text-align: center;
+ height: 55px;
}
.close-button {
- position: absolute;
- font-size: 1em;
- right: 410px;
- width: 18px;
- height: 18px;
- background: url("../header-icons/close.png");
- background-size: 18px;
- cursor: pointer;
+ position: absolute;
+ font-size: 1em;
+ right: 410px;
+ width: 18px;
+ height: 18px;
+ background: url("../header-icons/close.png");
+ background-size: 18px;
+ cursor: pointer;
}
.drag-button {
- position: absolute;
- right: 20px;
- background: url("../header-icons/move.png");
- background-size: 22px;
- height: 22px;
- width: 22px;
- cursor: move;
+ position: absolute;
+ right: 20px;
+ background: url("../header-icons/move.png");
+ background-size: 22px;
+ height: 22px;
+ width: 22px;
+ cursor: move;
}
#helpDiv h1 {
- text-align: left;
- padding-left: 30px;
- font-size: 1.5em;
+ text-align: left;
+ padding-left: 30px;
+ font-size: 1.5em;
}
#helpDiv p:first-child {
- padding-left: -10px;
+ padding-left: -10px;
}
#helpDiv p:not(:first-child) {
- text-align: left;
- padding-left: 30px;
- font-size: 0.9em;
- line-height: 20px;
+ text-align: left;
+ padding-left: 30px;
+ font-size: 0.9em;
+ line-height: 20px;
}
#helpButtonsDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
}
#helpBodyDiv {
- position: relative;
- margin: 0 auto !important;
- left: 0 !important;
- border: 0 !important;
- overflow-x: hidden;
- overflow: visible;
- width: calc(100% - 130px) !important;
- max-width: 350px;
- padding: 1rem 1rem 0 1rem;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
+ position: relative;
+ margin: 0 auto !important;
+ left: 0 !important;
+ border: 0 !important;
+ overflow-x: hidden;
+ overflow: visible;
+ width: calc(100% - 130px) !important;
+ max-width: 350px;
+ padding: 1rem 1rem 0 1rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
}
#helpScrollWrapper {
- overflow-y: auto;
+ overflow-y: auto;
}
#helpBodyDiv .heading,
#helpBodyDiv .description,
#helpBodyDiv .message {
- text-align: center;
- line-height: 1.2;
- margin: auto;
+ text-align: center;
+ line-height: 1.2;
+ margin: auto;
}
#helpBodyDiv .icon-container {
- width: 30%;
- margin-top: 1.5rem;
- padding: 1px 1.2px;
- display: flex;
- justify-content: space-between;
- align-items: center;
+ width: 30%;
+ margin-top: 1.5rem;
+ padding: 1px 1.2px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
}
.icon-container #findIcon,
.icon-container #loadButton,
.icon-container #advIconText {
- transform: scale(1.2);
+ transform: scale(1.2);
}
#helpBodyDiv .blockImage-wrapper {
- height: 90%;
- width: 100%;
+ height: 90%;
+ width: 100%;
}
#helpBodyDiv .blockImage {
- padding-top: 2rem;
- object-fit: contain;
- width: 100%;
- height: 100%;
+ padding-top: 2rem;
+ object-fit: contain;
+ width: 100%;
+ height: 100%;
}
@media (max-width: 600px) {
- #helpBodyDiv .icon-container {
- margin-top: 0;
- padding-top: 0;
- }
+ #helpBodyDiv .icon-container {
+ margin-top: 0;
+ padding-top: 0;
+ }
- .icon-container #findIcon,
- .icon-container #loadButton,
- .icon-container #advIconText {
- transform: scale(1.1);
- }
+ .icon-container #findIcon,
+ .icon-container #loadButton,
+ .icon-container #advIconText {
+ transform: scale(1.1);
+ }
}
@media (max-width: 450px) {
- #helpBodyDiv {
- width: 240px;
- }
+ #helpBodyDiv {
+ width: 240px;
+ }
}
@media (max-width: 320px) {
- #helpBodyDiv {
- width: 200px;
- }
+ #helpBodyDiv {
+ width: 200px;
+ }
}
#pscDiv {
- position: absolute;
- top: 20%;
- left: 20%;
- background: rgba(255, 255, 255, 0.85) !important;
+ position: absolute;
+ top: 20%;
+ left: 20%;
+ background: rgba(255, 255, 255, 0.85) !important;
}
#pscTableDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85) !important;
- width: 680px;
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85) !important;
+ width: 680px;
}
#pscButtonsDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85);
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85);
}
#pscOuterDiv {
- position: absolute;
- left: 0px;
- top: 0px;
- right: 5em;
- overflow-y: auto;
- overflow-x: none;
- background: rgba(255, 255, 255, 0.85);
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ right: 5em;
+ overflow-y: auto;
+ overflow-x: none;
+ background: rgba(255, 255, 255, 0.85);
}
#pscInnerDiv {
- overflow-x: auto;
- margin-left: 53px;
+ overflow-x: auto;
+ margin-left: 53px;
}
#timbreDiv {
- position: absolute;
- top: 20%;
- left: 20%;
- background: rgba(255, 255, 255, 0.85) !important;
+ position: absolute;
+ top: 20%;
+ left: 20%;
+ background: rgba(255, 255, 255, 0.85) !important;
}
#timbreTableDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85) !important;
- width: 590px;
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85) !important;
+ width: 590px;
}
#timbreButtonsDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85);
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85);
}
#timbreOuterDiv {
- position: absolute;
- left: 0px;
- top: 0px;
- right: 5em;
- overflow-y: auto;
- overflow-x: none;
- background: rgba(255, 255, 255, 0.85);
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ right: 5em;
+ overflow-y: auto;
+ overflow-x: none;
+ background: rgba(255, 255, 255, 0.85);
}
#timbreInnerDiv {
- overflow-x: auto;
- margin-left: 53px;
+ overflow-x: auto;
+ margin-left: 53px;
}
input.timbreName {
- background-color: #8cc6ff !important;
- text-align: center;
- font-size: 24px;
- resize: none !important;
- padding: 0 !important;
- border: 0 !important;
- width: 100% !important;
- height: 100% !important;
+ background-color: #8cc6ff !important;
+ text-align: center;
+ font-size: 24px;
+ resize: none !important;
+ padding: 0 !important;
+ border: 0 !important;
+ width: 100% !important;
+ height: 100% !important;
}
#temperamentDiv {
- position: absolute;
- top: 20%;
- left: 20%;
- background: rgba(255, 255, 255, 0.85) !important;
+ position: absolute;
+ top: 20%;
+ left: 20%;
+ background: rgba(255, 255, 255, 0.85) !important;
}
#temperamentTableDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(204, 0, 102, 0) !important;
- width: 560px;
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(204, 0, 102, 0) !important;
+ width: 560px;
}
#temperamentButtonsDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85);
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85);
}
#temperamentOuterDiv {
- position: absolute;
- left: 0px;
- top: 0px;
- right: 5em;
- overflow-y: auto;
- overflow-x: none;
- background: rgba(255, 255, 255, 0.85);
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ right: 5em;
+ overflow-y: auto;
+ overflow-x: none;
+ background: rgba(255, 255, 255, 0.85);
}
#temperamentInnerDiv {
- overflow-x: auto;
- margin-left: 53px;
+ overflow-x: auto;
+ margin-left: 53px;
}
#graph {
- overflow-y: scroll;
- height: 340px;
+ overflow-y: scroll;
+ height: 340px;
}
#userEdit input {
- height: 40px;
- width: 40px;
- background: #8cc6ff;
- border: 1px solid black;
- text-align: center;
+ height: 40px;
+ width: 40px;
+ background: #8cc6ff;
+ border: 1px solid black;
+ text-align: center;
}
.popup {
- position: absolute;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- background-color: white;
- height: 68px;
- width: 160px;
- border: 1px solid black;
+ position: absolute;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ background-color: white;
+ height: 68px;
+ width: 160px;
+ border: 1px solid black;
}
.popup .popuptext {
- color: white;
- text-align: center;
- border-radius: 6px;
- position: absolute;
- z-index: 1;
+ color: white;
+ text-align: center;
+ border-radius: 6px;
+ position: absolute;
+ z-index: 1;
}
.popup .show {
- visibility: visible;
- -webkit-animation: fadeIn 1s;
- animation: fadeIn 1s;
+ visibility: visible;
+ -webkit-animation: fadeIn 1s;
+ animation: fadeIn 1s;
}
@-webkit-keyframes fadeIn {
- from {
- opacity: 0;
- }
+ from {
+ opacity: 0;
+ }
- to {
- opacity: 1;
- }
+ to {
+ opacity: 1;
+ }
}
@keyframes fadeIn {
- from {
- opacity: 0;
- }
+ from {
+ opacity: 0;
+ }
- to {
- opacity: 1;
- }
+ to {
+ opacity: 1;
+ }
}
#download {
- position: absolute;
- top: 100px;
- left: 200px;
+ position: absolute;
+ top: 100px;
+ left: 200px;
}
#rulerDiv {
- position: absolute;
- top: 20%;
- left: 30%;
- background: rgba(255, 255, 255, 0.85) !important;
+ position: absolute;
+ top: 20%;
+ left: 30%;
+ background: rgba(255, 255, 255, 0.85) !important;
}
#rulerTableDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85) !important;
- width: 680px;
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85) !important;
+ width: 680px;
}
#rulerButtonsDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85);
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85);
}
#rulerOuterDiv {
- position: absolute;
- left: 0px;
- top: 0px;
- right: 5em;
- overflow-y: auto;
- overflow-x: none;
- background: rgba(255, 255, 255, 0.85);
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ right: 5em;
+ overflow-y: auto;
+ overflow-x: none;
+ background: rgba(255, 255, 255, 0.85);
}
#rulerInnerDiv {
- overflow-x: auto !important;
- margin-left: 53px;
+ overflow-x: auto !important;
+ margin-left: 53px;
}
#sliderDiv {
- position: absolute;
- top: 20%;
- left: 30%;
- background: rgba(255, 255, 255, 0.85) !important;
+ position: absolute;
+ top: 20%;
+ left: 30%;
+ background: rgba(255, 255, 255, 0.85) !important;
}
#sliderTableDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85) !important;
- width: 680px;
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85) !important;
+ width: 680px;
}
#sliderButtonsDiv {
- position: relative;
- left: 0px;
- top: 0px;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85);
+ position: relative;
+ left: 0px;
+ top: 0px;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85);
}
#sliderOuterDiv {
- position: absolute;
- left: 0px;
- top: 0px;
- right: 5em;
- overflow-y: auto;
- overflow-x: none;
- background: rgba(255, 255, 255, 0.85);
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ right: 5em;
+ overflow-y: auto;
+ overflow-x: none;
+ background: rgba(255, 255, 255, 0.85);
}
#sliderInnerDiv {
- overflow-x: auto;
+ overflow-x: auto;
}
.pitchSlider::-webkit-slider-thumb {
- -webkit-appearance: none;
- box-shadow: 1px 1px 1px #000031;
- border: 1px solid #00001e;
- height: 45px;
- width: 15px;
- border-radius: 1px;
- background: blue;
- cursor: pointer;
- margin-top: -8px;
+ -webkit-appearance: none;
+ box-shadow: 1px 1px 1px #000031;
+ border: 1px solid #00001e;
+ height: 45px;
+ width: 15px;
+ border-radius: 1px;
+ background: blue;
+ cursor: pointer;
+ margin-top: -8px;
}
.pitchSlider::-moz-range-thumb {
- box-shadow: 1px 1px 1px #000031;
- border: 1px solid #00001e;
- height: 45px;
- width: 15px;
- border-radius: 1px;
- background: blue;
- cursor: pointer;
+ box-shadow: 1px 1px 1px #000031;
+ border: 1px solid #00001e;
+ height: 45px;
+ width: 15px;
+ border-radius: 1px;
+ background: blue;
+ cursor: pointer;
}
.headcol {
- user-select: none;
- text-align: center;
- vertical-align: middle;
+ user-select: none;
+ text-align: center;
+ vertical-align: middle;
}
.labelcol {
- user-select: none;
- text-align: center;
- vertical-align: middle;
+ user-select: none;
+ text-align: center;
+ vertical-align: middle;
}
#pitchstaircase {
- position: absolute;
- top: 20%;
- left: 30%;
- border-style: solid;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85);
- user-select: none;
- -webkit-user-select: none;
- overflow-y: scroll !important;
+ position: absolute;
+ top: 20%;
+ left: 30%;
+ border-style: solid;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85);
+ user-select: none;
+ -webkit-user-select: none;
+ overflow-y: scroll !important;
}
#playPitch {
- position: absolute;
- direction: rtl;
- top: 20%;
- left: 25%;
- border-style: solid;
- border: 0 !important;
- background: rgba(255, 255, 255, 0.85);
- user-select: none;
- -webkit-user-select: none;
- overflow-y: scroll !important;
+ position: absolute;
+ direction: rtl;
+ top: 20%;
+ left: 25%;
+ border-style: solid;
+ border: 0 !important;
+ background: rgba(255, 255, 255, 0.85);
+ user-select: none;
+ -webkit-user-select: none;
+ overflow-y: scroll !important;
}
.progressBar {
- width: 1%;
- height: 70px;
- background-color: #4caf50;
+ width: 1%;
+ height: 70px;
+ background-color: #4caf50;
}
.insideDivEnv {
- margin-top: 10px;
- height: 50px;
- margin-left: 40px;
+ margin-top: 10px;
+ height: 50px;
+ margin-left: 40px;
}
.insideDivFilter {
- margin-top: -30px;
- height: 50px;
- margin-left: 40px;
+ margin-top: -30px;
+ height: 50px;
+ margin-left: 40px;
}
.insideDivOsc {
- margin-top: -30px;
- height: 50px;
- margin-left: 40px;
+ margin-top: -30px;
+ height: 50px;
+ margin-left: 40px;
}
.insideDivEffects {
- margin-top: -30px;
- height: 50px;
- margin-left: 200px;
+ margin-top: -30px;
+ height: 50px;
+ margin-left: 200px;
}
.insideDivSynth {
- margin-top: -30px;
- height: 50px;
- margin-left: 200px;
+ margin-top: -30px;
+ height: 50px;
+ margin-left: 200px;
}
.btn {
- background-color: #90c100;
- margin-top: 6px;
- height: 24px;
- width: 60px;
- border-color: #90c100;
+ background-color: #90c100;
+ margin-top: 6px;
+ height: 24px;
+ width: 60px;
+ border-color: #90c100;
}
.circle {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- font-size: 25px;
- color: #fff;
- line-height: 40px;
- text-align: center;
- background: #000;
- float: left;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ font-size: 25px;
+ color: #fff;
+ line-height: 40px;
+ text-align: center;
+ background: #000;
+ float: left;
}
.rectangle {
- border: 4px solid green;
+ border: 4px solid green;
}
#wrapperEnv0,
#wrapperEnv1,
#wrapperEnv2,
#wrapperEnv3 {
- height: 50px;
- margin-left: 30px;
+ height: 50px;
+ margin-left: 30px;
}
.rangeslidervalue {
- display: inline-block;
- position: relative;
- /* width: $range-label-width; */
- color: blue;
- background-color: #c8c8c8;
- line-height: 20px;
- text-align: center;
- border-radius: 10px;
- border-color: green;
- padding: 5px 10px;
- margin-left: 8px;
+ display: inline-block;
+ position: relative;
+ /* width: $range-label-width; */
+ color: blue;
+ background-color: #c8c8c8;
+ line-height: 20px;
+ text-align: center;
+ border-radius: 10px;
+ border-color: green;
+ padding: 5px 10px;
+ margin-left: 8px;
}
.rangeslidervalue:after {
- position: absolute;
- top: 8px;
- left: -7px;
- width: 0;
- height: 0;
- border-top: 7px solid transparent;
- border-bottom: 7px solid transparent;
- content: "";
+ position: absolute;
+ top: 8px;
+ left: -7px;
+ width: 0;
+ height: 0;
+ border-top: 7px solid transparent;
+ border-bottom: 7px solid transparent;
+ content: "";
}
.filterselector {
- margin-top: -50px;
+ margin-top: -50px;
}
#selector0,
#selector1 {
- margin-top: -50px;
+ margin-top: -50px;
}
.sel {
- height: 35px;
- width: 150px;
- margin-left: 50px;
- margin-top: 20px;
+ height: 35px;
+ width: 150px;
+ margin-left: 50px;
+ margin-top: 20px;
}
#sel0,
#sel1 {
- height: 35px;
- width: 150px;
- margin-left: 50px;
- margin-top: 20px;
+ height: 35px;
+ width: 150px;
+ margin-left: 50px;
+ margin-top: 20px;
}
.wrapper {
- margin-left: 170px;
- height: 50px;
+ margin-left: 170px;
+ height: 50px;
}
#wrapper0,
@@ -1739,17 +1750,17 @@ input.timbreName {
#wrapper3,
#wrapper4,
#wrapper5 {
- margin-left: 170px;
- height: 50px;
+ margin-left: 170px;
+ height: 50px;
}
.s {
- color: #222;
- text-shadow: 0px 2px 3px #555;
- font-weight: bold;
- width: 100px;
- text-align: center;
- margin-left: -100px;
+ color: #222;
+ text-shadow: 0px 2px 3px #555;
+ font-weight: bold;
+ width: 100px;
+ text-align: center;
+ margin-left: -100px;
}
#s0,
@@ -1758,377 +1769,373 @@ input.timbreName {
#s3,
#s4,
#s5 {
- color: #222;
- text-shadow: 0px 2px 3px #555;
- font-weight: bold;
- width: 100px;
- text-align: center;
- margin-left: -100px;
+ color: #222;
+ text-shadow: 0px 2px 3px #555;
+ font-weight: bold;
+ width: 100px;
+ text-align: center;
+ margin-left: -100px;
}
#s0 {
- margin-top: 30px;
+ margin-top: 30px;
}
#sOsc0,
#sOsc1 {
- color: #222;
- text-shadow: 0px 2px 3px #555;
- font-weight: bold;
- width: 100px;
- text-align: center;
- margin-left: -100px;
+ color: #222;
+ text-shadow: 0px 2px 3px #555;
+ font-weight: bold;
+ width: 100px;
+ text-align: center;
+ margin-left: -100px;
}
#sOsc0 {
- margin-top: 30px;
+ margin-top: 30px;
}
#wrapperOsc0,
#wrapperOsc1 {
- margin-left: 170px;
- height: 50px;
+ margin-left: 170px;
+ height: 50px;
}
#selOsc {
- margin-top: -50px;
+ margin-top: -50px;
}
#selOsc1 {
- height: 35px;
- width: 150px;
- margin-left: 50px;
- margin-top: 20px;
+ height: 35px;
+ width: 150px;
+ margin-left: 50px;
+ margin-top: 20px;
}
#sFx0,
#sFx1,
#sFx2 {
- color: #222;
- text-shadow: 0px 2px 3px #555;
- font-weight: bold;
- width: 100px;
- text-align: center;
- margin-left: 60px;
- margin-top: 20px;
+ color: #222;
+ text-shadow: 0px 2px 3px #555;
+ font-weight: bold;
+ width: 100px;
+ text-align: center;
+ margin-left: 60px;
+ margin-top: 20px;
}
#sS0,
#sS1 {
- color: #222;
- text-shadow: 0px 2px 3px #555;
- font-weight: bold;
- width: 100px;
- text-align: center;
- margin-left: 60px;
- margin-top: 20px;
+ color: #222;
+ text-shadow: 0px 2px 3px #555;
+ font-weight: bold;
+ width: 100px;
+ text-align: center;
+ margin-left: 60px;
+ margin-top: 20px;
}
#synth0 {
- margin-left: 40px;
- font-weight: bold;
+ margin-left: 40px;
+ font-weight: bold;
}
#chosen {
- margin-left: 20px;
- font-style: italic;
- font-weight: bold;
+ margin-left: 20px;
+ font-style: italic;
+ font-weight: bold;
}
#effect0 {
- margin-left: 40px;
- font-weight: bold;
+ margin-left: 40px;
+ font-weight: bold;
}
.wheelNav {
- height: 350px;
- width: 350px;
- margin: auto;
- -moz-transition: ease 1s;
- -o-transition: ease 1s;
- -webkit-transition: ease 1s;
- transition: ease 1s;
- z-index: 10000;
+ height: 350px;
+ width: 350px;
+ margin: auto;
+ -moz-transition: ease 1s;
+ -o-transition: ease 1s;
+ -webkit-transition: ease 1s;
+ transition: ease 1s;
+ z-index: 10000;
}
-.wheelNav>svg {
- width: 100%;
- height: 100%;
+.wheelNav > svg {
+ width: 100%;
+ height: 100%;
}
#chooseKeyDiv {
- height: 350px;
- width: 350px;
- margin: auto;
- z-index: 10;
- background: #f2f2f2;
- border-radius: 50%;
- position: fixed;
+ height: 350px;
+ width: 350px;
+ margin: auto;
+ z-index: 10;
+ background: #f2f2f2;
+ border-radius: 50%;
+ position: fixed;
}
-#chooseKeyDiv>svg {
- width: 100%;
- height: 100%;
- transition: width 2s linear 1s;
+#chooseKeyDiv > svg {
+ width: 100%;
+ height: 100%;
+ transition: width 2s linear 1s;
}
#movable {
- margin: auto;
- z-index: 10;
- position: fixed;
- display: none;
- background: #f2f2f2;
- font-family: sans-serif;
- text-align: center;
- margin-left: 24px;
+ margin: auto;
+ z-index: 10;
+ position: fixed;
+ display: none;
+ background: #f2f2f2;
+ font-family: sans-serif;
+ text-align: center;
+ margin-left: 24px;
}
.radioBtn {
- cursor: pointer;
+ cursor: pointer;
}
@media (max-width: 880px) {
- .wheelNav {
- height: 330px;
- width: 330px;
- }
+ .wheelNav {
+ height: 330px;
+ width: 330px;
+ }
}
@media (max-width: 680px) {
- .wheelNav {
- height: 310px;
- width: 310px;
- }
+ .wheelNav {
+ height: 310px;
+ width: 310px;
+ }
}
@media (max-width: 480px) {
- .wheelNav {
- height: 290px;
- width: 290px;
- }
+ .wheelNav {
+ height: 290px;
+ width: 290px;
+ }
}
.inactiveLink {
- pointer-events: none !important;
- cursor: default !important;
+ pointer-events: none !important;
+ cursor: default !important;
}
.popupMsg {
- min-width: 50%;
- max-width: 55%;
- height: auto;
- position: absolute;
- top: 130px;
- left: 33%;
- border-radius: 8px;
- background-color: #8cc6ff;
- font-family: "Roboto", sans-serif;
- font-size: 19px;
- text-align: center;
- overflow: hidden;
- text-overflow: ellipsis;
- cursor: pointer;
- visibility: hidden;
+ min-width: 50%;
+ max-width: 55%;
+ height: auto;
+ position: absolute;
+ top: 130px;
+ left: 33%;
+ border-radius: 8px;
+ background-color: #8cc6ff;
+ font-family: "Roboto", sans-serif;
+ font-size: 19px;
+ text-align: center;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ cursor: pointer;
+ visibility: hidden;
}
.popupMsg a {
- color: black;
+ color: black;
}
#palette td,
thead,
tr,
table {
- border-collapse: collapse;
- padding: 0;
- margin: 0;
- border: 0;
+ border-collapse: collapse;
+ padding: 0;
+ margin: 0;
+ border: 0;
}
#palette th:hover,
#palette tr:hover {
- background-color: rgba(211, 211, 211, 0.7);
+ background-color: rgba(211, 211, 211, 0.7);
}
#printText {
- border: 2px solid rgb(150, 150, 150);
- z-index: 100;
- width: auto;
- word-wrap: break-word;
- overflow: auto;
- max-height: 60vh;
+ border: 2px solid rgb(150, 150, 150);
+ z-index: 100;
+ width: auto;
+ word-wrap: break-word;
+ overflow: auto;
+ max-height: 60vh;
}
#errorText {
- border: 2px solid red;
- background-color: pink;
- color: #000000;
+ border: 2px solid red;
+ background-color: pink;
+ color: #000000;
}
.contentWrapper {
- display: flex;
- align-items: flex-start;
- gap: 10px;
- padding: 10px;
+ display: flex;
+ align-items: flex-start;
+ gap: 10px;
+ padding: 10px;
}
#printText.show,
#errorText.show {
- visibility: visible;
+ visibility: visible;
}
#printTextContent,
#errorTextContent {
- flex-grow: 1;
- white-space: pre-wrap;
+ flex-grow: 1;
+ white-space: pre-wrap;
}
.msgCloseIcon {
- width: 28px;
- height: 28px;
- filter: invert(100%);
- transition: background-color 0.3s, filter 0.3s;
+ width: 28px;
+ height: 28px;
+ filter: invert(100%);
+ transition: background-color 0.3s, filter 0.3s;
}
.msgCloseIcon:hover {
- filter: invert(0%);
+ filter: invert(0%);
}
.disable_highlighting {
- user-select: none;
+ user-select: none;
}
#palette.flex-palette {
- display: flex !important;
- flex-direction: row !important;
+ display: flex !important;
+ flex-direction: row !important;
}
@media (max-width: 390px) {
-
- #right-arrow,
- #left-arrow {
- position: relative;
- top: auto;
- left: auto;
- margin-top: 10px;
- margin-left: auto;
- /* Center the arrows horizontally */
- margin-right: auto;
- display: block;
- clear: both;
- }
+ #right-arrow,
+ #left-arrow {
+ position: relative;
+ top: auto;
+ left: auto;
+ margin-top: 10px;
+ margin-left: auto;
+ /* Center the arrows horizontally */
+ margin-right: auto;
+ display: block;
+ clear: both;
+ }
}
.logo-container {
- position: absolute;
- bottom: 1px;
- /* Distance from the bottom */
- right: 23px;
- /* Distance from the right */
- padding: 0px;
- border-radius: 5px;
- cursor: pointer;
+ position: absolute;
+ bottom: 1px;
+ /* Distance from the bottom */
+ right: 23px;
+ /* Distance from the right */
+ padding: 0px;
+ border-radius: 5px;
+ cursor: pointer;
}
#link-to-sugarLabs:link,
#link-to-sugarLabs:visited,
#link-to-sugarLabs:hover,
#link-to-sugarLabs:active {
- color: #000;
+ color: #000;
}
.color-change {
- fill: #033CD2;
- stroke: #78E600;
- stroke-width: 3;
+ fill: #033cd2;
+ stroke: #78e600;
+ stroke-width: 3;
}
#persistentNotification {
- position: fixed;
- bottom: 20px;
- left: 50%;
- transform: translateX(-50%);
- background-color: #1E88E5;
- color: white;
- padding: 15px 20px;
- border-radius: 8px;
- box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
- font-size: 14px;
- font-weight: bold;
- z-index: 1000;
- text-align: center;
- min-width: 250px;
- max-width: 80%;
+ position: fixed;
+ bottom: 20px;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: #1e88e5;
+ color: white;
+ padding: 15px 20px;
+ border-radius: 8px;
+ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+ font-size: 14px;
+ font-weight: bold;
+ z-index: 1000;
+ text-align: center;
+ min-width: 250px;
+ max-width: 80%;
}
-
-
.chatInterface {
- display: flex;
- flex-direction: column;
- height: 100%;
- padding: "10px";
- background-color: white;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ padding: "10px";
+ background-color: white;
}
.chatLog {
- flex: 1;
- overflow-y: auto;
- border: 1px solid #ccc;
- padding: 10px;
- margin-bottom: 10px;
- display: flex;
- flex-direction: column;
+ flex: 1;
+ overflow-y: auto;
+ border: 1px solid #ccc;
+ padding: 10px;
+ margin-bottom: 10px;
+ display: flex;
+ flex-direction: column;
}
.select-mentor {
- width: 80px;
- background: white;
- border-width: 1px;
- border-style: solid;
- border-color: black;
+ width: 80px;
+ background: white;
+ border-width: 1px;
+ border-style: solid;
+ border-color: black;
}
.input-query {
- flex: 1;
- padding: 10px;
- margin-right: 10px;
+ flex: 1;
+ padding: 10px;
+ margin-right: 10px;
}
.message-container {
- align-self: flex-start;
- background: #dfdfdf;
- color: #000;
- padding: 10px;
- border-radius: 12px;
- max-width: 60%;
- margin-bottom: 8px;
- display: flex;
- flex-direction: column;
- word-wrap: break-word;
+ align-self: flex-start;
+ background: #dfdfdf;
+ color: #000;
+ padding: 10px;
+ border-radius: 12px;
+ max-width: 60%;
+ margin-bottom: 8px;
+ display: flex;
+ flex-direction: column;
+ word-wrap: break-word;
}
.message-container.user {
- align-self: flex-end;
- background-color: #DCF8C6;
+ align-self: flex-end;
+ background-color: #dcf8c6;
}
-
.lego-brick {
- display: inline-block;
- background-color: #FF0000;
- border: 1px solid #880000;
- margin: 2px;
+ display: inline-block;
+ background-color: #ff0000;
+ border: 1px solid #880000;
+ margin: 2px;
}
.lego-size-1 {
- width: 20px;
- height: 10px;
+ width: 20px;
+ height: 10px;
}
.lego-size-2 {
- width: 40px;
- height: 10px;
+ width: 40px;
+ height: 10px;
}
/* ... more sizes ... */
@@ -2139,62 +2146,62 @@ table {
#left-arrow,
#right-arrow {
- /* 1. Center Vertically */
- top: 50% !important;
- transform: translateY(-50%);
+ /* 1. Center Vertically */
+ top: 50% !important;
+ transform: translateY(-50%);
- /* 2. Ensure visibility */
- z-index: 2000;
- position: absolute;
+ /* 2. Ensure visibility */
+ z-index: 2000;
+ position: absolute;
}
/* --- Mobile / Default View --- */
#left-arrow {
- left: 10px !important;
+ left: 10px !important;
}
#right-arrow {
- left: auto !important;
- /* Unset the old fixed pixel value */
- right: 25px !important;
- /* Stick to the right edge */
+ left: auto !important;
+ /* Unset the old fixed pixel value */
+ right: 25px !important;
+ /* Stick to the right edge */
}
/* --- Desktop View (Screens wider than 900px) --- */
@media screen and (min-width: 900px) {
- #left-arrow {
- left: 20px !important;
- /* More space from the edge on desktop */
- }
+ #left-arrow {
+ left: 20px !important;
+ /* More space from the edge on desktop */
+ }
- #right-arrow {
- right: 20px !important;
- }
+ #right-arrow {
+ right: 20px !important;
+ }
}
/* ======================================================
FIX: Center the Welcome Modal on Mobile
====================================================== */
@media screen and (max-width: 600px) {
- #helpDiv {
- /* 1. Fit the screen width */
- width: 90% !important;
-
- /* 2. Center Horizontally */
- left: 50% !important;
- transform: translateX(-50%);
- /* Moves it back by half its width to center it */
-
- /* 3. Reset Top position if needed */
- top: 15% !important;
- }
-
- /* Fix the inner text box width so it doesn't overflow */
- #helpBodyDiv {
- width: calc(100% - 110px) !important;
- margin: 0 auto !important;
- left: 0 !important;
- padding: 0 10px;
- box-sizing: border-box;
- }
-}
\ No newline at end of file
+ #helpDiv {
+ /* 1. Fit the screen width */
+ width: 90% !important;
+
+ /* 2. Center Horizontally */
+ left: 50% !important;
+ transform: translateX(-50%);
+ /* Moves it back by half its width to center it */
+
+ /* 3. Reset Top position if needed */
+ top: 15% !important;
+ }
+
+ /* Fix the inner text box width so it doesn't overflow */
+ #helpBodyDiv {
+ width: calc(100% - 110px) !important;
+ margin: 0 auto !important;
+ left: 0 !important;
+ padding: 0 10px;
+ box-sizing: border-box;
+ }
+}
diff --git a/css/darkmode.css b/css/darkmode.css
index 201c080807..9ebc805835 100644
--- a/css/darkmode.css
+++ b/css/darkmode.css
@@ -1,80 +1,106 @@
/* Light Mode Defaults */
body {
- --bg: #e8e8e8;
- --fg: #666666;
- --overlay-bg: rgba(255, 255, 255, 0.75);
+ --bg: #e8e8e8;
+ --fg: #666666;
+ --overlay-bg: rgba(255, 255, 255, 0.75);
}
/* Dark Mode Overrides */
body.dark {
- --bg: #1d1d20;
- --fg: #e8e8e8;
- --overlay-bg: rgba(15, 15, 16, 0.75);
+ --bg: #1d1d20;
+ --fg: #e8e8e8;
+ --overlay-bg: rgba(15, 15, 16, 0.75);
- background: var(--bg);
- color: var(--fg);
+ background: var(--bg);
+ color: var(--fg);
+}
+
+/* High Contrast Mode Overrides */
+body.highcontrast {
+ --bg: #000000;
+ --fg: #ffffff;
+ --overlay-bg: rgba(0, 0, 0, 0.9);
+
+ background: var(--bg);
+ color: var(--fg);
+}
+
+/* High contrast icon styles */
+.highcontrast .material-icons {
+ color: #ffffff !important;
+ text-shadow: none !important;
+}
+
+/* High contrast hover box outlines */
+.highcontrast .tooltip,
+.highcontrast .hover-box {
+ border: 2px solid #ffff00 !important;
+ box-shadow: 0 0 10px #ffff00 !important;
+}
+
+.highcontrast #helpBodyDiv {
+ background: #000000;
+ color: var(--fg);
+ border: 1px solid #ffffff;
+}
+
+.highcontrast #helpBodyDiv > .heading,
+.highcontrast #helpBodyDiv p {
+ color: var(--fg);
+}
+
+.highcontrast #floatingWindows .wfWinBody {
+ background-color: var(--bg) !important;
+}
+
+.highcontrast #floatingWindows .windowFrame {
+ background-color: var(--bg) !important;
+ border: 1px solid #ffffff;
}
/* Help widget colors */
.dark #helpBodyDiv {
- background: #505050;
- color: var(--fg);
-}
+ background: #505050;
+ color: var(--fg);
+}
-.dark #helpBodyDiv>.heading,
+.dark #helpBodyDiv > .heading,
.dark #helpBodyDiv p {
- color: var(--fg);
+ color: var(--fg);
}
/* Fix white side bars in Help / Tour widget */
.dark #floatingWindows .wfWinBody {
- background-color: var(--bg) !important;
+ background-color: var(--bg) !important;
}
.dark #floatingWindows .windowFrame {
- background-color: var(--bg) !important;
+ background-color: var(--bg) !important;
}
-
/* Trash view colors for dark mode */
.dark .trash-view {
- background-color: #2d2d2d;
- color: #e8e8e8;
- border: 2px solid #4a9eff;
+ background-color: #2d2d2d;
+ color: #e8e8e8;
+ border: 2px solid #4a9eff;
}
.dark .button-container {
- background: #022363;
- border-bottom: 1px solid #444444;
+ background: #022363;
+ border-bottom: 1px solid #444444;
}
.dark .trash-item.hover {
- background-color: #444444;
+ background-color: #444444;
}
.dark .trash-item.selected {
- background-color: #555555;
+ background-color: #555555;
}
/* Improve block icon visibility in dark mode */
.dark .trash-item-icon {
- background-color: rgba(255, 255, 255, 0.855);
- border-radius: 3px;
- padding: 2px;
+ background-color: rgba(255, 255, 255, 0.855);
+ border-radius: 3px;
+ padding: 2px;
}
-
-/* Window table colors for dark mode */
-.dark .windowFrame td {
- background-color: #022363 !important;
- color: #eeeeee !important;
-}
-
-.dark .windowFrame td.headcol {
- background-color: #363636 !important;
- color: #ffffff !important;
-}
-
-/* Ensure bold text in cells is also light colored */
-.dark .windowFrame td b {
- color: #ffffff !important;
-}
\ No newline at end of file
diff --git a/css/themes.css b/css/themes.css
index 8d061e7958..57654a5966 100644
--- a/css/themes.css
+++ b/css/themes.css
@@ -31,6 +31,36 @@
background-color: transparent !important;
}
+/* High Contrast Mode Theme Dropdown - Override ALL styles */
+.highcontrast #themedropdown {
+ background-color: #000000 !important;
+ border: 1px solid #ffffff !important;
+}
+
+.highcontrast #themedropdown li {
+ background-color: transparent !important;
+}
+
+.highcontrast #themedropdown li a {
+ background-color: transparent !important;
+ color: #00ffff !important;
+}
+
+.highcontrast #themedropdown li a:hover,
+.highcontrast #themedropdown a:hover,
+.highcontrast #themedropdown li:hover,
+.highcontrast #themedropdown.dropdown-content li > a:hover,
+.highcontrast.dropdown-content li > a:hover {
+ background-color: transparent !important;
+ color: #00ffff !important;
+}
+
+/* Override Materialize CSS hover styles with maximum specificity */
+body.highcontrast #themedropdown.dropdown-content li > a:hover {
+ background-color: transparent !important;
+ color: #00ffff !important;
+}
+
/* Dark Mode */
.dark .blue {
@@ -153,7 +183,7 @@
}
.dark #newdropdown li:hover {
- background-color: transparent !important;
+ background-color: transparent !important;
}
.dark #confirmation-message {
@@ -176,18 +206,161 @@ body.dark {
--accent: #3fe0d1;
}
+body.highcontrast {
+ --border: #ffffff;
+ --bg: #000000;
+ --fg: #ffffff;
+ --panel-bg: #000000;
+ --accent: #00ffff;
+}
+
+.highcontrast #canvas {
+ background-color: #000000 !important;
+}
+
+.highcontrast .blue {
+ background-color: #000080 !important;
+}
+
+.highcontrast .blue.darken-1 {
+ background-color: #0000ff !important;
+}
+
+.highcontrast #floatingWindows > .windowFrame {
+ border: 2px solid var(--border);
+ background-color: var(--bg);
+}
+
+.highcontrast .wfbtItem {
+ background-color: #00ffff;
+}
+
+.highcontrast #floatingWindows > .windowFrame > .wfTopBar .wftTitle {
+ color: #ffffff;
+}
+
+.highcontrast #floatingWindows > .windowFrame > .wfWinBody .wfbWidget {
+ color: #ffffff !important;
+ background-color: #000000 !important;
+}
+
+.highcontrast .popupMsg {
+ background-color: #000000;
+ color: #ffffff;
+}
+
+.highcontrast #printText {
+ border-color: #ffffff;
+}
+
+.highcontrast #loading-image-container {
+ background-color: var(--bg) !important;
+}
+
+.highcontrast #loadingText {
+ color: white !important;
+}
+
+.highcontrast .language-link {
+ color: #ffffff;
+}
+
+.highcontrast #submitLilypond {
+ background-color: #00ffff;
+ color: #000000;
+}
+
+.highcontrast #search,
+.highcontrast #helpfulSearch,
+.highcontrast .ui-autocomplete {
+ background-color: #000000 !important;
+ color: #ffffff !important;
+ border: 1px solid #ffffff;
+}
+
+.highcontrast .ui-autocomplete .ui-menu-item a {
+ color: #ffffff !important;
+ background-color: #000000 !important;
+}
+
+.highcontrast .ui-autocomplete .ui-menu-item a:hover {
+ color: #000000 !important;
+ background-color: #00ffff !important;
+}
+
+.highcontrast #helpfulSearchDiv {
+ color: #ffffff !important;
+ background-color: transparent !important;
+}
+
+.highcontrast #crossButton {
+ color: #ffffff;
+}
+
+.highcontrast #chooseKeyDiv {
+ background: #000000;
+ color: #ffffff;
+}
+
+.highcontrast #movable {
+ background: #000000;
+ color: #ffffff;
+}
+
+.highcontrast .dropdown-content li > a {
+ background-color: #000000;
+ color: #00ffff;
+}
+
+.highcontrast .dropdown-content {
+ background-color: #000000;
+ border: 1px solid #ffffff;
+}
+
+.highcontrast .modalBox {
+ background-color: #000000;
+}
+
+.highcontrast .modal-message {
+ color: #ffffff;
+ background-color: #000000;
+}
+
+.highcontrast #newdropdown {
+ border: #ffffff;
+ background-color: #000000;
+}
+
+.highcontrast #confirmation-message {
+ color: #ffffff;
+}
+
+.highcontrast .material-tooltip {
+ background-color: #000000 !important;
+ border: 1px solid #ffffff;
+}
+
+.highcontrast .material-tooltip .backdrop {
+ background-color: #000000 !important;
+}
+
+.highcontrast #languagedropdown li a.selected-language {
+ background-color: rgba(0, 255, 255, 0.25);
+ border-left: 3px solid #00ffff;
+}
+
/* Your Custom Theme can go here if you don't want to modify the existing dark mode */
/* Selected language highlight in language dropdown */
#languagedropdown li a.selected-language {
- background-color: rgba(33, 150, 243, 0.15);
- border-left: 3px solid #2196F3;
- font-weight: 600;
+ background-color: rgba(33, 150, 243, 0.15);
+ border-left: 3px solid #2196f3;
+ font-weight: 600;
}
.dark #languagedropdown li a.selected-language {
- background-color: rgba(33, 150, 243, 0.25);
- border-left: 3px solid #64B5F6;
+ background-color: rgba(33, 150, 243, 0.25);
+ border-left: 3px solid #64b5f6;
}
/* Dark Mode Tooltip Styling - Slightly lighter background for better contrast */
diff --git a/index.html b/index.html
index d559957631..56efb6434e 100644
--- a/index.html
+++ b/index.html
@@ -1,711 +1,1157 @@
-
-
-
- Music Blocks
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
Solfege Pitch Preview
-
-
-
-
-
+
+
+
+