src/App.css
.main-content {
width: 70%;
display: block;
margin: 25px auto 25px;
font-family: sans-serif;
font-size: small;
}
@media screen and (max-width: 768px) {
.main-content {
width: 100%;
margin: 0 auto 0;
}
.code-view-container {
width: 100%;
}
.ui-button {
padding: 10px !important;
}
.ui-toolbar-group-left {
padding-top: 1px !important;
}
.iframe-code2 {
width: 100% !important;
}
}
.ui-toolbar-group-left {
padding-top: 8px;
}
.ui-datatable {
padding-top: 5px;
padding-bottom: 5px;
}
.ui-dialog .ui-dialog-content {
overflow: unset !important;
}
.ui-dialog-footer{
border-width: 1px 0 0 0 !important;
}
.sample-code {
font-size: 14px !important;
}
pre.javascript.hljs {
margin-top: 0 !important;
padding-left: 10px;
}
.color-grey {
color: grey;
}
h1 {
color: deepskyblue;
text-align: center;
}
h2 {
margin: 5px;
font-size: 16px;
color: cornflowerblue;
}
h3 {
font-size: 16px;
color: dodgerblue;
padding: 30px;
}
.custom .ui-scrollpanel-wrapper {
border-right: 9px solid #f4f4f4;
}
.custom .ui-scrollpanel-bar {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: darkgrey;
opacity: 1;
transition: background-color .3s;
}
div.ui-toolbar {
margin-top: 10px;
margin-bottom: 10px;
}
.title {
font-size: 16px;
color: deepskyblue;
font-variant: petite-caps;
font-weight: normal;
display: block;
padding: 10px;
margin-left: 40px;
}
.react-json-view {
padding: 20px;
font-size: 14px;
}
.full-width {
width: 100%;
}
.float-left {
float: left;
}
.checkbox-children {
vertical-align: middle;
margin-left: 10px;
}
.checkbox-children-label {
font-size: 11px;
color: darkorange;
}
.checkbox-children-label:hover {
cursor: pointer;
text-decoration: underline;
}
.code-view-container {
display: block;
margin: 20px auto auto;
width: 90%;
height: 80%;
}
.json-view-container {
width: 100%;
height: 300px;
}
.ui-panel-titlebar {
color: cornflowerblue !important;
font-size: 16px;
font-weight: bolder !important;
}
div.ui-panel {
margin-top: 20px;
margin-bottom: 20px;
}
.centered {
text-align: center;
}
.dialog-label {
padding: 4px 10px;
}
.dropdown {
width: 135px !important;
margin-bottom: 20px !important;
}
.btn-menu {
background-color: grey;
border-color: grey;
}
.left-menu-item {
display: block;
text-decoration: none;
font-size: large;
color: grey !important;
padding-left: 10px;
border-top-style: solid;
border-top-color: lightgrey !important;
border-top-width: 1px;
height: 50px;
line-height: 50px;
transition: 400ms;
}
:hover.left-menu-item {
background-color: grey;
color: white !important;
}
:focus.left-menu-item {
background-color: lightgrey;
}
.left-menu-item > span {
padding-left: 15px;
}
.ui-sidebar-close {
cursor: pointer;
font-size: 18px;
color: lightgrey !important;
border: 1px solid lightgrey !important;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.subtitle {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
font-size: 12px;
color: burlywood;
font-family: Arial, Helvetica, sans-serif;
}
.subtitle-paragraph {
color: cornflowerblue;
text-align: center;
font-size: 14px;
display: inline-flex;
background: ghostwhite;
border-color: cornflowerblue;
border-width: 1px;
border-style: solid;
border-radius: 5px;
}
.title-border {
height: 30px;
border-bottom: 1px solid lightgrey;
}
.ui-calendar-button {
padding: 0 !important;
}
.dialog-small {
font-size: smaller;
color: lightgrey;
}
fieldset {
margin: 10%;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
padding-top: 5%;
padding-bottom: 5%;
}
.error {
color: red;
width: 100%;
text-align: center;
font-size: 20px;
}
.fade-in-long {-webkit-animation: fade 2s ease both; animation: fade 2s ease both}
@-webkit-keyframes fade {from {opacity: 0 } to { opacity: 1 }}
@keyframes fade {from {opacity: 0 } to { opacity: 1 }}
.spinner-height {
height: 35px;
}
.react-numeric-input input {
height: 25px;
width: 136px;
}
.logo-leftside-menu {
width: 30px;
margin-bottom: -10px;
margin-right: 2px;
/* vertical-align: sub; */
}
/* quill editor classes */
.ql-editor {
height: 70px !important;
}
div.ql-tooltip {
z-index: 1;
}
div.ql-tooltip.ql-editing {
z-index: 1;
}
/* end quill editor classes */
.uml-img-container {
width: 100%;
height: 240px;
}
.uml-img {
width: 300px;
display: block;
margin: auto;
}
body{
scrollbar-base-color: #C0C0C0; scrollbar-face-color: darkgrey; scrollbar-3dlight-color: #C0C0C0;
scrollbar-highlight-color: #C0C0C0; scrollbar-track-color: #EBEBEB; scrollbar-arrow-color: black;
scrollbar-shadow-color: #C0C0C0; scrollbar-dark-shadow-color: #C0C0C0;
}
::-webkit-scrollbar {width: 9px; height: 9px} ::-webkit-scrollbar-button {background-color: darkgrey}
::-webkit-scrollbar-track {background-color: lightgrey} ::-webkit-scrollbar-track-piece {background-color: lightgrey}
::-webkit-scrollbar-thumb {height: 50px; background-color: darkgrey; border-radius: 3px}
::-webkit-scrollbar-corner {background-color: #999} ::-webkit-resizer {background-color: #666}
.flex-x {
display: flex;
flex-direction: row;
}
.iframe-code2 {
display: block;
margin: auto;
width: 70%;
height: 80vh;
border: 1px solid lightgrey;
}