Skip to content
Snippets Groups Projects
Select Git revision
  • 8e50dea32345b403512c2a46a31665c53c8c6eb6
  • main default protected
  • wip
  • ChenZhangg-Modify_GRADLE_1
  • jetpack-compose-rewrite
  • demo-jump-in-history
  • attachments
  • 1.7.0 protected
  • 1.6.2 protected
  • 1.6.1 protected
  • 1.6.0 protected
  • 1.5.3 protected
  • 1.5.2 protected
  • 1.5.1 protected
  • 1.5.0 protected
  • 1.4.4 protected
  • 1.4.3 protected
  • 1.4.2 protected
  • 1.4.1 protected
  • 1.4.0 protected
  • v1.3.3 protected
  • v1.3.2 protected
  • v1.3.1 protected
  • v1.3.0 protected
  • v1.2.28 protected
  • v1.2.27 protected
  • v1.2.26 protected
27 results

gradlew

    • style.css 12.04 KiB 
    * {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

input#load {
    display: none;
}

.column {
  display: flex;
  flex-direction: column;
}

.phone {
  height: 683px;
  width: 411px;
  max-width: 100vw;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--colorBackground);
  margin-bottom: 1rem;
}

:root {
  --colorPrimary:rgba(10,112,192,1);
  --colorPrimaryDark:rgba(16,90,148,1);
  --colorAccent:rgba(255,175,59,1);
  --senderColor0:rgba(244,67,54,1);
  --senderColor1:rgba(33,150,243,1);
  --senderColor2:rgba(124,179,66,1);
  --senderColor3:rgba(123,31,162,1);
  --senderColor4:rgba(218,142,0,1);
  --senderColor5:rgba(76,175,80,1);
  --senderColor6:rgba(63,81,181,1);
  --senderColor7:rgba(233,30,99,1);
  --senderColor8:rgba(185,70,0,1);
  --senderColor9:rgba(158,157,36,1);
  --senderColorA:rgba(85,139,47,1);
  --senderColorB:rgba(0,150,136,1);
  --senderColorC:rgba(2,119,189,1);
  --senderColorD:rgba(0,131,143,1);
  --senderColorE:rgba(156,39,176,1);
  --senderColorF:rgba(197,17,98,1);
  --colorTextToolbarPrimary:rgba(255,255,255,1);
  --colorTextToolbarSecondary:rgba(255,255,255,0.6980392156862745);
  --colorTextPrimary:rgba(0,0,0,0.8705882352941177);
  --colorTextPrimaryInverse:rgba(255,255,255,1);
  --colorTextSecondary:rgba(0,0,0,0.5411764705882353);
  --colorTextSecondaryInverse:rgba(255,255,255,0.6980392156862745);
  --colorDivider:rgba(0,0,0,0.12156862745098039);
  --colorForeground:rgba(0,0,0,0.8705882352941177);
  --colorForegroundHighlight:rgba(0,0,0,0.8705882352941177);
  --colorForegroundHighlightSecondary:rgba(0,0,0,0.5411764705882353);
  --colorForegroundSecondary:rgba(0,0,0,0.5411764705882353);
  --colorForegroundAction:rgba(1,87,155,1);
  --colorForegroundNotice:rgba(181,106,0,1);
  --colorForegroundError:rgba(183,28,28,1);
  --colorBackground:rgba(250,250,250,1);
  --colorBackgroundHighlight:rgba(255,175,59,0.25098039215686274);
  --colorBackgroundSecondary:rgba(240,240,240,1);
      --colorBackgroundCard:rgba(255,255,255,1);
  --colorBackgroundDialog:rgba(250,250,250,1);
  --colorMarkerLine:rgba(183,28,28,1);
  --colorTintActivity:rgba(175,180,43,1);
  --colorTintMessage:rgba(25,118,210,1);
  --colorTintHighlight:rgba(255,171,0,1);
  --colorTintNotification:#D32F2F;
  --colorTintSecure:rgba(76,175,80,1);
  --colorTintPartiallySecure:rgba(255,193,7,1);
  --colorTintInsecure:rgba(211,47,47,1);
}


