graviton-plugin-sdk/Graviton-App/src/css/styles.css

Gravtion plugin Dev Kit

/*
########################################
              MIT License

Copyright (c) 2019 Marc Espin Sanz

License > https://github.com/Graviton-Code-Editor/Graviton-App/blob/master/LICENSE.md

#########################################
*/

:root {
	--primaryColor: #222222;
	--secondaryColor: #171717;
	--accentColor: #ff0048;
	--accentLightColor: #fe3d78;
	--accentDarkColor: #c8002f;
	--white-black: white;
	--black-white: white;
	--editor-background-color: #191919;
	--editor-font-size: 13px;
	--widget-color: #3b3b3b;
	--buttons-roundness: 5px;
	--dropmenu-background-color: #2e2e2e;
	--dropmenu-buttons-disabled-color: lightgray;
	--dropmenu-span-color: #818181;
	--titleBar-icons-color: white;
	--window-radius: 8px;
	--notifications-background-color: #252525;
	--notifications-window-radius: 5px;
	--shadows: rgba(0, 0, 0, 0.25);
	--scalation: 0.98;
	--scroll-color: rgba(255, 255, 255, 0.2);
	--scroll-color-hover: rgba(255, 255, 255, 0.5);
	--window-border-color: #2e2e2e;
	--blur: 0px;
}

@font-face {
	font-family: _main_font;
	src: url(../fonts/Inter-Regular.woff2) format("woff2"),
		url(../fonts/Inter-Bold.woff2) format("woff2");
}

@font-face {
	font-family: editor;
	src: url(../fonts/FiraCode-Regular.woff2);
}

@font-face {
	font-family: terminal;
	src: url(../fonts/Cascadia.ttf);
}

html,
body,
head {
	font-family: _main_font !important;
	font-weight: 400;
	font-style: normal;
	margin: 0;
	padding: 0;
	background: var(--primaryColor);
}

* {
	outline: 0;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: subpixel-antialiased !important;
}

.CodeMirror {
	z-index: 0;
	font-family: editor;
	font-size: var(--editor-font-size);
	box-shadow: 0px 3px 5px var(--shadows);
}

.CodeMirror-linenumber {
	background: var(--editor-background-color);
}

*::-webkit-scrollbar {
	transition: 0.1s;
	width: 12px;
	height: 12px;
	background: transparent;
}

*::-webkit-scrollbar-track {
	background: transparent;
}

*::-webkit-scrollbar-thumb {
	transition: 0.1s;
	width: 9px !important;
	height: 9px !important;
	background: var(--scroll-color);
}

*::-webkit-scrollbar-thumb:hover {
	transition: 0.1s;
	background: var(--scroll-color-hover);
}

*::-webkit-scrollbar-corner {
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	width: 0 !important;
	display: none !important;
}

*::-webkit-resizer {
	cursor: ew-resize;
}

.smallScrollBar::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	visibility: visible;
}

.hiddenScroll::-webkit-scrollbar {
	visibility: hidden;
	background: transparent;
	display: none;
}

body {
	display: flex;
	height: 100%;
}

#body {
	filter: blur(var(--blur));
	transition: 0.08s;
	overflow: hidden;
	position: relative;
	max-height: 100%;
	flex: 1;
}

#body[windows="0"] {
	filter: none !important;
	transition: 0.03s;
}

#content_app {
	display: flex;
	background: var(--primaryColor);
	height: calc(100% - 35px);
	margin: 0;
	padding: 0;
	position: relative;
	max-height: 100%;
}
#content_app > #editors {
	width: auto;
	min-width: auto;
	flex: 1;
	position: relative;
	overflow: auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	box-shadow: -2px 0px 7px var(--shadows);
	background: transparent;
	border-top-left-radius: 8px;
	margin-top: 2px;
	user-select: none;
	-webkit-app-region: no-drag;
}

#content_app[explorerPosition="right"] > #editors {
	box-shadow: 2px 0px 7px var(--shadows);
	border-top-left-radius: 0px;
	border-top-right-radius: 8px;
}

#screens {
	width: auto;
	min-width: auto;
	flex: 1;
	position: relative;
	overflow: auto;
	padding: 0;
	margin: 0;
	display: flex;
}

