From 5c9f41b7a756f51bc78137fb87c93bb7b4248154 Mon Sep 17 00:00:00 2001 From: asuk Date: Mon, 1 Apr 2024 13:25:55 +0200 Subject: [PATCH] ui css changes dependencies hashes: openFrameworks d78075f4bca6be2a2533c6e51a75cc1f18404501 ofxMsdfgen e14da13d02c4dff04fb69d7923469f606924e6c3 ofxGPUFont d482bb7cbdf6b296fa4ab5abcf73fb5ff8c8b239 ofxVariableLab 0b5f9bdebc1e5550621957e73c040c258ec6317b ofxProfiler a868e34fa1a79189dd4fbdede2938e308535e5e8 --- bin/em/variabletime/web/css/demo.css | 54 +++++++++++++++ bin/em/variabletime/web/css/theatre.css | 90 ++++++++++++++++++++++--- 2 files changed, 135 insertions(+), 9 deletions(-) diff --git a/bin/em/variabletime/web/css/demo.css b/bin/em/variabletime/web/css/demo.css index a3c2336..97fc650 100755 --- a/bin/em/variabletime/web/css/demo.css +++ b/bin/em/variabletime/web/css/demo.css @@ -263,6 +263,58 @@ body.debug div:not(.centerLine) { font-size: 0.8em; pointer-events: none; } +#notice_recording .what p, #notice_recording .details button{ + text-align: center; + width: fit-content; + +} +#notice_recording .what p{ + animation: blink 1s linear infinite !important; +} +#notice_recording .details button{ + border: none; + background-color: white; + font-size: 1.1em; + padding: 5px 15px 4px 15px !important; + margin: 7px 10px; + display: flex; + flex-grow: 1; + justify-content: center; + border-radius: 10px; + border: none; + padding: 7px; + text-transform: uppercase; + width: calc(100% - 20px); + box-sizing: border-box; + cursor: pointer; + font-variation-settings: 'wght' 750, 'wdth' 100; + font-family: 'Tonka'; +} + +@keyframes blink{ + 0%{ + opacity: 1; + } + + 50%{ + opacity: 0; + } + 100%{ + opacity: 1; + } +} + +#notice_recording .details button:hover{ + background: black; + color: white; +} + +#notice_recording .content{ + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} #notice_recording.visible { display: flex; } @@ -508,6 +560,8 @@ body.debug div:not(.centerLine) { margin: 0; } + + #exporter_render_info { display: none; color: rgb(234, 35, 51); diff --git a/bin/em/variabletime/web/css/theatre.css b/bin/em/variabletime/web/css/theatre.css index 69ac66e..c1aeff3 100644 --- a/bin/em/variabletime/web/css/theatre.css +++ b/bin/em/variabletime/web/css/theatre.css @@ -90,6 +90,11 @@ flex-wrap: wrap; } +.propWrapper{ +/* margin-top: 5px;*/ +margin-bottom: 3px; +} + .xWrapper, .yWrapper, .fontFamilyWrapper, @@ -118,6 +123,20 @@ } +.colorTitleWrapper{ + flex-grow: 0; + /* background: blue; */ + width: fit-content; + margin-right: 10px; +} +.colorTitleWrapper + div div div:first-of-type{ + border: none !important; + margin-right: 5px; +} +.colorTitleWrapper + div{ + flex-grow: 1 !important; +} + .textWrappingButton { margin-left: 30px; } @@ -151,6 +170,25 @@ margin: 0px 10px; } +.mirror_xyWrapper input[type=checkbox] + label::after, .mirror_xWrapper input[type=checkbox] + label::after, .mirror_yWrapper input[type=checkbox] + label::after { + content: ' OFF'; +} + +.mirror_xyWrapper input[type=checkbox]:checked + label, .mirror_xWrapper input[type=checkbox]:checked + label, .mirror_yWrapper input[type=checkbox]:checked + label { + color: #1cba94; +} + +.mirror_xyWrapper input[type=checkbox]:checked + label::after, .mirror_xWrapper input[type=checkbox]:checked + label::after, .mirror_yWrapper input[type=checkbox]:checked + label::after { + content: ' ON'; +} + +.mirror_xyWrapper input[type=checkbox], .mirror_xWrapper input[type=checkbox], .mirror_yWrapper input[type=checkbox] { + position: absolute; + width: 27px; + opacity: 0; + cursor: pointer; +} + .audio_min_max { padding: 5px; box-sizing: border-box; @@ -172,9 +210,10 @@ align-items: center; justify-content: space-between; border-top: 1px dashed #91919177; - padding-top: 10px; + /* padding-top: 10px; */ margin-top: 10px; margin: 10px 0px; + border-bottom: 1px dashed #91919177; } .source_Dom_Cont select { @@ -213,9 +252,18 @@ justify-content: space-between; + +} +.letterDelayCont{ + +} +.letterDelayCont input { + margin-left: 10px; + flex-shrink: 1 !important; + width: 100%; } -.audio_min_max input { +.audio_min_max input, .letterDelayCont input { background: rgb(255, 255, 255); border: none; color: rgb(0, 0, 0); @@ -240,7 +288,7 @@ font-variation-settings: "wght" 700; } -.audio_min_max label{ +.audio_min_max label, .letterDelayCont label{ display: flex; align-items: center; } @@ -249,6 +297,11 @@ margin-top: 5px; margin-bottom: 5px; padding: 0px 7px 7px 7px; + background: rgba(163, 163, 163, 0.4) !important; +} + +.fontVariationAxesContWrapper .audioOptions{ + margin-left: -10px; } .audioOptions label { @@ -422,12 +475,20 @@ label svg{ .textWrapper {} .colorWrapper { - border-bottom: 1px dashed #91919177; + border-top: 1px dashed #91919177; margin-bottom: 10px; - padding-bottom: 10px; padding-top: 10px; } +.letterDelaysContWrapper{ + border-top: 1px dashed #91919177; + padding-top: 10px; + margin-top: 10px; +} + +.mirror_xyInputWrapper, .mirror_yInputWrapper, .mirror_xInputWrapper{ + margin-left: 0px !important; +} span.icon { font-family: 'VariableIcons'; @@ -598,8 +659,8 @@ li.layerMover div.selected svg circle { display: flex; align-items: center; justify-content: center; - width: 17px; - height: 17px; + width: 20px; + height: 20px; padding: 0; border-radius: 50%; } @@ -615,8 +676,8 @@ li.layerMover div.selected svg circle { .recordButton img { max-width: 70%; /* margin-left: 2px;*/ - width: 10px; - height: 10px; + width: 12px; + height: 12px; } .recordButton label { @@ -628,6 +689,13 @@ li.layerMover div.selected svg circle { background: #1cba94; } +.propInputWrapper{ + flex-grow: 1 !important; + flex-shrink: 1 !important; + width: 100%; + margin-left: 10px; +} + .recording { overflow: hidden; background: rgb(255, 255, 255); @@ -662,3 +730,7 @@ li.layerMover div.selected svg circle { .picker_wrapper.popup .picker_arrow::before { /* background: pink;*/ } + +.color_preview{ + border: none !important; +}