poedit.css

/* font definitions */

@font-face {
	font-family: Fontin;
	src: url(fontin-smallcaps-webfont.woff);
}

/* positioning */

#main {
	position: absolute;
	margin: 10px;

	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
}

#code-area {
	position: absolute;
	margin: 2px;

	left: 0px;
	right: 50%;
	top: 0px;
	bottom: 0px;
}

#code-window-container {
	position: absolute;

	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-bottom: 90px;
}

#code-window {
	position: relative;
	width: 100%;
	height: 100%;
}

#log-window {
	position: absolute;
	height: 60px;

	left: 0px;
	right: 0px;
	bottom: 0px;
}

#items-area {
	position: absolute;
	margin: 2px;

	left: 50%;
	right: 0px;
	top: 0px;
	bottom: 0px;
}

#items-editor {
	position: absolute;
	margin: 2px;

	left: 50%;
	right: 0px;
	top: 0px;
	bottom: 0px;

	display: none; /* initially hidden */
}

#items-editor > p {
	margin: 1px 5px;
}

#help-window {
	position: absolute;
	margin: 2px;
	z-index: 0;
	overflow-y: scroll;

	left: 50%;
	right: 0px;
	top: 0px;
	bottom: 0px;

	display: none; /* initially hidden */
}

#buttons {
	position: absolute;
	margin: 2px;
	bottom: 0px;
	right: 0px;
	z-index: 100;
}

#buttons > button {
	display: inline-block;
	margin: 0px;
}

#colorpicker {
	position: absolute;
	height: 30px;

	left: 0px;
	right: 0px;
	bottom: 60px;
}

#RGB-color {
	height: 22px;
	margin: 2px 0px 1px 0px;
}
/* code editor style */

#code-window {
	padding: 3px;
	background-color: #252525;
	color: #ddddaa;
	font-weight: bold;
	font-family: monospace;
	overflow-y: scroll;
}

#log-window {
	background-color: white;
	border: 1px solid black;
	overflow-y: scroll;

	font-family: sans-serif;
	color: red;
}

#code-window > .code-error {
	color: red;
}

#code-window > .code-comment {
	color: rgb(0, 200, 0);
	font-style: italic;
}

#code-window > .highlighted {
	color: black;
	background-color: rgba(220, 180, 80, 0.75);
}

#colorpicker {
	padding: 2px 0px 0px 2px;
	background-color: white;
	border: 1px solid black;
	border-bottom: none;
}

#RGB-picker > input {
	width: 49%;
}

#RGB-color {
	display: inline-block;
	width: 49%;
	border: 1px solid black;
	font-family: sans-serif;
}

/* intellisense */

#intellisense {
	position: absolute;
	display: none;

	border: 1px solid grey;
	background-color: rgba(0, 0, 0, 0.75);
}

#intellisense > p {
	font-family: monospace;
	font-weight: bold;
	color: white;
	margin: 0px;
	padding: 0px 5px;
}

#intellisense > p.selected {
	background-color: rgba(220, 180, 80, 0.75);
}

/* items area style */

#items-area {
	background-image: url("background.jpg");
	background-size: cover;
	background-position: center;
}

.item-container {
	display: inline-block;
	margin: 2px;
}

.hidden-item-container {
	display: inline-block;
	margin: 2px;
}

.hidden-item-container:hover {
	border: 1px dashed grey;
}

.item {
	margin: 0px;
	padding: 1px 6px;
	background-color: rgba(0, 0, 0, 0.75);
}

.item > span {
	display: inline-block;
	margin: 0px;
	margin-top: -2px;
	padding: 0px;

	color: white;
	font-family: Fontin;
	font-size: 17.5px;

	cursor: default;
}

.item > .sockets {
	position: relative;
	display: inline-block;
	width: 10px;
	height: 16px;
	margin-left: 2px;
}

.item > .sockets > .socket {
	position: absolute;
	z-index: 5;
	width: 4px;
	height: 4px;
	/* position and color is set by script */
}

.item > .sockets > .link-vertical {
	position: absolute;
	z-index: 10;
	width: 2px;
	height: 4px;
	background-color: white;
	/* position is set by script */
}

.item > .sockets > .link-horizontal {
	position: absolute;
	z-index: 10;
	width: 4px;
	height: 2px;
	background-color: white;
	/* position is set by script */
}

/* item details */

#item-details {
	display: none; /* this is set to block by script */
	position: absolute;
	margin: 0px;
	z-index: 20;
	/* position is also set by script */

	border: 1px solid white;
	background-color: rgba(0, 0, 0, 0.75);

	font-family: Fontin;
	font-size: 15px;
}

#item-details > p {
	margin: 0px 5px;
}

#item-details > p > .label {
	color: #aaaaaa;
}

#item-details > p > .value {
	color: white;
}

/* items editor */

#items-editor {
	padding: 3px;
	background-color: white;
	color: black;
	font-family: monospace;
	overflow-y: scroll;
}

/* help window */

#help-window {
	padding: 3px 10px;
	background-color: #252525;
	color: #ddddaa;
	font-family: sans-serif;
	font-size: 16px;
}

#help-window > h1 {
	font-family: Fontin;
}

#help-window > p {
	padding: 2px 10px;
}

#help-window li {
	padding: 5px;
}

#help-window a:link { color: rgb(250, 150, 50); }
#help-window a:visited { color: rgb(250, 150, 50); }

#help-window .url { font-style: italic; }
#help-window .url .highlight { font-weight: bold; color: red; }
#help-window .url .highlight2 { font-weight: bold; color: green; }

/* debug button */

#manual-update-button {
	position: absolute;
	left: 50%;
	margin-left: -40px;
	z-index: 100;
	display: none;
}

/* generic stuff */

* { box-sizing: border-box; }