Owen Leonard
d777c044be
This patch rewrites the markup of the staff client home page to use the Bootstrap grid instead of the YUI grid, taking advantage of Bootstrap's built-in responsiveness. This patch does not affect the logo and search form in the header. It will be necessary to address search forms in another patch. To test, apply the patch and clear your browser cache if necessary. For better results, apply the patch for Bug 19851 as well. - View the staff client home page and test the layout at various browser widths. - Test with and without news items - Test with and without content in IntranetmainUserblock Signed-off-by: Dominic Pichette <dominic.pichette@inlibro.com> Signed-off-by: Josef Moravec <josef.moravec@gmail.com> Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
186 lines
5.6 KiB
CSS
186 lines
5.6 KiB
CSS
/*
|
|
* This file contains CSS styles used only on the front page of Koha
|
|
*
|
|
* COLORS
|
|
* Very light blue Module links background : #f4f8f9
|
|
* Light blue Navbar, breadcrumb : #e6f0f2
|
|
* Blue Module links and breadcrumb border : #b9d8d9
|
|
* Dark blue Links : #004d99
|
|
* Green Links:hover : #538200
|
|
* These colors are used in staff-global.css too
|
|
*
|
|
*/
|
|
|
|
#container-main {
|
|
/* Contains the news + both columns of links + pending box + userblock box */
|
|
background-image:url('../img/background_koha_logo.png');
|
|
background-repeat:no-repeat;
|
|
background-position:left top;
|
|
padding: 1em 0;
|
|
}
|
|
|
|
|
|
/* ==== NEWS - Start ==== */
|
|
|
|
#area-news {
|
|
border: 1px solid #EEEEEE;
|
|
border-radius: 6px 6px 6px 6px;
|
|
margin: 0.2em;
|
|
}
|
|
|
|
#area-news h3 {
|
|
/* Title section for the news block : transparency to let the koha logo appear */
|
|
background-color: #EEEEEE;
|
|
filter:alpha(opacity=70); /* for IE */
|
|
-moz-opacity: 0.7; /* for Firefox before 0.9 */
|
|
opacity: 0.7;
|
|
padding : .3em; margin: 0;
|
|
}
|
|
|
|
.newsitem {
|
|
/* Block for one News entry */
|
|
padding: 3px;
|
|
margin: .3em;
|
|
border-bottom: 1px solid #EEE;
|
|
background-color : #ffffff;
|
|
border-radius: 6px;
|
|
filter:alpha(opacity=75);
|
|
-moz-opacity: 0.75;
|
|
opacity: .75;
|
|
}
|
|
|
|
.newsfooter {
|
|
/* Footer containing the publication date and edition links for an News entry */
|
|
font-size: 80%;
|
|
color: #808080;
|
|
}
|
|
|
|
/* ==== NEWS - End ==== */
|
|
|
|
|
|
/* ==== MODULE LINKS - Start ==== */
|
|
|
|
ul.biglinks-list {
|
|
/* List containing the module links */
|
|
padding: 0px;
|
|
}
|
|
|
|
ul.biglinks-list li {
|
|
/* Standard attributes for the list elements */
|
|
list-style-type:none;
|
|
}
|
|
|
|
ul.biglinks-list li a.icon_general {
|
|
/* Class used for each module link */
|
|
background-image:url('../img/staff-home-icons-sprite.png');
|
|
display: block;
|
|
box-sizing: content-box;
|
|
max-width : 320px;
|
|
height: 46px;
|
|
margin: 0 1em 14px 0;
|
|
padding-left:57px;
|
|
padding-top:5px;
|
|
|
|
border: solid 2px #b9d8d9;
|
|
border-radius: 6px;
|
|
|
|
text-decoration: none;
|
|
font-family: verdana, arial;
|
|
font-weight: bold;
|
|
font-size: large;
|
|
color: #000000;
|
|
|
|
background-color:#f4f8f9;
|
|
background-position: 5px 3px;
|
|
background-repeat:no-repeat;
|
|
}
|
|
|
|
ul.biglinks-list li a:hover.icon_general {
|
|
/* Class used for each module link hover state */
|
|
color: #538200;
|
|
border-color: #538200;
|
|
}
|
|
|
|
/* CSS Sprites
|
|
* There is one sprite image which contains all icons in both
|
|
* hover states (on and off)
|
|
*/
|
|
|
|
/* Classes used for each individual module link */
|
|
ul.biglinks-list li a.icon_circulation {background-position:5px 3px;}
|
|
ul.biglinks-list li a.icon_patrons {background-position:5px -89px;}
|
|
ul.biglinks-list li a.icon_search {background-position:5px -181px;}
|
|
ul.biglinks-list li a.icon_lists {background-position:5px -273px;}
|
|
ul.biglinks-list li a.icon_cataloging {background-position:5px -365px;}
|
|
ul.biglinks-list li a.icon_authorities {background-position:5px -457px;}
|
|
|
|
ul.biglinks-list li a.icon_serials {background-position:5px -549px;}
|
|
ul.biglinks-list li a.icon_acquisitions {background-position:5px -641px;}
|
|
ul.biglinks-list li a.icon_reports {background-position:5px -733px;}
|
|
ul.biglinks-list li a.icon_administration {background-position:5px -825px;}
|
|
ul.biglinks-list li a.icon_tools {background-position:5px -917px;}
|
|
ul.biglinks-list li a.icon_koha {background-position:5px -1008px;}
|
|
ul.biglinks-list li a.icon_course_reserves {background-position:5px -1100px;}
|
|
|
|
/* Classes used for each individual module link on hover*/
|
|
ul.biglinks-list li a:hover.icon_circulation {background-position:5px -43px;}
|
|
ul.biglinks-list li a:hover.icon_patrons {background-position:5px -135px;}
|
|
ul.biglinks-list li a:hover.icon_search {background-position:5px -227px;}
|
|
ul.biglinks-list li a:hover.icon_lists {background-position:5px -319px;}
|
|
ul.biglinks-list li a:hover.icon_cataloging {background-position:5px -411px;}
|
|
ul.biglinks-list li a:hover.icon_authorities {background-position:5px -503px;}
|
|
|
|
ul.biglinks-list li a:hover.icon_serials {background-position:5px -595px;}
|
|
ul.biglinks-list li a:hover.icon_acquisitions {background-position:5px -687px;}
|
|
ul.biglinks-list li a:hover.icon_reports {background-position:5px -779px;}
|
|
ul.biglinks-list li a:hover.icon_administration {background-position:5px -871px;}
|
|
ul.biglinks-list li a:hover.icon_tools {background-position:5px -963px;}
|
|
ul.biglinks-list li a:hover.icon_koha {background-position:5px -1054px;}
|
|
ul.biglinks-list li a:hover.icon_course_reserves {background-position:5px -1146px;}
|
|
/* ==== MODULE LINKS - End ==== */
|
|
|
|
|
|
/* ==== PENDING - Start ==== */
|
|
#area-pending {
|
|
/* Block containing links to pending tags, comments and suggestions */
|
|
width: 100%;
|
|
border: solid 1px #b9d8d9;
|
|
border-radius: 6px;
|
|
clear: left;
|
|
}
|
|
|
|
.pending-info {
|
|
/* For the div containing a "pending" link (useful to preserve width of area-pending box width) */
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.pending-number-link {
|
|
/* Style for the "pending" links : the number of pending items appear bigger */
|
|
font-weight: bold;
|
|
font-size: 1.1em;
|
|
}
|
|
/* ==== PENDING - End ==== */
|
|
|
|
|
|
/* ==== USERBLOCK - Start ==== */
|
|
#area-userblock {
|
|
/* Appears if the "IntranetmainUserblock" system preference is defined */
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
border: solid 1px #b9d8d9;
|
|
border-radius: 6px;
|
|
|
|
}
|
|
|
|
.user-info {
|
|
/* For the div containing the information (useful to preserve width of area-userblock box width) */
|
|
margin: 8px;
|
|
}
|
|
/* ==== USERBLOCK - End ==== */
|
|
|
|
.main .row {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|