/* Global CSS */

/* Unfortunately we can't simply include a ttf font of our choice with our
   project. Chrome has some subtle, nasty rendering bug that ends up making
   the pd object text invisible. It seems to get triggered when opening a
   new window-- like a dialog-- if it happens not to use the @font-face font
   in the body. This ends up somehow breaking the display for the original
   window. The text will turn invisible _sometimes_ when changing font size,
   zooming, creating an array (the label might be invisible), or showing
   the "Save before quitting" dialog. */
/* 
@font-face {
    font-family: "DejaVu Sans Mono";
    src: url("../DejaVuSansMono.ttf");
}
*/

body {
    margin: 0px;
    font-family: "DejaVu Sans Mono";
}

/* delete the default scrollbars, and let's make our own */
.patch_body::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background: transparent;
}

#hscroll:hover, #vscroll:hover {
    background-color: rgba(0, 0, 0, 0.39) !important;
}
#hscroll, #vscroll {
  background-color: rgba(0, 0, 0, 0.267);
}

#hscroll, #vscroll {
    cursor: -webkit-grabbing;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

::selection {
    background: #c3c3c3;
    color: black;
}

/* The Pd Console Window */

#console_controls {
    background-color: LightGray;
    height: 40px;
} 

#control_frame {
    padding: 12px;
}

/* The DSP toggle */

.dsp_toggle {
    display: inline-block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

.dsp_toggle input {
    opacity: 0;
    position: absolute;
}

.dsp_toggle input + span {
    position: relative;
    display: inline-block;
    width: 1.65em;
    height: 1em;
    background: white;
    box-shadow: inset 0 0 0 0.0625em #e9e9e9;
    border-radius: 0.5em;
    vertical-align: -0.15em;
    transition: all 0.40s cubic-bezier(.17,.67,.43,.98);
}

.dsp_toggle:active input + span,
.dsp_toggle input + span:active {
    box-shadow: inset 0 0 0 0.73em #e9e9e9;
}

.dsp_toggle input + span:after {
    position: absolute;
    display: block;
    content: '';
    width: 0.875em;
    height: 0.875em;
    border-radius: 0.4375em;
    top: 0.0625em;
    left: 0.0625em;
    background: white;
    box-shadow: inset 0 0 0 0.03em rgba(0,0,0,0.1),
                0 0 0.05em rgba(0,0,0,0.05),
                0 0.1em 0.2em rgba(0,0,0,0.2);
    transition: all 0.25s ease-out;
}

.dsp_toggle:active input + span:after,
.dsp_toggle input + span:active:after {
    width: 1.15em;
}

.dsp_toggle input:checked + span {
    box-shadow: inset 0 0 0 0.73em #4cd964;
}

.dsp_toggle input:checked + span:after {
    left: 0.7125em;
}

.dsp_toggle:active input:checked + span:after,
.dsp_toggle input:checked + span:active:after {
    left: 0.4375em;
}

/* accessibility styles */
.dsp_toggle input:focus + span:after {
    box-shadow: inset 0 0 0 0.03em rgba(0,0,0,0.15),
                0 0 0.05em rgba(0,0,0,0.08),
                0 0.1em 0.2em rgba(0,0,0,0.3);
    background: #fff;
}

.dsp_toggle input:focus + span {
    box-shadow: inset 0 0 0 0.0625em #dadada;
}

.dsp_toggle input:focus:checked + span {
    box-shadow: inset 0 0 0 0.73em #33be4b;
}

/* reset accessibility style on hover */
.dsp_toggle:hover input:focus + span:after {
    box-shadow: inset 0 0 0 0.03em rgba(0,0,0,0.1),
                0 0 0.05em rgba(0,0,0,0.05),
                0 0.1em 0.2em rgba(0,0,0,0.2);
    background: #fff;
}

.dsp_toggle:hover input:focus + span {
    box-shadow: inset 0 0 0 0.0625em #e9e9e9;
}

.dsp_toggle:hover input:focus:checked + span {
    box-shadow: inset 0 0 0 0.73em #4cd964;
}

#printout {
    margin: 8px;
}

