oleh/astrolabe
1
0
Fork 0
mirror of https://github.com/olehomelchenko/astrolabe.git synced 2025-12-21 21:22:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

move styles

Browse Source
This commit is contained in:
Oleh Omelchenko
2025-01-19 01:05:41 +02:00
parent 54a25cdd1f
commit 7acda7d10a
2 changed files with 97 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
index.html
View File

@@ -10,104 +10,7 @@
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.47.0/min/vs/loader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsonc-parser@3.2.0/lib/umd/main.js"></script>
<style>
#vis {
width: 100%;
height: 100%;
padding: 1rem;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: grid;
grid-template-columns: var(--snippet-width, 1fr) 5px var(--editor-width, 1fr) 5px var(--preview-width, 2fr);
height: 100vh;
background-color: #e0e0e0;
}
.panel {
background: white;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.panel-header {
padding: 1rem;
border-bottom: 1px solid #e0e0e0;
display: flex;
justify-content: space-between;
align-items: center;
background: #f5f5f5;
}
.resize-handle {
background-color: #e0e0e0;
cursor: col-resize;
transition: background-color 0.2s;
}
.resize-handle:hover,
.resize-handle.active {
background-color: #2196F3;
}
.button {
padding: 0.5rem 1rem;
background: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.button:hover {
background: #45a049;
}
.button:disabled {
background: #cccccc;
cursor: not-allowed;
}
.snippet-list {
padding: 1rem;
flex-grow: 1;
}
.snippet-item {
padding: 0.75rem;
margin: 0.5rem 0;
background: #f5f5f5;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}
.snippet-item:hover {
background: #eeeeee;
}
.snippet-item.active {
background: #e3f2fd;
border-left: 4px solid #2196F3;
}
#monaco-editor {
height: 100%;
flex-grow: 1;
}
.preview-panel>*:not(.panel-header) {
padding: 1rem;
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>

96
styles.css Normal file
View File

@@ -0,0 +1,96 @@
#vis {
width: 100%;
height: 100%;
padding: 1rem;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: grid;
grid-template-columns: var(--snippet-width, 1fr) 5px var(--editor-width, 1fr) 5px var(--preview-width, 2fr);
height: 100vh;
background-color: #e0e0e0;
}
.panel {
background: white;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.panel-header {
padding: 1rem;
border-bottom: 1px solid #e0e0e0;
display: flex;
justify-content: space-between;
align-items: center;
background: #f5f5f5;
}
.resize-handle {
background-color: #e0e0e0;
cursor: col-resize;
transition: background-color 0.2s;
}
.resize-handle:hover,
.resize-handle.active {
background-color: #2196F3;
}
.button {
padding: 0.5rem 1rem;
background: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.button:hover {
background: #45a049;
}
.button:disabled {
background: #cccccc;
cursor: not-allowed;
}
.snippet-list {
padding: 1rem;
flex-grow: 1;
}
.snippet-item {
padding: 0.75rem;
margin: 0.5rem 0;
background: #f5f5f5;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}
.snippet-item:hover {
background: #eeeeee;
}
.snippet-item.active {
background: #e3f2fd;
border-left: 4px solid #2196F3;
}
#monaco-editor {
height: 100%;
flex-grow: 1;
}
.preview-panel>*:not(.panel-header) {
padding: 1rem;
}