You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

226 lines
4.2 KiB

2 years ago
a:link, a:hover, a:active, a:visited{color: #000;}
html, body{margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;}
canvas{margin: 0; padding: 0; border: none; display: block;}
button:hover{cursor: pointer;}
@font-face{
font-family: "Rametto";
src: url("data/styles/font.ttf");
}
*{
font-family: "Rametto";
color: #000;
font-size: 17px;
}
:root{
--if-background-color: rgb(0, 100, 131);
--if-width: 300px;
--if-border-width: 5px;
--if-padding: 25px;
--if-content-width: calc(var(--if-width) - var(--if-padding) * 2);
}
/**
* Standard styles
*/
#content{
display: grid;
grid-template-columns: calc(var(--if-width) + var(--if-border-width)) calc(100% - var(--if-width));
grid-template-rows: 100%;
width: 100%;
height: 100%;
overflow: hidden;
}
button{
background-color: rgb(67, 202, 67);
margin: 5px;
border-radius: 5px;
}
button:hover:not(.used_color):not([disabled]){
background-color: rgb(49, 150, 49);
}
button:disabled{
background-color: rgb(121, 121, 121);
}
#loading_drawings{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(50, 182, 138, 0.699);
text-align: center;
}
#action{
font-size: 50px;
}
#loading_drawings > progress{
width: 700px;
height: 30px;
}
#warning{
font-size: 10px;
}
#p5_loading{
display: none;
}
#loading_maps{
width: 100%;
display: flex;
justify-content: center;
}
#pixels_map_holder, #lines_map_holder{
width: 500px;
height: 500px;
border-radius: 5px;
border: 3px solid #000;
background-color: #FFF;
margin: 50px;
}
#user_feedback{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(50, 182, 138, 0.699);
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#user_feedback > *{
width: 50%;
}
#interface{
background-color: var(--if-background-color);
border: var(--if-border-width) solid #000;
border-width: 0 5px 0 0;
}
#version{
position: absolute;
bottom: 55px;
}
#changelog{
position: absolute;
bottom: 30px;
}
#start_user_feedback{
position: absolute;
bottom: 0;
height: 25px;
font-size: 15px;
}
#color_picker{
width: var(--if-content-width);
height: var(--if-content-width);
}
#color_picker_numeric_holder{
margin: 10px var(--if-padding);
width: var(--if-content-width);
background-color: none;
}
#color_picker_numeric{
background-color: none;
}
#color_picker_rgb, #color_picker_hsv{
display: none;
}
#used_colors{
width: var(--if-content-width);
margin: 0 var(--if-padding);
display: flex;
justify-content: space-between;
}
.used_color{
width: 30px;
height: 30px;
margin: 0;
background-color: white;
}
#get_color{
width: calc(var(--if-content-width));
margin: 0 var(--if-padding) 15px;
font-size: 11px;
border-radius: 3px;
background-color: white;
}
#get_color:hover{
background-color: rgb(150, 150, 150);
}
#free_settings, #pixel_settings{
margin: 0px var(--if-padding);
width: var(--if-content-width);
height: 80px;
}
#thickness_holder{
display: flex;
align-items: center;
}
#thickness{
width: calc(var(--if-content-width) - 50px);
}
#thickness_preview_holder{
position: relative;
margin: 0 0 0 10px;
width: 40px;
height: 40px;
}
#thickness_preview{
border: 1px solid #000;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
#set_hotkey{
float: right;
margin: 0;
font-size: 12px;
height: 28px;
}
#minimap{
width: var(--if-content-width);
height: var(--if-content-width);
margin: 22px;
border-radius: 5px;
border: 3px solid #000;
}
#minimap > canvas{
border-radius: inherit;
}
#draw_type{
width: var(--if-content-width);
margin: 0 var(--if-padding);
text-align: center;
}
#server_save{
width: calc(var(--if-content-width) * 0.6);
margin: 10px calc(var(--if-padding) + var(--if-content-width) * 0.2)
}
#server_answer{
display: block;
width: var(--if-content-width);
font-size: 15px;
text-align: center;
margin: 0 var(--if-padding);
}