call-me-aishmael/src/styles.css

CW Dummy Test

.IBMChat-fade {
  left: 0;
  height: 25%;
  min-height:96px;
  position:absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

.IBMChat-outer-container {
  border: none;
  box-sizing: border-box;
  display:table;
  font-weight: normal;
  line-height: 1em;
  height: 100%;
  margin: 0 auto 0 auto;
  max-width: 768px;
  min-height:100px;
  min-width: 288px;
  padding:0;
  position:relative;
  text-align: left;
  width:100%;
}


/* Agent Component */

.IBMChat-inner-container {
  display:table-cell;
  height:100%;
  margin: 0;
  padding: 0 1em 0 1em;
  vertical-align: bottom;
}

/* Chat Component */

.IBMChat-chat-container {
  display:table-row;
  margin: 0;
  padding: 0;
}

/* Messages Component */

.IBMChat-messages {
  height:auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 1em 0 1em;
}

.IBMChat-messages label {
  display:block;
  font-weight:bold;
  text-transform: capitalize;
}

.IBMChat-messages input {
  border: 0;
  border-radius: 0;
  font-size:1em;
  margin:0;
  padding:0 0 0.25em 0;
}

.IBMChat-messages button {
  background: none;
  border: 0;
  border-radius: 1em;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: 1.5em;
  margin: 0;
  overflow: hidden;
  padding: 0.25em 1em 0.25em 1em;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-appearance: button; /* for input */
  -webkit-user-select: none; /* for button */
  -moz-user-select: none;
  -ms-user-select: none;
}

.IBMChat-messages button[disabled="true"] {
  cursor: default;
  opacity:.7;
}

.IBMChat-messages button[disabled="true"]:focus {
  outline: none;
}

.IBMChat-messages button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.IBMChat-watson-intent a {
  display:inline-block;
  margin: 1em 0 1em 0;
}

/* WatsonMessage Component */

.IBMChat-watson-message-container {
  margin: 1em 0 1em 0;
  position: relative;
}

.IBMChat-watson-message {
  line-height: 1.5em;
  min-height: 1.5em;
  padding: 0 0 0 1em;
}

.IBMChat-watson-message-line {
  left: 0;
  height: 1.5em;
  position: absolute;
  top: 0;
}

.IBMChat-disabled-layout {
  opacity: 0.7;
}

/* UserMessage Component */

.IBMChat-user-message-container {
	margin: 1em 0 1em 2em;
	text-align:right;
}

.IBMChat-user-message {
  border-radius: 4px;
  display: inline-block;
  line-height: 1.5em;
  padding: 0.5em 0.75em 0.5em 0.75em;
  text-align:left;
  white-space: pre-wrap;
  white-space: pre-line;
  word-wrap: break-word;
}

/* Input Component */

.IBMChat-input-container {
  display: table-row;
  margin: 0;
  padding: 0;
}

.IBMChat-input-form {
  display:table-cell;
  position:relative;
  height: 24px;
  padding: 1em 2em 2em 2em;
}

.IBMChat-chat-textbox-clone-holder {
  height: 0;
  overflow: hidden;
}

.IBMChat-chat-textbox-clone {
  border-bottom: 1px solid transparent;
  font-weight: normal;
  line-height: 1.5em;
  margin:0;
  min-height: 1.5em;
  padding:0;
  position: relative;
  white-space: pre-wrap;
  white-space: pre-line;
  word-wrap: break-word;
  visibility: hidden;
}

.IBMChat-chat-textbox {
  background: transparent;
  border: none;
  border-radius: 0;
  border-image-width: 0;
  color: inherit;
  font-weight: normal;
  height: 1.5em;
  line-height: 1.5em;
  margin:0;
  min-height:1.5em;
  overflow: hidden;
  padding:0 0 3px 0;
  resize: none;
  text-wrap: unrestricted;
  width:100%;
  white-space: pre-wrap;
  white-space: pre-line;
  word-wrap: break-word;
}

.IBMChat-chat-textbox[disabled='disabled'] {
  opacity:0.5;
}

.IBMChat-input-form ::-webkit-input-placeholder {
  opacity:1;
}

.IBMChat-chat-textbox:focus {
	outline: none;
	padding:0 0 2px 0;
}

/* Layout Component */
.IBMChat-watson-layout {
  padding:4px;
}

/* validation error message */
.IBMChat-validation-error {
  padding: 0.5em;
  font-size: 0.9em;
}

/* class to hide an element from everyone but screen readers for visually impared */

.IBMChat-screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute !important;
}

/* Spinner */
.IBMChat-input-loading {
  z-index: 2;
  position:absolute;
  right: 2em;
  top: 8px;
  height:32px;
  width:32px;
}

.IBMChat-ibm-spinner-start {
  opacity:0;
}

.IBMChat-ibm-spinner {
  fill: transparent;
  stroke-width: 3;
  stroke-linecap: "butt";
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* initial rotation and stroke animation and infinite rotation*/
.IBMChat-init-spin {
  animation: init-rotate 150ms linear forwards, rotate-loop 2000ms linear infinite;
}

.IBMChat-init-spin svg circle {
  animation: init-stroke 1000ms linear;
}

.IBMChat-end-spin svg circle {
  display:none;
}

/* initial rotation */
@keyframes init-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

/* looping rotation */
@keyframes rotate-loop {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* initial stroke animation */
@keyframes init-stroke {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* responsive */

.IBMChat-small-show {
  display: unset;
}

.IBMChat-small-hide {
  display: none;
}

.IBMChat-isLarge .IBMChat-small-show {
  display: none;
}
.IBMChat-isLarge .IBMChat-small-hide {
  display: unset;
}