Diff of
/docs/assets/termynal/termynal.css
[000000]
..
[cad161]
Switch to unified view
| a | b/docs/assets/termynal/termynal.css | ||
|---|---|---|---|
| 1 | /** |
||
| 2 | * termynal.js |
||
| 3 | * |
||
| 4 | * @author Ines Montani <ines@ines.io> |
||
| 5 | * @version 0.0.1 |
||
| 6 | * @license MIT |
||
| 7 | * |
||
| 8 | * Modified version from https://github.com/tiangolo/typer |
||
| 9 | */ |
||
| 10 | |||
| 11 | :root { |
||
| 12 | --color-bg: #252a33; |
||
| 13 | --color-text: #eee; |
||
| 14 | --color-text-subtle: #a2a2a2; |
||
| 15 | } |
||
| 16 | |||
| 17 | [data-termynal] { |
||
| 18 | width: auto; |
||
| 19 | max-width: 100%; |
||
| 20 | background: var(--color-bg); |
||
| 21 | color: var(--color-text); |
||
| 22 | font-size: 18px; |
||
| 23 | /* font-family: 'Fira Mono', Consolas, Menlo, Monaco, 'Courier New', Courier, monospace; */ |
||
| 24 | font-family: 'Roboto Mono', 'Fira Mono', Consolas, Menlo, Monaco, 'Courier New', Courier, monospace; |
||
| 25 | border-radius: 4px; |
||
| 26 | padding: 75px 45px 35px; |
||
| 27 | position: relative; |
||
| 28 | -webkit-box-sizing: border-box; |
||
| 29 | box-sizing: border-box; |
||
| 30 | } |
||
| 31 | |||
| 32 | [data-termynal]:before { |
||
| 33 | content: ''; |
||
| 34 | position: absolute; |
||
| 35 | top: 15px; |
||
| 36 | left: 15px; |
||
| 37 | display: inline-block; |
||
| 38 | width: 15px; |
||
| 39 | height: 15px; |
||
| 40 | border-radius: 50%; |
||
| 41 | /* A little hack to display the window buttons in one pseudo element. */ |
||
| 42 | background: #d9515d; |
||
| 43 | -webkit-box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930; |
||
| 44 | box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930; |
||
| 45 | } |
||
| 46 | |||
| 47 | [data-termynal]:after { |
||
| 48 | content: 'bash'; |
||
| 49 | position: absolute; |
||
| 50 | color: var(--color-text-subtle); |
||
| 51 | top: 5px; |
||
| 52 | left: 0; |
||
| 53 | width: 100%; |
||
| 54 | text-align: center; |
||
| 55 | } |
||
| 56 | |||
| 57 | a[data-terminal-control] { |
||
| 58 | text-align: right; |
||
| 59 | display: block; |
||
| 60 | color: #aebbff; |
||
| 61 | } |
||
| 62 | |||
| 63 | [data-terminal-copy] { |
||
| 64 | text-align: right; |
||
| 65 | position: absolute; |
||
| 66 | top: 5px; |
||
| 67 | right: 5px; |
||
| 68 | } |
||
| 69 | |||
| 70 | [data-terminal-copy].md-icon { |
||
| 71 | color: #aebbff; |
||
| 72 | } |
||
| 73 | |||
| 74 | [data-ty] { |
||
| 75 | display: block; |
||
| 76 | line-height: 2; |
||
| 77 | } |
||
| 78 | |||
| 79 | [data-ty]:before { |
||
| 80 | /* Set up defaults and ensure empty lines are displayed. */ |
||
| 81 | content: ''; |
||
| 82 | display: inline-block; |
||
| 83 | vertical-align: middle; |
||
| 84 | } |
||
| 85 | |||
| 86 | [data-ty="input"]:before, |
||
| 87 | [data-ty-prompt]:before { |
||
| 88 | margin-right: 0.75em; |
||
| 89 | color: var(--color-text-subtle); |
||
| 90 | } |
||
| 91 | |||
| 92 | [data-ty="input"]:before { |
||
| 93 | content: '$'; |
||
| 94 | } |
||
| 95 | |||
| 96 | [data-ty][data-ty-prompt]:before { |
||
| 97 | content: attr(data-ty-prompt); |
||
| 98 | } |
||
| 99 | |||
| 100 | [data-ty-cursor]:after { |
||
| 101 | content: attr(data-ty-cursor); |
||
| 102 | font-family: monospace; |
||
| 103 | margin-left: 0.5em; |
||
| 104 | -webkit-animation: blink 1s infinite; |
||
| 105 | animation: blink 1s infinite; |
||
| 106 | } |
||
| 107 | |||
| 108 | |||
| 109 | /* Cursor animation */ |
||
| 110 | |||
| 111 | @-webkit-keyframes blink { |
||
| 112 | 50% { |
||
| 113 | opacity: 0; |
||
| 114 | } |
||
| 115 | } |
||
| 116 | |||
| 117 | @keyframes blink { |
||
| 118 | 50% { |
||
| 119 | opacity: 0; |
||
| 120 | } |
||
| 121 | } |
||
| 122 | |||
| 123 | /* tooltip */ |
||
| 124 | |||
| 125 | [data-md-state="open"] { |
||
| 126 | transform: translateY(0); |
||
| 127 | opacity: 1; |
||
| 128 | transition: |
||
| 129 | transform 400ms cubic-bezier(0.075, 0.85, 0.175, 1), |
||
| 130 | opacity 400ms; |
||
| 131 | pointer-events: initial; |
||
| 132 | } |