.explorer {
	min-width: 15%;
	width: 210px;
	max-width: 70%;
	left: 0;
	height: 100%;
	overflow: hidden;
	font-size: 12px;
	color: var(--white-black);
	background: var(--primaryColor);
	-webkit-user-select: none;
	float: left;
	display: flex;
	flex-direction: column;
}
.explorer_panel{
	overflow: auto;
	min-height: 45px !important;
	height:auto;
	max-height:100%;
}
.explorer_panel * {
	font-family:_main_font ;
}

#g_directory * {
	min-height: auto;
}
#g_directory > div:nth-child(1) {
	font-size: 16px;
	white-space: nowrap;
	display: flex;
}

#g_directory >  div > div > div:not(.directory){
	top:25px;
}

.terminal {
	margin: 0;
	padding: 0;
}

#editors .editor_screen > .g_tabs_bar {
	min-height: 37px;
	max-height: 37px;
	position: relative;
	float: left;
	flex: 37px;
	overflow: auto;
	overflow-y: hidden;
	-webkit-user-select: none;
	font-size: 15px;
	background: var(--primaryColor);
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	color: var(--white-black);
	border-top-left-radius: inherit;
}

#editors .editor_screen > .g_tabs_bar:empty {
	background: var(--editor-background-colors);
}

.temp_dir_message {
	font-size: 15px;
	user-select: none;
	pointer-events: none;
	-webkit-app-region: no-drag;
	position: relative;
	left: 50%;
	top: 50%;
	text-align: center;
	transform: translate(-50%, -50%);
	color: var(--white-black);
	width: auto;
}

#screens .editor_screen {
	font-size: var(--editor-font-size);
	background: var(--editor-background-color);
	float: left;
	display: flex;
	flex-direction: column;
	max-height: 100%;
	width: 100%;
	margin: 0;
	color: var(--white-black);
	overflow: hidden;
	box-shadow: -2px 0px 7px var(--shadows);
}

#editors .editor_screen ~ .editor_screen {
	border-top-left-radius: 0px;
}

.g_tabs_bar .tabs:first-child {
	border-top-left-radius: 5px;
}

.editor_screen ~ .editor_screen .g_tabs_bar .tabs {
	border-top-left-radius: 0px;
}

#content_app > #editor_resizer {
	flex: 0;
	min-width: 8px;
	background: var(--primaryColor);
	cursor: col-resize;
	margin: 0 0px;
	padding:0px 1px;
	user-select: none;
	-webkit-app-region: no-drag;
}

#editors .editor_screen > .g_editors_editors {
	flex: auto;
	overflow: auto;
	height: 90%;
}

#editors .editor_screen > .g_editors_editors > .code-space {
	position: relative;
	display: flex;
	min-height: 0px;
	max-height: 300px;
	overflow: visible;
}

#editors .editor_screen > .g_editors_editors > .code-space > div {
	min-width: 100%;
	margin: 0;
	max-width: 100%;
}

#editors .editor_screen > .g_editors_editors > .code-space .map > div {
	min-width: 100% !important;
}

#editors .editor_screen .g_editors_editors > .code-space img {
	user-select: none;
	pointer-events: none;
	position: relative;
	max-width: 90%;
	max-height: 90%;
	margin: 0 auto;
	border-style: none;
}

#editors .editor_screen > .g_status_bar {
	flex: 30px;
	min-height: 30px;
	max-height: 30px;
	background: var(--primaryColor);
	border: none;
	display: flex;
	justify-content: left;
	box-shadow: 0px 3px 5px var(--shadows);
	display: block;
	border: 0px !important;
}

#editors .editor_screen > .g_status_bar:empty {
	background: var(--editor-background-color);
}

#editors .editor_screen.dragging {
	transition: 0.1s;
	background: var(--primaryColor);
}

#editors .editor_screen.dragging > .g_status_bar {
	transition: 0.1s;
	background: var(--primaryColor);
}

#editors .editor_screen.dragging > .g_tabs_bar {
	transition: 0.1s;
	background: var(--primaryColor);
}

#editors .editor_screen > .g_status_bar span {
	top: 0;
	margin: 0;
	padding: 6px;
	text-align: left;
	flex: 1;
	color: var(--white-black);
	font-size: 13px;
	user-select: none;
	min-height: 100%;
	position: relative;
	width: auto;
	background: transparent;
	max-width: auto;
	white-space: pre-wrap;
	float: left;
	bottom: 0;
}

#editors .editor_screen > .g_status_bar span:hover {
	background: var(--widget-color);
}

