Skip to content

Commit

Permalink
chore: styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@o-az
o-az committed Sep 10, 2024
1 parent 46fe16e commit 0a2e25f
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 285 deletions.
291 changes: 7 additions & 284 deletions docs/src/components/Terminal.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ interface Props {}
loading...
</textarea>
<div
class="terminal-container px-3 bg-[rgb(22_24_29)] border border-solid border-[#221e2b] rounded-md"
class="terminal-container px-3 bg-[rgb(22_24_29)] border border-solid border-[#221e2b] rounded-md my-0"
>
<article id="terminal" data-terminal="" class="" class="size-full bg-[rgb(22_24_29)]"></article>
</div>
Expand Down Expand Up @@ -192,20 +192,20 @@ interface Props {}
const terminalElement = document.querySelector('article#terminal')
</script>

<style>
<style is:inline>
.sl-markdown-content {
margin-top: 0.3rem;
}
.xterm {
--at-apply: h-full;
/* --at-apply: p-3; */
--at-apply: p-3;
}

.xterm .xterm-viewport {
--at-apply: transition-theme;
}

canvas {
margin: auto !important;
margin-top: 0 !important;
}

.xterm,
canvas,
.composition-view,
Expand All @@ -221,18 +221,15 @@ interface Props {}
/* border: var(--ec-brdWd) solid var(--ec-brdCol); */
border-radius: calc(var(--ec-brdRad) + var(--ec-brdWd));
}

iframe,
textarea {
border-radius: 3px;
}

iframe {
height: 20rem;
width: 100%;
border: solid 2px #ccc;
}

textarea {
width: 100%;
resize: none;
Expand All @@ -246,15 +243,13 @@ interface Props {}
JetBrains Mono,
monospace;
}

.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
height: 100%;
width: 100%;
}

.wc {
-webkit-text-fill-color: #0000;
background-clip: text;
Expand All @@ -265,276 +260,4 @@ interface Props {}
color: #69f5ff;
text-decoration: underline;
}

/* xterm demo */

#terminal-container {
height: 60%;
margin: 0 auto;
/* padding: 2px; */
}

p {
font-size: 0.9em;
font-style: italic;
}

#option-container {
display: flex;
justify-content: center;
}

.option-group {
display: inline-block;
padding-left: 20px;
vertical-align: top;
}

pre {
display: block;
padding: 9.5px;
font-size: 13px;
color: #c7254e;
background-color: #f9f2f4;
word-break: break-all;
word-wrap: break-word;
white-space: pre-wrap;
}

#container {
display: flex;
}
.grid {
flex: 1;
/* max-height: 80vh;
overflow-y: auto; */
width: 100%;
min-width: 100px;
}
div:first-of-type.grid {
flex: 2;
height: 60vh;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}

/* Style the tab content */
.tabContent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

#texture-atlas-zoom:checked + label + #texture-atlas canvas {
/* Zoom atlas to the width of the container*/
width: 100% !important;
height: auto !important;
}
#texture-atlas {
width: 100%;
}
#texture-atlas canvas {
image-rendering: pixelated;
border: 1px solid #ccc;
}

