244 lines
5.1 KiB
CSS
244 lines
5.1 KiB
CSS
/*
|
|
Algo: a dekstop environment look-a-like in your web browser
|
|
Copyright (C) 2009 Niels Serup
|
|
|
|
This file is part of Algo.
|
|
|
|
Algo is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU General Public License as published by
|
|
the Free Software Foundation, either version 3 of the License, or
|
|
(at your option) any later version.
|
|
|
|
Algo is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU General Public License for more details.
|
|
|
|
You should have received a copy of the GNU General Public License
|
|
along with Algo. If not, see <http://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
/* Standard stuff
|
|
This file holds all standard css stuff that must not
|
|
(and cannot) be changed in any css theme file. */
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 12px;
|
|
font-family: 'dejavu sans' arial;
|
|
}
|
|
|
|
body {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Navigation bar (normally there are two navigation bars -
|
|
one at the top of the page and one at the bottom of the page). */
|
|
.navbar {
|
|
position: absolute;
|
|
z-index: 100;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Dropdowns */
|
|
.dropdown {
|
|
display: block;
|
|
float: left;
|
|
position: relative;
|
|
}
|
|
|
|
.dropdown * {
|
|
display: none;
|
|
position: relative;
|
|
}
|
|
|
|
.dropdown .top {
|
|
display: block;
|
|
}
|
|
|
|
.dropdown .group {
|
|
position: relative;
|
|
}
|
|
|
|
.dropdown .entries {
|
|
position: absolute;
|
|
}
|
|
|
|
.dropdown .entry, .dropdown .header {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dropdown .side {
|
|
position: absolute;
|
|
}
|
|
|
|
.dropdown:hover * {
|
|
display: block;
|
|
}
|
|
|
|
.dropdown:hover .top {
|
|
position: relative;
|
|
}
|
|
|
|
.dropdown:hover .entries {
|
|
display: none;
|
|
}
|
|
|
|
.dropdown .group:hover > .entries {
|
|
display: block;
|
|
}
|
|
|
|
/* When an entry in a dropdown list is clicked, the .dropdown class receives
|
|
another class: the .dropdownh class. This takes care of hiding the box. */
|
|
.dropdownh *, .dropdownh:hover * {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* Area - the area where the windows are */
|
|
.area {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Windows */
|
|
.window {
|
|
position: absolute;
|
|
}
|
|
|
|
.window > * {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
/* The handle is there, but it's transparent */
|
|
.window > .handle {
|
|
background: #000;
|
|
filter: alpha(opacity=0);
|
|
-moz-opacity: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* The following stuff features the divs around the window. */
|
|
.window > .tl {
|
|
cursor: nw-resize;
|
|
}
|
|
|
|
.window > .tr {
|
|
cursor: ne-resize;
|
|
}
|
|
|
|
.window > .r {
|
|
cursor: e-resize;
|
|
}
|
|
|
|
.window > .br {
|
|
cursor: se-resize;
|
|
}
|
|
|
|
.window > .b {
|
|
cursor: s-resize;
|
|
}
|
|
|
|
.window > .bl {
|
|
cursor: sw-resize;
|
|
}
|
|
|
|
.window > .l {
|
|
cursor: w-resize;
|
|
}
|
|
|
|
/* The .t class (the top, or header, of the window) is only for showing
|
|
a background image (read: css theme files). The .resize_handle acts as
|
|
the top resizer. */
|
|
.window > .resize_handle {
|
|
cursor: n-resize;
|
|
}
|
|
|
|
.window > .title {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* .data is the object/iframe */
|
|
.window > .data {
|
|
overflow: auto;
|
|
}
|
|
|
|
/* .data_overlay is showed whenever moving or adjusting a window.
|
|
If it is not on, the object/iframe might catch focus of the mouse */
|
|
.window > .data_overlay {
|
|
display: none;
|
|
background: #000;
|
|
filter: alpha(opacity=0);
|
|
-moz-opacity: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* .options is the div that holds the minimize, maximize and close button */
|
|
.window > .options > *, .window_max > .options > * {
|
|
position: absolute;
|
|
height: 100%;
|
|
}
|
|
|
|
/* When a window is maximized, it receives a new class - the .window_max class
|
|
Resize cursors must not be visible when in maximized mode */
|
|
.window_max > .tl, .window_max > .resize_handle, .window_max > .tr, .window_max > .r, .window_max > .br, .window_max > .b, .window_max > .bl, .window_max > .l, .nrsz > .tl, .nrsz > .resize_handle, .nrsz > .tr, .nrsz > .r, .nrsz > .br, .nrsz > .b, .nrsz > .bl, .nrsz > .l {
|
|
cursor: default;
|
|
}
|
|
|
|
/* .overlay is the general overlay that is displayed (yes, it's transparent)
|
|
whenever moving or adjusting a window. Same reasons as .data_overlay */
|
|
.overlay {
|
|
display: none;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #000;
|
|
filter: alpha(opacity=0);
|
|
-moz-opacity: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* .appboxes holds information about the text boxes,
|
|
normally placed in the bottom navigation bar,
|
|
that show which windows are open */
|
|
.appboxes * {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* .abs is shown when there is not enough space for all appboxes on one line.
|
|
.scrollup and .scrolldown are the buttons used for scrolling. */
|
|
.abs {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
height: 100%;
|
|
display: none;
|
|
}
|
|
|
|
.scrollup {
|
|
width: 100%;
|
|
height: 50%;
|
|
position: absolute;
|
|
}
|
|
|
|
.scrolldown {
|
|
width: 100%;
|
|
height: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
}
|
|
|
|
|
|
/* .highlightfix is a fix needed (at least in Firefox).
|
|
When moving or adjusting a window, some text will
|
|
automatically turn highlighted. This fix fixes that. */
|
|
.highlightfix {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
} |