.flex {
	padding: 0px 15px;
	margin: 0;
	display: flex;
	flex-direction: row;
}

.flex > div {
	flex: 1;
}

#plugins_list {
	overflow: auto;
	width: 100%;
	height: auto;
	overflow: auto;
	white-space: nowrap;
}

.spinner > div {
	border-radius: 50px;
	width: 40px;
	height: 40px;
	margin: 3px;
	background: var(--white-black);
	float: left;
	animation: up_down 0.6s linear infinite;
}

@keyframes up_down {
	from {
		transform: scale(0);
		opacity: 0.8;
	}
	to {
		transform: scale(1);
		opacity: 0;
	}
}

h4 {
	font-weight: normal;
	margin: 4px;
}

.bounce_top {
	animation: bounce_top 0.35s;
	position: relative;
	top: 0;
}

.bounce_bottom {
	position: relative;
	bottom: 0;
	animation: bounce_bottom 0.35s;
}

.bounce_left {
	position: relative;
	left: 0;
	animation: bounce_left 0.35s;
	display: inline-block;
	height: 0;
	top: 0;
}

.bounce_right {
	position: relative;
	right: 0;
	animation: bounce_right 0.35s;
	display: inline-block;
	height: 0;
	top: 0;
	border: 0;
}

@keyframes bounce_top {
	20% {
		height: 7px;
	}
	40% {
		height: 18px;
	}
	60% {
		height: 9px;
	}
	100% {
		height: 0px;
	}
}

@keyframes bounce_bottom {
	20% {
		height: 15px;
	}
	40% {
		height: 27px;
	}
	60% {
		height: 15px;
	}
	80% {
		height: 7px;
	}
	100% {
		height: 0px;
	}
}

@keyframes bounce_left {
	20% {
		width: 15px;
	}
	40% {
		width: 27px;
	}
	60% {
		width: 15px;
	}
	80% {
		width: 7px;
	}
	100% {
		width: 0px;
	}
}

@keyframes bounce_right {
	20% {
		width: 15px;
	}
	40% {
		width: 27px;
	}
	60% {
		width: 15px;
	}
	80% {
		width: 7px;
	}
	100% {
		width: 0px;
	}
}

.emoji-medium {
	height: 17px;
	top: 8px;
	position: relative;
	user-select: none;
	margin:0;
	padding:0px
}

.emoji-normal {
	height: 30px;
	top: 10px;
	position: relative;
	user-select: none;
	margin:0;
	padding:0;
}

.emoji-title {
	height: 50px;
	top: 10px;
	user-select: none;
}

.flex-2 {
	display: flex;
	justify-content: flex-start;
	padding: 0;
	margin: 0;
}

.editor_screen .CodeMirror-line > span > span {
	line-height: 1.4em;
}

navbar a {
	transition: 0.1s;
	font-style: normal !important;
	background: transparent;
	border-bottom: 3px solid transparent;
	padding: 8px;
	margin: 3px;
	cursor: pointer;
}

navbar a:hover {
	transition: 0.1s;
	color: var(--accentColor);
}

navbar a.active {
	transition: 0.1s;
	border-bottom: 3px solid var(--accentColor);
	color: var(--accentColor);
}

.image-container {
	position: relative;
	overflow: auto;
}

.image-container > * {
	position: relative;
	padding: 0px 20px;
}

.list li {
	padding: 5px;
}

.readme-container {
	overflow: auto;
}
.readme-container * {
	cursor: not-allowed;
	pointer-events: none;
}


gv-panel{
	padding:25px;
	display: block;
	min-height:100%;
}
gv-paneltitle{
	font-size: 14px;
	font-weight: normal;
	display: inline-block;
	margin-bottom: 5px;
	border-bottom: 1px solid var(--white-black);
	position: relative;
	max-width: auto;
}


.explorer_resizer {
	height: 3px;
	margin: 2px 15px;
	padding:4px;
	border-top:2px solid var(--widget-color);
	background:transparent;
	cursor: n-resize;
}


gv-process{
	background:transparent;
	padding:0px;
	display: block;
}

gv-process gv-process-bar{
	padding:0px;
	height:13px;
	background:var(--accentColor);
	margin: 10px 0px;
	border-radius: 5px;
	display: block;
}
gv-process gv-process-text{
	color:var(--white-black);
	display: block;
	font-size:14px;
	margin:15px 0px;
}