269 lines
No EOL
5.7 KiB
SCSS
269 lines
No EOL
5.7 KiB
SCSS
@import "../../../../css/static/mixin";
|
|
@import "../../../../css/static/properties";
|
|
|
|
.container {
|
|
/* width: 57em; */
|
|
max-width: 57em;
|
|
min-width: 20em;
|
|
|
|
flex-shrink: 1;
|
|
flex-grow: 1;
|
|
|
|
padding: 1em;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: stretch;
|
|
|
|
@include user-select(none);
|
|
|
|
.info {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
|
|
.logo {
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
|
|
width: 15em;
|
|
height: 15em;
|
|
|
|
display: block;
|
|
|
|
margin-top: 1em;
|
|
margin-right: 2em;
|
|
|
|
align-self: center;
|
|
|
|
img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
h1 {
|
|
all: unset;
|
|
display: block;
|
|
font-weight: bold;
|
|
|
|
margin-bottom: 0;
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
h2 {
|
|
all: unset;
|
|
display: block;
|
|
font-weight: bold;
|
|
|
|
font-size: 1.5em;
|
|
margin-bottom: .3em;
|
|
}
|
|
|
|
.subtitleShort {
|
|
display: none;
|
|
}
|
|
|
|
.subtitleLong {
|
|
display: block;
|
|
}
|
|
|
|
p {
|
|
all: unset;
|
|
margin-bottom: 1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.changes {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: stretch;
|
|
|
|
.header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
position: relative;
|
|
|
|
margin-top: 1.5em;
|
|
|
|
padding-bottom: .5em;
|
|
padding-right: 1em;
|
|
padding-left: 1em;
|
|
|
|
&:after {
|
|
content: "";
|
|
display: block;
|
|
|
|
height: 2px;
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
@include transition($button_hover_animation_time ease-in-out);
|
|
}
|
|
|
|
.left, .right {
|
|
font-size: 1.4em;
|
|
cursor: pointer;
|
|
|
|
@include transition($button_hover_animation_time ease-in-out);
|
|
|
|
&.hidden {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&:hover {
|
|
color: #b6c4d6;
|
|
}
|
|
}
|
|
|
|
&.selectedLeft {
|
|
.left {
|
|
color: #245184;
|
|
}
|
|
|
|
&:after {
|
|
background: linear-gradient(to right, #245184 15em, #999999 60%);
|
|
}
|
|
}
|
|
|
|
&.selectedRight {
|
|
.right {
|
|
color: #245184;
|
|
}
|
|
|
|
&:after {
|
|
background: linear-gradient(to left, #245184 15em, #999999 60%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.body {
|
|
margin-top: .5em;
|
|
height: 20em;
|
|
|
|
background: #28292b;
|
|
border-radius: 3px;
|
|
|
|
position: relative;
|
|
|
|
font-family: consolas, monospace;
|
|
|
|
.changeList {
|
|
flex-shrink: 1;
|
|
flex-grow: 1;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
|
|
padding: .4em .8em .8em;
|
|
|
|
min-height: 1em;
|
|
height: 20em;
|
|
|
|
overflow-x: hidden;
|
|
@include chat-scrollbar-vertical();
|
|
|
|
@include user-select(text);
|
|
|
|
> ul > li {
|
|
margin-top: 1em;
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
all: unset;
|
|
display: block;
|
|
|
|
margin-left: 1em;
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
|
|
li:before {
|
|
content: '-';
|
|
margin-left: -1em;
|
|
margin-right: .5em;
|
|
}
|
|
}
|
|
}
|
|
|
|
code {
|
|
background: hsl(0, 0%, 11%);
|
|
border-radius: 2px;
|
|
color: hsl(0, 0%, 50%);
|
|
|
|
padding: 0 .25em;
|
|
margin-left: -.25em;
|
|
margin-right: -.25em;
|
|
}
|
|
}
|
|
|
|
&.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.containerBrowse {
|
|
position: absolute;
|
|
|
|
color: #245184;
|
|
|
|
cursor: pointer;
|
|
|
|
top: 0;
|
|
right: .5em;
|
|
|
|
padding: 1em .5em .5em;
|
|
border-radius: 3px;
|
|
|
|
background-color: #28292bcc;
|
|
@include transition($button_hover_animation_time ease-in-out);
|
|
|
|
&:hover {
|
|
background-color: #28292b;
|
|
color: #b6c4d6;
|
|
}
|
|
|
|
a[href]:visited {
|
|
color: inherit;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media all and (max-width: 40em) {
|
|
.container .logo {
|
|
display: none !important;
|
|
}
|
|
|
|
.container .text {
|
|
.subtitleShort {
|
|
display: block !important;
|
|
}
|
|
|
|
.subtitleLong {
|
|
display: none !important;;
|
|
}
|
|
|
|
p br {
|
|
display: none;
|
|
}
|
|
}
|
|
} |