.phone .messages .message[data-sender="0"] .avatar .background { background-color: var(--senderColor0); }
.phone .messages .message[data-sender="0"] .contentcolumn .sender { color: var(--senderColor0); }
.phone .messages .message[data-sender="1"] .avatar .background { background-color: var(--senderColor1); }
.phone .messages .message[data-sender="1"] .contentcolumn .sender { color: var(--senderColor1); }
.phone .messages .message[data-sender="2"] .avatar .background { background-color: var(--senderColor2); }
.phone .messages .message[data-sender="2"] .contentcolumn .sender { color: var(--senderColor2); }
.phone .messages .message[data-sender="3"] .avatar .background { background-color: var(--senderColor3); }
.phone .messages .message[data-sender="3"] .contentcolumn .sender { color: var(--senderColor3); }
.phone .messages .message[data-sender="4"] .avatar .background { background-color: var(--senderColor4); }
.phone .messages .message[data-sender="4"] .contentcolumn .sender { color: var(--senderColor4); }
.phone .messages .message[data-sender="5"] .avatar .background { background-color: var(--senderColor5); }
.phone .messages .message[data-sender="5"] .contentcolumn .sender { color: var(--senderColor5); }
.phone .messages .message[data-sender="6"] .avatar .background { background-color: var(--senderColor6); }
.phone .messages .message[data-sender="6"] .contentcolumn .sender { color: var(--senderColor6); }
.phone .messages .message[data-sender="7"] .avatar .background { background-color: var(--senderColor7); }
.phone .messages .message[data-sender="7"] .contentcolumn .sender { color: var(--senderColor7); }
.phone .messages .message[data-sender="8"] .avatar .background { background-color: var(--senderColor8); }
.phone .messages .message[data-sender="8"] .contentcolumn .sender { color: var(--senderColor8); }
.phone .messages .message[data-sender="9"] .avatar .background { background-color: var(--senderColor9); }
.phone .messages .message[data-sender="9"] .contentcolumn .sender { color: var(--senderColor9); }
.phone .messages .message[data-sender="A"] .avatar .background { background-color: var(--senderColorA); }
.phone .messages .message[data-sender="A"] .contentcolumn .sender { color: var(--senderColorA); }
.phone .messages .message[data-sender="B"] .avatar .background { background-color: var(--senderColorB); }
.phone .messages .message[data-sender="B"] .contentcolumn .sender { color: var(--senderColorB); }
.phone .messages .message[data-sender="C"] .avatar .background { background-color: var(--senderColorC); }
.phone .messages .message[data-sender="C"] .contentcolumn .sender { color: var(--senderColorC); }
.phone .messages .message[data-sender="D"] .avatar .background { background-color: var(--senderColorD); }
.phone .messages .message[data-sender="D"] .contentcolumn .sender { color: var(--senderColorD); }
.phone .messages .message[data-sender="E"] .avatar .background { background-color: var(--senderColorE); }
.phone .messages .message[data-sender="E"] .contentcolumn .sender { color: var(--senderColorE); }
.phone .messages .message[data-sender="F"] .avatar .background { background-color: var(--senderColorF); }
.phone .messages .message[data-sender="F"] .contentcolumn .sender { color: var(--senderColorF); }

.phone .statusbar {
  height: 24px;
  flex-shrink: 0;
  background-color: var(--colorPrimaryDark);
}

.phone .toolbar {
  flex-shrink: 0;
  height: 56px;
  background-color: var(--colorPrimary);
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.phone .toolbar .content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-left: 8px;
  justify-content: center;
}

    .phone .toolbar .content h1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 20px;
  font-weight: 500;
  color: var(--colorTextToolbarPrimary);
}

.phone .toolbar .content h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 400;
  color: var(--colorTextToolbarSecondary);
}

.phone .toolbar .overflow {
  padding: 16px 8px 16px 0px;
}

