diff --git a/pd/nw/css/inverted.css b/pd/nw/css/inverted.css index e24c1cd40386eee6bffd4809b1ad49f67b3677f3..c620ab0dbbfbeeb57ebfe897d3b267b0713ae099 100644 --- a/pd/nw/css/inverted.css +++ b/pd/nw/css/inverted.css @@ -91,14 +91,14 @@ display: table-cell; padding: 3px 2px 3px 2px; /* box-shadow: inset 1px 0px 0px 1px #000; */ - background-color: white; + background-color: black; white-space: normal; word-wrap: break-word; -webkit-margin-before: 0px; } #new_object_textentry.obj { - outline: 1px solid blue; + outline: 1px solid #ffff00; } #new_object_textentry.msg { diff --git a/pd/nw/css/vanilla_inverted.css b/pd/nw/css/vanilla_inverted.css new file mode 100644 index 0000000000000000000000000000000000000000..6fbb685ce30084c5ae7348ca36115af848daae94 --- /dev/null +++ b/pd/nw/css/vanilla_inverted.css @@ -0,0 +1,354 @@ +/* Global CSS */ + +@font-face { + font-family: "DejaVu Sans Mono"; + src: url("../DejaVuSansMono.ttf"); +} + +.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: #3c3c3c; + color: white; +} + +/* The main Pd Window */ + +#console_body { + margin: 0px; +} + +#console_controls { + background-color: LightGray; + height: 50px; +} + +#control_frame { + padding: 12px; +} + +#printout { + margin: 8px; +} + +#console_bottom { + position: absolute; + top: 50px; + left: 0px; + right: 0px; + bottom: 0px; + overflow-y: scroll; +} + +/* Pure Data Patch Window (aka canvas) */ + +/* canvas font and background color. (Note: margin needs to stay at zero.) */ +#patch_body { + margin: 0px; + font-family: "DejaVu Sans Mono"; + background-color: black; +} + +#selection_rectangle { + stroke: white; +} + +.cord.signal { + stroke-width: 2; + stroke: white; +} + +.cord.control { + stroke-width: 1; + stroke: white; +} + +#cord_inspector_rect { + fill: white; + stroke: white; +} + +#cord_inspector_text { + fill: black; +} + +#cord_inspector_text.flash { + fill: #e87216; +} + +#new_object_textentry { + /* max-width: 10ch; */ + min-width: 3ch; + position: absolute; + display: table-cell; + padding: 3px 2px 3px 2px; + /* box-shadow: inset 1px 0px 0px 1px #000; */ + background-color: black; + white-space: normal; + word-wrap: break-word; + -webkit-margin-before: 0px; +} + +#new_object_textentry.obj { + outline: 1px solid yellow; +} + +#new_object_textentry.msg { + outline: 0px solid transparent; + background-image: url(../msg-box.svg); +} + +p.msg::after { + content: ""; + height: 100%; + width: 5px; + background-image: url(../msg-box-flag.svg); + position: absolute; + top: 0%; + left: 100%; +} + +/* not sure what this is doing here... */ +text { + // fill: red; + cursor: default; +} + +/* not sure if this is still needed */ +.selected_border { + stroke: blue; + stroke-dasharray: none; + stroke-width: 1; +} + +.msg .border { + stroke: white; + fill: none; +} + +/* state of msg box when clicking it */ +.msg.flashed .border { + stroke-width: 4; +} + +/* atom box */ +.atom .border { + stroke: white; + fill: none; +} + +.obj .border { + fill: none; + stroke: white; +} + +/* A little hack for special canvas 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: white; +} + +.graph .border { + stroke: white; + fill: none; +} + +/* 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 objects border, unless it is inside a gop + canvas. +*/ +:not(.gop).selected .border { + stroke: yellow; + display: inline; +} + +/* selected connection between objects */ +.selected_line { + stroke: blue; +} + +/* for an object that didn't create */ +.obj .border.broken_border { + fill: none; + stroke: #f00; + stroke-dasharray: 3 2; +} + +/* control inlet */ +.xlet_control { + stroke: white; + fill: white; +// stroke-width: 1; +} + +/* signal inlet */ +.xlet_signal { + stroke: white; + fill: white; + stroke-width: 1; +} + +/* iemgui inlet or outlet */ +.xlet_iemgui { + stroke: white; + fill: white; + stroke-width: 1; +} + +/* text label for an iemgui */ +.iemgui_label_selected { + fill: blue; +} + +/* 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 */ +@-webkit-keyframes fizzle { + 0% { + stroke-width: 1; + stroke-opacity: 1; + x: 0; + rx: 1; + ry: 1; + } + 100% { + stroke-width: 20; + stroke-opacity: 0.2; + x: 100; + rx: 50; + ry: 50; + } +} + +/* can't remember why this was tagged !important */ +.xlet_selected { + stroke: purple !important; + -webkit-animation: fizzle 0.5s linear 1; +} + +/* Common to all dialogs */ + +.submit_buttons { + text-align: center; + padding: 8px; +} + +fieldset { + font-family:Georgia; + background-color:#eeeeee; + border-radius:3px; + border:2px solid black; + margin-left:auto; + margin-right:auto; + padding: 10px; +} + +.hidden { + display: none; +} + +.container{ + display: none; +} + +/* Iemgui dialog */ + +#iemgui_dialog_body { + font-family:Verdana; + margin: 0px; +} + +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: 8em; +} + +input[name="font-size"] { + width: 3em; +} + +/* 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; +} + +div.y2 { + text-align: center; + padding: 3px; +} + +.disabled { + color: #aaa; +} diff --git a/pd/nw/dialog_prefs.html b/pd/nw/dialog_prefs.html index 77cab683ae7b856112ff042181715b90b0e7f8ae..d7279cc0423e9f674c1d16f09723fb8024c0b0c1 100644 --- a/pd/nw/dialog_prefs.html +++ b/pd/nw/dialog_prefs.html @@ -218,14 +218,16 @@ <select id="gui_preset" onchange="gui_preset_change(this);"> <option data-i18n="prefs.gui.presets.default" value="default"> </option> + <option data-i18n="prefs.gui.presets.inverted" value="inverted"> + </option> <option data-i18n="prefs.gui.presets.vanilla" value="vanilla"> </option> + <option data-i18n="prefs.gui.presets.vanilla_inverted" value="vanilla_inverted"> + </option> <option data-i18n="prefs.gui.presets.extended" value="extended"> </option> <option data-i18n="prefs.gui.presets.l2ork" value="l2ork"> </option> - <option data-i18n="prefs.gui.presets.inverted" value="inverted"> - </option> </select> diff --git a/pd/nw/locales/en/translation.json b/pd/nw/locales/en/translation.json index d1e16a83e81f564f3658fde49d5c945016fa8d14..a703c019441340804a4f89b7067a80d8ea0eb700 100644 --- a/pd/nw/locales/en/translation.json +++ b/pd/nw/locales/en/translation.json @@ -298,11 +298,12 @@ "presets": { "gui_preset": "GUI preset", "gui_preset_tt": "Collection of patch colors and styles", - "default": "default", + "default": "Default", "vanilla": "Vanilla", + "vanilla_inverted": "Vanilla (Inverted)", "extended": "Pd-Extended", "l2ork": "Pd-L2ork", - "inverted": "inverted" + "inverted": "Inverted" } }, "audio": {