.vt-button * {
margin-right: 1em;
}
input#opt-cols_rows {
width: 6em;
}
/** CM */
:root {
--cm-backgroundColor: var(
--tk-elements-editor-backgroundColor,
var(--tk-elements-app-backgroundColor)
);
--cm-textColor: var(--tk-elements-editor-textColor, var(--tk-text-primary));

/* Gutter */
--cm-gutter-backgroundColor: var(
--tk-elements-editor-gutter-backgroundColor,
var(--cm-backgroundColor)
);
--cm-gutter-textColor: var(--tk-elements-editor-gutter-textColor, var(--tk-text-secondary));
--cm-gutter-activeLineTextColor: var(
--tk-elements-editor-gutter-activeLineTextColor,
var(--cm-gutter-textColor)
);

/* Fold Gutter */
--cm-foldGutter-textColor: var(
--tk-elements-editor-foldGutter-textColor,
var(--cm-gutter-textColor)
);
--cm-foldGutter-textColorHover: var(
--tk-elements-editor-foldGutter-textColorHover,
var(--cm-gutter-textColor)
);

/* Active Line */
--cm-activeLineBackgroundColor: var(
--tk-elements-editor-activeLineBackgroundColor,
rgb(224 231 235 / 30%)
);

/* Cursor */
--cm-cursor-width: 2px;
--cm-cursor-backgroundColor: var(--tk-elements-editor-cursorColor, var(--tk-text-primary));

/* Matching Brackets */
--cm-matching-bracket: var(
--tk-elements-editor-matchingBracketBackgroundColor,
rgb(50 140 130 / 0.3)
);

/* Selection */
--cm-selection-backgroundColorFocused: var(
--tk-elements-editor-selection-backgroundColor,
#42b4ff
);
--cm-selection-backgroundOpacityFocused: var(
--tk-elements-editor-selection-backgroundOpacity,
0.3
);
--cm-selection-backgroundColorBlured: var(
--tk-elements-editor-selection-inactiveBackgroundColor,
#c9e9ff
);
--cm-selection-backgroundOpacityBlured: var(
--tk-elements-editor-selection-inactiveBackgroundOpacity,
0.3
);

/* Panels */
--cm-panels-borderColor: var(
--tk-elements-editor-panels-borderColor,
var(--tk-elements-app-borderColor)
);

/* Search */
--cm-search-backgroundColor: var(
--tk-elements-editor-search-backgroundColor,
var(--cm-backgroundColor)
);
--cm-search-textColor: var(
--tk-elements-editor-search-textColor,
var(--tk-elements-app-textColor)
);
--cm-search-closeButton-backgroundColor: var(
--tk-elements-editor-search-closeButton-backgroundColor,
transparent
);
--cm-search-closeButton-backgroundColorHover: var(
--tk-elements-editor-search-closeButton-backgroundColorHover,
var(--tk-background-secondary)
);
--cm-search-closeButton-textColor: var(
--tk-elements-editor-search-closeButton-textColor,
var(--tk-text-secondary)
);
--cm-search-closeButton-textColorHover: var(
--tk-elements-editor-search-closeButton-textColorHover,
var(--tk-text-primary)
);
--cm-search-button-backgroundColor: var(
--tk-elements-editor-search-button-backgroundColor,
var(--tk-background-secondary)
);
--cm-search-button-backgroundColorHover: var(
--tk-elements-editor-search-button-backgroundColorHover,
var(--tk-background-active)
);
--cm-search-button-textColor: var(
--tk-elements-editor-search-button-textColor,
var(--tk-text-secondary)
);
--cm-search-button-textColorHover: var(
--tk-elements-editor-search-button-textColorHover,
var(--tk-text-primary)
);
--cm-search-button-borderColor: var(
--tk-elements-editor-search-button-borderColor,
transparent
);
--cm-search-button-borderColorHover: var(
--tk-elements-editor-search-button-borderColorHover,
var(--cm-search-button-borderColor)
);
--cm-search-button-borderColorFocused: var(
--tk-elements-editor-search-button-borderColorFocused,
var(--tk-border-accent)
);
--cm-search-input-backgroundColor: var(
--tk-elements-editor-search-input-backgroundColor,
var(--tk-background-primary)
);
--cm-search-input-borderColor: var(
--tk-elements-editor-search-input-borderColor,
var(--tk-elements-app-borderColor)
);
--cm-search-input-borderColorFocused: var(
--tk-elements-editor-search-input-borderColorFocused,
var(--tk-border-accent)
);

/* Tooltip */
--cm-tooltip-backgroundColor: var(
--tk-elements-editor-tooltip-backgroundColor,
var(--tk-elements-app-backgroundColor)
);
--cm-tooltip-textColor: var(--tk-elements-editor-tooltip-textColor, var(--tk-text-primary));
--cm-tooltip-backgroundColorSelected: var(
--tk-elements-editor-tooltip-backgroundColorSelected,
var(--tk-background-accent)
);
--cm-tooltip-textColorSelected: var(
--tk-elements-editor-tooltip-textColorSelected,
var(--tk-text-primary)
);
--cm-tooltip-borderColor: var(
--tk-elements-editor-tooltip-borderColor,
var(--tk-elements-app-borderColor)
);
}

html[data-theme='light'] {
--tk-elements-editor-gutter-textColor: #237893;
--tk-elements-editor-gutter-activeLineTextColor: var(--tk-text-primary);
--tk-elements-editor-foldGutter-textColorHover: var(--tk-text-primary);
}

html[data-theme='dark'] {
--tk-elements-editor-gutter-activeLineTextColor: var(--tk-text-primary);
--tk-elements-editor-selection-backgroundOpacityBlured: 0.1;
--tk-elements-editor-activeLineBackgroundColor: rgb(50 53 63 / 50%);
--tk-elements-editor-foldGutter-textColorHover: var(--tk-text-primary);
}
</style>
2 changes: 1 addition & 1 deletion docs/src/content/docs/integrations/api/typescript-sdk.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ sidebar:
variant: default
---
import Code from '#/components/Code.astro'
import Terminal from '#/components/Terminal.astro'
import { PackageManagers } from 'starlight-package-managers'
import { Tabs, TabItem } from '@astrojs/starlight/components'
import Terminal from '#/components/Terminal.astro'

<PackageManagers
frame="none"
Expand Down

0 comments on commit 0a2e25f

Please sign in to comment.