/* Author: Corentin Guichaoua, Philipp Legner */

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: normal;
  src: url('fonts/quicksand-book.woff') format('woff');
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/quicksand-bold.woff') format('woff');
}

[v-cloak] { display: none; }

#proto {
    font-family: 'Quicksand'; margin: 0; padding: 0; color: #323248;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */}

.header { display: flex; }
.header > * { width: 8%; flex-grow: 1; height: 20px; }

h1 { text-align: center; text-transform: uppercase; margin: 12px 0 4px; font-size: 40px; }
h2 { text-align: center; text-transform: uppercase; color: #aaa; margin: 0 0 20px; }

.reset { cursor: pointer; position: fixed; top: 30px; right: 10px; font-size: 14px; color: #aaa; }
.reset:hover { text-decoration: underline; }

.languageSwitcher { cursor: pointer; position: fixed; top: 30px; left: 10px; font-size: 14px; color: #aaa; }
.languageSwitcher div:hover { text-decoration: underline; }

.creditButton { cursor: pointer; float:right; bottom: 30px; right: 10px; font-size: 14px; color: #aaa; }
.creditButton:hover { text-decoration: underline; }

.info {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 12px;
    color: #aaa;
    background: white;
    padding: 2px;
    border: 1px solid #323248;
    border-radius: 5px;
    transition: width .5s ease-out, height .5s ease-out;
    width: 23px; /* Fixed width and height as transition won't occur otherwise */
    height: 12px;
}
.info.infoExpanded{
    width: 80%;
    height: 80%;
}
.info.infoExpanded .infoButton{
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 2px;
    border: 1px solid #323248;
    border-radius: 5px;
}
.infoButton:hover { font-weight: bold; }
/* Ease in the explanation so it doesn't spill out of the box while transitionning */
.info .infoExplain {
    opacity:0;
    transition: opacity .5s ease-in;
}
.info.infoExpanded .infoExplain {
    opacity:1;
}

.columns { display: flex; flex-wrap: wrap; justify-content: center; }
.col-1 { max-width: 1000px; margin: 20px; flex: 3 1 450px; }
.col-2 { max-width: 320px; margin: 20px; flex: 1 1 135px; }

button { cursor: pointer; outline: none; font-size: 18px; font-family: inherit;
    line-height: 1.5em; padding: 0 10px; }

.button-row { display: flex; margin: 0 0 0 1px; }
.options { flex-grow: 1; display: flex; flex-wrap: wrap; }
.button-row button { width: 16%; border: 1px solid #323248; margin: -1px 0 0 -1px; flex-grow: 1;
    transition: background .2s, color .2s; }
.button-row button:hover { background-color: #ccc; }
.button-row button.active { background-color: #323248; color: #fff; }
.options + button { flex-shrink: 0; border-bottom-right-radius: 6px; width: 14%; }
.button-row button:nth-child(7) { border-bottom-left-radius: 6px; }

@media screen and (max-width: 820px) { button { font-size: 14px; } }
@media screen and (max-width: 490px) { button { font-size: 12px; } }

.warning { text-align: center; color: #aaa; font-style: italic; margin: 10px 0 0; }

circle { fill: white; stroke: #aaa; }
line { stroke: #aaa; }
polygon { stroke: #aaa; fill : white; }
text { fill: #aaa; font-size: 14px; text-anchor: middle; dominant-baseline: central; }

.tonnetzView {
    position: relative;
}

.tonnetz, .clock { display: block; user-select: none; max-width: 100%; height: auto; }
.tonnetz { border: 1px solid #323248; border-radius: 6px 6px 0 0; box-sizing: border-box; }
.clock { stroke-width: 2px; margin-bottom: 10px;  }
.clock text { font-weight: 700; font-size: 24px}
.noteClock circle { r: 24px }

.activeDichord, .activeTrichord { stroke: #323248; stroke-width: 2; fill: #ccc; }
.activeNode + text { fill: white; }
.activeTrichord + text { fill: #323248; }
.clockPolygon { fill: #ccc; stroke: #323248; stroke-width: 3; }

.visitedNode { fill: lightyellow; }
.visitedDichord { stroke-width : 2; }
.visitedTrichord { fill : lightgreen; }

/*Tonnetz-specific stylings */
.tonnetzNote circle { r: 12px}
.tonnetzDichord circle { r: 2px}
/* .tonnetzTrichord */
/* CWT-specific stylings*/
/* .chickenNote */
.chickenDichord circle { r: 2px}
.chickenTrichord circle { r: 10px}
.chickenTrichord text {font-size: 70%}
.chickenTrichord.minorish text {font-style: italic}

.key-selector { display: flex; flex-wrap: wrap; justify-content: center; }
.key-selector button { background: white; width: 28px; height: 28px; border: 2px solid #aaa;
    color: #aaa; padding: 0; margin: 2px; line-height: 25px; font-size: 14px;
    border-radius: 20px; font-weight: 700; }
.key-selector .activeNode { color: white; }

.activeNode[data-key="1"] { fill: #e66438; stroke: #e66438; background: #e66438; border-color: #e66438; }
.activeNode[data-key="2"]  { fill: #cc3450; stroke: #cc3450; background: #cc3450; border-color: #cc3450; }
.activeNode[data-key="3"]  { fill: #b30469; stroke: #b30469; background: #b30469; border-color: #b30469; }
.activeNode[data-key="4"] { fill: #822b9b; stroke: #822b9b; background: #822b9b; border-color: #822b9b; }
.activeNode[data-key="5"]  { fill: #5053cd; stroke: #5053cd; background: #5053cd; border-color: #5053cd; }
.activeNode[data-key="6"] { fill: #1f7aff; stroke: #1f7aff; background: #1f7aff; border-color: #1f7aff; }
.activeNode[data-key="7"]  { fill: #258dab; stroke: #258dab; background: #258dab; border-color: #258dab; }
.activeNode[data-key="8"]  { fill: #2ba058; stroke: #2ba058; background: #2ba058; border-color: #2ba058; }
.activeNode[data-key="9"] { fill: #31b304; stroke: #31b304; background: #31b304; border-color: #31b304; }
.activeNode[data-key="10"]  { fill: #76a90d; stroke: #76a90d; background: #76a90d; border-color: #76a90d; }
.activeNode[data-key="11"] { fill: #e6bd00; stroke: #e6bd00; background: #e6bd00; border-color: #e6bd00; }
.activeNode[data-key="0"]  { fill: #ff941f; stroke: #ff941f; background: #ff941f; border-color: #ff941f; }

.record { width: 100%; margin: 12px 20px 32px; text-align: center; }
.record button { border: none; background: #ddd; border-radius: 4px; line-height: 32px;
    padding: 0 16px; margin: 4px; font-size: 16px; transition: background .2s; }
.record button:hover, .record button:focus { background: #bbb; }
.record button[disabled] { display: none; } /*  Don't buttons when disabled. */

.modal-background { position: fixed; top: 0; left: 0; bottom: 0; right: 0;
    background: rgba(0,0,0,0.6); z-index: 1; }
.modal { position: fixed; z-index: 1; background: white; border-radius: 16px; font-size: 18px;
    width: 480px; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 40px);
    padding: 10px 20px; }
.modal p, .modal form { margin: .8em 0; }
.modal hr { border: 0; border-bottom: 1px solid #ccc; }
.modal input { max-width: 100%; box-sizing: border-box; font-family: inherit; text-align: center;
    font-size: 16px; }

.song-select { width: 100%; }

.piano-wrap { position: relative; height: 151px; overflow: hidden; }
#piano { position: absolute; left: 50%; margin-left: -740px; }
#piano .inner { text-align: center; display: block; font-size: 14px; margin-top: 4px; }

#chord { font-weight: 700; text-align: center; height: 30px; font-size: 20px; position: relative; top: 0px;}