@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: local("Material Icons"), local("MaterialIcons-Regular"), url(../icons/MaterialIcons-Regular.woff2) format("woff2"), url(../icons/MaterialIcons-Regular.woff) format("woff"); } .icon { font-family: 'Material Icons', sans-serif; font-weight: normal; font-style: normal; font-size: 24px; display: inline-block; width: 1em; height: 1em; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local("Roboto"), local("Roboto-Regular"), url("../fonts/roboto-v15-latin-ext_cyrillic_greek-ext_cyrillic-ext_latin_greek_vietnamese-regular.woff2") format("woff2"), url("../fonts/roboto-v15-latin-ext_cyrillic_greek-ext_cyrillic-ext_latin_greek_vietnamese-regular.woff") format("woff"); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: local("Roboto Bold"), local("Roboto-Bold"), url("../fonts/roboto-v15-latin-ext_cyrillic_greek-ext_cyrillic-ext_latin_greek_vietnamese-700.woff2") format("woff2"), url("../fonts/roboto-v15-latin-ext_cyrillic_greek-ext_cyrillic-ext_latin_greek_vietnamese-700.woff") format("woff"); } * { padding: 0; margin: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } body { background: #F2F2F2; font-family: 'Roboto', sans-serif; font-size: 81.25%; padding-top: 56px; } *:focus { outline: none; } ::-moz-focus-inner { border: 0; } *.hidden { visibility: hidden !important; display: none !important; } .progress { position: absolute; height: 4px; display: block; background-color: rgba(255, 255, 255, 0.2); overflow: hidden; transition: opacity 400ms; bottom: 0; left: 0; right: 0; } .progress:not(.visible) { opacity: 0; } .progress .indeterminate { background-color: rgba(255, 255, 255, 0.8); } .progress .indeterminate:before { content: ''; position: absolute; background-color: inherit; top: 0; left: 0; bottom: 0; will-change: left, right; animation: indeterminate 4.2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; } .progress .indeterminate:after { content: ''; position: absolute; background-color: inherit; top: 0; left: 0; bottom: 0; will-change: left, right; animation: indeterminate-short 4.2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation-delay: 2.25s; } .nav { position: fixed; left: 0; right: 0; top: 0; height: 56px; z-index: 2; } .nav .bar { background-color: #0a70c0; z-index: 1; position: absolute; top: 0; left: 0; right: 0; box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24); transition: background-color .15s; will-change: background-color; } .nav .bar .container { max-width: 1136px; margin: 0 auto; padding: 0 2rem; display: flex; } @media (max-width: 800px) { .nav .bar .container { padding: 0 0 0 8px; } } .nav .bar .container .searchBar { margin: 8px auto; height: 40px; display: flex; position: relative; border: none; background: #348bcf; border-radius: 2px; padding: 0 0 0 72px; color: #ffffff; flex-direction: row; flex: 1; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06); transition: background-color .15s; } .nav .bar .container .searchBar:hover { background-color: rgba(255, 255, 255, 0.3); } .nav .bar .container .searchBar .icon { display: inline-block; width: 72px; height: 40px; position: absolute; text-align: center; line-height: 40px; left: 0; top: 0; cursor: pointer; } .nav .bar .container .searchBar .search { display: inline-block; flex-grow: 1; flex-shrink: 1; background: none; border: none; line-height: 100%; color: #ffffff; font-size: 1rem; margin-right: 8px; -webkit-appearance: textfield; -webkit-box-sizing: content-box; } .nav .bar .container .searchBar .search::-moz-placeholder { color: #ffffff; opacity: 1; -moz-osx-font-smoothing: grayscale; } .nav .bar .container .searchBar .search::-webkit-input-placeholder { color: #ffffff; opacity: 1; -webkit-font-smoothing: antialiased; } .nav .bar .container .searchBar .search::-webkit-search-decoration, .nav .bar .container .searchBar .search::-webkit-search-cancel-button { display: none; } .nav .bar .container .actions { display: flex; align-items: center; justify-content: flex-end; } .nav .bar a { height: 56px; width: 56px; position: relative; padding: 16px 13px; cursor: pointer; color: #fff; transition: all .15s; text-decoration: none; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .nav .bar a:before { background-color: rgba(255, 255, 255, 0.12); bottom: 9px; content: ' '; left: 9px; margin: auto; padding: 4px; position: absolute; right: 9px; top: 9px; z-index: -1; border-radius: 50%; opacity: 0; transition: opacity 100ms; } .nav .bar a:hover:before { opacity: 1; } .nav .history { top: 100%; max-width: 1136px; margin: auto; padding: 0 2rem; transform: translateY(-200%); transition: transform 400ms; position: relative; } @media (max-width: 800px) { .nav .history { padding: 0; } } .nav .history ul { list-style-type: none; margin: 0; padding: 6px 0; background: #fff; box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24); } .nav .history ul li { cursor: pointer; line-height: 36px; overflow: hidden; padding: 0 24px; text-overflow: ellipsis; white-space: nowrap; } .nav .history ul li:hover, .nav .history ul li:focus, .nav .history ul li.focus { background: rgba(0, 0, 0, 0.03); } .nav .history ul li .icon { border-radius: 12px; height: 24px; margin-right: 24px; vertical-align: middle; width: 24px; display: inline-block; background-size: cover; opacity: 0.6; } .nav .history ul p { cursor: default; line-height: 36px; overflow: hidden; padding: 0 24px; text-overflow: ellipsis; white-space: nowrap; font-style: italic; color: #646464; } .nav.focus .bar { background: #f2f2f2; } .nav.focus .bar .container .searchBar { background: #ffffff; } .nav.focus .bar .container .searchBar .search { color: #333333; } .nav.focus .bar .container .searchBar .search::-moz-placeholder { color: #757575; } .nav.focus .bar .container .searchBar .search::-webkit-input-placeholder { color: #757575; } .nav.focus .bar .container .icon { color: #757575; } .nav.focus .bar .progress { background-color: rgba(117, 117, 117, 0.2); } .nav.focus .bar .progress .indeterminate { background-color: rgba(117, 117, 117, 0.8); } .nav.focus .history { transform: translateY(0); } .nav.focus + .results { opacity: 0; } .search-options { margin: 0 auto; padding: 6px 0; background: #fff; box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24); max-width: 1072px; overflow-x: scroll; white-space: nowrap; } [data-sendercolor="0"] { color: #e90d7f; } [data-sendercolor="1"] { color: #8e55e9; } [data-sendercolor="2"] { color: #b30e0e; } [data-sendercolor="3"] { color: #17b339; } [data-sendercolor="4"] { color: #58afb3; } [data-sendercolor="5"] { color: #9d54b3; } [data-sendercolor="6"] { color: #b39775; } [data-sendercolor="7"] { color: #3176b3; } [data-sendercolor="8"] { color: #e90d7f; } [data-sendercolor="9"] { color: #8e55e9; } [data-sendercolor="a"] { color: #b30e0e; } [data-sendercolor="b"] { color: #17b339; } [data-sendercolor="c"] { color: #58afb3; } [data-sendercolor="d"] { color: #9d54b3; } [data-sendercolor="e"] { color: #b39775; } [data-sendercolor="f"] { color: #3176b3; } .irc_bold { font-weight: bold; } .irc_italic { font-style: italic; } .irc_underline { text-decoration: underline; } .irc_strikethrough { text-decoration: line-through; } .irc_strikethrough.irc_underline { text-decoration: line-through underline; } .irc_monospace { font-family: 'Roboto Mono', 'Source Code Pro', monospace; } [data-irc_foreground="00"] { color: #ffffff; } [data-irc_background="00"] { background-color: #ffffff; } [data-irc_foreground="01"] { color: #000000; } [data-irc_background="01"] { background-color: #000000; } [data-irc_foreground="02"] { color: #000080; } [data-irc_background="02"] { background-color: #000080; } [data-irc_foreground="03"] { color: #008000; } [data-irc_background="03"] { background-color: #008000; } [data-irc_foreground="04"] { color: #ff0000; } [data-irc_background="04"] { background-color: #ff0000; } [data-irc_foreground="05"] { color: #800000; } [data-irc_background="05"] { background-color: #800000; } [data-irc_foreground="06"] { color: #800080; } [data-irc_background="06"] { background-color: #800080; } [data-irc_foreground="07"] { color: #ffa500; } [data-irc_background="07"] { background-color: #ffa500; } [data-irc_foreground="08"] { color: #ffff00; } [data-irc_background="08"] { background-color: #ffff00; } [data-irc_foreground="09"] { color: #00ff00; } [data-irc_background="09"] { background-color: #00ff00; } [data-irc_foreground="10"] { color: #008080; } [data-irc_background="10"] { background-color: #008080; } [data-irc_foreground="11"] { color: #00ffff; } [data-irc_background="11"] { background-color: #00ffff; } [data-irc_foreground="12"] { color: #4169e1; } [data-irc_background="12"] { background-color: #4169e1; } [data-irc_foreground="13"] { color: #ff00ff; } [data-irc_background="13"] { background-color: #ff00ff; } [data-irc_foreground="14"] { color: #808080; } [data-irc_background="14"] { background-color: #808080; } [data-irc_foreground="15"] { color: #c0c0c0; } [data-irc_background="15"] { background-color: #c0c0c0; } [data-irc_foreground="16"] { color: #470000; } [data-irc_background="16"] { background-color: #470000; } [data-irc_foreground="17"] { color: #472100; } [data-irc_background="17"] { background-color: #472100; } [data-irc_foreground="18"] { color: #474700; } [data-irc_background="18"] { background-color: #474700; } [data-irc_foreground="19"] { color: #324700; } [data-irc_background="19"] { background-color: #324700; } [data-irc_foreground="20"] { color: #004700; } [data-irc_background="20"] { background-color: #004700; } [data-irc_foreground="21"] { color: #00472c; } [data-irc_background="21"] { background-color: #00472c; } [data-irc_foreground="22"] { color: #004747; } [data-irc_background="22"] { background-color: #004747; } [data-irc_foreground="23"] { color: #002747; } [data-irc_background="23"] { background-color: #002747; } [data-irc_foreground="24"] { color: #000047; } [data-irc_background="24"] { background-color: #000047; } [data-irc_foreground="25"] { color: #2e0047; } [data-irc_background="25"] { background-color: #2e0047; } [data-irc_foreground="26"] { color: #470047; } [data-irc_background="26"] { background-color: #470047; } [data-irc_foreground="27"] { color: #47002a; } [data-irc_background="27"] { background-color: #47002a; } [data-irc_foreground="28"] { color: #740000; } [data-irc_background="28"] { background-color: #740000; } [data-irc_foreground="29"] { color: #743a00; } [data-irc_background="29"] { background-color: #743a00; } [data-irc_foreground="30"] { color: #747400; } [data-irc_background="30"] { background-color: #747400; } [data-irc_foreground="31"] { color: #517400; } [data-irc_background="31"] { background-color: #517400; } [data-irc_foreground="32"] { color: #007400; } [data-irc_background="32"] { background-color: #007400; } [data-irc_foreground="33"] { color: #007449; } [data-irc_background="33"] { background-color: #007449; } [data-irc_foreground="34"] { color: #007474; } [data-irc_background="34"] { background-color: #007474; } [data-irc_foreground="35"] { color: #004074; } [data-irc_background="35"] { background-color: #004074; } [data-irc_foreground="36"] { color: #000074; } [data-irc_background="36"] { background-color: #000074; } [data-irc_foreground="37"] { color: #4b0074; } [data-irc_background="37"] { background-color: #4b0074; } [data-irc_foreground="38"] { color: #740074; } [data-irc_background="38"] { background-color: #740074; } [data-irc_foreground="39"] { color: #740045; } [data-irc_background="39"] { background-color: #740045; } [data-irc_foreground="40"] { color: #b50000; } [data-irc_background="40"] { background-color: #b50000; } [data-irc_foreground="41"] { color: #b56300; } [data-irc_background="41"] { background-color: #b56300; } [data-irc_foreground="42"] { color: #b5b500; } [data-irc_background="42"] { background-color: #b5b500; } [data-irc_foreground="43"] { color: #7db500; } [data-irc_background="43"] { background-color: #7db500; } [data-irc_foreground="44"] { color: #00b500; } [data-irc_background="44"] { background-color: #00b500; } [data-irc_foreground="45"] { color: #00b571; } [data-irc_background="45"] { background-color: #00b571; } [data-irc_foreground="46"] { color: #00b5b5; } [data-irc_background="46"] { background-color: #00b5b5; } [data-irc_foreground="47"] { color: #0063b5; } [data-irc_background="47"] { background-color: #0063b5; } [data-irc_foreground="48"] { color: #0000b5; } [data-irc_background="48"] { background-color: #0000b5; } [data-irc_foreground="49"] { color: #7500b5; } [data-irc_background="49"] { background-color: #7500b5; } [data-irc_foreground="50"] { color: #b500b5; } [data-irc_background="50"] { background-color: #b500b5; } [data-irc_foreground="51"] { color: #b5006b; } [data-irc_background="51"] { background-color: #b5006b; } [data-irc_foreground="52"] { color: #ff0000; } [data-irc_background="52"] { background-color: #ff0000; } [data-irc_foreground="53"] { color: #ff8c00; } [data-irc_background="53"] { background-color: #ff8c00; } [data-irc_foreground="54"] { color: #ffff00; } [data-irc_background="54"] { background-color: #ffff00; } [data-irc_foreground="55"] { color: #b2ff00; } [data-irc_background="55"] { background-color: #b2ff00; } [data-irc_foreground="56"] { color: #00ff00; } [data-irc_background="56"] { background-color: #00ff00; } [data-irc_foreground="57"] { color: #00ffa0; } [data-irc_background="57"] { background-color: #00ffa0; } [data-irc_foreground="58"] { color: #00ffff; } [data-irc_background="58"] { background-color: #00ffff; } [data-irc_foreground="59"] { color: #008cff; } [data-irc_background="59"] { background-color: #008cff; } [data-irc_foreground="60"] { color: #0000ff; } [data-irc_background="60"] { background-color: #0000ff; } [data-irc_foreground="61"] { color: #a500ff; } [data-irc_background="61"] { background-color: #a500ff; } [data-irc_foreground="62"] { color: #ff00ff; } [data-irc_background="62"] { background-color: #ff00ff; } [data-irc_foreground="63"] { color: #ff0098; } [data-irc_background="63"] { background-color: #ff0098; } [data-irc_foreground="64"] { color: #ff5959; } [data-irc_background="64"] { background-color: #ff5959; } [data-irc_foreground="65"] { color: #ffb459; } [data-irc_background="65"] { background-color: #ffb459; } [data-irc_foreground="66"] { color: #ffff71; } [data-irc_background="66"] { background-color: #ffff71; } [data-irc_foreground="67"] { color: #cfff60; } [data-irc_background="67"] { background-color: #cfff60; } [data-irc_foreground="68"] { color: #6fff6f; } [data-irc_background="68"] { background-color: #6fff6f; } [data-irc_foreground="69"] { color: #65ffc9; } [data-irc_background="69"] { background-color: #65ffc9; } [data-irc_foreground="70"] { color: #6dffff; } [data-irc_background="70"] { background-color: #6dffff; } [data-irc_foreground="71"] { color: #59b4ff; } [data-irc_background="71"] { background-color: #59b4ff; } [data-irc_foreground="72"] { color: #5959ff; } [data-irc_background="72"] { background-color: #5959ff; } [data-irc_foreground="73"] { color: #c459ff; } [data-irc_background="73"] { background-color: #c459ff; } [data-irc_foreground="74"] { color: #ff66ff; } [data-irc_background="74"] { background-color: #ff66ff; } [data-irc_foreground="75"] { color: #ff59bc; } [data-irc_background="75"] { background-color: #ff59bc; } [data-irc_foreground="76"] { color: #ff9c9c; } [data-irc_background="76"] { background-color: #ff9c9c; } [data-irc_foreground="77"] { color: #ffd39c; } [data-irc_background="77"] { background-color: #ffd39c; } [data-irc_foreground="78"] { color: #ffff9c; } [data-irc_background="78"] { background-color: #ffff9c; } [data-irc_foreground="79"] { color: #e2ff9c; } [data-irc_background="79"] { background-color: #e2ff9c; } [data-irc_foreground="80"] { color: #9cff9c; } [data-irc_background="80"] { background-color: #9cff9c; } [data-irc_foreground="81"] { color: #9cffdb; } [data-irc_background="81"] { background-color: #9cffdb; } [data-irc_foreground="82"] { color: #9cffff; } [data-irc_background="82"] { background-color: #9cffff; } [data-irc_foreground="83"] { color: #9cd3ff; } [data-irc_background="83"] { background-color: #9cd3ff; } [data-irc_foreground="84"] { color: #9c9cff; } [data-irc_background="84"] { background-color: #9c9cff; } [data-irc_foreground="85"] { color: #dc9cff; } [data-irc_background="85"] { background-color: #dc9cff; } [data-irc_foreground="86"] { color: #ff9cff; } [data-irc_background="86"] { background-color: #ff9cff; } [data-irc_foreground="87"] { color: #ff94d3; } [data-irc_background="87"] { background-color: #ff94d3; } [data-irc_foreground="88"] { color: #000000; } [data-irc_background="88"] { background-color: #000000; } [data-irc_foreground="89"] { color: #131313; } [data-irc_background="89"] { background-color: #131313; } [data-irc_foreground="90"] { color: #282828; } [data-irc_background="90"] { background-color: #282828; } [data-irc_foreground="91"] { color: #363636; } [data-irc_background="91"] { background-color: #363636; } [data-irc_foreground="92"] { color: #4d4d4d; } [data-irc_background="92"] { background-color: #4d4d4d; } [data-irc_foreground="93"] { color: #656565; } [data-irc_background="93"] { background-color: #656565; } [data-irc_foreground="94"] { color: #818181; } [data-irc_background="94"] { background-color: #818181; } [data-irc_foreground="95"] { color: #9f9f9f; } [data-irc_background="95"] { background-color: #9f9f9f; } [data-irc_foreground="96"] { color: #bcbcbc; } [data-irc_background="96"] { background-color: #bcbcbc; } [data-irc_foreground="97"] { color: #e2e2e2; } [data-irc_background="97"] { background-color: #e2e2e2; } [data-irc_foreground="98"] { color: #ffffff; } [data-irc_background="98"] { background-color: #ffffff; } .results { max-width: 1136px; padding: 2rem 2rem 4rem 2rem; margin: 0 auto; transition: opacity 400ms; } @media (max-width: 800px) { .results { padding-left: 0; padding-right: 0; padding-bottom: 0; } } .results .error { text-align: center; height: 100%; margin: 4rem; animation-duration: 0.6s; animation-name: slidein; } .results .error img { max-width: 100%; } .results .error h1 { margin-top: 2rem; color: #777; font-weight: normal; } .results .buffer { display: block; margin-top: 0; margin-bottom: 20px; position: relative; animation-duration: 0.6s; animation-name: slidein; } .results .buffer.focus:not(.hasmore) > .container > .inline-button { display: none; } .results .buffer .title { border-bottom: 1px solid transparent; border-top: 1px solid transparent; color: #616161; margin: 0; padding: 20px 6px 10px 22px; position: sticky; top: 55px; z-index: 1; transition: all 400ms; display: flex; } .results .buffer .title:before { content: ""; display: block; left: -16px; right: -16px; top: 0; bottom: 0; background-color: #f2f2f2; position: absolute; z-index: -2; } @media (max-width: 800px) { .results .buffer .title:before { left: 0; right: 0; } } .results .buffer .title:after { content: ""; display: block; left: 0; right: 0; top: 0; bottom: 0; background-color: transparent; transition: margin-left 400ms, margin-right 400ms, background-color 400ms; will-change: margin-left, margin-right, background-color; position: absolute; z-index: -1; } .results .buffer .title h2 { flex: 1; line-height: 36px; } .results .buffer .title button { border-radius: 3px; box-shadow: none; color: #444444; text-transform: uppercase; border: none; position: relative; font-weight: normal; margin-bottom: 0; text-align: center; vertical-align: middle; touch-action: manipulation; background: transparent none; white-space: nowrap; padding: 6px 16px; font-size: 13px; line-height: 1.846; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; text-decoration: none; box-sizing: border-box; font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; will-change: background; opacity: 0; pointer-events: none; cursor: none; transition: opacity 0.4s 0.2s, background 0.4s; } .results .buffer .title button:hover { background-color: rgba(0, 0, 0, 0.06); } .results .buffer .title button:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: radial-gradient(circle, #444444 10%, transparent 10.01%) no-repeat 50%; background-size: 1000% 1000%; opacity: 0; pointer-events: none; transition: background .5s, opacity 1s; } .results .buffer .title button:active:after { background-size: 0 0; opacity: .2; transition: 0s; } .results .buffer:not(.focus) .secondary { display: none; } .results .buffer:before { content: ""; display: block; left: 0; right: 0; top: 0; bottom: 0; background-color: transparent; transition: margin-left 400ms, margin-right 400ms, margin-bottom 400ms, background-color 400ms; will-change: margin-left, margin-right, margin-bottom, background-color; position: absolute; z-index: -1; } .results .buffer.focus:before { margin-bottom: -16px; background-color: #ddd; } @media (min-width: 800px) { .results .buffer.focus:before { margin-left: -16px; margin-right: -16px; } } .results .buffer.focus .title:after { background-color: #ddd; } @media (min-width: 800px) { .results .buffer.focus .title:after { margin-left: -16px; margin-right: -16px; } } .results .buffer.focus .title button { opacity: 1; display: inline-block; cursor: pointer; pointer-events: initial; } .results .buffer .container { font-size: 13px; } .results .buffer .container > .inline-button { overflow: hidden; font-size: 14px; line-height: 24px; padding: 7px 24px; border-bottom: 1px solid #e5e5e5; color: #555; background: #f0f0f0; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; transition: height 400ms; position: relative; box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24); } .results .buffer .container > .inline-button:before { content: ""; display: inline-block; height: 24px; width: 24px; background-image: url(../icons/dots-horizontal.svg); background-size: cover; vertical-align: top; margin-right: 16px; } .results .buffer .container.before > .inline-button:before { background-image: url(../icons/chevron-up.svg); } .results .buffer .container.after > .inline-button:before { background-image: url(../icons/chevron-down.svg); } .results .buffer .container .context { display: block; position: relative; animation-duration: 1s; animation-name: slidein; } .results .buffer .container .context .container .inline-button:first-child:last-child { display: none; } .results .buffer .container .context.focus { padding: 0; margin: 0.5rem -0.5rem; } @media (max-width: 800px) { .results .buffer .container .context.focus { margin: 1rem 0; } } .results .buffer .container .context.focus .container.before .message, .results .buffer .container .context.focus .container.before .inline-button { animation-name: slidein_msg_before; animation-duration: 400ms; } .results .buffer .container .context.focus .container.after .message, .results .buffer .container .context.focus .container.after .inline-button { animation-name: slidein_msg_after; animation-duration: 400ms; } .results .buffer .container .context:not(.focus) > .before, .results .buffer .container .context:not(.focus) > .after { display: none; } .results .buffer .container .context:not(.focus) > .inline-button { display: none; } .results .buffer .container .context .message { display: flex; line-height: 20px; padding: 12px 24px; border-bottom: 1px solid #e5e5e5; color: #212121; background: #fff; position: relative; } .results .buffer .container .context .message:before { bottom: 0; box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24); content: ''; display: block; left: 0; pointer-events: none; position: absolute; right: 0; top: 0; } .results .buffer .container .context .message > .more { height: 56px; width: 56px; position: relative; padding: 16px 13px; cursor: pointer; color: #555; transition: all .15s; text-decoration: none; text-align: center; margin-right: -24px; margin-top: -12px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .results .buffer .container .context .message > .more:before { background-color: rgba(255, 255, 255, 0.12); bottom: 9px; content: ' '; left: 9px; margin: auto; padding: 4px; position: absolute; right: 9px; top: 9px; z-index: -1; border-radius: 50%; opacity: 0; transition: opacity 100ms; } .results .buffer .container .context .message > .more:hover:before { opacity: 1; } .results .buffer .container .context .message time { width: 136px; display: inline-block; text-align: right; flex-shrink: 0; font-family: monospace; font-size: 85%; color: #444; } @media (max-width: 800px) { .results .buffer .container .context .message time { position: absolute; right: 8px; bottom: 8px; width: initial; font-style: italic; color: #777; } } .results .buffer .container .context .message .container { display: flex; flex-grow: 1; flex-shrink: 1; overflow: hidden; } @media (max-width: 800px) { .results .buffer .container .context .message .container { display: block; padding-bottom: 16px; } } .results .buffer .container .context .message .container .sender { width: 148px; display: inline-block; padding: 0 24px; font-weight: bold; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; } .results .buffer .container .context .message .container .sender .invisible { font-size: 0; opacity: 0; } @media (max-width: 800px) { .results .buffer .container .context .message .container .sender { width: initial; padding: 0; display: inline; line-height: 1; } } @media (max-width: 800px) { .results .buffer .container .context .message .container .sender:after { content: ': '; } } .results .buffer .container .context .message .container .content { flex-grow: 1; overflow: hidden; } .results .buffer .container .context .message .container .content .irc_highlight { background-color: rgba(251, 246, 167, 0.5); color: #212121 !important; } @media (max-width: 800px) { .results .buffer .container .context .message .container .content { vertical-align: top; display: inline; } .results .buffer .container .context .message .container .content span { vertical-align: top; } } .results .buffer .container .context .message.action .sender, .results .buffer .container .context .message.action .content { font-style: italic; } .results .buffer .container .context .message.action .sender:before { content: ' -*- '; color: #1a237e; } .results .buffer .container .context .message.action .content { color: #1a237e; } .results .buffer .container .context .message.notice .content, .results .buffer .container .context .message.notice .sender { color: #916409; } .results .buffer .container .context .message.notice .sender:before { content: '['; } .results .buffer .container .context .message.notice .sender:after { content: ']'; } @keyframes slidein { from { margin-top: 1rem; opacity: 0; } to { margin-top: 0; opacity: 1; } } @keyframes slidein_msg_before { from { margin-bottom: .5rem; opacity: 0; } to { margin-bottom: 0; opacity: 1; } } @keyframes slidein_msg_after { from { margin-top: .5rem; opacity: 0; } to { margin-top: 0; opacity: 1; } } @keyframes indeterminate { 0% { left: -35%; right: 100%; } 60% { left: 100%; right: -90%; } 100% { left: 100%; right: -90%; } } @keyframes indeterminate-short { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; } }