Project refactored to use NPM package manager, jquery and created new features
This commit is contained in:
vinicius.reif
22
src/components/button.scss
Normal file
22
src/components/button.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
@import '../mixins.scss';
|
||||
|
||||
.tui-button {
|
||||
display: inline-block;
|
||||
outline:0;
|
||||
padding: 1px 10px;
|
||||
background-color: rgb(0, 168, 0);
|
||||
color: black;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
box-shadow: 10px 10px black;
|
||||
@include disable-select;
|
||||
}
|
||||
.tui-button:active {
|
||||
background-color: rgb(0, 168, 168)!important;
|
||||
color: black!important;
|
||||
box-shadow: none!important;
|
||||
}
|
||||
.tui-button:focus {
|
||||
color: rgb(0, 255, 255)!important;
|
||||
}
|
||||
33
src/components/checkbox.scss
Normal file
33
src/components/checkbox.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
@import '../variables.scss';
|
||||
@import '../mixins.scss';
|
||||
|
||||
.tui-checkbox {
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
padding-left: 30px;
|
||||
@include disable-select;
|
||||
}
|
||||
.tui-checkbox input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.tui-checkbox span {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
cursor: pointer;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.tui-checkbox input:checked ~ span::after {
|
||||
content: $checkbox-on;
|
||||
color: rgb(0, 255, 255);
|
||||
}
|
||||
.tui-checkbox input:not(checked) ~ span::after {
|
||||
content: $checkbox-off;
|
||||
}
|
||||
5
src/components/date.scss
Normal file
5
src/components/date.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
.tui-date {
|
||||
padding: 1px 0px 1px 0px;
|
||||
margin-right: 10px;
|
||||
float:right;
|
||||
}
|
||||
8
src/components/divider.scss
Normal file
8
src/components/divider.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
.tui-divider {
|
||||
border-bottom: 2px solid rgb(255, 255, 255);
|
||||
display: block;
|
||||
}
|
||||
.tui-black-divider {
|
||||
border-bottom: 2px solid rgb(0, 0, 0);
|
||||
display: block;
|
||||
}
|
||||
26
src/components/dropdown.scss
Normal file
26
src/components/dropdown.scss
Normal file
@@ -0,0 +1,26 @@
|
||||
@import '../mixins.scss';
|
||||
|
||||
.tui-dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
@include disable-select;
|
||||
}
|
||||
.tui-dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: rgb(168, 168, 168);
|
||||
min-width: 200px;
|
||||
padding: 6px;
|
||||
z-index: 9;
|
||||
}
|
||||
.tui-dropdown-content ul {
|
||||
border: 2px black solid;
|
||||
}
|
||||
.tui-dropdown-content ul li {
|
||||
display: block!important;
|
||||
margin: 6px;
|
||||
}
|
||||
.tui-dropdown:hover > .tui-dropdown-content:first-of-type {
|
||||
display: block;
|
||||
}
|
||||
65
src/components/fieldset.scss
Normal file
65
src/components/fieldset.scss
Normal file
@@ -0,0 +1,65 @@
|
||||
.tui-window-fieldset {
|
||||
border: 6px white double;
|
||||
padding: 10px;
|
||||
background-color: inherit;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.tui-window-fieldset-no-legend {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.tui-input-fieldset {
|
||||
border-top: 6px white double;
|
||||
border-bottom: 6px white double;
|
||||
border-left: 2px white solid;
|
||||
border-right: 2px white solid;
|
||||
padding: 5px;
|
||||
background-color: inherit;
|
||||
}
|
||||
.tui-input-fieldset:hover {
|
||||
border-color: yellow!important;
|
||||
}
|
||||
.tui-input-fieldset:hover legend {
|
||||
color: yellow!important;
|
||||
}
|
||||
.tui-border-solid {
|
||||
border: 2px white solid;
|
||||
}
|
||||
.tui-fieldset-button {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 16px;
|
||||
color: white;
|
||||
background-color: inherit;
|
||||
z-index: 2;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
outline:0;
|
||||
padding: 2px;
|
||||
}
|
||||
.tui-fieldset-statusbar {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 16px;
|
||||
color: white;
|
||||
background-color: inherit;
|
||||
z-index: 2;
|
||||
padding: 2px;
|
||||
|
||||
&.right {
|
||||
left: initial;
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
.tui-fieldset-button-left {
|
||||
left: 16px!important;
|
||||
right: initial;
|
||||
}
|
||||
.tui-fieldset-button::before {
|
||||
content: "[";
|
||||
}
|
||||
.tui-fieldset-button::after {
|
||||
content: "]";
|
||||
}
|
||||
.tui-fieldset-button:active {
|
||||
color: rgb(0, 255, 255)!important;
|
||||
}
|
||||
158
src/components/grid.scss
Normal file
158
src/components/grid.scss
Normal file
@@ -0,0 +1,158 @@
|
||||
@import '../variables.scss';
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: 1280px;
|
||||
width: 90%;
|
||||
}
|
||||
@media #{$medium-and-up} {
|
||||
.container {
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
@media #{$large-and-up} {
|
||||
.container {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
.col .row {
|
||||
margin-left: (-1 * $gutter-width / 2);
|
||||
margin-right: (-1 * $gutter-width / 2);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
&.no-pad {
|
||||
padding: 0;
|
||||
}
|
||||
&.no-pad-bot {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
&.no-pad-top {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Mixins to eliminate code repitition
|
||||
@mixin reset-offset {
|
||||
margin-left: auto;
|
||||
left: auto;
|
||||
right: auto;
|
||||
}
|
||||
@mixin grid-classes($size, $i, $perc) {
|
||||
&.offset-#{$size}#{$i} {
|
||||
margin-left: $perc;
|
||||
}
|
||||
&.pull-#{$size}#{$i} {
|
||||
right: $perc;
|
||||
}
|
||||
&.push-#{$size}#{$i} {
|
||||
left: $perc;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.row {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 20px;
|
||||
|
||||
// Clear floating children
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.col {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
padding: 0 $gutter-width / 2;
|
||||
min-height: 1px;
|
||||
|
||||
&[class*="push-"],
|
||||
&[class*="pull-"] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
$i: 1;
|
||||
@while $i <= $num-cols {
|
||||
$perc: unquote((100 / ($num-cols / $i)) + "%");
|
||||
&.s#{$i} {
|
||||
width: $perc;
|
||||
@include reset-offset;
|
||||
}
|
||||
$i: $i + 1;
|
||||
}
|
||||
|
||||
$i: 1;
|
||||
@while $i <= $num-cols {
|
||||
$perc: unquote((100 / ($num-cols / $i)) + "%");
|
||||
@include grid-classes("s", $i, $perc);
|
||||
$i: $i + 1;
|
||||
}
|
||||
|
||||
@media #{$medium-and-up} {
|
||||
|
||||
$i: 1;
|
||||
@while $i <= $num-cols {
|
||||
$perc: unquote((100 / ($num-cols / $i)) + "%");
|
||||
&.m#{$i} {
|
||||
width: $perc;
|
||||
@include reset-offset;
|
||||
}
|
||||
$i: $i + 1
|
||||
}
|
||||
|
||||
$i: 1;
|
||||
@while $i <= $num-cols {
|
||||
$perc: unquote((100 / ($num-cols / $i)) + "%");
|
||||
@include grid-classes("m", $i, $perc);
|
||||
$i: $i + 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$large-and-up} {
|
||||
|
||||
$i: 1;
|
||||
@while $i <= $num-cols {
|
||||
$perc: unquote((100 / ($num-cols / $i)) + "%");
|
||||
&.l#{$i} {
|
||||
width: $perc;
|
||||
@include reset-offset;
|
||||
}
|
||||
$i: $i + 1;
|
||||
}
|
||||
|
||||
$i: 1;
|
||||
@while $i <= $num-cols {
|
||||
$perc: unquote((100 / ($num-cols / $i)) + "%");
|
||||
@include grid-classes("l", $i, $perc);
|
||||
$i: $i + 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$extra-large-and-up} {
|
||||
|
||||
$i: 1;
|
||||
@while $i <= $num-cols {
|
||||
$perc: unquote((100 / ($num-cols / $i)) + "%");
|
||||
&.xl#{$i} {
|
||||
width: $perc;
|
||||
@include reset-offset;
|
||||
}
|
||||
$i: $i + 1;
|
||||
}
|
||||
|
||||
$i: 1;
|
||||
@while $i <= $num-cols {
|
||||
$perc: unquote((100 / ($num-cols / $i)) + "%");
|
||||
@include grid-classes("xl", $i, $perc);
|
||||
$i: $i + 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
11
src/components/input.scss
Normal file
11
src/components/input.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
.tui-input {
|
||||
background-color: rgb(0, 0, 0);
|
||||
color: white;
|
||||
outline:0;
|
||||
border: none;
|
||||
padding: 1px;
|
||||
}
|
||||
.tui-input:focus {
|
||||
background-color: rgb(255, 255, 0)!important;
|
||||
color: black!important;
|
||||
}
|
||||
24
src/components/navbar.scss
Normal file
24
src/components/navbar.scss
Normal file
@@ -0,0 +1,24 @@
|
||||
@import '../mixins.scss';
|
||||
|
||||
.tui-nav {
|
||||
width: 100%;
|
||||
background-color: rgb(168, 168, 168);
|
||||
padding: 0px 2px;
|
||||
z-index: 9;
|
||||
display: block;
|
||||
}
|
||||
.tui-nav-fixed {
|
||||
position: fixed;
|
||||
}
|
||||
.tui-nav ul li {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
padding: 1px 3px;
|
||||
}
|
||||
.tui-nav ul li a {
|
||||
display: block;
|
||||
@include disable-select;
|
||||
}
|
||||
.tui-nav ul li:hover {
|
||||
background-color: rgb(0, 168, 0);
|
||||
}
|
||||
17
src/components/panel.scss
Normal file
17
src/components/panel.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
.tui-panel {
|
||||
background-color: rgb(0, 0, 168);
|
||||
display: inline-block;
|
||||
color: white;
|
||||
box-shadow: 10px 10px black;
|
||||
}
|
||||
|
||||
.tui-panel-content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.tui-panel-header {
|
||||
padding-top: 2px;
|
||||
display: block;
|
||||
background: white;
|
||||
text-align: center;
|
||||
}
|
||||
30
src/components/progressbar.scss
Normal file
30
src/components/progressbar.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
.tui-progress {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 16px;
|
||||
width: 200px;
|
||||
background-color: rgb(0, 168, 168);
|
||||
overflow: hidden;
|
||||
}
|
||||
.tui-progress span {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
background-color: rgb(0, 255, 255);
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
.tui-progress .tui-indeterminate {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
background-color: rgb(0, 255, 255);
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
display: inline-block;
|
||||
animation: indeterminate 1s backwards;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
@keyframes indeterminate {
|
||||
from {margin-left: -10%; }
|
||||
to {margin-left: 100%}
|
||||
}
|
||||
33
src/components/radio.scss
Normal file
33
src/components/radio.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
@import '../variables.scss';
|
||||
@import '../mixins.scss';
|
||||
|
||||
.tui-radio {
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
padding-left: 30px;
|
||||
@include disable-select;
|
||||
}
|
||||
.tui-radio input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.tui-radio span {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
cursor: pointer;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.tui-radio input:checked ~ span:after {
|
||||
content: $radio-on;
|
||||
color: rgb(0, 255, 255)!important;
|
||||
}
|
||||
.tui-radio input:not(checked) ~ span:after {
|
||||
content: $radio-off;
|
||||
}
|
||||
21
src/components/screen.scss
Normal file
21
src/components/screen.scss
Normal file
@@ -0,0 +1,21 @@
|
||||
.tui-screen-640-360 {
|
||||
width: 640px;
|
||||
height: 360px;
|
||||
}
|
||||
.tui-screen-800-600 {
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
}
|
||||
.tui-screen-1024-768 {
|
||||
width: 1024px;
|
||||
height: 768px;
|
||||
}
|
||||
|
||||
.tui-screen-640-360,
|
||||
.tui-screen-800-600,
|
||||
.tui-screen-1024-768 {
|
||||
position: relative;
|
||||
&.bordered{
|
||||
border: 2px solid black;
|
||||
}
|
||||
}
|
||||
13
src/components/scrollbar.scss
Normal file
13
src/components/scrollbar.scss
Normal file
@@ -0,0 +1,13 @@
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background-image: url("images/scroll.png");
|
||||
background-repeat: repeat;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(0, 168, 168);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgb(0, 168, 168);
|
||||
}
|
||||
41
src/components/sidenav.scss
Normal file
41
src/components/sidenav.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
@import '../mixins.scss';
|
||||
|
||||
.tui-sidenav {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background-color: rgb(0, 168, 168);
|
||||
min-width: 200px;
|
||||
box-shadow: 10px 10px black!important;
|
||||
padding: 6px;
|
||||
z-index: 10;
|
||||
height: 100%;
|
||||
z-index: 8;
|
||||
display: none;
|
||||
&.right {
|
||||
left: initial;
|
||||
right: 0px;
|
||||
}
|
||||
&.active {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
.tui-sidenav ul {
|
||||
margin-top: 20px;
|
||||
border: 2px black solid;
|
||||
}
|
||||
.tui-sidenav ul li {
|
||||
display: block;
|
||||
margin: 6px;
|
||||
}
|
||||
.tui-sidenav ul li a {
|
||||
display: block;
|
||||
@include disable-select;
|
||||
}
|
||||
.tui-sidenav ul li:hover {
|
||||
background-color: rgb(255, 255, 0);
|
||||
}
|
||||
.tui-sidenav-button {
|
||||
cursor: pointer;
|
||||
@include disable-select;
|
||||
}
|
||||
28
src/components/statusbar.scss
Normal file
28
src/components/statusbar.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
@import '../mixins.scss';
|
||||
|
||||
.tui-statusbar {
|
||||
width: 100%;
|
||||
background-color: rgb(168, 168, 168);
|
||||
padding: 0px 1px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 9;
|
||||
position: fixed;
|
||||
}
|
||||
.tui-statusbar ul li {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
padding: 2px 3px;
|
||||
}
|
||||
.tui-statusbar ul li:active {
|
||||
background-color: rgb(0, 0, 168);
|
||||
color: white;
|
||||
}
|
||||
.tui-statusbar ul li a {
|
||||
@include disable-select;
|
||||
}
|
||||
.tui-statusbar-divider {
|
||||
border-right: 2px black solid;
|
||||
display: inline;
|
||||
margin: 0px 3px;
|
||||
}
|
||||
22
src/components/table.scss
Normal file
22
src/components/table.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
.tui-table {
|
||||
border: 2px solid rgb(168, 168, 168);
|
||||
padding: 5px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.tui-table-hover tbody tr:hover {
|
||||
background-color: rgb(0, 255, 255);
|
||||
color: black;
|
||||
}
|
||||
.tui-table tbody {
|
||||
background-color: inherit;
|
||||
color: white;
|
||||
}
|
||||
.tui-table tbody tr td {
|
||||
border-right: 2px solid rgb(168, 168, 168);
|
||||
padding: 0px 2px;
|
||||
}
|
||||
.tui-table thead {
|
||||
background-color: inherit;
|
||||
color: rgb(255, 255, 0);
|
||||
text-align: center;
|
||||
}
|
||||
13
src/components/tablegrid.scss
Normal file
13
src/components/tablegrid.scss
Normal file
@@ -0,0 +1,13 @@
|
||||
.tui-table-grid {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tui-table-grid thead tr td,
|
||||
.tui-table-grid tbody tr td,
|
||||
.tui-table-grid thead tr th,
|
||||
.tui-table-grid tbody tr th {
|
||||
border: 2px solid black;
|
||||
padding: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
26
src/components/tabs.scss
Normal file
26
src/components/tabs.scss
Normal file
@@ -0,0 +1,26 @@
|
||||
@import '../mixins.scss';
|
||||
|
||||
.tui-tabs {
|
||||
background-color: rgb(0, 0, 168);
|
||||
width: 100%;
|
||||
padding: 0px 10px 0px 10px;
|
||||
}
|
||||
.tui-tabs ul li {
|
||||
display: inline-block;
|
||||
}
|
||||
.tui-tabs ul li a {
|
||||
display: block;
|
||||
@include disable-select;
|
||||
}
|
||||
.tui-tab {
|
||||
padding: 2px 10px 0px 10px;
|
||||
color: rgb(168, 168, 168);
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
background-color: rgb(168, 168, 168);
|
||||
color: rgb(0, 0, 168);
|
||||
}
|
||||
}
|
||||
.tui-tab-content {
|
||||
display: none;
|
||||
}
|
||||
7
src/components/textarea.scss
Normal file
7
src/components/textarea.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
.tui-textarea {
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
padding: 0px;
|
||||
color: rgb(255, 255, 0);
|
||||
outline: none;
|
||||
}
|
||||
8
src/components/window.scss
Normal file
8
src/components/window.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
.tui-window {
|
||||
background-color: rgb(0, 0, 168);
|
||||
padding: 1px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
box-shadow: 10px 10px black;
|
||||
color: white;
|
||||
}
|
||||
BIN
src/fonts/Perfect DOS VGA 437 Win.ttf
Normal file
BIN
src/fonts/Perfect DOS VGA 437 Win.ttf
Normal file
Binary file not shown.
BIN
src/fonts/Perfect DOS VGA 437.ttf
Normal file
BIN
src/fonts/Perfect DOS VGA 437.ttf
Normal file
Binary file not shown.
72
src/fonts/dos437.txt
Normal file
72
src/fonts/dos437.txt
Normal file
@@ -0,0 +1,72 @@
|
||||
/
|
||||
/(_____________ ____
|
||||
\ /______)\ | |
|
||||
:\ | / \:| |:::::::::: : .. . : .. . . :. .
|
||||
\_____| / | \| |______
|
||||
___ / ________ \... . . .
|
||||
\______________ \ | | /.. . . . . .
|
||||
\ |__| /
|
||||
--x--x-----x----\______ |-/_____/-x--x-xx--x-- - -x -- - - -- - - -
|
||||
. . . . . . . . . . . .\____|. . . . . .
|
||||
-------------------------------------------------------------------------------
|
||||
>> perfect dos vga 437 - general information >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
|
||||
-------------------------------------------------------------------------------
|
||||
|
||||
"Perfect DOS VGA 437" and "Perfect DOS VGA 437 Win" are truetype fonts
|
||||
designed to emulate the MS-DOS/Text mode standard font, used on VGA monitors,
|
||||
with the 437 Codepage (standard US/International). This is a "bitmap" font,
|
||||
meaning it emulates a bitmap font and can only be used at a given size (8 or
|
||||
multiples of it like 16, 24, 32, etc). It's optimized for Flash too, so it
|
||||
won't produce antialias if used at round positions.
|
||||
|
||||
There are two fonts available. "Perfect DOS VGA 437" uses the original DOS
|
||||
codepage 437. It should be used, for example, if you're opening DOS ASCII
|
||||
files on notepad or another windows-based editor. Since it's faithful to the
|
||||
original DOS codes, it won't accent correctly in windows ("<22>" would produce
|
||||
something different, not an "e" with an acute).
|
||||
|
||||
There's also "Perfect DOS VGA 437 Win" which is the exactly same font adapted
|
||||
to a windows codepage. This should use accented characters correctly but won't
|
||||
work if you're opening a DOS-based text file.
|
||||
|
||||
UPDATE: this is a new version, updated in august/2008. It has fixed leading
|
||||
metrics for Mac systems.
|
||||
|
||||
-------------------------------------------------------------------------------
|
||||
>> perfect dos vga 437 - creation process >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
|
||||
-------------------------------------------------------------------------------
|
||||
|
||||
This font was created to be used on a Flash-based ANSi viewer I'm working. To
|
||||
create it, I created a small Quick Basic program to write all characters on
|
||||
screen,
|
||||
|
||||
CLS
|
||||
FOR l = 0 TO 255
|
||||
charWrite 1 + (l MOD 20), 1 + (l \ 20) * 6 + (l MOD 2), LTRIM$(RTRIM$(STR$(l))) + CHR$(l)
|
||||
NEXT
|
||||
SUB charWrite (lin, col, char$)
|
||||
DEF SEG = &HB800
|
||||
FOR i = 1 TO LEN(char$)
|
||||
POKE ((lin - 1) * 160) + ((col - 2 + i) * 2), ASC(MID$(char$, i, 1))
|
||||
IF (i = LEN(char$)) THEN POKE ((lin - 1) * 160) + ((col - 2 + i) * 2) + 1, 113
|
||||
NEXT
|
||||
END SUB
|
||||
|
||||
Then captured the text screen using SCREEN THIEF (a very, very old screen
|
||||
capture TSR program which converts text screens to images accurately). I then
|
||||
recreated the font polygon by polygon on Fontlab, while looking at the image
|
||||
on Photoshop. No conversion took place.
|
||||
|
||||
-------------------------------------------------------------------------------
|
||||
>> author >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
|
||||
-------------------------------------------------------------------------------
|
||||
|
||||
zeh fernando remembers the old days. SMASH DAH FUCKING ENTAH.
|
||||
|
||||
http://www.fatorcaos.com.br
|
||||
|
||||
rorshack ^ maiden brazil
|
||||
|
||||
-------------------------------------------------------------------------------
|
||||
^zehPULLSdahTRICK^kudosOUTtoWHOkeepsITreal^smashDAHfuckingENTAH!!!^lowres4ever^
|
||||
-------------------------------------------------------------------------------
|
||||
BIN
src/images/bg-black.png
Normal file
BIN
src/images/bg-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 B |
BIN
src/images/bg.png
Normal file
BIN
src/images/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
BIN
src/images/scroll.png
Normal file
BIN
src/images/scroll.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
61
src/js/tuicss.js
Normal file
61
src/js/tuicss.js
Normal file
@@ -0,0 +1,61 @@
|
||||
/**
|
||||
* Init
|
||||
*/
|
||||
$(document).ready(function() {
|
||||
tabsController();
|
||||
dateController();
|
||||
sidenavController();
|
||||
});
|
||||
|
||||
/**
|
||||
* TuiTabs controller
|
||||
*/
|
||||
function tabsController() {
|
||||
$(".tui-tab").click(function(event) {
|
||||
$(".tui-tab-content").hide();
|
||||
let tabContentid = $(this).attr('data-tab-content');
|
||||
$(`#${tabContentid}`).show();
|
||||
$(".tui-tab").removeClass("active");
|
||||
$(this).addClass("active");
|
||||
});
|
||||
$('.tui-tab.active').click();
|
||||
}
|
||||
|
||||
function dateController() {
|
||||
let interval = setInterval(function () {
|
||||
let today = new Date();
|
||||
let clock = $(".tui-date");
|
||||
if(!clock.length) {
|
||||
clearInterval(interval);
|
||||
return;
|
||||
}
|
||||
let format = clock.attr("data-format");
|
||||
|
||||
let month = (today.getMonth() + "").length == 2 ? today.getMonth() + 1 : "0" + (today.getMonth() + 1);
|
||||
let day = (today.getDay() + "").length == 2 ? today.getDay() + 1 : "0" + (today.getDay() + 1);
|
||||
let year = today.getFullYear();
|
||||
let hour = (today.getHours() + "").length == 2 ? today.getHours() : "0" + today.getHours();
|
||||
let minute = (today.getMinutes() + "").length == 2 ? today.getMinutes() : "0" + today.getMinutes();
|
||||
let second = (today.getSeconds() + "").length == 2 ? today.getSeconds() : "0" + today.getSeconds();
|
||||
|
||||
format = format.replace("M", month);
|
||||
format = format.replace("d", day);
|
||||
format = format.replace("y", year);
|
||||
format = format.replace("h", hour);
|
||||
format = format.replace("m", minute);
|
||||
format = format.replace("s", second);
|
||||
|
||||
clock.html(format);
|
||||
});
|
||||
}
|
||||
|
||||
function sidenavController() {
|
||||
$(".tui-sidenav-button").click(function() {
|
||||
let sidenav = $(".tui-sidenav");
|
||||
if(sidenav.hasClass("active")) {
|
||||
$(".tui-sidenav").removeClass("active");
|
||||
} else {
|
||||
$(".tui-sidenav").addClass("active");
|
||||
}
|
||||
});
|
||||
}
|
||||
7
src/mixins.scss
Normal file
7
src/mixins.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
@mixin disable-select {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
349
src/plugins/normalizer.scss
Normal file
349
src/plugins/normalizer.scss
Normal file
@@ -0,0 +1,349 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
169
src/styles/colors.scss
Normal file
169
src/styles/colors.scss
Normal file
@@ -0,0 +1,169 @@
|
||||
@import '../variables.scss';
|
||||
|
||||
/* Theme */
|
||||
.primary { background-color: $primary }
|
||||
.primary-text { color: $primary }
|
||||
.primary-border { border-color: $primary }
|
||||
.primary-hover:hover { background-color: $primary }
|
||||
.primary-text-hover:hover { color: $primary }
|
||||
.primary-border-hover:hover { border-color: $primary }
|
||||
|
||||
.secondary { background-color: $secondary }
|
||||
.secondary-text { color: $secondary }
|
||||
.secondary-border { border-color: $secondary }
|
||||
.secondary-hover:hover { background-color: $secondary }
|
||||
.secondary-text-hover:hover { color: $secondary }
|
||||
.secondary-border-hover:hover { border-color: $secondary }
|
||||
|
||||
.success { background-color: $success }
|
||||
.success-text { color: $success }
|
||||
.success-border { border-color: $success }
|
||||
.success-hover:hover { background-color: $success }
|
||||
.success-text-hover:hover { color: $success }
|
||||
.success-border-hover:hover { border-color: $success }
|
||||
|
||||
.danger { background-color: $danger }
|
||||
.danger-text { color: $danger }
|
||||
.danger-border { border-color: $danger }
|
||||
.danger-hover:hover { background-color: $danger }
|
||||
.danger-text-hover:hover { color: $danger }
|
||||
.danger-border-hover:hover { border-color: $danger }
|
||||
|
||||
.warning { background-color: $warning }
|
||||
.warning-text { color: $warning }
|
||||
.warning-border { border-color: $warning }
|
||||
.warning-hover:hover { background-color: $warning }
|
||||
.warning-text-hover:hover { color: $warning }
|
||||
.warning-border-hover:hover { border-color: $warning }
|
||||
|
||||
.info { background-color: $info }
|
||||
.info-text { color: $info }
|
||||
.info-border { border-color: $info }
|
||||
.info-hover:hover { background-color: $info }
|
||||
.info-text-hover:hover { color: $info }
|
||||
.info-border-hover:hover { border-color: $info }
|
||||
|
||||
/* 168 */
|
||||
.black-168 {background-color: rgb(0, 0, 0)!important}
|
||||
.blue-168 {background-color: rgb(0, 0, 168)!important}
|
||||
.green-168 {background-color: rgb(0, 168, 0)!important}
|
||||
.cyan-168 {background-color: rgb(0, 168, 168)!important}
|
||||
.red-168 {background-color: rgb(168, 0, 0)!important}
|
||||
.purple-168 {background-color: rgb(168, 0, 168)!important}
|
||||
.yellow-168 {background-color: rgb(168, 168, 0)!important}
|
||||
.white-168 {background-color: rgb(168, 168, 168)!important}
|
||||
|
||||
.black-168-text {color: rgb(0, 0, 0)!important}
|
||||
.blue-168-text {color: rgb(0, 0, 168)!important}
|
||||
.green-168-text {color: rgb(0, 168, 0)!important}
|
||||
.cyan-168-text {color: rgb(0, 168, 168)!important}
|
||||
.red-168-text {color: rgb(168, 0, 0)!important}
|
||||
.purple-168-text {color: rgb(168, 0, 168)!important}
|
||||
.yellow-168-text {color: rgb(168, 168, 0)!important}
|
||||
.white-168-text {color: rgb(168, 168, 168)!important}
|
||||
|
||||
.black-168-border {border-color: rgb(0, 0, 0)!important}
|
||||
.blue-168-border {border-color: rgb(0, 0, 168)!important}
|
||||
.green-168-border {border-color: rgb(0, 168, 0)!important}
|
||||
.cyan-168-border {border-color: rgb(0, 168, 168)!important}
|
||||
.red-168-border {border-color: rgb(168, 0, 0)!important}
|
||||
.purple-168-border {border-color: rgb(168, 0, 168)!important}
|
||||
.yellow-168-border {border-color: rgb(168, 168, 0)!important}
|
||||
.white-168-border {border-color: rgb(168, 168, 168)!important}
|
||||
|
||||
.black-168-hover:hover {background-color: rgb(0, 0, 0)!important}
|
||||
.blue-168-hover:hover {background-color: rgb(0, 0, 168)!important}
|
||||
.green-168-hover:hover {background-color: rgb(0, 168, 0)!important}
|
||||
.cyan-168-hover:hover {background-color: rgb(0, 168, 168)!important}
|
||||
.red-168-hover:hover {background-color: rgb(168, 0, 0)!important}
|
||||
.purple-168-hover:hover {background-color: rgb(168, 0, 168)!important}
|
||||
.yellow-168-hover:hover {background-color: rgb(168, 168, 0)!important}
|
||||
.white-168-hover:hover {background-color: rgb(168, 168, 168)!important}
|
||||
|
||||
.black-168-text-hover:hover {color: rgb(0, 0, 0)!important}
|
||||
.blue-168-text-hover:hover {color: rgb(0, 0, 168)!important}
|
||||
.green-168-text-hover:hover {color: rgb(0, 168, 0)!important}
|
||||
.cyan-168-text-hover:hover {color: rgb(0, 168, 168)!important}
|
||||
.red-168-text-hover:hover {color: rgb(168, 0, 0)!important}
|
||||
.purple-text-168-hover:hover {color: rgb(168, 0, 168)!important}
|
||||
.yellow-text-168-hover:hover {color: rgb(168, 168, 0)!important}
|
||||
.white-text-168-hover:hover {color: rgb(168, 168, 168)!important}
|
||||
|
||||
.black-168-border-hover:hover {border-color: rgb(0, 0, 0)!important}
|
||||
.blue-168-border-hover:hover {border-color: rgb(0, 0, 168)!important}
|
||||
.green-168-border-hover:hover {border-color: rgb(0, 168, 0)!important}
|
||||
.cyan-168-border-hover:hover {border-color: rgb(0, 168, 168)!important}
|
||||
.red-168-border-hover:hover {border-color: rgb(168, 0, 0)!important}
|
||||
.purple-168-border-hover:hover {border-color: rgb(168, 0, 168)!important}
|
||||
.yellow-168-border-hover:hover {border-color: rgb(168, 168, 0)!important}
|
||||
.white-168-border-hover:hover {border-color: rgb(168, 168, 168)!important}
|
||||
|
||||
/* 255 */
|
||||
.black-255 {background-color: rgb(0, 0, 0)!important}
|
||||
.blue-255 {background-color: rgb(0, 0, 255)!important}
|
||||
.green-255 {background-color: rgb(0, 255, 0)!important}
|
||||
.cyan-255 {background-color: rgb(0, 255, 255)!important}
|
||||
.red-255 {background-color: rgb(255, 0, 0)!important}
|
||||
.purple-255 {background-color: rgb(255, 0, 255)!important}
|
||||
.yellow-255 {background-color: rgb(255, 255, 0)!important}
|
||||
.white-255 {background-color: rgb(255, 255, 255)!important}
|
||||
|
||||
.black-255-text {color: rgb(0, 0, 0)!important}
|
||||
.blue-255-text {color: rgb(0, 0, 255)!important}
|
||||
.green-255-text {color: rgb(0, 255, 0)!important}
|
||||
.cyan-255-text {color: rgb(0, 255, 255)!important}
|
||||
.red-255-text {color: rgb(255, 0, 0)!important}
|
||||
.purple-255-text {color: rgb(255, 0, 255)!important}
|
||||
.yellow-255-text {color: rgb(255, 255, 0)!important}
|
||||
.white-255-text {color: rgb(255, 255, 255)!important}
|
||||
|
||||
.black-255-border {border-color: rgb(0, 0, 0)!important}
|
||||
.blue-255-border {border-color: rgb(0, 0, 255)!important}
|
||||
.green-255-border {border-color: rgb(0, 255, 0)!important}
|
||||
.cyan-255-border {border-color: rgb(0, 255, 255)!important}
|
||||
.red-255-border {border-color: rgb(255, 0, 0)!important}
|
||||
.purple-255-border {border-color: rgb(255, 0, 255)!important}
|
||||
.yellow-255-border {border-color: rgb(255, 255, 0)!important}
|
||||
.white-255-border {border-color: rgb(255, 255, 255)!important}
|
||||
|
||||
.black-255-hover:hover {background-color: rgb(0, 0, 0)!important}
|
||||
.blue-255-hover:hover {background-color: rgb(0, 0, 255)!important}
|
||||
.green-255-hover:hover {background-color: rgb(0, 255, 0)!important}
|
||||
.cyan-255-hover:hover {background-color: rgb(0, 255, 255)!important}
|
||||
.red-255-hover:hover {background-color: rgb(255, 0, 0)!important}
|
||||
.purple-255-hover:hover {background-color: rgb(255, 0, 255)!important}
|
||||
.yellow-255-hover:hover {background-color: rgb(255, 255, 0)!important}
|
||||
.white-255-hover:hover {background-color: rgb(255, 255, 255)!important}
|
||||
|
||||
.black-255-text-hover:hover {color: rgb(0, 0, 0)!important}
|
||||
.blue-255-text-hover:hover {color: rgb(0, 0, 255)!important}
|
||||
.green-255-text-hover:hover {color: rgb(0, 255, 0)!important}
|
||||
.cyan-255-text-hover:hover {color: rgb(0, 255, 255)!important}
|
||||
.red-255-text-hover:hover {color: rgb(255, 0, 0)!important}
|
||||
.purple-text-255-hover:hover {color: rgb(255, 0, 255)!important}
|
||||
.yellow-text-255-hover:hover {color: rgb(255, 255, 0)!important}
|
||||
.white-text-255-hover:hover {color: rgb(255, 255, 255)!important}
|
||||
|
||||
.black-255-border-hover:hover {border-color: rgb(0, 0, 0)!important}
|
||||
.blue-255-border-hover:hover {border-color: rgb(0, 0, 255)!important}
|
||||
.green-255-border-hover:hover {border-color: rgb(0, 255, 0)!important}
|
||||
.cyan-255-border-hover:hover {border-color: rgb(0, 255, 255)!important}
|
||||
.red-255-border-hover:hover {border-color: rgb(255, 0, 0)!important}
|
||||
.purple-255-border-hover:hover {border-color: rgb(255, 0, 255)!important}
|
||||
.yellow-255-border-hover:hover {border-color: rgb(255, 255, 0)!important}
|
||||
.white-255-border-hover:hover {border-color: rgb(255, 255, 255)!important}
|
||||
|
||||
/* Misc */
|
||||
.black { background-color: black; }
|
||||
.black-text { color: black }
|
||||
.black-border { border-color: black; }
|
||||
.black-hover:hover { background-color: black; }
|
||||
.black-text-hover:hover { color: black }
|
||||
.black-border-hover:hover { border-color: black; }
|
||||
|
||||
.white { background-color: white; }
|
||||
.white-text { color: white }
|
||||
.white-border { border-color: white; }
|
||||
.white-hover:hover { background-color: white; }
|
||||
.white-text-hover:hover { color: white }
|
||||
.white-border-hover:hover { border-color: white; }
|
||||
54
src/styles/global.scss
Normal file
54
src/styles/global.scss
Normal file
@@ -0,0 +1,54 @@
|
||||
@import '../variables.scss';
|
||||
@font-face {
|
||||
font-family: 'DOS';
|
||||
src: url('./fonts/Perfect DOS VGA 437 Win.ttf');
|
||||
}
|
||||
|
||||
/* Global Definitions */
|
||||
html {
|
||||
font-family: $font, 'monospace';
|
||||
font-size: $font-size;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
ul li a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-bottom: 2px solid rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
width: 200px;
|
||||
}
|
||||
62
src/styles/media.scss
Normal file
62
src/styles/media.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
@import '../variables.scss';
|
||||
|
||||
.hide-on-small-only, .hide-on-small-and-down {
|
||||
@media #{$small-and-down} {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.hide-on-med-and-down {
|
||||
@media #{$medium-and-down} {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.hide-on-med-and-up {
|
||||
@media #{$medium-and-up} {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.hide-on-med-only {
|
||||
@media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.hide-on-large-only {
|
||||
@media #{$large-and-up} {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.hide-on-extra-large-only {
|
||||
@media #{$extra-large-and-up} {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.show-on-extra-large {
|
||||
@media #{$extra-large-and-up} {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
.show-on-large {
|
||||
@media #{$large-and-up} {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
.show-on-medium {
|
||||
@media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
.show-on-small {
|
||||
@media #{$small-and-down} {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
.show-on-medium-and-up {
|
||||
@media #{$medium-and-up} {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
.show-on-medium-and-down {
|
||||
@media #{$medium-and-down} {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
23
src/styles/shadow.scss
Normal file
23
src/styles/shadow.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
.tui-shadow, .tui-shadow-1 {
|
||||
box-shadow: 10px 10px black!important;
|
||||
}
|
||||
|
||||
.tui-shadow-2 {
|
||||
box-shadow: 15px 15px black;
|
||||
}
|
||||
|
||||
.tui-shadow-3 {
|
||||
box-shadow: 20px 20px black;
|
||||
}
|
||||
|
||||
.tui-shadow-4 {
|
||||
box-shadow: 25px 25px black;
|
||||
}
|
||||
|
||||
.tui-shadow-5 {
|
||||
box-shadow: 30px 30px black;
|
||||
}
|
||||
|
||||
.tui-no-shadow {
|
||||
box-shadow: none!important;
|
||||
}
|
||||
8
src/styles/textures.scss
Normal file
8
src/styles/textures.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
.tui-white-bg {
|
||||
background-image: url("images/bg.png");
|
||||
background-repeat: repeat;
|
||||
}
|
||||
.tui-blue-bg {
|
||||
background-image: url("images/bg-black.png");
|
||||
background-repeat: repeat;
|
||||
}
|
||||
68
src/styles/utils.scss
Normal file
68
src/styles/utils.scss
Normal file
@@ -0,0 +1,68 @@
|
||||
@import '../mixins.scss';
|
||||
|
||||
.tui-no-padding {
|
||||
padding: 0px!important;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left!important;
|
||||
}
|
||||
.right {
|
||||
float: right!important;
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
.left-align {
|
||||
text-align: left;
|
||||
}
|
||||
.right-align {
|
||||
text-align: right;
|
||||
}
|
||||
.center-align {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%!important;
|
||||
}
|
||||
.full-height {
|
||||
height: 100%!important;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline!important;
|
||||
}
|
||||
.block {
|
||||
display: block!important;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed!important;
|
||||
}
|
||||
.absolute {
|
||||
position: absolute!important;
|
||||
}
|
||||
.relative {
|
||||
position: relative!important;
|
||||
}
|
||||
.static {
|
||||
position: static!important;
|
||||
}
|
||||
|
||||
.tui-shortcut {
|
||||
float: right;
|
||||
}
|
||||
.tui-content {
|
||||
padding: 12px;
|
||||
}
|
||||
.tui-disable-select {
|
||||
@include disable-select;
|
||||
}
|
||||
|
||||
.texturized {
|
||||
background-image: url('./images/bg.png');
|
||||
}
|
||||
.texturized-black {
|
||||
background-image: url('./images/bg-black.png');
|
||||
}
|
||||
28
src/tuicss.scss
Normal file
28
src/tuicss.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
/* Components */
|
||||
@import './components/button.scss';
|
||||
@import './components/checkbox.scss';
|
||||
@import './components/divider.scss';
|
||||
@import './components/dropdown.scss';
|
||||
@import './components/fieldset.scss';
|
||||
@import './components/input.scss';
|
||||
@import './components/navbar.scss';
|
||||
@import './components/panel.scss';
|
||||
@import './components/progressbar.scss';
|
||||
@import './components/radio.scss';
|
||||
@import './components/scrollbar.scss';
|
||||
@import './components/sidenav.scss';
|
||||
@import './components/statusbar.scss';
|
||||
@import './components/table.scss';
|
||||
@import './components/tablegrid.scss';
|
||||
@import './components/tabs.scss';
|
||||
@import './components/textarea.scss';
|
||||
@import './components/window.scss';
|
||||
@import './components/screen.scss';
|
||||
@import './components/date.scss';
|
||||
|
||||
/* Styles */
|
||||
@import './styles/colors.scss';
|
||||
@import './styles/global.scss';
|
||||
@import './styles/shadow.scss';
|
||||
@import './styles/textures.scss';
|
||||
@import './styles/utils.scss';
|
||||
31
src/variables.scss
Normal file
31
src/variables.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
/* Font (Options: 'Lucida Console' or 'DOS') */
|
||||
$font: 'Lucida Console';
|
||||
$font-size: 18px;
|
||||
|
||||
/* Characters */
|
||||
$checkbox-on: '[√]';
|
||||
$checkbox-off: '[\00a0]';
|
||||
$radio-on: '(•)';
|
||||
$radio-off: '(\00a0)';
|
||||
|
||||
/* Theme */
|
||||
$primary: rgb(255, 255, 255);
|
||||
$secondary: rgb(0, 0, 168);
|
||||
$success: rgb(0, 168, 0);
|
||||
$danger: rgb(168, 0, 0);
|
||||
$warning: rgb(168, 168, 0);
|
||||
$info: rgb(0, 168, 168);
|
||||
|
||||
/* Responsive */
|
||||
$small-screen-up: 601px;
|
||||
$medium-screen-up: 993px;
|
||||
$large-screen-up: 1201px;
|
||||
$small-screen: 600px;
|
||||
$medium-screen: 992px;
|
||||
$large-screen: 1200px;
|
||||
$medium-and-up: "only screen and (min-width : #{$small-screen-up})";
|
||||
$large-and-up: "only screen and (min-width : #{$medium-screen-up})";
|
||||
$extra-large-and-up: "only screen and (min-width : #{$large-screen-up})";
|
||||
$small-and-down: "only screen and (max-width : #{$small-screen})";
|
||||
$medium-and-down: "only screen and (max-width : #{$medium-screen})";
|
||||
$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})";
|
||||
Reference in New Issue
Block a user