laceside/client/css/styles.css

In-browser JavaScript IDE and execution environment

html,
body {
	margin: 0;
	/* padding:.5em; */
	font-family: Geneva, Arial, Helevtica, sans;
	position: relative;
	height: 100%;
	overflow: clip;
}

#app {
	display: flex;
/* 	gap: 8px; */
	height: 96%;
	overflow: clip;
}

.homeLayout {
	display: block;
	/* display: flex;
	align-items:stretch;
	justify-content: space-around; */
}

.header {
	display: flex;
	justify-content: space-between;
}

#headerMiddle{
	align-self: center;
}

#editors {
	grid-area: editors;
	overflow-y: scroll;
	height: 100%;
	scrollbar-width: none;
	width: 50%;
	overflow: clip;
}

#htmlFrame {
	width: 50%;
}

#iframe {
	width: 100%;
	height: 98%;
}

#sidebar {
	height: 100%;
}

.tabs {
	background-color: #ccf;
	padding: 0 .5em;
	display: flex;
	justify-content: space-between;
}

.tabs div.tab {
	display: inline-block;
	padding: .5em 1em 0 1em;
	background-color: #77f;
	color: white;
	margin: .5em .5em 0 .5em;
	font-weight: bold;
	border-radius: .25em .25em 0 0;
	height: 1.5em;
}

.tabs div.tab:hover {
	background-color: #99f;
}

.editor {
	overflow-y: scroll;
	height: 93%;
}

.editor form {
	/* height:100%; */
	margin: 0;
}

#HTMLEditor,
#CSSEditor {
	display: none;
}

#JSEditor {
	display: block;
}


a {
	cursor: pointer;
	color: blue;
}


nav ul {
	list-style: none;
}

nav ul li {
	cursor: pointer;
	display: inline-block;
	padding-right: 1em;
}

li.menuItem:before {
	position: absolute;
	top: 1em;
	margin: 0 0 0 -12px;
	vertical-align: middle;
	display: inline-block;
	width: .5em;
	height: .5em;
	background: #ccc;
	content: '\BB';
}

#cmdButtons{
	display: inline-flex;
	background-color: #ccf;
	margin-top: .25em;
	padding: .5em 0 0 2em;
}

#cmdButtons .feather{
	width: 1.5em !important;
	height: 1.5em !important;
}

#btnwrapper{
	background-color: #ccf;
	display:flex;
	width:100%;
	align-content: space-between;
	border-top: 1px solid #bbf;
	border-bottom: 1px solid #bbf;
}

#msgs{
	width: 100%;
  	text-align: center;
  	align-content: center;
}

#libraries,
#apps {
	background-color: #fff;
	color: #444;
}

#libraries ul {
	list-style: none;
}

.link {
	cursor: pointer;
}

.listrow:hover{
	background-color: #ccf;
}

.expanded {
	grid-template-columns: 2em auto !important;
}

.box {
	background-color: #444;
	color: #fff;
	border-radius: .25em;
	padding: .5em;
	/* font-size: 150%; */
}

.header,
.footer {
	background-color: #ccf;
	color: #444;
	font-weight: bold;
	border-radius: 5px;
}

#headerRight {
	margin-right: 5em;
}

.profileHeader {
	padding-top: .5em;
	padding-right: 2em;
	display: inline;
}

.topleft {
	position: absolute;
	top: 0;
	left: 0;
}

.topright {
	position: absolute;
	top: 0;
	right: 0;
}

.bottomleft {
	position: absolute;
	bottom: 0;
	left: 0;
}

.bottomright {
	position: absolute;
	bottom: 0;
	right: 0;
}

#userHome,
#home {
	padding: .5em;
}

#userHome {
	width: 100%;
	height: 100%;
}

#userPanel {
	grid-area: userPanel;
}

#userApps {
	grid-area: userApps;
}


#userLibs label{
	font-weight: bold;
}

#userLibs input, #userApps input{
	font-size:1em;
}

#userHome col {
	padding:0;
}

#userInfo {
	grid-area: userInfo;
}

div.panel {
	/* max-width: 1160px; */
}

div.block {
	padding: 1em !important;
	margin: 1em;
	border: 1px solid #ccf;
	width: 30em;
}

div.bigBlock {
	padding: 1em !important;
	margin: 1em;
	border: 1px solid #ccf;
	width: 40em;
}

div.col {
	display: inline-block;
	vertical-align: top;
	padding: .5em;
}

div.row {
	display: block;
	width: 100%;
}

div.flexrow {
	vertical-align: top;
	display: flex;
	justify-content: space-between;
	padding: .25em;
}

div.flexrowcentered {
	display: flex;
	justify-content: center;
}

div.row a {
	color: #77f;
}

div.row a:hover {
	color: #aaf;
}

.w70 {
	width: 70% !important;
}

div.inline {
	display: inline;
}



div.headerCol {
	width: auto;
}

.w50 {
	width: 50em;
}

.w45 {
	width: 45em;
}

.w40 {
	width: 40em;
}