/* This needs to be renamed, since the "Find" bar is actually at the bottom */
#console_bottom {
    position: absolute;
    top: 40px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow-y: scroll;    
}

/* The console API allows classes for different types of messages to print.
   Currently the only class is "error". More may be added, especially once 
   we port the "loglevel" functionality that was available in Pd Extended. */
#console_bottom .error {
    color: red;
}

/* Find bar */

#console_find label, #canvas_find label {
    font-family: "DejaVu Sans", sans-serif;
    font-size: 10pt;
}

/* marks for matches to console_find */
mark {
    background: white;
}

mark.console_find_current.console_find_highlighted,
mark.console_find_current {
    background: #e87216;
}

mark.console_find_highlighted {
    background: yellow;
}

#console_find {
    width: 100%;
    height: 1em;
    padding: 0.2em;
    padding-left: 8px;
    background: silver;
    position: fixed;
    bottom: 0;
    left: 0;
}

/* Pure Data Patch Window (aka canvas) */

/* patch font and background color. (Note: margin needs to stay at zero.) */
.patch_body {
    background-color: white;
}

/* svg background image. We actually have to parse the CSS file and set
   these manually in javascript, so don't change the selectors or remove
   the props here... */
#svg_cell {
    stroke: #ddd;
}

#svg_grid {
    stroke: #bbb;
}

#svg_fg {
    fill: black;
}

#selection_rectangle {
    stroke: #e87216;
}

/* The outline to show the visible area for a Graph-On-Parent canvas,
   i.e., the "red rectangle" */
.gop_rect {
    fill: none;
    stroke: red; 
}

.cord.signal {
    stroke-width: 2;
    stroke: #808095;
}

.cord.control {
    stroke-width: 1;
    stroke: #565;
}

/* selected connection between objects, or a new cord not yet connected */
.cord.signal.selected_line,
.cord.control.selected_line,
#newcord {
    stroke: #e87216;
}

#cord_inspector_rect {
    fill: black;
    stroke: black;
}

#cord_inspector_text {
    fill: white;
}

#cord_inspector_text.flash {
    fill: #e87216;
}

/* text inside boxes: message boxes, object boxes, graphs, comments, etc. */
.box_text {
    fill: black;
}

/* hyperlinks: for now, just pddplink and helplink */
.pd_link text {
    fill: blue;
}

.pd_link text:hover {
    fill: red;
}

.pd_link.selected text {
    fill: #e87216 !important;
}

/* text inside a box that is being edited */
#new_object_textentry {
    /* max-width: 10ch; */
    min-width: 3ch;
    position: absolute;
    display: table-cell;
    padding: 1px 0px 3px 1.5px;
    margin-left: 1px;
    /* box-shadow: inset 1px 0px 0px 1px #000; */
    color: black; /* text color */
    white-space: pre-wrap;
    overflow-wrap: break-word;
    -webkit-margin-before: 0px;
}

#new_object_textentry.obj {
    outline: 2px solid #e87216;
    background-color: white;
}

#new_object_textentry.msg {
    outline: 0px solid #e87216;
    background-color: transparent;
}

/* not sure what this is doing here... */
text {
    /* fill: red;
    cursor: default; */
}

/* used for numbox2 to highlight contents when clicked on in runmode */
text.activated {
    fill: red;
    cursor: default;
}

/* not sure if this is still needed...
   updated the coloring just in case */
.selected_border {
    stroke: #e87216;
    stroke-dasharray: none;
    stroke-width: 1;
}

.msg .border {
    stroke: #ccc;
    fill: #f8f8f6;
}

/* state of msg box when clicking it */
.msg.flashed .border {
    stroke-width: 4;
}

/* atom box */
.atom .border {
    stroke: #ccc;
    fill: #eee;
}

/* for dropdown box we want to visually distinguish boxes that output
   the index from boxes that output the value. For now we do that by
   stroking the arrow for boxes that output an index. For boxes that
   output the value we don't need a CSS rule, as the arrow will be filled
   black by default */
.atom .index_arrow {
    stroke: black;
    stroke-width: 1;
    fill: none;
}

