style.css

:root {
	--background_1: #1a1a1a;
	--background_2: #202020;
	--background_3: #262626;
	
	 /* material colors are awesome: https://material-ui.com/customization/color */
	--main_color_1: #00695f; /* shade = 500 */
	--main_color_2: #009688;
	--main_color_3: #33ab9f;
	--main_color_A1: #14a37f;  /* shade = A400 */
	--main_color_A2: #1de9b6;
	--main_color_A3: #4aedc4;

	--red: #f44336;
	--yellow: #ffc107;
	--gray: #AAAAAA;
	--text_color: #EEEEEE;
	
	--input_bd: #000000;
	--input_bg: #111111;
	--input_hover_bg: #333333;
	
	--canvas_bg: #333333;
	
	--font_sans_serif: "Varela Round", sans-serif;
	--font_monospace: "Inconsolata", "Consolas", monospace;
}

@font-face {
    font-family: 'Varela Round';
    src: url('fonts/VarelaRound-Regular.woff2') format('woff2'),
         url('fonts/VarelaRound-Regular.woff') format('woff'),
         url('fonts/VarelaRound-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Inconsolata';
    src: url('fonts/Inconsolata-VariableFontwdthwght.woff2') format('woff2'),
         url('fonts/Inconsolata-VariableFontwdthwght.woff') format('woff'),
         url('fonts/Inconsolata-VariableFont_wdth\,wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

a {
	text-decoration: none;
	color: #2196f3;
}

body {
	color: var(--text_color);
	background-color: var(--background_1);
	font-family: var(--font_sans_serif);
	font-size: 15px;
}

canvas {
	background-color: var(--canvas_bg);
	border-radius: 3px;
}

code {
	background-color: var(--background_1);
	color: #CCC;
	font-family: var(--font_monospace);
	padding: 3px;
	border-radius: 3px;
}

details {
	border-radius: 4px;
	background-color: var(--background_2);
	margin: 8px;
}

h2 {
	font-size: 28px;
	text-decoration: underline;
}

h3 {
	color: var(--main_color_3);
	font-size: 20px;
	font-weight: normal;
}

input, select, option {
	font-family: var(--font_sans_serif);
	font-size: 15px;
	color: var(--text_color);
}

label {
	padding: 6px;
}

li {
	line-height: 1.6;
	padding: 4px;
}

ol, ul {
	padding-left: 24px;
}

p {
	line-height: 1.3;
}

summary {
	border: 8px solid #333;
	border-radius: 3px;
	background-color: #333;
	font-size: 24px;
	font-weight: bold;
}

/* --- CSS OF THE CONTAINER AT THE TOP OF THE PAGE --- */

.top_container { /* the box at the top of the page) */
	background-color: var(--main_color_2);
	display: flex;
	flex-direction: row;
	position: absolute;
	margin: 0px;
	top: 0px;
	left: 0px;
	right: 0px;
	box-shadow: 0px 3px 3px black;
	align-items: center;
}

.top_container_logo { /* the logo at the left in top_container */
	display: inline;
	text-align: left;
	padding-top: 6px;
	padding-left: 10px;
	padding-right: 6px;
	padding-bottom: 4px;
	vertical-align: middle;
}

.top_container_title { /* the title at the right of the logo */
	padding-left: 6px;
	padding-right: 36px;
	font-size: 18px;
}

.top_container_option { /* a option in the top_containder */
	text-align: left;
	margin-left: 16px;
	margin-right: 16px;
	padding: 8px;
	border-radius: 3px;
	color: var(--text_color);
}

.top_container_option:hover {
	background: var(--main_color_3);
}

.top_container_current_option { /* the current page */
	text-decoration: underline;
	text-decoration-style: dashed;
	text-decoration-color: var(--main_color_A3);
}

/* --- CSS OF THE EDITOR --- */


.editor_container_modes { /* the container with the button to change the mode */
	margin-left: 6px;
	margin-right: 6px;
}

.editor_mode_button { /* the buttons to change the mode */
	margin: 0px;
	padding: 4px;
	font-size: 18px;
	background-color: var(--background_2);
	border: 0px solid var(--background_2);
	width: 110px;
}

.editor_mode_button:hover {
	background-color: var(--background_3);
	border: 0px solid var(--background_3);
}

.editor_container_metadata { /* where there is the <div> editor_container_textbox */
	text-align: center;
	flex: 1;
	padding: 8px;
	margin-right: 8px;
}

.editor_container_3 { /* 3rd box of the editor_top, on the right with the reset button */
	text-align: right;
	align-items: right;
	padding: 8px;
}

.reset_button { /* the reset button from the editor_top */
	padding: 3px;
	color: #FFEEEE;
	background-color: #ff1744;
	border: 1px solid #ff1744;
	border-radius: 3px;
	font-weight: bold;
	padding: 3px;
	width: 100px;
	text-align: center;
	align-items: center;
	box-shadow: 0px 3px 3px black;
	font-size: 16px;
}

.reset_button:hover {
	border: 1px solid #ff4569;
	background-color: #ff4569;
}

#view_settings { /* the box where thre is ALL controls settings */
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	background-color: var(--background_3);
	border-radius: 3px;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 6px;
	padding-bottom: 6px;
	margin-top: 4px;
	align-items: left;
}

#view_settings_type_of_circle { /* the box with radiobuttons to select hitcircle or slider head (flexbox)*/
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	vertical-align: middle;
	text-align: center;
	line-height: 2.2;
	flex-grow: 1;
}

.view_settings_type_of_circle_item { /* 1 element from view_settings_type_of_circle */
	flex-grow: 1;
	text-align: left;
	padding-left: 24px;
}

#view_settings_color_number { /* the box with display color and combo number */
	vertical-align: middle;
	line-height: 2.2;
}

