alps/themes/alps/assets/style.css

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/** { box-sizing: content-box; }*/
body { font-family: arial,sans-serif; font-size: 13px; padding: 0; margin: 0;
  min-width: 1024px; min-height: 100vh; display: flex; flex-direction: column;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea {
  margin: 0;
  border: none;
  border: 1px solid #e0e0e0;
  box-shadow: inset 1px 1px 0 #f8f8f8;
  border-radius: 2px;
  font-size: 13px;
  padding: 0.3rem 0.5rem 0.3rem 0.5rem;
  background-color: white;
}

.page-wrap {
  display: flex;
  flex: 1 100%;
  flex-direction: row;
}

a { color: #15c; }
button { font-size: 1rem; }
header { border-bottom: 1px solid #e0e0e0;}
header nav,
footer { padding: 0.5rem 1rem 0.5rem 0.5rem; }
header nav { min-height: 1rem; }
/*header nav strong { color: #555; }*/
header nav > a { margin-right: 1rem; }
header nav span { color: #757373; }
header nav div { float: right; }
header nav div > a{  margin-left: 1rem; }
header a.active { font-weight: bold; color: black; text-decoration: none; }


footer { text-align: right; }

.actions { padding: 0.5rem; }

.container { flex: 1 auto; display: flex; flex-direction: column; flex-wrap: nowrap; min-width: 0; }


aside { flex: 0 0 180px; }
aside a { width: 100%; display: block; padding: 0.4rem 0 0.4rem 0.5rem; }
aside a.active { font-weight: bold; color: black; text-decoration: none; }
aside img { display: block; }
main {
  flex: 1 100%;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  min-width: 0;
  background-color: #f6f6f6;
}

main.login {
  justify-content: center;
}

main.login > section {
  align-self: center;
  background: white;
  min-width: 20rem;
  padding: 1rem;
}

aside a.active,
aside a.new.active {
  background-color: #f6f6f6;
}

aside a.new.active {
  color: #008d47;
}

aside a.new.active,
main.create-update {
  background-color: #f6fff6;
}

main.create-update { flex: 1 auto; padding: 1rem; }
main.create-update form { flex: 1 auto; display: flex; flex-direction: column; }
main.create-update form label { margin-top: 5px; }

/* TODO: CSS grid this */
main.create-update form label span {
  display: inline-block;
  font-weight: bold;
  min-width: 150px;
}

main.create-update form input { width: 80%; }
main.create-update form textarea { flex: 1 auto; resize: none; margin-top: 1rem; }
main.create-update h1 { margin: 0; }

main table { border-collapse: collapse; width: 100%; border: 1px solid #eee; }
main table td { white-space: nowrap; padding: 0.3rem; color: #757373;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
main table tbody tr { border-bottom: 1px solid #eee; }
main table td a { text-decoration: none; }


main table td a:hover { text-decoration: underline; }

main.message table,
main.event table { background-color: white; }
main.message th,
main.event th { width: 5%;}
main.message h1,
main.event h1 { font-size: 1.2rem; padding: 0.5rem;}
main.message .remote-content {
  background: #eeffee;
}

main.message .remote-content td {
  color: black;
}

main.message pre,
main.message iframe,
main.contact .details,
main.event pre {
  flex: 1 auto;
  padding: 1rem;
  margin: 0.3rem 0 0 0;
  background-color: white;
  border: 1px solid #eee;
  max-width: 100%;
}

main.message pre,
main.event pre {
  white-space: pre-wrap;
  word-break: break-all;
}

main.message .message-header {
  display: flex;
  flex-direction: row;
}

main.message .message-header .parts {
  margin-left: 0.3rem;
  padding: 0.3rem 1rem;
  background: white;
  border-top: 1px solid #f2f2f2;
}

main.message .message-header .parts ul {
  margin-left: 1rem;
}

main.contact dl {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr;
  grid-gap: 1rem;
}

main.create-update .actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: transparent;
  padding-left: 0;
  margin-top: 0.3rem;
}

main.create-update .actions button,
main.create-update .actions .button-link {
  padding: 0.4rem 1rem 0.35rem;
  font-weight: bold;
}

main.create-update .actions > *:not(:last-child) {
  margin-right: 1rem;
}

main.create-update .event-date {
  display: flex;
  flex-direction: row;
  align-items: center;
}

main.create-update .event-date input {
  width: inherit;
  flex-grow: 1;
  margin-left: 0.3rem;
}

.actions h3 {
  align-self: center;
  margin: 0 1.3rem 0 1rem;
}

.message-list-subject a { color: #77c; }

.message-list-unread.message-list-sender,
.message-list-unread.message-list-subject,
.message-list-unread.message-list-date { font-weight: bold; }

.message-list-unread.message-list-sender,
.message-list-unread.message-list-date { color: black;}

.message-list-unread.message-list-subject {
  font-weight: normal;
  color: #555;
}

.message-list-date {
  text-align: right;
}

.message-list-unread.message-list-subject a { color: #00c; }

.message-list-unread {
  background-color: white;
  opacity: 1;
}

.message-list-unread:nth-child(4n+1) {
  border-left: 1px solid #f2f2f2;
}

.message-list-unread:nth-child(4n+4) {
  border-right: 1px solid #f2f2f2;
}

aside .new {
  color: #008d47;
  font-weight: bold;
  /*background-color: #f5fcf2;*/
  text-decoration: none;
}

main table th {
  text-align: left;
  padding: 0.3rem; font-weight: normal;
}

main table thead {
  border-bottom: 1px solid #e0e0e0;
  background-color: white;
}
main table tfoot {
  border-top: 1px solid #e0e0e0;
  background-color: white;
}

.message-list,
.contact-list {
  display: flex;
}

.message-list section {
  width: 100%;
}

.actions {
  display: flex;
  flex-direction: row;
  background-color: white;
  padding: 0.3rem;
}

.message-list .actions:first-child,
.contact-list .actions:first-child {
  border-bottom: 1px solid #e0e0e0;
}

.message-list .actions:last-child,
.contact-list .actions:last-child {
  border-top: 1px solid #e0e0e0;
}

.actions input[type="text"] {
  flex: 1;
  margin: 0;
}

.actions input[type="text"] + button {
  margin-left: -4rem;
  width: 4rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.actions-wrap {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
}

.actions-search {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

.actions-pagination {
  margin-left: 1rem;
  display: flex;
  flex-direction: row;
}

.actions-pagination .button-link {
  padding: 0.3rem 0.5rem;
}

.actions-pagination .button-link:not(:last-child) {
  margin-right: 0.3rem;
}

.action-group:not(:last-child) {
  margin-bottom: 1rem;
}

.actions-wrap .action-group {
  margin-left: 0.3rem;
  margin-bottom: 0;
}

.action-group.grow {
  flex-grow: 1;
}

.action-group label,
.action-group input {
  display: block;
  width: 100%;
}

.action-group .checkbox input {
  display: inline;
  width: 1rem;
  float: left;
}

.actions-message,
.actions-contacts {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  align-items: center;
}

.message-list-checkbox,
.contact-list-checkbox {
  align-self: center;
}

.message-list .messages,
.contact-list .contacts {
  flex-grow: 1;
}

.message-grid {
  display: grid;
  grid-template-columns: auto 1fr 10fr auto;
  grid-template-rows: auto;
}

.contact-grid {
  display: grid;
  grid-template-columns: auto 1fr 3fr;
  grid-template-rows: auto;
}

.message-list .messages .message-grid > *,
.contact-list .contacts .contact-grid > * {
  white-space: nowrap;
  padding: 0.3rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.followups a:not(:first-child) {
  margin-left: 0.3rem;
}

.empty-list {
  text-align: center;
  grid-column-start: 1;
  grid-column-end: 10;
  font-size: 1.1rem;
  color: #333;
  margin-top: 1rem;
}

main.calendar .dates {
  flex-grow: 1;
  padding: 0.3rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr 1fr auto;
  grid-template-areas:
    "sunday-top monday-top wednesday-top tuesday-top thursday-top friday-top saturday-top"
    "dates dates dates dates dates dates dates"
    "dates dates dates dates dates dates dates"
    "dates dates dates dates dates dates dates"
    "dates dates dates dates dates dates dates"
    "dates dates dates dates dates dates dates"
    "dates dates dates dates dates dates dates"
    "sunday-bottom monday-bottom wednesday-bottom tuesday-bottom thursday-bottom friday-bottom saturday-bottom";
  grid-gap: 0.3rem;
}

main.calendar .dates .weekday {
  text-align: center;
  font-size: 1.1rem;
  font-weight: normal;
}

main.calendar .dates .sunday-top { grid-area: sunday-top; }
main.calendar .dates .monday-top { grid-area: monday-top; }
main.calendar .dates .tuesday-top { grid-area: tuesday-top; }
main.calendar .dates .wednesday-top { grid-area: wednesday-top; }
main.calendar .dates .thursday-top { grid-area: thursday-top; }
main.calendar .dates .friday-top { grid-area: friday-top; }
main.calendar .dates .saturday-top { grid-area: saturday-top; }
main.calendar .dates .sunday-bottom { grid-area: sunday-bottom; }
main.calendar .dates .monday-bottom { grid-area: monday-bottom; }
main.calendar .dates .tuesday-bottom { grid-area: tuesday-bottom; }
main.calendar .dates .wednesday-bottom { grid-area: wednesday-bottom; }
main.calendar .dates .thursday-bottom { grid-area: thursday-bottom; }
main.calendar .dates .friday-bottom { grid-area: friday-bottom; }
main.calendar .dates .saturday-bottom { grid-area: saturday-bottom; }

main.calendar .date {
  border: 1px solid #eee;
  padding: 0.3rem;
  background: white;
  display: flex;
  flex-direction: column;
  position: relative;
}

main.calendar .date.active {
  background-color: #f6fff6;
  border: 1px solid #afa;
}

main.calendar .date .date-link {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

main.calendar .date.extra {
  background: transparent;
  border: none;
}

main.calendar .date ul {
  list-style: none;
  margin: 0;
  padding-left: 0.3rem;
}

main.calendar .date .events {
  flex-grow: 1;
}

main.calendar .date.extra .events {
  visibility: hidden;
}

main.calendar .events .start-time {
  color: #444;
}

main.calendar .events .overflow {
  color: #444;
  text-align: right;
}

main.calendar .date h4 {
  font-weight: normal;
  text-align: right;
  color: #666;
}

main.calendar .date h4 .da { font-size: 1.2rem; }

main.settings form {
  max-width: 600px;
}

main.settings button {
  background-color: white;
}

main.settings button:hover {
  background-color: #f8f8f8;
}

input[type="submit"],
.button,
button,
.button-link {
  margin: 0;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  /*padding: 0.4rem 0.4rem 0.35rem;*/
  padding: 0.3rem 0.3rem 0.25rem;
  min-width: 1rem;
  font-size: 12px;
  border: 1px solid #ddd;
  border-radius: 3px;
  vertical-align: middle;
  color: #000;
}
.button-link {
  border: 1px solid transparent;
  text-decoration: none;
}
.button-link:hover {
  text-decoration: underline;
}

input[type="submit"],
.button,
button,
.button-link {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  color: black;
}

.button:hover,
button:hover,
.button-link:hover {
  background-color: white;
  text-decoration: none;
}

.button:active,
button:active,
.button-link:active {
  color: #ccc;
  background-color: #f8f8f8;
}