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;
}
/* 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 {
/* 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;
}
/* 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;
}
/* ... 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;
}