Added orange 255 color; Created different hover and striped types for table; Added sidenav for turbo vision example;
This commit is contained in:
vinicius.reif
parent
a478627e01
commit
e175f648a1
95
dist/tuicss.css
vendored
95
dist/tuicss.css
vendored
@ -352,6 +352,9 @@ input, select, textarea {
|
||||
.white-255 {
|
||||
background-color: white !important; }
|
||||
|
||||
.orange-255 {
|
||||
background-color: #ffa800 !important; }
|
||||
|
||||
.black-255-text {
|
||||
color: black !important; }
|
||||
|
||||
@ -376,6 +379,9 @@ input, select, textarea {
|
||||
.white-255-text {
|
||||
color: white !important; }
|
||||
|
||||
.orange-255-text {
|
||||
color: #ffa800 !important; }
|
||||
|
||||
.black-255-border {
|
||||
border-color: black !important; }
|
||||
|
||||
@ -400,6 +406,9 @@ input, select, textarea {
|
||||
.white-255-border {
|
||||
border-color: white !important; }
|
||||
|
||||
.orange-255-border {
|
||||
border-color: #ffa800 !important; }
|
||||
|
||||
.black-255-hover:hover {
|
||||
background-color: black !important; }
|
||||
|
||||
@ -424,6 +433,9 @@ input, select, textarea {
|
||||
.white-255-hover:hover {
|
||||
background-color: white !important; }
|
||||
|
||||
.orange-255-hover:hover {
|
||||
background-color: #ffa800 !important; }
|
||||
|
||||
.black-255-text-hover:hover {
|
||||
color: black !important; }
|
||||
|
||||
@ -439,15 +451,18 @@ input, select, textarea {
|
||||
.red-255-text-hover:hover {
|
||||
color: red !important; }
|
||||
|
||||
.purple-text-255-hover:hover {
|
||||
.purple-255-text-hover:hover {
|
||||
color: magenta !important; }
|
||||
|
||||
.yellow-text-255-hover:hover {
|
||||
.yellow-255-text-hover:hover {
|
||||
color: yellow !important; }
|
||||
|
||||
.white-text-255-hover:hover {
|
||||
.white-255-text-hover:hover {
|
||||
color: white !important; }
|
||||
|
||||
.orange-255-text-hover:hover {
|
||||
color: #ffa800 !important; }
|
||||
|
||||
.black-255-border-hover:hover {
|
||||
border-color: black !important; }
|
||||
|
||||
@ -472,6 +487,9 @@ input, select, textarea {
|
||||
.white-255-border-hover:hover {
|
||||
border-color: white !important; }
|
||||
|
||||
.orange-255-border-hover:hover {
|
||||
border-color: #ffa800 !important; }
|
||||
|
||||
/* Misc */
|
||||
.black {
|
||||
background-color: black !important; }
|
||||
@ -509,24 +527,6 @@ input, select, textarea {
|
||||
.white-border-hover:hover {
|
||||
border-color: white !important; }
|
||||
|
||||
.orange {
|
||||
background-color: #a85600 !important; }
|
||||
|
||||
.orange-text {
|
||||
color: #a85600 !important; }
|
||||
|
||||
.orange-border {
|
||||
border-color: #a85600 !important; }
|
||||
|
||||
.orange-hover:hover {
|
||||
background-color: #a85600 !important; }
|
||||
|
||||
.orange-text-hover:hover {
|
||||
color: #a85600 !important; }
|
||||
|
||||
.orange-border-hover:hover {
|
||||
border-color: #a85600 !important; }
|
||||
|
||||
.tui-no-padding {
|
||||
padding: 0px !important; }
|
||||
|
||||
@ -1066,10 +1066,50 @@ input[type=button] {
|
||||
border: 2px solid #a8a8a8;
|
||||
padding: 5px;
|
||||
border-collapse: collapse; }
|
||||
|
||||
.tui-table-hover tbody tr:hover {
|
||||
background-color: cyan;
|
||||
color: black; }
|
||||
.tui-table.hovered-blue tbody tr:hover {
|
||||
background-color: blue !important;
|
||||
color: black; }
|
||||
.tui-table.hovered-green tbody tr:hover {
|
||||
background-color: lime !important;
|
||||
color: black; }
|
||||
.tui-table.hovered-cyan tbody tr:hover {
|
||||
background-color: cyan !important;
|
||||
color: black; }
|
||||
.tui-table.hovered-red tbody tr:hover {
|
||||
background-color: red !important;
|
||||
color: white; }
|
||||
.tui-table.hovered-purple tbody tr:hover {
|
||||
background-color: magenta !important;
|
||||
color: white; }
|
||||
.tui-table.hovered-yellow tbody tr:hover {
|
||||
background-color: yellow !important;
|
||||
color: black; }
|
||||
.tui-table.hovered-white tbody tr:hover {
|
||||
background-color: white !important;
|
||||
color: black; }
|
||||
.tui-table.hovered-orange tbody tr:hover {
|
||||
background-color: #ffa800 !important;
|
||||
color: black; }
|
||||
.tui-table.hovered tbody tr:hover {
|
||||
background-color: cyan !important;
|
||||
color: black; }
|
||||
.tui-table.striped-blue tbody tr:nth-child(even) {
|
||||
background-color: #0000a8; }
|
||||
.tui-table.striped-green tbody tr:nth-child(even) {
|
||||
background-color: #00a800; }
|
||||
.tui-table.striped-cyan tbody tr:nth-child(even) {
|
||||
background-color: #00a8a8; }
|
||||
.tui-table.striped-red tbody tr:nth-child(even) {
|
||||
background-color: #a80000; }
|
||||
.tui-table.striped-purple tbody tr:nth-child(even) {
|
||||
background-color: #a800a8; }
|
||||
.tui-table.striped-yellow tbody tr:nth-child(even) {
|
||||
background-color: #a8a800; }
|
||||
.tui-table.striped-white tbody tr:nth-child(even) {
|
||||
background-color: #a8a8a8;
|
||||
color: black; }
|
||||
.tui-table.striped-orange tbody tr:nth-child(even) {
|
||||
background-color: #a85600; }
|
||||
|
||||
.tui-table tbody {
|
||||
background-color: inherit;
|
||||
@ -1084,6 +1124,11 @@ input[type=button] {
|
||||
color: yellow;
|
||||
text-align: center; }
|
||||
|
||||
.tui-table tfoot {
|
||||
background-color: inherit;
|
||||
color: yellow;
|
||||
text-align: center; }
|
||||
|
||||
.tui-table-grid {
|
||||
border-collapse: collapse;
|
||||
width: 100%; }
|
||||
|
||||
2
dist/tuicss.min.css
vendored
2
dist/tuicss.min.css
vendored
File diff suppressed because one or more lines are too long
@ -11,15 +11,27 @@
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
</head>
|
||||
|
||||
<body >
|
||||
<!-- Change the shadow size of the window -->
|
||||
<div class="tui-window tui-shadow-2">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend>Window</legend>
|
||||
...
|
||||
</fieldset>
|
||||
</div>
|
||||
</nav>
|
||||
<body>
|
||||
|
||||
<table class="tui-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>...</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>...</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
</nav>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
@ -97,8 +97,86 @@
|
||||
|
||||
<div class="tui-window" style="text-align: left;">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="center">Table hover</legend>
|
||||
<table class="tui-table tui-table-hover" style="width: 700px">
|
||||
<legend class="center">Table hovered</legend>
|
||||
<table class="tui-table hovered-cyan" style="width: 700px">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>PID</th>
|
||||
<th>CPU</th>
|
||||
<th>Memory</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>conhost.exe</td>
|
||||
<td>25768</td>
|
||||
<td>00</td>
|
||||
<td>1.748 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>msdos.exe</td>
|
||||
<td>748</td>
|
||||
<td>00</td>
|
||||
<td>22.216 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>System</td>
|
||||
<td>25000</td>
|
||||
<td>12</td>
|
||||
<td>112 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>svchost.exe</td>
|
||||
<td>580</td>
|
||||
<td>01</td>
|
||||
<td>9.440 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>explorer.exe</td>
|
||||
<td>4</td>
|
||||
<td>00</td>
|
||||
<td>53.740 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>conhost.exe</td>
|
||||
<td>25768</td>
|
||||
<td>00</td>
|
||||
<td>1.748 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>msdos.exe</td>
|
||||
<td>748</td>
|
||||
<td>00</td>
|
||||
<td>22.216 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>System</td>
|
||||
<td>25000</td>
|
||||
<td>12</td>
|
||||
<td>112 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>svchost.exe</td>
|
||||
<td>580</td>
|
||||
<td>01</td>
|
||||
<td>9.440 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>explorer.exe</td>
|
||||
<td>4</td>
|
||||
<td>00</td>
|
||||
<td>53.740 Kb</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</fieldset>
|
||||
</div><br>
|
||||
|
||||
<div class="tui-window" style="text-align: left;">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="center">Table striped</legend>
|
||||
<table class="tui-table striped-purple" style="width: 700px">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -172,7 +250,7 @@
|
||||
</table>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -12,11 +12,64 @@
|
||||
<body>
|
||||
<div class="tui-screen-800-600 bordered tui-bg-blue-black">
|
||||
|
||||
<!-- Sidenav -->
|
||||
<nav class="tui-sidenav absolute">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">O</span>pen
|
||||
<span class="tui-shortcut">ctrl+o</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">OS Shell</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">C</span>opy
|
||||
<span class="tui-shortcut">ctrl+c</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">P</span>aste
|
||||
<span class="tui-shortcut">ctrl+v</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">C<span class="red-168-text">u</span>t
|
||||
<span class="tui-shortcut">ctrl+x</span>
|
||||
</a>
|
||||
</li>
|
||||
<div class="tui-black-divider"></div>
|
||||
<li>
|
||||
<a href="#!">Insert</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">Delete</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">Go...</a>
|
||||
</li>
|
||||
<div class="tui-black-divider"></div>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">S</span>earch
|
||||
<span class="tui-shortcut">ctrl+p</span>
|
||||
</a>
|
||||
</li>
|
||||
<div class="tui-black-divider"></div>
|
||||
<li>
|
||||
<a href="#!">Exit <span class="tui-shortcut">F10</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="tui-nav absolute">
|
||||
<span class="tui-datetime" data-format="h:m:s a"></span>
|
||||
<ul>
|
||||
<li class="tui-dropdown"><a class="red-168-text">≡</a></li>
|
||||
<li class="tui-sidenav-button red-168-text">≡</li>
|
||||
<li class="tui-dropdown">
|
||||
<span class="red-168-text">F</span>ile
|
||||
<div class="tui-dropdown-content">
|
||||
@ -90,7 +143,7 @@
|
||||
<span class="red-168-text">E</span>dit
|
||||
</li>
|
||||
<li class="tui-dropdown">
|
||||
<span class="red-168-text">E</span>dit Styled
|
||||
<span class="red-168-text">V</span>iew
|
||||
</li>
|
||||
<li class="tui-dropdown">
|
||||
<span class="red-168-text">H</span>elp
|
||||
|
||||
@ -2,10 +2,84 @@
|
||||
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;
|
||||
|
||||
&.hovered-blue tbody tr:hover {
|
||||
background-color: rgb(0, 0, 255) !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&.hovered-green tbody tr:hover {
|
||||
background-color: rgb(0, 255, 0) !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&.hovered-cyan tbody tr:hover {
|
||||
background-color: rgb(0, 255, 255) !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&.hovered-red tbody tr:hover {
|
||||
background-color: rgb(255, 0, 0) !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.hovered-purple tbody tr:hover {
|
||||
background-color: rgb(255, 0, 255) !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.hovered-yellow tbody tr:hover {
|
||||
background-color: rgb(255, 255, 0) !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&.hovered-white tbody tr:hover {
|
||||
background-color: rgb(255, 255, 255) !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&.hovered-orange tbody tr:hover {
|
||||
background-color: rgb(255, 168, 0) !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&.hovered tbody tr:hover {
|
||||
background-color: rgb(0, 255, 255) !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&.striped-blue tbody tr:nth-child(even) {
|
||||
background-color: rgb(0, 0, 168);
|
||||
}
|
||||
|
||||
&.striped-green tbody tr:nth-child(even) {
|
||||
background-color: rgb(0, 168, 0);
|
||||
}
|
||||
|
||||
&.striped-cyan tbody tr:nth-child(even) {
|
||||
background-color: rgb(0, 168, 168);
|
||||
}
|
||||
|
||||
&.striped-red tbody tr:nth-child(even) {
|
||||
background-color: rgb(168, 0, 0);
|
||||
}
|
||||
|
||||
&.striped-purple tbody tr:nth-child(even) {
|
||||
background-color: rgb(168, 0, 168);
|
||||
}
|
||||
|
||||
&.striped-yellow tbody tr:nth-child(even) {
|
||||
background-color: rgb(168, 168, 0);
|
||||
}
|
||||
|
||||
&.striped-white tbody tr:nth-child(even) {
|
||||
background-color: rgb(168, 168, 168);
|
||||
color: black;
|
||||
}
|
||||
|
||||
&.striped-orange tbody tr:nth-child(even) {
|
||||
background-color: rgb(168, 86, 0);
|
||||
}
|
||||
}
|
||||
.tui-table tbody {
|
||||
background-color: inherit;
|
||||
@ -20,3 +94,8 @@
|
||||
color: rgb(255, 255, 0);
|
||||
text-align: center;
|
||||
}
|
||||
.tui-table tfoot {
|
||||
background-color: inherit;
|
||||
color: rgb(255, 255, 0);
|
||||
text-align: center;
|
||||
}
|
||||
@ -113,6 +113,7 @@
|
||||
.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}
|
||||
.orange-255 {background-color: rgb(255, 168, 0)!important}
|
||||
|
||||
.black-255-text {color: rgb(0, 0, 0)!important}
|
||||
.blue-255-text {color: rgb(0, 0, 255)!important}
|
||||
@ -122,6 +123,7 @@
|
||||
.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}
|
||||
.orange-255-text {color: rgb(255, 168, 0)!important}
|
||||
|
||||
.black-255-border {border-color: rgb(0, 0, 0)!important}
|
||||
.blue-255-border {border-color: rgb(0, 0, 255)!important}
|
||||
@ -131,6 +133,7 @@
|
||||
.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}
|
||||
.orange-255-border {border-color: rgb(255, 168, 0)!important}
|
||||
|
||||
.black-255-hover:hover {background-color: rgb(0, 0, 0)!important}
|
||||
.blue-255-hover:hover {background-color: rgb(0, 0, 255)!important}
|
||||
@ -140,15 +143,17 @@
|
||||
.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}
|
||||
.orange-255-hover:hover {background-color: rgb(255, 168, 0)!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}
|
||||
.purple-255-text-hover:hover {color: rgb(255, 0, 255)!important}
|
||||
.yellow-255-text-hover:hover {color: rgb(255, 255, 0)!important}
|
||||
.white-255-text-hover:hover {color: rgb(255, 255, 255)!important}
|
||||
.orange-255-text-hover:hover {color: rgb(255, 168, 0)!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}
|
||||
@ -158,6 +163,7 @@
|
||||
.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}
|
||||
.orange-255-border-hover:hover {border-color: rgb(255, 168, 0)!important}
|
||||
|
||||
/* Misc */
|
||||
.black { background-color: black!important }
|
||||
@ -173,10 +179,3 @@
|
||||
.white-hover:hover { background-color: white!important }
|
||||
.white-text-hover:hover { color: white!important }
|
||||
.white-border-hover:hover { border-color: white!important }
|
||||
|
||||
.orange { background-color: rgb(168, 86, 0)!important }
|
||||
.orange-text { color: rgb(168, 86, 0)!important }
|
||||
.orange-border { border-color: rgb(168, 86, 0)!important }
|
||||
.orange-hover:hover { background-color: rgb(168, 86, 0)!important }
|
||||
.orange-text-hover:hover { color: rgb(168, 86, 0)!important }
|
||||
.orange-border-hover:hover { border-color: rgb(168, 86, 0)!important }
|
||||
Loading…
x
Reference in New Issue
Block a user