/* gatom "activated" text (i.e., when it has the keyboard focus) */
.atom.activated .data {
    fill: red;
}

/* Increases dropdown scrollbar and scrollbar track area for better touch UX */
#dropdown_list::-webkit-scrollbar {
    width: 32px;
}

#dropdown_list::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #555;
}

#dropdown_list {
    position: absolute;
    border-width: 1px;
    border-style: solid;
    border-color: #c3c3c3;
    cursor: pointer;
    box-shadow: 5px 0 5px -5px #aaa, 0 5px 5px -5px #aaa, -5px 0 5px -5px #aaa;
    overflow-y: auto;
}

#dropdown_list ol {
    list-style-position: inside;
    margin: 0;
    padding: 0;
    background: #eee;
}

#dropdown_list li {
    list-style-type: none;
    padding: 5px;
}

#dropdown_list li.highlighted {
    background-color: #c3c3c3;
}

.obj .border {
    fill: #f6f8f8;
    stroke: #ccc;
}

.obj .border.dirty {
    stroke: #ff0000;
}

.obj .border.subdirty {
    stroke: #ff8800;
}

.comment .border {
    fill: none;
}

#patchsvg.editmode .comment .border {
    stroke: #aaa;
    stroke-dasharray: 3 2;
}

/* ico@vt.edu: added selected border coloring
   in edit mode only */
#patchsvg.editmode .comment.selected .border {
    stroke: #e87216;
}

/* A little hack for special case of [cnv].
   All other iemguis have a black border, but
   [cnv] sets its selection rectangle to the
   user-supplied fill color when the object
   isn't selected */
.iemgui .border:not(.mycanvas_border) {
    stroke: black;
}

.graph .border {
    stroke: black;
    fill: none;
}

/* Graph (or subpatch) that has been opened to inspect its contents */
.graph.has_window .border {
    stroke: black;
    fill: gray;
}

/* border color for selected objects
      * an element with the class "border"
      * the element is contained within a parent element of class "selected"
      * that parent element is not in class "gop"
   in plain English:
      This lets us highlight an object's border, unless it is inside a gop
      canvas.
   
   ico@vt.edu added selection highlight only if we are in editmode
*/
#patchsvg.editmode :not(.gop).selected .border {
    stroke: #e87216;
    display: inline;
}

/* text inside selected objects
   ico@vt.edu added selection highlight only if we are in editmode */
#patchsvg.editmode :not(.gop).selected text {
    fill: #e87216;
}

/* for an object that didn't create */
.obj .border.broken_border {
    fill: #f7d7d7;
    stroke: #f00;
    stroke-width: 2;
    stroke-dasharray: 6 2;
}

/* control inlet */
.xlet_control {
    stroke: #777;
    fill: white;
    stroke-width: 1;
}

/* signal inlet */
.xlet_signal {
    stroke: #777;
    fill: #808095;
    stroke-width: 1;
}

/* iemgui inlet or outlet */
.xlet_iemgui {
    stroke: black;
    fill: black;
    stroke-width: 1;
}

/* default label, foreground, and background colors for iemguis.
   These classes get set only if the colors sent from the backend
   are the black or white default colors for the widget.

   By using the class we allow iemguis with default colors to inherit
   from CSS. However, if the user changes these colors then the tag
   is removed and the given SVG fill/stroke attribute applies. */

    /* special case for [cnv] labels */
.iemgui:not(.mycanvas) .iem_label {
    fill: black;
}

.iem_fg {
    fill: black;
}

.iem_bg {
    fill: #fcfcfc;
}

/* special case for inner strokes that should match the border-- things like
   [bng] circle stroke, etc. */
.iem_stroke {
    stroke: black;
}

/* text label for an iemgui */
.iemgui:not(.mycanvas) .iemgui_label_selected {
    fill: #e87216;
}

/* test of xlet hover animation... this should 
   probably use the web animation API instead. That
   way the animation won't get cut off when you
   move off the object. We can't do that currently
   because Pd just floods us with pairs of messages 
   for every pixel we move inside an xlet. */
@-webkit-keyframes fizzle {
    0% {
        stroke-width: 5;
        stroke-opacity: 1;
    }
    100% {
        stroke-width: 1;
        stroke-opacity: 1;
    }
}

