graphdb-workbench/dist/css/graphql/graphql-playground.css

The web application for GraphDB APIs

:root{--default-btn-bgcolor:#ebebeb;--default-btn-focus-bgcolor:#d4d4d4;--default-btn-focus-color:#373a3c}body,html{height:100vh}.graphiql-container .CodeMirror,.graphiql-dialog,.graphql-playground-view #graphiql .graphiql-container,.graphql-playground-view #graphiql .graphiql-container .graphiql-editors{background-color:#fff}.page-content,.page-content .container-fluid{height:calc(100% - 50px)}.content,.graphql-playground-component,.graphql-playground-container,.graphql-playground-view,graphql-playground{display:block;height:100%}graphql-playground{padding-bottom:16px}.graphql-playground-view #title-container{margin-bottom:16px}.graphql-playground-view graphql-playground-component{height:100%}.graphql-playground-view .toolbar{align-items:end;display:flex;flex-direction:column;margin-bottom:16px}.graphql-playground-view .toolbar .graphql-endpoint-selector{width:300px}.graphql-playground-view #graphiql *{border-radius:0;font-family:var(--main-font);font-size:1rem!important}.graphql-playground-view #graphiql .graphiql-container{border:1px solid #ddd}.graphql-playground-view #graphiql .graphiql-container .graphiql-sidebar{padding-bottom:0;padding-top:0}.graphql-playground-view #graphiql .graphiql-sidebar button{color:var(--primary-color);transition:all .15s ease-out}.graphql-playground-view #graphiql .graphiql-sidebar button:hover{background-color:transparent;transform:scale(1.2)}.graphql-playground-view #graphiql .graphiql-sidebar button:active{background-color:#fff}.graphql-playground-view #graphiql .graphiql-sidebar button:focus{outline:none}.graphql-playground-view #graphiql .graphiql-sidebar button[data-value=settings]{display:none}.graphql-playground-view #graphiql .graphiql-sessions .graphiql-session-header .graphiql-tabs{font-size:1rem;margin-bottom:0;padding:0}.graphql-playground-view #graphiql .graphiql-tabs button{transition:all .15s ease-out}.graphql-playground-view #graphiql .graphiql-tab>button.graphiql-tab-close{visibility:visible}.graphql-playground-view #graphiql .graphiql-tabs button:focus{outline:none}.graphql-playground-view #graphiql .graphiql-tabs .graphiql-tab,.graphql-playground-view #graphiql .graphiql-tabs button:hover{background-color:var(--base-background-hover-color)}.graphql-playground-view #graphiql .graphiql-tabs>:not(:first-child){margin-left:.2em}.graphql-playground-view #graphiql .graphiql-tabs .graphiql-tab-active{background-color:#fff!important}.graphql-playground-view #graphiql .graphiql-sessions .graphiql-session-header .graphiql-tab-add{background-color:var(--base-background-hover-color);padding:8px}.graphql-playground-view #graphiql .graphiql-sessions .graphiql-session-header .graphiql-tab-add:hover svg,.graphql-playground-view #graphiql .graphiql-sessions .graphiql-session-header .graphiql-tab-close:hover{background-color:transparent;color:var(--primary-color)}.graphql-playground-view #graphiql .graphiql-tabs .graphiql-tab-active{background-color:var(--base-background-hover-color)}.graphql-playground-view #graphiql .graphiql-tabs .graphiql-tab-button{color:var(--base-text-color);padding:4px 8px}.graphql-playground-view #graphiql .graphiql-sessions{background-color:#fff;margin-bottom:0;margin-right:0!important;margin-top:0}.graphql-playground-view #graphiql .graphiql-sessions .graphiql-logo{display:none}.graphql-playground-view #graphiql .graphiql-sessions .graphiql-session-header{color:inherit;height:unset;justify-content:start}.graphql-playground-view #graphiql .graphiql-sessions .graphiql-session{padding:0}.graphql-playground-view #graphiql .graphiql-sessions .graphiql-editors,.graphql-playground-view #graphiql .graphiql-sessions .graphiql-response{border:1px solid #ddd;border-bottom:none;box-shadow:none}.graphql-playground-view #graphiql .graphiql-sessions .graphiql-response{border-right:none}.graphql-playground-view #graphiql .graphiql-sessions .graphiql-editors .graphiql-query-editor{padding:0}.graphql-playground-view #graphiql .graphiql-sessions .graphiql-editors .CodeMirror-gutters{background-color:#f7f7f7;border-right:1px solid #ddd}.graphql-playground-view #graphiql .graphiql-sessions .graphiql-editors .CodeMirror-gutter-wrapper *{color:rgba(0,0,0,.66);font-weight:300}.graphql-playground-view #graphiql .graphiql-sessions .graphiql-editors.full-height{margin-top:0}.graphql-playground-view #graphiql .graphiql-sessions .graphiql-editors .graphiql-toolbar{margin:.5em}.graphql-playground-view #graphiql .graphiql-sessions .graphiql-editors .graphiql-toolbar button{transition:all .15s ease-out}.graphql-playground-view #graphiql .graphiql-sessions .graphiql-editors .graphiql-toolbar button:hover{background-color:transparent;transform:scale(1.2)}.graphql-playground-view #graphiql .graphiql-sessions .graphiql-editors .graphiql-toolbar button:focus{outline:none}.graphql-playground-view #graphiql .graphiql-sessions .graphiql-editors .graphiql-toolbar button.graphiql-execute-button{background-color:var(--primary-color)}.graphql-playground-view #graphiql .graphiql-sessions .graphiql-editors .graphiql-toolbar .graphiql-toolbar-icon{color:var(--primary-color)}.graphql-playground-view #graphiql .graphiql-editor-tools{padding:0}.graphql-playground-view #graphiql .graphiql-editor-tools button{background-color:#fff;color:var(--secondary-color);font-weight:400;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.graphql-playground-view #graphiql .graphiql-editor-tools button:hover{background-color:var(--base-background-hover-color);border-color:var(--base-background-hover-color);color:var(--default-btn-focus-color)}.graphql-playground-view #graphiql .graphiql-editor-tools .graphiql-toggle-editor-tools:hover svg,.graphql-playground-view #graphiql .graphiql-history .graphiql-history-item-action{color:var(--primary-color)}.graphql-playground-view #graphiql .graphiql-history .graphiql-button{background-color:var(--default-btn-bgcolor);border-color:var(--default-btn-bgcolor);color:var(--secondary-color);font-weight:400;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.graphql-playground-view #graphiql .graphiql-history .graphiql-button:hover{background-color:var(--default-btn-focus-bgcolor);border-color:var(--default-btn-focus-bgcolor);color:var(--default-btn-focus-color)}.graphql-playground-view #graphiql .graphiql-history .graphiql-history-header{color:var(--base-text-color)}.graphql-playground-view #graphiql .graphiql-history .graphiql-history-item:hover{background-color:var(--base-background-hover-color)}.graphql-playground-view #graphiql .graphiql-history .graphiql-history-item-label{color:var(--secondary-color)}.graphql-playground-view #graphiql .graphiql-history .graphiql-history-item-label:hover{background-color:var(--base-background-selected-color)}.graphql-playground-view #graphiql .graphiql-history .graphiql-history-item.editable{background-color:#fff}.graphql-playground-view #graphiql .graphiql-history .graphiql-history-item.editable input{border:1px solid hsla(var(--secondary-color-hsl),.5);font-weight:300}.graphql-playground-view #graphiql .graphiql-history .graphiql-history-item.editable button{color:var(--primary-color)}.graphql-playground-view #graphiql .graphiql-history .graphiql-history-item.editable button:active,.graphql-playground-view #graphiql .graphiql-history .graphiql-history-item.editable button:focus{background-color:rgba(59,75,104,.1);outline:none}.graphql-playground-view #graphiql .graphiql-history .graphiql-history-item.editable button:nth-of-type(2){color:rgba(0,0,0,.66)}.graphql-playground-view #graphiql .graphiql-history .graphiql-history-item.editable button:nth-of-type(2):active{background-color:#fff}div[data-radix-popper-content-wrapper] *{background-color:var(--secondary-color);border-radius:0;border-top-color:var(--secondary-color);color:#fff;font-size:.875rem;font-weight:400;padding-bottom:1px;padding-top:1px}.graphql-playground-view #graphiql .docExplorerWrap .doc-explorer-title,.graphql-playground-view #graphiql .graphiql-doc-explorer .graphiql-doc-explorer-header{color:var(--base-text-color)}.graphql-playground-view #graphiql .docExplorerWrap .graphiql-explorer-root>div{overflow:hidden!important}.graphql-playground-view #graphiql .docExplorerWrap .graphiql-explorer-root>div:first-child>div,.graphql-playground-view #graphiql .docExplorerWrap .graphiql-explorer-root>div:has(.variable-editor-title){overflow-x:auto!important}.graphql-playground-view #graphiql .docExplorerWrap .graphiql-explorer-root>div:first-child{border-bottom:1px solid #d6d6d6}.graphql-playground-view #graphiql .docExplorerWrap .graphiql-explorer-root>div:last-child .variable-editor-title{border:none!important;padding:0!important}.graphql-playground-view #graphiql .docExplorerWrap .graphiql-explorer-root>div:has(.variable-editor-title){margin-top:16px}.graphql-playground-view #graphiql .docExplorerWrap .toolbar-button{background-color:var(--base-background-hover-color);border:none;cursor:pointer;outline:none}.graphql-playground-view #graphiql .docExplorerWrap .graphiql-operation-title-bar .toolbar-button,.graphql-playground-view #graphiql .docExplorerWrap .variable-editor-title .toolbar-button{aspect-ratio:1/1;height:100%!important;width:auto!important}.graphql-playground-view #graphiql .docExplorerWrap .toolbar-button span{display:block}.graphql-playground-view #graphiql .docExplorerWrap .toolbar-button:hover span{color:var(--primary-color)!important;transform:scale(1.2)}.graphql-playground-view #graphiql .docExplorerWrap .variable-editor-title .toolbar-button{padding:var(--px-4) var(--px-10)}.graphql-playground-view #graphiql .docExplorerWrap select{background-color:#fff!important;background-image:none!important;border:1px solid rgba(0,0,0,.15);border-radius:0;color:#55595c!important;font-size:1rem!important;font-weight:400;height:calc(2rem - 2px);line-height:1.25;margin:1px 8px;outline:0}.graphql-playground-view #graphiql .docExplorerWrap select:focus{background-color:#fff;border-color:hsla(var(--secondary-color-hsl),.5);color:#55595c}.graphql-playground-view #graphiql .docExplorerWrap select option{background-color:var(--html-background)!important;color:var(--gray-color)!important}.graphql-playground-view #graphiql li.CodeMirror-hint-active{background:var(--autocomplete-background);color:inherit}.graphql-playground-view #graphiql .CodeMirror-lint-tooltip{color:var(--primary-color)}.graphiql-dialog{border-radius:0;color:var(--base-text-color)}.graphiql-dialog,.graphiql-dialog-overlay{z-index:1010}.graphiql-dialog .graphiql-dialog-section a,.graphiql-dialog .graphiql-dialog-section a:focus,.graphiql-dialog .graphiql-dialog-section a:hover{color:var(--primary-color);outline:none;text-decoration-line:underline;text-decoration-style:dotted;text-decoration-thickness:var(--link-decoration-thickness);text-underline-offset:var(--link-underline-offset)}