.phone .toolbar .nicks {
  padding: 0px 16px;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.phone .toolbar .nicks .count {
  color: var(--colorTextToolbarPrimary);
  font-weight: bold;
  letter-spacing: -1px;
  font-size: 15px;
  line-height: 1;
  margin-top: -4px;
}

.phone .toolbar .hamburger {
  padding: 16px 8px 16px 16px;
}

.phone .toolbar .nicks path, .phone .toolbar .overflow path, .phone .toolbar .hamburger .icon {
  fill: var(--colorTextToolbarPrimary);
}

.phone .toolbar .hamburger .badge {
  fill: var(--colorTintNotification);
}

.phone .messages {
  flex-grow: 1;
  flex-shrink: 1;
  overflow-y: scroll;
  background:
    linear-gradient(rgba(0,0,0,0.26) 0px, transparent 2px),
    linear-gradient(0deg, rgba(0,0,0,0.26) 0px, transparent 1px);
}

.phone .messages .message {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  padding: 2px 8px;
  font-size: 14px;
}

.phone .messages .message .avatar {
      flex-shrink: 0;
  width: 35px;
  height: 35px;
  margin-right: 8px;
  position: relative;
}

.phone .messages .message .avatar .background {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 2px;
  z-index: 0;
}

.phone .messages .message .avatar img {
  display: none;
  max-height: 35px;
  max-width: 35px;
  border-radius: 2px;
}

.phone .messages .message .avatar .initial {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  line-height: 35px;
  text-transform: uppercase;
  color: var(--colorBackground);
  opacity: 0.5;
  position: relative;
  z-index: 1;
}

.phone .messages .message .contentcolumn {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.phone .messages .message .contentcolumn .senderrow {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.phone .messages .message .contentcolumn .sender {
  font-weight: bold;
  margin-right: 4px;
}

.phone .messages .message .contentcolumn .mode {
  color: var(--colorTextSecondary);
}

.phone .messages .message .contentcolumn .senderrow .realname {
  flex-shrink: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--colorTextSecondary);
}

.phone .messages .message .contentcolumn .contentrow {
  flex-grow: 1;
  display: flex;
      flex-direction: row;
  margin-bottom: 4px;
}

.phone .messages .message .contentcolumn .contentrow:last-child {
  margin-bottom: 0;
}

.phone .messages .message .contentcolumn .contentrow .content {
  flex-grow: 1;
  color: var(--colorForeground);
}

.phone .messages .message .contentcolumn .contentrow .content a {
  color: var(--colorAccent);
}

.phone .messages .message .contentcolumn .contentrow .time {
  flex-shrink: 0;
  color: var(--colorTextSecondary);
  font-size: 12px;
  font-style: italic;
  margin-left: 8px;
}

.phone[data-highlightself] .messages .message[data-self] {
  background: var(--colorBackgroundSecondary);
}

.phone .messages .message[data-self] .avatar .background {
  background: var(--colorForegroundSecondary);
}

.phone .messages .message[data-self] .contentcolumn .sender {
  color: var(--colorForegroundSecondary);
}

.phone .messages .message[data-highlight] {
  background: var(--colorBackgroundHighlight);
}

.phone .messages .message[data-highlight] .contentcolumn .contentrow .content {
  color: var(--colorForegroundHighlight);
}

.phone .messages .message[data-highlight] .contentcolumn .senderrow .mode,
.phone .messages .message[data-highlight] .contentcolumn .senderrow .realname,
.phone .messages .message[data-highlight] .contentcolumn .contentrow .time {
  color: var(--colorForegroundHighlightSecondary);
}

.phone .messages .message[data-action] .avatar {
  width: 21px;
  height: 21px;
  margin-left: 14px;
}

.phone .messages .message[data-action] .avatar img {
  max-height: 21px;
  max-width: 21px;
}

.phone .messages .message[data-action] .avatar .initial {
  font-size: 14px;
  line-height: 21px;
}

.phone .messages .message[data-action] .contentcolumn .contentrow .prefix,
.phone .messages .message[data-action] .contentcolumn .contentrow .content {
  color: var(--colorForegroundAction);
    }

.phone .messages .message[data-action] .contentcolumn .contentrow .prefix,
.phone .messages .message[data-action] .contentcolumn .contentrow .content,
.phone .messages .message[data-action] .contentcolumn .contentrow .sender {
  font-style: italic;
}

.phone .messages .message[data-daychange] {
  border-top: 1px solid var(--colorDivider);
  padding: 8px;
  display: block;
}

.phone .messages .message[data-daychange] .time {
  font-weight: bold;
  text-align: center;
  color: var(--colorForeground);
}

.phone .chatline {
  flex-shrink: 0;
  height: 56px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.phone .chatline .input {
  flex-grow: 1;
  padding: 8px 20px;
  color: var(--colorTextSecondary);
}

.phone .chatline .send {
  padding: 12px;
}

.phone .chatline .send path {
  fill: var(--colorAccent);
}

.phone[data-roundavatars] .messages .message .avatar img,
.phone[data-roundavatars] .messages .message .avatar .background {
  border-radius: 100%;
}

.phone[data-avatars] .messages .message .avatar img {
  display: block;
}

.phone[data-avatars] .messages .message .avatar img~.background,
.phone[data-avatars] .messages .message .avatar img~.initial {
  display: none;
}

@media (max-width: 600px) {
  tr {
    display: block;
  }

  tr td:first-child {
    display: block;
  }
}


@media (min-width: 800px) {
  body {
    flex-direction: row;
      }
  
  .container.control {
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 24px;
  }
}