/* can't remember why this was tagged !important */
.xlet_selected {
    stroke: #e87216;
    fill: #e87216;
    stroke-width: 5;
    -webkit-animation: fizzle 0.5s ease-in 1;
}

.xlet_disabled {
    stroke: gray !important;
    fill: gray !important;
}

#console_find {
    width: 100%;
    height: 1em;
    padding-top: 2px;
    padding-left: 3px;
    padding-bottom: 9px;
    background: silver;
    position: fixed;
    bottom: 0;
    left: 0;
}

#canvas_find {
    width: 100%;
    height: 1em;
    padding-top: 2px;
    padding-left: 3px;
    padding-bottom: 9px;
    background: silver;
    position: fixed;
    bottom: 0;
    left: 0;
}

/* Dialog to ask to save the patch before quitting */
#save_before_quit {
    background-color: #f3f3f3;
    border:1px solid #f3f3f3;
    padding: 12px;
    /* margin: 12px; */
    /*box-shadow: 7px 7px 5px grey;*/
    width: 70%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

/* Search dialog */

.search_body {
    font-family: "DejaVu Sans", sans-serif;
    font-size: 10pt;
    padding: 8px;
}

/* Common to all dialogs */

.dialog_body {
    font-family: "DejaVu Sans", sans-serif;
    font-size: 10pt;
    background: rgba(243, 243, 243, 0.941); /* #f3f3f3f0; */
}

.submit_buttons {
    text-align: center;
    padding: 8px;
}

form {
    margin-left: 4px;
    margin-right: 4px;
}

fieldset {
/*    font-family:Georgia; */
    background-color: rgba(243, 243, 243, 0.627); /* #f3f3f3a0; */
    border-radius:3px;
    border:1px solid #ddd;
    margin-left:auto;
    margin-right:auto;
    padding: 8px;
}

legend {
    font-size: 1.2em;
}

.hidden {
    display: none;
}

.container{
    display: none;
}

/* Iemgui dialog */

input[type="text"]{
    width: 3em;
}

input[type="number"]{
    width: 3em;
}

label {
    text-align: right;
}

/* Pair of properties that are related */
.pair {
    width: 75%;
    text-align: left;
    align: left;
}

.item1 {
    width: 50%;
}

.item2 {
    width: 50%;
}

input[name="x_offset"] {
    width: 2em;
}

input[name="y_offset"] {
    width: 2em;
}

input[name="send_symbol"] {
    width: 8em;
}

input[name="receive_symbol"] {
    width: 8em;
}

input[name="label"] {
    width: 9em;
}

input[name="font_size"] {
    width: 3em;
}

input[name="startup_flags"] {
    width: 16em;
}

/* All radios */
input[type="radio"] {
    position: relative;
    top: 2px;
}

/* All checkboxes */
input[type=checkbox] {
    position: relative;
    top: 2px;
}

/* Canvas dialog */

div.x-scale {
    padding: 3px;
    text-align: center;
}

div.gop-range {
}

div.y1 {
    text-align: center;
    padding: 3px;
}

div.x1 {
    text-align: center;
    padding: 3px;
    white-space: nowrap;
}

div.y2 {
    text-align: center;
    padding: 3px;
}

.x-margin {
    white-space: nowrap;
}

.array_style {
    white-space: nowrap;
}

#array_name_input {
    width: 6em;
}

.disabled {
    color: #aaa;
}

/* Preferences dialog */

#prefs_html_element {
/*    height: 100%; */
    margin: 0px;
    padding: 0px;
    height: 100vh;
}

.prefs_body {
    padding: 0px;
}

#prefs_container {
    display: table;
}

/* Main tab widget */

/* All the display, width, and height settings below are a house of cards.
   I don't have the schooling to actually predict how all these CSS elements
   work together to create the whole. I just fudged around until I found a
   way to get the buttons anchored at the bottom of the dialog without
   triggering scrollbars to appear. If someone knows a way to do it "right"
   without becoming an order of magnitude more complex, do feel free... */