#view_settings_background { /* the box who can change the background to display */
	vertical-align: middle;
	line-height: 2.2;
}

.view_combo_number_input { /* the input of the display number */
	background-color: var(--input_bg);
	border: 1px solid var(--input_bd);
	border-radius: 3px;
	padding: 2px;
	vertical-align: middle;
	width: 60px;
	text-align: center;
}

.view_combo_color_input { /* for input in view settings type=color */
	background-color: var(--input_bg);
	border: 1px solid var(--input_bd);
	border-radius: 3px;
	padding-bottom: 0px;
	vertical-align: middle;
	width: 60px;
}

.view_combo_color { /* the box with ALL things about the custom combo colors */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	background-color: var(--background_3);
	border: 0px solid var(--background_3);
	border-radius: 3px;
	padding: 6px;
	align-items: center;
	margin-top: 8px;
}

.view_combo_all { /* the box with the 8 combo color */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

.view_combo_1 { /* the box with 1 color + his button */
	font-size: 18px;
	color: var(--text_color);
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-left: 6px;
	padding-right: 6px;
}

.view_custom_color_change { /* custom the color picker of the custom combo */
	background-color: var(--input_bg);
	border: 1px solid var(--input_bd);
	border-radius: 3px;
	padding-bottom: 0px;
	vertical-align: middle;
	align-items: center;
	width: 56px;
}

.view_custom_color_set { /* custom the button below the color picker to set the combo color */
	background-color: var(--background_1);
	border: 1px solid var(--input_bd);
	border-radius: 3px;
	padding-bottom: 0px;
	vertical-align: middle;
	width: 56px;
	text-align: left;
	text-align: center;
	font-size: 11px;
	line-height: 1.6;
	color: var(--text_color);
}

.view_number_combo_color { /* the box with the 2 buttons whp set the amount of combo colors */
	display: flex;
	flex-direction: row;
	padding: 6px;
	align-items: center;
}

.view_set_number_colors { /* the buttons who can change the amount of combo colors */
	background-color: var(--background_1);
	border: 1px solid var(--input_bd);
	border-radius: 3px;
	padding-bottom: 0px;
	vertical-align: middle;
	width: 120px;
	text-align: left;
	text-align: center;
	line-height: 1.6;
	margin: 6px;
}

.view_custom_color_set:hover, .view_set_number_colors:hover {
	background-color: var(--input_hover_bg);
}
.view_skin_ini { /* the box about the skin.ini */
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	background-color: var(--background_3);
	border-radius: 3px;
	padding: 6px;
}

.view_skin_ini_content { /* the text part of the skin.ini values */
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	background-color: var(--background_1);
	border: 1px solid var(--input_bd);
	border-radius: 3px;
	padding: 6px;
	/* set the font */
	font-family: var(--font_monospace);
	font-size: 13px;
	color: var(--gray);
}

.editor_mode { /* a <div> who contains the content of a mode */
	padding: 0px;
	margin: 0px;
}

.editor_untitled_part { /* a <div> with controls out of <summary> (it's a flexbox) */
	background-color: var(--background_3);
	border-radius: 3px;
	display: flex;
	flex-direction: column;
	padding: 6px;
	margin: 8px;
	font-size: 16px;
}
.editor_section { /* a <div> who contains all content of a spoiler (where there is the controls) */
	/* padding: 8px; */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding-bottom: 6px;
}

.editor_part { /* <div> with a title (set the title too) and controls (in <div class="editor_content">) */
	margin-left: 6px;
	margin-top: 6px;
	padding: 6px;
	background-color: var(--background_3);
	border-radius: 3px;
}

.editor_part_title { /* title of a part of the editor (<span>) */
	line-height: 1.3;
	font-size: 16px;
	color: #AAAAAA;
}
.editor_content { /* where you have all of the controls */
	padding: 0px;
	margin: 0px;
	line-height: 2.2;
	vertical-align: middle;
	color: var(--text_color);
}

.editor_input_color { /* for input in controls type=color */
	background-color: var(--input_bg);
	border: 1px solid var(--input_bd);
	border-radius: 3px;
	padding-bottom: 0px;
	vertical-align: middle;
	width: 60px;
}

.editor_input_number { /* for input in controls type=number */
	background-color: var(--input_bg);
	border: 1px solid var(--input_bd);
	border-radius: 3px;
	color: var(--text_color);
	padding: 2px;
	width: 50px;
}

.editor_input_select { /* for input in controls type=select */
	background-color: var(--input_bg);
	border: 1px solid var(--input_bd);
	border-radius: 3px;
	color: var(--text_color);
	padding: 2px;
	width: 150px;
}

.editor_input_text { /* for input in controls type=text */
	background-color: var(--input_bg);
	border: 1px solid var(--input_bd);
	border-radius: 3px;
	color: var(--text_color);
	font-family: var(--text_color);
	font-size: 15px;
	padding: 2px;
	width: 160px;
}

.editor_input_number:invalid, .editor_input_select:invalid, .view_combo_number_input:invalid { /* if invalid input */
	background-color: var(--red);
}

#export_settings { /* set the box with export settings and button (and the title) */
	display: flex;
	flex-direction: column;
	width: 320px;
	background: var(--background_2);
	border-radius: 3px;
	padding: 8px;
	/* set the title */
	line-height: 1.3;
	color: var(--text_color);
	font-size: 24px;
	font-weight: bold;
}

