You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
299 lines
8.9 KiB
CSS
299 lines
8.9 KiB
CSS
body {
|
|
/* FIXME: Fonts */
|
|
font-family: "Noto Serif", serif;
|
|
background-color: #f1f0d8;
|
|
margin: 0;
|
|
padding: 0;
|
|
cursor: default;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none; }
|
|
|
|
.frame {
|
|
position: relative;
|
|
/* For ensuring that .frameShadow anchors against the correct element. */
|
|
padding: .7em;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
background-color: white; }
|
|
|
|
.frameShadow {
|
|
position: absolute;
|
|
z-index: 9999999;
|
|
left: 0px;
|
|
top: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
pointer-events: none;
|
|
border-radius: 8px;
|
|
box-shadow: inset 0px 1px 2px rgba(71, 71, 71, 0.384); }
|
|
|
|
.picker {
|
|
background: transparent;
|
|
border: 1px solid #d4d4d4;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
border-radius: 4px;
|
|
padding: .4em; }
|
|
.picker:hover {
|
|
background-color: transparent;
|
|
border: 1px solid #4d4d4d; }
|
|
.picker:active, .picker:focus {
|
|
background-color: #f8f8f6;
|
|
border: 1px solid black; }
|
|
.picker .pickerArrow {
|
|
margin: 0 .5em;
|
|
color: #636363; }
|
|
|
|
.statusBall, .statusBallPlaceholder {
|
|
display: inline-block;
|
|
width: .6em;
|
|
height: .6em;
|
|
border: .15em solid transparent;
|
|
margin: 0 .5em 0 .2em;
|
|
vertical-align: -.05em; }
|
|
|
|
.statusBall {
|
|
border-radius: 1em;
|
|
background-color: #292929; }
|
|
.statusBall.online {
|
|
background-color: #097a09; }
|
|
.statusBall.away {
|
|
background-color: #be571b; }
|
|
.statusBall.offline {
|
|
background-color: #bbbbbb; }
|
|
|
|
input, textarea {
|
|
font-family: serif;
|
|
font-size: 1em; }
|
|
|
|
form.horizontal input, form.horizontal textarea {
|
|
background: transparent;
|
|
border: 1px solid #d4d4d4;
|
|
padding: .4em .6em;
|
|
border-radius: 4px;
|
|
margin-right: .8em; }
|
|
form.horizontal input.invalid, form.horizontal textarea.invalid {
|
|
background-color: #ffebeb;
|
|
border-color: #8d0000; }
|
|
|
|
.error {
|
|
padding: .7em;
|
|
color: white;
|
|
background-color: #a00000;
|
|
border: 2px solid #f01d1d; }
|
|
.error.form {
|
|
display: inline-block;
|
|
font-size: .9em;
|
|
margin-top: -.5em;
|
|
margin-bottom: 1em;
|
|
padding: .4em .7em; }
|
|
|
|
/* The below spinner code is based from https://loading.io/css/ */
|
|
.spinner, .messageSpinner {
|
|
display: inline-block; }
|
|
.spinner:after, .messageSpinner:after {
|
|
content: " ";
|
|
display: block;
|
|
border-radius: 50%;
|
|
animation: spinner 1.2s linear infinite; }
|
|
|
|
.spinner {
|
|
width: 1em;
|
|
height: 1em; }
|
|
.spinner:after {
|
|
width: 1em;
|
|
height: 1em;
|
|
margin: 0 .8em;
|
|
border: 3px solid rgba(148, 0, 0, 0.7);
|
|
border-color: rgba(148, 0, 0, 0.7) transparent rgba(148, 0, 0, 0.7) transparent; }
|
|
|
|
.messageSpinner {
|
|
width: 0;
|
|
height: .8em; }
|
|
.messageSpinner:after {
|
|
width: 0.7em;
|
|
height: 0.7em;
|
|
margin: 0 -1.5em;
|
|
border: 2px solid silver;
|
|
border-color: silver transparent silver transparent;
|
|
animation-duration: 3s; }
|
|
|
|
@keyframes spinner {
|
|
0% {
|
|
transform: rotate(0deg); }
|
|
100% {
|
|
transform: rotate(360deg); } }
|
|
|
|
table {
|
|
width: 100%; }
|
|
table th, table td {
|
|
text-align: left;
|
|
padding: .2em .4em; }
|
|
table td {
|
|
border-top: 1px solid silver; }
|
|
table td.status button {
|
|
padding: .1em .5em;
|
|
border-width: 1px; }
|
|
table tr.consumed {
|
|
color: gray; }
|
|
table tr.consumed td.status {
|
|
font-style: italic;
|
|
font-size: .8em; }
|
|
|
|
.app {
|
|
display: grid;
|
|
grid-column-gap: .7em;
|
|
grid-row-gap: .7em;
|
|
grid-template-columns: 280px 1fr;
|
|
grid-template-rows: 100%;
|
|
box-sizing: border-box;
|
|
padding: .7em;
|
|
height: 100vh;
|
|
width: 100vw; }
|
|
.app .sidebar {
|
|
display: grid;
|
|
grid-column-gap: .7em;
|
|
grid-row-gap: .7em;
|
|
grid-template-rows: auto 1fr; }
|
|
.app .sidebar .profileCard {
|
|
display: grid;
|
|
grid-template-rows: auto auto; }
|
|
.app .sidebar .profileCard .profileInformation {
|
|
border-bottom: 1px solid silver;
|
|
padding-bottom: .5em;
|
|
margin-bottom: .5em; }
|
|
.app .sidebar .profileCard .profileInformation .displayName {
|
|
font-size: 2em;
|
|
margin-bottom: -.2em; }
|
|
.app .sidebar .profileCard .profileInformation .username {
|
|
color: #464646;
|
|
font-style: italic;
|
|
font-size: .8em; }
|
|
.app .sidebar .profileCard .statusMessage {
|
|
margin-top: .4em; }
|
|
.app .sidebar .profileCard .statusMessage input {
|
|
background: transparent;
|
|
border: 1px solid #d4d4d4;
|
|
width: 100%;
|
|
padding: .2em .5em;
|
|
border-radius: 4px; }
|
|
.app .sidebar .profileCard .statusMessage input:hover {
|
|
background-color: transparent;
|
|
border: 1px solid #4d4d4d; }
|
|
.app .sidebar .profileCard .statusMessage input:active, .app .sidebar .profileCard .statusMessage input:focus {
|
|
background-color: #f8f8f6;
|
|
border: 1px solid black; }
|
|
.app .sidebar .friendList {
|
|
padding: 0;
|
|
overflow-y: auto; }
|
|
.app .sidebar .friendList .friend {
|
|
padding: .8em .6em;
|
|
border-bottom: 1px solid #cfcfcf; }
|
|
.app .sidebar .friendList .friend:hover {
|
|
background: #f5f5ee; }
|
|
.app .sidebar .friendList .friend.selected {
|
|
color: white;
|
|
font-weight: bold;
|
|
background-color: #1492cc; }
|
|
.app .sidebar .friendList .friend.selected .statusBall {
|
|
border-color: #ccccac; }
|
|
.app .sidebar .friendList .friend.meta {
|
|
color: #757575;
|
|
font-style: italic; }
|
|
.app .sidebar .friendList .friend.meta.selected {
|
|
color: #ececec; }
|
|
.app .mainView {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr; }
|
|
.app .mainView .header {
|
|
border-bottom: 1px solid silver;
|
|
padding-bottom: 1em;
|
|
margin-bottom: 1em; }
|
|
.app .mainView .header .friendInformation .name {
|
|
cursor: auto;
|
|
user-select: text;
|
|
-webkit-user-select: text;
|
|
-moz-user-select: text;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
font-size: 2em; }
|
|
.app .mainView .header .friendInformation .name .username {
|
|
color: silver;
|
|
font-style: italic;
|
|
font-size: .8em; }
|
|
.app .mainView .header .friendInformation .statusDisplay {
|
|
display: flex; }
|
|
.app .mainView .header .friendInformation .statusDisplay .statusMessage {
|
|
cursor: auto;
|
|
user-select: text;
|
|
-webkit-user-select: text;
|
|
-moz-user-select: text;
|
|
margin-left: .3em;
|
|
color: #585858; }
|
|
.app .mainView .header .friendActions {
|
|
display: flex;
|
|
margin-top: 1em; }
|
|
.app .mainView .header .friendActions .action {
|
|
background: transparent;
|
|
border: 1px solid #d4d4d4;
|
|
margin: 0 .3em;
|
|
font-size: .9em;
|
|
padding: .2em .5em;
|
|
border-radius: 4px; }
|
|
.app .mainView .header .friendActions .action:hover {
|
|
background-color: transparent;
|
|
border: 1px solid #4d4d4d; }
|
|
.app .mainView .header .friendActions .action:active, .app .mainView .header .friendActions .action:focus {
|
|
background-color: #f8f8f6;
|
|
border: 1px solid black; }
|
|
.app .mainView .header .headerText {
|
|
font-size: 2em; }
|
|
.app .mainView .contents {
|
|
overflow-y: auto; }
|
|
.app .mainView .contents h2 {
|
|
font-weight: normal;
|
|
margin-top: 0; }
|
|
.app .mainView .contents p {
|
|
line-height: 1.5em;
|
|
margin: .7em 0; }
|
|
.app .mainView .contents.conversation {
|
|
cursor: auto;
|
|
user-select: text;
|
|
-webkit-user-select: text;
|
|
-moz-user-select: text;
|
|
padding: 0 1.5em; }
|
|
.app .mainView .contents.conversation .messageGroup {
|
|
margin-bottom: .8em; }
|
|
.app .mainView .contents.conversation .messageGroup .message {
|
|
margin-bottom: .4em; }
|
|
.app .mainView .contents.conversation .messageGroup .metadata {
|
|
display: flex;
|
|
border-bottom: 1px solid #cfcfcf; }
|
|
.app .mainView .contents.conversation .messageGroup .metadata .sender {
|
|
font-weight: bold;
|
|
flex-grow: 1; }
|
|
.app .mainView .contents.conversation .messageGroup .metadata .timestamp {
|
|
margin-right: .6em;
|
|
color: #757575; }
|
|
.app .mainView .contents.conversation .messageGroup.received .sender {
|
|
color: #414141; }
|
|
.app .conversationView {
|
|
display: grid;
|
|
grid-column-gap: .7em;
|
|
grid-row-gap: .7em;
|
|
grid-template-rows: 1fr 50px; }
|
|
.app .conversationView .inputBox {
|
|
/* FIXME: Why did 100% width/height on .form not work? */
|
|
display: grid; }
|
|
.app .conversationView .inputBox .form {
|
|
display: grid; }
|
|
.app .conversationView .inputBox .form form {
|
|
display: grid;
|
|
grid-column-gap: .5em;
|
|
margin: 0;
|
|
grid-template-columns: 1fr 80px; }
|
|
.app .conversationView .inputBox .form form input, .app .conversationView .inputBox .form form textarea {
|
|
border: none;
|
|
resize: none; }
|