.prefs_tab_group {
    display: table;
    width: 100%;
}

/* Configure the radio buttons to hide off-screen */
.prefs_tab {
    position: absolute;
    left:-500px;
    top:-100px;
}

/* Configure labels to look like tabs */
.prefs_tab + label {
    /* inline-block such that the label can be given dimensions */
    display: inline-block;
    /* A nice curved border around the tab */
    border: 1px solid #bbb;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    /* the bottom border is handled by the tab content div */
    border-bottom: 0;
    /* Padding around tab text */
    padding: 5px 10px;
    /* put a small margin to the left to make the first tab clear */
    margin-left: 4px;
    margin-top: 8px;
    margin-bottom: 0px;
    /* Set the background color to default gray (non-selected tab) */
    background-color:#ececec;
}

/* Focused tabs */
.prefs_tab:focus + label {
    border: 1px dashed #bbb;
}

/* Checked tabs must be white with the bottom border removed */
.prefs_tab:checked + label {
    background-color: #f3f3f3;
    text-shadow: 1px 0px 0px; /* substitute for "bold" to retain div width */
    border-bottom: 1px solid #f3f3f3;
    margin-bottom: -1px;
}

/* The tab content must fill the widgets size and have a nice border */
.prefs_tab_group > div {
    display: none;
    border-top: 1px solid #ddd;
    padding: 0px;
    margin: 0px;
    height: 100%;
}

/* This matches tabs displaying to their associated radio inputs */
.tab1:checked ~ .tab1, .tab2:checked ~ .tab2, .tab3:checked ~ .tab3, .tab4:checked ~ .tab4, .tab5:checked ~ .tab5{
    display: table;
    padding: 8px;
    line-height: 20px;
    width: 100%;
    height: 78vh;
}

#midi_in1, #midi_in2, #midi_in3, #midi_in4, #midi_in5, 
    #midi_in6, #midi_in7, #midi_in8, #midi_in9, #midi_in10,
    #midi_out1, #midi_out2, #midi_out3, #midi_out4, #midi_out5, 
    #midi_out6, #midi_out7, #midi_out8, #midi_out9, #midi_out10 {
    width: 205px;
}

.tab_settings {
    padding-top: 8px;
}

/* Sample rate input */
input[name="rate"] {
    width: 4em;
}

#prefs_buttons {
    display: table;
    height: 10vh;
    padding: 0px;
    margin: 0px;
    margin-top: -10px;
    margin-bottom: -10px;
    padding: 30px;
}

/* used for the custom dialog titlebar */
#titlebar {
    width: 100%;
    height: 20px;
    margin-bottom: 4px;
    -webkit-app-region: drag;
    background-color: gray;
    cursor: grab;
}

#titlebar_buttons_td {
    padding-right: 1px;
}

#titlebar_title {
    color: white;
    position: relative;
    left: 1px;
    top: 1px;
    background-color: gray;
}

#titlebar_close_button {
    width: 16px;
    height: 16px;
    background: #a2a2a2;
    -webkit-app-region: no-drag;
    color: #FFF;
    font-size: 18px;
    text-align: center;
    line-height: 16px;
    cursor: default;
}

/*#titlebar_close_button:after {
    position: absolute;
    right: 6px;
    top: 1px;
    content: "\d7";
    font-size: 20px;
    color: #FFF;
}*/

#titlebar_close_button:hover {
    background: #b2b2b2;
}

#titlebar_close_button:active {
    background: #e2e2e2;
}

input[type="color"] {
    margin-bottom: 2px;
}

.foreground_color span, 
.background_color span,
.label_color span {
    position: relative;
    bottom: 2px;
}

/* GB: Autocomplete Dropdown style */
#autocomplete_dropdown {
    min-height: auto;
    max-height: 200px;
    overflow-y: scroll;
    background-color: #ebebec;
    border: 1px solid;
    padding: 1px;
}

#autocomplete_dropdown p {
    padding: 2px;
    margin: 1px;
}

#autocomplete_dropdown p.selected {
    background-color: #cfcfd0;
}

#autocomplete_dropdown p .highlight { 
    font-weight: bold;
    color: #e87216;
}
