Background */
.BeigeBG {
background: #D3A377;
}
.NudeButton {
border:0;
background-image:none;
background-color:transparent;
text-decoration:none;
font-family:inherit;
font-size:inherit;
color:inherit;
cursor:inherit;
}
/* GENERIC CLASSES *** GENERIC CLASSES *** GENERIC CLASSES *** GENERIC CLASSES *** GENERIC CLASSES *** GENERIC CLASSES */
/* GENERIC CLASSES *** GENERIC CLASSES *** GENERIC CLASSES *** GENERIC CLASSES *** GENERIC CLASSES *** GENERIC CLASSES */
/* | s bi-dimensional centering */
.FullCenter {
text-align:center;
vertical-align:middle;
}
/* Moderately Padded | */
.Padded {
padding-left:5px;
padding-right:5px;
padding-top:3px;
padding-bottom:3px
}
/* | s bi-dimensional centering with horizontal padding */
.FullCenterPadded {
padding-left:8px;
padding-right:8px;
text-align:center;
vertical-align:middle;
}
/* Used for login frame background, mainly */
.SemiOpaqueBlackBG {
position:absolute;
z-index:0;
left:0;
top:0;
width:100%;
height:100%;
opacity:0.6;
}
/* Custom Checkboxes Classes (Ear Trainer only???) */
/* Custom Checkboxes Classes (Ear Trainer only???) */
/* ********************** May be replaced with similar code to which variables were added in Hex Keyboard's Style.css script
(in order to accomodate checkboxes throughout the whole site and use only one set of classes in this very file... */
/* Customize the label (the CheckBoxContainer) */
.CheckBoxContainer {
display: block;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.NoSelect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.CheckBoxContainer input {
display:none;
}
/* Create a custom checkbox */
.CheckMark {
width: 44px;
height: 44px;
border: 2px solid var(--BoxChecked);
background-color: var(--DefaultBG);
cursor: pointer;
}
/* Deeper Orange bg onMouseOver */
.CheckMark:hover {
background-color: var(--CheckColor);
}
/* Blue bg when Checkbox is checked */
.CheckBoxContainer input:checked ~ .CheckMark {
border: 2px solid var(--CheckColor);
background-color: var(--BoxChecked);
}
/* Create the CheckMark (hidden when not checked) */
.CheckMark:after {
display: none;
position: absolute;
left: 16px;
top: 8px;
width: 8px;
height: 16px;
border: solid var(--CheckColor);
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
content: '';
}
/* Show the CheckMark when checked */
.CheckBoxContainer input:checked ~ .CheckMark:after {
display: block;
}
.GreenBlueCheckBox {
--DefaultBG:#82E09C;
--CheckColor:#038F00;
--BoxChecked:#001849;
}
/* Range input styles (Ear Trainer Options) */
/* Range input styles (Ear Trainer Options) */
/* ***************************** Variables should be added in further classes and this code relativized with them, or classes made GENERAL
and appended to Ear Trainer's Ranges if possible... */
/* GENERAL */
input[type="range"] {
appearance: none;
background: transparent;
cursor: pointer;
}
input[type="range"]:focus {
outline: none;
}
/***** Chrome, Safari, Opera and Edge Chromium styles *****/
input[type="range"]::-webkit-slider-runnable-track {
background: #001849;
background-color: #001849;
height: 4px;
border-radius: 4px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
margin-top: -8px;
background-color: #82E0A4;
height: 20px;
width: 20px;
border-radius: 10px;
}
input[type="range"]:focus::-webkit-slider-thumb {
border: 2px solid #001849;
outline: 1px solid #001849;
outline-offset: 1px;
}
/******** Firefox styles ********/
input[type="range"]::-moz-range-track {
background: #001849;
background-color: #001849;
height: 4px;
border-radius: 4px;
}
input[type="range"]::-moz-range-thumb {
border: none;
background-color: #82E0A4;
height: 17.3333px;
width: 17.3333px;
border-radius: 8.6667px;
}
input[type="range"]:focus::-moz-range-thumb {
border: 2px solid #001849;
outline: 1px solid #001849;
outline-offset: 1px;
}
/* All 3 Sense Main.php scripts classes */
/* All 3 Sense Main.php scripts classes */
/* All 3 Sense Main.php scripts classes */
.EventLinkTable {
position:relative;
margin-top:12px;
border-radius:20px;
}
.EventLinkCell {
width:100%;
border-radius:20px;
padding-top:8px;
padding-bottom:8px;
text-align:center;
vertical-align:middle;
line-height:1;
}
.WIP {
position:relative;
z-index:1;
left:1px;
top:10px;
opacity:0.63;
}
.WIPBig {
position:relative;
z-index:1;
left:0;
top:2px;
opacity:0.63;
}
.WIP2Lines {
position:relative;
z-index:1;
left:1px;
top:4px;
opacity:0.63;
}
/* Ears Section Classes *** Ears Section Classes *** Ears Section Classes *** Ears Section Classes *** Ears Section Classes */
/* Ears Section Classes *** Ears Section Classes *** Ears Section Classes *** Ears Section Classes *** Ears Section Classes */
.EarsEventLinkLabelTable {
position:absolute;
top:12px;
height:calc(100% - 24px);
border:2px ridge #035401;
border-radius:16px;
background-image:url(Graphs/BlueMiddleDiv.jpg);
background-size:100% 100%;
}
.EarsEventLinkLabelCell {
text-align:center;
vertical-align:middle;
padding-left:8px;
padding-right:12px;
color:#1FA123;
}
.Digit {
display:none;
height:75px;
margin-right:3px
}
/* Ears Sections Buttons */
.GreenGradientBlueText {
height:44px;
border:2px solid #001849;
padding-left:7px;
padding-right:7px;
background-image:linear-gradient(#038F00,#82E09C);
text-align:center;
vertical-align:middle;
font-family:mv boli;
font-size:22px;
text-decoration:none;
color:#003377;
cursor:pointer;
}
/* Selected Ears Sections Buttons (ChordSelection.php) */
.GreenGradientSelected {
height:44px;
border-right:2px solid white;
border-left:2px solid yellow;
border-bottom:2px solid white;
border-top:2px solid yellow;
padding-left:7px;
padding-right:7px;
background-image:linear-gradient(#038F00,#82E09C);
text-align:center;
vertical-align:middle;
font-family:mv boli;
font-size:22px;
text-decoration:none;
color:#DDDDDD;
cursor:pointer;
}
/* Ears Sections Inverted Colors Buttons */
.BlueGradientGreenText {
height:44px;
border:2px groove #00CC43;
padding-left:7px;
padding-right:7px;
background-image:linear-gradient(#060E31,#7B9FD5);
text-align:center;
vertical-align:middle;
font-family:mv boli;
font-size:22px;
text-decoration:none;
color:#82E09C;
cursor:pointer;
}
/* Bigger buttons for quarter_tones_ear_trainer.php */
.BeigeGradientBlueText {
width:8.5%;
height:5.5%;
border:2px solid #001849;
padding-left:7px;
padding-right:7px;
background-image:linear-gradient(#B79361,#EFCFA9);
text-align:center;
vertical-align:middle;
font-family:mv boli;
text-decoration:none;
color:#003377;
cursor:pointer;
}
/* Smaller buttons for quarter_tones_ear_trainer.php */
.BeigeGradientBlueTextSmall {
width:4.5%;
height:3.2%;
border:2px solid #001849;
padding-left:7px;
padding-right:7px;
background-image:linear-gradient(#B79361,#EFCFA9);
text-align:center;
vertical-align:middle;
font-family:mv boli;
text-decoration:none;
color:#003377;
cursor:pointer;
}
/* Eyes Section Classes *** Eyes Section Classes *** Eyes Section Classes *** Eyes Section Classes *** Eyes Section Classes */
/* Eyes Section Classes *** Eyes Section Classes *** Eyes Section Classes *** Eyes Section Classes *** Eyes Section Classes */
.EyesEventLinkLabelTable {
position:absolute;
top:12px;
height:calc(100% - 24px);
border:2px ridge #F78F50;
border-radius:16px;
background-image:url(Graphs/BlueMiddleDiv.jpg);
background-size:100% 100%;
}
.EyesEventLinkLabelCell {
text-align:center;
vertical-align:middle;
padding-left:11px;
padding-right:9px;
color:#FF9756;
}
/* Eyes Section Buttons */
.OrangeGradientBlueText {
border:2px solid #001849;
background-image:linear-gradient(#FDA75E,#FFD8AC);
text-align:center;
vertical-align:middle;
font-family:Candara Light;
font-weight:bold;
text-decoration:none;
color:#003377;
cursor:pointer;
}
/* Hands Section Classes *** Hands Section Classes *** Hands Section Classes *** Hands Section Classes *** Hands Section Classes */
/* Hands Section Classes *** Hands Section Classes *** Hands Section Classes *** Hands Section Classes *** Hands Section Classes */
.HandsEventLinkLabelTable {
position:absolute;
top:12px;
height:calc(100% - 24px);
border:2px ridge #890500;
border-radius:16px;
background-image:url(Graphs/GreenMiddleDiv.jpg);
background-size:100% 100%;
}
.HandsEventLinkLabelCell {
text-align:center;
vertical-align:middle;
padding-left:10px;
padding-right:10px;
color:#890500;
line-height:1.2;
}
/* Hands Sections Buttons */
.RedGradientGreenText {
border:2px groove #00AD39;
background-image:linear-gradient(#890500,#D0443E);
text-align:center;
vertical-align:middle;
font-family:Arial Black;
text-decoration:none;
color:#08AC3E;
cursor:pointer;
}
|