add windows CSS and HTML template #5

jcubic · Dec 26, 2021 · 21360bd · 21360bd
1 parent 6ff370e
commit 21360bd
Show file tree

Hide file tree

Showing 2 changed files with 124 additions and 0 deletions.
diff --git a/examples/css/windows.css b/examples/css/windows.css
@@ -0,0 +1,95 @@
+:root {
+    --color: #ccc;
+    --background: black;
+    --link-color: #3377FF;
+    --size: 1.4;
+    /* use --glow: 1; to add glow effect */
+    /* available animations: terminal-bar, terminal-underline */
+    --animation: terminal-underline;
+    --font: monospace;
+    --options: {"enabled": false}; /* JSON config for jQuery Terminal */
+}
+body .shell {
+    width: 600px;
+    height: 300px;
+}
+body .shell .terminal {
+    height: calc(100% - 29px);
+    padding: 10px;
+    --size: 1.1;
+    /*
+     * padding bottom 0 on terminal and margin
+     * on .cmd will be in version 2.0.1
+     * that fixes FireFox issue
+     */
+    padding-bottom: 0;
+}
+body .shell .terminal .cmd {
+    margin-bottom: 10px;
+}
+.shell .typed-cursor, .shell .cursor {
+    background: transparent;
+}
+.shell > .status-bar .title {
+    cursor: move;
+}
+/*
+ * fix to shell.js to center title to free space
+ */
+.shell.windows .status-bar .title {
+    right: 106px;
+}
+@supports (--css: variables) {
+    .shell .terminal {
+        --color: #aaa;
+    }
+    .shell.windows .content.terminal {
+        --background: black;
+        --color: white;
+        --animation: terminal-underline;
+    }
+}
+/*
+ * overwrite shell.js style because shell.js   
+ * selectors are stronger then terminal ones
+ */
+.cmd span.cursor {
+    animation: none;
+    width: auto;
+    background-color: var(--background, #000);
+}
+.shell:not(.light) terminal.content,
+.shell.osx.dark .content,
+.shell.ubuntu:not(.light) .content {
+    background-color: var(--background, #222) !important;
+}
+.shell .terminal.content {
+    font-size: 12px;
+}
+.cmd {
+    background-color: inherit;
+}
+@supports (--css: variables) {
+    .shell .terminal.content {
+        font-size: calc(var(--size, 1) * 12px);
+    }
+}
+/* fix for Firefox */
+.terminal > .resizer, .terminal > .font .resizer {
+    visibility: visible;
+    pointer-events: none;
+}
+.terminal::-webkit-scrollbar-track
+{
+	border: 1px solid var(--color, #aaa);
+	background-color: var(--background);
+}
+.terminal::-webkit-scrollbar
+{
+	width: 10px;
+	background-color: var(--background);
+}
+.terminal::-webkit-scrollbar-thumb
+{
+	background-color: var(--color, #aaa);
+}
diff --git a/examples/html/windows.html b/examples/html/windows.html
@@ -0,0 +1,29 @@
+<link href="https://unpkg.com/shell.js@1.0.5/dist/css/shell.min.css" rel="stylesheet"/>
+<link href="https://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
+<link href="https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css" rel="stylesheet"/>
+<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
+<div class="shell windows shadow">
+    <div class="status-bar">
+        <div class="buttons">
+            <a href="javascript:;" class="close" title="Close">
+                <i class="fa fa-times"></i>
+            </a>
+            <a href="javascript:;" class="minimize" title="Minimize">
+                <i class="fa fa-minus"></i>
+            </a>
+            <a href="javascript:;" class="enlarge" title="Enlarge">
+                <i class="fa fa-plus"></i>
+            </a>
+        </div>
+        <div class="title">cmd.exe</div>
+    </div>
+    <div class="content underline-animation " id="term"></div>
+</div>
+<script>
+$('.shell').resizable({
+    minHeight: 108,
+    minWidth: 250
+}).draggable({
+    handle: '> .status-bar .title'
+});
+</script>