Colubrina/frontend/src/assets/styles.css

.colubrina-alert {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  padding: 4px;
}

.dev-overlay {
  position: absolute;
  z-index: 2000;
  background-color: rgba(0, 0, 0, 0.37);
  text-align: center;
  width: 300px;
}

.dev-header {
  padding: 10px;
  cursor: move;
  z-index: 2001;
  background-color: #2196f3;
}

.chat-col {
  display: flex;
  flex-direction: column-reverse;
  overflow: auto;
  height: 100%;
}

>>> .max-v-list-height {
  max-height: 10px;
  overflow-y: auto;
}

.mentioned-message {
  box-shadow: -2px 0 0 0 var(--v-primary-base);
}
.offset-message {
  margin-left: 53px;
}
.message-action-card {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: -15px;
  margin-right: 5px;
  visibility: hidden;
}
/* large codeblock */
code {
  background-color: var(--v-bg-base) !important;
  border: 2px solid var(--v-bg-lighten1);
  display: block;
  padding: 20px;
}
.message:hover {
  background-color: var(--v-bg-lighten1);
  border-radius: 5px;
}
.message-toast {
  background-color: rgba(47, 47, 47, 0.9) !important;
}
.message-date {
  visibility: hidden;
}
.message:hover .message-date {
  visibility: visible;
}
.message:hover .message-action-card {
  visibility: visible;
}
.message:hover .hide-on-hover {
  visibility: hidden;
}
img.emoji {
  /* Since we are using SVGs, you have to change the width using CSS */
  height: 1.4em;
  width: 1.4em;
  vertical-align: middle;
  padding-left: 0.2px;
  padding-right: 0.2px;
  /*
  This is to make the emojis feel like actual emojis to
  the user and they won't act like images. This makes the emojis
  non-reactive to any mouse events such as dragging,
  hovering, clicking etc. Makes it feel like its actual text.
  */
  pointer-events: none;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.smalldesc {
  font-size: 0.8em;
}
.rubricGranted {
  color: #66bb6a;
}

.search-button {
  width: 400px;
}
.search-button:focus {
  outline: none;
}
.v-btn {
  text-transform: capitalize;
}

.troplo-nav {
  font-family: "Inter", sans-serif;
}

.troplo-header {
  -webkit-font-smoothing: antialiased !important;
  background: -webkit-radial-gradient(#0179f3, #0190ea) !important;
}
.troplo-header-title {
  -webkit-font-smoothing: antialiased !important;
  font-family: "JetBrains Mono", sans-serif !important;
  font-weight: 450;
  elevation: 0 !important;
  font-size: 15rem;
  font-style: italic;
  text-shadow: none !important;
  color: -webkit-radial-gradient(#0179f3, #0190ea) !important;
  -webkit-background-clip: text;
}
.troplo-title {
  font-weight: 500;
  background: -webkit-radial-gradient(#0179f3, #0190ea);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.theme--dark.v-sheet {
  overflow: auto !important;
  color: #ffffff;
}
.card {
  overflow: hidden;
}

.v-calendar-daily_head-day {
  border-right: 1px transparent !important;
}

.day .v-calendar-daily_head-weekday {
  visibility: hidden !important;
}

.day .v-calendar-daily_head-day-label {
  display: none !important;
}

div .theme--dark.v-calendar-events .v-event-timed {
  border: 1px solid #181818 !important;
  border-radius: 5px !important;
  margin: 2px;
}

.day .v-event {
  width: 98.8% !important;
}

.vuecal__cell {
  height: 50px !important;
}

div .theme--dark.v-calendar-daily {
  border: 1px transparent !important;
}

div .theme--dark.v-calendar-daily .v-calendar-daily__day {
  border: 1px transparent !important;
}

::-webkit-scrollbar {
  width: 10px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: var(--v-text-base) !important;
  border: solid 3px var(--v-bg-base) !important;
  border-radius: 7px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--v-text-lighten4) !important;
}

::-webkit-scrollbar-corner {
  background-color: var(--v-bg-base);
}

:root {
  overflow-y: auto !important;
}