www/include/styles/popup.css

Code
Comments
Other
Rev Date Author Line
7604 25 Feb 19 nicklas 1 @charset "UTF-8";
7604 25 Feb 19 nicklas 2 /* $Id$
7604 25 Feb 19 nicklas 3   ------------------------------------------------------------------
7604 25 Feb 19 nicklas 4   Copyright (C) 2011 Nicklas Nordborg
7604 25 Feb 19 nicklas 5
7604 25 Feb 19 nicklas 6   This file is part of BASE - BioArray Software Environment.
7604 25 Feb 19 nicklas 7   Available at http://base.thep.lu.se/
7604 25 Feb 19 nicklas 8
7604 25 Feb 19 nicklas 9   BASE is free software; you can redistribute it and/or
7604 25 Feb 19 nicklas 10   modify it under the terms of the GNU General Public License
7604 25 Feb 19 nicklas 11   as published by the Free Software Foundation; either version 3
7604 25 Feb 19 nicklas 12   of the License, or (at your option) any later version.
7604 25 Feb 19 nicklas 13
7604 25 Feb 19 nicklas 14   BASE is distributed in the hope that it will be useful,
7604 25 Feb 19 nicklas 15   but WITHOUT ANY WARRANTY; without even the implied warranty of
7604 25 Feb 19 nicklas 16   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
7604 25 Feb 19 nicklas 17   GNU General Public License for more details.
7604 25 Feb 19 nicklas 18
7604 25 Feb 19 nicklas 19   You should have received a copy of the GNU General Public License
7604 25 Feb 19 nicklas 20   along with BASE. If not, see <http://www.gnu.org/licenses/>.
7604 25 Feb 19 nicklas 21   ------------------------------------------------------------------
7604 25 Feb 19 nicklas 22
7604 25 Feb 19 nicklas 23   Style sheet with styles specific for popup dialogs.
7604 25 Feb 19 nicklas 24
7604 25 Feb 19 nicklas 25   @author Nicklas
7604 25 Feb 19 nicklas 26   @since 3.1
7604 25 Feb 19 nicklas 27 */
7604 25 Feb 19 nicklas 28 body.popup 
7604 25 Feb 19 nicklas 29 {
7604 25 Feb 19 nicklas 30   margin: 0px;
7604 25 Feb 19 nicklas 31 }
7604 25 Feb 19 nicklas 32
7604 25 Feb 19 nicklas 33 /* Main title of a popup dialog */
7604 25 Feb 19 nicklas 34 .popup h1
7604 25 Feb 19 nicklas 35 {
7604 25 Feb 19 nicklas 36   position: absolute;
7604 25 Feb 19 nicklas 37   top: 0;
7604 25 Feb 19 nicklas 38   left: 0;
7604 25 Feb 19 nicklas 39   right: 0;
7604 25 Feb 19 nicklas 40   /* NOTE! Total height in base units is 1.4*1.4=1.96em */
7604 25 Feb 19 nicklas 41   height: 1.4em;
7604 25 Feb 19 nicklas 42   font-size: 1.4em;
7604 25 Feb 19 nicklas 43   color: #F0F0F0;
7604 25 Feb 19 nicklas 44   background-image: url('backgrounds/popup_h1.png');
7604 25 Feb 19 nicklas 45   background-color: #224488;
7604 25 Feb 19 nicklas 46   background-position: right;
7604 25 Feb 19 nicklas 47   background-repeat: no-repeat;
7604 25 Feb 19 nicklas 48   overflow: hidden;
7604 25 Feb 19 nicklas 49 }
7604 25 Feb 19 nicklas 50
7604 25 Feb 19 nicklas 51 .popup h1:before
7604 25 Feb 19 nicklas 52 {
7604 25 Feb 19 nicklas 53   color: #2288AA;
7604 25 Feb 19 nicklas 54   content: '::';
7604 25 Feb 19 nicklas 55   padding-left: 4px;
7604 25 Feb 19 nicklas 56   padding-right: 4px;
7604 25 Feb 19 nicklas 57 }
7604 25 Feb 19 nicklas 58
7604 25 Feb 19 nicklas 59
7604 25 Feb 19 nicklas 60 /* help icon is positioned to the right */
7604 25 Feb 19 nicklas 61 .popup h1 img
7604 25 Feb 19 nicklas 62 {
7604 25 Feb 19 nicklas 63   position: absolute;
7604 25 Feb 19 nicklas 64   right: 6px;
7604 25 Feb 19 nicklas 65   top: 0.25em;
7604 25 Feb 19 nicklas 66 }
7604 25 Feb 19 nicklas 67
7604 25 Feb 19 nicklas 68 /* content should span between main title and buttons */
7604 25 Feb 19 nicklas 69 .popup .content
7604 25 Feb 19 nicklas 70 {
7604 25 Feb 19 nicklas 71   position: absolute;
7604 25 Feb 19 nicklas 72   left: 0px;
7604 25 Feb 19 nicklas 73   right: 0px;
7604 25 Feb 19 nicklas 74   top:  1.96em;
7604 25 Feb 19 nicklas 75   bottom: 3em;
7604 25 Feb 19 nicklas 76   overflow: auto;
7604 25 Feb 19 nicklas 77 }
7604 25 Feb 19 nicklas 78
7604 25 Feb 19 nicklas 79 /* fullcc is used for 100% width+height content that is centered vertically+horizontally */
7604 25 Feb 19 nicklas 80 table.fullcc
7604 25 Feb 19 nicklas 81 {
7604 25 Feb 19 nicklas 82   height: 100%;
7604 25 Feb 19 nicklas 83   width: 100%;
7604 25 Feb 19 nicklas 84   vertical-align: middle;
7604 25 Feb 19 nicklas 85   text-align: center;
7604 25 Feb 19 nicklas 86   /* needed for scrollbars to appear if content is overflowing */
7604 25 Feb 19 nicklas 87   min-height: 100px;
7604 25 Feb 19 nicklas 88 }
7604 25 Feb 19 nicklas 89
7604 25 Feb 19 nicklas 90 table.fullcc > tbody > tr
7604 25 Feb 19 nicklas 91 {
7604 25 Feb 19 nicklas 92   height: 100%;
7604 25 Feb 19 nicklas 93 }
7604 25 Feb 19 nicklas 94
7604 25 Feb 19 nicklas 95 table.fullcc > tbody > tr > td
7604 25 Feb 19 nicklas 96 {
7604 25 Feb 19 nicklas 97   height: 100%;
7604 25 Feb 19 nicklas 98 }
7604 25 Feb 19 nicklas 99
7604 25 Feb 19 nicklas 100 /* Simply apply some padding to avoid hitting the border */
7604 25 Feb 19 nicklas 101 .popup .content .padded
7604 25 Feb 19 nicklas 102 {
7604 25 Feb 19 nicklas 103   padding: 5px;
7604 25 Feb 19 nicklas 104 }
7604 25 Feb 19 nicklas 105
7604 25 Feb 19 nicklas 106 /* Places a short legend in the bottom right corner */
7604 25 Feb 19 nicklas 107 .popup .legend
7604 25 Feb 19 nicklas 108 {
7604 25 Feb 19 nicklas 109   position:absolute; 
7604 25 Feb 19 nicklas 110   bottom: 1rem; 
7604 25 Feb 19 nicklas 111   height: 3.5rem; 
7604 25 Feb 19 nicklas 112   right: 0.5rem; 
7604 25 Feb 19 nicklas 113   width: 15.5rem; 
7604 25 Feb 19 nicklas 114   text-align: right;
7604 25 Feb 19 nicklas 115   font-style: italic;
7604 25 Feb 19 nicklas 116   font-size: 87.5%;
7604 25 Feb 19 nicklas 117 }
7604 25 Feb 19 nicklas 118
7604 25 Feb 19 nicklas 119 .popup .legend img
7604 25 Feb 19 nicklas 120 {
7604 25 Feb 19 nicklas 121   vertical-align: middle !important;
7604 25 Feb 19 nicklas 122 }
7604 25 Feb 19 nicklas 123
7604 25 Feb 19 nicklas 124 /* 
7604 25 Feb 19 nicklas 125   Buttons and related 
7604 25 Feb 19 nicklas 126   -------------------
7604 25 Feb 19 nicklas 127 */
7604 25 Feb 19 nicklas 128 /* The 'dialog buttons' should always be placed in relation to the bottom of the dialog */
7604 25 Feb 19 nicklas 129 .buttongroup.dialogbuttons
7604 25 Feb 19 nicklas 130 {
7604 25 Feb 19 nicklas 131   position: absolute;
7604 25 Feb 19 nicklas 132   bottom: 0;
7604 25 Feb 19 nicklas 133   left: 0; 
7604 25 Feb 19 nicklas 134   right: 0;
7604 25 Feb 19 nicklas 135   height: 3em;
7604 25 Feb 19 nicklas 136   padding-top: 0.5em;
7604 25 Feb 19 nicklas 137 }
7604 25 Feb 19 nicklas 138
7604 25 Feb 19 nicklas 139