256 lines
3.2 KiB
CSS
256 lines
3.2 KiB
CSS
*
|
|
{
|
|
font-size: 2vh;
|
|
}
|
|
|
|
body
|
|
{
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
#main_panel
|
|
{
|
|
position: absolute;
|
|
width: 130vh;
|
|
height: 95vh;
|
|
|
|
background: #6F7270;
|
|
|
|
border: 1px solid #3E392F;
|
|
border-radius: 0.4vh 0.4vh;
|
|
|
|
margin-top: 1.5vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
::-webkit-scrollbar
|
|
{
|
|
width: 0.75vh;
|
|
}
|
|
|
|
::-webkit-scrollbar-track
|
|
{
|
|
background-color: #C1BFBE;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb
|
|
{
|
|
background-color: #888;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track
|
|
{
|
|
border-radius: 5vh 5vh;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover
|
|
{
|
|
background-color: #555;
|
|
}
|
|
|
|
#upper_panel
|
|
{
|
|
margin-left: auto;
|
|
|
|
border: 1px solid #3E392F;
|
|
border-right: none;
|
|
border-top: none;
|
|
border-bottom-left-radius: 0.4vh 0.4vh;
|
|
|
|
display: flex;
|
|
justify-content: end;
|
|
padding: 0.25vh;
|
|
|
|
width: fit-content;
|
|
height: 2vh;
|
|
}
|
|
|
|
#upper_panel *
|
|
{
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
#upper_panel img + img
|
|
{
|
|
margin-left: 0.25vh;
|
|
}
|
|
|
|
#upper_panel img:hover
|
|
{
|
|
filter: invert(25%);
|
|
}
|
|
|
|
#panels
|
|
{
|
|
display: flex;
|
|
height: 88.5vh;
|
|
}
|
|
|
|
#left_panel, #right_panel
|
|
{
|
|
width: 50%;
|
|
height: 100%;
|
|
|
|
padding: 2vh;
|
|
}
|
|
|
|
#left_panel
|
|
{
|
|
border-right: 1px solid #3E392F;
|
|
}
|
|
|
|
.output + .output
|
|
{
|
|
margin-top: 1.5vh;
|
|
}
|
|
|
|
.output:hover
|
|
{
|
|
filter: invert(10%);
|
|
}
|
|
|
|
#buttons
|
|
{
|
|
position: absolute;
|
|
bottom: 0.3vh;
|
|
right: 0.3vh;
|
|
display: none;
|
|
}
|
|
|
|
.btn
|
|
{
|
|
width: fit-content;
|
|
|
|
padding: 0.3vh;
|
|
padding-left: 0.9vh;
|
|
padding-right: 0.9vh;
|
|
|
|
background-color: #9E6812;
|
|
border: 1px solid #3E392F;
|
|
color: #C1BFBE;
|
|
border-radius: 0.3vh 0.3vh;
|
|
}
|
|
|
|
.editable
|
|
{
|
|
background-color: #9E6812;
|
|
border: 1px solid #3E392F;
|
|
color: #C1BFBE;
|
|
border-radius: 0.3vh 0.3vh;
|
|
}
|
|
|
|
#info_pane
|
|
{
|
|
position: relative;
|
|
|
|
width: fit-content;
|
|
height: auto;
|
|
margin: 0 auto;
|
|
padding: 5vh;
|
|
|
|
border: solid 1px #3E392F;
|
|
border-radius: 0.5vh 0.5vh;
|
|
background: #6F7270;
|
|
}
|
|
|
|
#save_btn
|
|
{
|
|
margin-top: 2vh;
|
|
}
|
|
|
|
#upload_btn
|
|
{
|
|
padding-top: 1vh;
|
|
padding-bottom: 1vh;
|
|
}
|
|
|
|
#upload_popup
|
|
{
|
|
position: absolute;
|
|
display: none;
|
|
|
|
flex-direction: column;
|
|
align-items: start;
|
|
|
|
width: fit-content;
|
|
height: fit-content;
|
|
padding: 2vh;
|
|
|
|
border: solid 1px #3E392F;
|
|
border-radius: 0.5vh 0.5vh;
|
|
background: #6F7270;
|
|
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
}
|
|
|
|
#upload_popup div + div
|
|
{
|
|
margin-top: 2vh;
|
|
}
|
|
|
|
#upload_popup input
|
|
{
|
|
margin-top: 1vh;
|
|
border: 1px solid #3E392F;
|
|
border-radius: 0.5vh 0.5vh;
|
|
|
|
background-color: #C1BFBE;
|
|
}
|
|
|
|
#file_upload_style
|
|
{
|
|
margin-top: 200vh;
|
|
}
|
|
|
|
#posts
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
align-self: center;
|
|
}
|
|
|
|
.post
|
|
{
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.post_info
|
|
{
|
|
margin-left: 2vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: start;
|
|
}
|
|
|
|
.post_info *
|
|
{
|
|
padding: 0.2vh;
|
|
}
|
|
|
|
.post_image
|
|
{
|
|
width: 20vh;
|
|
height: 20vh;
|
|
}
|
|
|
|
.post img
|
|
{
|
|
max-height: 20vh;
|
|
max-width: 20vh;
|
|
}
|
|
|
|
.post img:hover
|
|
{
|
|
filter: invert(10%);
|
|
} |