diff --git a/gulp/browserSyncManager.js b/gulp/browserSyncManager.js index e84f535f2..f3be925bc 100644 --- a/gulp/browserSyncManager.js +++ b/gulp/browserSyncManager.js @@ -1,13 +1,23 @@ var browserSync = require('browser-sync'); +var bsyncHandle = null; module.exports = { closeServer: closeServer, reloadServer: reloadServer, streamToServer: streamToServer, startServer: startServer, + getBSyncHandle: getBSyncHandle }; +function getBSyncHandle() { + return bsyncHandle; +} + +function initBSyncHandle(label) { + return bsyncHandle = ((label ? browserSync.create(label) : browserSync.create())); +} + function closeServer(label) { browserSync.get(label).exit(); } @@ -25,9 +35,9 @@ function startServer(args) { var port = args.port; var baseDir = args.baseDir; var middleware = args.middleware; - var open = args.open; + var open = args.open || false; // Callee, '08-servers.js' does not set this to a value so expect it to be undefined - var server = browserSync.create(label); + initBSyncHandle(label); var conf = { port: port, server: { @@ -38,6 +48,6 @@ function startServer(args) { if(middleware) { conf.middleware = args.middleware; } - server.init(conf); + bsyncHandle.init(conf); } \ No newline at end of file diff --git a/gulp/tasks/04-custom-css.js b/gulp/tasks/04-custom-css.js index 927dae71d..b81eded2f 100644 --- a/gulp/tasks/04-custom-css.js +++ b/gulp/tasks/04-custom-css.js @@ -8,24 +8,25 @@ let concat = require("gulp-concat"); let debug = require('gulp-debug'); var wrap = require("gulp-wrap"); var glob = require('glob'); +let browserSyncManager = require('../browserSyncManager'); let buildParams = config.buildParams; gulp.task('watch-css', gulp.series('select-view', (cb) => { - gulp.watch([buildParams.customCssMainPath(),buildParams.customNpmCssPath(),'!'+buildParams.customCssPath()], {interval: 1000, usePolling: true}, gulp.series('custom-css')); + var filesWatchGlob = [buildParams.customCssMainPath(), buildParams.customNpmCssPath()]; + var excludesFilesGlob = ['!'+buildParams.customCssPath()] + gulp.watch(filesWatchGlob.concat(excludesFilesGlob), {interval: 3000, usePolling: true}, gulp.series('custom-css')); cb(); -})); +})); // gulp.task('custom-css', gulp.series('select-view', () => { - return gulp.src([buildParams.customCssMainPath(),buildParams.customNpmCssPath(),'!'+buildParams.customCssPath()]) .pipe(concat(buildParams.customCssFile)) - .pipe(gulp.dest(buildParams.viewCssDir())); - - + .pipe(gulp.dest(buildParams.viewCssDir())) + .pipe(browserSyncManager.getBSyncHandle().stream()); })); diff --git a/package.json b/package.json index 9c2810b54..547af9385 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "primo-explore-devenv", - "version": "1.1.0", + "version": "1.1.1", "description": "The Exlibris Primo Open Discovery Framework", "author": "noamamit92", "devDependencies": { @@ -13,7 +13,7 @@ "babel-preset-stage-2": "^6.24.1", "babelify": "8.0.0", "bluebird": "3.5.4", - "browser-sync": "2.9.9", + "browser-sync": "^2.23.7", "browserify": "16.2.3", "camel-case": "^3.0.0", "colors": "^1.3.3", @@ -42,6 +42,7 @@ "gulp-streamify": "1.0.2", "gulp-template": "5.0.0", "gulp-uglify": "3.0.2", + "gulp-using": "^0.1.1", "gulp-util": "3.0.8", "gulp-wrap": "^0.15.0", "gulp-zip": "4.2.0", @@ -72,4 +73,4 @@ "> 2%" ], "repository": "https://github.com/ExLibrisGroup/primo-explore-devenv" -} +} \ No newline at end of file diff --git a/primo-explore/custom/.gitignore b/primo-explore/custom/.gitignore index 742d46278..d729330df 100644 --- a/primo-explore/custom/.gitignore +++ b/primo-explore/custom/.gitignore @@ -1,8 +1,15 @@ *.* # Add entries to prefixed with '!' to unhide your view files: # Eg: -# !*/css/** -# !*/html/** -# !*/img/** -# !*/js/** +#!*/css/** +#!*/js/** +#!*/html/** +#!*/img/** +!*/css/** +# The custom reskining files are now Git-visible from the above....BUT... +# the end-product of the build itself css/custom1.css does not need to be +# tracked hence the below +**/css/custom1.css +**/js/custom.js + diff --git a/primo-explore/custom/IAMS_VU2/css/README.md b/primo-explore/custom/IAMS_VU2/css/README.md new file mode 100644 index 000000000..71d94417c --- /dev/null +++ b/primo-explore/custom/IAMS_VU2/css/README.md @@ -0,0 +1,129 @@ +# The Primo New UI Customization Workflow Development Environment + + +##css documentation + +- Primo uses Angular Directives massively in this project + +- To learn more about directives see: +> https://docs.angularjs.org/guide/directive + +- Primo uses external directives from the Angular-material framework : +> https://material.angularjs.org/latest/ + +- Those directives are tagged by a prefix : "md-" + +- Primo also creates its own directives which are tagged by the "prm-" prefix. + + +Example: +``` +
+ + + + + + + + + +
+``` + + +- You can see in the example how we use : + +1. An HTML5 tag - header +2. A Primo directive : prm-topbar , prm-search-bar. +3. An external material design directive : md-progress-bar : +> https://material.angularjs.org/latest/api/directive/mdProgressLinear + + + +- When defining css rules it is important to understand the css cascading/specifity logic: + +> http://www.w3.org/TR/css3-cascade/ + +> https://specificity.keegan.st/ + + + + +- When you start working on customizing your css be aware of the ability to define css selectors based on the directive name, which is actually equivalent +to an html tag - this will enable you changing the design of a component cross-system without relying on id's/classes + +- For the example above we can define selectors: + +``` +prm-topbar input {....} +prm-topbar.md-primoExplore-theme input {....} +``` +- Primo is using a theme inside angular-material to define a palette of colors see: +> https://material.angularjs.org/latest/Theming/01_introduction + + +- This means that you will often encounter a class "md-primoExplore-theme" attached to elements. + + + +##Recipes/Examples: + + +# css Recipe 1 - Color Scheme + +- Open a new command line window + +- cd to the project base directory (C:\**\**\primo-explore-devenv) +- Run `gulp css-colors` to save the OTB css file +- Run `css-color-extractor primo-explore/tmp/app.css --format=css > primo-explore/tmp/colors.css` to extract the color definitions from the OTB css file and copy the css rules to primo-explore/custom/css/custom1.css + + +Run the following steps repeatedly until you are satisfied with the result + + +- Choose a color from the interface (using your browsers' dev tools or extensions such as colorzilla) + + +- Choose the new color from your library color scheme +- Replace all values in the custom1.css file +- Save and refresh your browser + + + +# css Recipe 2 - Moving the Facets to the Left + + +- Select the parent container containing the search result and the facets +- Copy the selector definition using your browsers' dev tools +- Define the container as +``` +display:flex; +flex-flow:row-reverse; +``` + + +- complete css definition: +``` +prm-search > md-content.md-primoExplore-theme .main { + display: -webkit-flex; !* Safari *! + -webkit-flex-flow: row-reverse wrap; !* Safari 6.1+ *! + display: flex; + flex-flow: row-reverse wrap; + +} +.screen-gt-sm .sidebar{ + webkit-flex: 0 0 15%; + flex: 0 0 15%; +} +``` +- Save and refresh your browser + + + + + + + + + diff --git a/primo-explore/custom/IAMS_VU2/css/bl_main_sitesearch_skin.css b/primo-explore/custom/IAMS_VU2/css/bl_main_sitesearch_skin.css new file mode 100644 index 000000000..195cee4e4 --- /dev/null +++ b/primo-explore/custom/IAMS_VU2/css/bl_main_sitesearch_skin.css @@ -0,0 +1,1065 @@ +@import "./header.css"; +@import "./footer.css"; +@import "./modal.css"; + + +.sidebar-inner-wrapper { + background: #e9e9e9; +} + + +md-content, +md-content.md-primoExplore-theme { + background: #e9e9e9 !important; +} + + +/*****************************************************************************/ +/* Global settings */ +/*****************************************************************************/ +/* Set fonts */ +body { + font-family: Arial, Helvetica, sans-serif; +} + +body { + background: #e9e9e9 url("../img/socam-hero-image-09.jpg") no-repeat center top; +} + +/* Colour of loading animation */ +.diamond { + background-color: #046b99 !important; +} + +/* Modify case for all main buttons (doesn't apply to buttons when logged in for requesting etc.) */ +.md-button { + text-transform: none; +} + + + +/* lots of text and hover boxes to change from aqua to blue*/ +.bar prm-authentication .md-button.link-alt-color, +.bar prm-authentication .section-title prm-icon.md-button, +.is-gallery-view prm-gallery-item .collection-element .item-actions .md-button, +.is-gallery-view prm-gallery-item .collection-element .item-actions button, +.is-grid-view prm-gallery-item .collection-element .item-actions .md-button, +.is-grid-view prm-gallery-item .collection-element .item-actions button, +.md-button.button-as-link.link-alt-color, +.section-title .bar prm-authentication prm-icon.md-button, +.section-title prm-icon.md-button.button-as-link, +prm-gallery-collection .collection-folder .item-actions .md-button, +prm-gallery-collection .collection-folder .item-actions button { + color: #046b99; +} + +.bar prm-authentication .md-button.link-alt-color._md-focused:not([disabled]), +.bar prm-authentication .md-button.link-alt-color.hovered:not([disabled]), +.bar prm-authentication .md-button.link-alt-color.md-focused:not([disabled]), +.bar prm-authentication .md-button.link-alt-color:focus:not([disabled]), +.bar prm-authentication .md-button.link-alt-color:hover:not([disabled]), +.bar prm-authentication .section-title prm-icon.md-button._md-focused:not([disabled]), +.bar prm-authentication .section-title prm-icon.md-button.hovered:not([disabled]), +.bar prm-authentication .section-title prm-icon.md-button.md-focused:not([disabled]), +.bar prm-authentication .section-title prm-icon.md-button:focus:not([disabled]), +.bar prm-authentication .section-title prm-icon.md-button:hover:not([disabled]), +.is-gallery-view prm-gallery-item .collection-element .item-actions ._md-focused.md-button:not([disabled]), +.is-gallery-view prm-gallery-item .collection-element .item-actions .hovered.md-button:not([disabled]), +.is-gallery-view prm-gallery-item .collection-element .item-actions .md-button:focus:not([disabled]), +.is-gallery-view prm-gallery-item .collection-element .item-actions .md-button:hover:not([disabled]), +.is-gallery-view prm-gallery-item .collection-element .item-actions .md-focused.md-button:not([disabled]), +.is-gallery-view prm-gallery-item .collection-element .item-actions button._md-focused:not([disabled]), +.is-gallery-view prm-gallery-item .collection-element .item-actions button.hovered:not([disabled]), +.is-gallery-view prm-gallery-item .collection-element .item-actions button.md-focused:not([disabled]), +.is-gallery-view prm-gallery-item .collection-element .item-actions button:focus:not([disabled]), +.is-gallery-view prm-gallery-item .collection-element .item-actions button:hover:not([disabled]), +.is-grid-view prm-gallery-item .collection-element .item-actions ._md-focused.md-button:not([disabled]), +.is-grid-view prm-gallery-item .collection-element .item-actions .hovered.md-button:not([disabled]), +.is-grid-view prm-gallery-item .collection-element .item-actions .md-button:focus:not([disabled]), +.is-grid-view prm-gallery-item .collection-element .item-actions .md-button:hover:not([disabled]), +.is-grid-view prm-gallery-item .collection-element .item-actions .md-focused.md-button:not([disabled]), +.is-grid-view prm-gallery-item .collection-element .item-actions button._md-focused:not([disabled]), +.is-grid-view prm-gallery-item .collection-element .item-actions button.hovered:not([disabled]), +.is-grid-view prm-gallery-item .collection-element .item-actions button.md-focused:not([disabled]), +.is-grid-view prm-gallery-item .collection-element .item-actions button:focus:not([disabled]), +.is-grid-view prm-gallery-item .collection-element .item-actions button:hover:not([disabled]), +.md-button.button-as-link.link-alt-color._md-focused:not([disabled]), +.md-button.button-as-link.link-alt-color.hovered:not([disabled]), +.md-button.button-as-link.link-alt-color.md-focused:not([disabled]), +.md-button.button-as-link.link-alt-color:focus:not([disabled]), +.md-button.button-as-link.link-alt-color:hover:not([disabled]), +.section-title .bar prm-authentication prm-icon.md-button._md-focused:not([disabled]), +.section-title .bar prm-authentication prm-icon.md-button.hovered:not([disabled]), +.section-title .bar prm-authentication prm-icon.md-button.md-focused:not([disabled]), +.section-title .bar prm-authentication prm-icon.md-button:focus:not([disabled]), +.section-title .bar prm-authentication prm-icon.md-button:hover:not([disabled]), +.section-title prm-icon.md-button.button-as-link._md-focused:not([disabled]), +.section-title prm-icon.md-button.button-as-link.hovered:not([disabled]), +.section-title prm-icon.md-button.button-as-link.md-focused:not([disabled]), +.section-title prm-icon.md-button.button-as-link:focus:not([disabled]), +.section-title prm-icon.md-button.button-as-link:hover:not([disabled]), +prm-gallery-collection .collection-folder .item-actions ._md-focused.md-button:not([disabled]), +prm-gallery-collection .collection-folder .item-actions .hovered.md-button:not([disabled]), +prm-gallery-collection .collection-folder .item-actions .md-button:focus:not([disabled]), +prm-gallery-collection .collection-folder .item-actions .md-button:hover:not([disabled]), +prm-gallery-collection .collection-folder .item-actions .md-focused.md-button:not([disabled]), +prm-gallery-collection .collection-folder .item-actions button._md-focused:not([disabled]), +prm-gallery-collection .collection-folder .item-actions button.hovered:not([disabled]), +prm-gallery-collection .collection-folder .item-actions button.md-focused:not([disabled]), +prm-gallery-collection .collection-folder .item-actions button:focus:not([disabled]), +prm-gallery-collection .collection-folder .item-actions button:hover:not([disabled]) { + color: #fff; + background-color: #046b99; +} + +/*****************************************************************************/ +/* Top nav bar */ +/*****************************************************************************/ +/* The very top of the page is tha BL standard header, loaded via AngularJS on BL_prmTopbarBefore*/ +/* There is a BL logo on that top banner so we hide the logo provided through the Primo back office */ + +/* hide the usual logo */ +prm-topbar #banner { + display: none; +} + + +/*Overriding some styles on the BL standard header */ + +#header-scrape .header__util { + height: 61px; +} + +#header-scrape .beta-logo { + background: url("../img/beta-beige-71x40.jpg") no-repeat; + width: 71px !important; + height: 40px !important; + background-size: 71px 40px; + image-rendering: -webkit-optimize-contrast; + margin-left: 15px; +} + + +/* We've added a logo saying 'beta service' to the standard BL header +/* the background is beige. text is red */ + +.beta-service-link a { + background: #f0e6da; + color: #e24b54 !important; + display: block; + font-size: 1.2em; + width: 65px; + height: 40px; + text-align: center; + padding: 6px 0; + margin-left: 14px; + border-block: none; + cursor: pointer; + font-weight: 600; +} + +.beta-service-link a:hover { + box-shadow: none; +} + +.beta-right { + margin-left: 40px; +} + + +/*Hide some parts of the BL standard header*/ +.search-container { + display: none +} + +.nav-secondary { + display: none +} + +/*hide login mobile*/ +#header-scrape .login-mobile { + display: none; +} + + + +/*****************/ +/* Top nav bar */ +/*****************/ + +/*This makes the nav bar sit in the middle of the page, aligned with under the header*/ +.top-nav-bar { + max-width: 976px; + margin: 0 auto; +} + +/*This spacer on the left of the bar doesn't have a style so we have to select it using its place as first flex-50 inside the topbar*/ +/*Make it smaller to move the 'Home' link to the left*/ +.top-nav-bar :nth-child(1 of .flex-50) { + max-width: 45px +} + + +.prm-secondary-color, +prm-search-bookmark-filter .md-button, +prm-topbar .top-nav-bar { + background: #1c304a; +} + + +/*reduce the height of the space so that it fits in the secondary nav of the standard header */ +prm-user-area-expandable { + height: 40px; +} + +/*Login button */ +/* Change it to white with blue text & hover */ +prm-topbar .md-button:not(.disable-hover) { + color: #ffffff !important; + background-color: #1c304a; + font-weight: 400 !important; + line-height: 1.5; + font-family: Arial, Helvetica, sans-serif; + font-size: 1rem !important; + white-space: nowrap; + height: 40px; + max-width: 14em; + /* border: thin solid #046b99;*/ +} + +prm-topbar .md-button:hover { + background-color: #046b99 !important; + color: #fff !important; + height: 40px; + /* box-shadow: 0 0 3px #046b99, 0 0 6px #fff, 0 0 9px #046b99;*/ +} + + +top-nav-bar-links .md-button:not(.disable-hover) { + color: #ffffff !important; + background-color: #1c304a; + font-weight: 400 !important; + line-height: 1.5; + font-family: Arial, Helvetica, sans-serif; + font-size: 1rem !important; + white-space: nowrap; + height: 40px; + /* border: thin solid #046b99;*/ +} + +top-nav-bar-links .md-button:hover { + background-color: #046b99 !important; + color: #fff !important; + white-space: nowrap; + height: 40px; + /* box-shadow: 0 0 3px #046b99, 0 0 6px #fff, 0 0 9px #046b99;*/ +} + +top-nav-bar-links .md-button:focus { + background-color: #046b99 !important; + color: #fff !important; + white-space: nowrap; + height: 40px; + /* box-shadow: 0 0 3px #046b99, 0 0 6px #fff, 0 0 9px #046b99;*/ +} + +/*style for the menu buttons?*/ +top-nav-bar-links .hoverable-over-dark:not(.disable-hover) { + color: #ffffff !important; + background-color: #1c304a; + font-weight: 400 !important; + line-height: 1.5; + font-family: Arial, Helvetica, sans-serif; + font-size: 1rem !important; + white-space: nowrap; + height: 40px; +} + + +/*working on this - removed .layout-full-height, from the style below*/ +prm-main-menu[menu-type=menu], +prm-main-menu[menu-type=menu] .top-nav-bar-links, +prm-topbar .md-button:not(.md-icon-button), +prm-topbar .top-nav-bar, +prm-user-area, +prm-user-area ._md-fab-toolbar-content, +prm-user-area ._md-fab-toolbar-wrapper, +prm-user-area .md-fab-action-item, +prm-user-area .md-fab-toolbar-content, +prm-user-area .md-fab-toolbar-wrapper, +prm-user-area .md-toolbar-tools, +prm-user-area md-fab-toolbar, +prm-user-area md-fab-trigger, +prm-user-area md-toolbar, +prm-user-area prm-authentication { + height: 40px; + min-height: 20px; +} + + +/*menu in mobile mode*/ +.layout-full-height { + height: 100% +} + +prm-main-menu[menu-type=full] .md-button, +prm-main-menu[menu-type=full] .md-button .md-headline, +prm-main-menu[menu-type=full] .overlay-menu-item .md-headline { + font-weight: 400; + font-size: 1em; + color: #000; +} + +/* Hides the Languages button in mobile view menu */ +prm-main-menu[menu-type=full] .overlay-menu-item { + display: none !important; +} + + +/* Pin next to login */ +prm-search-bookmark-filter { + height: 40px; +} + +prm-topbar prm-search-bookmark-filter a { + color: #ffffff !important; + background-color: #1c304a; +} + +/* Moves the Settings header down to show all topbar */ +body>primo-explore>div>prm-account>div { + padding-bottom: 142px; +} + +/* Resizes Personal Details box to show all content */ +#personalDetails { + min-width: 500px; + /* set a minimum width */ + min-height: 275px +} + +@media (max-width: 768px) { + #personalDetails { + min-width: unset; + /* remove the minimum width on smaller screens */ + } +} + +/* Hides Language selection in Personal Details section */ +body>primo-explore>div>prm-account>md-content>div.main.layout-row.flex>prm-personal-info>div.layout-row.layout-align-start-start>div.width-100.flex-xl-25.flex-md-30, +body>primo-explore>div>prm-account>md-content>div.main.layout-row.flex>prm-personal-info>div.layout-align-start-start.layout-column>div.width-100.flex-xl-25.flex-md-30 { + display: none; +} + +/* Hides the Library Card button in user menu */ +.my-library-card-ctm { + display: none; +} + +/* Hides the Languages button in user menu */ +.my-languages-ctm { + display: none; +} + +/*Hides the RefWorks button in user menu */ +.my-refworks-ctm { + display: none; +} + +.my-refworks-separator-ctm { + display: none; +} + +prm-library-card-menu { + display: none; +} + + +/* Remove the QR code button from topbar */ +#qrCodeScanner { + display: none; +} + +/* Selector for sub-headings in topbar 'show more' section */ +.md-subhead { + display: none; +} + + +/*****************************************************************************/ +/* Search boxes */ +/*****************************************************************************/ + +.prm-primary-bg.prm-hue1, +prm-atoz-search-bar.prm-hue1, +prm-browse-search-bar.prm-hue1, +prm-collection-gallery-header .prm-hue1.collection-header-inner, +prm-newspapers-search-bar.prm-hue1, +prm-search-bar.prm-hue1, +prm-spinner.prm-hue1.overlay-cover.light-on-dark:after, +prm-tags-search-bar.prm-hue1, +prm-tree-nav prm-spinner .prm-hue1.diamond { + background-color: #0D5257; +} + +/* Increase search box banner from 1.5 general padding, to 3em padding under and above main search box +SAM - reduced top padding from prm-search-bar as it interfered with the login button. Using margin instead. + +prm-atoz-search-bar, prm-browse-search-bar, prm-newspapers-search-bar, prm-search-bar, prm-tags-search-bar { + padding-bottom: 3em; padding-top: 3em; +} + +*/ + +prm-atoz-search-bar, +prm-browse-search-bar, +prm-newspapers-search-bar, +prm-search-bar, +prm-tags-search-bar { + padding-bottom: 3em; + padding-top: 3em; +} + +prm-search-bar { + /*width: 976px;*/ + padding-bottom: 3em; + padding-top: 1em; + /*margin: 200px auto 60px;*/ + margin: 200px 0 60px; + background: transparent !important; + /*height: 250px;*/ +} + +@media (max-width: 992px) { + prm-search-bar { + margin: 120px 0 0; + } +} + + +/* Change the search icon's colour +prm-search-bar .simple-search-wrapper .search-actions .md-button { + color:#fff; + background:#CF0303; +} +*/ +/* Change the background colour of the search icon on hover, currently black with 0.5 transparency +prm-search-bar .simple-search-wrapper .search-actions .md-button:hover { + background-color:rgba(0, 0, 0, 0.5); +} +*/ + +/*search buttons on advanced search +.md-button.button-confirm:hover:not([disabled]) { + color:#fff; + background:#CF0303 !important; +} +*/ +.md-button.button-confirm { + color: #fff; + background: #CF0303 !important; +} + +.md-button.button-confirm:hover { + color: #CF0303 !important; + background: #e9e9e9 !important; + /*background-color:rgba(0, 0, 0, 0.5);*/ +} + + +/* Enlarge Advanced search button, add border and glow on hover */ +.md-button.switch-to-advanced { + font-size: 120%; + border: thin solid #046b99; +} + +.md-button.switch-to-advanced:hover { + background-color: #046b99 !important; + color: #fff !important; + /*box-shadow: 0 0 3px #046b99, 0 0 6px #fff, 0 0 9px #046b99;*/ +} + +/* Enlarge Simple search button, add border and glow on hover */ +.md-button.switch-to-simple { + font-size: 120%; + border: thin solid #046b99; +} + +.md-button.switch-to-simple:hover { + color: #fff !important; + background-color: #046b99 !important; + /* box-shadow: 0 0 3px #046b99, 0 0 6px #fff, 0 0 9px #046b99;*/ +} + +/* Background colour to Advanced Search button white background with black text */ +prm-search-bar .search-switch-buttons .md-button.switch-to-advanced { + color: #046b99; + background-color: #ffffff; + border: thin solid #046b99; +} + +/* Colour and background of Simple search when on Advanced; white background with black text */ +prm-search-bar .search-switch-buttons .md-button.switch-to-simple { + color: #046b99; + background-color: #ffffff; + border: thin solid #046b99; +} + +/*Selector for Advanced search input boxes, setting background */ +.advanced-search-wrapper .inputs-row>md-input-container:last-child, +prm-search-bar .advanced-search-wrapper .inputs-row>md-input-container:last-child, +prm-tags-search-bar .advanced-search-wrapper .inputs-row>md-input-container:last-child { + background: #1c304a) none repeat scroll 0 0 !important; +} + +@media (max-width: 992px) { + primo-user-area { + display: none; + } +} + +/* Background of main search bar */ +/* +.prm-primary-bg, prm-atoz-search-bar, prm-browse-search-bar, prm-collection-gallery-header .collection-header-inner, prm-newspapers-search-bar, prm-search-bar, prm-spinner.overlay-cover.light-on-dark:after, prm-tags-search-bar { + background: #e9e9e9 url("../img/socam-hero-image-09-lower.jpg") no-repeat center top; +} +*/ +/* Background to Advanced Search */ +/*prm-search-bar .advanced-search-backdrop { + background: #e9e9e9 url("../img/socam-hero-image-09-lower.jpg") no-repeat center top; +} +*/ + +/*****************************************************************************/ +/* Home page */ +/*****************************************************************************/ + +/* QuickChat icon */ +.quick-chat-icon { + margin: auto; + width: 238px; + height: 86px; +} + +.column1 { + flex: 65; + layout: column; +} + +.column2 { + flex: 35; + layout: column; +} + + +.bl-catrow { + width: 100%; + display: inline-flex; +} + +.bl-catimagebox { + width: 100px; + padding-right: 16px; +} + +.bl-catimage { + width: 96px; + height: 54px; + background-size: 96px 54px; + image-rendering: -webkit-optimize-contrast; + display: block; +} + +.bl-cattxtbox { + width: 100%; +} + +.bl-cattitle { + color: #000; +} + +.bl-catdesc { + color: #000; +} + + +.bl-explore-advert { + content: url("../img/gates-at-the-british-library-st-pancras-building.jpg"); +} + +.bl-digiman-advert { + content: url("../img/illustration-from-the-ten-birth-tales-or-the-last-ten-jatakas.jpg"); +} + +.bl-illman-advert { + content: url("../img/detail-of-a-miniature-of-the-author-writing-his-book-roman-de-la-rose-f133.jpg"); +} + + + + + + + +/*********************************************************************/ +/* BRIEF RESULTS PAGE */ +/*********************************************************************/ + +/* record title */ +prm-brief-result .item-title span { + color: #1c304a; +} + +/*****************************************************************************/ +/* Facets */ +/*****************************************************************************/ + +/* Give background colour to facet titles */ +.section-title.md-button.md-primoExplore-theme.md-ink-ripple.layout-fill { + /* background: #1c304a - the dark one */ + /* background: #046b99 - the lighter one */ + background: #046b99 +} + +prm-facet-exact .section-title:focus, +prm-facet-exact .section-title:hover, +prm-facet-exact .section-title:active { + color: #046b99 !important; +} + + +/* Change the colour of the chevrons on the facet headers */ +prm-facet-exact .section-title prm-icon { + color: #fff; +} + +/* Change section header titles to white text */ +.section-title-header, +.sidebar-header { + color: #ffffff; +} + +.section-title-header:hover, +.sidebar-header:hover, +.sidebar-header:active { + color: #046b99 !important; +} + +/* Sort by text changed to white with section title, changing back to black as it has no background */ +h3.section-title-header { + color: #000; +} + +/*Give date input boxes a background colour */ +.ng-valid-min, +.ng-valid-max { + background: rgb(28, 48, 74, 0.1) none repeat scroll 0 0 !important; +} + +/* Add to facets to make text larger */ +.section-content .md-chips .md-chip.wrapping-chip { + font-size: 120%; +} + + +/*****************************************************************************/ +/* Full record */ +/*****************************************************************************/ + +/* Hide Tags section from full record – pane and left menu */ +div#tags { + display: none; +} + +[aria-label="Tags"] { + display: none; +} + +/* Remove BibTex and E-Mail from Send To options */ +#BibTeXPushTo { + display: none; +} + +#E-mail { + display: none; +} + +/*RE-order the Center Sections */ +#full-view-container>*:first-child { + display: flex; + flex-direction: column; +} + +#details { + order: 1; + margin-top: -2em; +} + +#links { + order: 2; +} + +#getit_link1_0 { + order: 3; +} + +#getit_link1_1 { + order: 4; + margin-bottom: -2em; +} + +#getit_link2 { + order: 5; +} + +#action_list { + order: 6; +} + +/*re-order the Left Navigation on the Detailed Page */ +[aria-label="Details"] { + order: 1 !important; +} + +[aria-label="Links"] { + order: 2 !important; +} + +[aria-label="Online access"] { + order: 3 !important; +} + +[aria-label="Physical item"] { + order: 4 !important; +} + +[aria-label="No orderable item"] { + order: 4 !important; +} + +[aria-label="I want this"] { + order: 5 !important; +} + +[aria-label="Send to"] { + order: 6 !important; +} + +/*prm-opac { display: none}*/ +prm-requests-services-ovl { + display: none +} + +/*prm-view-online { display: none}*/ + +.bl-tab1-content { + font-size: 15px; +} + +/*****************************************************************************/ +/* Settings page */ +/*****************************************************************************/ + + + +/*****************************************************************************/ +/* Footer */ +/*****************************************************************************/ + +/* Footer box and link colour */ +.grid_61 { + width: 100% +} + +.new-footer #page-footer { + background-color: #131313; + float: left; + width: 100% +} + +.new-footer #page-footer, +.new-footer #page-footer a { + color: #a09c9d +} + +.new-footer #page-footer .footer-block-inner { + display: block; + min-height: 100px +} + +.new-footer #page-footer .footer-block-inner .menu-block ul li a { + border-left: 1px solid #4e4e4e; + display: inline-block; + font-size: 12px; + font-size: .8rem; + margin-top: 0; + padding: 0 25px +} + +.new-footer #page-footer .footer-block-inner .menu-block ul li.desktop a, +.new-footer #page-footer .footer-block-inner .menu-block ul li.mobile a, +.new-footer #page-footer .footer-block-inner .menu-block ul li.noleftborder a { + border-left: 0 none; + padding-left: 0 +} + +.h-menu { + overflow: hidden +} + +.h-menu li { + float: left +} + +.footer-block .text-block p:last-of-type { + padding-left: 16px; + text-align: center; +} + +.footer-block-inner, +.main-content-block-inner { + position: relative; + float: none; + display: block; + margin: 0 auto +} + +/* This takes away the bullet points in bottom list */ +footer .menu-block ul.h-menu { + padding-top: 1rem; + display: grid; + justify-content: center; + grid-auto-flow: column; + list-style: none; +} + +/*****************************************************************************/ +/* Availability section */ +/*****************************************************************************/ + + +/* change the colour of the Online Access link to black */ +/*.not_restricted { + color: #000; +} +*/ + +/* message specific to records without an orderable item*/ +/* These links shouldn't actually exist any more */ +/* giving it a display none to fix a problem in the normalisation */ +.bl-no-item { + color: #000000 !important; + position: relative; + z-index: 100; + display: none +} + + +/* Browse this collection link*/ +.bl-browse-hierarchy { + color: #1c304a !important; +} + +.bl-browse-hierarchy a:hover { + border-bottom-width: 0px !important; + color: #1c304a !important +} + +/* hierarchy icon */ +.avail-img { + max-width: 17px; + vertical-align: bottom; + position: relative; + margin: 0 0px; + z-index: 100; +} + +.not_restricted, +[class*=check_] { + color: #1c304a !important; +} + +/*****************************************************************************/ +/* Title bar - appears below the logo+menus bar. Used in prm-topbar-after */ +/*****************************************************************************/ +/* !!! The title bar element is currently completely hidden, so most of this section is moot */ + + +/* Explore Archives and Manuscripts text*/ +.horizontal-bg-container-identity h2 { + font-size: 1.625rem; + font-weight: 400; + line-height: 1.5; + color: #fff; +} + +h2.identity-text-main { + font-size: 1.625rem; + font-weight: 400; + line-height: 1.5; + color: #fff; +} + +@media (max-width: 450px) { + h2.identity-text-main { + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #fff; + } +} + +.bl-top-row { + position: relative; + margin: 0 auto; +} + +.bl-title.container { + position: relative; + margin: 0 auto; +} + +.bl-title.container.container-header { + padding: 0; +} + +.bl-title.container.container-identity { + padding: 0; +} + +.bl-title.container { + position: relative; + margin: 0 auto; +} + +.bl-title.container.container-header, +.bl-title.container.container-identity { + padding: 0; + border-top: 2px solid white; +} + +.bl-title.container.main-nav-container-inner { + overflow-y: visible; +} + +.bl-title.identity { + padding: 2px 0px 1px; + margin-left: 1em; +} + +/*This is the main style for the bar with the title*/ +.horizontal-bg-container-identity { + background-color: #046b99; + height: 50px; +} + +@media (max-width: 450px) { + .horizontal-bg-container-identity { + background-color: #046b99; + height: 30px; + } +} + +/* We don't have a link at the moment, but if we do...*/ +h2.bl-title.identity-text-main a { + color: #333; + font-weight: lighter; +} + +h2.bl-title.identity-text-main a:hover { + background: transparent; + box-shadow: none; +} + +h2.identity-text-main a { + font-family: Arial, sans-serif; + font-size: 18px; +} + +/*****************************************************************************/ +/* Footer */ +/*****************************************************************************/ + +.footer-column { + flex: 100; + layout: column; + color: #a09c9d; + background-color: #131313; + float: left; + width: 100% +} + +.footer-column a { + color: #a09c9d +} + + +/* Footer box and link colour */ + + +.grid_61 { + width: 100% +} + +.new-footer #page-footer { + background-color: #131313; + float: left; + width: 100% +} + +.new-footer #page-footer, +.new-footer #page-footer a { + color: #a09c9d +} + +.new-footer #page-footer .footer-block-inner { + display: block; + min-height: 100px +} + +.new-footer #page-footer .footer-block-inner .menu-block ul li a { + border-left: 1px solid #4e4e4e; + display: inline-block; + font-size: 12px; + font-size: .8rem; + margin-top: 0; + padding: 0 25px +} + +.new-footer #page-footer .footer-block-inner .menu-block ul li.desktop a, +.new-footer #page-footer .footer-block-inner .menu-block ul li.mobile a, +.new-footer #page-footer .footer-block-inner .menu-block ul li.noleftborder a { + border-left: 0 none; + padding-left: 0 +} + +.h-menu { + overflow: hidden +} + +.h-menu li { + float: left +} + +.footer-block .text-block p:last-of-type { + padding-left: 16px; + text-align: center; +} + +.footer-block-inner, +.main-content-block-inner { + position: relative; + float: none; + display: block; + margin: 0 auto +} + +/* This takes away the bullet points in bottom list */ + +footer .menu-block ul.h-menu { + padding-top: 1rem; + display: grid; + justify-content: center; + grid-auto-flow: column; + list-style: none; +} \ No newline at end of file diff --git a/primo-explore/custom/IAMS_VU2/css/footer.css b/primo-explore/custom/IAMS_VU2/css/footer.css new file mode 100644 index 000000000..6ddee762e --- /dev/null +++ b/primo-explore/custom/IAMS_VU2/css/footer.css @@ -0,0 +1,141 @@ +#footer-static { + background-color: #000; + line-height: 1.375rem; + font-size: .875rem; + font-weight: 400; + color: #757575; + font-family: Arial,Helvetica,sans-serif +} + +#footer-static *,#footer-static:before,#footer-static:after { + box-sizing: border-box; + box-shadow: none; +} + +#footer-static .footer .container { + padding: 40px 45px 20px; + max-width: 880px; + margin: 0 auto +} + +@media (min-width: 992px) { + #footer-static .footer .container { + padding:40px 15px 20px + } +} + +#footer-static .footer ul { + list-style: none; + padding: 0 +} + +#footer-static .footer h5 { + font-size: 1.125rem; + color: #fff; + margin: 0 0 8px +} + +#footer-static .footer__navigation { + display: flex; + flex-direction: column +} + +@media (min-width: 768px) { + #footer-static .footer__navigation { + flex-direction:row; + flex-wrap: wrap + } +} + +@media (min-width: 992px) { + #footer-static .footer__navigation { + flex-wrap:nowrap + } +} + +#footer-static .footer__navigation a { + display: block; + padding: 5px 0; + font-size: .875rem; + line-height: 1.375rem +} + +#footer-static .footer__col { + width: 100%; + max-width: 100% +} + +@media (min-width: 768px) { + #footer-static .footer__col { + max-width:50% + } +} + +@media (min-width: 992px) { + #footer-static .footer__col { + max-width:25% + } +} + +#footer-static .footer__legal { + display: flex; + flex-direction: column +} + +@media (min-width: 768px) { + #footer-static .footer__legal { + flex-direction:row; + justify-content: center + } +} + +#footer-static .footer__legal a { + font-size: .875rem; + line-height: 1.313rem; + padding: 5px 0; + display: block; + text-align: left +} + +@media (min-width: 768px) { + #footer-static .footer__legal a { + border-left:1px solid #495057; + text-align: center; + padding: 0 12px + } +} + +@media (min-width: 992px) { + #footer-static .footer__legal a { + padding:0 18px + } +} + +@media (min-width: 768px) { + #footer-static .footer__legal li:first-of-type a { + border:none + } +} + +#footer-static .footer__copyright { + font-size: .875rem; + line-height: 1.313rem; + margin-top: 15px; + text-align: left +} + +@media (min-width: 768px) { + #footer-static .footer__copyright { + text-align:center + } +} + +#footer-static a { + text-decoration: none; + color: #999 +} + +#footer-static a:hover { + text-decoration: underline; +} + diff --git a/primo-explore/custom/IAMS_VU2/css/header.css b/primo-explore/custom/IAMS_VU2/css/header.css new file mode 100644 index 000000000..0c88babd0 --- /dev/null +++ b/primo-explore/custom/IAMS_VU2/css/header.css @@ -0,0 +1,627 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ +html { + line-height: 1.15; + -webkit-text-size-adjust: 100% +} + +body { + margin: 0 +} + +main { + display: block +} + +h1 { + font-size: 2em; + margin: .67em 0 +} + +hr { + box-sizing: content-box; + height: 0; + overflow: visible +} + +pre { + font-family: monospace,monospace; + font-size: 1em +} + +a { + background-color: transparent +} + +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted +} + +b,strong { + font-weight: bolder +} + +code,kbd,samp { + font-family: monospace,monospace; + font-size: 1em +} + +small { + font-size: 80% +} + +sub,sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline +} + +sub { + bottom: -.25em +} + +sup { + top: -.5em +} + +img { + border-style: none +} + +button,input,optgroup,select,textarea { + font-family: inherit; + font-size: 100%; + line-height: 1.15; + margin: 0 +} + +button,input { + overflow: visible +} + +button,select { + text-transform: none +} + +button,[type=button],[type=reset],[type=submit] { + -webkit-appearance: button +} + +button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner { + border-style: none; + padding: 0 +} + +button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring { + outline: 1px dotted ButtonText +} + +fieldset { + padding: .35em .75em .625em +} + +legend { + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal +} + +progress { + vertical-align: baseline +} + +textarea { + overflow: auto +} + +[type=checkbox],[type=radio] { + box-sizing: border-box; + padding: 0 +} + +[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button { + height: auto +} + +[type=search] { + -webkit-appearance: textfield; + outline-offset: -2px +} + +[type=search]::-webkit-search-decoration { + -webkit-appearance: none +} + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit +} + +details { + display: block +} + +summary { + display: list-item +} + +template { + display: none +} + +[hidden] { + display: none +} + +#header-scrape { + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + font-family: Arial,Helvetica,sans-serif; + color: #fff +} + +#header-scrape *,#header-scrape :after,#header-scrape :before { + box-sizing: border-box +} + +#header-scrape .header { + background: #1c304a; + border-bottom: 1px solid #fff; + display: none +} + +@media (min-width: 992px) { + #header-scrape .header { + display:flex + } +} + +#header-scrape .header .nav { + border-top: 1px solid #fff; + justify-content: space-between +} + +#header-scrape .header .nav a { + transition: background-color .15s ease-in-out; + border-right: 1px solid #fff +} + +#header-scrape .header .nav a:hover { + background-color: #000 +} + +#header-scrape .header__top { + width: 100%; + flex-direction: column; + display: flex +} + +#header-scrape .header__util { + display: flex; + justify-content: space-between; + align-items: center; + width: 100% +} + +#header-scrape .login { + display: flex; + align-items: center +} + +#header-scrape .login-mobile { + background: #000; + display: flex; + justify-content: flex-end +} + +@media (min-width: 992px) { + #header-scrape .login-mobile { + background:none; + display: none + } +} + +#header-scrape .login-link { + color: #fff; + display: block; + padding: 4px 12px +} + +#header-scrape .login-link:hover { + text-decoration: underline +} + +@media (min-width: 992px) { + #header-scrape .login-link { + padding:17px 12px + } +} + +#header-scrape .site-logo__link { + display: block; + z-index: 1; + position: relative +} + +#header-scrape .site-logo__link img { + display: block +} + +#header-scrape .nav { + display: flex; + padding-left: 0; + margin: 0; + list-style: none; + overflow: hidden +} + +#header-scrape .nav-more { + padding-left: 0; + margin: 0; + list-style: none; + position: relative +} + +#header-scrape .nav-secondary { + background: #1c304a; + max-width: 100% +} + +#header-scrape .nav-secondary-nav { + display: flex +} + +#header-scrape .nav-secondary a { + white-space: nowrap; + padding: 8px 15px; + transition: background-color .15s ease-in-out +} + +#header-scrape .nav-secondary a:hover { + background-color: #046b99 +} + +#header-scrape .nav-secondary a.nav-item--more_link { + padding-right: 35px; + position: relative +} + +#header-scrape .nav-secondary a.nav-item--more_link.open { + background: #046b99 +} + +#header-scrape .nav-secondary a.nav-item--more_link.open:after { + transform: translateY(3px) rotate(225deg) +} + +#header-scrape .nav-secondary a.nav-item--more_link:after { + content: ""; + height: 10px; + width: 10px; + display: inline-block; + vertical-align: middle; + border-right: 2px solid #fff; + border-bottom: 2px solid #fff; + position: absolute; + top: 0; + bottom: 0; + right: 15px; + margin: auto 0; + transform: translateY(-3px) rotate(45deg) +} + +#header-scrape .nav-item a { + color: #fff; + padding: 8px 15px; + display: block; + font-size: 1rem; + text-align: center +} + +#header-scrape .nav-item:last-child a { + border-right: none +} + +#header-scrape .nav-toggle { + border: none; + outline: none; + background: none +} + +#header-scrape .nav-toggle__line { + width: 30px; + height: 4px; + position: relative; + background: #fff +} + +#header-scrape .nav-toggle__line:before,#header-scrape .nav-toggle__line:after { + content: ""; + display: block; + width: 30px; + height: 4px; + background: #fff +} + +#header-scrape .nav-toggle__line:before { + position: absolute; + top: -11px +} + +#header-scrape .nav-toggle__line:after { + position: absolute; + top: 11px +} + +@media (min-width: 992px) { + #header-scrape .nav-toggle { + display:none + } +} + +#header-scrape .nav-expander { + position: relative; + z-index: 99999 +} + +#header-scrape .nav-mobile { + overflow-y: scroll; + position: fixed; + width: 100%; + height: 100%; + background: #000; + top: 0; + left: 0; + z-index: 99999 +} + +#header-scrape .nav-mobile__top { + display: flex; + justify-content: space-between; + padding: 0 30px 0 0 +} + +#header-scrape .nav-mobile .search-container { + padding: 15px +} + +#header-scrape .nav-mobile .search-container .form-row { + flex-direction: column +} + +@media (min-width: 992px) { + #header-scrape .nav-mobile { + display:none + } +} + +#header-scrape .link-expander { + color: #000; + background: #fff; + position: absolute; + z-index: -100; + top: -1000px +} + +#header-scrape .more-menu { + display: block; + position: absolute; + right: 0; + background: #046b99; + z-index: 99999; + padding-left: 0; + margin: 0; + list-style: none +} + +#header-scrape .more-menu .nav-item a { + text-align: right; + padding: 8px 25px +} + +#header-scrape .more-menu.hidden { + display: none +} + +#header-scrape .search-container { + margin-left: auto; + padding-right: 28px +} + +#header-scrape .search-button { + background-color: #046b99; + border-color: #046b99; + color: #fff; + padding: .375rem 1rem; + border: none; + outline: none; + display: flex; + align-items: center; + min-height: 100% +} + +#header-scrape .search-button:hover { + background-color: #1c304a; + border-color: #1c304a +} + +#header-scrape .search-button svg { + width: 18px; + height: 18px +} + +#header-scrape .input-group { + display: flex +} + +#header-scrape .form-group { + display: flex; + align-items: center +} + +#header-scrape .form-group label { + padding-right: 15px +} + +@media (min-width: 992px) { + #header-scrape .form-group label { + padding-right:0; + padding-left: 15px + } +} + +#header-scrape .form-inputs { + display: flex; + margin-top: 15px +} + +@media (min-width: 992px) { + #header-scrape .form-inputs { + margin-top:0 + } +} + +#header-scrape .form-control { + min-height: 38px; + font-size: 16px; + color: #757575; + border: none; + font-weight: 400; + line-height: 1.5; + padding: .375rem .75rem; + transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out +} + +#header-scrape .form-row { + display: flex +} + +#header-scrape .masthead { + background: #046b99; + display: flex; + align-items: center +} + +#header-scrape .masthead .masthead__content { + padding: 10px 30px; + display: flex; + width: 100%; + justify-content: space-between +} + +@media (min-width: 992px) { + #header-scrape .masthead .site-logo { + display:none + } +} + +#header-scrape .masthead h1 { + font-size: 18px; + font-weight: 400; + line-height: 1.5; + margin: 0 +} + +@media (min-width: 992px) { + #header-scrape .masthead h1 { + font-size:26px + } +} + +#header-scrape .accordion .title { + border-top: 1px solid #757575; + border-bottom: 1px solid #757575; + padding: 10px 20px; + position: relative +} + +#header-scrape .accordion .title a { + color: #fff +} + +#header-scrape .accordion__button .title:after { + content: ""; + height: 10px; + width: 10px; + display: inline-block; + vertical-align: middle; + border-right: 2px solid #fff; + border-bottom: 2px solid #fff; + position: absolute; + right: 20px; + top: 0; + bottom: 0; + margin: auto 0 +} + +#header-scrape .accordion__button[aria-expanded=true] { + background: #1c304a; + position: relative +} + +#header-scrape .accordion__button[aria-expanded=true] .title { + border-bottom: none +} + +#header-scrape .accordion__button[aria-expanded=true]:before { + content: ""; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 5px; + background: #fff +} + +#header-scrape .accordion__button[aria-expanded=true] .title:after { + transform: rotate(225deg) +} + +#header-scrape .accordion__button[aria-expanded=false] .title:after { + transform: rotate(45deg) +} + +#header-scrape .accordion__panel { + background: #1c304a +} + +#header-scrape .accordion__panel .accordion__panel { + background: #046b99 +} + +#header-scrape a { + text-decoration: none +} + +#header-scrape .separator { + color: #fff; + margin: 0 .25rem +} + +#header-scrape .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0,0,0,0); + white-space: nowrap; + border: 0 +} + +#header-scrape .container { + width: 100%; + margin: 0 auto; + max-width: 976px +} + +#header-scrape .box-shadow { + box-shadow: 0 2px 5px #0003 +} diff --git a/primo-explore/custom/IAMS_VU2/css/modal.css b/primo-explore/custom/IAMS_VU2/css/modal.css new file mode 100644 index 000000000..e2d15b889 --- /dev/null +++ b/primo-explore/custom/IAMS_VU2/css/modal.css @@ -0,0 +1,90 @@ +#new-version { + z-index: 75; + position: fixed; + left: 5rem; + right: auto; + top: auto; + /*bottom: 5rem;*/ + width: auto; + width: calc(100% - 2rem); + max-width: 35rem; + height: auto; + /*max-height: 80vh;*/ + overflow-y: auto; + border: 0.05rem solid #000; + box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5); + box-sizing: border-box; + margin: 0; + padding: 1rem; + background-color: #fff; + color: #252320; + line-height: 24px; +} + + +#new-version .advice-body { + position: relative; + margin: 0; + padding: 0; + background-color: inherit; + color: inherit; + border: none; + overflow-y: auto; +} + +#new-version .advice-body .heading { + margin: 0; + padding: 0.5rem 0 0.5rem 0; + color: #3c1053; +} +.dialog-button-row { + padding: 0 0 1rem 0; +} + + +#new-version .advice-body .teaser p { + margin: 0; + padding: 0; +} + +#new-version .advice-body .additional p { + margin: 0; + padding: 1rem 0 0 0; +} + +#new-version button.dialog-button { + background-color: #046b99; + top: 0; + right: 0; + border: none; + color: #fff; + cursor: pointer; + margin: 0; +} + +#new-version button.dialog-button:hover { + background-color: red; +} + +#new-version button.more { + background-color: #fff; + position: absolute; + bottom: 0; + right: 0; + border: none; + color: inherit; + cursor: pointer; + padding: 0; + margin: 0; +} + +#new-version button.more::before { +/* spacer which fades the last words of teaser (if necessary) to make the More... button clearly visible */ + content: ''; + background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.8) 66%, rgba(255,255,255,1) 100%); + display: inline-block; + height: 1rem; + left: -10rem; + position: absolute; + width: 10rem; +} \ No newline at end of file