142 lines
2.9 KiB
SCSS
142 lines
2.9 KiB
SCSS
@import "../../assets/scss/variables.scss";
|
|
@import "../../assets/scss/mixins/layout";
|
|
@import "../../assets/scss/mixins/button";
|
|
|
|
.tfw-grid-message {
|
|
font-family: "Roboto";
|
|
font-style: normal;
|
|
display: grid;
|
|
grid-template-rows: 1fr auto;
|
|
grid-row-gap: $nano;
|
|
width: 100%;
|
|
padding: $hair;
|
|
border-radius: $tao-panel-border-radius-sm;
|
|
font-size: $font-size-base;
|
|
margin-bottom: $hair;
|
|
|
|
animation-name: inflate;
|
|
animation-duration: 0.5s;
|
|
animation-timing-function: cubic-bezier(0.01, 0.1, 0, 1);
|
|
color: white;
|
|
background-color: $tao-card-color;
|
|
|
|
.tfw-message-btn-divider {
|
|
opacity: 0.25;
|
|
border: 1px solid $tao-gray-color;
|
|
}
|
|
.tfw-message-btn {
|
|
color: $tao-btn-font-color;
|
|
padding-top: $tiny;
|
|
padding-bottom: $hair;
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
|
|
.no {
|
|
@include set-button-style($tao-red-color, $tao-shadow-red-color);
|
|
width: $xlarge;
|
|
}
|
|
|
|
.yes {
|
|
@include set-button-style($tao-green-color, $tao-shadow-green-color);
|
|
width: $xlarge;
|
|
}
|
|
|
|
.solution {
|
|
@include set-button-style(white, $tao-shadow-color);
|
|
width: $xlarge + $medium + $tiny;
|
|
}
|
|
|
|
.hint {
|
|
@include set-button-style($tao-blue-color, $tao-shadow-blue-color);
|
|
width: $xlarge;
|
|
}
|
|
|
|
.fix {
|
|
@include set-button-style($tao-yellow-color, $tao-shadow-yellow-color);
|
|
width: $xlarge + $medium + $tiny;
|
|
}
|
|
|
|
.next {
|
|
@include set-button-style($tao-blue-color, $tao-shadow-blue-color);
|
|
width: $xlarge;
|
|
}
|
|
}
|
|
}
|
|
|
|
.highlighted-message {
|
|
// box-shadow: 0px 0px 8px 0px $tao-blue-color;
|
|
border: 3px single $tao-blue-color;
|
|
|
|
}
|
|
|
|
@keyframes inflate {
|
|
0% { transform: scale(0,0); }
|
|
100% { transform: scale(1,1); }
|
|
}
|
|
|
|
.jumping-circle-container {
|
|
display: flex;
|
|
padding-top: 1.3em;
|
|
padding-bottom: 1em;
|
|
}
|
|
|
|
.jumping-circle {
|
|
width: 0.5em;
|
|
height: 0.5em;
|
|
border-radius: 50%;
|
|
background-color: gray;
|
|
margin-top: 0.3em;
|
|
margin-left: 0.3em;
|
|
|
|
animation-name: float;
|
|
animation-duration: 1.7s;
|
|
animation-timing-function: ease-in-out;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
#jc2 { animation-delay: 0.2s; }
|
|
#jc3 { animation-delay: 0.45s; }
|
|
|
|
@keyframes float {
|
|
0% { transform: translateY(0em); }
|
|
30% { transform: translateY(-0.5em); }
|
|
60% { transform: translateY(0.2em); }
|
|
80% { transform: translateY(0em); }
|
|
90% { transform: translateY(-0.5em); }
|
|
100% { transform: translateY(0em); }
|
|
}
|
|
|
|
.tfw-grid-message-header {
|
|
display: grid;
|
|
grid-template-columns: 5fr 8fr;
|
|
grid-column-gap: 4px;
|
|
width: 100%;
|
|
|
|
.originator {
|
|
font-style: normal;
|
|
font-weight: bold;
|
|
font-size: $font-size-base;
|
|
line-height: 26px;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
color: $tao-message-originator-color;
|
|
}
|
|
|
|
.timestamp {
|
|
font-size: $font-size-base;
|
|
color: $tao-gray-color;
|
|
opacity: 0.37;
|
|
}
|
|
}
|
|
|
|
.tfw-grid-message-body {
|
|
@include word-break();
|
|
line-height: 26px;
|
|
|
|
& p {
|
|
margin-bottom: $tiny !important;
|
|
}
|
|
}
|