webapp/src/css/style.css

#vmview {
  display: none;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
/*.vmtile {
  text-decoration: none;
  color: #FFFFFF;
  font-size: 16pt;
  border: 2px solid #575757;
  border-radius: 15px;
  height: fit-content;
  width: fit-content;
  display: block;
  padding: 4px;
}*/
#vmDisplay, #btns {
  text-align: center;
  display: block;
  margin-bottom: 10px;
}

#vmlist > div.row > div {
  padding-bottom: 10px;
}
#vmlist div.col-md-3 > div.card:hover {
  cursor: pointer;
  border-color: rgb(8, 121, 250);
}

.vmtile > img {
  margin-bottom: 2px;
}

.chat-table, .username-table {
  overflow-y: auto;
  border: 1px solid #575757;
}
.chat-table {
  height: 30vh;
}

.username-table {
  max-height: 30vh;
}
.username-table > table > thead {
  position: sticky;
  top: 0;
}

#turnstatus {
  text-align: center;
}
#voteResetPanel {
  text-align: center;
}

.focused {
  box-shadow: 0 0 9px 0 rgba(45,213,255,.75);
  -moz-box-shadow: 0 0 9px 0 rgba(45,213,255,.75);
  -webkit-box-shadow: 0 0 9px 0 rgba(45,213,255,.75)
}

.waiting {
  box-shadow: 0 0 9px 0 rgba(242,255,63,.75);
  -moz-box-shadow: 0 0 9px 0 rgba(242,255,63,.75);
  -webkit-box-shadow: 0 0 9px 0 rgba(242,255,63,.75)
}

#staffbtns {
  display: none;
}

#staffbtns > button {
  display: none;
}

#qemuMonitorOutput {
  height: 180px;
}

#xssCheckboxContainer {
  display: none;
}

#forceVotePanel {
  display: none;
}

tr.user-admin > td, .chat-username-admin, .username-admin {
  color: #FF0000 !important;
}

tr.user-moderator > td, .chat-username-moderator, .username-moderator {
  color: #00FF00 !important;
}

html[data-bs-theme="dark"] {
  tr.user-unregistered > td, .chat-username-unregistered, .username-unregistered {
    color: #b1b1b1 !important;
  }
  
  tr.user-registered > td, .chat-username-registered, .username-registered {
    color: #FFFFFF !important;
  }

  tr.user-registered.user-turn > td, tr.user-registered.user-waiting > td {
    color: #000000 !important;
    --bs-table-color: #000000 !important;
  }
  
  tr.user-unregistered.user-turn > td, tr.user-unregistered.user-waiting > td {
    color: #585858 !important;
    --bs-table-color: #585858 !important;
  }
}

html[data-bs-theme="light"] {
  tr.user-unregistered > td, .chat-username-unregistered, .username-unregistered {
    color: #6b6b6b !important;
  }
  
  tr.user-registered > td, .chat-username-registered, .username-registered {
    color: #000 !important;
  }
}

tr.user-turn > td {
  background-color: #cfe2ff !important;
  --bs-table-bg-state: #cfe2ff !important;
  color: #000000;
  --bs-table-color: #000000;
}

tr.user-turn:hover, tr.user-turn > td:hover {
  background-color: #bacbe6 !important;
  --bs-table-bg-state: #bacbe6 !important;
}

tr.user-waiting > td {
  background-color: #fff3cd !important;
  --bs-table-bg-state: #fff3cd !important;
  color: #000000;
  --bs-table-color: #000000;
}

.tr.user-waiting:hover, tr.user-waiting > td:hover {
  background-color: #ece1be !important;
  --bs-table-bg-state: #ece1be !important;
}

.user-current {
  font-style: italic;
}

/* Start OSK */
.osk-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1024px;
  margin: 0 auto;
  margin-bottom: 10px;
  border-radius: 5px;
}

.simple-keyboard.hg-theme-default {
  display: inline-block;
}

.osk-main.simple-keyboard {
  max-width: 640px;
  background: none;
}

.osk-main.simple-keyboard .hg-row:first-child {
  margin-bottom: 8.51px; /* wtf? */
}

.osk-arrows.simple-keyboard {
  align-self: flex-end;
  background: none;
}

.simple-keyboard .hg-button.selectedButton {
  background: rgba(5, 25, 70, 0.53);
  color: white;
}

.simple-keyboard .hg-button.emptySpace {
  pointer-events: none;
  background: none;
  border: none;
  box-shadow: none;
}

.osk-arrows .hg-row {
  justify-content: center;
}

.osk-arrows .hg-button {
  width: 50px;
  flex-grow: 0 !important;
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
}

.controlArrows {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column;
}

.osk-control.simple-keyboard {
  background: none;
}

.osk-control.simple-keyboard .hg-row:first-child {
  margin-bottom: 8.51px;
}

.osk-control .hg-button {
  width: 50px;
  flex-grow: 0 !important;
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
}

.numPad {
  display: flex;
  align-items: flex-end;
}

.osk-numpad.simple-keyboard {
  background: none;
}

.osk-numpad.simple-keyboard {
  width: 160px;
}

.osk-numpad.simple-keyboard .hg-button {
  width: 50px;
  justify-content: center;
  display: flex;
  align-items: center;
}

.osk-numpadEnd.simple-keyboard {
  width: 50px;
  background: none;
  margin: 0;
  padding: 5px 5px 5px 0;
}

.osk-numpadEnd.simple-keyboard .hg-button {
  align-items: center;
  justify-content: center;
  display: flex;
}

.osk-numpadEnd .hg-button.hg-standardBtn.hg-button-plus {
  height: 85px;
}

.osk-numpadEnd.simple-keyboard .hg-button.hg-button-enter {
  height: 85px;
}

.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton {
  background: rgba(5, 25, 70, 0.53);
  color: white;
}

.hg-button.hg-functionBtn.hg-button-space {
  width: 350px;
}

@media screen and (max-width: 640px) {
  .hg-button:not(:last-child) {
    margin-right: 1px !important;
  }
}

/*
Theme: cvmDark
*/

.simple-keyboard.cvmDark .hg-button {
  border-bottom: none;
  background: rgba(0, 0, 0, 0.5);
  color: white;
}

.simple-keyboard.cvmDark .hg-button:active {
  background: #1c4995;
  color: white;
}

#root .simple-keyboard.cvmDark + .simple-keyboard-preview {
  background: #1c4995;
}

/*
Theme: cvmDisabled
*/
.simple-keyboard.cvmDisabled .hg-button {
  border-bottom: none;
  pointer-events: none;
  background: gray;
  color: white;
}

/* End OSK */

#badPasswordAlert {
  display: none;
}

/* NSFW Blur */
.cvm-nsfw {
  img {
    filter:blur(40px)!important; 
  }
  h5::before {
    content: "[NSFW] ";
    color: #ff0000;
  }
}

#accountDropdownMenuLink, #accountModalError, #accountModalSuccess {
  display: none;
}

/* Emoji font for systems without one */
@font-face {
  font-family: 'Noto Color Emoji';
  src: url('../assets/NotoColorEmoji.ttf');
}