summaryrefslogtreecommitdiff
path: root/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'style.css')
-rw-r--r--[-rwxr-xr-x]style.css491
1 files changed, 132 insertions, 359 deletions
diff --git a/style.css b/style.css
index 813d133..7677e03 100755..100644
--- a/style.css
+++ b/style.css
@@ -1,364 +1,137 @@
-@charset "UTF-8";
-html, body, div, h1, h2, h3, h4, h5, span, ul, ol, li {
- padding: 0;
- margin: 0; }
-
-ul, ol, li {
- list-style: none; }
-
-body {
- font-family: Helvetica, Arial;
- color: #000333;
- font-size: 1em; }
-
-.bh-content {
- padding-top: 2em; }
-
-.bh-row {
- width: 80%;
- margin: 0 auto;
- position: relative; }
-
-.bh-wide-row {
- width: 100%;
- position: relative; }
-
-.bh-row, .bh-wide-row {
- float: none;
- clear: both;
- padding-bottom: 2em;
- border-bottom: 1px solid #ccc; }
- .bh-row:before, .bh-row:after, .bh-wide-row:before, .bh-wide-row:after {
- content: "";
- display: table; }
- .bh-row:after, .bh-wide-row:after {
- clear: both; }
-
-.bh-no-border {
- border: none; }
-
-.bh-col-1 {
- width: 8.33333%;
- float: left;
- position: relative; }
-
-.bh-col-2 {
- width: 16.66667%;
- float: left;
- position: relative; }
-
-.bh-col-3 {
- width: 25%;
- float: left;
- position: relative; }
-
-.bh-col-4 {
- width: 33.33333%;
- float: left;
- position: relative; }
-
-.bh-col-5 {
- width: 41.66667%;
- float: left;
- position: relative; }
-
-.bh-col-6 {
- width: 50%;
- float: left;
- position: relative; }
-
-.bh-col-7 {
- width: 58.33333%;
- float: left;
- position: relative; }
-
-.bh-col-8 {
- width: 66.66667%;
- float: left;
- position: relative; }
-
-.bh-col-9 {
- width: 75%;
- float: left;
- position: relative; }
-
-.bh-col-10 {
- width: 83.33333%;
- float: left;
- position: relative; }
-
-.bh-col-11 {
- width: 91.66667%;
- float: left;
- position: relative; }
-
-.bh-col-12 {
- width: 100%;
- float: left;
- position: relative; }
-
-.bh-vert-1 {
- padding-top: 1em; }
-
-.bh-vert-2 {
- padding-top: 2em; }
-
-.bh-vert-3 {
- padding-top: 3em; }
-
-h1, h2, h3 {
+html,body {
+ background-color: #000;
+ color: #e5e5e5;
+ height: 97%;
+}
+
+/* Create the whole terminal which cosists of a window and a header */
+.terminal {
+ width: 98%;
+ min-height:10%;
+ border-width: 1px;
+ border-top-color: #dfdede;
+ border-bottom-color: #949494;
+ border-right-color: #AAAAAA;
+ border-left-color: #e0dfdf;
+ border-style: solid;
+ border-radius: 6px;
+ background-color: #272727;
+ color: #e5e5e5;
+ margin-bottom: 10px;
+ -webkit-box-shadow: 5px 4px 20px 1px rgba(0,0,0,0.75);
+ -moz-box-shadow: 5px 4px 20px 1px rgba(0,0,0,0.75);
+ box-shadow: 5px 4px 20px 1px rgba(0,0,0,0.75);
+}
+
+li { padding: 10px; }
+/* The terminal window where you put the content */
+.terminal .terminal-window {
+ padding: 15px;
+ font-size: medium;
+ font-weight: normal;
+ font-family: "Courier New", Monaco, monospace;
+}
+
+/* Sets the color for a path such as ~/page/menu $ */
+.terminal .terminal-window .path {
+ margin-right: 10px;
+ color:#729fcf;
+}
+/* Sets the color and font type for a user such as user@server */
+.terminal .terminal-window .user {
+ color:#6fc736;
font-weight: bold;
- text-transform: uppercase; }
-
-h1 {
- font-size: 3em;
- line-height: 1em;
- padding-bottom: 0.2em;
- display: table;
- letter-spacing: -0.02em; }
-
-h2 {
- font-size: 2.3em;
- line-height: 1em;
- letter-spacing: -0.02em; }
-
-h3 {
- font-size: 1.6em;
- line-height: 1.2em;
- letter-spacing: -0.02em; }
-
-p {
- font-size: 1.2em;
- line-height: 1.7em;
- letter-spacing: -0.01em; }
- p:last-of-type:after {
- display: block;
- width: 5em;
- height: 5px;
- background: #000;
- content: " ";
- margin: 1em 0 0; }
+}
+/* Decide how links within a menu class in the window should look like */
+.terminal .terminal-window .menu a {
+ /* text-decoration: none; */
+ color: #e5e5e5;
+ font-weight: normal;
+}
a {
- color: #000;
- text-decoration: none;
- border-bottom: 2px solid #ffde17;
- padding-bottom: 0.2em; }
- a:hover {
- border-bottom-color: dodgerblue; }
-
-small {
- font-size: 0.8em;
- color: #333; }
-
-aside {
- font-size: 0.8em;
- color: #666;
- font-style: italic;
- position: absolute;
- width: 25%; }
- aside.bh-aside-left {
- left: -29%; }
- aside.bh-aside-right {
- right: -29%; }
-
-ol, ul {
- width: 100%;
- clear: both;
- float: none;
- padding-bottom: 1em; }
- ol li, ul li {
- font-size: 1.2em;
- line-height: 1.7em; }
- ol li.bh-title, ul li.bh-title {
- font-weight: bold;
- border-bottom: 1px solid #be1e2d;
- text-transform: uppercase;
- display: table;
- margin-bottom: 0.4em;
- padding-bottom: 0.4em;
- color: #333; }
-
-ol {
- counter-reset: customlistcounter; }
- ol li.bh-item:before {
- content: counter(customlistcounter);
- counter-increment: customlistcounter;
- display: block;
- position: absolute;
- color: #333;
- margin-left: -1.5em; }
-
-ul li.bh-item:before {
- content: "–";
- display: block;
- position: absolute;
- color: #333;
- margin-left: -1.5em; }
-ul.bh-timeline header {
- text-transform: uppercase;
- font-size: 0.8em;
+ /* text-decoration: none; */
+ color: #FFFFFF;
+ font-weight: normal;
+ }
+
+a:visited {
+ color: #FFFFFF;
+ font-weight: normal;
+}
+/* Create mouse over effect */
+.terminal .terminal-window .menu a:hover {
font-weight: bold;
- color: #666; }
-ul.bh-timeline li.bh-timeline-item {
- padding-top: 1em;
- padding-left: 2em;
- border-left: 1px solid #ccc; }
- ul.bh-timeline li.bh-timeline-item:before {
- content: "";
- display: block;
- width: 0.5em;
- height: 0.5em;
- background: #be1e2d;
- border-radius: 2em;
- position: absolute;
- margin: 0.6em 0 0 -2.3em;
- z-index: 1000; }
- ul.bh-timeline li.bh-timeline-item small {
- display: block;
- line-height: 1.4em; }
- ul.bh-timeline li.bh-timeline-item:last-of-type {
- position: relative; }
- ul.bh-timeline li.bh-timeline-item:last-of-type:after {
- height: calc(100% - 1.6em);
- width: 20px;
- position: absolute;
- background: #fff;
- display: block;
- content: "";
- margin-left: -2.3em;
- bottom: 0;
- z-index: 999; }
-ul.bh-timeline:before {
- height: 1.9em;
- width: 20px;
- position: absolute;
- background: #fff;
- display: block;
- content: "";
- margin-left: -1px; }
-
-.bh-gray {
- color: #333; }
- .bh-gray a {
- color: #333; }
-
-.bh-light-gray {
- color: #ccc; }
- .bh-light-gray a {
- color: #ccc; }
-
-button {
- background: #fff;
- border: 1px solid #333;
- font-size: 1em;
- padding: 1em 2em;
- border-radius: 3em;
- text-transform: uppercase;
- font-weight: bold;
- color: #333;
+}
+/* Create the blinkin cursor*/
+.terminal .terminal-window .cursor {
+ background-color: #e5e5e5;
+ animation: blink 1s steps(5, start) infinite;
+ -webkit-animation: blink 1s steps(5, start) infinite;
+}
+@keyframes blink {
+ to {
+ visibility: hidden;
+ }
+}
+@-webkit-keyframes blink {
+ to {
+ visibility: hidden;
+ }
+}
+
+
+
+
+/* The header contains the name of the terminal and the buttons for
+ closing, maximizing, minimizing */
+.terminal .header {
+ position: relative;
+ overflow:hidden; /*This makes the heigth adjust to the content.
+ It is necessary because this div contains floating divs */
+ background-image: linear-gradient(to top, #d6d6d6 0%, #e5e5e5 100%);
+ padding: 2px;
+ border-top-left-radius: 6px;
+ border-top-right-radius: 6px;
+}
+
+/* The buttons in the top right corner...*/
+.terminal .header .header-buttons {
+
+ float:right;
+ width:40%;
+}
+
+.terminal .header .header-buttons ul {
+ display: inline;
+ list-style-type: none;
+ color:#404040;
+
+
+}
+/* ... are implemented as a list... */
+.terminal .header .header-buttons ul li {
+ list-style-type: none;
+ display: inline;
+ float: right;
+ font-size: x-large;
+ border-radius: 6px;
+ margin-right: 10px;
+ font-weight:normal;
cursor: pointer;
- outline: none; }
- button:hover {
- color: dodgerblue;
- border-color: dodgerblue; }
- button:active {
- background: #eee; }
- button.bh-cancel {
- border-color: #D1200D;
- color: #D1200D; }
- button.bh-cancel:hover {
- border-color: #A10F04;
- color: #A10F04; }
- button.bh-cancel:active {
- background: #eee; }
- button.bh-disabled {
- border-color: #ccc;
- color: #ccc;
- cursor: default; }
- button.bh-disabled:hover {
- border-color: #ccc;
- color: #ccc; }
- button.bh-disabled:active {
- background: #fff; }
-
-table.bh-table {
- width: 100%;
- margin: 1em 0;
- border-spacing: 0;
- border-collapse: separate; }
- table.bh-table thead tr th {
- font-size: 0.8em;
- text-transform: uppercase;
- text-align: left;
- border-bottom: 2px solid #ccc;
- padding-bottom: 1em; }
- table.bh-table tbody tr td {
- font-size: 1.2em;
- padding: 0.7em 0;
- border-bottom: 1px solid #ccc; }
- table.bh-table tbody tr:last-of-type td {
- border-bottom: none; }
-
-div.bh-input {
- margin-bottom: 1.5em; }
- div.bh-input small {
- padding-top: 0.3em;
- display: block;
- font-size: 0.75em; }
- div.bh-input label {
- font-size: 0.7em;
- color: #333;
- text-transform: uppercase;
- font-weight: bold;
- margin-bottom: 0.7em;
- display: block; }
- div.bh-input input[type=text], div.bh-input input[type=password], div.bh-input textarea {
- width: 100%;
- display: block;
- font-family: Helvetica, Arial;
- font-size: 1.2em;
- color: #000;
- background: none;
- border: none;
- border-bottom: 1px solid #ddd;
- padding-bottom: 0.5em;
- outline: none; }
- div.bh-input input[type=text]:focus, div.bh-input input[type=password]:focus, div.bh-input textarea:focus {
- border-color: #333; }
- div.bh-input.bh-invalid label {
- color: #D1200D; }
- div.bh-input.bh-invalid input[type=text], div.bh-input.bh-invalid input[type=password] {
- border-bottom-color: #D1200D; }
-div.bh-search {
- width: 100%;
- position: relative; }
- div.bh-search input {
- display: block;
- float: left;
- background: #fff;
- border: 1px solid #ccc; }
- div.bh-search input[type=text] {
- padding: 1em 2em;
- border-top-left-radius: 3em;
- border-bottom-left-radius: 3em;
- font-size: 1em;
- outline: none;
- margin-right: 0;
- border-right: none;
- width: calc(100% - 6em); }
- div.bh-search input[type=submit] {
- font-size: 0.8em;
- padding: 1.3em 2em 1.4em 1em;
- border-top-right-radius: 3em;
- border-bottom-right-radius: 3em;
- text-transform: uppercase;
- font-weight: bold;
- color: #333;
- cursor: pointer;
- outline: none;
- margin-left: 0;
- right: 0;
- position: absolute; }
-
-/*# sourceMappingURL=bauhaus.css.map */
+}
+/* ... and just like in Mint there is a mouse-over effect */
+.terminal .header .header-buttons ul li:hover {
+ font-weight:bold;
+ color: #00000;
+}
+/* Change the properties of the window name */
+.terminal .header .header-name h4 {
+ float:left;
+ width:50%;
+ text-align:right;
+ font-size: large;
+ margin: 5px;
+ letter-spacing: 1px;
+ color: #404040;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-21 11:43:22 +0000