htdocs/WebApplications/GuiEditor/Views/View.css

/* Main tabs and title */

#GuiEditor_MainView {
    height: calc(100% - 45px);
}

#GuiEditor_Tabs {
    height: calc(100% - 30px);
}

#GuiEditor_SetupName {
    margin-bottom: 4px;
}

#GuiEditor_SetupName label {
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
}

#GuiEditor_RequestEditorView,
#GuiEditor_ViewmodelContentEditor,
#GuiEditor_ViewContentEditor,
#GuiEditor_InfoAreaView,
#GuiEditor_RequestEditorSplit,
#GuiEditor_ViewmodelContentEditor_Tabs,
#GuiEditor_ViewContentEditor_Tabs,
#GuiEditor_UIConfigEditor,
#GuiEditor_UIConfigEditor_EditorContainer {
    height: calc(100% - 37px);
}

/* View setup as text tab */

#GuiEditor_InfoArea {
    height : 100%;
    resize: none;
    width: 100%;
}

/* Content editors */

#GuiEditor_ViewmodelContentEditor_Tabs > .ui-tabs-panel,
#GuiEditor_ViewContentEditor_Tabs > .ui-tabs-panel {
    height: calc(100% - 25px);
}

#GuiEditor_ViewContentEditor_Tabs > .ui-tabs-panel > div > .ui-tabs-panel {
    height: calc(100% - 22px);
}

#GuiEditor_ViewmodelContentEditor_Tabs > .ui-tabs-panel > div,
#GuiEditor_ViewContentEditor_Tabs > .ui-tabs-panel > div,
#GuiEditor_ViewContentEditor_Tabs > .ui-tabs-panel > div > .ui-tabs-panel > div {
    height: 100%;
}

.file-changed  {
    color: red !important;
}

/* Setup editor tab */

#GuiEditor_Tabs .Aligner .ui-resizable-handle {
    background-color: #aaa;
    width: 5px;
}

.GuiEditor_Helpside {
    width: 20%;
}

#GuiEditor_HelpTree {
    width: 100%;
    height: calc(100% - 26px);
    overflow: auto;
}

#GuiEditor_RequestTree {
    width: 20%;
    padding-bottom: 100px;
    background-color: #e5e5e5;
}

#GuiEditor_Playground {
    width: 80%;
    height: 100%;
    display: inline-block;
    position: relative;
    overflow: auto;
}

/* legend */

#GuiEditor_Legend {
    position: fixed;
    bottom: 0px;
    right: 0px;
    white-space: nowrap;
    background-color: #e5e5e5;
    opacity: 0.75;
    z-index: 10000;
    user-select: none;
    cursor: default;
}

#GuiEditor_LegendToggle {
    width: 20px;
    height: 20px;
    position: fixed;
    bottom: 0px;
    right: 0px;
    background: #a5a5a5;
    border-top-left-radius: 100%;
}

#GuiEditor_LegendToggle:hover {
    background: #b5b5b5;
}

#GuiEditor_Legend td:first-child {
    text-align: center;
}

.GuiEditor_LegendCategory {
    text-align: center;
    font-weight: bold;
}

/* Coloring and sorting trees */

li > a {
    box-sizing: border-box;
}

#GuiEditor_RequestTree li.GuiEditor_NodeWithData > a,
#GuiEditor_Legend .GuiEditor_NodeWithData {
    border-left: 2px solid #d5d5d5;
    border-right: 2px solid #d5d5d5;
    border-top: 2px solid #d5d5d5;
    border-bottom: 2px solid #d5d5d5;
}

#GuiEditor_RequestTree ul > li.GuiEditor_NodeWithSelection > a,
#GuiEditor_Legend .GuiEditor_NodeWithSelection {
    border-left: 2px solid red;
}

#GuiEditor_RequestTree ul > li.GuiEditor_NodeWithFilter > a,
#GuiEditor_Legend .GuiEditor_NodeWithFilter {
    border-top: 2px solid #9c5ccc;
}

#GuiEditor_RequestTree ul > li.GuiEditor_NodeWithRangeFilter > a,
#GuiEditor_Legend .GuiEditor_NodeWithRangeFilter {
    border-bottom: 2px solid green;
}

#GuiEditor_RequestTree ul > li.GuiEditor_NodeWithWritableInfo > a,
#GuiEditor_Legend .GuiEditor_NodeWithWritableInfo {
    border-right: 2px solid blue;
}

#GuiEditor_SortButton {
    background-color: #c5c5c5;
    height: 25px;
    display: inline-block;
    vertical-align: top;
}

#GuiEditor_SortButton:hover {
    background-color: #999;
    color: white;
}

#GuiEditor_SortButton[aria-pressed="true"] {
    background-color: #4CAF50;
    color: white;
}

#GuiEditor_HelpSearch {
    width: calc(100% - 60px);
    height: 20px;
    display: inline-block;
    vertical-align: top;
}

/* Setup editor's editors */

DIV.GuiEditor_EditorHeader {
    /*text-align: center;*/
    cursor: move;
    overflow: hidden;
    white-space: nowrap;
    display: block;
    height: 16px;
}

DIV.GuiEditor_ViewmodelEditor DIV.GuiEditor_EditorHeader,
.GuiEditor_ViewmodelEditorLegend {
    background-color: #5c9ccc;
}

DIV.GuiEditor_ViewEditor DIV.GuiEditor_EditorHeader,
.GuiEditor_ViewEditorLegend {
    background-color: #5ccc9c;
}

DIV.GuiEditor_HtmlEditor DIV.GuiEditor_EditorHeader,
.GuiEditor_HtmlEditorLegend {
    background-color: #9ccc5c;
}