.w35 {
	width: 35em;
}

.w30 {
	width: 30em;
}

.w20 {
	width: 20em;
}

.w15 {
	width: 10em;
}

.w10 {
	width: 10em;
}

.w5 {
	width: 5em;
}



div.md {
	/* width: 10em; */
}

div.pane {
	border: 1px solid #ccf;
	border-radius: .25em;
	padding: 1em;
}

div.completedTask div {
	text-decoration: line-through;
}

/* 
div.centered {
	text-align: center;

}
 */
.right-align {
	text-align: right;
}

#consoleDiv {
	overflow: scroll !important;
	width: 500px;
	height: 500px;
}

/* input[type='text'],
input[type='password'],
input[type='email'] {
	width: 95%;
	height: 2em;
}

input[type='text'],
input[type='date'] {
	height: 2em;
} */

.bold {
	font-weight: bold;
}

button {
	height: 2em;
	cursor: pointer;
}

textarea[name='codeWindow'] {
	width: 100%;
}

#buttonBar {
	display: inline;
}

#console {
	padding: .25em;
	border: 1px solid #ccf;
	overflow: scroll;
	overflow-x: scroll;
	white-space: nowrap;
	border-radius: 0 0 .25em .25em;
	background-color: #fff;
	height: 50%;
	position:fixed;
	bottom:0;
	z-index:2;
	width:100%;
}

.consolePane {
	border-radius: 0 0 5px 5px !important;
	border: 0 !important;
	/* width: 24em !important; */
	overflow: hidden;
	/* bottom: 8px;
	position: absolute; */
}


.CodeMirror {
	border-radius: .25em;
	border: 1px solid #ddd;
	overflow: scroll !important;
	height: 100% !important;
}

.CodeMirror-scroll {}


.CodeMirror pre {
	padding-left: 7px;
	line-height: 1.25;
}

.banner {
	background: #ffc;
	padding: 6px;
	border-bottom: 2px solid #ccf;
}

.banner div {
	margin: 0 auto;
	max-width: 700px;
	text-align: center;
}

#console .log {
	padding: .5em;
	border-bottom: 1px solid #ccf;
	color: #444;
}

#console .error {
	padding: .5em;
	border-bottom: 1px solid #ccf;
	color: red;
}

#codeOutput {
	width: 100%;
	overflow: scroll;
}

#iframe {
/* 	border-radius: .25em; */
	width: 100%;
	height: 100%;
	border: 1px solid #ccf;
}

#codeDiv {
	width: 100%;
	height: 80%;
}

/* #consoleDiv{
  width:100%;
  height:15%;
} */

.profilePic_small {
	width: 2.5em;
	border-radius: 1.25em;
	display: inline;
	margin-right: .25em;
}

.profilePic_mini {
	width: 2em;
	border-radius: 1em;
	display: inline;
	margin-left: .5em;
}

.icon {
	width: 2em;
	height: 2em;
}

svg {
	fill: #ccccff;
}

.right {
	float: right;
}

button {
	background-color: #7777ff;
	border-radius: 1em;
	height: 2sem;
	border: 0;
	padding: 0 1em 0 1em;
	color: #fff;
	font-weight: bold;
	font-size: .9em;
}

button:disabled {
	background-color: #bbf;
}

.feather {
	width: 1em !important;
	height: 1em !important;
	/* vertical-align: sub; */
}

.feather, .feather_bigger{
	stroke: #77f !important;
	stroke-width: 2 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
	fill: none !important;
}

.feather:hover{
	stroke: #eef !important;
	/* background-color: #99f; */
} 

.feather_bigger {
	width: 2em;
	height: 2em;
}
 
.feather_bigger:hover {
	color: #ccf;
}


.feather_white {
	color: white;
}

.filled {
	fill: currentColor;
}

.buttonRow {
	padding-top: .5em;
}

.gadget-ui-collapsiblePane-header {
	color: #444 !important;
	background-color: #ccf !important;
	border-radius: 5px 5px 0 0 !important;
	border: 0;
}

.gadget-ui-collapsiblePane {
	color: #ccf !important;
	border-radius: 0 0 5px 5px !important;
	border: 0 !important;
}

.paging {
	text-align: center;
}

.bubbleClass {
	border: 1px solid #77f;
	padding: 5px;
	border-radius: 5px;
	width: 220px;
	font: 14px Arial;
	background: #fff;
	opacity: .7;
	color: #444;
}

#dialog {
	width: 500px;
	overflow: hidden;
	text-align: center;
}

.sysDialog {
	top: 40%;
	left: 30%;
	position: absolute;
	width: 500px;
	background: #fff;
}

.sysDialog .gadget-ui-floatingPane-header {
	background: #ccf;
}

.centered {
	text-align: center;
	display: flex;
	justify-content: center;
}

span.title {
	font-weight: bold;
	font-size: 1.7em;
}

div.titlebar {
	border-bottom: 1px solid #ccf;
	text-align: center;
}

