TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve visibility of code editor buttons in the backend (#3948) 

Credit to @ayumihamsaki. Fixes #3947.
This commit is contained in:
Ayumi Hamasaki 2018-11-30 22:59:08 +00:00 committed by Luke Towers
parent cd275554f2
commit 8e9b3dba54
2 changed files with 50 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
modules/backend/formwidgets/codeeditor/assets/css/codeeditor.css
View File

@ -8,7 +8,7 @@
.field-codeeditor.size-giant{min-height:350px}
.field-codeeditor .ace_search{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:14px;color:#333333;z-index:13}
.field-codeeditor .editor-code{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
.field-codeeditor .editor-toolbar{position:absolute;top:10px;right:25px;z-index:10}
.field-codeeditor .editor-toolbar{position:absolute;top:-30px;right:35px;z-index:13}
.field-codeeditor .editor-toolbar > ul,.field-codeeditor .editor-toolbar ul > li{list-style-type:none;padding:0;margin:0}
.field-codeeditor .editor-toolbar > ul > li{float:left}
.field-codeeditor .editor-toolbar > ul > li .tooltip.left{margin-right:25px}
@ -19,5 +19,7 @@
.field-codeeditor .editor-toolbar > ul > li > a:hover > i,.field-codeeditor .editor-toolbar > ul > li > a:focus > i{opacity:1;filter:alpha(opacity=100)}
.field-codeeditor.editor-fullscreen{z-index:301;position:fixed !important;top:0;left:0;height:100%;border-width:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
.field-codeeditor.editor-fullscreen .editor-code{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
.field-codeeditor.editor-fullscreen .editor-toolbar{z-index:302}
.field-codeeditor.editor-fullscreen .ace_search{z-index:303}
.field-codeeditor.editor-fullscreen .ace_search{z-index:303}
.field-codeeditor.editor-fullscreen .editor-toolbar{z-index:302;border-radius:0 0 5px 5px;right:25px;background-color:#ddd;border:1px solid #cbcbcb;border-right-color:#cbcbcb;border-right-style:solid;border-right-width:1px;border-top:0 none;max-width:125px;overflow:hidden;margin:0;padding:4px;position:absolute;top:0;white-space:normal}
.field-codeeditor.editor-fullscreen .editor-toolbar > ul > li > a{color:#666}
.secondary-tabs .editor-toolbar > ul > li > a{color:#fff}

48
modules/backend/formwidgets/codeeditor/assets/less/codeeditor.less
View File

@ -1,5 +1,10 @@
@import "../../../../assets/less/core/boot.less";
@color_1: #666;
@color_2: #fff;
@background_color_1: #ddd;
@border_right_color_1: #cbcbcb;
.field-codeeditor {
width: 100%;
position: relative;
@ -28,8 +33,8 @@
.editor-toolbar {
position: absolute;
top: 10px;
right: 25px;
top: -30px;
right: 35px;
z-index: @zindex-form;
> ul, ul > li { list-style-type: none; padding: 0; margin: 0; }
> ul > li {
@ -74,7 +79,44 @@
border-width: 0;
.border-radius(0);
.editor-code { .border-radius(0); }
.editor-toolbar { z-index: @zindex-fullscreen + 2; }
.editor-toolbar {
z-index: @zindex-fullscreen + 2;
border-radius: 0 0 5px 5px;
right: 25px;
background-color: @background_color_1;
border: 1px solid #cbcbcb;
border-right-color: @border_right_color_1;
border-right-style: solid;
border-right-width: 1px;
border-top: 0 none;
max-width: 125px;
overflow: hidden;
margin: 0;
padding: 4px;
position: absolute;
top: 0;
white-space: normal;
>ul {
>li {
>a {
color: @color_1;
}
}
}
}
.ace_search { z-index: @zindex-fullscreen + 3; }
}
.secondary-tabs {
.editor-toolbar {
>ul {
>li {
>a {
color: @color_2;
}
}
}
}
}
}