Added simpleLevel
This commit is contained in:
silas
@@ -1,94 +0,0 @@
|
||||
.author {
|
||||
color: #979797; }
|
||||
.author:after {
|
||||
content: ':';
|
||||
padding-right: 2px; }
|
||||
|
||||
.chat-img-container, .author-image-container {
|
||||
width: 2.4rem;
|
||||
position: relative; }
|
||||
.chat-img-container .chat-img, .chat-img-container .author-image, .author-image-container .chat-img, .author-image-container .author-image {
|
||||
position: absolute;
|
||||
margin: 0.2em;
|
||||
border-radius: 50%;
|
||||
width: 1.8em; }
|
||||
|
||||
.chat {
|
||||
border-bottom: 1px solid #ececec; }
|
||||
.chat.overview {
|
||||
cursor: pointer; }
|
||||
.chat .chat-name {
|
||||
font-weight: bold; }
|
||||
.chat .chat-last-message {
|
||||
color: #555555;
|
||||
overflow: hidden;
|
||||
white-space: nowrap; }
|
||||
.chat .chat-last-message .isWriting {
|
||||
color: #aa1c1d; }
|
||||
.chat .chat-last-message-timestamp {
|
||||
font-size: 0.8rem; }
|
||||
.chat .unread-message-counter {
|
||||
background-color: red;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
font-size: 0.7rem;
|
||||
border: 1px solid #9b0000;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
line-height: 1.2rem;
|
||||
text-align: center;
|
||||
vertical-align: middle; }
|
||||
.chat .unread-message-counter:empty {
|
||||
display: none; }
|
||||
|
||||
#chat-title {
|
||||
border-bottom: none; }
|
||||
#chat-title .chat-img {
|
||||
width: 1.4em;
|
||||
position: relative; }
|
||||
|
||||
.message {
|
||||
margin-bottom: 0.1rem; }
|
||||
.message.my-message {
|
||||
text-align: right; }
|
||||
.message.my-message .author-image-container, .message.my-message .author {
|
||||
display: none; }
|
||||
.message.my-message .bubble {
|
||||
background-color: rgba(255, 0, 0, 0.5);
|
||||
border-radius: 5px 5px 0 5px; }
|
||||
.message .author-image {
|
||||
bottom: 0; }
|
||||
.message .bubble {
|
||||
display: inline-block;
|
||||
padding: 0.2rem;
|
||||
border: 1px solid #646464;
|
||||
border-radius: 5px 5px 5px 0;
|
||||
max-width: 80%;
|
||||
text-align: left; }
|
||||
.message .bubble .author {
|
||||
font-size: 0.7rem;
|
||||
text-align: left;
|
||||
line-height: 0.9; }
|
||||
.message .bubble .message-text {
|
||||
line-height: 1; }
|
||||
.message .bubble .time {
|
||||
line-height: 0.9;
|
||||
font-size: 0.5rem;
|
||||
text-align: right; }
|
||||
|
||||
#answer {
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
min-height: 50px; }
|
||||
|
||||
.answer-button-container .answer-button {
|
||||
overflow: hidden;
|
||||
margin-top: -0.1em;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
padding: 0 0.1em 0.1em;
|
||||
text-align: center;
|
||||
vertical-align: middle; }
|
||||
@@ -1,137 +0,0 @@
|
||||
$borderColor: #ececec;
|
||||
|
||||
//Allgemein
|
||||
.author {
|
||||
color: #979797;
|
||||
&:after {
|
||||
content: ':';
|
||||
padding-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-img-container, .author-image-container {
|
||||
width: 2.4rem;
|
||||
position: relative;
|
||||
.chat-img, .author-image {
|
||||
position: absolute;
|
||||
margin: 0.2em;
|
||||
border-radius: 50%;
|
||||
width: 1.8em;
|
||||
}
|
||||
}
|
||||
|
||||
//Overview
|
||||
.chat {
|
||||
border-bottom: 1px solid $borderColor;
|
||||
&.overview {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chat-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
.chat-last-message {
|
||||
color: #555555;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
.isWriting {
|
||||
color: #aa1c1d;
|
||||
}
|
||||
}
|
||||
.chat-last-message-timestamp {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.unread-message-counter {
|
||||
background-color: red;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
font-size: 0.7rem;
|
||||
border: 1px solid #9b0000;
|
||||
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
line-height: 1.2rem;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//------------Chat
|
||||
#chat-title {
|
||||
border-bottom: none;
|
||||
.chat-img {
|
||||
width: 1.4em;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-bottom: 0.1rem;
|
||||
|
||||
&.my-message {
|
||||
text-align: right;
|
||||
|
||||
.author-image-container, .author {
|
||||
display: none;
|
||||
}
|
||||
.bubble {
|
||||
background-color: rgba(255, 0, 0, 0.5);
|
||||
border-radius: 5px 5px 0 5px;
|
||||
}
|
||||
}
|
||||
.author-image {
|
||||
bottom: 0;
|
||||
}
|
||||
.bubble {
|
||||
display: inline-block;
|
||||
padding: 0.2rem;
|
||||
border: 1px solid #646464;
|
||||
border-radius: 5px 5px 5px 0;
|
||||
max-width: 80%;
|
||||
text-align: left;
|
||||
|
||||
.author {
|
||||
font-size: 0.7rem;
|
||||
text-align: left;
|
||||
line-height: 0.9;
|
||||
}
|
||||
.message-text {
|
||||
line-height: 1;
|
||||
}
|
||||
.time {
|
||||
line-height: 0.9;
|
||||
font-size: 0.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#answer {
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.answer-button-container {
|
||||
.answer-button {
|
||||
overflow: hidden;
|
||||
margin-top: -0.1em;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
padding: 0 0.1em 0.1em;
|
||||
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@import "editStory";
|
||||
36
src/scss/wordRotator.scss
Normal file
36
src/scss/wordRotator.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
.segment
|
||||
{
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
&.segment-parent{
|
||||
border: solid 1px #a9a9a9;
|
||||
border-radius: 3px;
|
||||
.segment{
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
&.rotate-90
|
||||
{
|
||||
transform: rotate(90deg);
|
||||
.segment{
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
&.rotate-180
|
||||
{
|
||||
transform: rotate(180deg);
|
||||
.segment{
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&.rotate-270
|
||||
{
|
||||
transform: rotate(270deg);
|
||||
.segment{
|
||||
transform: rotate(-270deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user