123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- * { box-sizing: border-box; }
- body {
- font-family: "Fira Sans";
- }
- .page {
- position: absolute;
- top: 0;
- left: 0;
- display: grid;
- grid-template-columns: 25% 25% 25% 25%;
- grid-template-rows: 50px auto 50px;
- width: 100%;
- height: 100%;
- }
- .header {
- border: 1px solid black;
- grid-column: 1 / 5;
- grid-row: 1;
- display: flex;
- flex-flow: row;
- align-items: center;
- justify-content: space-around;
- }
- .footer {
- border: 1px solid black;
- grid-column: 1 / 5;
- grid-row: 3;
- }
- .contents {
- border: 1px solid black;
- grid-column: 1 / 4;
- grid-row: 2;
- }
- .chat {
- border: 1px solid black;
- grid-column: 4 / 5;
- grid-row: 2;
- padding: 1em;
- display: flex;
- flex-flow: column;
- }
- .chatbox-container {
- width: 100%;
- align-self: flex-end;
- }
- #chatbox {
- width: 100%;
- }
- .messages {
- overflow: auto;
- margin-bottom: auto;
- }
- .author {
- font-weight: bold;
- color: #900;
- }
- .msg {
- padding: 0.2em;
- padding-left: 1.5em;
- text-indent:-1.5em;
- }
|