DIV.GuiEditor_ImportEditor DIV.GuiEditor_EditorHeader,
.GuiEditor_ImportEditorLegend {
    background-color: #cc9c5c;
}

DIV.GuiEditor_FilterEditor DIV.GuiEditor_EditorHeader,
.GuiEditor_FilterEditorLegend {
    background-color: #9c5ccc;
}

label.GuiEditor_HtmlEditorHeaderLabel,
label.GuiEditor_ViewEditorHeaderLabel,
label.GuiEditor_ViewmodelEditorHeaderLabel,
label.GuiEditor_ImportEditorHeaderLabel,
label.GuiEditor_FilterEditorHeaderLabel {
    cursor: move;
    height: 100%;
    display: inline-block;
    padding: 0px 4px;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
    font-size: 10px;
}

label.GuiEditor_HtmlEditorHeaderLabel {
	/* 3 buttons, 2 35px, 1 20px, + 3*2 * 1 px border for the buttons = 96px + 2px for good luck */
    width: calc(100% - 98px);
}

label.GuiEditor_ImportEditorHeaderLabel {
    width: calc(100% - 28px);
}

label.GuiEditor_ViewEditorHeaderLabel,
label.GuiEditor_ViewmodelEditorHeaderLabel {
    /* 2 buttons, 1 35px, 1 20px, 2*2 * 1 px border for the buttons = 59px + 4px for good luck */
    width: calc(100% - 63px);
}

label.GuiEditor_FilterEditorHeaderLabel {
    /* 2 buttons, 1 35px, 2 20px, 2*2 * 1 px border for the buttons = 59px + 4px for good luck */
    width: calc(100% - 83px);
}

.GuiEditor_ViewmodelEditor, 
.GuiEditor_ViewEditor,
.GuiEditor_ImportEditor,
.GuiEditor_HtmlEditor,
.GuiEditor_FilterEditor {
    background-color: #eee;
    border: 1px solid #aaa;
    position: absolute;
    z-index: 800;
    font-size: 10px;
    width: auto;
    height: auto;
}

button.GuiEditor_EditorButtonLeft,
button.GuiEditor_EditorButtonRight {
    background-color: #d66;
    font-size: 10px;
    font-weight: bold;
    width: 35px;
    height: 100%;
    display: inline-block;
    color: #fff;
    border: 1px solid #ccc;
    vertical-align: top;
    padding: 0px;
}

button.GuiEditor_EditorButtonRight {
    width: 20px;
}

button:active.GuiEditor_EditorButtonLeft,
button:active.GuiEditor_EditorButtonRight {
    background-color: #f22;
}

button:hover.GuiEditor_EditorButtonLeft,
button:hover.GuiEditor_EditorButtonRight {
    background-color: #e44;
}

.GuiEditor_Buttonbar {
    margin: 5px 0 5px 0;
    width: 100%;
    height: 22px;
}

.GuiEditor_Disabled {
    display: none;
}

.GuiEditor_Button_Left {
    float: left;
    background-color: #ddd;
    border: 2px solid #ddd;
    height: 22px;
}

.GuiEditor_Button_Right {
    float: right;
    background-color: #ccc;
    border: 2px solid #ccc;
    height: 22px;
}

.GuiEditor_Button_Left:hover,
.GuiEditor_Button_Right:hover {
    background-color: #999;
    border: 2px solid #999;
    color: white;
}

/* 3rd party customization */

.dialog-table TD{
    font-size: 14pt;
}

.ui-dialog .ui-state-error {
    padding: .3em;
}

.ui-dialog {
    white-space: nowrap;
    z-index: 10000 !important;
}

.ui-widget-overlay {
    z-index: 9900 !important;
}

.validateTips {
    white-space: normal;
}

.validateSearch {
    width: 60%;
}

.validateSearchButton, .validateSearchClear {
    width: 20%;
}

.vakata-context {
    z-index: 4000 !important;
}

#jstree-marker {
    z-index: 4000 !important;
}

.ui-tabs .ui-tabs-nav li {
    position: relative;
}

.ui-tabs .ui-tabs-nav .ui-icon-close {
    cursor: pointer;
    position: absolute;
    top: 6px;
    right: 0px;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: 6px 20px 6px 6px;
}

/* Animation for serching */

.GuiEditor_ViewmodelEditor.found > .GuiEditor_EditorHeader > label {
    animation-name: ViewModel_eph;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.GuiEditor_ViewEditor.found > .GuiEditor_EditorHeader > label {
    animation-name: View_eph;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.GuiEditor_ImportEditor.found > .GuiEditor_EditorHeader > label {
    animation-name: Imports_eph;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.GuiEditor_HtmlEditor.found > .GuiEditor_EditorHeader > label {
    animation-name: Html_eph;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

#GuiEditor_RequestTree .found {
    animation-name: Request_eph;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes ViewModel_eph {
    0%   {background-color: #5c9ccc;}
    50%  {background-color: green;}
    100% {background-color: #5c9ccc;}
}

@keyframes View_eph {
    0%   {background-color: #5ccc9c;}
    50%  {background-color: green;}
    100% {background-color: #5ccc9c;}
}

@keyframes Imports_eph {
    0%   {background-color: #cc9c5c;}
    50%  {background-color: green;}
    100% {background-color: #cc9c5c;}
}

@keyframes Html_eph {
    0%   {background-color: #9ccc5c;}
    50%  {background-color: green;}
    100% {background-color: #9ccc5c;}
}

@keyframes Request_eph {
    0%   {background-color: #eeeeee;}
    50%  {background-color: green;}
    100% {background-color: #eeeeee;}
}