From b5b066fb9919fabad6a91458d7b5e4811194d50a Mon Sep 17 00:00:00 2001 From: Alexander Nikushkin Date: Thu, 10 Oct 2024 20:26:38 +0500 Subject: [PATCH] fix: focus style field --- public/ace.css | 2 +- resources/css/ace.css | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/public/ace.css b/public/ace.css index 889878e..a027aa9 100644 --- a/public/ace.css +++ b/public/ace.css @@ -1 +1 @@ -.ace{position:relative}.ace>textarea{position:absolute;top:0;left:0;z-index:0;height:100%;width:100%;opacity:0}.ace_editor{position:relative;height:300px;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity));outline:2px solid transparent;outline-offset:2px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.ace_editor:is(.dark *){border-color:var(--dark-300)}.ace_editor{z-index:1}.ace_editor.ace_focus{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));--tw-ring-opacity: .7}.ace_editor.ace_focus:is(.dark *){--tw-ring-color: var(--dark-100);--tw-ring-opacity: .3}.ace_editor.form-invalid{--tw-border-opacity: 1;border-color:rgb(220 38 38 / var(--tw-border-opacity))}.ace_editor.form-invalid:is(.dark *){--tw-border-opacity: 1;border-color:rgb(185 28 28 / var(--tw-border-opacity))}.ace_editor.ace_focus.form-invalid{--tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));--tw-ring-opacity: .2}.ace_editor.ace_focus.form-invalid:is(.dark *){--tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity));--tw-ring-opacity: .4}.ace-tm .ace_gutter{background:#f1f5f9}.ace-tm .ace_marker-layer .ace_selection{background:rgb(var(--primary));color:#fff}.dark .ace-tm .ace_gutter{background:rgba(var(--dark-900),.2);border-right:1px solid rgba(var(--dark-300),.5);color:#94a3b8}.dark .ace-tm .ace_print-margin{width:1px;background:rgba(var(--dark-300),.5)}.dark .ace-tm{background-color:rgb(var(--dark-800));color:#fff}.dark .ace-tm .ace_cursor{color:#fff}.dark .ace-tm.ace_multiselect .ace_selection.ace_start{box-shadow:0 0 3px #002240}.dark .ace-tm .ace_marker-layer .ace_step{background:#7f6f13}.dark .ace-tm .ace_marker-layer .ace_bracket{margin:-1px 0 0 -1px;border:1px solid rgba(255,255,255,.15)}.dark .ace-tm .ace_marker-layer .ace_active-line{background:#00000059}.dark .ace-tm .ace_gutter-active-line{background-color:#00000059}.dark .ace-tm .ace_marker-layer .ace_selected-word{border:1px solid rgba(179,101,57,.75)}.dark .ace-tm .ace_invisible{color:#ffffff26}.dark .ace-tm .ace_keyword,.dark .ace-tm .ace_meta{color:#ff9d00}.dark .ace-tm .ace_constant,.dark .ace-tm .ace_constant.ace_character,.dark .ace-tm .ace_constant.ace_character.ace_escape,.dark .ace-tm .ace_constant.ace_other{color:#ff628c}.dark .ace-tm .ace_invalid{color:#f8f8f8;background-color:#800f00}.dark .ace-tm .ace_support{color:#80ffbb}.dark .ace-tm .ace_support.ace_constant{color:#eb939a}.dark .ace-tm .ace_fold{background-color:#ff9d00;border-color:#fff}.dark .ace-tm .ace_support.ace_function{color:#ffb054}.dark .ace-tm .ace_storage{color:#ffee80}.dark .ace-tm .ace_entity{color:#fd0}.dark .ace-tm .ace_string{color:#3ad900}.dark .ace-tm .ace_string.ace_regexp{color:#80ffc2}.dark .ace-tm .ace_comment{font-style:italic;color:#08f}.dark .ace-tm .ace_heading,.dark .ace-tm .ace_markup.ace_heading{color:#c8e4fd;background-color:#001221}.dark .ace-tm .ace_list,.dark .ace-tm .ace_markup.ace_list{background-color:#130d26}.dark .ace-tm .ace_variable{color:#ccc}.dark .ace-tm .ace_variable.ace_language{color:#ff80e1}.dark .ace-tm .ace_meta.ace_tag{color:#9effff}.dark .ace-tm .ace_indent-guide{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYHCLSvkPAAP3AgSDTRd4AAAAAElFTkSuQmCC) right repeat-y}.dark .ace-tm .ace_indent-guide-active{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQIW2PQ1dX9zzBz5sz/ABCcBFFentLlAAAAAElFTkSuQmCC) right repeat-y}.dark .ace_gutter-cell.ace_info,.dark .ace_icon.ace_info{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAJFBMVEUAAAChoaGAgIAqKiq+vr6tra1ZWVmUlJSbm5s8PDxubm56enrdgzg3AAAAAXRSTlMAQObYZgAAAClJREFUeNpjYMAPdsMYHegyJZFQBlsUlMFVCWUYKkAZMxZAGdxlDMQBAG+TBP4B6RyJAAAAAElFTkSuQmCC)} +.ace{position:relative}.ace>textarea{position:absolute;top:0;left:0;z-index:0;height:100%;width:100%;opacity:0}.ace_editor{position:relative;height:300px;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity));outline:2px solid transparent;outline-offset:2px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.ace_editor:is(.dark *){border-color:rgb(var(--dark-300))}.ace_editor{z-index:1}.ace_editor.ace_focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));--tw-ring-opacity: .7}.dark .ace_editor.ace_focus{--tw-ring-color: rgba(var(--dark-100), .3)}.ace_editor.form-invalid{--tw-border-opacity: 1;border-color:rgb(220 38 38 / var(--tw-border-opacity))}.ace_editor.form-invalid:is(.dark *){--tw-border-opacity: 1;border-color:rgb(185 28 28 / var(--tw-border-opacity))}.ace_editor.ace_focus.form-invalid{--tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));--tw-ring-opacity: .2}.ace_editor.ace_focus.form-invalid:is(.dark *){--tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity));--tw-ring-opacity: .4}.ace-tm .ace_gutter{background:#f1f5f9}.ace-tm .ace_marker-layer .ace_selection{background:rgb(var(--primary));color:#fff}.dark .ace-tm .ace_gutter{background:rgba(var(--dark-900),.2);border-right:1px solid rgba(var(--dark-300),.5);color:#94a3b8}.dark .ace-tm .ace_print-margin{width:1px;background:rgba(var(--dark-300),.5)}.dark .ace-tm{background-color:rgb(var(--dark-800));color:#fff}.dark .ace-tm .ace_cursor{color:#fff}.dark .ace-tm.ace_multiselect .ace_selection.ace_start{box-shadow:0 0 3px #002240}.dark .ace-tm .ace_marker-layer .ace_step{background:#7f6f13}.dark .ace-tm .ace_marker-layer .ace_bracket{margin:-1px 0 0 -1px;border:1px solid rgba(255,255,255,.15)}.dark .ace-tm .ace_marker-layer .ace_active-line{background:#00000059}.dark .ace-tm .ace_gutter-active-line{background-color:#00000059}.dark .ace-tm .ace_marker-layer .ace_selected-word{border:1px solid rgba(179,101,57,.75)}.dark .ace-tm .ace_invisible{color:#ffffff26}.dark .ace-tm .ace_keyword,.dark .ace-tm .ace_meta{color:#ff9d00}.dark .ace-tm .ace_constant,.dark .ace-tm .ace_constant.ace_character,.dark .ace-tm .ace_constant.ace_character.ace_escape,.dark .ace-tm .ace_constant.ace_other{color:#ff628c}.dark .ace-tm .ace_invalid{color:#f8f8f8;background-color:#800f00}.dark .ace-tm .ace_support{color:#80ffbb}.dark .ace-tm .ace_support.ace_constant{color:#eb939a}.dark .ace-tm .ace_fold{background-color:#ff9d00;border-color:#fff}.dark .ace-tm .ace_support.ace_function{color:#ffb054}.dark .ace-tm .ace_storage{color:#ffee80}.dark .ace-tm .ace_entity{color:#fd0}.dark .ace-tm .ace_string{color:#3ad900}.dark .ace-tm .ace_string.ace_regexp{color:#80ffc2}.dark .ace-tm .ace_comment{font-style:italic;color:#08f}.dark .ace-tm .ace_heading,.dark .ace-tm .ace_markup.ace_heading{color:#c8e4fd;background-color:#001221}.dark .ace-tm .ace_list,.dark .ace-tm .ace_markup.ace_list{background-color:#130d26}.dark .ace-tm .ace_variable{color:#ccc}.dark .ace-tm .ace_variable.ace_language{color:#ff80e1}.dark .ace-tm .ace_meta.ace_tag{color:#9effff}.dark .ace-tm .ace_indent-guide{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYHCLSvkPAAP3AgSDTRd4AAAAAElFTkSuQmCC) right repeat-y}.dark .ace-tm .ace_indent-guide-active{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQIW2PQ1dX9zzBz5sz/ABCcBFFentLlAAAAAElFTkSuQmCC) right repeat-y}.dark .ace_gutter-cell.ace_info,.dark .ace_icon.ace_info{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAJFBMVEUAAAChoaGAgIAqKiq+vr6tra1ZWVmUlJSbm5s8PDxubm56enrdgzg3AAAAAXRSTlMAQObYZgAAAClJREFUeNpjYMAPdsMYHegyJZFQBlsUlMFVCWUYKkAZMxZAGdxlDMQBAG+TBP4B6RyJAAAAAElFTkSuQmCC)} diff --git a/resources/css/ace.css b/resources/css/ace.css index e8e8b64..38139e0 100644 --- a/resources/css/ace.css +++ b/resources/css/ace.css @@ -5,11 +5,14 @@ @apply absolute top-0 left-0 w-full h-full opacity-0 z-0; } .ace_editor { - @apply h-[300px] relative rounded-md border border-gray-300 outline-none transition-all duration-200 dark:border-[var(--dark-300)]; + @apply h-[300px] relative rounded-md border border-gray-300 outline-none transition-all duration-200 dark:border-[rgb(var(--dark-300))]; z-index: 1; } .ace_editor.ace_focus { - @apply border-gray-300 ring ring-gray-200 ring-opacity-70 dark:ring-[var(--dark-100)] dark:ring-opacity-30; + @apply ring ring-gray-200 ring-opacity-70 +} +.dark .ace_editor.ace_focus { + --tw-ring-color: rgba(var(--dark-100), 0.3); } .ace_editor.form-invalid { @apply border-red-600 dark:border-red-700;