p5.js-web-editor/client/styles/components/_console.scss

138 lines
2.8 KiB
SCSS
Raw Normal View History

.preview-console {
2016-09-14 18:53:25 +02:00
@include themify() {
background: getThemifyVariable('console-background-color');
2016-09-22 00:52:44 +02:00
border-color: getThemifyVariable('ide-border-color');
2016-09-14 18:53:25 +02:00
}
2016-09-22 00:52:44 +02:00
border-left: 1px solid;
border-right: 1px solid;
2016-07-21 06:05:47 +02:00
width: 100%;
2016-08-11 21:41:13 +02:00
height: 100%;
2016-07-21 06:05:47 +02:00
z-index: 1000;
overflow: hidden;
display: flex;
flex-direction: column;
& > {
position:relative;
text-align:left;
}
2016-07-18 02:49:38 +02:00
.preview-console__message {
@include themify() {
color: getThemifyVariable('console-color');
2016-09-14 18:53:25 +02:00
}
flex: 1 0 auto;
position: relative;
2016-07-18 02:49:38 +02:00
}
2016-07-21 06:05:47 +02:00
}
.preview-console__header {
2016-09-14 18:53:25 +02:00
@include themify() {
background-color: getThemifyVariable('console-header-background-color');
color: getThemifyVariable('console-header-color');
2016-09-14 18:53:25 +02:00
}
2016-10-08 23:59:18 +02:00
min-height: #{30 / $base-font-size}rem;
padding: #{5 / $base-font-size}rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.preview-console__header-title {
font-size: #{12 / $base-font-size}rem;
2016-07-21 06:05:47 +02:00
font-weight: normal;
}
.preview-console__icon {
padding-right: #{20 / $base-font-size}rem;
}
2016-07-21 06:05:47 +02:00
.preview-console__messages {
display: flex;
flex-direction: column;
overflow-y: auto;
}
.preview-console__collapse {
padding-top: #{3 / $base-font-size}rem;
@include icon();
@include themify() {
& g,
2020-04-30 00:34:37 +02:00
& polygon,
& path {
fill: getThemifyVariable('secondary-text-color');
}
}
2016-09-13 23:05:42 +02:00
.preview-console--collapsed & {
display: none;
}
}
.preview-console__expand {
padding-top: #{3 / $base-font-size}rem;
@include icon();
@include themify() {
& g,
2020-04-30 00:34:37 +02:00
& polygon,
& path {
fill: getThemifyVariable('secondary-text-color');
}
}
2016-09-13 23:05:42 +02:00
display: none;
.preview-console--collapsed & {
display: inline-block;
}
2016-08-01 03:38:46 +02:00
}
.preview-console__header-buttons {
display: flex;
align-items: center;
}
.preview-console__clear {
@include themify() {
@extend %link;
color: getThemifyVariable('secondary-text-color');
&:hover {
color: getThemifyVariable('heavy-text-color');
}
}
background: transparent;
border: none;
padding-right: #{10 / $base-font-size}rem;
.preview-console--collapsed & {
display: none;
}
}
.preview-console__logged-times {
2018-09-16 08:33:45 +02:00
font-weight: bold;
margin: #{2 / $base-font-size}rem 0 0 #{8 / $base-font-size}rem;
2018-09-17 17:14:00 +02:00
padding: #{1 / $base-font-size}rem #{4 / $base-font-size}rem;
z-index: 100;
left: 0;
position: absolute;
.preview-console__message--info &, .preview-console__message--log & {
@include themify() {
background-color: getThemifyVariable('console-info-background-color');
}
}
.preview-console__message--warn & {
@include themify() {
background-color: getThemifyVariable('console-warn-background-color');
}
}
.preview-console__message--debug & {
@include themify() {
background-color: getThemifyVariable('console-debug-background-color');
}
}
.preview-console__message--error & {
@include themify() {
background-color: getThemifyVariable('console-error-background-color');
}
}
2018-09-16 08:33:45 +02:00
}