#profileModal,
#authModal,
#signupModal{
	z-index: 6;
	width: 80%;
	min-width: 800px;
	text-align: center;
}

#appsModal, #librariesModal {
	z-index: 6;
	width: 500px;
}

#messageModal,
#forgotPasswordModal,
#resetPasswordModal {
	z-index: 6;
	width: 50%;
	min-width: 500px;
	text-align: center;
}

#profileContainer {
	display: grid;
	grid-template-columns: 10em auto;
	text-align: left;
	height: 70%;
}

#profileTabs {
	display: inline-block;
	background: #fff;
}

#profileTabs div {
	background: #77f;
}

#profileTabs div:hover {
	background: #ccf;
}

.gadget-ui-tabs-v div.gadget-ui-tab-v-active {
	background-color: #ccf !important;
}

.gadget-ui-tabs-v div.gadget-ui-tab-v {
	margin: .0 0 .5em .5em !important;
}

.vtabContent {
	width: 99%;
}

.vtabContentSplit {
	display: inline-grid;
	grid-template-columns: 50% auto;
	width: 99%;
}

.vcontentContainer {
	display: inline-block;
	vertical-align: top;
	padding-left: 1em;
	padding-top: 1em;
	border: 1px solid #ccf;
}

.gadgetui-modal {
	z-index: 6;
	height: 92% !important;
}

div.form {
	padding: 1em 3em;

}

/*
div.form div{
  padding-bottom: 1em;
} */

div.form input {
	width: 20em;
}

#profilePicUploadDiv {
	width: 300px;
	height: 300px;
	text-align: center;
	margin-top: auto;
	margin-bottom: auto;
}

.gadgetui-fileuploader-wrapper {
	height: 300px;
}

.gadgetui-fileuploader-dropzone {
	width: 300px;
	height: 300px;
	margin-top: 45%;
}

div[name='dropzone'] {
	height: 300px;
	width: 300px;
	text-align: center;
	margin-top: auto;
	margin-bottom: auto;
	border: 1px solid black;
}

.gadgetui-fileuploader-wrapper {
	height: 300px;
}

#fileUploadDiv,
#display,
#fileUploadDiv {
	display: inline-block;
}

div.label {
	padding-right: 1em;
	margin-top: .5em;
}

.hidden {
	display: none !important;
}

#loginForm,
#forgotPasswordForm {
	width: 450px;
	margin-left: auto;
	margin-right: auto;
}

#forgotPasswordMessages span {
	color: red;
}

.gadget-ui-tabs-h {
	background-color: #ccf !important;
}

.gadget-ui-tabs-h div.gadget-ui-tab-h {
	background-color: #77f !important;
}

.gadget-ui-tabs-h div.gadget-ui-tab-h:hover {
	background-color: #99f !important;
}

.gadget-ui-tabs-h div.gadget-ui-tab-h-active {
	background-color: #99f !important;
}

#passwordValidator,
#newPasswordValidator {
	margin-top: .5em;
}

#passwordValidator span,
#newPasswordValidator span {
	/* border: 3px solid black; */
	border-radius: 5px;
	padding: .2em;
}

#passwordValidator span.Strong,
#newPasswordValidator span.Strong {
	border: 5px solid green;
	font-weight: bold;
}

#passwordValidator span.Medium,
#newPasswordValidator span.Medium {
	border: 5px solid yellow;
	font-weight: bold;
}

#passwordValidator span.Weak,
#newPasswordValidator span.Weak {
	border: 5px solid red;
	font-weight: bold;
}

#passwordMatched,
#emailValidator,
#newPasswordMatched,
#usernameValidator {
	margin-top: .5em;
	display: inline-flex;
}

#loginMessages span {
	color: red;
}

#sidebar>.gadget-ui-collapsiblePane {
	width: 100% !important;
}

.cm-wrap {
	height: 100%
}

.cm-scroller {
	overflow: auto
}

.gadgetui-sidebar-toggle {
	background-color: #99f !important;
}

.gadgetui-sidebar {
	position: absolute !important;
	z-index: 2;
	border: 0 !important;
	width: 30%;
}

#execButton {
	cursor: pointer;
}

img.screenshot_med {
	width: 500px;
	border-radius: .5em;

	border: 1px solid #ccf;
}

img.screenshot_lg {
	width: 800px;
	border-radius: .5em;

	border: 1px solid #ccf;
}


#signupMessages {
	color: #99f;
}

#userMenu {

}

#userMenu .gadget-ui-menu-icon {
	width: 5em !important;
}

div.gadget-ui-floatingPane{
	background-color: #fff;
}

#userHome input{
	margin-bottom: .5em;
}

#userApps div[name='appDetails']{
	border: 1px solid #ccf;
	margin-top: 1.5em;
	overflow: clip;
	min-height: 500px;
}

#userApps div[name='currentApp']{
	border-right: 0;
	padding-right: 0 !important;
	margin-right: 0;
	width: 520px;
	background-color: #ccf;
}

.scrollDiv{
	overflow-y: scroll;
	border: 1px solid #ccf;
}