236 lines
5.0 KiB
CSS
236 lines
5.0 KiB
CSS
|
|
html {
|
|
overflow: -moz-scrollbars-vertical;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* below this line is CSS for the layout */
|
|
|
|
/* this is a CSS comment
|
|
to uncomment a line of CSS, remove the * and the /
|
|
before and after the text */
|
|
|
|
|
|
/* the "container" is what wraps your entire website */
|
|
/* if you want something (like the header) to be Wider than
|
|
the other elements, you will need to move that div outside
|
|
of the container */
|
|
.credits{
|
|
margin-top: 10px;
|
|
font-size: 12px;
|
|
color: rgb(162, 162, 162);
|
|
}
|
|
.loungeText ul{
|
|
font-size: 15px;
|
|
padding-left: 15px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.loungeText li{
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
#input {
|
|
border:2px solid grey;
|
|
border-right: none;
|
|
/* box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; */
|
|
margin: 0px;
|
|
width: 93%;
|
|
/* width: 530px; */
|
|
margin-right:0px;
|
|
font-size: 18px;
|
|
height: 34px;
|
|
/* margin-top: 10px; */
|
|
padding: 5px 5px;
|
|
/* margin-bottom: 10px; */
|
|
/* vertical-align: middle; */
|
|
vertical-align: middle;
|
|
|
|
}
|
|
#textInput > button{
|
|
font-size: 18px;
|
|
width: 15%;
|
|
padding: 5px 5px;
|
|
/* display: inline; */
|
|
/* margin-top: 10px; */
|
|
vertical-align: middle;
|
|
/* margin-right: 5px; */
|
|
height: 34px;
|
|
/* float: right; */
|
|
/* padding: 1px 2px; */
|
|
/* all:initial; */
|
|
}
|
|
|
|
#textInput{
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
display: flex;
|
|
/* vertical-align: middle; */
|
|
}
|
|
|
|
.tooltip:not(.shown) {
|
|
display: none;
|
|
}
|
|
|
|
.inputWrapper{
|
|
width: 85%;
|
|
height: 100%;
|
|
padding-right: 5px;
|
|
/* white-space-collapse: discard; */
|
|
/* padding: 2px; */
|
|
|
|
/* display: inline; */
|
|
/* box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; */
|
|
}
|
|
#emojiButton{
|
|
border:2px solid grey;
|
|
/* border-left: none; */
|
|
vertical-align: middle;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 1.5em !important;
|
|
background-color: white;
|
|
/* border: none; */
|
|
/* margin-right: 5px; */
|
|
min-width: 20px !important;
|
|
width: 7% !important;
|
|
height: 34px !important;
|
|
box-shadow: none;
|
|
color: black !important;
|
|
padding:0px !important;
|
|
border-width: 2px;
|
|
/* border-style: inset;
|
|
border-top: solid black 2px;
|
|
border-bottom: solid grey 2px;
|
|
border-right: solid grey 2px; */
|
|
|
|
/* padding: 0px !important; */
|
|
}
|
|
|
|
.tooltip{
|
|
z-index:999;
|
|
position: absolute;
|
|
data-popper-placement:top;
|
|
}
|
|
/* the area below is for all links on your page
|
|
EXCEPT for the navigation */
|
|
|
|
.icon{
|
|
width: 25px;
|
|
}
|
|
|
|
.loungeContainer{
|
|
width: auto;
|
|
}
|
|
.loungeText{
|
|
margin-left: 20px;
|
|
|
|
}
|
|
|
|
.loungeText p{
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* .right-box{
|
|
width: 250px;
|
|
margin-left: 10px;
|
|
} */
|
|
/* .left-box{
|
|
width: 740px;
|
|
} */
|
|
|
|
canvas {
|
|
/* image-rendering: optimizeSpeed; */
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: block;
|
|
border: 8px solid;
|
|
border-image-source: url(./boder.png);
|
|
border-image-slice: 8;
|
|
|
|
|
|
}
|
|
|
|
|
|
/* navigation links*/
|
|
|
|
|
|
/* navigation link when a link is hovered over */
|
|
|
|
|
|
|
|
.window{
|
|
margin-bottom: 10px;
|
|
background: transparent;
|
|
}
|
|
.window-body{
|
|
/* font-family: 'win98'; */
|
|
font-family: sans-serif;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
|
|
/* background-color: #000055a6; */
|
|
}
|
|
/* this colors BOTH sidebars
|
|
if you want to style them separately,
|
|
create styles for #leftSidebar and #rightSidebar */
|
|
aside {
|
|
|
|
padding: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
/* this is the color of the main content area,
|
|
between the sidebars! */
|
|
main {
|
|
/* background-color: #2a2a2a; */
|
|
/* background-color: #00003e; */
|
|
|
|
flex: 1;
|
|
/* padding: 0px 20px; */
|
|
padding: 0px 2px;
|
|
order: 2;
|
|
/* border: #383838 3px solid; */
|
|
/* border-radius: 4px; */
|
|
|
|
/* width: 600px; */
|
|
}
|
|
.main-right{
|
|
background-color: #1522387b;
|
|
backdrop-filter: blur(16px);
|
|
|
|
}
|
|
.main-left{
|
|
background-color: rgba(0, 0, 0, 0.45);
|
|
backdrop-filter: blur(32px);
|
|
}
|
|
|
|
|
|
|
|
|
|
/* @media only screen and (max-width: 800px) {
|
|
|
|
canvas {
|
|
min-width: 700px;
|
|
}
|
|
} */
|
|
|
|
|
|
/* BELOW THIS POINT IS MEDIA QUERY */
|
|
|
|
/* so you wanna change the width of your page?
|
|
by default, the container width is 900px.
|
|
in order to keep things responsive, take your new height,
|
|
and then subtrack it by 100. use this new number as the
|
|
"max-width" value below
|
|
*/
|
|
|