.export_option { /* a line of a option */
	font-size: 15px;
	font-weight: normal;
	color: var(--text_color);
	line-height: 2.0;
}

.export_button { /* the button to create the skin */
	padding: 3px;
	color: var(--text_color);
	background-color: var(--main_color_2);
	border: 1px solid var(--main_color_2);
	border-radius: 3px;
	font-family: var(--font_sans_serif);
	font-weight: bold;
	font-size: 16px;
	padding: 3px;
	width: 200px;
	text-align: center;
	align-items: center;
	box-shadow: 0px 3px 3px black;
	margin: 6px;
}

.export_button:hover {
	border: 1px solid var(--main_color_3);
	background-color: var(--main_color_3);
}

#hitcircle_preview { /* the canvas preview */
	text-align: center;
}

#all_canvas_files { /* the <div> with all canvas files */
	margin-top: 24px;
}

#editor { /* flexbox for all of the editor (editor_view + editor_controls) */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

#editor_top { /* the part of the editor at the top, with the skin name & author, and the reset button */
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: var(--background_2);
	border-radius: 3px;
}

#editor_view { /* part with the preview & display settings (on the left) */
	flex-basis: 256px;
	flex-grow: 0;
	margin-top: 8px;
	margin-bottom: 8px;
	text-align: left;
}

#editor_controls { /* part with all settings to create the circle */
	flex-grow: 1;
}

/* DOCUMENTATION STYLE */

#help_container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

#help_container_left {
	background-color: var(--background_3);
	text-align: left;
	margin-right: 8px;
	border-radius: 3px;
	padding: 8px;
	flex: 1;
	max-width: 300px;
}

#help_container_right {
	background-color: var(--background_2);
	border-radius: 3px;
	padding: 8px;
	flex: 4;
}

.images_and_text { /* <div> to put centered images and some text */
	text-align: center;
	font-size: 13px;
	font-style: italic;
	line-height: 1.3;
	color: var(--gray);
}

.title_li { /* used in a lot of lists */
	color: var(--main_color_A3);
}

.caution { /* <div> who contains important informations */
	color: var(--yellow);
}

.important { /* <div> who contains VERY important information */
	color: var(--red);
}

.information { /* <div> who contains some information */
	color: var(--main_color_A3);
}

#mult_color_demo {
	display: flex;
	background-color: var(--background_3);
	border-radius: 3px;
	align-items: center;
	text-align: center;
}

.mult_color_demo_element {
	margin-top: 6px;
	margin-bottom: 6px;
	margin-left: 12px;
	margin-right: 12px;
	align-items: center;
}

#demo_input_color, #demo_combo_color {
	background-color: var(--background_1);
	border: 0px solid var(--background_1);
	border-radius: 3px;
	width: 60px;
}

#demo_final_color {
	background-color: var(--background_3);
	border: 2px solid var(--text_color);
	border-radius: 3px;
	width: 60px;
	height: 25px;
}