diff --git a/Gruntfile.local.js b/Gruntfile.local.js index 479fcd77292..ed7d51e1847 100644 --- a/Gruntfile.local.js +++ b/Gruntfile.local.js @@ -1,228 +1,26 @@ module.exports = function(grunt) { const fs = require("fs"); - const path = require("path"); const os = require("node:os"); - const fsPromises = require("node:fs/promises"); + + const style = grunt.option('style') ?? 'expanded'; grunt.registerTask("finna:scss", function finnaScssFunc() { const config = getFinnaSassConfig({ - outputStyle: 'compressed', - quietDeps: true - }, false); + outputStyle: style, + quietDeps: true + }, false); grunt.config.set('dart-sass', config); grunt.task.run('dart-sass'); }); grunt.registerTask('finna:check:scss', function sassCheck() { const config = getFinnaSassConfig({ - quietDeps: true - }, true); + quietDeps: true + }, true); grunt.config.set('dart-sass', config); grunt.task.run('dart-sass'); }); - grunt.registerTask("finna:lessToSass", function finnaLessToSassFunc() { - const exclude = grunt.option('exclude'); - const excludedFiles = exclude ? exclude.split(',') : []; - const include = grunt.option('include'); - const includedFiles = include ? include.split(',') : []; - - const sharedFileOpts = { - expand: true, - src: ['*.less', '**/*.less'], - filter: function(filepath) { - if (includedFiles.length > 0) { - for (let included of includedFiles) { - if (filepath.endsWith(included)) { - return true; - } - } - return false; - } - for (let excluded of excludedFiles) { - if (filepath.endsWith(excluded)) { - return false; - } - } - return true; - }, - ext: '.scss' - }; - - let files = []; - let viewsDir = grunt.option('views-dir'); - let themeDirs = grunt.option('theme-dirs'); - if (viewsDir) { - const isViewDir = function (dir) { - const stat = fs.lstatSync(dir); - return stat.isDirectory() && fs.existsSync(dir + '/themes/custom'); - }; - const entries = grunt.file.expand( - { - filter: isViewDir, - }, - viewsDir + '/*/*' - ); - for (const viewDir of entries) { - files.push({ - ...sharedFileOpts, - cwd: viewDir + '/themes/custom/less', - dest: viewDir + '/themes/custom/scss' - }); - } - } else if (themeDirs) { - Object.entries(themeDirs.split(',')).forEach(([, themeDir]) => { - themeDir = path.resolve(themeDir); - files.push({ - ...sharedFileOpts, - cwd: themeDir + '/less', - dest: themeDir + '/scss' - }); - }); - } else { - files = [ - { - ...sharedFileOpts, - cwd: 'themes/finna2/less', - dest: 'themes/finna2/scss' - }, - { - ...sharedFileOpts, - cwd: 'themes/custom/less', - dest: 'themes/custom/scss' - }, - ]; - } - - const replacements = [ - // Activate SCSS - { - pattern: /\/\* #SCSS>/gi, - replacement: "/* #SCSS> */", - order: -1 // Do before anything else - }, - { - pattern: /<#SCSS \*\//gi, - replacement: "/* <#SCSS */", - order: -1 - }, - // Deactivate LESS - { - pattern: /\/\* #LESS> \*\/.*?\/\* <#LESS \*\//gis, - replacement: "", - order: -1 - }, - { // Change separator in @include statements - pattern: /@include ([^\(]+)\(([^\)]+)\);/gi, - replacement: function mixinCommas(match, $1, $2) { - return '@include ' + $1 + '(' + $2.replace(/;/g, ',') + ');'; - }, - order: 4 // after defaults included in less-to-sass - }, - { // Remove unquote - pattern: /unquote\("([^"]+)"\)/gi, - replacement: function ununquote(match, $1) { - return $1; - }, - order: 4 - }, - { // Fix tilde literals - pattern: /~'(.*?)'/gi, - replacement: '$1', - order: 4 - }, - { // Inline &:extends converted - pattern: /&:extend\(([^\)]+?)( all)?\)/gi, - replacement: '@extend $1', - order: 4 - }, - { // Wrap variables in calcs with #{} - pattern: /calc\([^;]+/gi, - replacement: function calcVariables(match) { - return match.replace(/(\$[\w\-]+)/gi, '#{$1}'); - }, - order: 4 - }, - { // Wrap variables set to css variables with #{} - pattern: /(--[\w-:]+:\s*)((\$|darken\(|lighten\()[^;]+)/gi, - replacement: '$1#{$2}', - order: 5 - }, - { // Remove !default from extends (icons.scss) - pattern: /@extend ([^;}]+) !default;/gi, - replacement: '@extend $1;', - order: 6 - }, - { // Revert invalid @ => $ changes for css rules: - pattern: /\$(supports|container) \(/gi, - replacement: '@$1 (', - order: 7 - }, - { // Revert @if => $if change: - pattern: /\$if \(/gi, - replacement: '@if (', - order: 7 - }, - { // Revert @use => $use change: - pattern: /\$use '/gi, - replacement: "@use '", - order: 7 - }, - { // Fix comparison: - pattern: / ==< /gi, - replacement: ' <= ', - order: 7 - }, - { // Remove !important from variables: - pattern: /(? fade-in: - pattern: /fadein\((\S+),\s*(\S+)\)/g, - replacement: function (match, color, adjustment) { - return 'fade-in(' + color + ', ' + (adjustment.replace('%', '') / 100) + ')'; - }, - order: 8 - }, - { // fadeout => fade-out: - pattern: /fadeout\((\S+),\s*(\S+)\)/g, - replacement: function (match, color, adjustment) { - return 'fade-out(' + color + ', ' + (adjustment.replace('%', '') / 100) + ')'; - }, - order: 8 - }, - { // replace invalid characters in variable names: - pattern: /\$([^: };/]+)/g, - replacement: function (match, variable) { - return '$' + variable.replace('.', '__'); - }, - order: 9 - }, - ]; - if (!grunt.option('no-default')) { - replacements.push( - { // Add !default (but avoid messing with function params): - pattern: /(? - + diff --git a/module/FinnaConsole/config/lessToScss.config.php b/module/FinnaConsole/config/lessToScss.config.php deleted file mode 100644 index 58fe76f1727..00000000000 --- a/module/FinnaConsole/config/lessToScss.config.php +++ /dev/null @@ -1,348 +0,0 @@ - [ - [ // functions - 'pattern' => '/(?!@debug|@import|@media|@keyframes|@font-face|@include|@extend|@mixin|@supports|@container |@if |@use |@page |@-\w)@/i', - 'replacement' => '$', - ], - [ // when => if - 'pattern' => '/\.([\w_-]*)\s*\((.*)\)\s*when\s*\((.*)=(.*)\)\s*\{(\s*)([^}]+)}[;]?/i', - 'replacement' => '@if $3==$4 {$5@mixin $1($2){$5$6}}', - ], - [ // .class => @extend .class - 'pattern' => '/\.([[a-zA-Z-_]*)\s*;/i', - 'replacement' => '@extend .$1;', - ], - [ // Remove .less extension from imports - 'pattern' => "/\@import\s*[\"'](.*).less[\"']/i", - 'replacement' => function ($matches) { - return '@import \'' . str_replace('/less/', '/scss/', $matches[1]) . '\''; - }, - ], - [ // Nested include - 'pattern' => '/(\s*)\#([\w\-]*)\s*>\s*\@include\s+(.*);/i', - 'replacement' => '$1@include $2-$3;', - ], - [ // Include mixin - 'pattern' => '/(\s+)\.([\w\-]*)\s*\((.*)\);/i', - 'replacement' => '$1@include $2($3);', - ], - [ // Mixin declaration - 'pattern' => '/\.([\w\-]*)\s*\((.*)\)\s*\{/i', - 'replacement' => '@mixin $1($2){', - ], - [ - 'pattern' => '/spin\((.+),(.+)\)/i', - 'replacement' => 'adjust-hue($1,$2)', - ], - [ // shade/tint - 'pattern' => '/(shade|tint)\(([^,]+),\s?([\d%]+)\)/i', - 'replacement' => function ($matches) { - [, $method, $color2, $weight] = $matches; - $color1 = $method === 'shade' ? '#000000' : '#ffffff'; - return "mix($color1, $color2, $weight)"; - }, - ], - [ // fade - 'pattern' => '/fade\((.*),\s?([\d]+)\%\)/mi', - 'replacement' => 'rgba($1, ($2/100))', - ], - [ // literal - 'pattern' => '/~"(.*)"/i', - 'replacement' => function ($matches) { - [, $match] = $matches; - // Keep media queries quoted - if (str_starts_with($match, 'screen and')) { - return '"' . $match . '"'; - } - return 'unquote("' . $match . '")'; - }, - ], - // end of basic less-to-sass rules --------------- - - [ // Activate SCSS - 'pattern' => '/\/\* #SCSS>/i', - 'replacement' => '/* #SCSS> */', - ], - [ - 'pattern' => '/<#SCSS \*\//i', - 'replacement' => '/* <#SCSS */', - ], - [ - 'pattern' => '/\/\* #LESS> \*\//i', - 'replacement' => '/* #LESS>', - ], - [ - 'pattern' => '/\/\* <#LESS \*\//i', - 'replacement' => '<#LESS */', - ], - [ // Fix include parameter separator - 'pattern' => '/@include ([^\(]+)\(([^\)]+)\);/i', - 'replacement' => function ($matches) { - [, $m1, $m2] = $matches; - return '@include ' . $m1 . '(' . str_replace(';', ',', $m2) . ');'; - }, - ], - [ // Fix tilde literals - 'pattern' => "/~'(.*?)'/i", - 'replacement' => '$1', - ], - [ // Convert inline &:extends - 'pattern' => '/&:extend\(([^\)]+?)( all)?\)/i', - 'replacement' => '@extend $1', - ], - [ // Wrap variables in calcs with #{} - 'pattern' => '/calc\([^;]+/i', - 'replacement' => function ($matches) { - return preg_replace('/(\$[\w\-]+)/i', '#{$1}', $matches[0]); - }, - ], - [ // Wrap variables set to css variables with #{} - 'pattern' => '/(--[\w:-]+:\s*)((\$|darken\(|lighten\()[^;]+)/i', - 'replacement' => '$1#{$2}', - ], - [ // Remove !default from extends (icons.scss) - 'pattern' => '/@extend ([^;}]+) !default;/i', - 'replacement' => '@extend $1;', - ], - - [ // Fix comparison: - 'pattern' => '/ ==< /i', - 'replacement' => ' <= ', - ], - [ // Remove !important from variables: - 'pattern' => '/^[^(]*(\$.+?):(.+?)\s*!important\s*;/m', - 'replacement' => '$1:$2;', - ], - /* [ // Remove !important from functions: - 'pattern' => '/^[^(]*(\$.+?):(.+?)\s*!important\s*\)/m', - 'replacement' => '$1:$2;', - ],*/ - [ // fadein => fade-in: - 'pattern' => '/fadein\((\S+),\s*(\S+)\)/', - 'replacement' => function ($matches) { - return 'fade-in(' . $matches[1] . ', ' . (str_replace('%', '', $matches[2]) / 100) . ')'; - }, - ], - [ // fadeout => fade-out: - 'pattern' => '/fadeout\((\S+),\s*(\S+)\)/', - 'replacement' => function ($matches) { - return 'fade-out(' . $matches[1] . ', ' . (str_replace('%', '', $matches[2]) / 100) . ')'; - }, - ], - [ // replace invalid characters in variable names: - 'pattern' => '/\$([^: };\/]+)/', - 'replacement' => function ($matches) { - return '$' . str_replace('.', '__', $matches[1]); - }, - ], - [ // remove invalid &: - 'pattern' => '/([a-zA-Z0-9])&:/', - 'replacement' => '$1:', - ], - [ // remove (reference) from import): - 'pattern' => '/@import\s+\(reference\)\s*/', - 'replacement' => '@import ', - ], - [ // fix missing semicolon from background-image rule: - 'pattern' => '/(\$background-image:([^;]+?))\n/', - 'replacement' => "\$1;\n", - ], - [ // remove broken (and useless) rule: - 'pattern' => '/\.feed-container \.list-feed \@include feed-header\(\);/', - 'replacement' => '', - ], - [ // interpolate variables in media queries: - 'pattern' => '/\@media (\$[^ ]+)/', - 'replacement' => '@media #{$1}', - ], - [ // missing semicolon: - 'pattern' => '/(:.*auto)\n/', - 'replacement' => "\$1;\n", - ], - [ // lost space in mixin declarations: - 'pattern' => '/(\@mixin.+){/', - 'replacement' => '$1 {', - ], - [ // special cases: mobile mixin - 'pattern' => '/\.mobile\(\{(.*?)\}\);/s', - 'replacement' => '@media #{$mobile} { & { $1 } }', - ], - [ // special cases: mobile mixin 2 - 'pattern' => '@mixin mobile($rules){', - 'replacement' => '@mixin mobile {', - ], - [ // special cases: mobile mixin 3 - 'pattern' => '$rules();', - 'replacement' => '@content;', - ], - [ // invalid mixin name - 'pattern' => 'text(uppercase)', - 'replacement' => 'text-uppercase', - ], - [ // when isnumber - 'pattern' => '& when (isnumber($z-index))', - 'replacement' => '@if $z-index != null', - ], - [ // blocks extending container - 'pattern' => '@include container();', - 'replacement' => '@extend .container;', - ], - [ // blocks extending more-link - 'pattern' => '@include more-link();', - 'replacement' => '@extend .more-link;', - ], - [ // fix math operations - 'pattern' => '/(\s+)(\(.+\/.+\))/', - 'replacement' => '$1calc$2', - ], - [ // typo - 'pattern' => '$carousel-header-color none;', - 'replacement' => '$carousel-header-color: none;', - ], - [ // typo - 'pattern' => '$brand-primary // $link-color;', - 'replacement' => '$brand-primary; // $link-color', - ], - [ // typo - 'pattern' => '- aukioloaikojen otsikko', - 'replacement' => '{ /* aukioloaikojen otsikko */ }', - ], - [ // typo - 'pattern' => '$link-hover-color: $tut-a-hover,', - 'replacement' => '$link-hover-color: $tut-a-hover;', - ], - [ // typo - 'pattern' => 'rgba(43,65,98,0,9)', - 'replacement' => 'rgba(43,65,98,0.9)', - ], - [ // typo $input-bg: ##ff8d0f; - 'pattern' => '/:\s*##+/', - 'replacement' => ': #', - ], - [ // typo - 'pattern' => '!importanti', - 'replacement' => '!important', - ], - [ // typo - 'pattern' => '$brand-secondary: #;', - 'replacement' => '', - ], - [ // typo - 'pattern' => '$brand-secondary: ###;', - 'replacement' => '', - ], - [ // typo - 'pattern' => '#00000;', - 'replacement' => '#000000;', - ], - [ // typo - 'pattern' => 'background-color: ;', - 'replacement' => '', - ], - [ // typo - 'pattern' => '$header-background-color #fff;', - 'replacement' => '$header-background-color: #fff;', - ], - [ // typo - 'pattern' => '$action-link-color #FFF;', - 'replacement' => '$action-link-color: #FFF;', - ], - [ // typo - 'pattern' => '$finna-browsebar-background (selaa palkin taustaväri)', - 'replacement' => '//$finna-browsebar-background (selaa palkin taustaväri)', - ], - [ // typo - 'pattern' => '$finna-browsebar-link-color(selaa palkin linkin)', - 'replacement' => '//$finna-browsebar-link-color(selaa palkin linkin)', - ], - [ // typo - 'pattern' => '$finna-browsebar-highlight-background (selaa palkin korotuksen taustaväri)', - 'replacement' => '//$finna-browsebar-highlight-background (selaa palkin korotuksen taustaväri)', - ], - [ // typo - 'pattern' => '$home-2_fi {', - 'replacement' => '.home-2_fi {', - ], - [ // Convert unsupported nested extend - 'pattern' => '@extend .finna-panel-default .panel-heading;', - 'replacement' => << '@extend .finna-panel-default .finna-panel-heading-inner;', - 'replacement' => << '#gradient.vertical($background-start-color; $background-end-color; $background-start-percent; $background-end-percent);', - 'replacement' => 'background-image: linear-gradient(to bottom, $background-start-color $background-start-percent, $background-end-color $background-end-percent);', - ], - [ // common typo in home column styles - 'pattern' => '/(\.home-1, \.home-3 \{[^}]+)}(\s*\n\s*\& \.left-column-content.*?\& .right-column-content \{.*?\}.*?\})/s', - 'replacement' => "\$1\$2\n}", - ], - [ // another typo in home column styles - 'pattern' => '/(\n\s+\.left-column-content.*?\n\s+)& (.right-column-content)/s', - 'replacement' => '$1$2', - ], - [ // missing semicolon: display: none - 'pattern' => '/display: none\n/', - 'replacement' => 'display: none;', - ], - [ // missing semicolon in variable definitions - 'pattern' => '/(\n\s*\$[a-zA-Z0-9_-]+\s*:\s*?[^;\s]+)((\n|\s*\/\/))/', - 'replacement' => '$1;$2', - ], - [ // missing semicolon: $header-text-color: #000000 - 'pattern' => '/$header-text-color: #000000\n/', - 'replacement' => '$header-text-color: #000000;', - ], - [ // missing semicolon: clip: rect(0px,1200px,1000px,0px) - 'pattern' => '/clip: rect\(0px,1200px,1000px,0px\)\n/', - 'replacement' => "clip: rect(0px,1200px,1000px,0px);\n", - ], - [ // missing semicolon: $finna-feedback-background: darken(#d80073, 10%) // - 'pattern' => '/\$finna-feedback-background: darken\(#d80073, 10%\)\s*?(\n|\s*\/\/)/', - 'replacement' => '$finna-feedback-background: darken(#d80073, 10%);$1', - ], - [ // invalid (and obsolete) rule - 'pattern' => '/(\@supports\s*\(-ms-ime-align:\s*auto\)\s*\{\s*\n\s*clip-path.*?\})/s', - 'replacement' => "// Invalid rule commented out by SCSS conversion\n/*\n\$1\n*/", - ], - - [ // literal fix - 'pattern' => "~ ')'", - 'replacement' => ')', - ], - [ // literal fix - 'pattern' => 'calc(100vh - "#{$navbar-height}~")', - 'replacement' => 'calc(100vh - #{$navbar-height})', - ], - [ // math without calc - 'pattern' => '/(.*\s)(\S+ \/ (\$|\d)[^\s;]*)/', - 'replacement' => function ($matches) { - [$full, $pre, $math] = $matches; - if (str_contains($matches[1], '(')) { - return $full; - } - return $pre . "calc($math)"; - }, - ], - [ // variable interpolation - 'pattern' => '/\$\{([A-Za-z0-9_-]+)\}/', - 'replacement' => '#{\$$1}', - ], - ], -]; diff --git a/module/FinnaConsole/config/module.config.php b/module/FinnaConsole/config/module.config.php index 2563c44f661..d3a6661c294 100644 --- a/module/FinnaConsole/config/module.config.php +++ b/module/FinnaConsole/config/module.config.php @@ -20,7 +20,6 @@ 'FinnaConsole\Command\Util\ExpireFinnaCacheCommand' => 'FinnaConsole\Command\Util\ExpireFinnaCacheCommandFactory', 'FinnaConsole\Command\Util\ExpireUsers' => 'FinnaConsole\Command\Util\ExpireUsersFactory', 'FinnaConsole\Command\Util\ImportComments' => 'FinnaConsole\Command\Util\ImportCommentsFactory', - 'FinnaConsole\Command\Util\LessToScssCommand' => 'FinnaConsole\Command\Util\LessToScssCommandFactory', 'FinnaConsole\Command\Util\OnlinePaymentMonitor' => 'FinnaConsole\Command\Util\OnlinePaymentMonitorFactory', 'FinnaConsole\Command\Util\ProcessRecordStatsLog' => 'FinnaConsole\Command\Util\ProcessRecordStatsLogFactory', 'FinnaConsole\Command\Util\ProcessStatsQueue' => 'FinnaConsole\Command\Util\ProcessStatsQueueFactory', @@ -40,7 +39,6 @@ 'util/expire_finna_cache' => 'FinnaConsole\Command\Util\ExpireFinnaCacheCommand', 'util/expire_users' => 'FinnaConsole\Command\Util\ExpireUsers', 'util/import_comments' => 'FinnaConsole\Command\Util\ImportComments', - 'util/less_to_scss' => 'FinnaConsole\Command\Util\LessToScssCommand', 'util/online_payment_monitor' => 'FinnaConsole\Command\Util\OnlinePaymentMonitor', 'util/process_record_stats' => 'FinnaConsole\Command\Util\ProcessRecordStatsLog', 'util/verify_record_links' => 'FinnaConsole\Command\Util\VerifyRecordLinks', diff --git a/module/FinnaConsole/src/FinnaConsole/Command/Util/LessToScssCommand.php b/module/FinnaConsole/src/FinnaConsole/Command/Util/LessToScssCommand.php deleted file mode 100644 index a56cf9400a5..00000000000 --- a/module/FinnaConsole/src/FinnaConsole/Command/Util/LessToScssCommand.php +++ /dev/null @@ -1,1097 +0,0 @@ - - * @license http://opensource.org/licenses/gpl-2.0.php GNU General Public License - * @link https://vufind.org/wiki/development Wiki - */ - -namespace FinnaConsole\Command\Util; - -use RecursiveDirectoryIterator; -use RecursiveIteratorIterator; -use Symfony\Component\Console\Attribute\AsCommand; -use Symfony\Component\Console\Command\Command; -use Symfony\Component\Console\Formatter\OutputFormatter; -use Symfony\Component\Console\Input\InputArgument; -use Symfony\Component\Console\Input\InputInterface; -use Symfony\Component\Console\Input\InputOption; -use Symfony\Component\Console\Output\OutputInterface; -use VuFind\Config\PathResolver; - -use function array_key_exists; -use function array_slice; -use function count; -use function dirname; -use function in_array; -use function is_string; -use function strlen; - -/** - * Console command: convert style files from LESS to SCSS (Sass). - * - * @category VuFind - * @package Console - * @author Ere Maijala - * @license http://opensource.org/licenses/gpl-2.0.php GNU General Public License - * @link https://vufind.org/wiki/development Wiki - */ -#[AsCommand( - name: 'util/lessToScss', - description: 'LESS to SCSS conversion' -)] -class LessToScssCommand extends Command -{ - public const VARIABLE_CHARS = '[a-zA-Z0-9_-]'; - - /** - * Include paths - * - * @var array - */ - protected $includePaths = []; - - /** - * Console output - * - * @var OutputInterface - */ - protected $output = null; - - /** - * All variables with the last occurrence taking precedence (like in lesscss) - * - * @var array - */ - protected $allLessVars = []; - - /** - * Source directory (LESS) - * - * @var string - */ - protected $sourceDir = ''; - - /** - * Target directory (SCSS) - * - * @var string - */ - protected $targetDir = ''; - - /** - * An array tracking all processed files - * - * @var array - */ - protected $allFiles = []; - - /** - * File to use for all added variables - * - * @var ?string - */ - protected $variablesFile = null; - - /** - * Files excluded from processing - * - * @var array - */ - protected $excludedFiles = []; - - /** - * Substitutions (regexp and string replace) - * - * @var array - */ - protected $substitutions = []; - - /** - * Whether to enable SCSS in target theme(s) - * - * @var bool - */ - protected $enableScss = false; - - /** - * Patterns for files that must not use the !default flag for variables - * - * @var array - */ - protected $noDefaultFiles = []; - - /** - * Constructor - * - * @param PathResolver $pathResolver Config path resolver - */ - public function __construct(protected PathResolver $pathResolver) - { - parent::__construct(); - } - - /** - * Configure the command. - * - * @return void - */ - protected function configure() - { - $this - ->setHelp('Converts LESS styles to SCSS') - ->addOption( - 'variables_file', - null, - InputOption::VALUE_REQUIRED, - 'File to use for added SCSS variables (may be relative to the target directory)' - ) - ->addOption( - 'include_path', - 'I', - InputOption::VALUE_REQUIRED | InputOption::VALUE_IS_ARRAY, - 'Include directories for SCSS parser' - ) - ->addOption( - 'exclude', - null, - InputOption::VALUE_REQUIRED | InputOption::VALUE_IS_ARRAY, - 'Files to skip as main LESS files (fnmatch patterns)' - ) - ->addOption( - 'no_default', - null, - InputOption::VALUE_REQUIRED | InputOption::VALUE_IS_ARRAY, - 'Files where variable definitions must not include the !default flag (fnmatch patterns relative to' - . ' the target directory)' - ) - ->addOption( - 'enable_scss', - null, - InputOption::VALUE_NONE, - 'If specified, enables SCSS in the target theme(s)', - ) - ->addOption( - 'check_file_timestamps', - null, - InputOption::VALUE_REQUIRED, - 'If specified, enables file timestamp check that skips conversion if the files in the target directory' - . ' have changed since last conversion.' - ) - ->addOption( - 'check_config', - null, - InputOption::VALUE_NONE, - 'When enabled, checks style.ini in target directories and skips conversion if mode is already scss or' - . ' skip_conversion option is set.' - ) - ->addArgument( - 'main_file', - InputArgument::REQUIRED | InputArgument::IS_ARRAY, - 'Main LESS file to use as entry point. Can also be a glob pattern.' - ); - } - - /** - * Run the command. - * - * @param InputInterface $input Input object - * @param OutputInterface $output Output object - * - * @return int 0 for success - */ - protected function execute(InputInterface $input, OutputInterface $output) - { - $this->output = $output; - $this->substitutions = $this->getSubstitutions(); - $this->includePaths = $input->getOption('include_path'); - $this->excludedFiles = $input->getOption('exclude'); - $this->noDefaultFiles = $input->getOption('no_default'); - $this->enableScss = $input->getOption('enable_scss'); - $variablesFile = $input->getOption('variables_file'); - $patterns = $input->getArgument('main_file'); - $checkConfig = $input->getOption('check_config'); - $timestampFile = $input->getOption('check_file_timestamps'); - - foreach ($patterns as $pattern) { - foreach (glob($pattern) as $mainFile) { - foreach ($this->excludedFiles as $exclude) { - if (fnmatch($exclude, $mainFile)) { - continue 2; - } - } - - $this->allFiles = []; - $this->allLessVars = []; - - $this->sourceDir = dirname($mainFile); - $this->targetDir = preg_replace('/\/less\b/', '/scss', $this->sourceDir); - $this->variablesFile = $variablesFile - ? $this->sourceDir . '/' . preg_replace('/\.scss$/', '', $variablesFile) - : null; - - if ($checkConfig) { - // Check style.ini in target directory and skip conversion if appropriate: - $styleIni = $this->targetDir . '/style.ini'; - if (file_exists($styleIni)) { - $styleConfig = parse_ini_file($styleIni, true); - if ( - (($styleConfig['General']['mode'] ?? null) === 'scss') - || ($styleConfig['General']['skip_conversion'] ?? false) - ) { - $this->output->writeln("Skipping $mainFile due to configuration in style.ini"); - continue; - } - } - } - if ( - $timestampFile - && $this->filesNewerThanTimestampFile($timestampFile, $mainFile) - ) { - $this->output->writeln( - "Skipping $mainFile - Files in target directory modified since last conversion" - ); - continue; - } - - $this->output->writeln("Processing $mainFile"); - // First read all vars: - if (!$this->discoverLess($mainFile, $this->allLessVars)) { - return Command::FAILURE; - } - // Now do changes: - $currentVars = []; - if (!$this->processFile($mainFile, $currentVars)) { - $this->error('Stop on failure'); - return Command::FAILURE; - } - - // Write out the target files: - if (!$this->writeTargetFiles()) { - return Command::FAILURE; - } - - // Update timestamp file if specified: - if ($timestampFile) { - $timestampFilePath = $this->targetDir . "/$timestampFile"; - if (!touch($timestampFilePath)) { - $this->error("Could not write timestamp file $timestampFilePath"); - return Command::FAILURE; - } - } - } - } - return Command::SUCCESS; - } - - /** - * Discover less variables - * - * @param string $filename File name - * @param array $vars Currently defined variables - * - * @return bool - */ - protected function discoverLess(string $filename, array &$vars): bool - { - if (!$this->isReadableFile($filename)) { - $this->error("File $filename does not exist or is not a readable file"); - return false; - } - $fileDir = dirname($filename); - $lineNo = 0; - $this->debug("Start processing $filename (discovery)", OutputInterface::VERBOSITY_DEBUG); - $lines = file($filename, FILE_IGNORE_NEW_LINES); - - $inMixin = 0; - $inComment = false; - foreach ($lines as $line) { - ++$lineNo; - if (trim($line) === '') { - continue; - } - $lineId = "$filename:$lineNo"; - [$line] = $this->extractComment($line); - - $cStart = strpos($line, '/*'); - $cEnd = strrpos($line, '*/'); - if (false !== $cStart && (false === $cEnd || $cEnd < $cStart)) { - $inComment = true; - } elseif (false !== $cEnd) { - $inComment = false; - } - if ($inComment || preg_match('/^\s*\/\*.*\*\/\s*$/', $line)) { - continue; - } - - if (preg_match('/\.([\w\-]*)\s*\((.*)\)\s*\{/i', trim($line))) { - $inMixin = $this->getBlockLevelChange($line); - continue; - } - if ($inMixin) { - $inMixin += $this->getBlockLevelChange($line); - } - if ($inMixin) { - continue; - } - - // Process variable declarations: - $this->processLessVariables($lineId, $line, $vars); - // Process import: - if (!$this->processImports($lineId, $fileDir, $line, $vars, true)) { - return false; - } - } - return true; - } - - /** - * Process a file - * - * @param string $filename File name - * @param array $vars Currently defined variables - * - * @return bool - */ - protected function processFile(string $filename, array &$vars): bool - { - if (!$this->isReadableFile($filename)) { - $this->error("File $filename does not exist or is not a readable file"); - return false; - } - $fileDir = dirname($filename); - $inSourceDir = $this->isInSourceDir($fileDir); - $lineNo = 0; - $this->debug("Start processing $filename (conversion)", OutputInterface::VERBOSITY_DEBUG); - $lines = file($filename, FILE_IGNORE_NEW_LINES); - - // Process string substitutions - if (!str_ends_with($filename, '.scss')) { - $lines = explode(PHP_EOL, $this->processSubstitutions($filename, implode(PHP_EOL, $lines))); - $this->updateFileCollection($filename, compact('lines', 'vars')); - } - - $inMixin = 0; - $inComment = false; - $requiredVars = []; - foreach ($lines as $idx => $line) { - ++$lineNo; - if (trim($line) === '') { - continue; - } - $lineId = "$filename:$lineNo"; - - [$line, $comments] = $this->extractComment($line); - - if (str_starts_with(trim($line), '@mixin ')) { - $inMixin = $this->getBlockLevelChange($line); - continue; - } - if ($inMixin) { - $inMixin += $this->getBlockLevelChange($line); - } - if ($inMixin) { - continue; - } - - $cStart = strpos($line, '/*'); - $cEnd = strrpos($line, '*/'); - if (false !== $cStart && (false === $cEnd || $cEnd < $cStart)) { - $inComment = true; - } elseif (false !== $cEnd) { - $inComment = false; - } - if ($inComment || preg_match('/^\s*\/\*.*\*\/\s*$/', $line)) { - continue; - } - - // Process variable declarations: - $this->processScssVariables($lineId, $line, $vars); - // Process imports: - if (!$this->processImports($lineId, $fileDir, $line, $vars, false)) { - return false; - } - - // Collect variables that need to be defined: - if ($inSourceDir) { - if ($newVars = $this->checkVariables($lineId, $line, $vars)) { - $requiredVars = [ - ...$requiredVars, - ...$newVars, - ]; - } - } - $lines[$idx] = $line . (null !== $comments ? "//$comments" : ''); - } - - $this->updateFileCollection($filename, compact('lines', 'requiredVars')); - - return true; - } - - /** - * Extract a single-line comment from a line - * - * @param string $line Line - * - * @return array remaining line and the comment (or null) - */ - protected function extractComment(string $line): array - { - $result = ''; - $comment = null; - $inSingle = false; - $inDouble = false; - $escape = false; - if (!str_contains($line, '/')) { - return [$line, null]; - } - $len = strlen($line); - for ($i = 0; $i < $len; $i++) { - $ch = $line[$i]; - switch ($ch) { - case '"': - if (!$inSingle) { - $inDouble = !$inDouble; - } - break; - case "'": - if (!$inDouble) { - $inSingle = !$inSingle; - } - break; - case '\\': - $escape = !$escape; - break; - case '/': - // Check for a comment: - if (!$inSingle && !$inDouble && !$escape && ($line[$i + 1] ?? null) === '/') { - $comment = substr($line, $i + 2); - break 2; - } - break; - } - $result .= $ch; - } - return [$result, $comment]; - } - - /** - * Check if path is in source directory - * - * @param string $path Path - * - * @return bool - */ - protected function isInSourceDir(string $path): bool - { - return str_starts_with($path, $this->sourceDir) && !str_contains($path, '..'); - } - - /** - * Check if path is in target directory - * - * @param string $path Path - * - * @return bool - */ - protected function isInTargetDir(string $path): bool - { - return str_starts_with($path, $this->targetDir) && !str_contains($path, '..'); - } - - /** - * Find variables in LESS - * - * @param string $lineId Line identifier for logging - * @param string $line Line - * @param array $vars Currently defined variables - * - * @return ?array Array of required variables and their valuesm, or null on error - */ - protected function processLessVariables(string $lineId, string $line, array &$vars): void - { - if (!preg_match('/^\s*\@(' . static::VARIABLE_CHARS . '+):\s*(.*?);?\s*$/', $line, $matches)) { - return; - } - [, $var, $value] = $matches; - $value = trim(preg_replace('/\s*!default\s*;?\s*$/', '', $value)); - if (array_key_exists($var, $vars)) { - $this->debug( - "$lineId: `$var: $value` overrides existing value `" . $vars[$var] . '`', - OutputInterface::VERBOSITY_DEBUG - ); - } else { - $this->debug("$lineId: found `$var: $value`", OutputInterface::VERBOSITY_DEBUG); - } - - $vars[$var] = $value; - } - - /** - * Find variables - * - * @param string $lineId Line identifier for logging - * @param string $line Line - * @param array $vars Currently defined variables - * - * @return ?array Array of required variables and their valuesm, or null on error - */ - protected function processScssVariables(string $lineId, string $line, array &$vars): void - { - if (!preg_match('/^\s*\$(' . static::VARIABLE_CHARS . '+):\s*(.*?);?$/', $line, $matches)) { - return; - } - [, $var, $value] = $matches; - $value = trim(preg_replace('/\s*!default\s*;?\s*$/', '', $value, -1, $count)); - $default = $count > 0; - $existing = $vars[$var] ?? null; - if ($existing) { - if ($existing['default'] && !$default) { - $this->debug( - "$lineId: `$var: $value` overrides default value `" . $vars[$var]['value'] . '`', - OutputInterface::VERBOSITY_DEBUG - ); - } else { - return; - } - } else { - $this->debug("$lineId: found `$var: $value`", OutputInterface::VERBOSITY_DEBUG); - } - $vars[$var] = compact('value', 'default'); - } - - /** - * Process imports - * - * @param string $lineId Line identifier for logging - * @param string $fileDir Current file directory - * @param string $line Line - * @param array $vars Currently defined variables - * @param bool $discover Whether to just discover files and their content - * - * @return bool - */ - protected function processImports(string $lineId, string $fileDir, string $line, array &$vars, bool $discover): bool - { - if (!preg_match("/^\s*@import\s+['\"]([^'\"]+)['\"]\s*;/", $line, $matches)) { - // Check for LESS import reference: - if (!preg_match("/^\s*@import \/\*\(reference\)\*\/ ['\"]([^'\"]+)['\"]\s*;/", $line, $matches)) { - return true; - } - } - $import = $matches[1]; - if (str_ends_with($import, '.css')) { - $this->debug("$lineId: skipping .css import"); - return true; - } - if (!($fullPath = $this->resolveImportFileName($import, $fileDir))) { - $targetFileDir = str_replace($this->sourceDir, $this->targetDir, $fileDir); - $targetFileDir = str_replace('/less', '/scss', $targetFileDir); - $targetImport = str_replace('/less/', '/scss/', $import); - if (!($fullPath = $this->resolveImportFileName($targetImport, $targetFileDir))) { - $this->error("$lineId: import file $import not found"); - return false; - } - } else { - $this->debug("$lineId: import $fullPath as $import", OutputInterface::VERBOSITY_DEBUG); - if ($discover) { - if (!$this->discoverLess($fullPath, $vars)) { - return false; - } - } else { - if (!$this->processFile($fullPath, $vars)) { - return false; - } - } - } - return true; - } - - /** - * Find import file - * - * @param string $filename Relative file name - * @param string $baseDir Base directory - * - * @return ?string - */ - protected function resolveImportFileName(string $filename, string $baseDir): ?string - { - $allDirs = [ - $baseDir, - ...$this->includePaths, - ]; - $filename = preg_replace('/\.(less|scss)$/', '', $filename); - foreach (['less', 'scss'] as $extension) { - foreach ($allDirs as $dir) { - // full path - $fullPath = "$dir/$filename.$extension"; - if (!$this->isReadableFile($fullPath)) { - // reference import - $fullPath = dirname($fullPath) . '/_' . basename($fullPath); - } - if ($this->isReadableFile($fullPath)) { - return $fullPath; - } - } - } - return null; - } - - /** - * Replace variables that are defined later with their last values - * - * @param string $lineId Line identifier for logging - * @param string $line Line - * @param array $vars Currently defined variables - * - * @return ?array Array of required variables and their values, or null on error - */ - protected function checkVariables(string $lineId, string $line, array $vars): ?array - { - $required = []; - preg_match_all('/\$(' . static::VARIABLE_CHARS . '+)(?!.*:)\\b/', $line, $allMatches); - foreach ($allMatches[1] ?? [] as $var) { - $lessVal = $this->allLessVars[$var] ?? null; - if ( - isset($vars[$var]) - && null !== $lessVal - && $vars[$var]['value'] === $this->processSubstitutions('', $lessVal) - ) { - // Previous definition contains the correct value: - $this->debug("$lineId: $var ok", OutputInterface::VERBOSITY_VERY_VERBOSE); - continue; - } - if (null === $lessVal) { - $this->warning("$lineId: Value for variable `$var` not found (line: $line)"); - continue; - } - // Use last defined value: - - $this->debug("$lineId: Need `$lessVal` for $var (have `" . ($vars[$var]['value'] ?? '[nothing]') . '`)'); - $required[] = [ - 'var' => $var, - 'value' => $lessVal, - ]; - } - return $required; - } - - /** - * Resolve requirements for variables that depend on other variables - * - * @param array $vars Variables to resolve - * @param array $knownVars Vars that are already available - * - * @return array - */ - protected function resolveVariableDependencies(array $vars, array $knownVars): array - { - $result = $vars; - foreach ($vars as $current) { - $var = $current['var']; - $varDefinition = $current['value']; - $loop = 0; - while (preg_match('/[@\$]\{?(' . static::VARIABLE_CHARS . '+)/', $varDefinition, $matches)) { - $requiredVar = $matches[1]; - if (in_array($requiredVar, $knownVars)) { - $this->debug( - "Existing definition found for '$requiredVar' required by `$var: $varDefinition`", - OutputInterface::VERBOSITY_DEBUG - ); - continue; - } - if ($requiredVarValue = $this->allLessVars[$requiredVar] ?? null) { - $this->debug("`$var: $varDefinition` requires `$requiredVar: $requiredVarValue`"); - $result[] = [ - 'var' => $requiredVar, - 'value' => $requiredVarValue, - ]; - $varDefinition = $requiredVarValue; - } else { - $this->warning( - "Could not resolve dependency for variable `$var`; definition missing for `$requiredVar`" - ); - break; - } - if (++$loop >= 10) { - $this->warning("Value definition loop detected ($var -> $requiredVar)"); - break; - } - } - } - return $result; - } - - /** - * Get block level (depth) change - * - * @param string $line Line - * - * @return int - */ - protected function getBlockLevelChange(string $line): int - { - $level = 0; - foreach (str_split($line) as $ch) { - if ('{' === $ch) { - ++$level; - } elseif ('}' === $ch) { - --$level; - } - } - return $level; - } - - /** - * Update a file in the all files collection - * - * @param string $filename File name - * @param array $values Values to set - * - * @return void; - */ - protected function updateFileCollection(string $filename, array $values): void - { - $barename = preg_replace('/\.(less|scss)$/', '', $filename); - if (null === ($oldValues = $this->allFiles[$barename] ?? null)) { - $oldValues = [ - 'requiredVars' => [], - ]; - $values['index'] = count($this->allFiles); - } - if (!isset($oldValues['lines']) && !isset($values['lines'])) { - // Read in any existing file: - if (file_exists($filename)) { - if (!$this->isReadableFile($filename)) { - throw new \Exception("$filename is not readable"); - } - $values['lines'] = file($filename, FILE_IGNORE_NEW_LINES); - } - } - // Merge requiredVars in case the file is imported multiple times - // (we may end up with duplicates, but it's difficult to dedup without affecting order, so keep it that way): - $values['requiredVars'] = array_merge( - $oldValues['requiredVars'] ?? [], - $values['requiredVars'] ?? [] - ); - $this->allFiles[$barename] = array_merge($oldValues, $values); - } - - /** - * Write target files - * - * @return bool - */ - protected function writeTargetFiles(): bool - { - // If we have a variables file, collect all variables needed by later files and add them: - if ($this->variablesFile) { - $variablesFileIndex = $this->allFiles[$this->variablesFile]['index'] ?? PHP_INT_MAX; - - $allRequiredVars = []; - foreach ($this->allFiles as $filename => &$fileSpec) { - // Check if the file is included before the variables file (if so, we must add the variables in - // that file): - if ($fileSpec['index'] < $variablesFileIndex) { - continue; - } - array_push($allRequiredVars, ...$fileSpec['requiredVars']); - $fileSpec['requiredVars'] = []; - } - unset($fileSpec); - - $this->updateFileCollection( - $this->variablesFile, - [ - 'requiredVars' => $allRequiredVars, - ] - ); - $this->debug(count($allRequiredVars) . " variables added to $this->variablesFile"); - } - - foreach ($this->allFiles as $filename => $fileSpec) { - $fullPath = $this->getTargetFilename($filename); - if (!$this->isInTargetDir($fullPath)) { - continue; - } - if (!$this->ensureTargetDirectory($fullPath)) { - return false; - } - - $lines = $fileSpec['lines'] ?? []; - - // Add !default to existing variables (unless excluded): - $addDefault = true; - foreach ($this->noDefaultFiles as $noDefaultPattern) { - if (fnmatch($noDefaultPattern, $fullPath)) { - $addDefault = false; - } - } - if ($addDefault) { - foreach ($lines as &$line) { - $line = preg_replace('/^(\$.+):([^;]+);/', '$1:$2 !default;', $line); - } - unset($line); - } - - // Prepend required variables: - if ($fileSpec['requiredVars']) { - $requiredVars = $this->resolveVariableDependencies($fileSpec['requiredVars'], $fileSpec['vars'] ?? []); - $linesToAdd = ['// The following variables were automatically added in SCSS conversion']; - $addedVars = []; - foreach (array_reverse($requiredVars) as $current) { - $var = $current['var']; - if (!in_array($var, $addedVars)) { - $linesToAdd[] = $this->processSubstitutions('', "@$var: $current[value];"); - $addedVars[] = $var; - } - } - - // Prepend new definitions: - $linesToAdd[] = ''; - array_unshift($lines, ...$linesToAdd); - } - // Unlink target first just in case it's a symlink: - if (file_exists($fullPath)) { - unlink($fullPath); - } - // Write the updated file: - if (false === file_put_contents($fullPath, implode(PHP_EOL, $lines) . PHP_EOL)) { - $this->error("Could not write file $fullPath"); - } - $this->debug("Created $fullPath"); - } - - if ($this->enableScss) { - $styleIni = <<targetDir . '/style.ini'; - if (false === file_put_contents($iniFile, $styleIni)) { - $this->error("Could not write file $iniFile"); - } - } - - return true; - } - - /** - * Get target file name - * - * @param string $filename File name - * - * @return string - */ - protected function getTargetFilename(string $filename): string - { - $fullPath = str_replace($this->sourceDir, $this->targetDir, $filename); - if (!str_ends_with($fullPath, '.scss')) { - $fullPath .= '.scss'; - } - return $fullPath; - } - - /** - * Ensure that the directory for the given file exists - * - * @param string $filename File name - * - * @return bool - */ - protected function ensureTargetDirectory(string $filename): bool - { - $dirParts = explode(DIRECTORY_SEPARATOR, dirname($filename)); - // Create the directory recursively for the parts that don't exist: - for ($i = 1; $i <= count($dirParts); $i++) { - $path = implode(DIRECTORY_SEPARATOR, array_slice($dirParts, 0, $i)); - // An absolute path has an empty element at the beginning: - if ('' === $path) { - continue; - } - if (!is_dir($path)) { - if (!mkdir($path)) { - $this->error("Could not create directory $path"); - return false; - } - } - } - return true; - } - - /** - * Process string substitutions - * - * @param string $filename File name (or empty string when converting variables) - * @param string $contents File contents - * - * @return string - */ - protected function processSubstitutions(string $filename, string $contents): string - { - if ($filename) { - $this->debug("$filename: start processing substitutions", OutputInterface::VERBOSITY_DEBUG); - } else { - $this->debug("Start processing substitutions for '$contents'", OutputInterface::VERBOSITY_DEBUG); - } - foreach ($this->substitutions as $i => $substitution) { - if ($filename) { - $this->debug("$filename: processing substitution $i", OutputInterface::VERBOSITY_DEBUG); - } else { - $this->debug("Processing substitution $i for '$contents'", OutputInterface::VERBOSITY_DEBUG); - } - if (str_starts_with($substitution['pattern'], '/')) { - // Regexp - if (is_string($substitution['replacement'])) { - $contents = preg_replace($substitution['pattern'], $substitution['replacement'], $contents); - } else { - $contents = preg_replace_callback( - $substitution['pattern'], - $substitution['replacement'], - $contents - ); - } - if (null === $contents) { - throw new \Exception( - "Failed to process regexp substitution $i: " . $substitution['pattern'] - . ': ' . preg_last_error_msg() - ); - } - } else { - // String - $contents = str_replace($substitution['pattern'], $substitution['replacement'], $contents); - } - } - - if ($filename) { - $this->debug("$filename: done processing substitutions", OutputInterface::VERBOSITY_DEBUG); - } else { - $this->debug("Done processing substitutions for '$contents'", OutputInterface::VERBOSITY_DEBUG); - } - - return $contents; - } - - /** - * Get substitutions - * - * @return array; - */ - protected function getSubstitutions(): array - { - if ($localConfigFile = $this->pathResolver->getLocalConfigPath('lessToScss.config.php')) { - $this->debug("Using local config file $localConfigFile", OutputInterface::VERBOSITY_DEBUG); - $config = include $localConfigFile; - } else { - $configFile = dirname(__FILE__) . '/../../../../config/lessToScss.config.php'; - $this->debug("Using shared config file $configFile", OutputInterface::VERBOSITY_DEBUG); - $config = include $configFile; - } - return $config['substitutions']; - } - - /** - * Output a debug message - * - * @param string $msg Message - * @param int $verbosity Verbosity level - * - * @return void - */ - protected function debug(string $msg, int $verbosity = OutputInterface::VERBOSITY_VERBOSE): void - { - $this->output->writeln($msg, $verbosity); - } - - /** - * Output an error message - * - * @param string $msg Message - * - * @return void - */ - protected function error(string $msg): void - { - if ($this->output) { - $this->output->writeln('' . OutputFormatter::escape($msg) . ''); - } - } - - /** - * Output a warning message - * - * @param string $msg Message - * - * @return void - */ - protected function warning(string $msg): void - { - if ($this->output) { - $this->output->writeln('' . OutputFormatter::escape($msg) . ''); - } - } - - /** - * Check if file name points to a readable file - * - * @param string $filename File name - * - * @return bool - */ - protected function isReadableFile(string $filename): bool - { - return file_exists($filename) && (is_file($filename) || is_link($filename)); - } - - /** - * Check for files newer than the timestamp file in the target directory - * - * @param string $timestampFile Timestamp file path - * @param string $mainFile Main file being processed - * - * @return bool - */ - protected function filesNewerThanTimestampFile(string $timestampFile, string $mainFile): bool - { - $targetTimestampFile = $this->targetDir . "/$timestampFile"; - if (!file_exists($targetTimestampFile) || !($timestamp = filemtime($targetTimestampFile))) { - return false; - } - $targetMainFile = $this->targetDir . '/' . preg_replace('/\.less$/', '', basename($mainFile)) . '.scss'; - $it = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($this->targetDir)); - foreach ($it as $file => $info) { - if ($file === $targetMainFile || !str_ends_with($file, '.scss')) { - // Don't care about target main file, it's centrally managed: - continue; - } - if ($info->getMTime() > $timestamp) { - return true; - } - } - return false; - } -} diff --git a/module/FinnaConsole/src/FinnaConsole/Command/Util/LessToScssCommandFactory.php b/module/FinnaConsole/src/FinnaConsole/Command/Util/LessToScssCommandFactory.php deleted file mode 100644 index ece405b248c..00000000000 --- a/module/FinnaConsole/src/FinnaConsole/Command/Util/LessToScssCommandFactory.php +++ /dev/null @@ -1,70 +0,0 @@ - - * @license http://opensource.org/licenses/gpl-2.0.php GNU General Public License - * @link http://vufind.org/wiki/vufind2:developer_manual Wiki - */ - -namespace FinnaConsole\Command\Util; - -use Laminas\ServiceManager\Exception\ServiceNotCreatedException; -use Laminas\ServiceManager\Exception\ServiceNotFoundException; -use Laminas\ServiceManager\Factory\FactoryInterface; -use Psr\Container\ContainerExceptionInterface as ContainerException; -use Psr\Container\ContainerInterface; - -/** - * Factory for the "less to sass" task. - * - * @category VuFind - * @package Service - * @author Ere Maijala - * @license http://opensource.org/licenses/gpl-2.0.php GNU General Public License - * @link http://vufind.org/wiki/vufind2:developer_manual Wiki - */ -class LessToScssCommandFactory implements FactoryInterface -{ - /** - * Create an object - * - * @param ContainerInterface $container Service manager - * @param string $requestedName Service being created - * @param null|array $options Extra options (optional) - * - * @return object - * - * @throws ServiceNotFoundException if unable to resolve the service. - * @throws ServiceNotCreatedException if an exception is raised when - * creating a service. - * @throws ContainerException if any other error occurs - */ - public function __invoke( - ContainerInterface $container, - $requestedName, - array $options = null - ) { - return new $requestedName($container->get(\VuFind\Config\PathResolver::class)); - } -} diff --git a/themes/custom/less/custom.less b/themes/custom/less/custom.less deleted file mode 100644 index fcdd8a0106c..00000000000 --- a/themes/custom/less/custom.less +++ /dev/null @@ -1 +0,0 @@ -/* All custom less-code here */ diff --git a/themes/custom/less/finna.less b/themes/custom/less/finna.less deleted file mode 100644 index 9b123afc96c..00000000000 --- a/themes/custom/less/finna.less +++ /dev/null @@ -1,40 +0,0 @@ -/* #SCSS> -@import "../../finna2/scss/scss-functions"; - -// Custom theme variable overrides -@import "variables-custom"; - -// Variable overrides -@import "variables"; - -// Finna Bootstrap variable overrides -@import "../../finna2/scss/global/bootstrap-variable-overrides"; - -// Font Awesome (loaded via include path to silence warnings from dependencies) -@import "font-awesome/font-awesome"; - -// Bootstrap v3.4.1 (loaded via include path to silence warnings from dependencies) -@import "vendor/bootstrap/bootstrap"; - -// Finna variables -@import "../../finna2/scss/global/variables"; - -// Bootstrap3 theme components -@import "../../bootstrap3/scss/components/cookie-consent/index"; -@import "../../bootstrap3/scss/components/keyboard"; -@import "../../bootstrap3/scss/components/trees"; - -@import "../../finna2/scss/global"; -@import "../../finna2/scss/finna-other"; -@import "../../finna2/scss/components"; - -// Custom scss -@import "custom.scss"; - -<#SCSS */ -/* #LESS> */ -@import "../../finna2/less/finna.less"; -@import "variables.less"; -@import "variables-custom.less"; -@import "custom.less"; -/* <#LESS */ diff --git a/themes/custom/less/variables-custom.less b/themes/custom/less/variables-custom.less deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/themes/custom/less/variables.less b/themes/custom/less/variables.less deleted file mode 100644 index e6b41276d6f..00000000000 --- a/themes/custom/less/variables.less +++ /dev/null @@ -1,534 +0,0 @@ -// -// Variables for Custom theme -// -------------------------------------------------- - -// Brand Colors -// @brand-primary: #00a3b5; -// @brand-secondary: #B3E3E9; -// @brand-third: #d8f4ed; -// @brand-fourth: #ebd4f0; -// @brand-success: #00b270; -// @brand-warning: #fff48c; -// @brand-danger: #ff461e; -// @brand-info: #b2e3ea; -// @logo-color: #fff; - -//== Custom styling -//== Background -//@background-image-url: url('../images/customhomebg'); -//@background-image-attachment: scroll; // set to fixed or scroll (fixed doesnt scoll along with page) -//@background-start-color: rgba(1,1,1,0.01); // gradient color for background image -//@background-end-color: rgba(1,1,1,0.3); // gradient color for background image -//@background-start-percent: 15%; -//@background-end-percent: 100%; - -//@header-height: 43px; -//@navbar-logo-height: 35px; -//@logo-height: 66px; -//@logo-separator-color: #fff; // Color of hr line under main logo -//@header-background-color: rgba(1,1,1,0.8); // Color of main navigation bar top -//@footer-background: @gray; -//@footer-text-color: @body-bg; -//@finna-main-header-background: @brand-secondary; // Color of page header background and search results tabs -//@finna-searchbox-link-color: #fff; // style searchbox link text color contrast with background -//@finna-searchbox-link-background: rgba(100,100,100,0.3); // style searchbox links (advanced search etc.) background contrast with background -//@finna-record-header-background: @gray-lighter; -//@background-image-gradient: #000, #000, 55%, 30%; -//@finna-text-shadow: 1px 1px 1px black; -//@finna-button-radius: 10px; // Defines some radiuses -//@finna-header-font-size: 1.6em; // Adjust header of each page -//@record-title-font-size: 1.7em; // adjust record view header title size -//@main-tabs-background-color: @brand-primary; -//@main-tabs-link-color: #fff; - -//== Finna home page -//@introduction-header: 2.7em; // adjust slogan size on main page -//@home-content-background: @body-bg; // Add custom background color for home main section -//@home-1-background: @body-bg; -//@home-2-background: @body-bg; -//@home-3-background: @body-bg; -//@home-4-background: @body-bg; -//@home-left-column-background: @body-bg; -//@home-right-column-background: @body-bg; -//@infobox-background: @brand-third; -//@infobox-border: none; -//@infobox-text-color: @gray; -//@infobox-box-shadow: none; - -//== Finna facets -//@sidebar-header-text-color: #fff; // adjust all sidebar headers text color -//@sidebar-header-icon-color: #fff; // adjust sidebar headers icon color -//@sidebar-background: @brand-primary; // adjust all sidebar headers background -//@facet-background: @gray; // adjust finna facet headers -// @facet-text-color: @body-bg; -// @facet-link-hover-background: rgba(1,1,1,0.05); -//@display-checkbox-facet-amount: none; // set to none or inline-block (show results of online material next to selection) - -//== Generated carousel styles - //== Carousel images background-color -//@carousel-slider-background: #000; - //== Styling the header of carousel -//@carousel-header-background: none; -//@carousel-header-color: @gray; - //== Styling the horizontal header of each slide -//@carousel-slide-header-background: rgba(1, 1, 1, 0.6); -//@carousel-slide-header-color: @link-color; -//@carousel-slide-header-text-shadow: none; - //== Vertical slider background -//@carousel-verticalslide-header-background: none; - //== Styling the text color and background of each slide -//@carousel-text-background-color: rgba(1,1,1,0.75); -//@carousel-slide-text-color: rgb(255, 255, 255); -//@carousel-slide-link-color: #fdf07f; - -//== List feed styles -//@list-feed-background: @body-bg; -//@list-feed-padding: 10px; - -//== List feed header style -//@list-feed-header-background: none; -//@list-feed-header-padding: none; -//@list-feed-header-color: @gray; - - -//== Myreresearch custom styles -//@myresearch-header-background: #b0e9db; -//@myresearch-tabs-color: @gray; - -//== Scaffolding -// -// ## Settings for some of the most global styles. - -//@body-bg: #fff; -//@text-color: @gray; -//@link-color: @brand-primary; // defines all link color, also for linked icons -//@link-hover-color: @link-color; -//@link-hover-decoration: #fff; -// @component-active-bg: @brand-primary; - - -//== Typography -// -//## Font, line-height, and color for body text, headings, and more. - -//@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; -//@font-family-serif: PT Serif; -//@font-family-monospace: Monaco; -//@font-family-base: @font-family-sans-serif; -//@headings-font-family: @font-family-base; -//@headings-font-weight: 500; -//@headings-line-height: 1.1; -//@headings-color: inherit; - - -//## Font size, line-height for content pages -//@content-font-size-base: 14px; -//@content-line-height-base: 1.6; -//@headings-font-weight: 700; -//@content-headings-line-height: @headings-line-height; -//@content-headings-color: @gray-dark; -//@content-heading-background: #f3ec7a; - -//** Global color for active items (e.g., navs or dropdowns). -//@component-active-color: #fff; -//** Global background color for active items (e.g., navs or dropdowns). -//@component-active-bg: @brand-primary; - -//** Width of the `border` for generating carets that indicator dropdowns. -//@caret-width-base: 4px; -//** Carets increase slightly in size for larger components. -//@caret-width-large: 5px; - - -//== Tables -// -//## Customizes the `.table` component with basic values, each used across all table variations. - - -//** Finna tables -//@table-finna-record-cell-padding: 3px 0px; -//** Default background color used for all tables. -//@table-bg: transparent; -//** Background color used for `.table-striped`. -//@table-bg-accent: #F7F7F7; // Defines color for striped tables used in record details and holdings -//** Background color used for `.table-hover`. -//@table-bg-hover: #f5f5f5; -//@table-bg-active: @table-bg-hover; - -//** Border color for table and cell borders. -//@table-border-color: transparent; - - -//== Buttons -// -//## For each of Bootstrap's buttons, define text, background and border color. - -//@btn-default-color: #333; -//@btn-default-bg: #fff; -//@btn-default-border: #ccc; -//@btn-primary-color: #fff; // search button text and icon color -//@btn-primary-bg: @link-color; // search button background -//@btn-primary-border: darken(@btn-primary-bg, 0%); -//@btn-success-color: #fff; -//@btn-success-bg: @brand-success; -//@btn-success-border: darken(@btn-success-bg, 5%); -//@btn-warning-color: @gray-light; -//@btn-warning-bg: @brand-warning; -//@btn-warning-border: darken(@btn-warning-bg, 5%); -//@btn-danger-color: #fff; -//@btn-danger-bg: @brand-danger; -//@btn-danger-border: darken(@btn-danger-bg, 5%); -//@btn-info-color: #fff; -//@btn-info-bg: @brand-info; -//@btn-info-border: darken(@btn-info-bg, 5%); -//@btn-link-disabled-color: @gray-light; - -//== Dropdowns -// -//## Dropdown menu container and contents. - -//@dropdown-bg: #fff; -//@dropdown-border: rgba(0,0,0,.15); -//@dropdown-divider-bg: #e5e5e5; -//@dropdown-link-active-color: #fff; -//@dropdown-link-active-bg: @component-active-bg; -//@dropdown-link-color: @gray-dark; -//@dropdown-link-hover-color: @dropdown-link-color; -//@dropdown-link-hover-bg: rgba(1,1,1,0.1); -//@dropdown-link-disabled-color: @gray-light; -//@dropdown-header-color: @gray-light; -//@dropdown-caret-color: #000; -//@dropdown-fallback-border: none; - -//-- Z-index master list -// -// Warning: Avoid customizing these values. They're used for a bird's eye view -// of components dependent on the z-axis and are designed to all work together. -// -// Note: These variables are not generated into the Customizer. - -//@zindex-navbar: 1000; -//@zindex-dropdown: 1000; -//@zindex-popover: 1010; -//@zindex-tooltip: 1030; -//@zindex-navbar-fixed: 1030; -//@zindex-modal-background: 1040; -//@zindex-modal: 1050; - -//== Navbar -// -//## - -// Basics of a Finna navbar -//@navbar-height: 45px; -//@navbar-margin-bottom: 0px; -//@navbar-border-radius: @border-radius-base; -//@navbar-padding-horizontal: floor((@grid-gutter-width / 2)); -//@navbar-padding-vertical: 0px; -//@navbar-collapse-max-height: auto; - -//@navbar-default-color: #777; -//@navbar-default-bg: #fff; -//@navbar-default-border: darken(@navbar-default-bg, 6.5%); - -// Navbar links -//@navbar-default-link-color: #fff; // Color of link texts in navbar -//@navbar-font-size: 1.05em; // Font-size of navbar links -//@navbar-font-weight: 500; // Font weight for navbar texts -//@navbar-default-link-hover-color: #333; -//@navbar-default-link-hover-bg: transparent; -//@navbar-default-link-active-color: #555; -//@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%); -//@navbar-default-link-disabled-color: #ccc; -//@navbar-default-link-disabled-bg: transparent; - -// Navbar brand label -//@navbar-default-brand-color: @navbar-default-link-color; -//@navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%); -//@navbar-default-brand-hover-bg: transparent; - -// Navbar toggle -//@navbar-toggle-color: @navbar-default-link-color; -//@navbar-default-toggle-hover-bg: #ddd; -//@navbar-default-toggle-icon-bar-bg: #888; -//@navbar-default-toggle-border-color: #ddd; - - -// Inverted navbar -// Reset inverted navbar basics -//@navbar-inverse-color: @gray-light; -//@navbar-inverse-bg: #222; -//@navbar-inverse-border: darken(@navbar-inverse-bg, 10%); - -// Inverted navbar links -//@navbar-inverse-link-color: @gray-light; -//@navbar-inverse-link-hover-color: #fff; -//@navbar-inverse-link-hover-bg: transparent; -//@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color; -//@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%); -//@navbar-inverse-link-disabled-color: #444; -//@navbar-inverse-link-disabled-bg: transparent; - -// Inverted navbar brand label -//@navbar-inverse-brand-color: @navbar-inverse-link-color; -//@navbar-inverse-brand-hover-color: #fff; -//@navbar-inverse-brand-hover-bg: transparent; - -// Inverted navbar toggle -//@navbar-inverse-toggle-hover-bg: #333; -//@navbar-inverse-toggle-icon-bar-bg: #fff; -//@navbar-inverse-toggle-border-color: #333; - - -//== Navs -// -//## - -//=== Shared nav styles -//@nav-link-padding: 0px 15px; -//@nav-link-hover-bg: rgba(255,255,255,0.2); - -//@nav-disabled-link-color: @gray-light; -//@nav-disabled-link-hover-color: @gray-light; - -//@nav-open-link-hover-color: #fff; - -//== Finna record Tabs -//@nav-tabs-background-color: #fff; -//@nav-tabs-text-color: @gray; -//@nav-tabs-border-color: @brand-secondary; // this will set the background and border color of tabs in record -//@nav-tabs-link-hover-border-color: @brand-secondary; -//@nav-tabs-link-hover-color: @nav-tabs-active-link-hover-color; -//@tabs-border-radius: 10px; - -//@nav-tabs-active-link-hover-bg: @body-bg; -//@nav-tabs-active-link-hover-color: @gray; -//@nav-tabs-active-link-hover-border-color: #ddd; - -//@nav-tabs-justified-link-border-color: #ddd; -//@nav-tabs-justified-active-link-border-color: @body-bg; - -//== Pills -//@nav-pills-border-radius: @border-radius-base; -//@nav-pills-active-link-hover-bg: @component-active-bg; -//@nav-pills-active-link-hover-color: @component-active-color; - - -//== Pagination in Finna -// -//## -//@pagination-background: @body-bg; -//@pagination-color: @link-color; -//@pagination-bg: @body-bg; -//@pagination-border: transparent; - -//@pagination-hover-color: @link-hover-color; -//@pagination-hover-bg: #f5f5f5; -//@pagination-hover-border: #ddd; - -//@pagination-active-color: @gray-light; -//@pagination-active-bg: #f5f5f5; -//@pagination-active-border: none; - -//@pagination-disabled-color: @gray-light; -//@pagination-disabled-bg: #fff; -//@pagination-disabled-border: transparent; - - -//== Pager -// -//## - -//@pager-bg: @link-color; -//@pager-border: @pagination-border; -//@pager-border-radius: 15px; - -//@pager-hover-bg: @brand-primary; - -//@pager-active-bg: @pagination-active-bg; -//@pager-active-color: @pagination-active-color; - -//@pager-disabled-color: @pagination-disabled-color; - - - -//== Form states and alerts -// -//## Define colors for form feedback states and, by default, alerts. - -//@state-success-text: #2d4821; -//@state-success-bg: #dff0d8; -//@state-success-border: darken(spin(@state-success-bg, -10), 5%); - -//@state-info-text: #31708f; -//@state-info-bg: #d9edf7; -//@state-info-border: darken(spin(@state-info-bg, -10), 7%); - -//@state-warning-text: #8a6d3b; -//@state-warning-bg: #fcf8e3; -//@state-warning-border: darken(spin(@state-warning-bg, -10), 5%); - -//@state-danger-text: #a94442; -//@state-danger-bg: #f2dede; -//@state-danger-border: darken(spin(@state-danger-bg, -10), 5%); - - -//== Tooltips -// -//## - -//** Tooltip max width -//@tooltip-max-width: 200px; -//** Tooltip text color -//@tooltip-color: @body-bg; -//** Tooltip background color -//@tooltip-bg: @gray-light; -//@tooltip-opacity: .9; - -//** Tooltip arrow width -//@tooltip-arrow-width: 5px; -//** Tooltip arrow color -//@tooltip-arrow-color: @body-bg; -//@tooltip-header-color: @gray-light; - -//== Labels -// -//## - -//** Default label background color -//@label-default-bg: @gray-light; -//** Primary label background color -//@label-primary-bg: @brand-primary; -//** Success label background color -//@label-success-bg: @brand-success; -//** Info label background color -//@label-info-bg: @brand-info; -//** Warning label background color -//@label-warning-bg: @brand-warning; -//** Danger label background color -//@label-danger-bg: @brand-danger; - -//** Default label text color -//@label-color: #fff; -//** Default text color of a linked label -//@label-link-hover-color: #fff; - - -//== Modals -// -//## -//@modal-header-background: @brand-primary; -//@modal-header-color: @body-bg; -//** Padding applied to the modal body -//@modal-inner-padding: 20px; - -//** Padding applied to the modal title -//@modal-title-padding: 15px; -//** Modal title line-height -//@modal-title-line-height: @line-height-base; - -//** Background color of modal content area -//@modal-content-bg: #fff; -//** Modal content border color -//@modal-content-border-color: rgba(0,0,0,.2); -//** Modal content border color **for IE8** -//@modal-content-fallback-border-color: #999; - -//** Modal backdrop background color -//@modal-backdrop-bg: #000; -//** Modal backdrop opacity -//@modal-backdrop-opacity: .7; -//** Modal header border color -//@modal-header-border-color: #e5e5e5; -//** Modal footer border color -//@modal-footer-border-color: @modal-header-border-color; - -//@modal-lg: 900px; -//@modal-md: 600px; -//@modal-sm: 300px; - - -//== List group -// -//## - -//** Background color on `.list-group-item` -//@list-group-bg: #f5f5f5; -//** `.list-group-item` border color -//@list-group-border: #ddd; -//** List group border radius -//@list-group-border-radius: @border-radius-base; - -//** Background color of single list elements on hover -//@list-group-hover-bg: #f5f5f5; -//** Text color of active list elements -//@list-group-active-color: @component-active-color; -//** Background color of active list elements -//@list-group-active-bg: @component-active-bg; -//** Border color of active list elements -//@list-group-active-border: @list-group-active-bg; -//@list-group-active-text-color: lighten(@list-group-active-bg, 40%); - -//@list-group-link-color: #555; -//@list-group-link-heading-color: #333; - -//== Badges -// -//## - -//@badge-color: @gray-light; // color of facet count -//** Linked badge text color on hover -//@badge-link-hover-color: #fff; -//@badge-bg: none; - -//** Badge text color in active nav link -//@badge-active-color: @link-color; -//** Badge background color in active nav link -//@badge-active-bg: #fff; -//@badge-font-size: 0.9em; -//@badge-font-weight: 400; -//@badge-line-height: 1; -//@badge-border-radius: 10px; - - -//== Breadcrumbs -// -//## - -//@breadcrumb-padding-vertical: 5px; -//@breadcrumb-padding-horizontal: 5px; -//** Breadcrumb background color -//@breadcrumb-bg: rgba(1, 1, 1, 0.4); -//** Breadcrumb text color -//@breadcrumb-color: #fff; -//** Text color of current page in the breadcrumb -//@breadcrumb-active-color: #fff; -//** Textual separator for between breadcrumb elements -//@breadcrumb-separator: "/ "; - -//== Close -// -//## - -//@close-font-weight: bold; -//@close-color: #000; -//@close-text-shadow: 0 1px 0 #fff; - - -//** Text muted color -//@text-muted: @gray-light; -//** Abbreviations and acronyms border color -//@abbr-border-color: @gray-light; -//** Headings small color -//@headings-small-color: @gray-light; -//** Blockquote small color -//@blockquote-small-color: @gray-light; -//** Blockquote font size -//@blockquote-font-size: (@font-size-base * 1.25); -//** Blockquote border color -//@blockquote-border-color: @gray-lighter; -//** Page header border color -//@page-header-border-color: @gray-lighter; - - -//@accordion-details-display: inherit; \ No newline at end of file diff --git a/themes/custom/scss/custom.scss b/themes/custom/scss/custom.scss index fcdd8a0106c..d4b36f5104c 100644 --- a/themes/custom/scss/custom.scss +++ b/themes/custom/scss/custom.scss @@ -1 +1,2 @@ -/* All custom less-code here */ +/* All custom scss code here */ +/* N.B. Set variables in variables.scss */ diff --git a/themes/custom/templates/search/home/home-2_en-gb.phtml b/themes/custom/templates/search/home/home-2_en-gb.phtml index b6df958055f..f0547847c13 100644 --- a/themes/custom/templates/search/home/home-2_en-gb.phtml +++ b/themes/custom/templates/search/home/home-2_en-gb.phtml @@ -22,15 +22,18 @@
-

Class infobox styles can be edited variables.less file

+

Class infobox styles can be edited in variables.scss file

    -
  • @home-middle-background = background of full container
    • -
  • @infobox-background = infobox background
    • -
  • @infobox-border = infobox border
    • -
  • @infobox-text-color = text default color
    • -
  • @infobox-box-shadow = shadow of infoboxes
    • +
  • $home-middle-background = background of full container
    • +
  • $infobox-background = infobox background
    • +
  • $infobox-border = infobox border
    • +
  • $infobox-text-color = text default color
    • +
  • $infobox-box-shadow = shadow of infoboxes
+
+
feed('carousel-1'); ?>
+
feed('carousel-small'); ?>
diff --git a/themes/custom/templates/search/home/home-2_fi.phtml b/themes/custom/templates/search/home/home-2_fi.phtml index 1f4eb1d9e20..cd5b83ee555 100644 --- a/themes/custom/templates/search/home/home-2_fi.phtml +++ b/themes/custom/templates/search/home/home-2_fi.phtml @@ -1,6 +1,6 @@
-

home-2.phtml

+

home-2_fi.phtml

@@ -22,12 +22,13 @@
-

Luokan infobox tyylit voi määritellä variables.less -tiedostossa

+

Luokan infobox tyylit voi määritellä variables.scss -tiedostossa

    -
  • @infobox-background = laatikon taustaväri
    • -
  • @infobox-border = laatikon reunat
    • -
  • @infobox-text-color = laatikon tekstin oletusväri
    • -
  • @infobox-box-shadow = laatikon varjostus
    • +
  • $home-middle-background = background color of the whole section
    • +
  • $infobox-background = laatikon taustaväri
    • +
  • $infobox-border = laatikon reunat
    • +
  • $infobox-text-color = laatikon tekstin oletusväri
    • +
  • $infobox-box-shadow = laatikon varjostus
diff --git a/themes/custom/templates/search/home/home-2_sv.phtml b/themes/custom/templates/search/home/home-2_sv.phtml index fd5108c97b1..5e7f841a6bf 100644 --- a/themes/custom/templates/search/home/home-2_sv.phtml +++ b/themes/custom/templates/search/home/home-2_sv.phtml @@ -22,15 +22,18 @@
-

TODO Luokan infobox tyylit voi määritellä variables.less -tiedostossa

+

TODO Luokan infobox tyylit voi määritellä variables.scss -tiedostossa

    -
  • @home-middle-background = koko alueen taustaväri
    • -
  • @infobox-background = laatikon taustaväri
    • -
  • @infobox-border = laatikon reunat
    • -
  • @infobox-text-color = laatikon tekstin oletusväri
    • -
  • @infobox-box-shadow = laatikon varjostus
    • +
  • $home-middle-background = koko alueen taustaväri
    • +
  • $infobox-background = laatikon taustaväri
    • +
  • $infobox-border = laatikon reunat
    • +
  • $infobox-text-color = laatikon tekstin oletusväri
    • +
  • $infobox-box-shadow = laatikon varjostus
+
+
feed('carousel-1'); ?>
+
feed('carousel-small'); ?>
diff --git a/themes/finna2/less/components.less b/themes/finna2/less/components.less deleted file mode 100644 index c7df0fdbfad..00000000000 --- a/themes/finna2/less/components.less +++ /dev/null @@ -1,11 +0,0 @@ -@import "components/finna-btn.less"; -@import "components/finna-editable.less"; -@import "components/finna-panel.less"; -@import "components/finna-truncate.less"; -@import "components/finna-tag-list.less"; -@import "components/finna-nav.less"; -@import "components/finna-tooltip-btn.less"; -@import "components/finna-bazaar-browse-bar.less"; -@import "components/finna-multi-level-nav.less"; -@import "components/finna-navbar.less"; -@import "components/finna-md-editable.less"; diff --git a/themes/finna2/less/components/finna-bazaar-browse-bar.less b/themes/finna2/less/components/finna-bazaar-browse-bar.less deleted file mode 100644 index 0c2e06ed2e2..00000000000 --- a/themes/finna2/less/components/finna-bazaar-browse-bar.less +++ /dev/null @@ -1,22 +0,0 @@ -.finna-bazaar-browse-bar { - color: @bazaar-browse-bar-color; - background-color: @bazaar-browse-bar-background-color; - .finna-bazaar-browse-bar-layout { - display: flex; - flex-wrap: wrap; - gap: 10px; - justify-content: space-between; - align-items: center; - padding-top: 10px; - padding-bottom: 10px; - &::before, - &::after { - content: none; - } - } - .finna-bazaar-browse-bar-buttons { - display: flex; - flex-wrap: wrap; - gap: 10px; - } -} diff --git a/themes/finna2/less/components/finna-btn.less b/themes/finna2/less/components/finna-btn.less deleted file mode 100644 index a1bc37200ff..00000000000 --- a/themes/finna2/less/components/finna-btn.less +++ /dev/null @@ -1,6 +0,0 @@ -.finna-btn { - cursor: pointer; - i { - cursor: pointer; - } -} diff --git a/themes/finna2/less/components/finna-editable.less b/themes/finna2/less/components/finna-editable.less deleted file mode 100644 index 197be32c5ed..00000000000 --- a/themes/finna2/less/components/finna-editable.less +++ /dev/null @@ -1,53 +0,0 @@ -.finna-editable { - position: relative; - width: 100%; - border: 1px solid transparent; - padding: 5px; - .finna-editable-btn, .finna-editable-spinner { - position: absolute; - top: 0; - right: 0; - border: none; - padding: 3px 5px; - color: @gray-light; - background-color: transparent; - cursor: default; - } - .finna-editable-btn-icon { - cursor: default; - } - .finna-editable-spinner { - display: none; - } - .finna-editable-container { - min-height: 1em; - } - - // :not rules are used instead of a default variation to make variation changes via JavaScript easier. - &:not(.finna-editable-open) { - &:hover, - &:active, - &:focus { - border: 1px solid @gray-lighter; - .finna-editable-btn { - transition: all 0.2s linear; - color: @gray; - } - } - } -} - -.finna-editable-open { - .finna-editable-btn { - display: none; - } -} - -.finna-editable-busy { - .finna-editable-btn { - display: none; - } - .finna-editable-spinner { - display: initial; - } -} diff --git a/themes/finna2/less/components/finna-md-editable.less b/themes/finna2/less/components/finna-md-editable.less deleted file mode 100644 index 0f978e250e4..00000000000 --- a/themes/finna2/less/components/finna-md-editable.less +++ /dev/null @@ -1,77 +0,0 @@ -.finna-md-editable { - padding: 0; - .fa { - margin-top: 0.25rem; - margin-right: 5px; - } - .fa-pen { - margin-bottom: -12px; - } - h1 { - display: inherit; - } - ul, - ol { - margin-left: 25px; - } - ul li { - list-style-type: disc; - } - ol li { - list-style-type: decimal; - } - @media (min-width: @screen-sm) { - margin-bottom: 4px; - } - .editor-toolbar { - position: relative; - padding-right: 3.2rem; - - .editor-toolbar-close { - position: absolute; - right: 0; - top: 0.8rem; - border: none; - color: @gray !important; - font-size: 1.6rem; - - &:hover, - &:active { - background: white; - color: @gray !important; - } - } - } - .markdown-preview { - display: none; - } - &.finna-editable-open { - .CodeMirror { - height: 300px; - } - .markdown-preview { - position: relative; - display: block; - padding: 10px; - background: #fafafa; - height: 300px; - overflow-y: auto; - border: 1px solid @gray-lighter; - .preview { - position: absolute; - right: 40px; - background-color: @body-bg; - padding: 3px 9px; - } - } - } - & { - padding: 5px; - > p { - margin: 0; - } - } - &.edit .fa-pen { - display: none; - } -} diff --git a/themes/finna2/less/components/finna-multi-level-nav.less b/themes/finna2/less/components/finna-multi-level-nav.less deleted file mode 100644 index d50c5b8e5c0..00000000000 --- a/themes/finna2/less/components/finna-multi-level-nav.less +++ /dev/null @@ -1,8 +0,0 @@ -.finna-multi-level-nav { - margin-top: 12px; - margin-bottom: 12px; - .finna-nav-tabs { - margin-top: 0; - margin-bottom: 0; - } -} diff --git a/themes/finna2/less/components/finna-nav.less b/themes/finna2/less/components/finna-nav.less deleted file mode 100644 index fe131790d07..00000000000 --- a/themes/finna2/less/components/finna-nav.less +++ /dev/null @@ -1,82 +0,0 @@ -.finna-nav { - font-size: 1em; -} - -// Tabs variation. -// Selector specificity is increased to override current global Bootstrap defaults. -.finna-nav.finna-nav-tabs { - position: relative; - border-bottom: 1px solid @nav-tabs-border-color; - font-size: 1em; - &.active-multi-level { - margin-bottom: 3.2em; - } - > li { - display: flex; - justify-content: center; - align-items: center; - margin-bottom: -1px; - border-top: 4px solid transparent; - border-right: 1px solid transparent; - border-bottom: 1px solid @nav-tabs-border-color; - border-left: 1px solid transparent; - background-color: #ededed; - &.active, - &.active-trail { - border-top: 4px solid @nav-tabs-active-color; - border-right: 1px solid @nav-tabs-border-color; - border-bottom: 1px solid @body-bg; - border-left: 1px solid @nav-tabs-border-color; - background-color: transparent; - } - > a, - > a:hover, - > a:focus { - margin: 0; - border: 0; - padding: .6em .6em; - font-size: 1em; - } - > button { - padding-left: 0; - color: @nav-tabs-active-color; - } - } - - // Active tab children when rendered in 'simple' mode. - > li:not(.dropdown) { - position: static; - > ul { - position: absolute; - top: 100%; - left: 0; - display: none; - padding-left: 0; - margin-bottom: 0; - list-style: none; - > li { - flex: 1 0 auto; - padding: .8em .6em; - } - > li > a { - color: @text-color; - } - > li.active > a { - font-weight: bold; - } - } - &.active > ul, - &.active-trail > ul { - display: flex; - } - } -} - -// Large variation. -// Selector specificity is increased to override current global Bootstrap defaults. -.finna-nav.finna-nav-lg { - font-size: 1.14em; - @media (min-width: @screen-lg-min) { - font-size: 1.357em; - } -} diff --git a/themes/finna2/less/components/finna-navbar.less b/themes/finna2/less/components/finna-navbar.less deleted file mode 100644 index 1b87193ba57..00000000000 --- a/themes/finna2/less/components/finna-navbar.less +++ /dev/null @@ -1,205 +0,0 @@ -// -component suffix added to avoid problems with non-component finna-navbar class. -.finna-navbar-component { - @media(max-width: @grid-float-breakpoint-max) { - .navbar-header { - display: flex; - flex-direction: row-reverse; - align-items: center; - } - .navbar-toggle { - position: static; - display: flex; - justify-content: center; - align-items: center; - } - .navbar-brand { - flex-grow: 1; - height: auto; - max-width: none; - line-height: normal; - } - .navbar-collapse > ul > li { - border-bottom: 1px solid @gray-lighter; - } - .navbar-nav > li > a { - margin-top: 0; - margin-bottom: 0; - padding-top: 16px; - padding-bottom: 16px; - } - } -} - -.finna-navbar-icon-caret { - font-family: finnaicons; - font-style: normal; - &::after { - content: '\e612'; - } - .finna-navbar-component .navbar-toggle.collapsed &::after { - content: '\e613'; - } -} - -// Content navbar variation with own variables for customization. - -@finna-navbar-content-color: mix(@brand-primary, contrast(@brand-primary), 5%); -@finna-navbar-content-bg: @brand-primary; -@finna-navbar-content-border: @finna-navbar-content-bg; - -// Navbar links -@finna-navbar-content-link-color: @finna-navbar-content-color; -@finna-navbar-content-link-hover-color: @finna-navbar-content-link-color; -@finna-navbar-content-link-hover-bg: @finna-navbar-content-bg; -@finna-navbar-content-link-active-color: @finna-navbar-content-link-color; -@finna-navbar-content-link-active-bg: @finna-navbar-content-bg; -@finna-navbar-content-link-disabled-color: @finna-navbar-content-link-color; -@finna-navbar-content-link-disabled-bg: @finna-navbar-content-bg; - -// Navbar brand label -@finna-navbar-content-brand-color: @finna-navbar-content-color; -@finna-navbar-content-brand-hover-color: @finna-navbar-content-brand-color; -@finna-navbar-content-brand-hover-bg: @finna-navbar-content-bg; - -// Navbar toggle -@finna-navbar-content-toggle-hover-bg: @finna-navbar-content-bg; -@finna-navbar-content-toggle-icon-bar-bg: @finna-navbar-content-bg; -@finna-navbar-content-toggle-border-color: @finna-navbar-content-border; - -.finna-navbar-content { - background-color: @finna-navbar-content-bg; - border-color: @finna-navbar-content-border; - - .navbar-brand, - .navbar-brand > a { - color: @finna-navbar-content-brand-color; - &:hover, - &:focus { - color: @finna-navbar-content-brand-hover-color; - background-color: @finna-navbar-content-brand-hover-bg; - } - } - - .navbar-text { - color: @finna-navbar-content-color; - } - - .navbar-nav { - > li > a { - color: @finna-navbar-content-link-color; - - &:hover, - &:focus { - color: @finna-navbar-content-link-hover-color; - background-color: @finna-navbar-content-link-hover-bg; - } - } - > .active > a { - &, - &:hover, - &:focus { - color: @finna-navbar-content-link-active-color; - background-color: @finna-navbar-content-link-active-bg; - } - } - > .disabled > a { - &, - &:hover, - &:focus { - color: @finna-navbar-content-link-disabled-color; - background-color: @finna-navbar-content-link-disabled-bg; - } - } - - // Dropdown menu items - // Remove background color from open dropdown - > .open > a { - &, - &:hover, - &:focus { - color: @finna-navbar-content-link-active-color; - background-color: @finna-navbar-content-link-active-bg; - } - } - } - - .navbar-toggle { - border-color: @finna-navbar-content-toggle-border-color; - &:hover, - &:focus { - background-color: @finna-navbar-content-toggle-hover-bg; - } - .icon-bar { - background-color: @finna-navbar-content-toggle-icon-bar-bg; - } - } - - .navbar-collapse, - .navbar-form { - border-color: @finna-navbar-content-border; - - // Finna-specific custom display when collapsed - @media (max-width: @grid-float-breakpoint-max) { - color: @dropdown-link-color; - background-color: @dropdown-bg; - .navbar-nav, - .navbar-nav > .dropdown, - .open .dropdown-menu, - // This last selector is a non-component CSS compatibility hack - .open:not(.logoutOptions):not(.browsebar-dropdown):not(#language_menu) .dropdown-menu { - > li > a { - color: @dropdown-link-color; - background-color: @dropdown-bg; - &:hover, - &:focus { - color: @dropdown-link-hover-color; - background-color: @dropdown-link-hover-bg; - } - } - > .active > a { - &, - &:hover, - &:focus { - color: @dropdown-link-hover-color; - background-color: @dropdown-link-hover-bg; - } - } - > .disabled > a { - &, - &:hover, - &:focus { - color: @dropdown-link-color; - background-color: @dropdown-bg; - } - } - } - } - } - - - // Links in navbars - // - // Add a class to ensure links outside the navbar nav are colored correctly. - - .navbar-link { - color: @finna-navbar-content-link-color; - &:hover { - color: @finna-navbar-content-link-hover-color; - } - } - - .btn-link { - color: @finna-navbar-content-link-color; - &:hover, - &:focus { - color: @finna-navbar-content-link-hover-color; - } - &[disabled], - fieldset[disabled] & { - &:hover, - &:focus { - color: @finna-navbar-content-link-disabled-color; - } - } - } -} diff --git a/themes/finna2/less/components/finna-panel.less b/themes/finna2/less/components/finna-panel.less deleted file mode 100644 index a4181b91cec..00000000000 --- a/themes/finna2/less/components/finna-panel.less +++ /dev/null @@ -1,92 +0,0 @@ -.finna-panel { - .panel-heading { - padding: 0; - } - .finna-panel-heading-inner { - display: inline-block; - width: 100%; - padding: @panel-heading-padding; - } -} - -.finna-panel-default { - border: 0; - box-shadow: none; - .panel-heading { - outline: 1px solid @gray-lighter; - box-shadow: 1px 1px 1px 1px @gray-lighter; - background-color: @gray-ultralight; - } - .finna-panel-heading-inner { - padding: 10px; - } - a.finna-panel-heading-inner { - &::before { - font-family: finnaicons; - content: '\e612'; - } - &.collapsed::before { - content: '\e613'; - } - } - .panel-collapse, - > .panel-body { - margin-top: 2px; - outline: 1px solid @gray-lighter; - } - .panel-body { - padding: 10px; - } -} - -.finna-panel-borderless { - border: 0; - box-shadow: none; - .panel-heading { - border: 0; - font-size: 1.1em; - letter-spacing: .3px; - text-transform: uppercase; - text-shadow: 1px 1px 3px rgba(1,1,1,0.3); - color: @body-bg; - background-color: @gray-light; - } - .finna-panel-heading-inner { - padding: 10px; - } - a.finna-panel-heading-inner { - transition: background .15s ease-in-out; - &:hover, - &:active { - background-color: darken(@gray-light, 15%); - } - &::after { - font-family: finnaicons; - content: '\e612'; - float: right; - } - &.collapsed::after { - content: '\e613'; - } - } - .panel-body { - padding: 10px; - } -} - -// Minimal custom element styling for Markdown preview. -finna-panel { - display: block; - outline: 1px solid @gray-lighter; - margin-bottom: 21px; - padding: 10px; - > [slot="heading"] { - outline: 1px solid @gray-lighter; - display: block; - margin: -10px -10px 10px -10px; - padding: 10px; - font-size: larger; - font-weight: bold; - background-color: @gray-ultralight; - } -} diff --git a/themes/finna2/less/components/finna-tag-list.less b/themes/finna2/less/components/finna-tag-list.less deleted file mode 100644 index e0319293922..00000000000 --- a/themes/finna2/less/components/finna-tag-list.less +++ /dev/null @@ -1,18 +0,0 @@ -.finna-tag-list { - display: flex; - flex-wrap: wrap; - gap: 5px; - & dt { - font-weight: bold; - padding: 5px 10px 5px 0; - &:not(:only-child):after { - content: ':'; - } - } - & li, - & dd { - border-radius: .5em; - background-color: #f4f4f4; - padding: 5px 10px; - } -} diff --git a/themes/finna2/less/components/finna-tooltip-btn.less b/themes/finna2/less/components/finna-tooltip-btn.less deleted file mode 100644 index 266fa26de0d..00000000000 --- a/themes/finna2/less/components/finna-tooltip-btn.less +++ /dev/null @@ -1,8 +0,0 @@ -.finna-tooltip-btn { - border: none; - cursor: pointer; - background-color: transparent; - i { - cursor: pointer; - } -} diff --git a/themes/finna2/less/components/finna-truncate.less b/themes/finna2/less/components/finna-truncate.less deleted file mode 100644 index 8913d1df73c..00000000000 --- a/themes/finna2/less/components/finna-truncate.less +++ /dev/null @@ -1,36 +0,0 @@ -.finna-truncate { - overflow: hidden; - &.height-based > :last-child { - margin-bottom: 0; - } -} - -// Default to legacy Finna truncate more and less links appearance. -.finna-truncate-btn-wrapper-default { - .more-btn, - .less-btn { - cursor: pointer; - font-weight: 600; - text-transform: uppercase; - font-size: 0.9em; - margin-top: 5px; - margin-bottom: 5px; - border: none; - background-color: transparent; - padding: 0; - } -} - -// Minimal custom element styling for Markdown preview. -finna-truncate { - display: block; - outline: 1px dotted @gray-lighter; - padding: 10px; - span[slot="label"] { - display: block; - margin-top: 5px; - margin-bottom: 15px; - font-weight: bold; - text-transform: uppercase; - } -} diff --git a/themes/finna2/less/finna-other.less b/themes/finna2/less/finna-other.less deleted file mode 100644 index 91381353eaa..00000000000 --- a/themes/finna2/less/finna-other.less +++ /dev/null @@ -1,502 +0,0 @@ -// finna/common contains mixins used in other files, so import it first -@import "finna/common"; -@import "finna/accordion"; -@import "finna/advanced-search"; -@import "finna/autocomplete"; -@import "finna/authority"; -@import "finna/collection"; -@import "finna/channels"; -@import "finna/facets"; -@import "finna/date-range"; -@import "finna/finna-dateinput.less"; -@import "finna/tabs"; -@import "finna/image-popup"; -@import "finna/finna-header"; -@import "finna/combinedlist"; -@import "finna/grid-view"; -@import "finna/holdings"; -@import "finna/public-favorites"; -@import "finna/login"; -@import "finna/browse"; -@import "finna/feed"; -@import "finna/content"; -@import "finna/condensed-list"; -@import "finna/compact-list"; -@import "finna/highlight"; -@import "finna/home"; -@import "finna/map"; -@import "finna/location-service"; -@import "finna/organisation-info"; -@import "finna/survey"; -@import "finna/terms-of-service"; -@import "finna/search"; -@import "finna/searchbox"; -@import "finna/browsebar"; -@import "finna/forms"; -@import "finna/search-controls"; -@import "finna/result-sidebar"; -@import "finna/library-cards"; -@import "finna/tooltip"; -@import "finna/street-search"; -@import "finna/navigation"; -@import "finna/myresearch"; -@import "finna/mylist"; -@import "finna/ontology"; -@import "finna/profile"; -@import "finna/page-selectors"; -@import "finna/feedback"; -@import "finna/headings"; -@import "finna/footer"; -@import "finna/modal"; -@import "finna/button-groups"; -@import "finna/video-player"; -@import "finna/record"; -@import "finna/primo"; -@import "finna/filters"; -@import "finna/mobile-toolbar"; -@import "finna/mobile-table"; -@import "finna/audio-player"; -@import "finna/feed-styles.less"; -@import "finna/external-data.less"; -@import "finna/labels.less"; -@import "finna/finna-suggestions.less"; -@import "finna/embedded-content.less"; -@import "finna/wayfinder.less"; -@import "finna/select-a11y.less"; -@import "finna/reservationlist.less"; - -::-ms-clear { - display: none; -} - -iframe { - border: none; -} -header { - background: @header-background-color; -} -// Body without background image (Quick fix!) -body { - background-image: none !important; -} -body { - display: flex; - flex-flow: column; - min-height: 100vh; - section.main { - flex: 1; - } -} -section.main.template-dir-search.template-name-results, -section.main.template-dir-primo.template-name-search, -section.main.template-dir-eds.template-name-search, -section.main.template-dir-authority.template-name-search, -section.main.template-dir-feedback.template-name-response { - & >.container.main-content { - margin-top: 10px; - padding-bottom: 25px; - @media(max-width: @screen-xs-max) { - margin-top: 0px; - } - } - & .resultItemFormat { - margin: 3px 0px; - } -} - -section.main.template-dir-content.template-name-content > .container, -section.main.template-dir-feedcontent.template-name-content > .container { - padding-top: 0; - padding-bottom: 3.4em; -} -.record-row { - margin-top: 20px; -} - -.document-types { - li { - font-size: 1em; - margin-bottom: 10px; - } - & a { - line-height: 1.3em; - } - & a.iconlabel { - color: @link-color; - &:before { - color: @text-color; - } - &:hover { - text-decoration: none; - } - } -} - -i.fa.fa-search.backgrounding { - position: absolute; - right: 30px; - top: 30px; -} -i.fa.fa-search.backgrounding:before { - font-size: 100px; - color: rgba(255,255,255,0.5); -} - -.modal-body.in { - /* These combat the bootstrap weirdness with trying to compensate for scrollbars */ - padding-left: 20px !important; - padding-right: 20px !important; -} -/* Input styles */ -input[type=number].input-year { - -moz-appearance:textfield; - width: 5em; -} -input[type=number].input-year::-webkit-inner-spin-button, -input[type=number].input-year::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; -} - -/* --- Image processing --- */ - -.group [class^=col-] {padding-left:0} -.highlight{&:extend(mark);} -.icon-bar {background-color:#888} -img {max-width:100%} -label.list-group-item {border-radius:0;font-weight:normal;margin-top:0;padding-left:35px} -.list-group-item.title {font-weight:bold} -.tab-content {padding:4px 0px} - -/* --- Collection view --- */ -.template-dir-collection.template-name-view { - & .collection-title { - margin-top: 0; - } - & .list-group.filters { - & input { - max-width: 100%; - @media (min-width: @screen-sm-min) and (max-width: @screen-md-max) { - width: 100%; - margin-bottom: 5px; - } - @media (max-width: @screen-xs-max) { - display: inline-block; - } - } - } -} - -/* --- Badges - blend the links in --- */ -.badge a { - color: #fff; - border-radius: 50%; - padding: 2px 3px; - background: @gray-light; -} - -/* --- OpenURLs --- */ -.template-dir-combined, #search-tabs-recommendations-holder, .local-available-online-record { - .openurls.more-options { - &:extend(.hidden); - } -} -.openUrlControls.openUrlEmbed { - display: block; - visibility: hidden; -} -.openurls { - margin-top: 5px; - & .coverage { - font-size: 0.9em; - color: @gray-light; - } -} - -/* --- DOIs --- */ -.doiLink { - margin-top: 0.5em; - margin-bottom: 0.5em; -} - -/* --- Slider accessibility --- */ -.slider { - .slider-track { - background: @gray-lighter; - box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.4); - - .slider-selection { - background: @link-color; - box-shadow:inset 0 -1px 0 rgba(0,0,0,0.3); - } - } - .slider-handle { - background: @brand-primary; - background-image:none; - border:1px solid @gray-light; - box-shadow:none; - background: #fff; - box-shadow: 0px 0px 10px -4px grey inset, 0px 2px 8px -4px black; - border-radius: 50%; - .opacity(1); - &:hover,&:active,&:focus { - background:#FFF; - border-color: @gray-light; - } - } - & .tooltip .tooltip-inner { - min-width: 10px; - } -} - -/* --- Table wrapping to prevent horizontal overflow --- */ -.table {word-wrap:break-word;} - -/* --- Visualization View --- */ -.node { - border:1px solid white; - box-sizing:content-box; - font: 10px sans-serif; - line-height: 12px; - overflow: hidden; - position: absolute; - margin:-1px; -} -.node div { - margin-top: 0px; -} -.toplevel { - border: 2px solid black; -} -.node .label { - background:rgba(0,0,0,.5); - border-radius:0; - font-size:85%; - position: absolute; - bottom: 0; - left: 0; - text-shadow:none; - min-height:1px; - padding:2px 4px; -} -.notalabel { - color: #000000; -} -#viz-instructions { - padding-top:600px; -} - -//Finna mixins -.truncate-field { - overflow: hidden; - display: none; - &.truncate-done { - display: block; - } - &.summary, - & > :last-child { - margin-bottom: 0; - } -} -.more-link, .less-link, .less-link-top { - cursor: pointer; - font-weight: 600; - text-transform: uppercase; - font-size: 0.9em; - margin-top: 5px; - margin-bottom: 5px; - border: none; - background-color: transparent; - padding: 0; - &.link-buttons { - color: @link-color; - font-weight: 400; - } -} - -// ipad ios 6 fix - .ipad-six { - & header, .nav-tabs, .search-controls, nav, .mylist-functions { - position: relative; - } - & header { - z-index: 4; - } - & .nav { - z-index: 3; - } - & .nav-tabs, .template-dir-myresearch .search-controls { - z-index: 2; - } - & .search-controls, .mylist-functions { - z-index: 1; - } - & .tooltip-facet { - position: absolute; - } - -} - -.content-404 { - padding-top: 20px; - padding-bottom: 20px; - & .links-404 { - margin-top: 10px; - & li { - font-size: 1.1em; - } - } -} - -// External Authentication -.main.template-dir-externalauth { - & .external-content-access { - margin-top: 20px; - margin-bottom: 20px; - - & .unauthorized-description { - margin-bottom: 20px; - } - } -} - -.well { - background-color: mix(@body-bg, contrast(@body-bg), 95%); - border: 1px solid mix(@body-bg, contrast(@body-bg), 85%); -} - -// Virtual keyboard -@media (min-width: 401px) { - .simple-keyboard.show-keyboard { - display: block; - } -} - -.keyboard-selection { - margin-top: 0; -} - -#keyboard-selection-button { - height: 48px; -} - -/* ------ Responsive table for small screen size ------ */ -@media screen and (max-width: 768px) { - .table-responsive { - border: none; - thead, tfoot > tr > th { - position: absolute; - width: 1px; - height: 1px; - margin: -1px; - padding: 0; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; - } - tbody > tr { - display: block; - margin-bottom: @line-height-computed; - border: 1px solid @gray-lighter; - } - td, tbody > tr > th { - display: flex; - align-items: first baseline; - background: #fff; - &:not(.user-account-table-select):before { - display: flex; - flex-basis: 40%; - flex-shrink: 0; - font-weight: bold; - content: attr(data-label); - } - } - tbody > tr > td:nth-child(even) { - background-color: @table-bg-accent; - } - tfoot > tr > td { - border-top: none; - } - } -} - -// Inverse of .table-striped -.finna-table-striped { - > tbody > tr:nth-of-type(even) { - background-color: @table-bg-accent; - } -} - -// Hierarchy tree -.hierarchy-tree-container .hierarchy-tree-search-form { - width: 250px; - margin: 0; - align-items: normal; - gap: 0; - margin-bottom: 0.5em; - .search-query { - height: 40px; - border-right: none; - border-radius: 4px 0 0 4px; - } - .js-load-indicator { - margin: 10px; - } - button.btn-primary { - width: auto; - padding: 0 10px; - font-size: @font-size-base; - font-weight: @btn-font-weight; - border-radius: 0 4px 4px 0; - display: flex; - align-items: center; - justify-content: center; - } -} -.hierarchy-tree__item-container .icon { - display: none; -} -.hierarchy-tree-container div.alert { - margin-top: 10px; -} -.hierarchy-tree .hierarchy-tree__search-match > .hierarchy-tree__item-container > a { - color: @link-color; -} -.collection-hierarchytree { - .tree-panel { - padding: 0 15px 0 0; - } - #tree-preview { - padding: 0; - & > a { - .btn; - .btn-primary; - margin-bottom: 15px; - } - } -} - -// Collection hierarchy tree width -/*.collection-hierarchytree { - display: block; -}*/ - -// Visually hidden skip links -a.skip-link { - position: absolute; - z-index: @zindex-skip-link; - padding: 4px; - top: 0; - left: 0; - background: @skip-link-background-color; - color: @skip-link-color; - &:not(:focus):not(:active) { - clip: rect(0 0 0 0); - clip-path: inset(50%); - height: 1px; - overflow: hidden; - position: absolute; - white-space: nowrap; - width: 1px; - } -} diff --git a/themes/finna2/less/finna-variables.less b/themes/finna2/less/finna-variables.less deleted file mode 100644 index 7c3ad46efde..00000000000 --- a/themes/finna2/less/finna-variables.less +++ /dev/null @@ -1,3 +0,0 @@ -// This file is for backwards compatibility only. - -@import "global/variables"; diff --git a/themes/finna2/less/finna.less b/themes/finna2/less/finna.less deleted file mode 100644 index 3573b34e977..00000000000 --- a/themes/finna2/less/finna.less +++ /dev/null @@ -1,40 +0,0 @@ -/* #SCSS> -@import "scss-functions"; - -@import "global/bootstrap-variable-overrides"; - -@import "font-awesome/font-awesome"; - -// Bootstrap v3.4.1 -@import "bootstrap/bootstrap"; - -// Finna variables -@import "global/variables"; - -// Bootstrap3 theme components -@import "../../bootstrap3/scss/components/cookie-consent/index"; -@import "../../bootstrap3/scss/components/keyboard"; -@import "../../bootstrap3/scss/components/trees"; -<#SCSS */ -/* #LESS> */ - -// Font Awesome -@import "../../bootstrap3/less/vendor/font-awesome/font-awesome"; - -// Bootstrap v3.4.1 -@import "../../bootstrap3/less/vendor/bootstrap/bootstrap"; - -// Bootstrap3 theme components -@import "../../bootstrap3/less/components/cookie-consent/index"; -@import "../../bootstrap3/less/components/keyboard"; -@import "../../bootstrap3/less/components/trees"; - -// Finna variables -@import "global/bootstrap-variable-overrides"; -@import "global/variables"; - -/* <#LESS */ - -@import "global.less"; -@import "finna-other.less"; -@import "components.less"; diff --git a/themes/finna2/less/finna/accordion.less b/themes/finna2/less/finna/accordion.less deleted file mode 100644 index 4192a99a4ad..00000000000 --- a/themes/finna2/less/finna/accordion.less +++ /dev/null @@ -1,181 +0,0 @@ -.accordion { - list-style-type: none; - cursor: pointer; - .accordion-toggle { - padding: 15px 10px; - margin-bottom: 5px; - font-size: 1em; - font-weight: 500; - background-color: @gray-ultralight; - border-top: 1px solid @gray-lighter; - border-right: 1px solid @gray-lighter; - border-bottom: 1px solid @gray-lighter; - border-left: 4px solid @gray-lighter; - @media(min-width: @screen-md) { - display: none; - } - @media print { - border: none; - i { - display: none; - } - @media (max-width: @screen-md-min) { - padding: 15px 0 0; - } - } - } - .accordion-toggle a { - color: @text-color; - display: flex; - align-items: center; - overflow: hidden; - text-overflow: ellipsis; - line-height: @content-headings-line-height; - width: 100%; - cursor: inherit; - .title { - flex: 1; - font-size: @font-size-h2; - } - .icon:after { - font-family: finnaicons; - font-size: 24px; - content: "\e91a"; - color: @action-link-color; - flex: 1; - font-style: normal; - } - } - &.accordion-details{ - @media(max-width: @screen-sm-max) { - display: @accordion-details-display; - } - } - @media print { - &:not(.active) { - display: none; - } - } - &.active { - cursor: default; - .accordion-toggle { - border-left: 4px solid @action-link-color; - .icon:after { - display: none; - } - @media print { - border-left: none; - } - } - @media (max-width: @screen-sm-max) { - .tab-content { - display: block; - margin: 10px 0; - } - } - } -} - -.record-accordions.record-tabs { - margin-bottom: 30px; - width: 100%; - .tab-content { - .truncate-field { - display: block; - } - } -} - -// RSS-feed accordions -.feed-accordions { - .tab-content { - margin-bottom: 0; - } - .feed-accordions-title { - @media (min-width: @screen-sm-max) { - display: none; - } - } - .accordion { - list-style-type: none; - cursor: pointer; - padding: 10px; - margin-bottom: 10px; - font-size: 1em; - font-weight: 500; - outline: 1px solid @gray-lighter; - box-shadow: 1px 1px 1px 1px @gray-lighter; - background-color: @gray-ultralight; - color: @text-color; - display: flex; - align-items: center; - overflow: hidden; - text-overflow: ellipsis; - line-height: @content-headings-line-height; - width: 100%; - @media(min-width: @screen-md) { - display: none; - } - .feed-accordion-anchor { - display: inline-flex; - align-items: center; - color: @nav-tabs-text-color; - } - .title { - flex: 1; - font-size: ceil((@font-size-base * 1.125)); - font-weight: 700; - } - .icon { - font-size: @font-size-base; - font-size: ceil((@font-size-base * 0.8)); - margin-right: 5px; - } - .js-accordion-open { - display: none; - } - &.accordion-details{ - @media(max-width: @screen-sm-max) { - display: @accordion-details-display; - } - } - @media print { - &:not(.active) { - display: none; - } - } - &.active { - .js-accordion-open { - display: inline; - } - .js-accordion-close { - display: none; - } - @media (max-width: @screen-sm-max) { - .tab-content { - display: block; - margin: 10px 0; - } - } - } - } -} - -// Show or hide feed tabs mobile accordion -.feed-tabs.mobile-accordion-hide, .linked-events-tabs.mobile-accordion-hide { - .feed-accordions-title, .accordion { - display: none; - } - .events-tabs { - @media (max-width: @screen-sm-max) { - margin-bottom: 0; - } - } -} -.feed-tabs.mobile-accordion-show, .linked-events-tabs.mobile-accordion-show { - .feed-tabs-container { - @media (max-width: @screen-sm-max) { - display: none; - } - } -} diff --git a/themes/finna2/less/finna/advanced-search.less b/themes/finna2/less/finna/advanced-search.less deleted file mode 100644 index fcd67f7f838..00000000000 --- a/themes/finna2/less/finna/advanced-search.less +++ /dev/null @@ -1,603 +0,0 @@ -/* --- Advanced Search --- */ - -// Mixin for generating hierarchical elements -/* #SCSS> -.generate-hierarchy($n, $i: 1) { - @if ($i <= $n) { - &.child-width-${i} { - width: ($i * 13px); - } - .generate-hierarchy($n, ($i + 1)); - } -} -<#SCSS */ -/* #LESS> */ -.generate-hierarchy(@n, @i: 1) when (@i =< @n) { - &.child-width-@{i} { - width: (@i * 13px); - } - .generate-hierarchy(@n, (@i + 1)); -} -/* <#LESS */ - -.template-name-advanced { - h1.content-header { - padding-left: 75px; - font-weight: 500; - color: @text-color; - &::before { - font-family: finnaicons; - content: "\e91e"; - position: absolute; - top: -15px; - bottom: -15px; - left: 15px; - width: 60px; - background: @brand-primary; - color: white; - line-height: 64px; - text-align: center; - font-size: 32px; - @media (max-width: @screen-xs-max) { - top: -7px; - bottom: -7px; - width: 48px; - font-size: @font-size-base * 1.5; - line-height: 48px; - } - } - } - .header-container { - border-bottom: 1px solid @gray-mid-light; - padding-bottom: 10px; - margin-bottom: 20px; - font-size: 18px; - h2 { - position: relative; - display: inline; - } - button { - float: right; - border: none; - background: transparent; - padding: 6px; - i { - cursor: pointer; - } - - @media (max-width: @screen-xxs) { - i { - font-size: 24px; - } - span { - display: none; - } - } - } - } - #advSearchForm { - margin-top: 20px; - } - .adv-search-bar { - padding-bottom: 20px; - padding-top: 10px; - margin-top: -10px; - background-color: @body-bg; - position: -webkit-sticky; - position: sticky; - bottom: 0; - z-index: 1001; - &.primo-search-bar { - text-align: right; - padding-bottom: 10px; - margin-bottom: 10px; - } - .clearfix(); - } - .responsive-field { - min-width: 45%; - } - .applied-adv-search-filters { - margin-top: 15px; - } - .adv-group { - position: relative; - margin-top: 5px; - margin-bottom: .5em; - h3 { - font-size: 16px; - margin-top: 0; - margin-bottom: 16px; - } - .add_search_link { - display: inline-block; - margin-top: 10px; - padding: 6px; - @media (max-width: @screen-xxs) { - width: 100%; - } - } - .responsive-field { - max-width: 49%; - } - .match { - @media (max-width: @screen-xs-max) { - margin-bottom: 10px; - } - } - .adv-group-close { - border: none; - background: transparent; - margin-top: 10px; - padding: 6px; - color: @link-color; - float: right; - @media (max-width: @screen-xs-max) { - font-size: @font-size-small; - } - } - .adv-search, .primo-advanced-search-fields { - margin-bottom: 0px; - padding-top: 3px; - select, input { - margin-bottom: 3px; - } - .close {opacity: .8;} - @media (max-width: @screen-xs-max) { - select:first-child { - display: block; - } - } - } - .primo-advanced-search-fields { - .responsive-field { - min-width: inherit; - } - } - .primo-add-search { - display: inline-block; - margin-top: 10px; - padding: 6px; - } - [class^=col-] {padding-left: 15px;} - } - #groupPlaceHolder { - padding:6px; - margin-left: 15px; - - .btn { - padding: 6px; - } - } - #groupJoin { - padding: 0px 0px 20px; - border: 2px solid @brand-primary; - border-top: none; - margin-top: -10px; - margin-bottom: 30px; - #groupJoinOptions { - margin-bottom: -56px; - } - } - .slider.slider-horizontal { - margin-top: 6px; - width: 95%; - margin-left: 10px; - display: inline-block; - vertical-align: middle; - position: relative; - .slider-tick-container { - position: relative; - .slider-tick { - margin-left: 0px; - } - } - } - .slider { - .slider-selection { - top: 0; - bottom: 0; - position: absolute; - } - .slider-track { - height: 10px; - width: 100%; - margin-top: -5px; - top: 10px; - left: 0; - position: absolute; - cursor: pointer; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - border-top-left-radius: 4px; - border-top-right-radius: 4px; - } - .slider-handle { - position: absolute; - width: 20px; - height: 20px; - margin-left: -10px; - margin-top: 0px; - z-index: 2; - } - .slider-tick-label-container { - text-align: center; - margin-top: 20px; - } - .slider-tick { - background: @gray-mid-light; - height: 8px; - margin-left: 0; - margin-top: -4px; - width: 1px; - position: absolute; - } - .tooltip.top { - margin-top: -36px; - } - } - .primo-advanced-search-fields { - margin-bottom: 10px; - label { - @media(max-width: @screen-xs-max) { - margin-top: 10px; - margin-bottom: 20px; - } - } - } - .limit-to { - .ranges-container, .limit-container { - overflow: hidden; - margin-top: 10px; - label { - padding-top: 5px; - } - .slider-container { - padding: 0 10px; - } - } - .year-input-container { - margin: 5px 0 10px 0; - display: inline-block; - padding-right: 10px; - text-align: left; - } - label { - display: block; - } - .language-container, .format-container { - @media(max-width: @screen-xs-max) { - .btn-group { - width: 100%; - text-align: left; - } - } - &:not(:last-child) { - margin-bottom: 15px; - } - } - } - .adv-search-group { - @media (min-width: @screen-xs) { - .search-text { - min-width: initial; - max-width: initial; - width: 64%; - } - .search-select { - min-width: initial; - width: 34%; - } - } - } - .adv-group-match { - @media (min-width: @screen-sm){ - width: 40%; - position: relative; - padding-bottom: 15px; - } - } - .adv-group-terms { - @media (min-width: @screen-sm){ - position: relative; - padding-right: 15px; - } - } - .group-join-container { - position: relative; - width: 100%; - float: left; - margin-top: 30px; - } - .well.map { - background: @body-bg; - .information { - margin-top: 10px; - } - .information-text { - margin: 0; - } - } - .search_bool { - margin-right: 10px; - } - .information { - display: inline-block; - position: relative; - .information-text { - display: inline-block; - padding-left: 2.25em; - margin: 0; - } - &::before { - padding-left: 5px; - font-size: 1.5em; - color: @brand-primary; - display: block; - font-family: finnaicons; - content: "\e00f"; - line-height: 1em; - position: absolute; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - &.information-multiselect { - padding-top: 20px; - } - } - .additional-info { - padding: 8px; - &.alert-info { - margin-top: 10px; - } - .information-text { - padding-bottom: 5px; - padding-left: 2.4em; - font-size: .9em; - } - } - .information-geo { - padding: 5px; - } - .finna-main-header { - background-color: @well-bg; - color: @gray; - @media (max-width: @screen-xs-max) { - padding: 7px 0; - } - .container { - position: relative; - } - } - .content-header { - display: inline-block; - } - .ranges-container .year-input-container { - width: 100%; - vertical-align: top; - @media (min-width: @screen-sm-min) { - width: 30%; - } - } - .ranges-container, - .solr-adv-filter { - .information { - width: 100%; - margin: 10px 0; - @media (min-width: @screen-sm-min) { - width: 69%; - margin: 0; - } - } - } - .finna-main-tabs { - padding-top: 15px; - } - @media (max-width: @screen-xs-max) { - .well, .adv-group__blender { - padding: 10px; - } - } - .checkbox-filters { - .checkbox { - padding-left: 0; - } - } - .slider-container { - @media (max-width: @screen-xs-max) { - padding: 5px; - } - } - .tooltip-pci-advanced { - line-height: 22px; - } - - #groupJoin { - label { - font-weight: normal; - margin-bottom: -16px; - display: block; - padding: 0 10px; - } - } - .label-block, - .label-style { - &:extend(label); - } - .label-block { - display: block; - } - .facet-container { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: start; - } - .facet { - margin-bottom: 30px; - @media (min-width: @screen-xs-min) { - width: 45%; - } - @media (max-width: @screen-xxs-max) { - width: 100%; - } - label { - margin-bottom: 10px; - } - .finna-multiselect.search { - width: 100%; - border-radius: 4px 4px 0 0; - } - .finna-multiselect.clear { - padding: 2px 0; - } - .finna-multiselect.done { - height: 200px; - background-color: white; - overflow-y: scroll; - border: 1px solid lightgray; - border-radius: 0 0 4px 4px; - margin: 0; - border-top: none; - position: relative; - - .option { - padding: 2px 0; - position: relative; - user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -webkit-user-select: none; - &.option-parent { - background-color: white; - z-index: 1; - } - .value:before { - content: '\f096'; - font-family: 'FontAwesome'; - margin: 0px 4px; - font-weight: initial; - display: inline-block; - width: 12px; - font-size: 16px; - } - &[aria-selected="true"] .value:before { - content: '\f046'; - } - &.active { - background-color: lightgray; - } - - .hierarchy-line { - display: inline-block; - position: absolute; - z-index: 0; - border-bottom: 2px solid lightgray; - border-left: 2px solid lightgray; - height: 100%; - left: 4px; - top: -50%; - - .generate-hierarchy(6); - &.option-child:not(.child-width-1) { - border-bottom: none; - } - } - } - } - .info { - padding-bottom: 5px; - font-size: .9em; - font-weight: 600; - } - } - .option-container { - position: relative; - > .information { - position: absolute; - top: 4px; - right: 0; - &::before { - top: -1px; - } - @media (max-width: @screen-xs-max) { - .information-text { - padding-left: 26px; - } - } - @media (max-width: @screen-xxs-max) { - max-width: 50%; - } - } - } - .facets { - @media (max-width: @screen-xxs-max) { - margin-top: 30px; - } - } -} - -/* --- EDS --- */ -.adv-term-input, -.adv-term-op { margin-bottom: .25rem; } -.adv-search:first-of-type .adv-term-op { display: none; } -@media (min-width: @screen-sm-min) { - .eds-adv .adv-term-op { - float: left; - width: 16%; - margin-right: 1%; - } - .eds-adv .adv-search:first-of-type .adv-term-input { margin-left: 17%; } - .eds-adv .adv-term-input { - float: left; - width: 39%; - margin-right: 0; - } - .eds-adv .help-block { - float: left; - width: 8%; - text-align: center; - } -} - -.advanced-search, -.advanced-search .input-group { - width: 100%; - @media(min-width: @screen-md){ - width: 75%; - } -} - -.adv-term-input.form-control, .adv-term-type.form-control { - display: initial; -} -.template-dir-eds .template-name-advanced { - ranges-container{ - overflow: auto; - } - .checkbox-label { - padding-left: 0px; - font-weight: normal; - } - - .year-input-container { - margin: 5px 0px; - } - input.input-year{ - width: 5em; - } -} - -.solr-adv-filter { - .btn-group { - padding-right: 10px; - } -} - -.template-dir-primo .template-name-advanced .adv-group { - margin-bottom: 20px; -} - -.adv-group.adv-group__blender { - &:extend(.well); -} diff --git a/themes/finna2/less/finna/audio-player.less b/themes/finna2/less/finna/audio-player.less deleted file mode 100644 index 7caf00f5e62..00000000000 --- a/themes/finna2/less/finna/audio-player.less +++ /dev/null @@ -1,182 +0,0 @@ -.audio-item-wrapper { - margin-bottom: 5px; - padding-bottom: 5px; - margin-bottom: 10px; - ::-moz-focus-inner { - border:0; - } - :focus { - outline:none; - } - .open-link { - font-size: @font-size-small - } -} - -.audio-accordion { - @media (min-width: @screen-sm-max) { - max-width: 300px; - } -} - -.audio-title-wrapper, -.audio-accordion-item { - padding: 5px; -} - -.audio-title-wrapper { - background-color: @brand-primary; - color: white; - border-radius: 5px; - position: relative; -} - -.audio-title { - margin-left: 25px; - &::before { - content: "\f107"; - font-family: VideoJS; - background: white; - width: 20px; - height: 20px; - display: inline-block; - border-radius: 10px; - text-align: center; - color: @brand-primary; - position: absolute; - top: ~"calc(50% - 10px)"; - left: 5px; - } -} - -.audio-accordion-item { - border-left: @sidebar-border; - border-right: @sidebar-border; - border-bottom: @sidebar-border; - border-radius: 0 0 5px 5px; - text-align: center; - .play { - font-size: 35px; - color: @action-link-color; - } -} - -.audio-accordion-item { - display: none; -} - -.audio-item-wrapper:not(.active) { - .audio-title-wrapper { - cursor: pointer; - } -} - -.audio-item-wrapper.active { - .audio-accordion-item { - display: block; - } - - .audio-title-wrapper { - border-radius: 5px 5px 0 0; - } -} - -.audio-player-wrapper { - margin-bottom: 15px; -} - -.vjs-audio { - background: transparent; - color: @brand-primary; - height: 60px !important; - padding: 0; - width: 100%; - - .vjs-big-play-button, - .vjs-poster, - .vjs-text-track-display, - &.vjs-has-started .vjs-poster, - .vjs-fullscreen-control, - .vjs-remaining-time { - display: none; - } - - .vjs-button > .vjs-icon-placeholder::before { - font-size: 2.5em; - line-height: 30px; - } - - .vjs-control-bar { - display: block; - top: 0%; - background: transparent; - height: unset; - - > div, > button { - height: 3em; - position: absolute; - } - } - - .vjs-play-control { - bottom: 0px; - align-self: center; - left: 40%; - width: 20%; - - .vjs-icon-placeholder:before { - width: 30px; - height: 30px; - border-radius: 15px; - background-color: @brand-primary; - color: white; - left: ~"calc((100% - 30px) / 2)"; - } - } - - .vjs-menu-button-inline.vjs-slider-active { - width: 20%; - } - - .vjs-current-time, - .vjs-duration { - display: block; - top: 0%; - width: 15%; - padding: 0; - } - - .vjs-current-time { - left: 0; - } - - .vjs-duration { - right: 0; - } - - .vjs-progress-control { - width: 70%; - left: 15%; - top: 0; - - .vjs-play-progress { - background-color: @brand-primary; - } - } - - .vjs-loading-spinner { - width: 40px; - height: 40px; - bottom: -5px; - top: initial; - left: ~"calc(50% - 21px)"; - right: initial; - margin: 0; - } -} - -.finna-popup.finna-audio { - display: flex; - align-items: center; - justify-content: center; -} diff --git a/themes/finna2/less/finna/authority.less b/themes/finna2/less/finna/authority.less deleted file mode 100644 index 25e956d8f41..00000000000 --- a/themes/finna2/less/finna/authority.less +++ /dev/null @@ -1,285 +0,0 @@ -@iconFontSize: 1.3em; - -.record.sourceSolrAuth { - // .media and .media-body code added to fix IE11 display: table-cell issues - .media { - display: block; - } - .format { - font-weight: bold; - } -} - -.result.condensed-list-view .condensed-collapse-toggle .condensed-body.authority { - width: 100%; -} -.result { - .authority-record-info .authority-record-summary-container { - display: flex; - align-items: baseline; - .author { - margin-right: 20px; - } - } -} -.result.condensed-list-view { - .title-container { - display: flex; - flex-wrap: wrap; - .title { - margin-right: 10px; - } - } -} -a.authority-link { - display: inline-block; - &::after { - margin-left: 5px; - } - i { - margin-right: 0.1em; - font-size: @iconFontSize; - } -} -.record-information .record-core-metadata .recordAuthors .authority { - display: inline-block; -} -.record-main { - .authority-records-summary { - margin-top: 10px; - margin-bottom: 10px; - > div { - .info-row { - display: flex; - align-items: baseline; - } - .text { - font-weight: 700; - width: 30%; - } - .count { - font-size: 1.4em; - } - } - } - .table-finna-record.record-details { - .info { - color: @gray; - font-size: 0.9em; - } - .record-origination { - .author-description { - display: inline-block; - } - } - } -} -.authority { - + br { - display: none; - } - .authority-info { - display: none; - margin: 10px 0; - table.record-details { - th { - min-width: 40%; - } - td { - max-width: 60%; - } - } - } - .authority-info { - table { - margin: 10px 0; - } - } - &.open { - .authority-info { - display: block; - } - } - .no-info { - display: inline-block; - } - .show-info { - display: inline-block; - .link-text { - font-size: 0.9em; - } - i { - margin-right: 0.1em; - font-size: @iconFontSize; - } - } - .hide-info .link-text { - font-size: 0.9em; - } - .role { - color: @gray; - } -} -.main-content .authority-recommend { - .authoritybox { - border: 1px solid @gray-lighter; - background-color: @gray-ultralight; - margin-bottom: 20px; - padding: 10px; - overflow: hidden; - display: flex; - flex-wrap: wrap; - flex-direction: row; - - @media (min-width: @screen-md) { - .media-left { - width: initial; - } - } - .media-left { - flex-direction: column; - width: initial; - flex: 1 1 100%; - } - .media-right { - flex-direction: column; - flex: 1 1 100%; - font-size: 12px; - .access-rights { - .cc-rights { - padding: 0; - margin: 0; - } - } - } - @media (min-width: @screen-sm) { - .media-left { - flex-basis: 60%; - } - .media-right { - flex-basis: 40%; - } - } - &.filtered { - border-top: none; - } - .roles { - margin-top: 1em; - margin-bottom: 1em; - } - .record-details th { - width: 20%; - } - .resultItemFormat { - margin-bottom: 0.3em; - i { - vertical-align: middle; - font-size: @iconFontSize; - } - } - h3 { - margin-top: 0.3em; - margin-bottom: 0.3em; - } - div:first-child { - margin-right: 0.3em; - } - } - .tabs-table { - ul.nav-tabs { - margin-top: 0; - margin-bottom: 0; - border-bottom: none; - position: relative; - display: flex; - border-bottom: 1px solid @gray-lighter; - @media(max-width: @screen-xs-max) { - padding-top: 10px; - } - @media(max-width: 390px) { - &.many-tabs > li { - max-width: 64px; - a { - min-height: 70px; - padding: 4px 4px; - font-size: .8em; - } - } - } - > li { - color: @body-bg; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - //margin-bottom: 4px; - border: none; - @media (max-width: @screen-sm) { - &:not(.many-tabs) { - flex-basis: 50%; - } - } - &.active { - border-bottom: 4px solid @main-tabs-active-color; - border-top: none; - border-left: none; - border-right: none; - margin-top: 4px; - a:hover { - border: none; - } - } - &.spinner { - margin-left: 0; - position: absolute; - right: 40px; - bottom: 12px; - } - &.toggle { - font-family: finnaicons; - font-size: 24px; - float: right; - position: absolute; - right: 8px; - bottom: 5px; - color: #007c90; - &:before { - content: "\e916"; - } - &.collapsed { - &:before { - content: "\e91a"; - } - } - } - > a { - background-color: @main-tabs-background-color; - padding: 5px 10px; - //margin-bottom: 0; - border: 0; - font-size: 1em; - font-weight: 600; - color: @main-tabs-text-color; - transition: none; - @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { - word-break: break-word; - } - .icon { - color: @link-color; - font-size: 1.8em; - vertical-align: middle; - } - } - } - } - } -} -.record-accordions .authority-records { - .pagination-container { - margin-bottom: 20px; - } - .search-btn-container { - margin-top: 25px; - text-align: center; - } -} diff --git a/themes/finna2/less/finna/autocomplete.less b/themes/finna2/less/finna/autocomplete.less deleted file mode 100644 index b844f6d819f..00000000000 --- a/themes/finna2/less/finna/autocomplete.less +++ /dev/null @@ -1,129 +0,0 @@ -.autocomplete-results { - .box-shadow(0px 5px 16px -2px @gray); - margin-top: 4px; - border: 1px solid @list-group-border; - background-color: #fff; - border-radius: 10px; - @media (max-width: @screen-sm-max) { - max-width: 85% !important; - } - &.checkbox-active { - margin-top: 40px !important; - } - & .item { - display: block; - padding: 7px; - border-bottom: none; - color: @gray; - position: relative; - cursor: pointer; - - &:hover { - text-decoration: none; - } - &.first {border-top-left-radius: 10px; border-top-right-radius: 10px;} - &.last {border: 0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;} - &.selected { - background-color: @brand-primary; - color: #fff; - } - &:not(.loading):not(.selected):hover { - background-color: @gray-lighter; - } - &.loading { - font-style: normal; - &:before { - font-family:'Fontawesome'; - content: "\f110"; - color: @gray-light; - font-size: 1.2em; - margin-right: 5px; - &:extend(.fa-spin); - } - } - } - & .group { - padding-bottom: 6px; - margin: 6px; - margin-top: 0px; - border-bottom: 1px solid @gray-lighter; - &:first-child { - margin-top: 5px; - } - &:last-child { - border-bottom: none; - padding-bottom: 0px; - } - } - & .query-exact:after { - margin-left: 8px; - content: 'Hae täsmälleen'; - font-weight: bold; - } - & .query-Author:after { - margin-left: 8px; - content: 'Hae tekijöistä'; - font-weight: bold; - } - & .query-Title:after { - margin-left: 8px; - content: 'Hae otsikoista'; - font-weight: bold; - } - & .query-Subject:after { - margin-left: 8px; - content: 'Hae aiheesta'; - font-weight: bold; - } - & .group:before { - float: right; - margin-top: 3px; - line-height: 1em; - font-size: 1em; - margin-right: 2px; - color: #ADADAD; - padding: 0px 2px; - font-weight: bold; - } - & .group:first-child:before { - margin-top: 0px; - } - & .group { - &.facet, &.filter, &.suggestion, &.phrase, &.handler, &.isbn { - &:before { - content: attr(data-title); - } - } - } - & .group { - &.facet, .filter { - font-weight: bold; - } - } - & .group.handler, .group.phrase { - & .item { - &:after { - font-weight: bold; - content: attr(data-title); - margin-left: 10px; - } - } - } - .ac-isbn { - display: flex; - img { - margin-right: 10px; - max-height: 80px; - max-width: 60px; - } - .iconlabel { - margin-top: 5px; - color: #d1d1d1; - font-size: 2em; - } - span { - margin-top: 10px; - } - } - -} diff --git a/themes/finna2/less/finna/browse.less b/themes/finna2/less/finna/browse.less deleted file mode 100644 index 3b091b05ec7..00000000000 --- a/themes/finna2/less/finna/browse.less +++ /dev/null @@ -1,79 +0,0 @@ -section.main.template-dir-search.template-name-results.browse { - &>.container.main-content { - padding-top: 20px; - margin-top: 0; - } -} - -// Alpha & list Browse - -section.template-dir-browse { - & .browse.list-group { - @media (max-width: @screen-xs-max) { - margin-top: 20px; - } - a.list-group-item:hover { - text-decoration: underline; - } - &:first-child { - margin-top: 20px; - } - &:last-child { - margin-bottom: 25px; - } - & a.list-group-item { - display: inline-block; - } - & .widen { - width: 100%; - background: @gray-ultralight; - margin-bottom: 3px; - max-width: 500px; - & a { - background-color: @gray-ultralight; - } - & a.list-group-item.active { - background-color: @brand-primary; - } - } - & .list-group-item.view-record { - padding: 12px 15px; - } - } - & #list3 { - & a { - min-width: 45px; - text-align: center; - margin-bottom: 2px; - } - @media(min-width: @screen-sm) { - width: 50%; - float: left; - } - } - & #list2 { - margin-bottom: 20px; - } - & #list4 { - @media(min-width: @screen-sm) { - width: 50%; - float: right; - } - & a.list-group-item { - display: block; - width: 100%; - margin-bottom: 2px; - } - } -} - -/* --- Browse --- */ -.browse.list-group .list-group-item { - word-wrap:break-word; - &.view-record { - border-top:0; - font-size:85%; - padding:2px 4px; - text-align:right; - } -} diff --git a/themes/finna2/less/finna/browsebar.less b/themes/finna2/less/finna/browsebar.less deleted file mode 100644 index 697081b6338..00000000000 --- a/themes/finna2/less/finna/browsebar.less +++ /dev/null @@ -1,144 +0,0 @@ -.browsebar { - width: 100%; - background-color: @finna-browsebar-background; - bottom:0; - color: @finna-browsebar-link-color; -} -.browsebar .nav>li .iconlabel:before, -.browsebar .nav-dropdown-label.iconlabel:before, -.browsebar .dropdown-menu a.iconlabel:before{ - vertical-align: bottom; - font-size: 1.3em; - margin-right: 0.5em; -} -.browsebar .navbar { - border-radius: 0; - border: none; - max-width: none; - background-color: transparent; -} -.browsebar .nav>li { - line-height: normal; -} -.browsebar .navbar .navbar-nav>li>a { - color: @finna-browsebar-link-color; - padding-left: 5px; - padding-right: 5px; - font-size: 1.1em; - height: 64px; - line-height: 64px; - margin-top: 0; - margin-bottom: 0; - i.fa { - margin-right: 0.5em; - } -} -.browsebar button .iconlabel { - color: @finna-browsebar-link-color; -} -.browsebar .nav>li>a:hover, .browsebar .nav>li>a:focus { - background-color: darken(@finna-browsebar-background, 5%); -} -.browsebar-title { - color: tint(@finna-browsebar-background,78%); - text-transform: uppercase; - font-size: 0.9em; - vertical-align: middle; - font-weight: 600; - padding-right: 25px; - line-height: 64px; - float: left; -} -@media (max-width: @screen-xs-max) { - .browsebar { - .dropdown-menu { - position: absolute; - background: @body-bg; - } - .navbar { - min-height: 40px; - } - } -} - -.browsebar { - .priority-nav__dropdown { - left: 0; - top: 30px; - li > a.iconlabel { - margin: 0px; - } - } - .nav-dropdown-toggle { - height: 64px; - font-size: 1.1em; - border: none; - background-color: transparent; - color: @finna-browsebar-link-color; - padding: 0; - padding-left: 1em; - line-height: normal; - &:before { - content: "\e00d"; - font-family: finnaicons; - font-size: 1.3em; - margin-right: 0.5em; - padding-right: 3px; - vertical-align: bottom; - } - &:after { - font-family: finnaicons; - content: "\e613"; - vertical-align: middle; - margin-left: 5px; - } - &:hover { - background-color: darken(@finna-browsebar-background, 5%); - } - .nav-dropdown-label { - min-width: 200px; - line-height: 64px; - .caret { - margin-left: 5px; - } - } - } - nav.navbar { - width: 100%; - float: left; - .nav-wrapper { - margin-left: 75px; - } - } -} - -.browsebar .browse-link { - width: 30%; - float: right; - background: @finna-browsebar-highlight-background; - padding: 0px 10px; - line-height: 64px; - a { - display: inline-block; - color: @finna-browsebar-link-color; - font-size: 1.1em; - i { - font-style: normal; - font-size: 1.1em; - line-height: 1.5em; - vertical-align: middle; - color: @finna-browsebar-link-color; - } - } - & ~ nav.navbar { - @media(min-width: @screen-sm) and (max-width: @screen-sm-max){ - width: 65%; - } - @media(min-width: @screen-md){ - width: 70%; - } - } - @media(max-width: @screen-sm-max){ - width: 35%; - } -} diff --git a/themes/finna2/less/finna/button-groups.less b/themes/finna2/less/finna/button-groups.less deleted file mode 100644 index 10a141b1e5f..00000000000 --- a/themes/finna2/less/finna/button-groups.less +++ /dev/null @@ -1,48 +0,0 @@ -//== Styling Finna radiobuttons -.radiobutton { - font-size: 14px; - font-weight: normal; - - & :last-child { - padding-bottom: 5px; - } - & input { - border: none; - background: transparent; - margin-right: 10px; - margin-top: 4px; - } - & input:before { - content: "\e61b"; - font-family: finnaicons; - font-size: 18px; - margin: -3px 0px 0px -3px; - position: absolute; - background: @body-bg; - border-radius: 50%; - color: @gray-light; - transition: color .1s linear; - } - & input:checked:before { - font-family: finnaicons; - content: "\e61a"; - color: @link-color; - } -} - -//== Bulk actions buttons - -.bulkActionButtons { - & .btn-group { - .btn { - border: 1px solid @gray-lighter; - background: @gray-ultralight; - color: @text-color; - padding: 5px 10px; - font-size: 0.9em; - @media(max-width: @screen-xs-max) { - padding: 5px; - } - } - } -} diff --git a/themes/finna2/less/finna/channels.less b/themes/finna2/less/finna/channels.less deleted file mode 100644 index 57f6a8b3087..00000000000 --- a/themes/finna2/less/finna/channels.less +++ /dev/null @@ -1,45 +0,0 @@ -.channel { - position: relative; - width: 100%; - height: 300px; - border: 1px solid @btn-default-border; - border-radius: @border-radius-base; -} -.channel .slider-menu { - border-top-color: @btn-default-border; - border-radius: 0 0 @border-radius-base @border-radius-base; - .channel-links .btn { margin-left: 4px; } -} -.channel .channel-record.slide { - display: inline-block; - min-width: 100px; - max-height: 240px; - padding: 0 .5rem; - text-align: center; - text-overflow: ellipsis; - overflow: hidden; -} -.channel .channel-record.is-selected { - color: @link-hover-color; - text-decoration: @link-hover-decoration; -} -.channel .channel-record .thumb { - height: 200px; - background-position: center center; - background-repeat: no-repeat; - background-size: contain; -} -.channel .popover { - width: 500px; - max-width: none; -} - -.channel-title a:hover { text-decoration: none; } -.channel-title i.fa-fw { - width: 1.4em; - padding-top: 0.5em; - font-size: 0.6em; - text-align: center; - vertical-align: top; -} -.channel-title .placeholder { width: 25px; } diff --git a/themes/finna2/less/finna/collection.less b/themes/finna2/less/finna/collection.less deleted file mode 100644 index e1994175d7c..00000000000 --- a/themes/finna2/less/finna/collection.less +++ /dev/null @@ -1,69 +0,0 @@ -.collection-list-controls { - display: flex; - margin-bottom: 0.5em; - .sort-and-view-buttons { - display: flex; - flex-direction: row; - } - .filter-input { - flex-grow: 1; - white-space: nowrap; - .input-group { - width: 250px; - display: flex; - align-items: normal; - #keywordFilter_lookfor { - height: 40px; - border-right: none; - border-radius: 4px 0 0 4px; - } - } - } - button.btn-primary { - width: auto; - height: 40px; - padding: 0 10px; - font-size: @font-size-base; - font-weight: @btn-font-weight; - border-radius: 0 4px 4px 0; - display: flex; - align-items: center; - justify-content: center; - } - .view-option-container, .sort-option-container { - margin: auto 0 auto 5px; - .view-dropdown i:first-child { - margin-right: 5px; - @media (max-width: @screen-sm-max) { - margin-right: 20px; - } - } - } - @media (min-width: @screen-xs-min) { - .dropdown-menu { - right: 0; - left: auto; - } - } - @media(max-width: @screen-xxs-max) { - flex-direction: column; - .sort-and-view-buttons { - margin-top: 10px; - } - } -} - -.template-dir-collection .mobile-navigation { - bottom: 44px; -} - -.collectionlist-tab .finna-filters { - border-top: 1px solid @gray-lighter; - border-bottom: 1px solid @gray-lighter; - margin-bottom: 0.5em; -} - -.template-dir-collection .record-accordions.record-tabs { - width: 100%; - padding: 0; -} diff --git a/themes/finna2/less/finna/combinedlist.less b/themes/finna2/less/finna/combinedlist.less deleted file mode 100644 index 12b4cf29944..00000000000 --- a/themes/finna2/less/finna/combinedlist.less +++ /dev/null @@ -1,86 +0,0 @@ -.combined-list { - margin-top: 1em; - @media(min-width:@screen-sm-min) { - margin-top: 70px; - } - .combined-titles { - border-bottom: 4px solid @gray-lighter; - padding-bottom: 10px; - - @media(min-width:@screen-sm-min) { - margin-top: -50px; - } - } - .combined-list-title { - padding-bottom: 5px; - display: inline; - } - .combined-search-results { - margin: 10px 0 15px; - } - & .result .combined-save-record { - margin-top: 10px; - font-size: 1.05em; - } - & h4 { - display: inline; - } - .show-list-details { - line-height: 25px; - margin: 0px; - color: @link-color; - &:hover { - cursor: pointer; - } - } - .sub-label { - margin-top: 10px; - } - & .filters-active { - & .fa { - float: right; - } - } -} - -/* ------ COMBINED ------ */ -@media (min-width: 768px) { - .combined-search-container { - display: flex; - .result { margin-left: 0; } - .result-body { - float: none; - width: auto; - } - .result-links { display: none; } - } - .combined-column { - flex: 0 1 100%; - padding-left: 1rem; - &:first-child { - border-right: 4px solid @gray-lighter; - padding-right: 1rem; - @media(max-width:@screen-xs-max) { - border-right: none; - & .combined-titles { - margin-top: 20px; - border-bottom: none; - } - } - } - &:last-child { - border-left: 4px solid @gray-lighter; - margin-left: -4px; - @media(max-width:@screen-xs-max) { - border-left: none; - border-top: 4px solid @gray-lighter; - margin-left: 0px; - & .combined-titles { - margin-top: 20px; - border-bottom: none; - } - } - } - } - .combined-column:last-child { padding-right: 1rem; } -} diff --git a/themes/finna2/less/finna/common.less b/themes/finna2/less/finna/common.less deleted file mode 100644 index 71731555312..00000000000 --- a/themes/finna2/less/finna/common.less +++ /dev/null @@ -1,545 +0,0 @@ -/* #SCSS> -@use 'sass:color'; -<#SCSS */ - -.page-content { - width: 100%; - @media (min-width: @screen-lg) { - width: 75%; - } -} - -.badge { - padding: 0 0 0 2px; - font-size: @badge-font-size; - line-height: inherit; - vertical-align: inherit; - margin-top: 1px; -} - -.close { - text-shadow: none; - .opacity(.8); - - &:hover, - &:focus { - .opacity(1); - } -} - -.input-group { - .form-control { - width: auto; - } -} - -.media, -.media-body { - overflow: visible; -} - -.popover { - min-width: min(200px, @popover-max-width); -} - -@media print { - // Don't show certain links and buttons - a.title, .dateyeartype a,.image-popup-trigger, .image-popup-navi, .record-details a, .record-authors a, .record-core-metadata a,.recordTabs a, .pagination-simple a { - &[href]:after { - content: none !important; - } - } - button, a.btn { - display: none !important; - } -} - -.date-and-year() { - font-size: @font-size-base; - line-height: 1.35em; - letter-spacing: 0.5px; - font-weight: 400; - margin-bottom: 6px; -} - -.resultHierarchyLinks { - margin-bottom: 6px; -} - -.hierarchyTreeLink { - margin-top: 6px; -} - -.archive-label { - font-size: @font-size-base; - font-weight: 400; - letter-spacing: 0px; - color: @gray-light; -} - -.dedupInformation .dedup-select { - font-weight: bold; - margin-bottom: 4px; - height: 30px; -} - -.radio input[type="radio"], -.radio-inline input[type="radio"], -.checkbox input[type="checkbox"], -.checkbox-inline input[type="checkbox"] { - position: relative; - margin-left: 0px; -} - -.datepicker { - & .datepicker-switch { - color: @link-color; - font-size: 1.1em; - } - & .prev,& .next { - font-size: 1.1em; - } - &.dropdown-menu { - padding: 10px; - } -} - -.checkbox label{ - display: inline; - padding-left: 0; -} - -.add-to-favorite-col { - .qrcode { - min-width: 120px; - } - @media (min-width: @screen-sm) { - position: absolute; - top: 0px; - right: 0px; - text-align: right; - i { - font-size: 16px; - text-align: right; - margin-bottom: 5px; - } - } -} -.add-to-favorite-col, .location-link-text { - .qrcodeLink { - background-color: @body-bg; - } -} -.location-link-text { - .qrcode { - width: 120px; - height: 120px; - max-width: inherit; - } - .location-service-qrcode { - display: inline-block; - } -} -.branchInfo .location-link-text, .copy-info .location-link-text { - margin-left: 8px; -} -.copy-info .location-link-text { - float: right; -} - -//== SYSTEM MESSAGES -.system-messages { - background-color: @state-warning-bg; - padding-top: 0.6em; - padding-bottom: 0.6em; - text-align: center; - z-index: 1; - @media (max-width: @grid-float-breakpoint) { - position: relative; - top: @navbar-height; - } -} - -/* Cookie Consent and pre-production warning message */ -.cookie-consent, .pre-production-warning { - background-color: @cookie-consent-background-color; - color: @cookie-consent-color; - display: flex; - align-items: center; - z-index: 1; - .cookie-consent-text { - flex: 1; - margin-right: 19px; - padding-top: 0.6em; - padding-bottom: 0.6em; - a { - color: @cookie-consent-link-color; - text-decoration: underline; - } - } - .cookie-consent-button { - position: relative; - right: 15px; - a { - border: @cookie-consent-button-border; - } - } - @media (max-width: @grid-float-breakpoint) { - position: relative; - top: @navbar-height; - .cookie-consent-button { - right: 0; - } - } -} -.pre-production-warning { - border: 2px dotted red; -} - -/* Bazaar Browse Bar */ -.finna-bazaar-browse-bar { - @media (max-width: @grid-float-breakpoint) { - position: relative; - top: @navbar-height; - } -} - -/* TABLES */ -table.content-table { - font-size: @content-font-size-base; - margin-top: 0; - margin-bottom: 2.9em; - line-height: 1.4em; -} - -.content-table caption { - font-color: @gray-dark; -} -.content-table th, .content-table td { - padding: 0.4em 1.5em 0.4em 0; - font-weight: normal; - border-bottom: 1px solid @gray-lighter; -} -.table.table-finna-record { - > thead, - > tbody, - > tfoot { - > tr { - > th, - > td { - padding: @table-finna-record-cell-padding; - word-wrap: break-word; - } - } - } - ul { - margin-bottom: 0; - } - @media (min-width: @screen-sm-min) { - table-layout: fixed; - } -} - -.table.record-field-groups { - > tbody > tr > th { - text-transform: uppercase; - @media (min-width: @screen-sm-min) { - text-transform: none; - } - } - > tbody > tr > td { - @media (min-width: @screen-sm-min) { - padding-left: 80px; - } - > table { - > thead, - > tbody, - > tfoot { - > tr { - > th, - > td { - padding: @table-finna-record-cell-padding; - word-wrap: break-word; - } - } - } - } - } - .subheading { - margin: 0; - padding: 6px 0; - font-weight: bold; - text-transform: none; - } -} - -table#componentparts { - th { - background-color: @list-group-bg; - border-right: 2px solid @body-bg; - &.sorting_asc, &.sorting_desc, &.sorting { - padding-left: 8px; - } - &.sorting_asc { - &:extend(.fa-arrow-up all); - } - &.sorting_desc { - &:extend(.fa-arrow-down all); - } - &.sorting { - &:extend(.datatables-sort-both all); - &:before { - opacity: 0.5; - } - } - // Hide defaults from dataTables.bootstrap.min.css - &.sorting_asc:after, &.sorting_desc:after, &.sorting:after { - content: ""; - } - } - .even td { -/* #SCSS> - background: color.adjust(@nav-tabs-border-color, $alpha: 0.8); -<#SCSS */ -/* #LESS> */ - background: fade(@nav-tabs-border-color, 5%); -/* <#LESS */ - } - td a { - font-weight: bold; - } -} - -.list-group { - border-radius: 0px; -} - -// Unordered and Ordered lists -ul, -ol { - padding: 0; - & li { - list-style-type: none; - } -} - -// Content pages list options -// -------------------------------------------------- - -//Unstyled list -.list-plain { - padding-left: 0; - padding-bottom: 0.9em; - - > li { - list-style-type: none; - } -} - -// Bulleted list -.list-bullets { - padding-left: 1.2em; - padding-bottom: 0.9em; - - > li { - list-style-type: disc; - } -} - -// Numbered list -.list-numbers { - padding-left: 1.5em; - padding-bottom: 0.9em; - - > li { - list-style-type: decimal; - } -} - -.btn-unstyled { - border: none; - background-color: transparent; -} - -// A general-purpose flexbox layout mixin for switching between a horizontal -// and a vertical layout at a given, container-based breakpoint. -// -// @switcher-breakpoint - A vertical layout will be used if the width of the -// container is less than this. A horizontal layout -// will be used otherwise. -.switcher-layout(@switcher-breakpoint) { - // Flex container. - & > * { - display: flex; - flex-wrap: wrap; - } - // Flex items. - // By default all flex items are the same size but it it is possible to set a - // different flex-grow for specific items. - & > * > * { - flex-grow: 1; - flex-basis: calc(~'('@switcher-breakpoint ~'- 100%) * 999'); - } - // These rules provide additional robustness for horizontal layouts containing - // many (five or more) elements. - & > * > :nth-last-child(n+5), - & > * > :nth-last-child(n+5) ~ * { - flex-basis: 100%; - } -} - -// A switcher layout helper mixin adding spacing useful for lines. -.switcher-line-layout(@switcher-breakpoint) { - .switcher-layout(@switcher-breakpoint); - & > * > * + * { - padding-left: 1.5em; - } -} - -// Utility classes for setting switcher layouts. -.switcher-line-xxs { - .switcher-line-layout(@screen-xxs); -} -.switcher-line-xxxs { - .switcher-line-layout(280px); -} - -// Cookie Consent Dialog -.show--preferences #cc-main .cc--anim .pm-overlay { - opacity: @modal-backdrop-opacity; -} - -#cc-main { - -webkit-font-smoothing: inherit; - -moz-osx-font-smoothing: inherit; - text-rendering: inherit; - - .cm { - z-index: 1; - } - .pm { - z-index: 2; - } - a { - &:hover { - color: @link-hover-color; - text-decoration: @link-hover-decoration; - background-size: 0%; - } - } - .cm-wrapper { - z-index: 1; - position: relative; - } - .cc--anim .cm__close, - .cc--anim .cm__btn, - .pm__btn { - transition: none; - } - .cm--bar .cm__btn, .pm__btn { - font-size: 14px; - padding: @padding-base-vertical @padding-base-horizontal; - - &:hover { - color: @btn-primary-color; - background: darken(@btn-primary-bg, 5%); - } - } - .cm--bar .cm__btn { - flex: none; - } - @media screen and (max-width: 640px){ - .pm--box { - top: @navbar-height + 1px; - } - } - .pm__section--expandable .pm__section-arrow { - background: none; - } - - .pm__section--toggle { - background: transparent; - } - .pm__header { - color: @modal-header-color; - background: @modal-header-background; - font-size: @content-headings-font-size-h4; - padding: 8px 1em; - - h2 { - margin: 0.5rem 0; - } - } - .pm__body, .pm__footer { - padding-left: 1em; - padding-right: 1em; - } - .pm__close-btn { - background: transparent; - border: none; - svg { - stroke: @modal-header-color; - stroke-width: 5; - stroke-opacity: 0.8; - transform: scale(.7); - } - &:hover { - background: transparent; - border: none; - svg { - stroke-opacity: 1; - } - } - } -} - -// OIDC Login Prompt -.oauth2-prompt { - ul { - margin-top: 1rem; - padding: revert; - li { - list-style-type: inherit; - } - } - .oauth2-ils-selection { - margin-top: 1rem; - margin-bottom: 1rem; - - form { - margin-top: 1rem; - } - } - .select-card-wrapper { - display: block; - } -} - -// Styled checkboxes -.checkbox-container { - input[type=checkbox] { - height: 16px; - width: 16px; - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; - border: 1px solid @gray-light; - border-radius: 4px; - margin: 0px; - top: 3px; - position: relative; - - &:checked{ - background-color: black; - &:after{ - font-family: 'Fontawesome'; - content: "\f00c"; - color: white; - position: absolute; - font-size: 14px; - line-height: 14px; - font-weight: normal; - } - } - } -} diff --git a/themes/finna2/less/finna/compact-list.less b/themes/finna2/less/finna/compact-list.less deleted file mode 100644 index 4d80c9b7e7e..00000000000 --- a/themes/finna2/less/finna/compact-list.less +++ /dev/null @@ -1,44 +0,0 @@ -.result.compact-list-view { - background-color: initial; - padding-top: 5px; - padding-bottom: 5px; - padding-left: 0; - position: relative; - - .main-content { - display: flex; - } - .resultItemFormat { - display: inline-block; - } - .compact-body { - width: 65%; - } - .compact-links { - width: 35%; - } - .available-online-header { - display: none; - } - .record-container { - .add-to-favorite-col { - @media (min-width: @screen-sm) { - position: absolute; - top: 0px; - right: 0px; - text-align: right; - } - .qr-box { - position: absolute; - right: 0px; - z-index: 1000; - } - } - } - .list-view { - .publish-year { - margin: 3px; - display: inline-block; - } - } -} diff --git a/themes/finna2/less/finna/condensed-list.less b/themes/finna2/less/finna/condensed-list.less deleted file mode 100644 index 2cb82c190d9..00000000000 --- a/themes/finna2/less/finna/condensed-list.less +++ /dev/null @@ -1,160 +0,0 @@ -.result.compact-list-view, -.result.condensed-list-view { - padding-top: 6px; - padding-left: 2em; - padding-bottom: 6px; - margin-bottom: 2px; - transition: background .1s linear; - background: rgba(100,100,100,0.04); - .icon.condensed-expand { - display: inline-block; - } - .icon.condensed-collapse { - display: none; - } - &.open { - background: @body-bg; - .icon.condensed-expand { - display: none; - } - .icon.condensed-collapse { - display: inline-block; - } - } - &:first-child { - padding-top: 6px; - - } - & .authorize { - position: absolute; - top: 0; - right: -7px; - color: @gray-light; - font-size: 1.1em; - @media(max-width: @screen-xs-max) { - left: -8px; - top: 8px; - } - } - & .fa-info-database, .fa-browse-database { - margin-right: 3px; - } - .condensed-collapse-toggle { - display: flex; - flex-flow: wrap; - & h2.title { - font-size: 1.25em; - font-weight: 400; - line-height: 1.1em; - margin: 0; - display: inline; - } - &:hover { - cursor: pointer; - } - & a:hover { - background: transparent; - } - .condensed-body { - .icon.condensed-expand, .icon.condensed-collapse { - font-size: 1.2em; - margin-left: -1.2em; - line-height: 1em; - color: @gray-light; - } - } - .resultItemFormat, .available-online-links, .resultOtherLinks { - margin-left: 0px; - } - & .resultItemFormat { - display: inline; - } - .available-online-links { - margin-bottom: 0px; - margin-top: 0px; - @media(max-width:400px) { - margin: 0px; - margin-left: 0px; - } - strong { - display: none; - } - } - .resultOtherLinks { - .date-and-year(); - } - .condensed-body { - width: 50%; - @media (max-width: @screen-xs-max) { - width: 100%; - } - } - .condensed-links { - width: 50%; - @media (max-width: @screen-xs-max) { - width: 100%; - } - } - .condensed-col-title { - width: 50%; - @media (max-width: @screen-xs-max) { - width: 100%; - } - } - .condensed-col-link { - width: 50%; - @media (min-width: @screen-md-min) { - width: 25%; - } - } - .condensed-col-hierarchy { - width: 25%; - .hierarchyTreeLink { - margin-top: 0; - } - @media (max-width: @screen-xs-max) { - width: 100%; - } - } - } - .condensed-collapse-data { - display: none; - padding: 10px 0; - margin-top: 0px; - - & .resultClassification { - margin-bottom: 10px; - } - & .holding-details { - margin-top: 0; - } - & .summary { - line-height: 1.4em; - } - & .table-condensed tbody>tr>th { - width: 150px; - } - .media-left { - width: 40%; - min-width: 120px; - @media (min-width: @screen-md-min) { - width: 25%; - min-width: 100px; - } - } - @media (min-width: @screen-sm-min) { - .media-body { - width: 10000px; - } - } - .result-database { - @media (min-width: @screen-sm-min) { - display: flex; - .database-subject { - min-width: 200px; - padding-left: 15px; - } - } - } - } -} diff --git a/themes/finna2/less/finna/content.less b/themes/finna2/less/finna/content.less deleted file mode 100644 index 6f72dc38ad3..00000000000 --- a/themes/finna2/less/finna/content.less +++ /dev/null @@ -1,181 +0,0 @@ -.template-dir-content.template-name-content { - & ul.about-login-targets { - padding: inherit; - & li { - list-style-type: inherit; - margin-left: 1.3em; - } - } -} - -// Typography for content pages -// ------------------------------- -h1.content-header { - padding: 5px 0; -} - -.main.template-dir-content.template-name-content, -.main.template-dir-feedcontent.template-name-content { - h1 { - font-size: @content-headings-font-size-h1; - } - h2 { - font-size: @content-headings-font-size-h2; - line-height: @content-headings-line-height; - margin-top: 0; padding-top: 0.7em; padding-bottom: 0.1em; - } - h3, h4 { - line-height: (@content-headings-line-height * 1.1); - margin-top: 0; - } - h5, h6 { - line-height: @content-line-height-base; - } - h3 { - font-size: @content-headings-font-size-h3; - margin: 0; padding-top: 0.2em; padding-bottom: 1em; - } - h4 { - font-size: @content-headings-font-size-h4; - margin: 0; padding-top: 0.6em; padding-bottom: 1.2em; - } - h5 { - font-size: @content-headings-font-size-h5; - margin: 0; padding-top: 0; padding-bottom: 0; - } - h6 { - font-size: @content-headings-font-size-h6; - text-transform: uppercase; - margin: 0; padding-top: 0.4em; padding-bottom: 0em; - } - p, ul, ol { - font-size: @content-font-size-base; - line-height: @content-line-height-base; - margin-bottom: 15px; - } - - .odd-fluid { - background: @gray-ultralight; - } - .organisation-list-inner-row > div { - position: relative; - & > .organisation-list-beta { - position: absolute; - right: 15px; - top: 0; - padding: 1px 2px; - line-height: 1; - text-transform: uppercase; - background-color: #13aebe; - color: #fff; - } - & img { - border: 1px solid @gray-lighter; - } - & .organisation-list-header { - font-weight: bold; - margin-top: 3px; - margin-bottom: -4px; - } - & .organisation-list-header, .organisation-list-url { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - & .organisation-list-url:hover { - text-decoration: underline; - } - & a:hover { - text-decoration: none; - } - } - .organisation-list-header { - color: @text-color; - } - .organisation-list-url { - color: @link-color; - margin-bottom: 25px; - } - ul:not(.nav-tabs.help-tabs):not(.finna-nav) li:not(.feed-tab) { - margin-bottom: 3px; - } - .organisation-list-item { - width: 25%; - float: left; - padding: 15px; - @media(max-width: @screen-sm){ - width: 50%; - } - } - .organisation-list-group { - &::after { - display: block; - content: ""; - clear: both; - } - } -} - -//== CONTENT PAGES -.content-section { - padding-bottom: 20px; - border-bottom: 1px solid @gray-lighter; -} - -ul.nav-tabs.help-tabs { - margin-top: 3em; - & li { - color: @header-text-color; - font-size: 24px; - font-weight: 500; - padding: 10px 15px; - @media(max-width: @screen-lg){ - font-size: 20px; - } - } -} -.template-name-content .finna-multi-level-nav-content { - margin-top: 3em; -} - -.example-image-area { - width: 260px; - margin-left: 25px; - margin-bottom: 25px; - @media(min-width: @screen-xs){ - float: right !important; - } - & img { - width: 80%; - margin-bottom: 5px; - } - & p { - width: 80%; - padding-left: 5px; - padding-right: 5px; - line-height: 1 !important; - } -} - -.finna-aboutfinna-panel { - border: 1px solid @gray-lighter; - background: @gray-ultralight; - box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); -} - -.finna-aboutfinna-nav { - > li { - display: inline-block; - padding-bottom: 0.5em; - > a { - color: @brand-primary; - border: 1px solid @brand-primary; - padding: 0.5em; - &:hover, - &:focus { - color: #fff; - background: @brand-primary; - } - } - } -} diff --git a/themes/finna2/less/finna/date-range.less b/themes/finna2/less/finna/date-range.less deleted file mode 100644 index d4322ec02fd..00000000000 --- a/themes/finna2/less/finna/date-range.less +++ /dev/null @@ -1,171 +0,0 @@ -.main.template-dir-search.template-name-home, -.sidebar { - & .list-group-item:not(.title).daterange.expand { - transition: box .3s linear; - - .timeline_within { - margin-left: 10px; - } - @media (min-width: @screen-sm-min) { - box-shadow: -4px 0px 13px -5px #000; - padding: 10px; - z-index: 4; - } - @media (min-width: @screen-lg-min) { - width: 1140px; - margin-left: -878px; - } - @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { - width: 940px; - margin-left: -728px; - } - @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { - width: 720px; - margin-left: -562px; - } - } - & .daterange-facet { - & .list-group-item:not(.title).daterange { - padding-top: 10px; - background-color: @gray-ultralight; - padding: 3px 10px; - } - - & .fa.timeline { - margin-left: 10px; - } - & .submit .fa { - margin-right: 5px; - } - & .daterange-vis { - padding-top: 5px; - & button { - margin-left: 10px; - margin-top: 1px; - margin-bottom: 10px; - @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { - margin-left: 0; - } - } - & .range-type { - margin: 5px 0px; - clear: both; - } - & .form-ui { - - & .year-range { - float: left; - margin-bottom: 10px; - } - & .year-separator { - color: @gray; - } - & label { - color: white; - & input { - color: blue; - } - } - & .submit { - margin-top: 0; - margin-left: 15px; - background-color: @btn-primary-bg; - } - } - & .content { - clear: both; - position: relative; - height: 114px; - border-radius: 5px 5px 5px 5px; - - & .date-vis { - width: 100%; - height: 110px; - cursor: crosshair; - background: @body-bg; - } - & .icon--spin { - display: none; - left: 45%; - top: -60px; - position: relative; - } - &.loading .icon--spin { - display: inline-block; - } - } - & .navigation { - margin-top: -4px; - padding-top: 7px; - color: @link-color; - width: 100%; - display: inline-block; - background: @body-bg; - padding-left: 1%; - & .zoom-out, .zoom-in, .prev, .next { - font-size: 1.1em; - float: left; - } - & .zoom-out { - margin-right: 5px; - } - & .zoom-in { - margin-left: 5px; - margin-right: 3px; - } - & .expand-modal { - float: right; - margin-right: 9px; - font-size: .8em; - margin-top: 4px; - @media (max-width: @screen-xs-max) { - display: none; - } - } - & .icon { - cursor: pointer; - font-size: 1.5em; - } - } - - } - & .daterange-form { - display: block; - overflow: auto; - & .submit { - float: right; - background-color: @btn-primary-bg; - } - & .range-type { - margin-top: 10px; - clear: both; - } - } - & .btn-primary { - font-size: 1em; - padding: 7px 8px; - } - & input[type=number] { - width: 48px; - } - } - &.sidebar-on-left { - & .list-group-item:not(.title).daterange.expand { - margin-left: 0; - @media (min-width: @screen-sm-min) { - box-shadow: 4px 0px 13px -5px #000; - } - } - } -} - -.template-dir-primo { - & .sidebar .daterange-facet .form-ui { - & .year-range { - float: left; - } - & .submit { - margin-top: 0; - } - } -} diff --git a/themes/finna2/less/finna/embedded-content.less b/themes/finna2/less/finna/embedded-content.less deleted file mode 100644 index d7d6cad0914..00000000000 --- a/themes/finna2/less/finna/embedded-content.less +++ /dev/null @@ -1,24 +0,0 @@ -finna-consent, .embedded-content-placeholder { - background: black; - color: white; - display: flex; - align-items: center; - justify-content: center; - - .embedded-content-heading { - font-size: @content-headings-font-size-h4; - } - - .embedded-content-cookie-info > div { - padding: 1rem 2rem; - } - .embedded-content-actions { - display: flex; - gap: 2rem; - flex-wrap: wrap; - } -} - -finna-consent { - height: 100%; -} diff --git a/themes/finna2/less/finna/external-data.less b/themes/finna2/less/finna/external-data.less deleted file mode 100644 index a876e71c57d..00000000000 --- a/themes/finna2/less/finna/external-data.less +++ /dev/null @@ -1,128 +0,0 @@ -.external-data { - width: 100%; - border: 1px @gray-lighter solid; - - .fa-chevron-up, .fa-chevron-down { - font-size: .80em; - vertical-align: middle; - } - &.collapsible { - .toggle-expand { - display: none; - } - &.collapsed { - .toggle-collapse { - display: none; - } - .toggle-expand { - display: initial; - } - } - } - - thead { - display: block; - } - .items { - overflow-x: hidden; - overflow-y: auto; - max-height: 300px; - border: 1px solid @gray-lighter; - } - - .tbl-row { - clear: both; - overflow: hidden; - &:not(.info) { - padding: 10px 10px 10px 20px; - } - &.external-data-headers { - padding-left: 5px; - } - &:nth-child(even):not(.info) { - background-color: @gray-ultralight; - } - } - - &.physical-items { - .tbl-cell { - &.tbl-left { - float: left; - width: 40%; - font-size: 1.5m; - font-weight: 600; - } - &.tbl-right { - float: right; - width: 60%; - } - } - .tbl-row:not(.external-data-headers) { - .tbl-left, .tbl-right { - @media (max-width: @screen-xs-max) { - width: 100%; - } - } - } - .tbl-row.external-data-headers { - .tbl-left, .tbl-right { - @media (max-width: @screen-xs-max) { - width: 50%; - } - } - } - } - - .headers { - font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; - font-size: 18px; - font-weight: 500; - background-color: @brand-primary; - color: white; - padding: 10px; - } - - .info { - margin-top: 10px; - span { - vertical-align: top; - font-weight: bold; - margin-right: 5px; - } - ul { - display: inline-block; - } - } - - &.physical-items { - .location { - text-transform: uppercase; - font-weight: 700; - font-size: .92em; - } - .location-name { - margin-right: 5px; - } - .service { - text-transform: initial; - white-space: nowrap; - padding: 2px 5px; - } - } - .format-info { - margin-left: 15px; - } - &.external-data-heading.collapsed { - .tbl-row:not(.external-data-headers), .format-info { - display: none; - } - } -} -.external-data-feedback { - margin: 5px 0 5px 5px; - a.btn { - text-align: left; - white-space: normal; - padding: 6px 12px; - } -} diff --git a/themes/finna2/less/finna/facets.less b/themes/finna2/less/finna/facets.less deleted file mode 100644 index 9781184c111..00000000000 --- a/themes/finna2/less/finna/facets.less +++ /dev/null @@ -1,521 +0,0 @@ -// Finna Facet styling - -// No inverse active items -.facet-group .active -{ - background: @list-group-bg; - color: @action-link-color; -} - -div.facet > a { - min-width: 0; - > span.text, > span.facet-value { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - display: inline-block; - } -} - -.facet-group .active { - font-weight: bold; - color: @link-color; -} - -.list-group.filters { - background: @list-group-bg; - padding: 10px 0px; - .list-group-item.title, .list-group-item.active { - padding: 5px 10px; - background: transparent; - color: @gray; - transition: background 0.2s ease-in-out; - &:hover { - background: @gray-lighter; - text-decoration: line-through; - } - } - h5 { - margin-top: 0px; - } -} - -.list-group.facet, .list-group.facets { - // style Finna facet headers - .list-group-item.title { - cursor:pointer; - font-size: 1em; - font-weight: 600; - text-transform: uppercase; - color: @facet-text-color; - background: @facet-header-background; - text-align: left; - border: 1px solid @facet-border-color; - padding: 10px; - margin-bottom: 1px; - - .icon { - cursor: pointer; - color: @action-link-color; - } - } - .collapse, .collapsing { - a { - background-color: @body-bg; - } - .list-group-item { - background: transparent; - border-top-left-radius: 0px; - border-top-right-radius: 0px; - } - } - - .usage-right-group { - padding: 3px 0 3px 8px; - @media(max-width:@screen-xs-max) { - padding: 6px 10px 3px 14px; - } - } - .usage-right-group.usage-rights-excludable { - padding-right: 0; - } - .usage-right-group .list-group-item { - padding-right: 0; - } - - a { - color: @link-color; - &:hover { - text-decoration: underline; - } - } - - .more-less-btn-wrapper { - border-bottom: none; - } - - .more-less-btn-wrapper .btn, a.more-narrow-toggle { - display: flex; - align-items: baseline; - padding: 4px 0 0 8px; - border-radius: 0px; - color: @gray; - background: transparent; - font-weight: bold; - font-size: 0.8em; - text-transform: uppercase; - text-decoration: none; - box-shadow: none; - } - - .list-group-item i.fa.fa-check-square-o { - color: @link-color; - } - - // tablet mobile facet adjustments - @media (max-width: @screen-xs-max) { - .facet:not(.facet-group), .usage-right-group { - font-size: 1.15em; - line-height: 1.15em; - } - .narrow-toggle .text, .more-less-btn-wrapper { - font-size: 0.8em; - } - } - @media (max-width: @screen-sm-max) { - .datepicker.datepicker-dropdown { - font-size: 1.4em; - } - } - - // Allow wrapping for facet_usage_rights_ext_str_mv - #facet_usage_rights_ext_str_mv li span.main { - white-space: inherit; - } -} - -h4 + .list-group.facet { - margin-top: 5px; -} - -#side-collapse-publishDate .list-group-item { - padding: 10px 15px; - border-bottom-left-radius:@border-radius-base; - border-bottom-right-radius:@border-radius-base; -} - -.building-filter { - padding: 5px 0px 5px 6px; - @media (max-width:@screen-xs-max) { - padding-left: 30px; - } - input { - width: 190px; - @media (min-width: @screen-sm-min) and (max-width:@screen-sm-max) { - width: 135px; - } - } -} - -// Checkbox facet badges -.sidebar .checkbox-filters span.badge.cb-facet { - display: @display-checkbox-facet-amount; -} -span.badge.cb-facet { - float: right; - margin-right: 10px; -} - -.facet-group { - margin-bottom: 1rem; - - .facet { - padding: 3px 0 2px 8px; - display: flex; - .text { - flex-grow: 1; - overflow: hidden; - - .facet-value { - overflow: hidden; - text-overflow: ellipsis; - } - } - } - .title { - display: flex; - line-height: 1.5; - padding: 4px 8px 4px 10px; - font-weight: bold; - } - // Hide checkbox from facets - .icon-link .icon { - display: none; - } - - [data-toggle="collapse"] { - cursor: pointer; - } - - .collapse, .collapsing { - position: relative; - } - - .badge { - display: flex; - flex-shrink: 0; - align-items: center; - } - .text, .hierarchical-facet-anchor { - display: flex; - gap: 0.25rem; - align-items: center; - flex-grow: 1; - } - .exclude { - margin-left: 5px; - flex-shrink: 0; - text-align: center; - i { - font-size: 0.8em; - } - } - - body.rtl { - padding-left: 0; - padding-right: 15px; - } -} -.facet-loading-overlay { - position: absolute; - top: 0; - left: 0; - display: flex; - width: 100%; - height: 100%; - align-items: center; - justify-content: center; - background-color: rgba(0,0,0,0.4); - z-index: 2; -} -.facet-loading-overlay-label { - padding: 1px .5rem; - color: #fff; - background-color: #000; -} -.facet-group .facet-title { - flex: 1 1 0%; - align-self: center; -} -.facet-group .facet-title-icon { - flex: none; -} - -// Full facet list -.full-facet-sort-options.form-group { - margin-bottom: 5px; - .btn-group { - a { - border-radius: 15px; - padding: 5px 10px; - border: 1px solid @action-link-color; - color: @action-link-color; - background-color: @body-bg; - &.active { - color: @body-bg; - background-color: @action-link-color; - } - } - } -} -.lightbox-scroll.full-facets { - border: 1px solid @gray-lighter; - margin-bottom: 5px; -} -.full-facet-list { - margin-bottom: 0; - .active .fa { - float: right; - margin-top: .25rem; - margin-left: 0.5rem; - } - .facet { - display: flex; - flex-direction: row; - .badge { - padding-right: 4px; - } - .fa-square-o { - display: none; - } - } -} -.form-inline .facet-lightbox-filter.form-group { - display: block; - margin: 0.5rem 0; - - .btn { - padding-top: 6px; - padding-bottom: 6px; - height: @input-height-base; - } -} - -.sidebar { - .facet-info-header { - font-size: 0.9em; - font-weight: 600; - padding: 10px 0 10px 8px; - } - .facet-info { - margin-left: 0; - margin-right: 0; - margin-bottom: 10px; - padding: 5px; - font-size: 0.9em; - .icon { - font-size: 1.2em; - vertical-align: baseline; - display: table-cell; - color: @brand-primary; - } - .info { - padding-left: 5px; - display: table-cell; - width: 100%; - } - .more-info { - text-align: right; - display: block; - margin-top: 3px; - } - } - .list-group.facet .collapse .list-group-item.facet-info-highlight { - &:extend(.alert); - &:extend(.alert-info); - padding: 8px; - } -} - -.geographic-facet { - margin-bottom: 10px; - padding: 0 8px; - .map-controls { - a.map-control, a.user-location-filter { - border: 1px solid @gray-lighter; - background: @body-bg; - color: @text-color; - border-radius: 0; - width: 50%; - float: left; - padding: 10px 5px; - font-size: 0.9em; - i { - color: #fff; - } - &:last-child { - border-left: 0; - } - @media(max-width: @screen-md-max){ - white-space: normal; - } - } - } - .info-message { - margin: 10px 0; - } -} -.list-group.facet .geofacet-header { - margin: 8px; - h5, a { - padding: 0; - margin: 0; - display: inline-block; - } - a { - font-size: 0.9em; - color: @gray-mid-light; - float: right; - } -} -.list-group.facet .geographic-facet a:hover { - text-decoration: none; -} - -.location-search-info .close-info { - float: right; - padding: 5px; - cursor: pointer; -} - -.map-container { - position: relative; - .location-search-info { - bottom: 0; - height: auto; - width: 100%; - z-index: 1050; - position: absolute; - background: rgba(255, 255, 255, 0.8); - text-align: center; - padding: 10px; - } -} - -/* ------ TOP FACETS ------ */ -.top-title { - display: inline-block; - padding-top: .5rem; - padding-left: .5rem; - font-weight: bold; - color: #000; -} -.top-title .fa { - width: 1rem; - text-align: center; -} -@media (min-width: 768px) { - .top-title { padding-top: 0; } - .top-title .fa { display: none; } - .top-facets .collapse { - display: block; - height: auto !important; - } -} - -.top-facets .facet, -.top-facets .narrow-toggle, -.top-facets > strong { - display: inline-block; - width: auto; - padding: .25rem .5rem; - border: 0; - white-space: nowrap; -} - -/* ------ Hierarchical Facets ------ */ -.facet-tree { - padding-left: 0; - - ul { - padding: 0; - width: 100%; - } - - li { - display: flex; - flex-wrap: wrap; - align-items: baseline; - // Ensure that there is enough room for a button focus outline: - padding-left: .2rem; - border-bottom: none; - - .facet-tree__toggle-expanded { - flex: 1 1; - border: 0; - background: none; - max-width: 1.5em; - padding: 0; - - &:hover { - background-color: @list-group-hover-bg; - } - - &[aria-expanded=false] { - .facet-tree__collapse { - display: none; - } - & ~ ul { - display: none; - } - } - &[aria-expanded=true] .facet-tree__expand { - display: none; - } - } - - .facet-tree__item-container { - // Leave space for the open/close icon (see above): - width: calc(100% - 1.5em); - - .text { - // Leave space for the badge: - width: calc(100% - 1.5em); - } - - &--exclude .text { - // Leave space for the badge and exclude link: - width: calc(100% - 3.0em); - } - - .facet-value { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - display: inline; - } - } - - // Child items: - ul { - padding-left: 1rem; - flex: 1; - .facet { - // Smaller padding to make the list a bit more condensed: - padding-top: 0.3rem; - padding-bottom: 0.3rem; - } - } - } - - .facet { - border: 0; - padding-left: .1rem; - } - - // Make the first child level start a bit higher to counter the padding of top - // level items: - & > li > ul { - margin-top: -0.2rem; - } -} diff --git a/themes/finna2/less/finna/feed-styles.less b/themes/finna2/less/finna/feed-styles.less deleted file mode 100644 index 39e563e21fd..00000000000 --- a/themes/finna2/less/finna/feed-styles.less +++ /dev/null @@ -1,50 +0,0 @@ -/** -* Usage:
feed("carousel-small"); ?>
-* Wrap your feed function call inside a div and add the desired class to the div, multiple classes are fine too -*/ - -//Hides the dots from a carousel feed -finna-feed.feed-dotless { - .splide__pagination { - display: none !important; - } -} -//Aligns items always to the left side if there is few items in carousel -.feed-align-left { - .slick-track { - margin-left: 0; - } -} -//Aligns items always to the right side it there is few items in carousel -.feed-align-right { - .slick-track { - margin-right: 0; - } -} -//Only show the first image in list style feed -.feed-first-image { - li:not(:first-child) { - img { - display: none; - width: 0; - } - .title, .text { - width: 100% !important; - padding-left: 45px; - float: left !important; - } - } -} -//Hides the mobile link in the bottom from a carousel -.feed-mb-no-link { - .carousel-description { - display: none; - } -} - -//Sets the default background color of feed wrapper to white -.feed-bg-white { - .wrapper { - background-color: white !important; - } -} diff --git a/themes/finna2/less/finna/feed.less b/themes/finna2/less/finna/feed.less deleted file mode 100644 index 242d695b832..00000000000 --- a/themes/finna2/less/finna/feed.less +++ /dev/null @@ -1,1075 +0,0 @@ -/** List feed **/ -.feed-container .list-feed:not(.with-image) { - li { - span.date { - float: left; - + a { - display: block; - margin-left: 3.5em; - } - } - } -} -.feed-container .list-feed .feed-header { - color: @list-feed-header-color; -} -.feed-header { - display: inline-block; - color: @list-feed-header-color; - padding: @list-feed-header-padding; - background: @list-feed-header-background; -} -.feed-container .list-feed { - background: @list-feed-background; - padding: @list-feed-padding; - margin-bottom: 20px; - li { - line-height: 2em; - a { - text-decoration: none; - } - } - .title { - font-weight: normal; - } - .more-link { - margin-top: 15px; - } - .date { - color: @gray-light; - } - - .text { - color: @gray; - &:hover { - text-decoration: none; - } - } - - .xcal { - padding-bottom: 0px; - display: block; - margin-bottom: 0px; - color: @gray; - i { - padding-right: 5px; - } - } - - &.with-image { - li { - clear: both; - position: relative; - } - img { - max-width: 40%; - margin-bottom: 15px; - margin-right: 10px; - float: left; - } - .date { - position: absolute; - padding: 5px; - color: @body-bg; - background: rgba(20,20,20,.6); - left: 15px; - } - .title, .text { - vertical-align: top; - float: right; - width: 55%; - } - .text { - padding-bottom: 15px; - } - p { - &.xcal { - float: right; - width: 55% - } - } - .more-link { - display: block; - text-align: center; - padding-top: 15px; - } - - } - -} - -// mixin for image prosessing on fulltext rss feeds -.rss-content-image() { - height: auto; - max-width: 100%; - margin-top: 15px; - margin-bottom: 15px; -} - -// rss-feeds on content page -.main.template-dir-feedcontent.template-name-content { - .feed-content { - img { - .rss-content-image(); - } - .date { - font-weight: bold; - background: #DFDFDF; - text-transform: uppercase; - padding: 5px; - margin-bottom: 10px; - display: none; - font-size: .9em; - } - } - .article-navigation-header { - display: none; - margin-top: 0; - padding-top: 0; - @media (max-width: @screen-xs-max) { - margin-top: 10px; - padding-top: 10px; - background-color: @body-bg; - border-top: 1px solid @gray-mid-light; - } - .menu-label { - display: none; - } - } - ul.article-links { - margin-left: 0px; - li { - display: block; - margin-bottom: 10px; - font-size: 1.05em; - word-wrap: break-word; - } - } - .feed-content-additional { - margin-top: 1em; - margin-bottom: 1em; - } - .next-articles { - .next-articles-header { - border-top: 1px solid @gray-lighter; - margin-top: 1em; - padding-top: 1em; - padding-bottom: 1em; - } - .next-articles-grid { - display: grid; - grid-template-columns: 1fr; - gap: 10px; - @media screen and (min-width: @screen-sm-min) { - grid-template-columns: 1fr 1fr; - } - @media screen and (min-width:@screen-lg-min) { - grid-template-columns: 1fr 1fr 1fr; - } - .article { - display: flex; - } - .publish-date { - display: block; - font-size: 1em; - } - .article-title { - font-size: 1em; - font-weight: bold; - display: block; - padding-bottom: 1em; - } - .article-image { - flex-shrink: 0; - margin-right: 10px; - - img { - object-fit: cover; - aspect-ratio: calc(3 / 2); - width: 150px; - } - } - } - } -} - -// rss-feed content -.feed-content { - ul, ol { - margin-left: 25px; - } - ul li { - list-style-type: disc; - } - ol li { - list-style-type: decimal; - } -} - -// rss-feed in modal window -#modal.feed-content { - -webkit-overflow-scrolling: auto ; - .modal-dialog { - img { - .rss-content-image(); - max-width: 100% !important; - height: auto !important; - } - .date { - color: @gray-light; - margin-bottom: 15px; - display: none; - } - } -} - -// rss-feed on organisation page -.organisation-info-page .feed-container.info-element { - .list-feed { - padding: 0; - margin-bottom: 0; - } -} - -// Feed tabs -.feed-tabs-container { - display: flex; - flex-wrap: wrap; - width: 100%; - justify-content: space-between; - margin-top: 20px; - margin-bottom: 12px; - border-bottom: 1px solid #919191; - align-items: center; - .feed-tabs-title { - margin-left: 0; - margin-bottom: 5px; - } - .nav { - margin-bottom: 0; - } - .nav-tabs { - border-bottom: none; - margin-right: 0; - } - ul { - display: flex; - flex-wrap: wrap; - justify-content: flex-end safe; - } - .feed-nav-pills { - width: 100%; - margin-bottom: 6px; - > li { - float: left; - margin-right: 6px; - // Links rendered as pills - > a { - border-radius: @feed-nav-pills-border-radius; - background-color: @feed-nav-pills-bg; - color: @feed-nav-pills-color; - border: @feed-nav-pills-border; - padding: @feed-nav-pills-padding; - } - + li { - margin-bottom: 6px; - } - // Active state - &.active > a { - color: @feed-nav-pills-active-color; - background-color: @feed-nav-pills-active-bg; - border-color: @feed-nav-pills-active-border; - &:hover, - &:focus { - color: @feed-nav-pills-active-hover-color; - background-color: @feed-nav-pills-active-hover-bg; - border: @feed-nav-pills-active-hover-border; - } - } - } - } -} - -// Grid styling -.feed-grid { - display: flex; - flex-wrap: wrap; - justify-content: flex-start; - .grid-item { - flex-basis: 33%; - max-height: 125px; - margin-bottom: 20px; - overflow: hidden; - @media (max-width: @screen-sm-max) { - flex-basis: 50%; - } - @media (max-width: @screen-xs-max) { - flex-basis: 100%; - } - .grid-info { - color: @text-color; - .title { - font-weight: 700; - color: @link-color; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - } - .xcal { - display: inline-flex; - align-items: baseline; - width: 100%; - .icon { - display: inline-flex; - flex-shrink: 0; - flex-basis: 20px; - justify-content: center; - } - } - } - } - &.with-image { - .grid-item { - .grid-info { - width: 55%; - padding-right: 10px; - padding-left: 10px; - } - } - .grid-image { - width: 45%; - } - img { - object-fit: cover; - width: 100%; - height: 100%; - top: 50%; - left: 50%; - position: relative; - transform: translate(-50%, -50%); - } - .grid-link { - display: flex; - justify-content: space-between; - height: 100%; - } - } -} - -// xCal fields -.xcal-fields { - margin-bottom: 20px; - .xcal-value { - float: right; - width: 70%; - } - div { - display: inline-block; - width: 100%; - } -} - -// LinkedEvents -.linked-events-content, .related-events { - .grid-image.no-image { - background-color: @gray-ultralight; - .image-placeholder { - color: @gray-light; - font-size: 3em; - position: relative; - left: 37%; - top: 30%; - } - } -} -.event-accordions .tab-content { - // Relative positioning for the absolutely positioned spinner: - position: relative; -} - -.linked-events-pagination { - display: flex; - justify-content: center; - span { - i { - font-size: 2em; - &:hover { - cursor: pointer - } - } - } -} -.linked-events-tab-spinner { - position: absolute; - margin-top: -20px; - left: 50%; - transform: translate(-50%, 0); -} -.linked-events-tab-spinner-overlay { - position: absolute; - top: 0; - left: 0; - display: flex; - width: 100%; - height: 100%; - min-height: 30px; - align-items: center; - justify-content: center; - z-index: @zindex-spinner-overlay; - background-color: rgba(0,0,0,0.4); - .fa-spinner::before { - color: inherit; - } - .icon { - color: white; - } -} -.linked-events-page-spinner { - position: absolute; - display: block; - margin-top: 10px; -} -.events-searchtools-toggle { - display: none; - margin-top: 0; - margin-bottom: 15px; - width: 100%; - &.open .show-more-icon { - transform: rotate(180deg); - } - @media (max-width: @screen-xs-max) { - display: block; - } -} -.events-searchtools-container { - display: flex; - flex-wrap: wrap; - align-items: flex-end; - gap: 15px; - margin-bottom: 30px; - @media (max-width: @screen-xs-max) { - display: none; - &.open { - display: flex; - } - } - .event-search-container { - flex: 0; - width: 100%; - } - .event-date-container { - display: flex; - flex: 0; - gap: 10px; - .input-field { - width: 100px; - @media (min-width: @screen-sm) { - width: 140px; - } - } - } - .finna-dateinput { - display: flex; - flex-wrap: wrap; - align-items: flex-end; - } - label { - font-size: 0.8em; - display: inline-flex; - flex-wrap: wrap; - column-gap: 5px; - } - .event-date-title { - @media (max-width: @screen-xs-max) { - display: block; - } - } - .linked-event-search { - margin: 0; - padding: @padding-base-vertical @padding-base-horizontal; - height: @input-height-base; - } - .event-geolocation { - text-transform: uppercase; - font-size: 0.84em; - color: @brand-primary; - font-weight: bold; - margin-left: 10px; - &:hover { - cursor: pointer; - } - } -} -.linked-events-buttons { - display: flex; - justify-content: center; - margin-bottom: 10px; - .linked-events-next { - margin-right: 10px; - } -} -.linked-events-noresults { - display: flex; - justify-content: center; - font-size: 1.2em; -} -.linked-event-content { - .linked-event-info { - display: flex; - color: @gray-light; - .linked-event-field { - margin-right: 30px; - } - } - .linked-events-left-col { - width: 65%; - float: left; - margin-top: 20px; - @media (max-width: @screen-sm-max) { - width: 100%; - } - .linked-event-image { - margin-top: 20px; - margin-bottom: 20px; - max-height: 500px; - } - .linked-event-description { - margin-top: 10px; - } - .linked-event-keywords { - display: flex; - flex-wrap: wrap; - color: @gray-mid-light; - margin-top: 20px; - .linked-event-keyword { - margin-right: 30px; - margin-bottom: 10px; - } - } - } - .linked-events-right-col { - width: 30%; - float: right; - margin-top: 20px; - @media (max-width: @screen-sm-max) { - width: 100%; - } - .linked-event-map-info { - .linked-event-field { - border-bottom: 1px solid @gray-lighter; - padding: 5px; - .fa-envelope { - float: left; - margin-right: 5px; - margin-top: 2px; - } - } - } - .linked-events-map { - margin-top: 21px; - height: 200px; - width: 350px; - } - } -} - -.carousel-header { - background: @carousel-header-background; - display: inline-block; - padding: @carousel-header-padding; - color: @carousel-header-color; -} -finna-feed { - display: block; - .feed-content-container { - display: flex; - flex-direction: row; - align-items: center; - position: relative; - } - .carousel-hover-title { - font-size: 14px; - font-weight: 900; - color: @carousel-slide-header-color; - p { - margin: 0; - width: 100%; - overflow-wrap: anywhere; - } - } - .carousel-more { - font-size: 1.5em; - line-height: 14px; - display: flex; - justify-content: end; - } - .carousel-more.carousel-close { - position: sticky; - top: 0; - } - .carousel-hover-title, .carousel-slide-header p { - overflow-wrap: break-word; - } - .carousel-hover-date { - font-weight: 300; - color: @gray-lighter; - width: 100%; - display: inline-block; - } - .splide__arrows { - position: absolute; - pointer-events: none; - display: flex; - justify-content: space-between; - z-index: 1; - margin: auto; - button { - position: relative; - width: 20px; - height: 40px; - display: flex; - align-items: center; - pointer-events: auto; - border: none; - background-color: transparent; - &[disabled] { - display: none; - } - } - } - .feed-item-holder { - height: 100%; - position: relative; - display: flex !important; - .feed-link { - display: flex; - height: 100%; - width: 100%; - } - } - .wrapper { - display: flex; - background: @carousel-slider-background; - justify-content: center; - align-items: center; - overflow: hidden; - img { - width: 100%; - height: 100%; - object-fit: cover; - } - } - .carousel-slide-header { - p { - .carousel-date { - display: block; - font-weight: 400; - } - } - } - .carousel-pagination-wrapper { - display: flex; - width: 100%; - flex-direction: row; - align-items: center; - justify-content: space-between; - .carousel-autoplay, .carousel-block { - flex: 1; - } - .autoplay-button { - border: none; - background: none; - font-size: 20px; - padding: 0 5px; - i { - cursor: pointer; - } - &:not(.is-active) { - .pause-icon { - display: none; - } - } - } - .splide__pagination { - padding: 5px 0; - li { - padding: 5px; - button { - font-size: 1em; - line-height: 0; - display: flex; - align-items: center; - justify-content: center; - width: 5px; - height: 5px; - padding: 5px; - cursor: pointer; - background-color: @gray-mid-light; - border: 0; - outline: none; - border-radius: 50%; - &.is-active { - background-color: @brand-primary; - } - &:focus { - outline: 2px solid @action-link-color; - outline-offset: 3px; - } - } - @media (min-width: @screen-md) { - padding: 8px; - } - } - } - } -} -finna-feed.carousel.splide--ltr { - .splide__arrows { - width: 100%; - left: 0; - right: 0; - button { - &.left { - left: -24px; - transform: rotate(180deg); - } - &.right { - right: -24px; - } - } - } - @media (hover:hover) { - .feed-item-holder:hover { - .carousel-text { - &:not(.no-text) { - opacity: 1; - z-index: 1; - } - } - .carousel-slide-header p:not(.title-bottom) { - opacity: 0; - } - .carousel-text.scrollable { - padding-bottom: 0; - .carousel-text-shadow { - position: sticky; - z-index: 1; - height: 20px; - margin: 0 -10px; - background-image: linear-gradient(to bottom, transparent 0px, @carousel-slide-header-background 100%); - bottom: 0; - } - } - } - } - .feed-item-holder { - &.clicked { - .carousel-text:not(.no-text) { - z-index: 1; - opacity: 1; - } - .carousel-slide-header p:not(.title-bottom) { - opacity: 0; - } - .carousel-text.scrollable { - z-index: 1; - padding-bottom: 0; - .carousel-text-shadow { - position: sticky; - z-index: 1; - height: 20px; - margin: 0 -10px; - background-image: linear-gradient(to bottom, transparent 0px, @carousel-slide-header-background 100%); - bottom: 0; - } - } - } - .carousel-header-format { - display: inline-block; - font-weight: normal; - font-size: 10px; - border: 1px solid #fff; - margin-top: 2px; - margin-bottom: 2px; - padding: 2px 6px 2px 6px; - border-radius: 10px; - text-shadow: none; - } - .feed-link { - flex-flow: column; - } - .wrapper { - flex: 1 1 100%; - width: 100%; - &.iconlabel::before { - color: @carousel-slider-iconlabel-color; - position: absolute; - font-size: 39px; - } - img { - max-width: none; - max-height: 100%; - position: relative; - } - } - .carousel-text { - width: 100%; - position: absolute; - height: 100%; - color: @carousel-slide-text-color; - background: @carousel-text-background-color; - opacity: 0; - padding: 10px; - overflow-y: auto; - overflow-wrap: break-word; - .text { - height: fit-content; - } - .carousel-close { - font-size: 1.1em; - font-weight: 900; - color: @carousel-slide-header-color; - text-shadow: @carousel-slide-header-text-shadow; - .js-carousel-close { - padding-left: 12px; - } - } - } - - .carousel-slide-header { - display: flex; - flex-direction: column; - position: absolute; - bottom: 0; - width: 100%; - &.carousel-slide-header-bottom { - position: relative; - } - p { - position: relative; - bottom: 0; - width: 100%; - min-height: 30px; - z-index: 1; - padding: 5px 10px; - color: @carousel-slide-header-color; - background: @carousel-slide-header-background; - font-size: 14px; - font-weight: 900; - margin: 0; - margin-bottom: 0; - letter-spacing: 0.2px; - text-shadow: @carousel-slide-header-text-shadow; - - .carousel-header-title { - display: block; - } - &.title-bottom { - position: initial; - height: 100%; - width: 100%; - padding-bottom: 10px; - .carousel-header-title { - display: inline-block; - width: 100%; - } - } - } - .carousel-slide-more { - top: 0; - right: 0; - position: absolute; - text-align: right; - padding: 5px 10px 10px 10px; - font-size: 1.5em; - background: transparent; - font-weight: 900; - display: inline; - span { - vertical-align: text-top; - } - } - } - } -} - -finna-feed.carousel-slider.splide--ltr { - container-type: inline-size; - --background-color: transparent; - - .splide__arrows { - width: 100%; - left: 0; - right: 0; - button { - &.left { - left: -24px; - transform: rotate(180deg); - } - &.right { - right: -24px; - } - } - } - &.slider-with-background { - &::before { - content: ''; - background-color: var(--background-color); - position: absolute; - height: 100%; - width: 100%; - } - .carousel-pagination-wrapper { - position: relative; - } - } - .slider-image, .slider-text-part { - height: 100%; - padding: 10px 15px; - } - .slider-image { - display: flex; - justify-content: center; - width: 50%; - img { - max-width: 100%; - max-height: 100%; - object-fit: contain; - flex: left; - } - } - .slider-text-part { - display: flex; - color: @text-color; - max-width: 50%; - height: 100%; - .slider-text-container { - overflow-y: auto; - overscroll-behavior-y: contain; - &.scrollable { - padding-right: 10px; - } - } - .slider-title { - color: @carousel-header-color; - } - .carousel-text { - width: 100%; - } - .text { - overflow-wrap: anywhere; - } - .slider-header { - display: block; - font-size: @font-size-h4; - font-weight: 500; - } - } -} -@container (min-width: @slider-stacked-breakpoint) { - finna-feed.carousel-slider.splide--ltr { - .slider-text-part { - .slider-title { - font-size: @font-size-h2; - } - } - &.image-right .feed-link { - display: flex; - flex-direction: row-reverse; - } - } -} -@container (max-width: @slider-stacked-breakpoint) { - finna-feed.carousel-slider.splide--ltr { - .feed-item-holder[style] { - height: var(--height) !important; - } - .feed-link { - flex-direction: column; - } - .slider-image, .slider-text-part { - width: auto; - max-width: 100%; - height: 50%; - .slider-header { - font-size: @font-size-base; - margin-top: 0; - margin-bottom: 5px; - } - .slider-title { - padding: 0; - word-break: break-all; - } - .text { - font-size: @font-size-small; - } - } - .slider-image { - padding: 5px; - img { - height: 100%; - } - } - .carousel-pagination-wrapper { - height: 40px; - } - } -} - -finna-feed.splide--ttb { - .splide__arrows { - height: auto; - flex-flow: column; - right: -20px; - top: 0; - bottom: 0; - button { - &.up { - top: 0; - transform: rotate(-90deg); - } - &.down { - bottom: 0; - transform: rotate(90deg); - } - } - } - .feed-item-holder { - flex-flow: row; - flex: 1 1 100%; - .feed-link { - flex-flow: row; - } - .carousel-hover-title, .carousel-hover-date { - display: none; - } - .wrapper { - flex: 1 1 40%; - } - .carousel-vertical-text-part { - flex: 1 1 60%; - margin-left: 20px; - overflow: hidden; - display: flex; - flex-flow: column; - color: @text-color; - text-shadow: none; - .carousel-slide-header { - p { - background: @carousel-verticalslide-header-background; - color: @link-color; - text-shadow: none; - padding-left: 0; - font-weight: 400; - .carousel-date { - color: @gray-light; - } - } - } - .carousel-text { - position: initial; - } - } - } -} diff --git a/themes/finna2/less/finna/feedback.less b/themes/finna2/less/finna/feedback.less deleted file mode 100644 index 1f930fabd01..00000000000 --- a/themes/finna2/less/finna/feedback.less +++ /dev/null @@ -1,93 +0,0 @@ -.floating-feedback-btn { - margin-top: 15px; - margin-right: 15px; - background: @finna-feedback-background; - color: @finna-feedback-color; - position: absolute; - right: 0; - top: auto; - z-index: 1001; - &.fixed { - position: fixed; - top: 0; - } - &:hover { - background: darken(@finna-feedback-background,10%); - color: @finna-feedback-color; - } -} - -.dynamic-form { - .form-control { - &[disabled], - &[readonly], - fieldset[disabled] { - cursor: default; - box-shadow: none; - border: none; - } - } - - .form-group { - margin-bottom: 20px; - label { - clear: both; - display: block; - } - textarea, input { - max-width: 100%; - } - } - .feedback-info p, - .captcha { - padding-top: 10px; - border-top: 1px solid @gray-lighter; - } - .form-info.pre div { - margin-bottom: 1em; - } -} - -form[name=ArchiveRequest] { - label[for=form_ArchiveRequest_desiredDateForOrder] { - font-weight: normal; - } - label[for=form_ArchiveRequest_name] { - margin-bottom: 0; - } - #form_ArchiveRequest_name { - height: auto; - } - .alert-info { - margin-bottom: 0; - } -} -form[name=FeedbackRecord] .form-info { - border: none; - .datasource-info { - font-weight: initial; - padding-top: 1em; - display: block; - } -} -.form-horizontal[name=emailRecord] { - & input[type=email] { - min-width: 200px; - max-width: 100%; - } -} - -div:not(.modal-body) > .feedback-content { - @media(min-width: @screen-sm) { - width: 50%; - } -} -.template-dir-feedback .feedback-content h1 { - font-size: @finna-header-font-size; -} - -.recommendation-feedback { - .btn-primary { - margin-top: 20px; - } -} diff --git a/themes/finna2/less/finna/filters.less b/themes/finna2/less/finna/filters.less deleted file mode 100644 index fac4508f6ca..00000000000 --- a/themes/finna2/less/finna/filters.less +++ /dev/null @@ -1,206 +0,0 @@ -.search-filters { - background: @filterContent-background; - border-top: 1px solid @filterContent-border-color; - border-bottom: 1px solid @filterContent-border-color; - position: relative; -} - -.finna-filters, .results .noresults { - color: @filterContent-text-color; - padding: 5px 0 5px 0; - // < ie 10 - display: inline-block; - display: inline-flex; - flex-wrap: wrap; - width: 100%; - .filter-options { - display: flex; - @media (min-width: @screen-md-min) { - padding-right: 10px; - align-items: flex-start; - } - @media (max-width: @screen-md-min) { - align-items: center; - justify-content: space-between; - width: 100%; - } - .filters-toggle { - cursor: pointer; - display: flex; - align-items: center; - text-transform: uppercase; - color: @filterContent-text-color; - font-weight: bold; - height: 40px; - padding: 0; - .icon.collapse { - display: none; - } - &.open { - .icon.expand { - display: none; - } - .icon.collapse { - display: initial; - } - } - @media (max-width: @screen-md-min) { - font-size: 80%; - display: flex !important - } - } - .checkbox { - display: flex; - align-items: center; - padding-left: 0; - padding-right: 0; - margin: 0; - height: 40px; - label { - display: inline-block; - padding: 10px 0px; - - @media (max-width: @screen-xxs) { - font-size: 80%; - } - } - } - } - .filters { - width: 100%; - max-width: 100%; - flex: 1; - // < ie 10 - display: inline-block; - display: inline-flex; - align-items: center; - flex-wrap: wrap; - } - .filters-term { - margin-left: 5px; - } - - .filter-title-group { - // < ie 10 - display: inline-block; - display: inline-flex; - align-items: center; - max-width: 100%; - flex-wrap: wrap; - } - .filter-value { - padding: 5px 10px; - margin: 5px 0 5px 5px; - font-weight: 600; - background: @filters-background-color; - color: @filters-text-color; - border-radius: @border-radius-small; - display: flex; - align-items: center; - max-height: 30px; - white-space: nowrap; - .filter-text { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin: 0; - } - a { - color: @filters-icon-color; - margin: 4px; - } - } - .title-value-pair { - margin-left: 10px; - } - .active-filter-count { - margin-left: 5px; - } -} -.results .noresults { - flex-direction: column; - padding: 10px; - - p { - flex: 1; - } -} - -.finna-filters .title-value-pair { - display: inline-block; -} - -.template-name-view .filters-container .finna-filters { - .filter-value { - background: @gray-ultralight; - color: @text-color; - } -} - -.filters { - &.filters-bar { - max-width: 100%; - } -} - -.search-filter-remove { - margin: 4px 1px 4px 4px; - font-weight: normal; - color: #fff; -} -.search-filter-dropdown { - display: inline-block; - margin-left: 5px; - .btn { - color: #fff; - background: @list-group-active-bg; - vertical-align: baseline; - padding-top: 5px; - padding-bottom: 5px; - } - .btn::after { - content: "\f107"; - font-family: "FontAwesome"; - } - - .dropdown-menu { - &>li { - border: 0; - } - .filters-term { - display: block; - text-align: center; - } - .filter-value { - display: flex; - margin-right: 5px; - - .filter-text { - flex-grow: 1; - margin-right: 0.5em; - } - a { - flex-shrink: 0; - margin: 0; - } - } - } -} - -@media (max-width: @screen-sm) { - .filters { - width: 100%; - font-size: 80%; - - // Reset specific font sizes - .btn, .dropdown-menu { - font-size: 100%; - } - } - .finna-filters .retain-filters .checkbox label:before { - font-size: 15px; - } - .filter-value { - max-width: 95%; - } -} diff --git a/themes/finna2/less/finna/finna-dateinput.less b/themes/finna2/less/finna/finna-dateinput.less deleted file mode 100644 index 1d60b445794..00000000000 --- a/themes/finna2/less/finna/finna-dateinput.less +++ /dev/null @@ -1,67 +0,0 @@ -.finna-dateinput { - .input-group { - .input-field { - width: auto; - } - .datepicker-toggle { - padding: @padding-base-vertical 6px; - border-color: @input-border; - border-width: 1px; - margin-top: 0; - margin-bottom: 0; - } - } - .dateformat-hint { - font-weight: normal; - } - .datepicker-dialog { - display: none; - background: #fff; - padding: 10px; - border: 1px solid #666; - border-radius: 5px; - box-shadow: 0 2px 10px rgba(0,0,0,0.1); - z-index: @zindex-datepicker; - calendar-date { - &::part(container) { - gap: 0; - } - &::part(button) { - background-color: transparent; - border: none; - border-radius: 0; - margin: 0; - padding: 0; - text-align: inherit; - font: inherit; - font-size: 24px; - color: @action-link-color; - } - &::part(button):focus-visible { - outline: 2px solid @action-link-color; - } - } - .btn-datepicker-close { - display: flex; - margin-left: auto; - line-height: 1; - } - calendar-month { - &::part(table) { - font-size: 0.825em; - } - &::part(button):focus { - background: var(--color-accent); - color: var(--color-text-on-accent); - outline: 1px solid var(--color-text-on-accent); - outline-offset: -2px; - } - &::part(today) { - border-bottom: 1px solid var(--color-accent); - } - } - } - .datepicker-dialog[data-show] { - display: block; - } -} diff --git a/themes/finna2/less/finna/finna-header.less b/themes/finna2/less/finna/finna-header.less deleted file mode 100644 index 42cc53d5949..00000000000 --- a/themes/finna2/less/finna/finna-header.less +++ /dev/null @@ -1,187 +0,0 @@ -section.main.template-dir-content.template-name-content .container-fluid.finna-main-header > .container, -section.main.template-dir-feedcontent.template-name-content .container-fluid.finna-main-header > .container { - padding-bottom: 0; -} - -.finna-main-header-wrapper { - background-color: @finna-main-header-background; - &.search-advanced { - border-bottom: 1px solid @gray-lighter; - } -} - -.finna-main-header { - background: transparent; - padding: 15px 0 15px 0; - & .search-result-header, .content-header { - font-size: @finna-header-font-size; - margin: 0; - } - .adv_search_terms { - font-weight: normal; - display: block; - strong { - font-weight: @headings-font-weight; - } - } -} -.template-name-content .finna-main-header { - background: @body-bg; -} - -.main.template-dir-feedcontent.template-name-content, -.main.template-dir-content.template-name-content { - & .finna-main-header { - margin-bottom: 25px; - } -} - -.template-name-results, .template-name-search { - @media (max-width: @screen-xs-max) { - & .finna-main-header { - & .search-result-header { - font-size: 1.3em; - } - .adv_search_links { - margin-bottom: 15px; - } - } - } -} - -.adv-search-header { - padding: 15px 0; - background-color: @well-bg; - border-bottom: 1px solid @filterContent-border-color; - @media (max-width: @screen-sm-max) { - border-top: 1px solid white; - } - .container { - @media (max-width: @screen-sm-max) { - padding-left: 0; - } - } - #searchForm { - flex: 1; - position: relative; - @media (max-width: @screen-xs-max) { - width: 55%; - } - } - .searchbox-flex { - margin: 0; - - .record-back { - margin-right: 10px; - @media (max-width: @screen-xs-max) { - margin-right: 0px; - margin-left: 15px; - i { - margin-right: 0; - } - } - } - .pager { - @media (max-width: @screen-xs-max) { - margin-left: 0px; - } - } - } - .adv-search-menu { - display: inline-block; - @media (max-width: @screen-xs-max) { - position: absolute; - top: 30px; - right: 0; - background-color: white; - padding: 10px; - border-radius: 10px; - border: 1px solid @gray-lighter; - z-index: 1; - &.active { - display: block !important; - a { - display: block; - color: @text-color; - margin: 0 -10px; - padding: 10px 10px; - border-bottom: 1px solid @gray-lighter; - text-align: left; - font-weight: normal; - &:first-child { - padding-top: 0; - } - &:last-child { - border-bottom: 0; - padding-bottom: 0; - } - } - } - } - } -} -.adv-search-header .adv_search_links { - line-height: 1em; - @media (max-width:@screen-xs-max) { - position: relative; - } - a { - white-space: nowrap; - margin-right: 15px; - color: @gray; - font-weight: 600; - .icon { - font-size: 1.2em; - } - @media (max-width:@screen-xs-max) { - margin-left: 15px; - margin-right: 0; - } - } - .adv-search-menu-toggle { - margin-left: 15px; - color: @gray; - cursor: pointer; - font-size: @font-size-small; - @media (max-width:@screen-xs-max) { - display: inline-block !important; - } - } -} -.adv-search-header { - padding: 20px 0; - border-bottom: none; - @media (max-width: @screen-xs-max) { - a { - display: block; - margin-bottom: 5px; - } - } -} - -.template-dir-myresearch, .template-dir-holds, .template-dir-search.template-name-history, .template-dir-librarycards { - .finna-main-header { - background: @myresearch-header-background; - & h1 { - font-size: @finna-header-font-size; - margin: 0; - line-height: 1.5em; - } - i { - color: @brand-primary; - } - .btn, .dropdown { - i { - color: #fff; - } - } - & .form-inline { - margin-left: 20px; - } - } -} -.template-dir-list.template-name-list { - & .finna-main-header { - background: @myresearch-header-background; - } -} diff --git a/themes/finna2/less/finna/finna-suggestions.less b/themes/finna2/less/finna/finna-suggestions.less deleted file mode 100644 index e44ae89623d..00000000000 --- a/themes/finna2/less/finna/finna-suggestions.less +++ /dev/null @@ -1,71 +0,0 @@ -.finna-suggestions { - width: 70%; - @media(max-width: @screen-sm-min) { - width: auto; - } - - .container { - display: flex; - padding: 10px; - width: 100%; - justify-content: space-between; - @media(max-width: @screen-xs-min) { - flex-direction: column; - } - - &.result { - align-items: center; - border: 1px solid #c0c0c0; - box-shadow: 0px 4px 4px rgba(100, 100, 100, 0.5); - font-weight: bold; - @media(max-width: @screen-xs-min) { - align-items: flex-start; - } - - .text { - padding-left: 10px; - padding-right: 10px; - flex-grow: 1; - @media(max-width: @screen-xs-min) { - padding-left: 5px; - } - } - } - &.info { - margin-top: 5px; - .logo-container { - width: max-content; - align-items: center; - display: flex; - .logo { - height: height; - width: 200px; - max-width: 100%; - display: block; - padding-right: 30px; - } - } - .slogan { - width: min-content; - flex-grow: 1; - align-items: center; - justify-content: flex-end; - display: flex; - @media(max-width: @screen-xs-min) { - width: auto; - margin-top: 5px; - } - } - } - } - .btn { - background-color: #723981; - &:hover { - background-color: #53295e; - border-color: #4c2657; - } - @media(max-width: @screen-xs-min) { - margin-top: 5px; - } - } -} diff --git a/themes/finna2/less/finna/footer.less b/themes/finna2/less/finna/footer.less deleted file mode 100644 index d8dd8371186..00000000000 --- a/themes/finna2/less/finna/footer.less +++ /dev/null @@ -1,53 +0,0 @@ -footer { - background: @footer-background; - padding: 15px 0px; - & a { - line-height: 1em; - } - & hr { - border-top: none; - } - @media (max-width: @screen-xs-max) { - text-align: center; - padding-top: 35px; - padding-bottom: 50px; - & hr { - display: block; - border-top: 1px solid @gray-light; - } - & ul { - margin-bottom: 35px; - } - } - & a, p, h4 { - color: @footer-text-color; - } - h2, h3, h4, h5, h6 { - font-size: 1em; - text-transform: uppercase; - margin-bottom: 10px; - } - & a:hover { - color: @footer-text-color; - text-decoration: underline; - } - & li { - list-style-type:none; - margin-bottom: 10px; - } - & img { - max-height: 45px; - } - & img[src*="vufind-logo"] { - max-height: 65px; - } -} -@media (min-width: 768px) { - .footer-container { - display: flex; - width: 100%; - } - .footer-column { - flex: 0 1 100%; - } -} diff --git a/themes/finna2/less/finna/forms.less b/themes/finna2/less/finna/forms.less deleted file mode 100644 index 76295f8399b..00000000000 --- a/themes/finna2/less/finna/forms.less +++ /dev/null @@ -1,243 +0,0 @@ -input, input.form-control { - font-size: 16px; // avoid the automatic zoom-in on input fields -} - -.form-control { - width: initial; - padding: 0px 5px; - max-width: 100%; // make sure dropdowns don't overflow elementss - vertical-align: middle !important; - - &::placeholder { - color: #666; - } - &[disabled], - &[readonly], - fieldset[disabled] { - background-color: transparent; - } - - &:invalid { - box-shadow: 0 0 2px 1px rgba(255, 0, 0, 0.9); - } - // This is for IE. Keep separate from :invalid so that IE does not drop it - &.invalid { - box-shadow: 0 0 2px 1px rgba(255, 0, 0, 0.9); - } -} - - -.form-inline { - display: inline-block; - @media (min-width: @screen-sm-min) { - .form-control { - width: auto; - } - .radio, - .checkbox { - padding-left: 0px; - } - } - .btn { - margin-left: 1px; - } -} - -// Alternate buttons -// -------------------------------------------------- -.navbar-form .btn[type="submit"], -.searchForm .btn[type="submit"] { - color: @btn-primary-color; - padding: 6px 0px; - border-radius: 0px; - margin: 0; - transition: background .1s ease-in-out; - height: 48px; - width: 48px; - display: flex; - align-items: center; - justify-content: center; - border: none; - background: @btn-primary-bg; - box-shadow: 0px 0px 5px rgba(100, 100, 100, 0.3); - - &:hover { - background: darken(@btn-primary-bg, 5%); - } - .icon { - font-size: 28px; - color: @btn-primary-color; - vertical-align: inherit; - cursor: pointer; - } -} -.searchHomeContent .btn-link { - font-size: 1.2em; - margin-top: 5px; -} - -.navbar-form, -.searchForm { - width: 100%; - display:flex; - margin-left: 0; - margin-right: 0; - padding: 0px; - background-color: @search-input-bg; - border-radius: 0; - border-top: 0px; - border-bottom: 0px; - margin: 0px; - box-shadow: 0px 0px 3px rgba(100,100,100,0.5); - .form-control.search-query { - flex: 1 1 auto; - border: none; - box-shadow: none; - background: transparent; - display: inline-block !important; - color: @gray; - padding-left: 10px; - height: 48px; - - @media (max-width: @screen-xs-max) { - width: percentage((@finna-search-input-width - 0.06)); - font-size: 1.1em; - } - } - /* --- Autocomplete and form adjust accordingly --- */ - &.input-field-only .form-control.search-query { - width: 85%; - @media (max-width: @screen-xs-max) { - width: 80%; - } - } - - #searchForm-reset { - border: none; - margin-left: 0px; - font-size: 1.5em; - background: transparent; - color: @gray-light; - margin-top: auto; - margin-bottom: auto; - margin-right: 5px; - margin-left: 5px; - &:hover { - cursor: pointer; - } - } - .btn { - border-radius: 0; - } -} - -.navbar-form .form-control.search-query { - font-size: @font-size-large; -} - - -.dropdown.form-control.type-dropdown { - border: none; - display: inline-block; - background: transparent; - box-shadow: none; - color: @gray; - margin: auto; - a { - color: black; - } - .dropdown-toggle { - min-width: 110px; - display: inline-block; - text-align: right; - height: inherit; - padding: 8px 0px; - } - li { - text-align: left; - color: @text-color; - min-width: 110px; - } -} - -.multiselect-container { - &:extend(.dropdown-menu); - z-index: 1030; -} - -button.multiselect { - height: auto; - min-height: 33px; - text-align: left; -} - -.radio, -.checkbox { - padding-left: 10px; - position: inherit; -} - -.template-dir-feedback .template-name-form form, -.modal-dialog .feedback-content form, -.modal-dialog form.dynamic-form { - input[name='url'] { - margin-bottom: 30px; - } - .form-info.post { - margin-bottom: 20px; - } - .form-info { - margin: 20px 0; - font-weight: initial; - } - - .form-group label.required::before, - .form-group .radio-label.required::before, - .form-group .radio-label.require-one::before - { - content: '* '; - } - - input[type=radio] { - height: 1em; - position: absolute; - margin-left: -20px; - } - - .form-group.checkbox, - .form-group.radio { - padding-left: 0; - margin-bottom: 15px; - label.control-label { - padding-left: 0; - font-weight: 700; - margin-bottom: 5px; - } - label { - display: table; - margin: 7px 0; - input { - width: auto; - margin-right: 10px; - margin-top: 3px; - } - } - .radio-label { - font-weight: 700; - } - } - - .form-group.checkbox label input { - height: 1em; - margin-top: -1px; - display: inline-block; - } -} - -.form-cart-email { - button.btn.show-records { - color: @link-color; - padding-top: 8px; - background-color: white; - } -} diff --git a/themes/finna2/less/finna/grid-view.less b/themes/finna2/less/finna/grid-view.less deleted file mode 100644 index a21841d1500..00000000000 --- a/themes/finna2/less/finna/grid-view.less +++ /dev/null @@ -1,185 +0,0 @@ -/* ------ GRID VIEW ------ */ -.search-grid { - overflow: hidden; - padding-top: 10px; - display: flex; - flex-wrap: wrap; - &::after { - display: table; - clear: both; - content: ''; - } -} - -.grid.result { - display: flex; - float: left; - width: 33%; - border-bottom: none; - @media (max-width: @screen-md) { - width: 50%; - } - @media (max-width: @screen-xs) { - width: 100%; - } - .grid-checkbox { - min-width: 0; - } - .title { font-weight: bold; } - .label, - .format { - display: inline-block; - white-space: normal; - } - .grid-result { - width:100%; - } - &#result0, :first-child { - border-top: none; - } -} -.grid-large-break, -.grid-small-break { clear: both; } -@media (min-width: 992px) { - .grid.result{ width: 33%; } - .grid-small-break { display: none; } -} - -.result-view-grid { - .grid:not(.recordcovers) { - padding: 0px 5px 10px; - margin-bottom: 0px; - &:focus { - outline: none; - } - .grid-body { - display: flex; - height: 100%; - flex-direction: column; - } - .grid-title { - padding-top: 5px; - overflow: hidden; - background: transparent; - } - .status { - display: inline; - .label { - text-indent: -9999em; - width: 8px; - height: 8px; - border-radius: 50%; - padding: 0; - } - } - .dateyeartype { - display: inline; - p { - margin-top: 0; - margin-bottom: 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - .grid-image { - overflow: hidden; - flex-basis: 250px; - height: 250px; - position: relative; - display: flex; - background-color: @gray-ultralight; - flex-flow: column; - } - h2.title { - font-size: 1.15em; - line-height: 1.5; - text-overflow: ellipsis; - // Position: relative makes ellipsis work with absolute elements in Chrome - position: relative; - white-space: nowrap; - overflow: hidden; - } - .save-record-container { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - display: none; - } - .save-record { - float: none; - font-size: inherit; - } - img { - box-shadow: none; - } - - @media (max-width: @screen-xs-max) { - .recordcover { - width: 100%; - } - .iconlabel:before { - display: block; - } - } - &.no-image { - .grid-body { - position: relative; - } - .recordcover-holder:before { - color: @gray-light; - content: attr(data-format); - position: absolute; - top: 60%; - font-size: .9em; - left:0; - width: 100%; - } - .recordcover-holder:after { - color: @gray-mid-light; - content: attr(data-noimage); - position: absolute; - top: 5px; - font-size: .65em; - right: 10px; - text-transform: uppercase; - letter-spacing: 1px; - } - .iconlabel:before { - color: @gray-mid-light; - top: 50%; - } - } - } - - .record-image-container { - margin-bottom: 0; - display: flex; - align-items: center; - position: initial; - justify-content: center; - flex: 1 1; - .recordcover-holder { - display: flex; - align-items: center; - height: 100%; - .recordcover-container { - display: flex; - height: 100%; - .image-popup-trigger { - height: 250px; - width: 250px; - img.recordcover { - height: 100%; - width: 100%; - margin: auto; - } - } - } - } - } -} - -@media (max-width: 767px) { - .grid:not(.recordcovers) { min-height: 250px; } -} diff --git a/themes/finna2/less/finna/headings.less b/themes/finna2/less/finna/headings.less deleted file mode 100644 index 8a61be64eeb..00000000000 --- a/themes/finna2/less/finna/headings.less +++ /dev/null @@ -1,14 +0,0 @@ -h1, .h1, -h2, .h2, -h3, .h3 { - margin-top: @line-height-computed; - margin-bottom: (@line-height-computed); -} - -// Finna text styles -.finna-main-header h3 { - margin: 0; -} -h4 a[id] { - color: @header-text-color; -} diff --git a/themes/finna2/less/finna/highlight.less b/themes/finna2/less/finna/highlight.less deleted file mode 100644 index b40326d3e67..00000000000 --- a/themes/finna2/less/finna/highlight.less +++ /dev/null @@ -1,16 +0,0 @@ -/* --- Staff View Highlight --- */ -.hljs-pi { - color: @gray-light; -} -.hljs-tag { - color: @brand-primary; -} -.hljs-title { - color: @brand-primary; -} -.hljs-attribute { - color: #1d3e81; -} -.hljs-value { - color: #df5000; -} diff --git a/themes/finna2/less/finna/holdings.less b/themes/finna2/less/finna/holdings.less deleted file mode 100644 index bd94ea4ba25..00000000000 --- a/themes/finna2/less/finna/holdings.less +++ /dev/null @@ -1,588 +0,0 @@ -/* -- Holdings styling -- */ - -// Common settings -.holding-details { - margin-top: 10px; - @media (max-width: @screen-xxs-max) { - width: 100%; - } -} -.status-available-icon { - color: @brand-success; -} -.status-unavailable-icon { - color: @brand-danger; -} -.dedup-select { - max-width: 100%; -} -.groupLocation { - letter-spacing: 0.2px; - padding: 0; - padding-bottom: 2px; - span:not(.icon) { - &.text-error, &.text-success, &.text-warning { - color: inherit; - vertical-align: middle; - margin-right: 10px; - font-weight: normal; - } - } - .text-error { - color: @brand-danger; - } -} -.no-branches .groupLocation { - display: inline-block; - line-height: 1.6em; -} -.groupCallnumber { - color: @gray-light; - display: inline; - margin-left: 15px; -} -.branchInfo { - padding-bottom: 2px; -} -.status-availability-coverage { - font-size: 0.9em; - color: @gray-light; - // Spacing to match .openurls .coverage - letter-spacing: .2px; -} - -.ils-purchase-history { - padding: 8px 15px; - display: flex; - .title { - width: 33.333%; - } - .history { - width: 66.666%; - } -} - -.external-interface-link { - display: flex; - clear: both; - padding-top: 8px; - a { - margin-left: auto; - } - @media (max-width: @screen-xs-max) { - a { - margin-left: inherit; - } - } - - .external-link-desc { - align-self: center; - margin-left: 0.5em; - } -} - -// Result list -.record-container .holding-details { - clear: both; - .available-total { - float: left; - margin-left: 0px; - } - .dedupInformation { - float: left; - margin-right: 10px; - max-width: 100%; - } - .holdings, .holdings-container, .no-holdings, .availability-load-indicator { - clear: both; - } - .holdings-container { - .header { - .icon.collapse { - display: none; - } - &.open { - .icon.expand { - display: none; - } - .icon.collapse { - display: initial; - } - } - } - } - .available-total { - margin-top: 0.5em; - } - .form-control { - width: 100%; - } -} - - -// Record view holdings styles -.holdings-tab { - .library_card, .placehold.btn, .placeStorageRetrievalRequest.btn, .placeILLRequest.btn, .repository-library-request-order { - margin-bottom: 5px; - margin-left: 5px; - } - .placehold.btn, .placeStorageRetrievalRequest.btn, .placeILLRequest.btn, .repository-library-request-order { - white-space: normal; - margin-top: 2px; - } - .place-hold-wrapper { - p { - margin-top: 5px; - } - a { - height: 40px; - } - .select-card-wrapper { - margin-top: 7px; - } - } - .borrowing-block-container { - margin-top: 20px; - } -} -.record-holdings-url-table { - margin: 20px 0px; - border: 1px solid @record-holdings-border-color; - border-top: none; - @media print { - display: none; - } - .headers { - display: flex; - width: 100%; - padding: 0 15px; - background: @record-holdings-title-background; - color: @record-holdings-title-color; - vertical-align: middle; - } - .holdings-urls { - display: block; - padding: 10px 15px; - } - .holdings-url-link { - display: block; - } - .holdings-url-title { - &:extend(.h4); - font-weight: 500; - margin-top: 15px; - margin-bottom: 15px; - margin-right: 15px; - display: inline-block; - } -} - -.record-holdings-table { - margin: 20px 0px; - border: 1px solid @record-holdings-border-color; - border-top: none; - @media print { - border-top: 1px solid @record-holdings-border-color; - } - h5 { - padding-left: 15px; - } - .holdings-group:not(.headers+.holdings-group) { - border-top: 2px solid @record-holdings-border-color; - } - span.icon.text-success { - color: @brand-success; - } - // Fix horizontal alignment of uncertain status icon: - span.icon.fa-circle-o { - padding-left: 2px; - font-size: 90%; - } - .holdings-container-heading { - display: flex; - min-height: 36px; - flex-flow: row; - .icon.collapse { - display: none; - } - &.open { - .icon.expand { - display: none; - } - .icon.collapse { - display: initial; - } - } - @media (max-width: @screen-xs-max) { - flex-flow: column; - } - &:hover { - cursor: pointer; - } - .location { - flex: 1 0 40%; - border-top: none; - @media (max-width: @screen-sm-max) { - width: 70%; - } - @media (max-width: @screen-xs-max) { - width: 100%; - } - - &:not(.electronic) { - text-transform: uppercase; - font-weight: bold; - font-size: .92em; - padding-left: 15px; - } - &.electronic { - padding: 10px 15px; - } - @media (max-width: @screen-xs-max) { - font-size: .87em; - } - } - .location, .holdings-details, .location-link { - padding-top: 10px; - padding-bottom: 10px; - } - - .holdings-details, .location, .location-link { - @media (max-width: @screen-xs-max) { - padding-top: 4px; - padding-bottom: 4px; - } - } - .holdings-details, .location-link { - vertical-align: middle; - flex: 1 1 100%; - @media (min-width: @screen-sm-min) { - border-top: none; - } - } - - .holdings-details { - padding-right: 5px; - text-align: left; - float: left; - - @media (max-width: @screen-xs-max) { - text-align: initial; - } - &:not(.electronic) { - font-weight: bold; - padding-left: 15px; - @media print { - font-weight: 400; - } - @media (min-width: @screen-sm-min) and (max-width: @screen-md-max) { - padding-left: 13px; - } - } - .small { - font-weight: normal; - color: @gray; - } - } - - .location-link { - font-weight: bold; - padding-right: 15px; - @media (max-width: @screen-xs-max) { - text-align: right; - border-top: none; - line-height: 1.3; - } - @media print { - font-weight: 400; - } - &.text-right { - @media (max-width: @screen-sm-max) { - text-align: left; - padding-left: 15px; - } - } - } - .holdings-extra-text { - padding: 4px; - } - } - .row:nth-child(2) { - .location, .holdings-details, .location-link { - border-top: none; - } - } - - .copy-title { - @media (min-width: @screen-sm-min) { - width: 40%; - float: left; - } - } - .copy-info { - .item-notes { - ul { - margin: 0 0 0 15px; - } - } - @media (min-width: @screen-sm-min) { - width: 60%; - float: left; - } - @media (max-width: @screen-xs-max) { - line-height: 1.3; - } - @media (min-width: @screen-sm-min) { - padding-left: 3px; - } - } - .copy-available { - @media (min-width: @screen-sm-min) { - float: right; - } - } - .copy-details { - padding: 8px 15px 8px 31px; - .clearfix(); - - &:nth-child(odd):not(.group-heading) { - background-color: @gray-ultralight; - } - &:not(:first-child) { - @media print { - border-top: 1px dashed @record-holdings-border-color; - } - @media (max-width: @screen-xs-max) { - padding: 4px 15px 4px 31px; - } - } - &.group-heading { - font-weight: initial; - padding-top: 2px; - padding-bottom: 0; - text-transform: initial; - } - .details-title { - width: 50%; - float: left; - - @media (min-width: @screen-sm-min) { - width: 25%; - } - } - .details-info { - width: 50%; - float: left; - - @media (min-width: @screen-sm-min) { - width: 75%; - } - @media (max-width: @screen-xs-max) { - line-height: 1.3; - } - } - .recordPublished { - font-weight: 700; - } - } - .headers { - display: flex; - width: 100%; - padding: 0 15px; - background: @record-holdings-title-background; - color: @record-holdings-title-color; - vertical-align: middle; - .dedup-information { - flex: 1; - @media (max-width: @screen-xs-max) { - flex-basis: 70%; - } - } - .totals-container { - display: flex; - flex-wrap: wrap; - gap: 0 2rem; - align-self: center; - margin-left: 1rem; - @media print { - flex: 0 52%; - } - @media (max-width: @screen-xs-max) { - flex-basis: 30%; - text-align: right; - } - } - .shelf-location { - align-self: center; - @media (max-width: @screen-xs-max) { - display: none; - } - } - .shelf-location { - margin-left: 3rem; - } - } - .dedup-select { - max-width: 130px; - display: inline-block; - word-wrap: initial; - margin: 3px 0px 7px; - } - .holdings-title { - &:extend(.h4); - font-weight: 500; - margin-top: 15px; - margin-bottom: 15px; - margin-right: 15px; - display: inline-block; - } - .btn-primary { - padding: 2px 6px; - margin-bottom: 2px; - @media (max-width: @screen-xs-max) { - margin-top: 2px; - } - } - .collapsed { - display: none; - } -} -.callnumAndLocation { - clear: both; - .collapsed { - display: none; - } - .holdings-container:not(.root) { - border-bottom: 1px solid @gray-lighter; - padding: 2px 0; - @media (max-width: @screen-xs-max) { - padding: 6px 0 17px; - } - } - .holdings-container.root > .header { - margin-bottom: 3px; - .info { - @media (max-width: @screen-xs-max) { - float: none; - } - } - } - .holdings-container.collapsible > .holdings:not(.root) { - padding-left: 10px; - } - .holdings-container.collapsible > .header { - cursor: pointer; - padding: 1px 0px; - @media (max-width: @screen-sm-max) { - padding: 3px 0px; - } - } - .holdings-container .right { - display: inline; - } - .header { - margin-bottom: 6px; - span.icon { - vertical-align: baseline; - } - .info { - color: lighten(@text-color, 18%); - float: right; - max-width: 60%; - display: flex; - margin-top: .5em; - margin-left: 2rem; - gap: 0 2rem; - justify-content: right; - flex-wrap: wrap; - } - } - .holdings { - .odd { - background-color: @gray-ultralight; - } - .branchInfo { - color: @gray-light; - display: block; - - @media (min-width: @screen-sm-min) { - text-align: right; - } - @media (max-width: @screen-xs-max) { - margin-left: 20px; - } - } - .groupCallnumber { - float: right; - } - @media (min-width: @screen-sm-min) { - .group-location-col { - width: 65%; - float: left; - } - .group-branches { - width: 35%; - float: left; - } - } - } - .holdings-container { - .holdings { - .branch { - font-weight: 500; - } - .groupLocation i { - margin-top: -2px - } - } - } - .header { - font-weight: 600; - span { - font-weight: 400; - } - } - .actions { - float: right; - .title-hold { - float: right; - margin-top: 10px; - margin-left: 10px; - } - .request { - float: right; - margin-top: 10px; - } - .all-holdings { - text-align: right; - clear: both; - padding-top: 5px; - } - @media (max-width: @screen-xs-max) { - float: none; - .all-holdings { - text-align: left; - } - .title-hold { - float: left; - a.btn { - white-space: pre-wrap; - } - } - } - } - .fa.arrow { - color: @gray-light; - } - span.icon { - vertical-align: middle; - &.text-success { - color: @brand-success; - } - // Fix horizontal alignment of uncertain status icon: - &.fa-circle-o { - padding-left: 2px; - font-size: 90%; - } - } -} diff --git a/themes/finna2/less/finna/home.less b/themes/finna2/less/finna/home.less deleted file mode 100644 index de02860740f..00000000000 --- a/themes/finna2/less/finna/home.less +++ /dev/null @@ -1,154 +0,0 @@ -.home-1 { - background: @home-1-background; -} -.home-2 { - background: @home-2-background; -} -.home-3 { - background: @home-3-background; -} -.home-4 { - background: @home-4-background; -} - -@media(min-width: @screen-sm) { - .home-column { - width: 50%; - float: left; - padding-right: 15px; - } -} - -.introduction h1, h2.introductionText, .introduction h3 { - padding: 0 5px 1px 7px; - color: @introduction-text-color; - line-height: 1.4em; - font-weight: bold; - & .brand-third { - color: @brand-third; - } -} -.introduction h3 { - color: @introduction-text-small-color; -} -.introduction h1 { - font-size: @introduction-header; - line-height: calc(@introduction-header/2.1); - @media(max-width:@screen-xs-max) { - font-size: calc(@introduction-header/1.5); - } -} -.introduction { - position: relative; -} -h1.introductionText, h2.introductionText, h3.introductionText { - margin: 0px 50px 5px 0px; - em { - font-style: normal; - } -} -h1.introductionText > em { - color: @brand-secondary; -} -h2.introductionText > em, h3.introductionText > em { - color: @link-color; -} -h2.introductionText { - color: @introduction-text-small-color; - font-size: @font-size-h3; -} - -.left-column-content { - background: @home-left-column-background; - @media (min-width: @screen-sm){ - width: 60%; - float: left; - padding-right: 15px; - } -} -.right-column-content { - background: @home-right-column-background; - @media (min-width: @screen-sm) { - width: 40%; - float: left; - padding-left: 15px; - } -} - -// Popular searches -.popular-searches { - & ul { - margin-bottom: 0; - } - & li { - margin-bottom: 10px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - & .position { - color: @btn-primary-color; - background: @btn-primary-bg; - border-radius: 50%; - display: inline-block; - height: 30px; - line-height: 30px; - margin-right: 6px; - padding: 0; - text-align: center; - width: 30px; - } - & a { - text-decoration: none; - } -} -.popular-search-col { - width: 100%; - @media (min-width: @screen-sm) { - width: 50%; - float: left - } -} - -@media(min-width: @screen-md) { - .info-col { - width: 33.333%; - float: left; - padding: 0 15px; - &:first-child { - padding-left: 0; - } - &:last-child { - padding-right: 0; - } - } -} - -.infobox { - margin: 20px 0px; - box-shadow: @infobox-box-shadow; - padding: 10px 20px; - color: @infobox-text-color; - background: @infobox-background; - border: @infobox-border; - & h2 { - font-size: 1.777em; - line-height: 1.2em; - } - & li { - list-style-position: inside; - } - & p,li { - font-size: 1.2em; - } - & i,a { - color: @link-color; - text-shadow: none; - } - & a.btn-primary { - color: #fff; - i { - color: #fff; - } - } -} diff --git a/themes/finna2/less/finna/image-popup.less b/themes/finna2/less/finna/image-popup.less deleted file mode 100644 index 56c2b0ef269..00000000000 --- a/themes/finna2/less/finna/image-popup.less +++ /dev/null @@ -1,770 +0,0 @@ -.finna-popup { - width: 100%; - @media (min-width: @screen-sm-min) { - &.marc { - max-width: 800px; - } - } - - &.videoplayer-only { - background: initial; - box-shadow: none; - } - &.backdrop { - position: fixed; - width: 100%; - height: 100%; - z-index: 20000; - background-color: rgba(1,1,1,0.6); - padding: 12px; - overflow: hidden auto; - - @media (min-width: @screen-sm-min) { - padding: 40px; - } - } - >.large-spinner { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - .fa-spinner::before { - font-size: 80px; - color: white; - text-shadow: 2px 2px #565656; - } - } - &.content { - width: 100%; - @media (min-width: @screen-sm-min) { - height: 100%; - } - @media (max-width: @screen-xs-max) { - padding: 0; - } - } - &.close-button { - position: absolute; - z-index: 1500; - width: 30px; - height: 24px; - line-height: 16px; - appearance: none; - -webkit-appearance: none; - top: 0; - right: 0; - background-color: transparent; - color: white; - border: none; - font-size: 24px; - text-shadow: 2px 2px 2px black; - - @media (min-width: @screen-sm-min) { - right: -30px; - } - } - - .popup-arrow { - font-size: 36px; - position: absolute; - appearance: none; - -webkit-appearance: none; - -moz-appearance: none; - background: none; - border: none; - z-index: 1500; - top: 45vh; - @media (min-width: @screen-sm-min) { - width: 48px; - height: 96px; - } - .icon { - cursor: pointer; - color: #fff; - text-shadow: 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000; - } - @media (max-width: @screen-xs-max) { - position: -webkit-sticky; - position: sticky; - bottom: 0; - font-size: 40px; - &.popup-left-arrow { - float: left; - } - &.popup-right-arrow { - float: right; - } - } - &.popup-left-arrow { - @media (min-width: @screen-sm-min) { - left: 0px; - } - } - &.popup-right-arrow { - @media (min-width: @screen-sm-min) { - right: 0px; - } - } - } -} - -.imagepopup-zoom-container { - position: absolute; - top: 10px; - left: 10px; - width: 40px; - z-index: 1000; - background: fadeout(@gray, 40%); - color: white; - border-radius: 5px; - @media (min-width: @screen-sm-min) { - width: 48px; - } - .zoom-button { - display: inline-block; - height: 40px; - width: 40px; - text-align: center; - vertical-align: top; - line-height: 36px; - padding: 0; - appearance: none; - font-size: @font-size-icon-large; - background-color: transparent; - border: none; - cursor: pointer; - box-sizing: padding-box; - border-bottom: 2px solid @gray-light; - @media (min-width: @screen-sm-min) { - height: 48px; - width: 48px; - font-size: 24px; - } - &:last-child { - border-bottom: none; - } - i { - cursor: pointer; - } - &.inactive { - color: @gray-lighter; - cursor: not-allowed; - i { - cursor: not-allowed; - } - } - } -} -.next-image { - position: absolute; - z-index: 600; - appearance: none; - border: none; - background-color: rgba(138, 138, 138, 0.5); - align-self: center; - font-size: 22px; - border-radius: 2px; - padding: 0 4px; - color: white; - margin: 0 4px; - height: 40px; - display: flex; - align-items: center; - - .paginator-canvas & { - background-color: rgba(138, 138, 138, 0.9); - } - .icon { - text-shadow: 1px 1px 2px #555; - cursor: pointer; - } - &:disabled { - color: lighten(@gray-lighter, 5%); - cursor: not-allowed; - .icon { - cursor: not-allowed; - } - } - &.left { - left: 0%; - } - &.right { - right: 0%; - } -} -.imagepopup-holder { - height: 100%; - background-color: white; - display: flex; - justify-content: space-between; - min-height: 400px; - - @media (max-width: @screen-xs-max) { - flex-flow: column; - } - - .imagepopup-container { - display: flex; - flex: 1 1 100%; - justify-content: space-between; - flex-flow: column wrap; - width: 100%; - min-height: 400px; - - .paginator-canvas { - display: flex; - justify-content: space-around; - flex: 20 1 0; - min-height: 50%; - position: relative; - @media (max-width: @screen-xs-max) { - height: 324px; - } - img { - max-height: 100%; - display: block; - object-fit: contain; - } - .leaflet-map-image { - background-color: #424242; - cursor: grab; - } - .video-popup { - height: 100% !important; - margin: 0; - max-height: initial; - max-width: initial; - .video-js { - width: 100%; - height: 100%; - } - } - - .leaflet-map-image, .video-popup { - width: 100% !important; - } - .non-zoomable { - padding: 6px; - max-height: 100%; - min-height: 300px; - display: flex; - align-items: center; - justify-content: space-around; - .finna-popup.marc & { - align-items: start; - } - &.no-image { - position: relative; - - @media (min-width: @screen-sm) { - height: initial; - } - .iconlabel::before { - display: block; - position: absolute; - top: 10%; - left: 0; - color: #d1d1d1; - font-size: 3.5em; - - @media (max-width: @screen-xs-max) { - top: 50%; - } - } - img { - background-color: white; - width: 100%; - } - } - } - .leaflet-bottom.leaflet-right { - display: none; - } - .leaflet-image-loading { - z-index: 401; - height: 4px; - width: 100%; - position: absolute; - bottom: 0; - background-image: - repeating-linear-gradient( - -45deg, - #adadad, - #adadad 11px, - #eee 10px, - #eee 20px - ); - animation: move 1s linear infinite; - background-size: 28px 28px; - &:not(.loading) { - display: none; - } - @keyframes move { - 0% { - background-position: 0 0; - } - 100% { - background-position: 28px 0; - } - } - } - } - } - .image-information-holder { - flex: 1 1 100%; - display: flex; - flex-flow: column; - justify-content: space-between; - height: 100%; - padding: 10px; - overflow-y: auto; - width: 100%; - - @media (min-width: @screen-sm-min) { - max-width: 400px; - border-left: 1px solid #ccc; - } - .popup-link-buttons { - margin: 2px 0px; - .videourl { - text-transform: uppercase; - font-weight: bold; - margin: 2px 0; - } - } - .collapse-content-holder { - flex: 1; - - @media (max-width: @screen-xs-max) { - order: 2; - } - .large-spinner { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - i::before { - font-size: 64px; - } - } - } - .record-informations { - text-align: left; - width: 100%; - color: #333333; - font-size: 1em; - letter-spacing: .5px; - font-weight: 400; - padding: 6px; - @media (max-width: @screen-xs-max) { - order: 1; - } - } - - .author-and-dates, .building { - font-size: 12px; - letter-spacing: 0.5px; - font-weight: 500; - } - - .author-and-dates p { - margin: 0; - } - - &.marc .building { - display:none; - } - - h3.title { - padding: 0px 0px 0px; - letter-spacing: 0.2px; - margin-top: 0px; - margin-bottom: 0; - } - .result-other-titles { - margin-top: 3px; - margin-bottom: 6px; - } - .building { - margin-top: 0; - } - - .summary { - margin: 10px 0px; - color: rgb(90, 90, 90); - min-width: 200px; - line-height: 1.6em; - &.loading { - max-height: 100px; - overflow: hidden; - } - } - .popup-link-buttons { - margin-bottom: 20px; - i { - margin-right: 2px; - } - } - .record-link { - margin-top: 20px; - } - .image-dimensions { - color: @gray-light; - font-size: .8em; - } - - .image-info .record-index { - display: none; - } - - .image-rights { - text-align: left; - padding: 5px 0; - margin-top: 10px; - border-top: 1px solid @gray-lighter; - color: @text-color; - margin-right: 0; - - .rights span { - font-weight: bold; - } - > div { - text-align: left; - } - i { - padding-right: 2px; - } - .less-link { - display: none; - margin-left: 0; - margin-top: 10px; - clear: both; - a:after { - background-position: 2px -2270px; - } - } - } - } -} - -.image-rights-default { - font-size: 11px; - margin: 5px 0 0; -} - -.cc-rights { - background-color: @gray-ultralight; - display: inline-block; - font-weight: 500; - margin: 10px 10px 10px 0; - padding: 10px; - text-align: center; - white-space: normal; - overflow-wrap: anywhere; - &:hover { - color: inherit; - } - span { - text-align: left; - display: inline-block; - } - a span { - text-align: center; - display: inline; - } -} - -.cc-rights img.creative-commons { - height: 20px; - width: 20px; -} - -.cc-rights a { - color: @brand-primary; -} - -.copyright-meaning { - display: inline-block; -} - -@media(max-width:@screen-xs-max) { - .imagepopup-holder { - h3.title { - border:none; - } - .loaded.image .noimage { - display: inline-block; - flex: 1; - height: 100%; - text-align: center; - top: 15px; - left: auto; - } - .content { - width: 100%; - text-align: center; - padding: 10px 0px 0px; - max-width: 800px; - } - .popup-link-buttons { - padding-left: 20px; - } - .content h3 { - padding: 0px 10px; - } - .summary { - padding: 5px 20px 0px; - text-align: left; - } - .image-rights { - padding: 10px 0px; - margin: 0px 20px 10px; - } - .image-details { - text-align: left; - } - } -} - -.finna-popup { - &.modal-holder { - height: 100%; - position: relative; - z-index: 5; - - &.canvas-player, &.video-player { - height: 100%; - } - &.marc { - margin: auto; - } - &.finna-iframe .player { - width: 100%; - height: 100%; - } - @media (min-width: @screen-sm-min) { - height: 100%; - } - } - &.content { - .finna-image-pagination { - background-color: #383838; - padding: 4px; - flex: 1 1 0; - width: 100%; - flex: 0 0 auto; - .finna-element-track { - a { - background-color: #efefefcc; - @media (min-width: @screen-sm-min) { - height: 96px; - max-width: 96px; - } - } - } - .paginator-info { - display: none; - } - } - &.nonzoomable { - .finna-image-pagination { - background-color: transparent; - button:not(:disabled) { - color: black; - } - a { - background-color: transparent; - } - } - } - - } -} - -.recordcover-container { - min-width: 60px; - .image-popup-trigger { - display: flex; - width: 100%; - justify-content: center; - aspect-ratio: 1/1; - .paginator-info { - position: absolute; - right: 10px; - top: 0px; - color: black; - z-index: 6; - .image-index { - background-color: #efefefcc; - padding: 2px; - } - } - .iconlabel { - display: none; - width: 100%; - justify-content: center; - align-items: center; - } - img { - object-fit: contain; - padding:5px; - max-height: 600px; - } - &.no-image { - ::before { - font-size: 39px; - color: @gray-lighter; - padding: 0; - @media (max-width:@screen-sm-max) { - font-size: 26px; - } - } - img { - display: none; - } - .iconlabel { - display: flex; - margin-right: 0; - box-shadow: 0px 0px 0px 2px @gray-lighter inset; - } - &.disable { - cursor: default; - } - .model-3d { - display: none; - } - } - } -} -.result .image-popup-trigger .paginator-info { - right: initial; - left: 35px; -} -.result .recordcover-holder .next-image { - display: none; -} -.recordcover-holder { - position: relative; -} -.grid-image .image-popup-trigger.no-image .iconlabel { - box-shadow: initial; -} -.recordcovers { - z-index: 3; - align-items: center; - position: relative; - &.paginated { - display: flex; - > button { - appearance: none; - height: 44px; - border: none; - background-color: transparent; - padding: 0 2px; - flex: 0 0 0; - i { - cursor: pointer; - font-size: 24px; - } - .finna-popup &:not(:disabled){ - color: white; - } - &:disabled { - background-color: #d6d6d600; - color: transparent; - i { - cursor: not-allowed; - } - } - } - .track-holder { - display: inline-block; - flex: 1 1 auto; - .finna-element-track { - max-height: 100%; - touch-action: none; - display: flex; - flex-flow: column; - align-items: center; - width: 100%; - min-width: 100%; - div { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - a { - background-color: #efefefcc; - display: flex; - align-items: center; - justify-content: center; - height: 64px; - overflow: hidden; - margin: 2px 4px; - padding: 2px; - flex: 0 1 64px; - span.model-3d-icon { - color: #121212; - font-size: 24px; - font-style: initial; - } - &.current { - border: 0.2em solid @brand-primary; - } - &.truncate-change { - opacity: 0; - } - } - } - } - } - &.mini-paginator { - position: absolute; - left: 0; - padding: 0; - top: 0; - justify-content: start; - button { - background-color: #efefefcc; - margin: 0 1px; - padding: 0 4px; - height: 24px; - .icon { - font-size: 10px; - } - &:disabled { - color: lighten(@gray-light, 30%); - } - } - .track-holder { - display: none; - } - } - } -} -.recordcovers-more { - display: flex; - align-items: center; - .show-more-images, .show-less-images { - cursor: pointer; - font-weight: 600; - text-transform: uppercase; - font-size: .9em; - margin: 5px 0; - border: none; - background-color: transparent; - padding: 0; - } - button { - flex: 1; - appearance: none; - border: none; - i { - cursor: pointer; - } - } - button:disabled i { - cursor: initial; - } -} diff --git a/themes/finna2/less/finna/labels.less b/themes/finna2/less/finna/labels.less deleted file mode 100644 index a6f87c71d07..00000000000 --- a/themes/finna2/less/finna/labels.less +++ /dev/null @@ -1,35 +0,0 @@ -.label-info.label-source { - margin-top: 5px; - margin-bottom: 3px; - font-size: 0.9em; - font-weight: 500; - border: 1px solid @gray-light; - color: @gray-light; - .label-variant(@body-bg); -} -// Compensate for the smaller font size in the bordered label for source: -.result .iconlabel { - font-size: 0.9em; -} -.record-labels { - .iconlabel { - font-size: 0.8em; - font-weight: 600; - text-transform: uppercase; - &.with-tooltip { - cursor: pointer; - } - } - .iconlabel::before { - font-size: 1.2em; - } - .iconlabel.full-text-available::before { - color: @full-text-icon-color; - } - .iconlabel.peer-reviewed::before { - color: @peer-reviewed-icon-color; - } - .iconlabel.open-access::before { - color: @open-access-icon-color; - } -} diff --git a/themes/finna2/less/finna/library-cards.less b/themes/finna2/less/finna/library-cards.less deleted file mode 100644 index 2d906563bb2..00000000000 --- a/themes/finna2/less/finna/library-cards.less +++ /dev/null @@ -1,76 +0,0 @@ -// select card dropdown styles -.select-card-wrapper { - font-size: 14px; - display: inline-block; - vertical-align: top; - margin-top: 6px; - font-weight: 400; - line-height: 2; - - > span { - margin-right: 5px; - } - #select-card-label-maincontent { - display: none; - } - .dropdown { - display: inline-block; - > a { - padding: 3px 7px; - color: black; - background-color: white; - border: 1px solid @input-border; - border-radius: @finna-button-radius; - display: inline-block; - margin-top: -7px; - &:hover, &:focus { - text-decoration: none; - } - } - i { - font-size: 12px; - position: absolute; - top: 8px; - right: 11px; - } - - .dropdown-menu { - @media (max-width: @screen-sm) { - right: 0; - left: auto; - } - } - } -} - -.useraccount-row { - margin-top: 5px; - margin-bottom: 5px; - line-height: 1.5; - font-weight: 600; - .select-card-wrapper { - .dropdown > a { - background: @body-bg; - color: @gray; - border: 1px solid @input-border; - } - } -} - -#new-account-form { - .form-control:not([type="radio"]) { - width: 70%; - } - .form-control[type="radio"] { - display: inline-block; - margin: -4px 0.5em 0 0; - padding: 0; - height: 1.5em; - } - legend { - font-size: 100%; - font-weight: 700; - border: 0; - margin-bottom: 5px; - } -} diff --git a/themes/finna2/less/finna/location-service.less b/themes/finna2/less/finna/location-service.less deleted file mode 100644 index 4d4ab582447..00000000000 --- a/themes/finna2/less/finna/location-service.less +++ /dev/null @@ -1,42 +0,0 @@ -#modal.location-service { - & .modal-body { - & .link { - float: right; - } - & iframe { - width: 100%; - height: 700px; - @media (max-width: @screen-xs-max) { - height: 500px; - } - & .container { - max-width: initial !important; - } - } - } -} -#modal.location-service-qrcode { - & .modal-dialog { - width: 340px; - @media (max-width: @screen-xs-max) { - width: 300px; - } - } -} -i.fa-qrcode { - cursor: pointer; - margin-left: 12px; -} - -.holdings-container-heading { - .location-service-qrcode-icon { - font-size: 1.5em; - } - .location-service-icon { - font-size: 1.3em; - padding: 0 0.4rem; - } -} -.template-name-results .location-link-text { - display: inline; -} diff --git a/themes/finna2/less/finna/login.less b/themes/finna2/less/finna/login.less deleted file mode 100644 index 41aeb9f2801..00000000000 --- a/themes/finna2/less/finna/login.less +++ /dev/null @@ -1,67 +0,0 @@ -/* --- Login Screen --- */ -#authcontainer, #accountForm { - h3 { - border-bottom: 1px solid @gray-lighter; - font-weight: 400; - } - .login-info-icon { - font-size: 1.5em; - float: left; - margin-top: 0.4em; - margin-left: 0.5em; - color: @brand-primary; - @media (max-width: @screen-xs-max) { - margin-top: 0; - } - } - @media (max-width: @screen-xs-max) { - .form-control { - font-size: 16px; - } - } -} - -.login-description { - margin: 1em 0 1em 2.5em; -} -.login-description.shibboleth { - font-weight: bold; -} -.login-description-terms, .register-description { - background-color: @state-info-bg; - padding: 2em; - padding-left: 2.5em; - margin-bottom: 1em; - margin-left: 0.5em; -} -.authmethod1, .authmethod2, .authmethod3 { - margin-top: 1em; -} -.shibboleth-login { - margin-bottom: 1em; -} - -.template-name-login > .container { - padding-top: 30px; - padding-bottom: 30px; -} - -.login-col { - @media (min-width: @screen-sm) { - width: 50%; - float: left; - } -} -#accountForm { - @media (min-width: @screen-sm) { - .form-control { - width: 80%; - } - .login-col:first-of-type { - width: 40%; - } - .login-col:nth-of-type(2) { - width: 60%; - } - } -} diff --git a/themes/finna2/less/finna/map.less b/themes/finna2/less/finna/map.less deleted file mode 100644 index ff88abdff31..00000000000 --- a/themes/finna2/less/finna/map.less +++ /dev/null @@ -1,74 +0,0 @@ -/* Styles that apply to maps */ - -div.map-canvas { - width: 100%; - height: 400px; - border: 1px solid @gray-lighter; -} - -div.selection-map-canvas { - width: 100%; - height: 500px; - border-radius: 7px; -} - -.leaflet-marker-icon .map-marker-icon { - opacity: 0.8; - position: relative; - font-size: 35px; -} - -.leaflet-marker-icon.leaflet-div-icon { - font-family: FontAwesome; - font-size: 15px; - text-rendering: auto; - border: none; - background: transparent; - color: @action-link-color; - width: 40px !important; - height: 40px !important; - margin-top: -20px !important; - margin-left: -20px !important; - &.leaflet-edit-move { - padding: 2px; - &:before { - content: "\f047"; - font-size: 25px; - position: relative; - padding: 5px; - border-radius: 50%; - background: rgba(255, 255, 255, 0.8); - } - } - &.leaflet-edit-resize { - padding: 5px; - &:before { - content: "\f065"; - font-size: 20px; - padding: 5px; - border-radius: 50%; - background: rgba(255, 255, 255, 0.8); - } - } -} - -.modal-map.leaflet-container, -.selection-map-canvas.leaflet-container { - font-family: @font-family-sans-serif; -} -.map-button.map-button-clear { - background: @body-bg; - color: @text-color; - &:hover { - color: @text-color; - background: darken(@body-bg, 4%); - } -} -.map-modal-form button[type=submit]{ - margin-top: 15px; -} -.map-modal-form .modal-map { - height: 70vh; - max-height: 500px; - width: 100%; -} diff --git a/themes/finna2/less/finna/mobile-table.less b/themes/finna2/less/finna/mobile-table.less deleted file mode 100644 index 1aa45915e8e..00000000000 --- a/themes/finna2/less/finna/mobile-table.less +++ /dev/null @@ -1,61 +0,0 @@ -@media(max-width: @screen-xs-max) { - table.mobile-table { - border: 0; - } - table.mobile-table .headers{ - display: none; - } - table.mobile-table caption { - font-size: 1.3em; - } - table.mobile-table thead { - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - } - table.mobile-table tr{ - border: 1px solid @gray-lighter; - display: block; - margin-bottom: 1.5em; - background-color: @body-bg !important; - } - table.mobile-table tr>td { - border: 0; - display: block; - font-size: 1em; - text-align: left; - padding: 0; - span, img { - display: inline-block; - padding: 10px; - a { - font-style: italic; - } - } - img { - padding-bottom: 0px; - } - } - table.mobile-table .library-card-actions a { - font-style: normal; - } - table.mobile-table td:before { - content: attr(data-label); - float: left; - font-weight: bold; - text-transform: uppercase; - width: 100%; - width: ~"-webkit-calc(100% - 1px)"; - width: ~"-moz-calc(100% - 1px)"; - width: ~"calc(100% - 1px)"; - background: @gray-ultralight; - padding: 10px; - margin-left: 1px; - } - table.mobile-table td:not(:first-child):before { - } -} \ No newline at end of file diff --git a/themes/finna2/less/finna/mobile-toolbar.less b/themes/finna2/less/finna/mobile-toolbar.less deleted file mode 100644 index ba5e93ae22a..00000000000 --- a/themes/finna2/less/finna/mobile-toolbar.less +++ /dev/null @@ -1,209 +0,0 @@ -.mobile-toolbar { - @media (max-width: @screen-xs-max) { - border-top: 1px solid @body-bg; - position: fixed; - height: 44px; - bottom: 0; - left: 0; - z-index: 501; - width: 100%; - background: @sidebar-background; - img.qrcode { - max-width: initial; - margin-left: -36px; - border: 2px solid @gray; - } - .nav-pills.mobile-actions, .nav-pills.mobile-sharing { - float: left; - & > li { - padding-top: 0px; - padding: 0; - height: 44px; - margin: 0; - - & > a { - padding: 10px 9px 0px 9px; - height: 44px; - margin-top: 0px; - border-radius: 0; - color: @sidebar-header-text-color; - } - } - .share-buttons, li.whatsapp, li.mail-record { - display: flex; - align-items: center; - justify-content: center; - .share-buttons-toolbox { - flex-flow: column wrap; - } - } - } - & .nav-pills.mobile-sharing .whatsapp a, .share-buttons-toolbox a, .nav-pills.mobile-sharing .mail-record a { - display: inline-block; - padding: 8px; - margin: 0px; - &:hover { - background: rgba(255, 255, 255, 0.2); - } - } - .dropdown-toggle { - color: @btn-primary-color; - background: @btn-primary-bg; - border-radius: 0; - } - .dropdown-menu { - position: absolute; - z-index: 1000; - float: none; - min-width: initial; - padding: 0; - margin: 0; - list-style: none; - font-size: 13px; - background-color: @sidebar-background; - border: none; - border-radius: 0; - bottom: 44px; - box-shadow: 10px 2px 20px -10px; - & > li { - border: none; - & > a { - color: @body-bg; - padding: 6px 10px 2px 4px; - line-height: 2em; - } - } - .export-list > a { - padding: 5px 10px; - color: @sidebar-header-text-color; - } - } - .nav-pills.library-link { - color: @body-bg; - float: right; - font-size: 1.2em; - padding-top: 5px; - padding-right: 5px; - padding-left: 5px; - height: 100%; - font-size: 1.2em; - & > li { - padding-top: 0px; - margin: 3px 0px; - } - span { - margin: 0; - text-align: right; - display: block; - line-height: 1.2em; - } - &:hover { - cursor: pointer; - background-color: rgba(255, 255, 255, 0.2); - } - } - li.btn-bookbag-toggle a{ - position: relative; - .blinker { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - background-color: transparent; - } - .cart-remove-mobile-icon { - font-size: 10px; - position: absolute; - top: 5px; - } - } - } -} - -section.template-name-results .sidebar, -section.template-name-search .sidebar, -section.template-name-blended .sidebar, -section.template-name-mylist .sidebar, -section.template-dir-record.template-name-view .sidebar.search-facets, -section.template-dir-collection.template-name-view .sidebar { - @media (max-width: @screen-xs-max) { - position: fixed; - background: @body-bg; - z-index: @zindex-sidebar; - width: 100%; - height: 100%; - overflow-y: scroll; - overflow-x: hidden; - right: 0; - -webkit-overflow-scrolling: touch; - opacity: 0; - padding-left: 0px; - padding-right: 0px; - padding-bottom: 40px; - &.open { - top: 0; - opacity: 100%; - } - .list-group-item.active i.fa.fa-check-square-o:before { - content: "\f00c" !important; - } - .list-group.facet { - margin: 0 10px 5px 10px; - &:first-of-type { - margin-top: 5px; - } - &:last-child { - margin-bottom: 44px; - } - } - } -} -.mobile-navigation { - &:extend(.mobile-toolbar); - @media (max-width: @screen-xs-max) { - left: 0; - z-index: 60; - i { - font-size: 15px; - } - li.sidebar-navigation { - padding: 11px; - color: @sidebar-header-text-color; - font-size: 1em; - &:hover { - cursor: pointer; - } - } - span.narrow-search-link { - font-size: 1.2em; - font-weight: 500; - text-transform: uppercase; - } - span.active-filters { - float: right; - max-width: 55%; - } - } -} -.finna-search-filter-toggle { - @media (max-width: @screen-xs-max) { - position: sticky; - top: @navbar-height; - margin-left: calc((@grid-gutter-width / 2) * -1); - margin-right: calc((@grid-gutter-width / 2) * -1); - padding-left: calc(@grid-gutter-width / 2); - padding-right: calc(@grid-gutter-width / 2); - padding-top: 12px; - padding-bottom: 12px; - z-index: 500; - background: #fff; - - &.sticky { - box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3); - } - .btn-search-filter { - width: 100%; - } - } -} diff --git a/themes/finna2/less/finna/modal.less b/themes/finna2/less/finna/modal.less deleted file mode 100644 index f5a4f29bfdd..00000000000 --- a/themes/finna2/less/finna/modal.less +++ /dev/null @@ -1,93 +0,0 @@ -.modal-content { - & .comment-inappropriate-form { - & label { - font-weight: inherit; - } - .form-control { - width: 100%; - margin-bottom: 12px; - } - .textarea { - .form-control { - width: 100%; - margin-bottom: 12px; - } - } - } -} - -.modal-content .close { - color: @modal-header-color; - padding: 0px 7px 6px 7px; - font-weight: 500; - min-height: 30px; - min-width: 30px; - font-size: 1.5em; - line-height: 1em; - position: absolute; - right: 14px; - top: 14px; - z-index: 2; - opacity: 0.8; - &:after { - font-family: finnaicons; - content: '\e02e'; - } - &:hover { - opacity: 1; - } -} - -.modal-body { - overflow: hidden; - - & > h1, & > h2 { - background: @modal-header-background; - color: @modal-header-color; - font-size: @content-headings-font-size-h4; - line-height: @modal-title-line-height; - border-top-left-radius: @border-radius-large - 1; - border-top-right-radius: @border-radius-large - 1; - border-bottom: 1px solid @modal-header-border-color; - margin: -@modal-inner-padding; - margin-bottom: @modal-title-padding; - padding: @modal-title-padding; - // Account for close button - padding-right: 45px; - min-height: (@modal-title-padding + @modal-title-line-height); - } - & .alert-success { - margin-top: @modal-title-padding; - } -} - -#modal .cart-controls .btn { margin-bottom: 4px; } -#modal .cart-controls .checkbox { padding-bottom: 1rem; } -#modal .form-inline .checkbox fieldset { display: inline-block; } -#modal .cart-controls ~ hr { margin-top: 0; margin-bottom: 0; } -.lightbox-scroll { overflow-y: auto; } - -// Loading spinner -.modal-loading-overlay { - position: absolute; - top: 0; - left: 0; - display: flex; - width: 100%; - height: 100%; - font-size: 150%; - align-items: center; - justify-content: center; - background-color: rgba(0,0,0,0.2); - - .loading-spinner { - padding: 2rem; - background-color: rgba(0,0,0,0.6); - border-radius: @border-radius-large; - color: @gray-lighter; - } -} - -// Utility classes -.lightbox-only { display: none; } -#modal .lightbox-only { display: initial; } diff --git a/themes/finna2/less/finna/mylist.less b/themes/finna2/less/finna/mylist.less deleted file mode 100644 index 7d875e8e4cd..00000000000 --- a/themes/finna2/less/finna/mylist.less +++ /dev/null @@ -1,560 +0,0 @@ -.template-dir-myresearch.template-name-mylist { - @media (max-width: @screen-sm-max) { - &.prevent-scroll { - overflow: hidden; - } - } -} - -.main.template-dir-myresearch.template-name-mylist { - .search-controls { - margin-top: 10px; - margin-bottom: 0px; - hr { - border-top: 1px solid @gray-lighter; - } - } - .bulk-action-buttons-col { - width: 100%; - @media (min-width: @screen-sm-min) { - padding-right: 0; - } - @media (max-width: @grid-float-breakpoint) { - top: @navbar-height; - } - &:not(.fixed) .mylist-functions { - text-align: right; - } - } - .delete-list .dropdown-menu { - z-index: 1500; - } -} - -.template-name-mylist .bulk-action-buttons-col { - padding: 10px; - padding-bottom: 0px; -} - -.mylist-bar, .reservationlist-bar { - h4.visible-xs.visible-sm { - text-transform: none; - } - .list-visibility { - padding: 2px 2px 10px 20px; - background-color: @gray-ultralight; - @media (min-width: @screen-sm-max) { - font-size: 0.8em; - } - .list-url { - font-weight: bold; - word-break: break-word; - a:first-child { - margin-right: 2px; - padding: 2px; - } - .feed { - font-size: 1.2em; - display: inline-block; - color: initial; - } - } - a { - padding: 2px; - } - - .list-visibility-hidden { - margin-left: 10px; - margin-bottom: 5px; - } - } - - li { - max-width: none; - - > a { - padding: 3px 20px; - &.active { - font-weight: bold; - background-color: @gray-ultralight; - } - } - > a:not(.add-new-list) { - color: @text-color; - } - .favorite-list-holder { - height: 25px; - - .favorite-list-title { - max-width: 60%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - margin-right: 5px; - } - - .public-favorite-list { - padding: 2px; - &:before { - line-height: 19px; - } - } - } - } - - .add-new-list-holder { - padding: 0 20px; - margin: 5px 0 10px 0px; - .add-new-list { - border: 1px solid @gray-lighter; - display: -webkit-flex; - display: flex; - border-radius: 2px; - @media (max-width: @screen-sm-max) { - margin-bottom: 25px; - } - input { - width: 90%; - border-radius: 4px; - padding-left: 4px; - border: none; - display: inline-block; - @media (max-width: @screen-sm-max) { - font-size: 16px; - } - } - .list-add-icon { - text-align: right; - width: 20px; - cursor: pointer; - color: @action-link-color; - padding: 1px; - } - } - } -} -.bulk-action-buttons-row { - margin: 0; - border-bottom: 1px solid @gray-lighter; - @media (max-width: @screen-xs-max) { - .make-row(); - } -} - -.bulk-action-buttons-col { - padding: 10px 0; - &.fixed { - margin-top: 0; - min-height: 50px; - top: 0; - background-color: @body-bg; - position: fixed; - padding: 10px 0 10px 10px; - z-index: 11; - box-shadow: 0 0 10px 3px @gray-mid-light; - } -} -.mylist-functions.btn-group { - .btn { - height: 30px; - } - select { - margin-right: -1px; - } -} - -.checkbox-container.mylist-select-all { - float: left; - margin-right: 10px; - line-height: @line-height-computed; - .checkbox { - margin: 0; - } -} - -.list-title { - margin-bottom: 0; - margin-top: 0px; - i.list-title-edit { - margin-bottom: -22px; - } - &.no-edit { - border: 0; - margin-top: 5px; - &:hover { - border: 0; - } - } -} - -.list-public-indicator { - padding-left: 5px; -} - -.resource-note i.fa-pen { - margin-bottom: -18px; -} - -.list-title, .add-new-list { - border: 1px solid transparent; - display: inline-block; - padding: 5px; - width: ~"-webkit-calc(100% - 30px)"; - width: ~"-moz-calc(100% - 30px)"; - width: ~"calc(100% - 30px)"; - width: 100%; - &:hover, &:active, &:focus { - border: 1px solid @gray-lighter; - i { - transition: all 0.2s linear; - color: @gray; - } - } - i { - color: @gray-light; - float: right; - } - span { - width: 100%; - display: inline-block; - word-wrap: break-word; - padding-right: 25px; - input, textarea { - &:focus, &:active { - border: none; - box-shadow: none; - outline: none; - } - } - } -} -.list-title.disable { - &:hover, &:active, &:focus { - border: 1px solid transparent; - cursor: initial; - } -} - -.list-tag() { - font-size: 0.9em; - margin-right: 5px; - margin-bottom: 5px; - padding: 2px 5px; - border: 1px solid @gray-lighter; - background: @gray-ultralight; - border-radius: 5px; -} - -.list-tags { - margin-bottom: 10px; - &.editable .view-tags { - display: none; - } - &:not(.editable) { - display: flex; - align-items: center; - .view-tags { - flex-grow: 1; - .tag { - .list-tag(); - } - } - .ui { - display: none; - } - .edit-tags { - flex-direction: row; - border: none; - .ui { - display: none; - } - .toggle { - border: none; - margin-right: 1px; - margin-top: 1px; - span { - display: none; - } - } - } - } - .tags { - margin-top: 0.5em; - ul { - display: flex; - flex-wrap: wrap; - margin: 0; - } - } - - .edit-tags { - display: flex; - flex-direction: row-reverse; - justify-content: flex-end; - border: 1px solid @gray-lighter; - .info { - font-weight: bold; - color: @brand-danger; - i { - border-radius: 50%; - border: 2px solid @brand-danger; - font-size: 1em; - padding: 1px; - } - } - .fa { - cursor: inherit; - } - .toggle { - border: 2px solid @action-link-color; - cursor: pointer; - height: 100%; - padding: 0.3em; - margin-top: -1px; - margin-right: -1px; - padding-left: 0.5em; - font-size: 0.9em; - white-space: nowrap; - @media (max-width: @screen-xxs-max) { - align-self: flex-end; - white-space: inherit; - - } - i { - margin-left: 5px; - transform: rotate(90deg); - } - } - @media (max-width: @screen-xxs-max) { - flex-direction: column; - } - .ui { - flex-grow: 1; - padding: 10px; - .add-new { - display: flex; - @media (max-width: @screen-xxs-min) { - height: inherit; - flex-wrap: wrap; - input { - margin-bottom: 0.5em; - } - } - .new-tag { - margin-right: 0.5em; - margin-bottom: 5px; - padding-left: 5px; - @media (max-width: @screen-xxs-min) { - width: 100%; - } - } - button { - display: inline-flex; - align-items: center; - line-height: 1em; - margin-bottom: 5px; - } - } - .tags { - .tag { - margin-right: 5px; - display: flex; - align-items: center; - justify-content: space-between; - background: transparent; - border: 2px solid @action-link-color; - color: @action-link-color; - border-radius: @border-radius-small; - font-size: 1em; - padding: 2px 5px; - margin-bottom: 3px; - white-space: nowrap; - & span { - font-weight: bold; - padding-right: 5px; - padding-left: 3px; - } - button { - border: none; - background: transparent; - padding: 0; - .fa { - background: none; - border: 2px solid @action-link-color; - color: @action-link-color; - font-size: 10px; - display: block; - pointer-events: none; - padding: 2px 2px 2px 2.1px; - } - } - } - } - } - form fieldset { - &:disabled { - button { - cursor: default; - } - } - legend { - font-size: 0.9em; - font-weight: normal; - margin-bottom: 0.5em; - border: none; - } - } - } -} - -span.caret { - border: none; - cursor: pointer; -} - -.sortable-favorite-list { - li { - background: @list-group-bg; - padding: 5px 30px 5px 10px; - margin-top: 5px; - border-radius: 3px; - border: 1px solid @gray-lighter; - list-style-type: decimal; - list-style-position: inside; - &:hover { - cursor: move; - } - h4 { - margin: 0; - font-size: 14px; - } - p { - margin-top: 2px; - margin-bottom: 0; - } - .sort-icon { - position: absolute; - right: 2em; - font-size: 1.2em; - } - } - .btn { - margin-bottom: 10px; - margin-right: 10px; - } - @media (max-width: @screen-xs-max) { - margin-left: 5px; - margin-right: 10px; - } -} - -@media (max-width: @screen-sm-max) { - .mylist-mobile.mobile-navigation { - left: 0; - border-top: 1px solid @body-bg; - position: fixed; - height: 44px; - bottom: 0; - z-index: 2; - width: 100%; - background: @sidebar-background; - i { - font-size: 15px; - } - li.sidebar-navigation { - padding: 11px; - color: @sidebar-header-text-color; - font-size: 1.1em; - text-transform: uppercase; - &:hover { - cursor: pointer; - } - } - span.active-filters { - float: right; - max-width: 55%; - } - } -} - -.mylist-header { - display: inline-block; - width: 100%; - .alert { - margin-top: 1em; - } - > p { - margin-left: 6px; - } -} -.mylist-controls { - .control-container { - display: flex; - align-items: center; - .sort-option-container, .limit-option-container, .view-option-container{ - margin-left: 5px; - } - .btn-sort-order { - padding-top: 7px; - padding-bottom: 7px; - } - .sort-option-container { - @media (max-width: @screen-sm) { - a.dropdown-toggle { - white-space: initial; - i.fa-arrow-down { - position: absolute; - top: 30%; - right: 0.7em; - margin-left: 0; - } - } - } - } - } -} -.template-name-list, -.public-list-embed { - .public-list-tags { - margin-top: 5px; - margin-bottom: 5px; - display: flex; - flex-wrap: wrap; - .tag { - .list-tag(); - } - } -} -.public-list-embed { - .show-more { - text-align: center; - > div { - margin-bottom: 10px; - } - } - .savedLists.loaded { - display: none; - } - .controls { - display: flex; - justify-content: flex-end; - margin-top: 10px; - } -} - -.delete-list-btn-wrapper { - position: relative; - padding: 0 0 4px 4px; - .btn-group.open { - .dropdown-menu { - position: absolute; - border-radius: 4px; - border: 1px solid @gray-lighter; - top: 100%; - } - .dropdown-header { - color: inherit; - font-size: 14px; - } - } -} diff --git a/themes/finna2/less/finna/myresearch.less b/themes/finna2/less/finna/myresearch.less deleted file mode 100644 index c5b17891cae..00000000000 --- a/themes/finna2/less/finna/myresearch.less +++ /dev/null @@ -1,1082 +0,0 @@ -.myresearch-row { - padding: 10px; - margin: 0; - word-wrap: break-word; - @media(max-width: @screen-xs-max) { - .make-row(); - } - &:nth-child(odd) { - background: @table-bg-accent; - } - .record-title { - margin: 0; - font-weight: 400; - font-size: 1.2em; - margin-bottom: 2px; - } - .no-checkbox { - font-size: 0.8em; - color: @gray-light; - } - .alert { - padding: 4px; - margin-bottom: 3px; - margin-top: 3px; - } - // row for holds information - .holds-status-information, .checkedout-status-information { - @media(min-width: @screen-sm-min) { - text-align: right; - } - } - .checkbox-container { - padding-left: 0; - .checkbox { - padding-left: 0; - margin-top: 0; - label { - margin-left: 0; - } - } - } - #label-title-column span { - float: right; - } -} - -.useraccount-table.online-payment .checkbox-container { - margin-top: 2px; -} - -.checkbox-container.mylist-select-all { - padding-left: 0; - white-space: nowrap; - - .checkbox { - padding-left: 0; - label { - margin-left: 0; - } - } -} - -.changeHolds { - display: inline-block; -} - -.myresearch-grid-list .cover-image { - max-width: 100px; - max-height: 200px; -} - -.librarycard-barcode { - @media (min-width: @screen-sm) { - margin-bottom: 0.5em; - } - svg { - background-color: white; - padding: .1em; - } -} - -.loan-history-purge-all, .button-bottom { - margin-top: 10px; -} -.loan-history-buttons-bottom { - display: flex; -} - -.myresearch-table { - width: 100%; - margin: 0; - th,td { - vertical-align: top; - padding: 5px; - } - .recordcover { - min-width: 30px; - } - .toolbar { - display: flex; - flex-direction: row; - align-items: center; - &.no-list-functions { - justify-content: space-between; - align-items: baseline; - @media(max-width: @screen-xs-max) { - flex-direction: column-reverse; - align-items: flex-start; - } - .myresearch-notification { - height: fit-content; - } - } - .btn-finna-toolbar { - margin: 3px 0px; - @media (max-width: @screen-sm-max) { - font-size: 0.9em; - } - } - .btn-group { - margin-right: 20px; - .btn { - margin-right: 1px; - &:last-child { - margin-right: 0; - } - } - &:last-child { - margin-right: 0; - } - @media(max-width: @screen-xs-max) { - margin-right: 10px; - } - } - .checkbox-col { - display: flex; - align-items: baseline; - padding: 5px; - } - .list-functions { - display: flex; - flex-direction: row; - flex-basis: 100%; - align-items: baseline; - justify-content: space-between; - } - @media(max-width: @screen-xs-max) { - align-items: baseline; - } - } - .sort-button ul.dropdown-menu li a { - font-size: 1em; - } - - @media(min-width: @screen-sm) { - .half-table-column { - width: 50%; - float: left; - } - .title-column{ - width: 60%; - float: left; - } - .status-column{ - width: 40%; - float: left; - } - } - .myresearch-count { - line-height: 35px; - font-weight: bold; - &.no-buttons { - line-height: inherit; - } - } -} - -.myresearch-notes { - clear: both; - margin-top: 10px; -} -.myresearch-notes a, .myresearch-notes i { - color: @gray-light; -} -.row.record-container.myresearch-row:last-child { - margin-bottom: 20px; - box-shadow: 0px 15px 30px -25px @gray; -} - -.myresearch-grid-list { - margin-bottom: 20px; - > h2 { - margin-top: 0; - border-bottom: none; - padding: 10px; - padding-bottom: 0px; - margin-bottom: 0px; - } - > h4 { - margin-left: 10px; - } - .myresearch-row:last-child { - box-shadow: none; - } - #copyToFavourites { - padding-top: 5px; - } - .alert { - margin: 12px 0; - } - .sort-option-container { - display: flex; - align-items: baseline; - .button-label { - margin-right: 5px; - } - } - .sort-col { - a.dropdown-toggle { - margin-bottom: 0; - height: 30px; - font-size: 0.9em; - @media (max-width: @screen-md) { - margin-top: 6px; - } - @media (max-width: @screen-sm) { - span { - max-width: 200px; - } - } - } - @media (max-width: @screen-sm) { - .dropdown-menu > li > a { - max-width: 270px; - } - .dropdown-toggle span:not(.icon), .dropdown-menu > li > a { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: inline-block; - vertical-align: bottom; - } - } - } - -} -.list-description, -.public-list-desc, -.myresearch-notes, -.template-dir-list .notes, -.public-list-embed .notes { - details { - margin-bottom: 10.5px; - outline: 1px solid #d1d1d1; - background: white; - padding-left: 5px; - p { - padding-left: 5px; - } - summary::-webkit-details-marker { - display: none; - } - summary:before { - content: ' '; - border: solid @gray; - border-width: 0 2px 2px 0; - display: inline-block; - padding: 0 5px 5px 0; - transform: rotate(45deg); - margin-right: 10px; - margin-top: 5px; - margin-bottom: 3px; - } - summary { - display: block; - margin-right: 0; - outline: 1px solid #d1d1d1; - background: #fafafa; - padding: 10px; - margin-left: -5px; - p { - display: inline; - padding-left: 0; - } - } - } - details[open] { - padding-bottom: 5px; - summary::before { - transform: rotate(-135deg); - margin-bottom: 0; - margin-top: 10px; - } - summary { - margin-bottom: 10px; - } - } - .truncate-field.truncate-done { - div:first-child { - padding-top: 5px; - } - details { - margin-left: 1px; - margin-right: 1px; - } - } - .more-link, - .less-link { - margin-bottom: 15px; - } -} -// Custom styles for user account functions -.template-dir-myresearch, .template-dir-holds, .template-dir-checkouts.template-name-history, .template-dir-search.template-name-history, .template-dir-librarycards { - &.main { - padding-bottom: 30px; - } - h1 { - font-weight: 500; - } - .my-research-content { - width: 100%; - border-radius: @border-radius-base; - @media (max-width: @screen-sm) { - .select-card-wrapper .select-card .library_card { - right: auto; - left: 0; - max-width: 250px; - & li > a { - white-space: normal; - } - } - } - } - h1 { - display: inline-block; - } - #account-actions { - margin-bottom: 20px; - #import-export-buttons { - margin-right: 20px; - } - .btn { - margin-bottom: 5px; - } - } - .pickup-location { - margin-top: 3px; - margin-bottom: 3px; - } - .pickup-locations { - overflow-y: auto; - max-height: 280px; - left: auto; - max-width: 280px; - overflow-x: hidden; - position: absolute; - right: 0; - @media(max-width: @screen-xs-max) { - left: -40px; - right: auto; - } - a { - cursor: pointer; - } - } - #card_name { - width: 205px; - } - .tooltip-library-card-name { - background: none; - border: none; - } - - .resource-note { - margin-left: -5px; - } - - .checkbox-container label.checkbox { - padding-left: 5px; - color: @gray-light; - } - @media(max-width:@screen-md-max) { - .pagination-simple { - margin-top: 0; - } - } - .pagination-simple { - margin-left: 5px; - } - .no-padding-table { - th, td { - padding: 8px 0; - vertical-align: middle; - } - th { - width: 25%; - } - td { - width: 75%; - } - } - - p.no-content-message { - margin-top: 5px; - } - .borrowing-block-container { - p.borrowing-block { - padding: 0; - margin-bottom: 0; - } - } - .support-notice { - margin: 0; - margin-top: 5px; - padding: 10px 15px; - } - - .library-card-terms { - background-color: @state-info-bg; - padding: 2em; - padding-left: 2.5em; - margin-bottom: 1em; - } - - .profile-status i::before { - display: inline-block; - } -} - -.useraccount-header { - display: flex; - justify-content: space-between; - margin-top: 5px; - margin-bottom: 5px; - @media (max-width: @screen-md-max) { - margin-top: 10px; - } - h2, h3 { - line-height: 1.5; - font-weight: 600; - margin-top: 0; - margin-bottom: 10px; - } - h2 { - font-size:@font-size-h2; - } - h3 { - font-size: @font-size-h4; - } - .list-title { - font-size: @font-size-h2; - } - a.dropdown-toggle { - font-size: 0.9em; - height: 30px; - } -} -.sort-col.sort-col-mobile { - @media(min-width: @screen-sm) { - display: none; - } -} - -.toolbar .list-functions .sort-col { - @media(max-width: @screen-xs-max) { - display: none; - } - } - -.online-payment-form > .payment-row { - .online-payment-area { - display: inline-block; - margin-bottom: 15px; - - .online-payment-form { - display: inline-block; - input { - font-weight: bold; - } - } - } - @media (min-width: @screen-sm) { - > img { - position: relative; - bottom: 100px; - float: right; - } - } - @media (max-width: @screen-sm-min) { - position: -webkit-sticky; - position: sticky; - top: 64px; - background-color: white; - width: 100%; - padding: 12px 0px; - input[type=submit] { - margin-top: 10px; - } - > img { - width: 15%; - min-width: 40px; - max-width: 60px; - margin-top: 10px; - } - } -} - -.myresearch-table.online-payment { - .checkbox-col { - width: initial; - } - .toolbar { - border: 0; - padding-bottom: 0; - padding-left: 4px; - } -} - -.fines-info-area { - margin-bottom: 15px; - div.card-holder { - display: flex; - align-items: center; - font-weight: bold; - } - .amount { - font-weight: bold; - } - .online-payment-info { - display: flex; - align-items: baseline; - } - #online_payment_minimum_payment { - margin: 0 0 0 1em; - padding: 6px; - } - .last-transaction-information { - &:extend(.alert); - - background: @gray-ultralight; - border: 1px solid @gray-lighter; - display: flex; - align-items: center; - div { - flex: 1 1; - } - } -} - -.toolbar-sticky-container { - margin: 0; - @media (max-width: @screen-md) { - padding: 0px 15px; - .make-row(); - } - .toolbar-sticky { - position: sticky; - top: 0; - z-index: 1; - background-color: @body-bg; - &.isSticky { - margin: 0px -15px; - padding: 0px 15px; - @media (max-width: @screen-md) { - top: @navbar-height; - } - @media (max-width: @screen-sm) { - box-shadow: 0 3px 3px rgba(0,0,0,.3); - .toolbar { - border-bottom: none; - } - } - } - } -} - -.myresearch-table.online-payment .toolbar { - align-items: center; - margin-bottom: 1rem; - - .checkbox-container.mylist-select-all { - margin-right: 1rem; - } -} - -.template-dir-myresearch .toolbar, .template-dir-checkouts .toolbar, .template-dir-holds .toolbar { - margin: 0; - margin-top: 5px; - border-bottom: 1px solid @gray-lighter; - padding: 3px 0; - @media(max-width: @screen-sm-max) { - margin-top: 0; - } - .status-text { - float: right; - line-height: 38px; - } - &.bottom { - border-top: 1px solid @gray-lighter; - border-bottom: none; - td { - vertical-align: middle; - &:first-child { - vertical-align: top; - padding-top: 10px; - } - &:nth-child(2) { - width: 100%; - } - } - } -} - -form#renewals, form#update_holds, form#purge_history { - .toolbar { - @media (max-width: @screen-xs) { - flex-direction: column-reverse; - } - } -} - -.online-payment-data { - font-size: 1.2em; - margin-bottom: 40px; - padding-right: 8px; - @media (min-width: @screen-sm) { - width: 50%; - float: right; - } - .amount { - font-weight: bold; - } -} - -.online-payment-note { - margin-bottom: 40px; - @media (min-width: @screen-sm) { - width: 50%; - float: left; - } -} - -.useraccount-table { - border: 1px solid @gray-lighter; - box-shadow: 0 15px 30px -35px @gray; - border-collapse: separate; - margin-top: 10px; - - &:not(.fines-table) { - border-top: none; - } - &.online-payment { - margin-bottom: 15px; - td { - @media (max-width: @screen-xs-max) { - white-space: normal !important; - } - } - } - &.library-cards { - @media (max-width: @screen-xs-max) { - table-layout: fixed; - } - } - .headers { - background: @gray-ultralight; - color: @text-color; - } - .headers th { - background: none; - border-top: 1px solid #d1d1d1; - &:last-child { - border-right: none; - } - } - td { - border-right: 1px solid @body-bg; - vertical-align: middle; - &:last-child { - border-right: none; - } - } - .user-account-table-title { - min-width: 25%; - @media (max-width: @screen-xs-max) { - white-space: normal !important; - min-width: 30%; - } - } - .total-balance { - background: none; - border-top: 2px solid @gray-lighter; - text-align: right; - line-height: 2em; - font-size: 1.2em; - .amount { - font-weight: bold; - } - } - @media screen and (min-width: 769px) { - .balance { - text-align: right; - } - } - .online-payment-remark { - font-weight: bold; - } - tr.payment-data>th { - background: @body-bg; - } - th { - font-size: 1.1em; - } - .history-time { - width: 20%; - } - .history-save { - text-align: center; - width: 15%; - a { - color: @action-link-color; - } - } - .history-results { - width: 15%; - } - .actions { - width: 15%; - } - .library-card-actions a { - display: block; - margin: 4px 0; - } - td.history-search-index, td.history-schedule .disable { - color: @gray-light; - font-size: .9em; - } -} - -.myresearch-body { - margin-top: 15px; - @media (max-width: @screen-sm-max) { - margin-top: 0px; - &.mainbody.right { - padding-left: 0px; - } - .bulkActionButtons.bulk-action-buttons-col { - padding-right: 3px; - } - } -} - -.useraccount-nav { - border: solid 1px @gray-lighter; - border-top: none; - box-shadow: 2px 2px 3px 0 @gray-lighter; - display: block; - z-index: 2; - margin-top: 15px; - - .status { - padding-left: 5px; - } - .dropdown-menu { - border-left: none; - border-right: none; - .box-shadow(none); - padding: 0; - > li { - border: none; - } - .active a { - font-weight: 600; - text-decoration: none; - color: @dropdown-link-color;; - background-color: @gray-ultralight; - } - } - @media (min-width: @screen-md) { - &.move-list { - position: -webkit-sticky; - position: sticky; - top: 30px; - } - } - .subtabs.mylist-nav { - border-top-width: 0px; - li.hidden-xs.hidden-sm, li.mylist-menu-favorites { - max-width: none; - h4 { - text-transform: none; - @media (max-width: @screen-sm-max) { - text-align: center; - } - } - } - li:first-child { - a { - padding-top: 9px; - } - } - } - - &.list-group { - border-radius: 4px; - } - li { - border-top: 1px solid @gray-lighter; - float: left; - width: 100%; - &:first-child { - border-top: none; - } - &.menu-header { - background-color: @brand-third; - > h1 { - text-transform: none; - color: @myresearch-menu-header-font-color; - padding: 15px 12px 15px 10px; - display: block; - margin-bottom: 0px; - span { - float: right; - > i { - color: @myresearch-menu-header-font-color; - font-size: 25px; - margin-top: -4px; - cursor: pointer; - } - } - } - } - li > a { - padding-left: 20px; - } - a { - padding: 12px 10px; - margin-right: 0px; - &#open-loans { - display: flex; - align-items: center; - span { - cursor: pointer; - &.caret { - margin-left: auto; - } - } - } - - &:not(.collapsed) { - > .icon.collapse-icon { - transform: rotate(180deg); - -ms-transform: rotate(180deg); - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - } - } - } - @media (max-width: @screen-md-max) { - font-size: 14px; - a { - padding: 10px; - } - } - .tooltip-myaccount { - background: initial; - border: none; - float: right; - padding: 0; - margin: 0; - > .icon { - color: white; - cursor: pointer; - margin: 0; - padding: 0; - } - } - } -} - -// Status badges -.myresearch-menu, #my-info-dropdown-menu { - a { - display: flex; - justify-content: space-between; - &.flex { - display: flex; - } - &:hover { - background-color: @gray-lighter; - } - &:focus { - background-color: @nav-link-hover-bg; - } - &.user-list-link i { - margin-left: 0.5rem; - } - &.active { - background-color: @brand-primary; - color: #fff; - } - } - - .status { - float: right; - .badge { - border-radius: 2px; - margin: 0 2px; - border: 1px solid; /* color inherited from bootstrap */ - height: 22px; - padding: 0 7px; - - &.account-info { - color: @state-success-text; - background-color: @state-success-bg; - } - &.account-warning { - color: @state-warning-text; - background-color: @state-warning-bg; - } - &.account-alert { - color: @state-danger-text; - background-color: @state-danger-bg; - } - } - } -} - -// Search history -.history-holder { - .table-responsive .table tbody { - tr, td { - vertical-align: middle; - } - } -} - -.useraccount-confirm { - min-width: 210px; -} -.useraccount-confirm > li { - border-bottom: none; - &:not(.disabled), &:not(.dropdown-header) { - width: 100%; - padding: 10px; - a { - width: 80px; - text-align: center; - border-radius: @border-radius-base; - background: @link-color; - color: @body-bg; - display: inline-block; - margin-right: 10px; - } - } - .dropdown-header { - max-width: 300px; - font-size: 1em; - padding: 0; - white-space: initial; - } -} -.main.template-dir-myresearch.template-name-unsubscribe { - .unsubscribe { - margin-bottom: 20px; - } -} -.template-dir-librarycards .dropdown-menu.useraccount-confirm { - left: auto; - right: 0; - top: auto; -} -.template-dir-myresearch .toolbar > .btn-group:last-of-type .dropdown-menu.useraccount-confirm { - @media (max-width: @screen-xs-max) { - left: auto; - right: 0; - } -} -.myresearch-body .form .mylist-functions { - #button_email { - border-radius: 4px 0 0 4px; - } - #add-to-list { - box-shadow: none; - text-align: left; - } -} - -.own-favorite-list-button-area { - display: block; - float: left; - height: 36px; - width: 100%; - margin-bottom: 10px; -} - -.history-controls { - @media (min-width: @screen-sm) { - display: flex; - flex-direction: row-reverse; - align-items: baseline; - } - .right-control { - @media (max-width: @screen-sm) { - text-align: right; - float: right; - width: 50%; - } - } - .left-control { - margin-bottom: 10px; - - @media (min-width: @screen-sm) { - flex-grow: 1; - text-align:left; - } - @media (max-width: @screen-sm) { - text-align: left; - width: 35%; - } - } - .pagination-container { - @media (min-width: @screen-sm) { - flex-grow: 1; - text-align:left; - } - } -} - -@media(max-width: @screen-sm-max) { - .hidden-print.nav-tabs-personal.list-group { - position: fixed; - top: 120%; - transition: top 0.5s ease; - background: @body-bg; - z-index: @zindex-sidebar; - width: 100%; - height: 100%; - overflow-y: scroll; - -webkit-overflow-scrolling: touch; - padding-left: 0px; - padding-right: 0px; - padding-bottom: 40px; - &.open { - top: 0%; - right: 0; - } - .list-group.facet:last-child { - margin-bottom: 44px; - } - .list-group-item.active i.fa.fa-check-square-o:before { - content: "\f00c" !important; - } - .list-group.facet { - margin: 0 10px; - margin-bottom: 5px; - } - } -} - -.template-dir-myresearch.template-name-checkedout .pagination-container { - padding-top: 15px; -} - -.message-body { - margin: 5px; -} - -.delete-all-tokens { - margin: 10px; -} - -.login-tokens-section.library-profile { - padding: 10px; -} - -.login-tokens-table { - margin-bottom: 0px; - tbody > tr > td { - vertical-align: middle; - } -} diff --git a/themes/finna2/less/finna/navigation.less b/themes/finna2/less/finna/navigation.less deleted file mode 100644 index 9eed4387b4f..00000000000 --- a/themes/finna2/less/finna/navigation.less +++ /dev/null @@ -1,310 +0,0 @@ -.swipe-arrow-navigation { - position: fixed; - width: 50px; - height: 50px; - background: @link-color; - top: 50%; - color: @body-bg; - border-radius: 50%; - &.arrow-navigation-left { - left: 0px; - border-top-left-radius: 0px; - border-bottom-left-radius: 0px; - } - &.arrow-navigation-right { - right: 0px; - border-top-right-radius: 0px; - border-bottom-right-radius: 0px - } - .fa-arrow-right, .fa-arrow-left { - color: @body-bg; - top: 10px; - left: 8px; - position: absolute; - font-size: 30px; - } -} - -@media (max-width: @screen-md-max) { - .finna-navbar .nav >li>a { - padding: 0 6px; - } -} - -// fix navbar for logoutoptions -.finna-navbar .navbar-nav .logoutOptions { - @media(max-width: @screen-sm) { - margin: 0; - } - .dropdown-menu { - left: auto; - > li { - > a { - color: @text-color; - width: 250px; - .icon { - padding-top: 3px; - } - } - } - @media (max-width: @screen-xxs) { - right: -30px; - } - } - .username { - display: inline-block; - max-width: 150px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - vertical-align: top; - @media (max-width: @screen-sm) { - max-width: 80px; - } - @media (max-width: @screen-xxs) { - .sr-only(); - } - } - .description { - font-size: 0.9em; - line-height: 1.2em; - } -} - -@media(max-width: @grid-float-breakpoint) { - #loginOptions button { - background-color: @body-bg; - a { - color: @action-link-color; - } - } -} - -// content-navigation-menu -.main.template-dir-content.template-name-content .content-navigation-menu { - margin: 20px 0px; -} - -.dropdown-toggle:focus { - outline: 1px dotted #212121; - outline: 5px auto -webkit-focus-ring-color; -} - -.finna-navbar { - .navbar-nav > li > a, - .navbar-collapse.in .dropdown-menu a { - color: @header-text-color; - padding: 0 10px; - } - // remove exclamation mark from fines row - .fines-status .badge.overdue { - &:before { - content:""; - } - } -} - -/* Finna breadcrumbs */ - -.breadcrumbs { - background-color: @breadcrumb-bg; - display: none; -} -.template-name-cites, .template-name-citedby { - .breadcrumbs { - display: block; - font-weight: 600; - .breadcrumb { - padding-left: 0; - } - } -} -/* #SCSS> -@if ($breadcrumbs == true) { - .breadcrumbs { - display: block; - } - .record.record-row { - margin-top: 0; - } -} -<#SCSS */ -/* #LESS> */ -.breadcrumbs when (@breadcrumbs = true) { - display: block; -} -.record.record-row when (@breadcrumbs = true) { - margin-top: 0; -} -/* <#LESS */ -.breadcrumb { - border-radius: 0; - margin-bottom: 0; -} - -/* End of Finna breadcrumbs */ - -#my-info-dropdown-menu { - width: 280px; - background-color: @body-bg; - margin-top: 0; - .box-shadow(0 6px 12px rgba(0, 0, 0, .275)); - - .card-selection { - @media (max-width: @screen-sm-max) { - overflow-y: auto; - overflow-x: hidden; - height: 100%; - max-height: 200px; - } - p { - padding-left: 15px; - margin-bottom: 0px; - } - #select-card-label-dropdown { - display: none; - } - > a { - justify-content: left; - } - > a:not(.card-header) { - padding-left: 32px; - } - .icon { - margin-left: -1.25em; - color: @brand-primary; - } - } - > li { - border-bottom: 1px solid @gray-lighter; - line-height: 30px; - cursor: pointer; - - > ul { - line-height: 20px; - > li > a { - text-indent: 5%; - li { - height: 25px; - } - } - } - a { - width: 100%; - &:hover { - text-decoration: none; - color: @dropdown-link-hover-color; - background-color: @dropdown-link-hover-bg; - } - .sign-out-icon { - font-size: 1.2em; - line-height: 1em; - } - } - } - - > li:last-child > a, li:last-child { - border-bottom: none; - } -} - -// Default styling of Finna Jump menus -.jumpMenuForm { - height: 38px; - label { - font-weight: normal; - margin-left: 10px; - } -} -.jump-menu-style { - padding: 0; - position: relative; - width: auto; - z-index: 1; - display: inline-block; - min-width: 60px; - select { - background-color: transparent; - border: 0 none; - box-shadow: none; - display: block; - font-size: 100%; - font-weight: 600; - line-height: 1em; - margin: 0; - width: 100%; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - &:focus { - outline: none; - box-shadow: none; - } - } - option { - background: @body-bg; - color: @gray; - padding: 5px; - &:hover { - background-color: @gray-light; - } - } - - &:before { - display: block; - font-size: 1em; - height: 100%; - padding: 0 20px 0px 2px; - position: absolute; - top: 0; - right: 0px; - text-align: center; - width: 1em; - z-index: -1; - } - &.controls { - border-radius: @finna-button-radius; - background-color: @brand-primary; - padding-top: 0px; - transition: background-color .1s linear; - option:checked { - background: @btn-primary-bg; - color: @body-bg; - } - } - &.controls:before { - transition: background-color .1s linear; - background: @btn-primary-bg; - border-top-right-radius: 10px; - border-bottom-right-radius: 10px; - color: @body-bg; - line-height: 40px; - } - &.disabled { - .opacity(0.5); - } -} -.jump-menu-style select::-ms-expand { - display: none; /* to ie 10 */ -} -:-moz-any(.prefilter-select,.jump-menu-style.controls):before { - background-color: @body-bg; /* this is necessary for overcome the caret default browser */ - pointer-events: none; /* https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events */ - z-index: 1; /* this is necessary for overcome the pseudo element */ -} - -@media(min-width: @grid-float-breakpoint) { - .finna-navbar { - display: flex; - .navbar-collapse { - flex: 1 1 100%; - display: flex !important; // Needed to override bootstrap defaults - } - } -} - -header { - box-shadow : 0 1px 0 1px rgba(0,0,0,0.1); - z-index: @zindex-header; - position: relative; -} diff --git a/themes/finna2/less/finna/ontology.less b/themes/finna2/less/finna/ontology.less deleted file mode 100644 index 03e5d9a201e..00000000000 --- a/themes/finna2/less/finna/ontology.less +++ /dev/null @@ -1,26 +0,0 @@ -.ontology-recommendation { - li { - display: inline; - } - li:after { - content: ','; - } - li:last-child:after { - content: none; - } - a { - text-decoration: underline; - } - .recommendation-label { - display: inline-block; - float: right; - margin-left: 10px; - margin-bottom: 5px; - border-radius: 3px; - padding: 3px 5px; - font-size: 0.8em; - color: @alert-info-bg; - background-color: @alert-info-text; - } -} - diff --git a/themes/finna2/less/finna/organisation-info.less b/themes/finna2/less/finna/organisation-info.less deleted file mode 100644 index 5e00daca62f..00000000000 --- a/themes/finna2/less/finna/organisation-info.less +++ /dev/null @@ -1,934 +0,0 @@ -// *** Common styles for organisation info page and widget *** -@organisation-info-max-w: 400px; - -.organisation-info { - .finna-panel { - .panel-collapse, .panel-body { - outline: 0; - } - } - - .location-is-open { - color: green; - } - .location-is-closed { - color: #c33b00; - } - - .js-week-navi { - text-align: center; - font-weight: bold; - margin-bottom: 10px; - font-size: 1.1em; - @media (max-width: @screen-sm-max) { - max-width: @organisation-info-max-w; - } - .js-week-navi-btn { - margin: 0; - border: 0; - padding: 0; - } - .js-week-text { - display: inline-block; - margin: 0 4px; - } - .js-loader { - // Make sure displaying the spinner doesn't shift other elements around: - position: absolute; - } - } - - .js-opening-times { - padding-bottom: 20px; - - .js-opening-times-week { - display: flex; - flex-flow: column nowrap; - font-size: 1.0em; - width: 100%; - margin-bottom: 20px; - @media (max-width: @screen-sm-max) { - max-width: @organisation-info-max-w; - } - .date-rows { - padding: 5px; - &:not(:last-child) { - border-bottom: 1px solid @gray-lighter; - } - &.today { - background: @gray-lighter; - font-weight: bold; - } - &.museum { - .time-row { - .date-container { - display: none; - } - } - } - - .time-row { - display: flex; - flex-flow: row nowrap; - gap: 4px; - width: 100%; - line-height: 1.26em; - - &.sub-row { - padding-top: 3px; - color: @gray-light; - font-size: .94em; - } - - .date-container { - flex: 1 0 20%; - display: flex; - flex-flow: nowrap; - padding-right: 5px; - .name { - padding-left: 5px; - } - } - .description { - flex: 1 1 60%; - display: flex; - padding-left: 10px; - - .info { - padding-left: 10px; - } - } - .time-container { - flex: 1 0 20%; - display: flex; - flex-flow: nowrap; - .times, .closed-today { - width: 100%; - display: inline-flex; - justify-content: end; - gap: 2px; - } - } - } - .name.staff { - color: @gray-light; - } - } - } - - .location-is-open, .location-is-closed { - float: right; - margin-top: 8px; - margin-right: 3px; - } - - .schedules-info { - margin-top: 20px; - margin-bottom: 10px; - @media (max-width: @screen-sm-max) { - max-width: @organisation-info-max-w; - } - } - - .mobile-schedules { - font-size: 1.1em; - } - } -} - -// *** Organisation info page *** -.organisation-info-page { - padding-bottom: 25px; - - h2 { - font-size: @font-size-large + 3px; - } - - .consortium-info { - margin-bottom: 20px; - - h3 { - font-size: @font-size-large + 17px; - margin-top: 0; - } - - .consortium-logo { - float: left; - width: 28%; - img { - max-width: 100%; - max-height: 150px; - margin-right: 30px; - } - @media (max-width: @screen-xs-max) { - margin-bottom: 10px; - margin-right: 0px; - float: none; - } - } - - .description { - width: 70%; - float: right; - max-width: 900px; - @media (max-width: @screen-xs-max) { - float: none; - width: 100%; - } - } - .organisation-info-panel { - width: 70%; - float: right; - margin-top: 20px; - margin-bottom: 0; - @media (max-width: @screen-xs-max) { - float: none; - width: 100%; - } - } - - .consortium-search-usage { - margin-bottom: 9.5px; - float: right; - width: 70%; - margin-top: 15px; - @media (max-width: @screen-xs-max) { - float: none; - width: 100%; - } - .gauge-meter { - margin-top: -15px; - float: right; - width: 50%; - #finna-coverage-gauge { - float: left; - @media (min-width: @screen-sm-min) { - margin-left: -20px; - } - } - .gauge-value { - margin-top: 15px; - position: absolute; - margin-left: -54px; - font-weight: bold; - } - .gauge-label { - margin-top: 15px; - position: absolute; - } - @media (max-width: @screen-md-max) { - display: block; - float: none; - margin-top: 20px; - } - } - } - - &.no-logo { - .description { - padding-left: 0; - width: 100%; - float: none; - } - .consortium-search-usage, #collapse-usage, #collapse-links { - float: none; - } - .organisation-info-panel { - float: none; - } - } - - .consortium-info-row { - display: table; - width: 100%; - } - - .consortium-usage-rights { - .usage-rights-text { - margin-bottom: 10px; - .no-info { - font-weight: bold; - margin-bottom: 5px; - } - } - } - } - .consortium-notification { - background-color: @gray-lighter; - padding: 10px; - font-weight: bold; - margin-top: 10px; - margin-bottom: 10px; - } - - .location-information { - margin-bottom: 2rem; - - @media (min-width: @screen-sm-min) { - display: flex; - gap: 1rem; - } - - .js-location-loader { - margin-top: 1rem; - // Make sure displaying the spinner doesn't shift other elements around: - position: absolute; - } - - .js-location-quick-information { - margin-top: 20px; - margin-bottom: 20px; - flex: 1 1 50%; - - .location-description { - margin-top: 10px; - color: @gray-light; - margin-bottom: 0; - } - h2 { - margin: 0; - padding: 0 !important; - } - h3 { - margin-top: 0; - } - .open-closed-info { - margin-top: 0.5em; - margin-bottom: 0.5em; - } - } - - .js-location-info-map { - display: flex; - flex: 1 1 50%; - - .location-map { - width: 100%; - } - - .map { - margin-top: 5px; - position: relative; - clear: both; - - .js-map-widget { - z-index: 0; - height: 320px; - width: 100%; - } - - .leaflet-container { - .leaflet-top { - .leaflet-bar { - z-index: initial; - } - } - } - - .map-bubble { - .js-name { - font-size: @font-size-small + 2px; - margin-top: 10.5px; - margin-bottom: 10.5px; - min-width: 120px; - max-width: 200px; - } - } - - .marker { - cursor: pointer; - } - - .map-marker-text, .marker { - font-size: 1.5em; - padding-right: 5px; - } - - .js-marker-tooltip { - position: absolute; - color: @gray; - background: @body-bg; - padding: 5px; - border: 1px solid lightgray; - opacity: 0.9; - z-index: 1000; - } - } - .expand-map, .contract-map { - display: inline-block; - font-size: 1em; - .icon { - margin-left: 20px; - margin-right: 0px; - } - @media (max-width: @screen-xs-max) { - margin-left: -3px; - font-size: 1em; - .icon { - margin-right: 2px; - } - } - } - .js-map-controls { - text-align: right; - button[disabled] { - color: @gray; - } - } - - .map-marker-icon { - &.open { - color: #339911; - } - &.closed { - color: #c33b00; - } - &.no-schedule { - color: #535353; - } - } - } - } - - .times, .shift { - display: inline-flex; - gap: 2px; - } - - .locations-title { - padding: 10px; - } - - .location-filters { - display: flex; - flex-wrap: wrap; - gap: 1rem; - align-items: center; - - .location-selection { - max-width: 30rem; - margin-right: 1rem; - } - - .js-location-unavailable { - margin-top: 10px; - position: absolute; - } - - .js-location-search-container { - flex-basis: 60%; - - .js-location-search-toggle { - padding: 2px 8px; - font-weight: normal; - - &[aria-expanded=false] { - .search-collapse { - display: none; - } - & ~ div { - display: none; - } - } - &[aria-expanded=true] .search-expand { - display: none; - } - } - - .js-location-search { - // Styling alike .dropdown-menu: - border: 1px solid @dropdown-border; - .box-shadow(0 6px 12px rgba(0, 0, 0, .275)); - position: absolute; - background: @gray-ultralight; - z-index: 1001; - margin-right: 1em; - max-width: calc(100% - 2em); - - .js-location-search-fields { - padding: 1.5rem 1rem 0.5rem 1rem; - border-bottom: 1px solid @gray-lighter; - - .input-row { - display: flex; - gap: 1rem; - flex-wrap: wrap; - margin-bottom: 1rem; - - .service-type-container { - flex: 1 1 60%; - } - .service-location-container { - min-width: 150px; - } - - label { - font-weight: normal; - } - } - } - - .js-results-loader { - width: 100%; - padding: 1rem; - background: @body-bg; - } - - .js-location-search-results { - max-height: calc(100vh - 170px); - overflow-y: scroll; - - .location-search-result { - padding: 1rem; - display: flex; - gap: 1rem; - - &:nth-child(odd) { - background: @body-bg; - } - - .location-search-result-main { - flex: 1; - - .distance { - color: @brand-success; - } - } - - .open-or-closed { - text-align: right; - } - } - } - } - } - } - - .location-details { - margin-top: 1em; - - @media (max-width: @screen-xs-max) { - // Override negative margins of .row on narrow screens: - margin-left: 0; - margin-right: 0; - } - - .finna-panel { - clear: both; - margin-bottom: 1rem; - &.js-opening-times { - .panel-title { - @media (max-width: @screen-xs-max) { - max-width: none; - } - } - .panel-body { - padding-left: 0; - padding-right: 0; - } - } - p { - margin-bottom: 0 !important; - padding-bottom: 0; - overflow-wrap: break-word; - } - img { - margin-bottom: 5px; - margin-top: 1em; - } - .location-description { - font-weight: normal; - margin-top: 1em; - overflow: hidden; - min-height: 5px; - > * { - display: inline-flex; - } - } - .building-year, .building-name { - font-size: 0.9em; - } - .feed-container { - margin-bottom: 10px; - .list-feed.with-image { - img { - max-width: 30%; - } - span.date { - position: inherit; - } - .text, .title, .xcal { - width: 65%; - line-height: 1.5em; - } - .xcal-fields { - width: 65%; - float: right; - font-size: 85%; - margin-bottom: 1em; - } - .xcal { - float: none; - } - .text { - max-height: 12em; - overflow: hidden; - margin-bottom: 20px; - } - .title { - margin-top: -3px; - } - } - } - } - - .js-opening-times { - padding-bottom: 0; - } - - .email-contact, .address-contact, .phone-numbers, .mail-address-contact { - margin-bottom: 12px; - > span:first-child { - display: inline-block; - margin-top: 0; - margin-bottom: 0.5rem; - font-weight: bold; - text-transform: uppercase; - } - - ul:not(.contact-info) { - li { - margin-left: 2rem; - margin-bottom: 0.5rem; - .icon { - width: 2rem; - margin-left: -2rem; - } - } - } - } - .contact-name { - font-weight: bold; - } - - .service-list div { - line-height: 2em; - break-inside: avoid-column; - page-break-inside: avoid; - .tooltip-inner { - line-height: 1.5em; - } - > strong { - text-transform: uppercase; - } - } - .location-row-general { - @media (min-width: @screen-sm-min) { - display: flex; - justify-content: space-between; - } - } - .location-col { - position:relative; - - @media (min-width: @screen-sm-min) { - width: 32%; - float: left; - } - } - .personnel { - table { - th, - td { - width: 50%; - } - th:nth-of-type(2), - td:nth-of-type(2) { - display: none; - } - .job-title { - display: block; - } - } - @media (min-width: @screen-sm-min) { - table { - th, - td { - width: calc(100%/3); - } - th:nth-of-type(2), - td:nth-of-type(2) { - display: table-cell; - } - .job-title { - display: none; - } - } - } - } - .accessibility-details { - .panel-body { - padding-bottom: 15px; - } - .accessibility-group-heading { - font-size: 1.5em; - } - .accessibility-group-statements p { - padding-bottom: 0.8em; - } - } - .services { - .service-header { - font-size: 1.5em; - } - @media (min-width: @screen-sm-min) { - width: 100%; - display: inline-block; - } - .service-list { - column-count: 1; - @media (min-width: @screen-sm-min) { - column-count: 3; - } - .service-tooltip { - color: @link-color; - text-align: left; - text-decoration: none; - background-color: inherit; - border: none; - padding: 0; - } - } - } - - .info .js-schedules .no-schedules { - margin: 10px; - font-size: 1.1em; - font-weight: bold; - } - - .info-element { - @media (max-width: 375px) { - clear: both; - } - @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { - clear: both; - } - } - .address { - margin-top: 5px; - letter-spacing: .3px; - @media (max-width: 336px) { - clear: both; - } - } - } -} - -// *** Widget *** - -.organisation-info-widget { - display: inline-block; - padding-bottom: 20px; - width: 100%; - - .js-open-status { - // Let the status drop down on narrow screens: - float: right; - .location-is-open, .location-is-closed { - font-size: 1.45em; - font-weight: bold; - margin-left: 1rem; - } - } - - .btn { - background: @link-color; - border-radius: 0px; - margin-top: 5px; - margin-right: 2px; - color: @body-bg; - font-size: 1.6em; - font-weight: normal; - padding: 0px; - line-height: 35px; - height: 35px; - width: 35px; - &:hover { - background: darken(@link-color, 10%); - } - i[class^='fa-'],[class*='fa-'] { - font-family: 'FontAwesome'; - } - &.btn-round { - border-radius: 50px; - } - } - .address { - margin-top: 5px; - letter-spacing: .3px; - @media (max-width: 336px) { - clear: both; - } - } - - .info-element { - @media (max-width: 375px) { - clear: both; - } - @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { - clear: both; - } - } - .address { - margin-top: 5px; - letter-spacing: .3px; - @media (max-width: 336px) { - clear: both; - } - } - .services { - margin-top: 5px; - margin-bottom: 5px; - } - - @media (min-width: @screen-md-min) { - .info-col { - width: 65%; - padding-right: 15px - } - .details-col { - width: 35%; - padding-left: 15px; - } - .details-col, .info-col { - float: left; - } - } - @media (min-width: @screen-lg-min) { - .info-col { width: 60%; } - .details-col { width: 40%; } - } - - .js-location-dropdown { - font-weight: normal; - margin-bottom: 15px; - display: inline-block; - > .dropdown-toggle { - width: 100%; - color: @gray; - border: 1px solid @gray-lighter; - padding: 5px; - border-radius: 10px; - transition: background .1s linear, color .2s linear; - margin-right: 2px; - - &[disabled] { - border: none; - background-color: @body-bg; - - .dropdown-icon { - display: none; - } - } - - &:hover, &:active, &:focus { - text-decoration: none; - background: @gray-lighter; - color: #000; - .icon { - color: #000; - } - } - .js-aria { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 4px; - } - .js-selected { - display: inline-block; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - } - .icon { - color: @gray-light; - display: flex; - align-items: center; - } - } - > .dropdown-menu { - max-height: 80vh; - overflow: auto; - margin-top: 4px; - min-width: 200px; - overflow-x: hidden; - > li { - padding: 12px 8px; - transition: background .2s linear; - color: @gray; - cursor: pointer; - &:hover { - background: @gray-lighter; - text-decoration: none; - } - } - } - } - - .js-week-navi { - // Improve alignment with open/close status on narrow screens: - margin: 4px 0 8px 0; - } -} - -//*** Record and image sidebar *** -.recordProvidedBy .record-organisation { - &.organisation-page-link-visible > .organisation-name { - display: none; - } - > a:first-child { - line-height: 1; - } - li { - line-height: 1.5; - &.organisation-page-link { - .organisation-name { - font-weight: bold; - } - } - } - img.consortium-logo { - display: block; - margin-top: 15px; - margin-bottom: 10px; - max-height: 110px; - max-width: 200px; - } - img.consortium-logo { - margin: -3px 0 12px; - } - @media screen and (max-width: @screen-xs-max) { - img.consortium-logo { - max-height: 70px; - } - } -} -.media-left .recordProvidedBy .record-organisation { - .record-organisation-info .organisation-name { - margin-bottom: 5px; - display: inline-block; - } - @media screen and (min-width: @screen-sm-min) and (max-width: @screen-md-max) { - img.consortium-logo { - max-height: 95px; - } - } -} -.imagepopup-container .recordProvidedBy .record-organisation { - .record-organisation-info .organisation-name { - margin-bottom: 5px; - display: inline-block; - } -} diff --git a/themes/finna2/less/finna/page-selectors.less b/themes/finna2/less/finna/page-selectors.less deleted file mode 100644 index acb2b228b7a..00000000000 --- a/themes/finna2/less/finna/page-selectors.less +++ /dev/null @@ -1,85 +0,0 @@ -.pagination-background { - background: @pagination-background; - & .container { - padding-left: 0; - } -} -.pagination-simple { - margin: 0; - font-size: 0.9em; - li { - display: inline-block; - list-style-type: none; - vertical-align: middle; - a { - .icon { - color: @action-link-color; - font-size: 1.5em; - } - } - } -} - -.pagination { - display: flex; - flex-wrap: wrap; - justify-content: center; - font-size: 1.1em; - - // paginate_button is used in DataTables - > li.page-first > a, - > li.page-prev > a, - > li.page-next > a, - > li.page-last > a, - > li.paginate_button.next > a, - > li.paginate_button.previous > a { - padding: 0; - &:hover { - background-color: transparent; - } - .icon { - color: @action-link-color; - font-size: 1.5em; - margin-right: 0.1em; - margin-left: 0.1em; - transition: background 0.2s ease; - &:hover { - color: darken(@action-link-color, 5%); - } - } - } - > li { - display: inline; // Remove list-style and block-level defaults - a { - color: @action-link-color; - } - > a { - border-radius: @border-radius-base; - @media(max-width:@screen-xs-max) { - font-size: 1em; - padding: calc(@padding-base-horizontal/1.5); - } - } - - &:first-child { - > a, - > span { - margin-left: 0; - } - } - } - - > li > a { - &:hover, - &:focus { - color: @pagination-hover-color; - background-color: @pagination-hover-bg; - border-color: transparent; - } - } - - // paginate_button is used in DataTables - & > li.paginate_button.disabled > a { - display: none; - } -} \ No newline at end of file diff --git a/themes/finna2/less/finna/primo.less b/themes/finna2/less/finna/primo.less deleted file mode 100644 index cf293d502f5..00000000000 --- a/themes/finna2/less/finna/primo.less +++ /dev/null @@ -1,44 +0,0 @@ -//== PCI -.primo-available-online { - p { - margin: 0px; - } - a:not(.icon-link) { - display: inline-block; - line-height: 1em; - } -} -.primo-available-online { - & .host { - font-size: 0.9em; - color: @gray-light; - } - & .fulltext-available .more-options { - display: none; - } -} -.primo-available-online-record { - & .more-options { - display: none; - margin: 5px 0px; - font-size: 1.08em; - } - - & .online-source { - color: @gray-light; - font-size: .9em; - } -} -//== PCI FACETS -#creationdateFilter, #publishDateFilter, #PublicationDateFilter { - & input[type="text"] { - width: 40%; - max-width: 50px; - padding: 0px 5px; - display: inline-block; - } - .slider.slider-horizontal { - width: 95%; - margin: 20px 0px; - } -} diff --git a/themes/finna2/less/finna/profile.less b/themes/finna2/less/finna/profile.less deleted file mode 100644 index cdcd8f6742a..00000000000 --- a/themes/finna2/less/finna/profile.less +++ /dev/null @@ -1,251 +0,0 @@ -.template-name-profile { - .my-research-content { - @media (min-width: @screen-md) { - width: 100%; - } - .logged-in-as { - margin-bottom: 15px; - display: flex; - flex-direction: column; - > div { - display: flex; - flex-direction: row; - @media (max-width: @screen-md) { - &:not(.display-name) { - flex-direction: column; - } - } - &.display-name { - font-size: @font-size-large; - margin: 0 10px 10px 0; - .profile-icon { - color: @brand-primary; - padding-right: 5px; - } - } - } - > div div { - padding-right: 20px; - @media (max-width: @screen-md) { - padding: 0 0 5px 0; - } - } - .profile-title { - font-weight: bold; - } - } - } -} - -.myresearch-profile-list { - padding: 0px 6px 20px; - &.library-card-holder { - padding: 0 0 20px; - .select-card-label { - font-weight: bold; - } - } - label, .profile-title { - padding-top: 7px; - } - .profile-title { - clear: left; - } - .clearfix { - padding: 3px 0px; - } - #email, #finna_nickname { - width: 100%; - margin-bottom: 5px; - @media (max-width: @screen-xs-max) { - max-width: 320px; - } - } -} - -.myresearch-profile-header { - background: @gray; - background: @action-link-color; - - h3 { - color: @body-bg; - padding: 7px 10px; - font-size: @font-size-h3; - margin: 0; - font-weight: 400; - } -} - -.library-profile { - margin-bottom: 40px; - padding-left: 0; - padding-right: 0; - padding-bottom: 0; - border: 1px solid @gray-lighter; - box-shadow: 10px 15px 30px -25px @gray; - display: inline-block; - width: 100%; - &.export-holder { - padding: 10px 10px 0px 10px; - } - #profile_library_form { - & input { - min-width: 210px; - } - } - div { - padding: 8px; - &.separator { - float:left; - width: 100%; - margin: 15px 0 10px; - padding: 0px; - border-top: 1px solid @btn-default-border; - } - &.my-profile-row { - display: inline-block; - width: 100%; - padding: 8px; - @media(max-width: @screen-xs-max) { - padding: 10px 8px 8px; - } - >.my-profile-col { - padding: 0 8px 0 0; - } - } - &.profile-title { - line-height: 1.5; - font-weight: bold; - @media (max-width: @screen-xs-max) { - padding-bottom: 0; - } - } - &.profile-text-value { - line-height: 1.5; - padding-left: 0px; - @media (max-width: @screen-xs-max) { - padding: 0px 8px 8px; - } - } - &.profile-xs { - padding: 0; - } - &.profile-long { - padding-bottom: 0; - } - &.profile-after-long { - padding-top: 16px; - } - &.library-profile-after-long { - padding-top: 0; - } - &.profile-info { - padding-top: 3px; - } - &.messaging-last { - margin-bottom: 20px; - } - &.profile-group { - padding-top: 0; - padding-left: 16px; - } - } -} - -.my-research-content .my-profile { - background: @gray-ultralight; - border-radius: @border-radius-small; - margin-bottom: 2em; - padding: 5px 10px; -} - -.my-profile-btn { - margin: 0px 5px 10px 0px; - display: inline-block; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - @media(min-width: @screen-sm-min) { - max-width: 250px; - } - @media(max-width: @screen-xs-max) { - width: 100%; - float: left; - display: block; - &.btn-danger { - margin-top: 15px; - } - } -} - -@media (min-width: @screen-sm ) { - .my-profile-col { - width: 33.33%; - float: left; - padding-right: 15px; - } - .password-col { - width: 66.6%; - float: left; - } -} - -.myresearch-profile-middle-header { - font-size: @font-size-h4; - font-weight: bold; - display: block; - line-height: 1.1em; - margin: 0; -} - -#favorites-import-dialog { - #filename { - margin-right: 5px; - } - .alert { - margin-top: @modal-title-padding; - } - .form-control { - max-width: 200px; - float: left; - } -} - -.myresearch-notification { - padding-left: 0; - @media (max-width: @screen-xs-max) { - margin-top: 0; - } -} - -.address-change-description, .messaging-settings-change-description { - background-color: @state-info-bg; - padding: 2em; - padding-left: 2.5em; - margin-bottom: 1em; -} - -fieldset.profile-group { - margin-bottom: 20px; - .form-group { - margin-left: 16px; - } -} - -.profile-form { - legend.form-field { - font-size: (@font-size-base * 1.1); - } - legend.control-label { - font-size: 100%; - font-weight: 700; - border: 0; - margin-bottom: 5px; - } - .form-control[type="radio"] { - display: inline-block; - margin: 0 .5em 0 0; - padding: 0; - height: 1.5em; - } -} diff --git a/themes/finna2/less/finna/public-favorites.less b/themes/finna2/less/finna/public-favorites.less deleted file mode 100644 index 5aca5ca8d9d..00000000000 --- a/themes/finna2/less/finna/public-favorites.less +++ /dev/null @@ -1,138 +0,0 @@ -/* Public favorites list styles. */ -.template-dir-list, -.public-list-embed { - .public-list-desc { - word-wrap: break-word; - } - - .public-list-desc, .notes { - ul, ol { - margin-left: 25px; - } - ul li { - list-style-type: disc; - } - ol li { - list-style-type: decimal; - } - } - - h1.public-list-header { - margin: 10px 0; - } - - .public-list-info { - color: @gray-light; - } - .public-list-view { - margin-top: 20px; - } - - .notes { - display: inline-block; - margin-top: 10px; - .heading { - font-weight: bold; - } - .note-heading p { - margin: 0; - text-transform: uppercase; - font-size: 0.9em; - i { - padding-right: 2px; - } - } - .note-rows p { - margin-top: 3px; - } - .note-rows span { - margin-left: 5px; - } - } - - .note-button { - z-index: 6; - color: #121212; - background-color: #f7f7f7; - padding: 2px; - font-size: 1em; - border: 1px solid #121212; - border-radius: 4px; - display: flex; - align-items: center; - align-self: flex-end; - >.icon { - margin-left: 4px; - margin-right: 4px; - } - &.note-show { - >.caret { - transform: rotate(180deg); - -ms-transform: rotate(180deg); - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - } - } - &.condensed { - background: none; - border: none; - } - } - .condensed-notes { - width: 100%; - } - - .note-overlay-list { - .notes { - .note-rows p{ - margin-top: 10px; - } - } - } - - .note-overlay-condensed { - color: #121212; - overflow-x: hidden; - overflow-y: auto; - text-align: left; - width: 100%; - max-height: 200px; - &.note-hide { - display: none; - } - &.note-show { - display: block; - border-bottom: 1px solid #cccccc; - } - p { - display: block; - padding: 0 10px; - } - } - .note-overlay-grid { - position: absolute; - z-index: 4; - color: #121212; - background-color: #f7f7f7; - overflow-x: hidden; - overflow-y: auto; - text-align: left; - top: 0; - right: 0; - left: 0; - max-height: 100%; - p { - display: block; - padding: 0 10px; - } - &.note-hide { - display: none; - } - &.note-show { - display: block; - } - } - .finna-panel { - margin-bottom: 12px; - } -} diff --git a/themes/finna2/less/finna/record.less b/themes/finna2/less/finna/record.less deleted file mode 100644 index 046a683ef4c..00000000000 --- a/themes/finna2/less/finna/record.less +++ /dev/null @@ -1,1221 +0,0 @@ -.authoritybox, -.record { - .media-body { - @media(max-width: @screen-xs-max) { - width: 100%; - } - } - - .media-left, - .media-right { - width: 25%; - @media(max-width: @screen-xs-max) { - display: block; - width: 100%; - float: none; - } - .recordcover-container { - position: relative; - margin-bottom: 10px; - text-align: center; - display: flex; - flex-direction: column; - justify-content: center; - } - } - @media(min-width: @screen-xs){ - .media-left { padding-right: 20px; } - .media-right { padding-left: 20px; } - } - - & .nav>li:not(.share-buttons) a { - color: @action-link-color; - font-size: 1em; - font-weight: 600; - - & :hover { - color: darken(@action-link-color,10%); - } - - & i { - color: tint(@action-link-color, 22%); - padding-left: 3px; - padding-right: 3px; - } - } - - .recordURLs { - margin: 0px 0px 10px; - padding-bottom: 10px; - & .online-source { - font-size: 0.9em; - color: @gray-light; - } - a { - font-size: 15px; - } - .truncate-field.truncate-done { - width: 100%; - } - .btn.btn-primary { - border-radius: 0; - padding: 0px; - height: 48px; - width: 48px; - font-size: 20px; - margin-right: 10px; - float: left; - } - @media print { - a[href]::after { - content: " (" attr(href) ")"; - } - } - } - finna-video.videourl, button.videourl { - display: flex; - align-items: center; - text-transform: uppercase; - font-weight: bold; - color: @btn-default-color; - margin-bottom: 6px; - i { - margin-right: 4px; - font-size: 24px; - } - } - - @media print { - .organisation-menu { - display: none; - } - - a[href]::after { - content: ""; - } - } - - .record-title { - margin: 0; - margin-bottom: 3px; - font-size: @record-title-font-size; - line-height: 1.2; - @media (max-width: @screen-sm) { - margin-bottom: 20px; - } - } - .label { - display: inline-block; - @media print { - border: 0; - } - } - .record-versions { - font-size: 0.9em; - margin-top: 6px; - &:not(.loading) { - text-transform: uppercase; - } - } -} - -a.authority { - float: left; - clear: left; -} - -.record-image-container { - margin-bottom: 20px; -} - -.image-details, .model-details { - table { - margin-left: 20px; - } - .toggle-image-information.collapsed .hide-image-information { - display: none; - } - .toggle-image-information:not(.collapsed) .show-image-information { - display: none; - } -} - -.authoritybox, -.large-image-layout.record .record-main > .media { - .media-left, - .media-right { - @media (min-width: @screen-sm) { - width: 50%; - } - .record-image-container { - .open-link { - margin-top: 10px; - } - .record-image-container { - .open-link { - margin-top: 10px; - } - .open-link, .model-link { - i, b { - color: tint(@action-link-color, 22%); - margin-right: 0; - font-style: normal; - } - } - } - } - } - .smaller-image-sidebar { - display: none; - } - .sidebar .organisation-menu { - display: none - } - @media(max-width: @screen-md-max){ - .mainbody.record-tabs { - width: 100%; - } - } -} - -.model-link { - .download-link { - text-align: left; - color: #007c90; - font-size: 1em; - font-weight: 600; - text-transform: uppercase; - } -} - -.image-link { - display: flex; - align-items: center; - font-size: 1em; - position: relative; - .fa.fa-download { - margin-right: 4px; - color: @action-link-color; - &:hover, &:focus { - color: @action-link-color; - } - } - .dropdown { - position: initial; - } - .image-dimensions, .image-size { - font-size: 0.8em; - text-transform: initial; - } - .dropdown-toggle.download { - padding: 2px 6px; - font-weight: 600; - text-transform: uppercase; - color: @gray-light; - } - .dropdown-menu.download { - border-radius: 5px; - padding: 2px 6px; - - @media(max-width:@screen-xs) { - left: -4%; - } - > li { - border-bottom: none; - > a { - border-radius: 0; - padding: 2px 6px; - white-space: initial; - } - } - } -} - -.recordcover-image-detail { - .image-description { - text-align: left; - color: @gray-light; - } -} -.finna-popup.help-wrapper { - .finna-popup.help-modal { - background: white; - padding: 4px; - max-width: 400px; - } -} - -.record-uniform-titles { - font-size: 1.05em; - margin: 0 0 3px; -} -// record-authors is no longer used, but is retained here for locally customized templates -.record-authors, .record-title-alt-script { - .date-and-year(); - margin-top: 6px; -} -.record-core-metadata { - .date-and-year(); - margin-top: 6px; - .recordContainerReference { - padding-bottom: 1em; - padding-top: 1em; - a { - font-size: 1.2em; - text-decoration: underline; - font-weight: 700; - } - } - .recordPublished { - font-weight: 700; - } -} - -.record-details { - & th { - width: 30%; - } - .subheading{ - text-transform: uppercase; - margin-top: 10px; - } - table.record-data { - width: 100%; - tr { - line-height: 25px; - td:nth-child(2) { - padding-left: 10px; - } - } - } -} -.record-alt-titles { - color: @gray-slightly-lighter; - margin-bottom: 12px; -} - -.record-information { - button.less-link { - display: flex; - align-items: baseline; - &.top-button { - top: 0; - position: sticky; - background-color: @body-bg; - width: 100%; - padding: 10px 0; - text-align: left; - @media(max-width: @screen-md) { - top: @navbar-height; - } - } - i { - padding-left: 2px; - } - } - ul.truncate-field { - margin-bottom: 0; - } -} - -.record-links { - vertical-align: baseline; - .link-wrapper { - vertical-align: baseline; - display: inline-flex; - flex-wrap: wrap; - align-items: center; - margin: 0 0 5px; - .iconlabel:first-child { - margin-left: 2px; - } - .copyright-icons { - display: inline-flex; - gap: 3px; - align-items: center; - line-height: 1.3em; - } - .resource-link { - margin-right: 5px; - } - .more-link { - margin: 0 0 0 8px; - } - } - .copyright-wrapper { - display: inline-block; - margin-left: 3px; - } - .cc-info { - margin-left: 5px; - } - a.copyright-description, .iconlabel { - font-size: @font-size-small; - font-weight: normal; - } - .show-info, .hide-info { - font-size: @font-size-small; - text-transform: lowercase; - font-weight: normal; - } - span.fa-arrow-down, span.fa-arrow-up { - font-size: 0.8em; - } - .show-info:first-letter, .hide-info:first-letter { - text-transform: none; - } - .iconlabel { - margin-right: -3px; - vertical-align: bottom; - } - span { - font-size: @font-size-small; - } - p { - font-size: @font-size-small; - padding: 0; - margin: 0; - } -} - -.summary { - font-size: 1.05em; - line-height: 1.35em; - margin-bottom: 10px; -} -.show-details-button, .hide-details-button, .toggle-image-information { - margin-top: 5px; - margin-bottom: 5px; - cursor: pointer; - padding-left: 0; - background: @body-bg; - text-transform: uppercase; -} -.show-details-button, .hide-details-button { - width: 100%; - font-size: .9em; - color: @link-color; - &:hover, &:focus { - color: @link-color; - } -} -.toggle-image-information { - border: 0; - font-weight: 600; - color: @action-link-color; - &:hover, &:focus { - color: @action-link-color; - } -} - -.show-details -.record-details { - margin: 10px 0px; -} -.physical-details { - color: @gray-light; -} -.access-rights { - color: @gray-light; - margin-top: 5px; - padding-top: 5px; -} -.dataTables_wrapper { - width: 100%; -} -.part-authors-padded { - padding-left: 10px; -} -.nickname-holder { - margin-bottom: 5px; -} -.recordInscriptions { - .record-inscription { - display: block; - margin-bottom: 7px; - } - .truncate-field { - .record-inscription { - span { - display: block; - > span { - margin-bottom: 5px; - } - } - } - } -} -.record-other-screenings-region, -.record-broadcasting-info-place { - flex-grow: 2; -} -.recordInspection { - dt { - font-weight: normal; - } -} - -@media(max-width:@screen-xs-max) { - .cover-wrapper { - text-align: center; - } - .template-name-view .record .record-title { - margin-top: 10px; - } -} - -@media print { - .template-dir-record .search-filters { - display: none; - } -} - -.open-link, .save-record-link, .record-link { - text-align: left; - margin-top: 5px; - color: @action-link-color; - font-size: 1em; - font-weight: 600; - text-transform: uppercase; - a, a span { - color: @action-link-color; - &:hover { - text-decoration: none; - color: @action-link-color; - } - } - .image-dimensions { - color: @gray-mid-light; - font-size: .8em; - } -} - -.record .recordcover-holder { - margin-bottom: 12px; - .more-link { - width: 100%; - } -} - -.recordcover-holder.paginate { - button { - display: none; - } -} - -@media(max-width: @screen-sm-max) { - .large-image-sidebar { - width: 100%; - } -} - -.related-records { - margin-bottom: 1em; - - li.list-group-item p { - font-weight: 600; - text-transform: uppercase; - margin-bottom: 0; - } -} - -#similar-records{ - .details { - font-size: 0.9em; - line-height: 25px; - margin-top: -5px; - } -} - -.staff-view { - .pace-car { - th,td { - border:0; - padding:0; - } - } - th { - text-align:right; - } -} - -.marc-row-LEADER, -.marc-row-005, -.marc-row-006, -.marc-row-007, -.marc-row-008 { - white-space: pre-wrap; -} - -.nav-pills { - padding: 0px; - margin: 0px; - & a:hover { - text-decoration: none; - } - & > li:not(.share-buttons):not(.whatsapp) { - margin: 10px; - float: left; - // Links rendered as pills - & > a { - border-radius: @nav-pills-border-radius; - padding: 0px; - } - } -} - -// QRCode in record view -.nav-pills { - img.qrcode { - border-radius: 8px; - min-width: 150px; - } -} - -// Share buttons -.nav-pills > li.share-buttons { - float: right; - padding-top: 5px; - .share-buttons-toolbox { - a { - padding-left: 5px; - display: inline-block; - } - } -} - -// Request forms -.ill-request-terms { - background-color: @state-info-bg; - padding: 2em; - padding-left: 2.5em; - margin-bottom: 1em; -} - -// Comments -.comment-wrapper { - background-color: lighten(@gray, 78%); - border-radius: @border-radius-base; - - .comment-text { - // Display line breaks properly in comments: - white-space: pre-line; - } -} - -// Comment form -.comment-form-wrapper { - padding: 10px; - background-color: lighten(@gray, 78%); - border-radius: @border-radius-base; - - .comment-form { - .comment-info-icon { - font-size: 1.5em; - float: left; - color: @brand-primary; - } - .comment-description { - margin-top: 1em; - margin-left: 2em; - } - @media (min-width: @screen-md) { - .comment-info-icon { - margin-top: 2.7em; - margin-left: 1em; - } - .comment-col { - width: 50%; - float: left; - } - .comment-description { - margin-top: 4em; - margin-left: 4em; - } - } - } -} - -// Cart buttons -.cart-add, .cart-remove { - cursor: pointer; -} - -// Record Preview Form -.preview-record-form { - #data { - width: 100%; - min-height: 400px; - } -} - -// Learning material record -.date-created.date-modified { - color: @gray-light; - font-size: 0.9em; - margin-top: 5px; - margin-bottom: 21px; -} -.learning-material { - margin-top: 12px; - h3 { - margin-top: 0; - margin-bottom: 6px; - font-size: 1em; - } - .recordURLs { - margin-top: 0; - margin-bottom: 21px; - padding: 0; - } - .fa-download, - .fa-external-link, - .fa-info3 { - margin-right: 5px; - } -} -.alert-aoe { - background-color: @aoe-brand-primary; -} -.material-description { - margin-bottom: 21px; -} - -// Copyright field value, also used in search result lists -.rights-icons { - margin-right: 10px; - .iconlabel { - margin-right: 0; - } -} -.rights-text { - color: @brand-primary; -} - -// Material provided by - -.recordProvidedBy { - .record-organisation { - img.consortium-logo { - margin: 8px 0 12px; - } - li.organisation-page-link { - padding-top: 5px; - } - li.material-questions-feedback { - font-weight: bold; - padding-top: 10px - } - } - .repository-library-request { - font-weight: bold; - padding-top: 10px; - } - .repository-library-request-order { - margin-top: 0.3em; - } -} - -.sidebar .recordProvidedBy { - border-top: none; - margin-top: 0px; - .record-type.organisations { - padding: 15px; - font-size: 1em; - margin-bottom: 0; - } - .record-organisation-box { - border: @sidebar-border; - margin-bottom: 1em; - } -} - -.record-main .recordProvidedBy { - border: @sidebar-border; - padding: 0 15px 10px 15px; - margin-bottom: 10px; - h2 { - font-size: 20px; - } - @media (min-width: @screen-sm-min) { - max-width: 300px; - } -} - -// Record feedback -.feedback-record { - margin-top: 0.3em; -} - -.model-details { - .model-download { - i { - padding-right: 2px; - } - } -} - -finna-model-viewer { - display: flex; - min-height: 400px; - position: relative; - .wrapper { - flex: 1 1 100%; - background-color: #efefefcc; - &.filedrop { - box-shadow: 0px 0px 2px 2px @brand-primary; - } - } - .options { - position: absolute; - color: black; - width: 200px; - .statistics-area { - .model-stats, .model-help { - background-color: white; - padding: 2px; - } - } - .viewer-table { - width: 100%; - } - .buttons { - text-align: start; - } - button { - appearance: none; - -webkit-appearance: none; - border: none; - padding: 0; - background-color: #1f1f1f; - color: white; - height: 30px; - line-height: 30px; - width: 20px; - margin: 2px; - i { - cursor: pointer; - } - &.collapsed { - background-color: white; - color: #1f1f1f; - } - } - } - .state { - position: absolute; - transform: translate(-50%, -50%); - top: 50%; - left: 50%; - width: 200px; - height: 50px; - color: white; - display: flex; - justify-content: center; - align-items: center; - background-color: @brand-primary; - padding: 10px 12px; - font-weight: 500; - line-height: 1.5; - border-radius: 4px; - span.fa-spinner::before { - color: white; - } - } - &.fullscreen { - position: absolute; - left: 0; - z-index: 10000; - } -} - - -finna-model-viewer .object-editor { - position: absolute; - right: 0; - width: 200px; - color: black; - background-color: #f2f2f2; - overflow-y: scroll; - max-height: 100%; - text-align: center; - .holder-title { - border-bottom: 1px solid black; - cursor: pointer; - } - .custom-holder { - display: flex; - flex-flow: column; - button { - padding-bottom: 2px; - } - } - form { - display: flex; - flex-flow: column; - text-align: start; - color: black; - background: #f2f2f2; - border: 1px solid lightgray; - border-bottom: none; - padding: 2px; - div.setting-child { - display: flex; - flex-flow: column; - div.setting-group { - display: flex; - flex-flow: row; - align-items: center; - justify-content: space-between; - padding-bottom: 2px; - &.child { - margin-left: 20px; - } - input { - min-width: 0; - margin-left: 2px; - border: none; - border-bottom: 1px solid #2f2f2f; - border-radius: 0; - &[type=number] { - max-width: 50px; - } - } - } - } - } -} - -.inline-linked-field { - display: inline-block; - - .show-info { - i { - font-size: 1.0rem; - vertical-align: middle; - } - i.expand { - display: inline-block; - } - i.collapse { - display: none; - } - } - - .field-popover { - display: none; - position: absolute; - z-index: @zindex-tooltip; - .reset-text(); - font-size: @font-size-base; - background-color: @modal-content-bg; - padding: 10px; - min-width: 200px; - max-width: 400px; - margin-left: 8px; - margin-right: 8px; - border: 1px solid @modal-content-border-color; - border-radius: @border-radius-base; - box-shadow: 0px 0px 20px -10px @gray-light; - - .content { - margin-bottom: 1.5rem; - } - h2 { - font-size: 1.5rem; - margin-top: 0; - margin-bottom: 1rem; - } - h3 { - font-size: 1.2rem; - margin-top: 1rem; - margin-bottom: 1rem; - } - - .popover-external-links { - margin-top: 1.5rem; - } - } - // Note: there can be nested popovers, so make sure to match the immediate child: - &.open > .field-popover { - display: block; - } - &.open > .show-info { - i.expand { - display: none; - } - i.collapse { - display: inline-block; - } - } -} - -/* ------ Star Rating ------ */ -.record .media-left .rating { - margin-bottom: 1rem; - - .rating-summary { - display: block; - } -} - -.rating-breakdown { - margin-bottom: 1rem; - - .rating-breakdown-stars { - display: inline-block; - } - - .rating-breakdown-percentage { - display: inline-block; - width: 4rem; - text-align: right; - } -} - -.star-rating { - /* Use display:inline-flex to prevent whitespace issues. Alternatively, you can put all the children of .rating-group on a single line. */ - display: inline-flex; - - /* Reset width */ - .rating__icon { - width: initial; - } - - /* Hide radio inputs, but keep them accessible by keyboard */ - .rating__input { - position: absolute !important; - left: -9999px !important; - } - - /* Set icon padding and size */ - .rating__label { - cursor: pointer; - /* If you change the left/right padding, update the margin-right property of .rating__label--half as well. */ - padding: 0; - margin: 0; - font-size: 1.8rem; - } - - /* Add padding and positioning to half star labels */ - .rating__label--half { - padding-right: 0; - margin-right: -0.5em; - z-index: 2; - } - - /* Set default star color */ - .rating__icon--star { - color: @text-color; - } - - /* If any input is checked, make its following siblings grey */ - .rating__input:checked ~ .rating__label .rating__icon--star { - color: #ddd; - } - - /* Make all stars highlight on rating group hover */ - &:not(.readonly) - { - &:hover .rating__label .rating__icon--star, - &:hover .rating__label--half .rating__icon--star { - color: @text-color; - } - /* Make hovered input's following siblings grey on hover */ - .rating__input:hover ~ .rating__label .rating__icon--star, - .rating__input:hover ~ .rating__label--half .rating__icon--star { - color: #ddd; - } - } -} -// Similar items carousel -.similar-bottom { - display: inline-block; - max-width: 100%; - border-top: 1px solid @gray-lighter; -} -.similar-carousel { - margin-bottom: 20px; -} -.similar-carousel-container { - display: flex; - flex-direction: row; - align-items: center; - position: relative; -} -.similar-carousel-item { - background-color: @similar-carousel-item-background; - border: @similar-carousel-border; - border-radius: @similar-carousel-border-radius; - box-shadow: @similar-carousel-box-shadow; - height: 97%; - margin-left: 4px; - margin-right: 4px; - .similar-carousel-format { - color: @similar-carousel-format-text-color; - background: @similar-carousel-format-background; - padding: 5px 11px 5px 11px; - border-radius: 8px; - margin-top: 5px; - .iconlabel { - margin: 0px; - &:before { - content: ''; - } - } - } - .similar-carousel-text { - color: @similar-carousel-text-color; - margin: 10px; - white-space: nowrap; - display: flex; - flex-direction: column; - .similar-carousel-item-title { - font-weight: bold; - } - .similar-carousel-item-title, .similar-carousel-item-author { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - div { - margin-top: 7px; - } - } -} -.similar-carousel-image { - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - border-radius: @similar-carousel-border-radius; - border-bottom-right-radius: 0px; - border-bottom-left-radius: 0px; - background-color: @similar-carousel-no-image-background; - height: 70%; - img { - max-width: none; - height: 100%; - width: 100%; - object-fit: cover; - } - .iconlabel { - width: 100%; - color: @body-bg; - display: flex; - justify-content: center; - margin: 0px; - &:before { - position: relative; - font-size: 45px; - color: @similar-carousel-no-image-color; - } - } -} - -/* ------ Record Tabs ------ */ -.record-tab.details .tab-name { - display: none; -} - -.record-toc { - margin: 15px 0; - padding: 10px; - background-color: #f7f7f7; -} - -.record.full-width-layout { - .record-accordions.record-tabs { - width: 100%; - padding-right: 0; - float: none; - } -} - -.record-format-aipa { - .media-body:not(.record-container .media-body) { - display: block; - width: auto; - } - .recordFormat { - display: block; - margin-bottom: 21px; - } - .access-rights { - margin-bottom: 21px; - } - .record-core-metadata, - .finna-tag-list, - .summary, - .record-toc, - .encapsulated-records { - font-size: 16px; - line-height: 1.5; - margin-bottom: 15px; - } - h1, - .record-title { - font-size: 28px; - line-height: 1.1; - margin-top: 0; - padding-top: .7em; - } - h2, - h2.record-title, - h3, - h3.record-title { - font-size: 22px; - margin-bottom: 21px; - } - h3.panel-title { - font-size: 16px; - margin: 0; - } - .panel-body { - ul, - ol { - margin-left: 25px; - & li { - list-style-type: unset; - } - } - } - .study-objectives-title { - font-size: 14px; - } - .finna-educational-level-data { - margin-left: 25px; - .level-data-section-title { - font-size: inherit; - } - } - .result-view-grid { - h2.title { - margin: 0; - padding: 0; - } - } -} - -.encapsulated-record { - margin-bottom: 15px; - .recordAuthors { - margin-bottom: 15px; - } -} - -.encapsulated-record.record-format-lrmi { - .record-core-metadata + .finna-panel { - margin-top: 21px; - } -} - - -/* Labels */ -.record .label { - margin-bottom: 0.5rem; - - &.label-retraction { - &:extend(.label-warning); - } -} diff --git a/themes/finna2/less/finna/reservationlist.less b/themes/finna2/less/finna/reservationlist.less deleted file mode 100644 index d93edc79a67..00000000000 --- a/themes/finna2/less/finna/reservationlist.less +++ /dev/null @@ -1,77 +0,0 @@ -.reservation-list-body { - @media (max-width: @screen-sm-max) { - width: 100%; - } - padding: 0; - .list-info { - background: #f4f4f4; - display: inline-block; - padding: 4px; - min-height: 24px; - font-weight: bold; - p { - margin: 0; - } - } - .list-controls { - margin-top: 10px; - } - .reservations-list-home-ul { - .reservations-list-home-li { - width: 100%; - padding: 6px; - display: flex; - flex-flow: column; - .reservation-list-header, .reservation-list-info { - display: flex; - flex-flow: row; - align-items: center; - justify-content: space-between; - - } - } - > li:nth-child(odd) { - background-color: #f4f4f4; - } - } -} - -#ReservationListRequest.dynamic-form { - textarea { - width: 100%; - min-height: 100px; - resize: none; - overflow: auto; - text-wrap: nowrap; - } -} -.reservation-request-table { - .reservation-request-buttons { - display: flex; - align-items: center; - justify-content: start; - a { - margin: 2px; - } - } - .reservation-list-wrapper { - display: flex; - align-items: center; - >div { - display: flex; - align-items: center; - justify-content: start; - padding-left: 10px; - flex: 1 1 50%; - } - } - .saved-reservation-lists { - padding: 4px; - margin: 2px; - } -} - -#reservation_message { - width: 100%; - min-height: 100px; -} diff --git a/themes/finna2/less/finna/result-sidebar.less b/themes/finna2/less/finna/result-sidebar.less deleted file mode 100644 index f7d84c3004c..00000000000 --- a/themes/finna2/less/finna/result-sidebar.less +++ /dev/null @@ -1,233 +0,0 @@ -//== Styling Finna sidebar checkbox filters -#sidebar .checkbox-filters { - padding: 0px; - margin: 10px 0 15px; - - &:extend(.checkbox-container); - - .checkbox { - margin: 8px 0px; - &.disabled label > span { - .opacity(0.5); - cursor: @cursor-disabled; - } - &.blender-backend-secondary { - margin-bottom: 1.5em; - } - } - label { - margin-left: 0px; - line-height: 1em; - } - label:before { - margin-right: 5px; - margin-left: -22px; - } - .badge { - margin-top: 4px; - @media(min-width: @screen-sm-min) and (max-width: @screen-md-max) { - max-width: 56px; - overflow: hidden; - text-overflow: ellipsis; - margin-right: 6px; - } - } -} - -.sidebar { - margin-bottom: 30px; - @media (max-width: @screen-xs-max) { - clear: both; - } -} - -.sidebar :not(.recordProvidedBy) h1, -.sidebar > h1, -.sidebar :not(.recordProvidedBy) h2, -.sidebar > h2 { - padding: 15px; - background: @sidebar-background; - color: @sidebar-header-text-color; - font-size: 1.2em; - font-weight: 500; - text-transform: uppercase; - margin-top: 0px; - margin-bottom: 0px; - word-wrap: break-word; - .icon { - color: @sidebar-header-icon-color; - } -} - -.sidebar :not(.recordProvidedBy) h1, -.sidebar > h1, -.sidebar > h2 { - margin-bottom: 5px; - @media (max-width: @screen-xs-max) { - position: sticky; - top:0; - z-index: 1000; - width: 100%; - display: flex; - justify-content: space-between; - margin-bottom: 0; - .tooltip-facet { - margin-right: auto; - padding-left: 10px; - } - } -} - -.list-group { - margin-bottom: 5px; -} - -.list-group-item, -button.list-group-item { - position: relative; - font-size: 1em; - vertical-align: middle; - border: none; - &:first-child { - .border-top-radius(0px); - } - &:last-child { - .border-bottom-radius(0px); - } - // title custom coloring - &.title { - background: @facet-header-background; - color: @facet-text-color; - &:hover, - &:focus { - background: @facet-header-background; - color: @facet-text-color; - } - } -} - -.list-group { - &.record-organisation { - padding: 3px 15px 10px; - margin-bottom: 0px; - - h3 { - margin-top: 0; - margin-bottom: 10px; - } - a { - font-weight: bold; - } - } - &.organisations { - padding: 0px; - margin-bottom: 10px; - background: @list-group-bg; - .record-organisation { - background: @body-bg; - padding: 5px 10px; - } - .other-organisation-links a { - padding: 5px 10px; - font-weight: bold; - display: block; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - h5 { - margin-top: 0px; - margin-bottom: 0px; - padding: 10px; - font-weight: normal; - } - a { - line-height: 1em; - } - .open-link a { - line-height: normal; - i { - color: tint(@action-link-color, 22%); - :before { - vertical-align: middle; - } - } - } - .more-link, .less-link, .less-link-top { - padding-left: 10px; - } - } -} - -.similar-records, -.related-records, -.similar-records, .work-expressions { - .list-group-item { - border: @sidebar-border; - } - .details { - color: @text-color; - } - i { - margin-right: 0; - font-style: normal; - top: 0.35em; - position: relative; - } - @media print { - display: none; - } - - .list-group { - .more-link, .less-link, .show-all-link { - display: block; - margin: 0; - padding-top: 5px; - color: @gray; - - i { - top: 0 - } - } - } -} -.related-records { - .list-sub-group li { - margin-top: 0.6em; - } -} -.work-expressions { - margin-bottom: 10px; -} - -#side-collapse-first_indexed { - > a { - display: inline-block; - min-width: 51%; - } -} -.form-control.date-picker-field { - border-bottom-right-radius: 0px; - border-top-right-radius: 0px; - cursor: pointer; -} - -#first_indexedFilter { - margin-top: 10px; - margin-bottom: 20px; - .form-group { - display: flex; - align-items: flex-end; - .finna-dateinput { - flex: 0; - label > .dateformat-hint { - font-size: 10px; - } - } - button[type=submit] { - margin-left: 10px; - padding: @padding-base-vertical @padding-base-horizontal; - height: @input-height-base; - } - } -} diff --git a/themes/finna2/less/finna/search-controls.less b/themes/finna2/less/finna/search-controls.less deleted file mode 100644 index dd1caf3f8b0..00000000000 --- a/themes/finna2/less/finna/search-controls.less +++ /dev/null @@ -1,145 +0,0 @@ -// All search control buttons -.search-controls { - display: flex; - align-items: center; - flex-wrap: wrap; - justify-content: space-between; - margin-top: 0.5rem; - margin-bottom: 0.5rem; - .alert { - margin-bottom: 0; - } - .update-location-button { - margin-top: 15px; - } - .button-label { - padding: 3px; - } - @media (max-width: @screen-xxs) { - & .view-options, & .view-dropdown, & .sort-button { - & .dropdown > a { - max-width: 150px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - display: inline-block; - } - } - } - @media (max-width: @screen-xxs) { - .view-dropdown .dropdown-menu { - left: -50%; - } - } - .control-container{ - font-size: 0.9em; - margin-bottom: 5px; - margin-top: 5px; - } - .sort-option-container, .limit-option-container, .view-option-container{ - display: inline-block; - } -} - -@media (min-width: 768px) { - .search-header { display: flex; } - .search-stats { flex-grow: 1; } - .search-controls { - text-align: right; - } -} - -.view-options, .view-dropdown, .sort-button, .results-per-page-button, .update-location-button { - color: @body-bg; - font-weight: 600; - - .dropdown > a { - background: transparent; - border: 2px solid @action-link-color; - color: @action-link-color; - border-radius: @border-radius-base; - font-size: 1em; - padding: 5px; - display: inline-block; - white-space: nowrap; - &:hover, &:focus { - text-decoration: none; - background: @action-link-color; - color: @body-bg; - transition: background 0.2s linear; - i { - color: @body-bg; - } - } - } - i { - font-size: 1.3em; - color: @action-link-color; - margin-right: 0; - border-radius: @finna-button-radius; - } - i.fa-arrow-down { - font-size: 1em; - margin-left: -18px; - } - .dropdown-menu { - border-radius: @border-radius-base; - padding: 0; - - & > li > a { - text-align: left; - color: @gray; - padding-top: 10px; - padding-bottom: 10px; - i { - color: @gray; - } - i.fa-available { - font-size: 1em; - float: right; - } - } - } - @media(min-width: @screen-lg-min){ - display: inline-block; - } - .dropdown-menu &:not(.sort-button) { - @media(max-width:@screen-sm-max) { - font-size: 1.1em; - } - } -} - -.view-option-container { - .view-button { - display: inline-block; - padding: 5px; - & .icon{ - color: @action-link-color; - } - &.selected { - border: 2px solid @action-link-color; - border-radius: @border-radius-base; - & .icon{ - color: @action-link-color; - } - } - } -} - -.search-tab-tip { - background-color: @search-tab-tip-bg; - box-shadow: 2px 2px 4px #888888; - margin-bottom: 24px; - padding: 5px; - position: relative; - p { - margin: 2px; - } - @media (min-width: @screen-sm-min) { - margin-bottom: 12px; - } - @media (min-width: @screen-md-min) { - margin-bottom: 0; - } -} diff --git a/themes/finna2/less/finna/search.less b/themes/finna2/less/finna/search.less deleted file mode 100644 index c3698fbb549..00000000000 --- a/themes/finna2/less/finna/search.less +++ /dev/null @@ -1,560 +0,0 @@ -// Thumbnail sizes for media items: search results, list entries, record views -@thumbnail-width-small: 100px; -@thumbnail-width-medium: 150px; -@thumbnail-width-large: 200px; - -/* Results */ -/* --- Layout --- */ -@media (min-width: @screen-sm-min) { - .mainbody { width: 75%; } - .sidebar { width: 25%; } - .sidebar.left { float: left; } - .sidebar.right { float: right; } - .mainbody.left{ - float: left; - padding-right: 15px; - } - .mainbody.right{ - float: right; - padding-left: 15px; - } - .empty-list { - width: 75%; - .checkbox-filters { - display: none; - } - } - .record-image-container { - position: relative; - } -} -@media (max-width: @screen-sm-max) { - .template-dir-myresearch .container.main-content > .mainbody, - .template-dir-holds .container.main-content > .mainbody, - .template-dir-librarycards .container.main-content > .mainbody, - .template-name-mylist .container.main-content > .mainbody, - .template-name-history .container.main-content > .mainbody { - width: 100%; - } -} -@media (max-width: @screen-xs-max) { - .media-left { - float: right; - } -} - -.resultListLabeling { - display: none; -} -.no-results { - margin-bottom: 30px; -} -mark, .highlight { - background: none; - font-weight: bold; - color: inherit; - font-size: 1.03em; - padding: 0; -} -.savedLists.alert { - margin: 0px; -} -.container.resultListDisplay { - margin-top: 30px; -} -.resultListBanner h2 { - margin: 15px 0px; -} -.resultListBanner .alert { - padding: 0px; - margin: 0px; - background: none; - border: none; - margin-bottom: 15px; -} - -.js-result-list { - position: relative; - - // Loading spinner - .loading-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - padding: 2rem; - display: flex; - font-size: 150%; - align-items: flex-start; - justify-content: center; - background-color: rgba(0,0,0,0.2); - z-index: 1; - - .loading-spinner { - padding: 2rem; - background-color: rgba(0,0,0,0.6); - border-radius: @border-radius-large; - color: @gray-lighter; - } - } -} - -.result { - padding-bottom: 15px; - padding-top: 15px; - &:last-child { - padding-bottom: 15px; - } - @media (max-width:@screen-xs-max) { - border-bottom: 1px solid @gray-lighter; - &#result0, &:first-child { - border-top: 1px solid @gray-lighter; - } - } - .list-view .publish-year { - display: block; - } - .list-view { - .more-link, .less-link, .less-link-top { - padding-bottom: 0; - } - } - .record-versions { - font-size: 0.9em; - &:not(.loading) { - text-transform: uppercase; - } - } -} -.dateyeartype { - .date-and-year(); -} - -.row.result .status .label { - visibility: hidden; -} - -.add-to-favorites { - @media(max-width: @screen-xxs) { - padding-right: 5px; - } -} -.result .save-record, -.result .cart-add, -.result .cart-remove { - font-size: medium; - @media(max-width: @screen-xs-max) { - font-size: 1em; - float: none; - margin-top: 10px; - text-transform: uppercase; - font-weight: 600; - color: @action-link-color; - i { - color: tint(@action-link-color, 22%); - } - } -} -.available-online-links { - margin: 10px 0px 0px; - letter-spacing: 0.2px; - font-weight: 400; - clear: both; - word-break: break-all; - .online-source { - color: @gray-light; - font-size: .9em; - } - a { - color: darken(@link-color, 5%); - } -} -// fix truncate links 1px cutoff on the left -.available-online-links, .recordURLs { - a { - padding-left: 1px; - .icon { - vertical-align: baseline; - font-size: 1.2em; - } - } -} -.result-citation-links { - margin: 0.5rem 0; -} -.add-to-favorite-col { - @media(max-width: @screen-xs-max) { - margin-top: 10px; - } - a { - color: @action-link-color; - } -} - -.bulkActionButtons { - font-size: 0.9em; - margin: 0.5em 0; - display: flex; - align-items: center; - flex-flow: row wrap; - >* { - margin-right: 4px; - } -} - -.bulkActionButtons .checkbox, -.bulkActionButtons label { display: inline-block; } -.bulkActionButtons label input { margin-top: 2px; } - -.selection-controls-bar { - margin: 0 0 0.5rem 10px; - padding: 0; - list-style: none; - line-height: 25px; - - li { - display: inline-block; - - &.bulk-checkbox { - padding-inline-end: 1rem; - margin-top: .25rem; - } - - label input { margin-top: 2px; } - } - - // Like .bulkActionButtons .btn-group .btn - .clear-selection { - border: 1px solid @gray-lighter; - border-radius: 4px; - background: @gray-ultralight; - color: @text-color; - font-size: 0.9em; - } -} - -.result-body { padding-left: 1rem; } -@media (min-width: 768px) { - .result-body { - position: relative; - float: left; - width: 100%; - padding-right: 20px; - } -} -.savedLists { - &:extend(.alert); - &:extend(.alert-info); - margin-bottom: 0; - display: none; - ul { - margin-bottom: 0; - } -} -.savedLists.loaded { display: block; } - -.bulkActionButtons { - .checkbox { - padding-left: 0; - display: inline-block; - input[type="checkbox"] { - float: none; - } - } - label input { - margin-top: 2px; - } -} -.main.template-dir-content.template-name-content .public-list-embed .result, -.result { - .media-left, - .media-right { - width: 25%; - padding-right: 10px; - padding-left: 10px; - &.small img, - &.medium img, - &.large img { - max-width: 100%; - } - } - .record-checkbox { - flex: 0; - cursor: pointer; - } - &.condensed-list-view .record-checkbox { - position: relative; - top: 40px; - left: -21px; - display: inline-block; - } - h2.title { - font-size: 1.333em; - line-height: 1.1em; - font-weight: 400; - margin: 0; - padding: 0; - } - .result-alt-titles { - color: @gray-slightly-lighter; - } - .left img {max-width:100%; height:auto;} - @media (max-width:767px) { - .middle,.right {padding:0} - } - @media (max-width:530px) { - .left {width:40%} - .middle {width:60%} - .right {display:none} - } - .label { - display: inline-block; - } -} -.result.embedded { - .getFull { - display: block; - margin-left: 1.5rem; - padding-right: 30px; - border-left: 1px solid transparent; - } - .getFull.expanded { - &:extend(.list-group-item); - margin-top: -11px; - margin-left: .75rem; - padding-left: .75rem; - border-top-left-radius: @border-radius-base; - border-top-right-radius: @border-radius-base; - &::before { - content: '\25BC'; - position: absolute; - right: 15px; - color: @gray; - } - } - .loading { - &:extend(.list-group-item); - margin-left: .75rem; - padding: 1rem; - background: #fff; - } - .long-view { - margin-left: .75rem; - padding: .5rem; - border: 1px solid @list-group-border; - background-color: #fff; - border-bottom-left-radius: @border-radius-base; - border-bottom-right-radius: @border-radius-base; - } - .long-view .tab-content { padding: 0; } - .list-tabs { margin-bottom: 0; } - .list-tab-toggle { cursor: pointer; } - .list-tab-content { padding: 1rem; } -} -.browse-title { - margin-bottom: 10px; - margin-top: 10px; -} -.browse-desc { - margin-bottom: 10px; -} - -.cart-controls .btn { - margin-bottom: 1em; -} - -@media(min-width: @screen-md) { - .search-home-left { - width: 40%; - float: left; - padding-right: 15px; - } - .search-home-right { - width: 60%; - float: left; - padding-left: 15px; - } -} - -.spelling-suggestions { - margin-top: 1em; - margin-bottom: 1em; - font-size: 1.2em; - a { - margin-right: 5px; - } -} - -.searchtools-background { - background: @finna-searchtools-background; -} - -.main.template-dir-content.template-name-content .public-list-embed h2, -h2 { - &.search-title { - font-weight: 400; - line-height: 1.1em; - font-size: 1.333em; - margin: 0; - } -} - -.searchtools { - padding-top: 20px; - padding-bottom: 20px; - a { - color: @finna-searchtools-color; - font-size: 1.1em; - font-weight: 600; - text-transform: uppercase; - margin-right: 15px; - display: inline-block; - padding: 0 .5rem; - white-space: nowrap; - } -} - -// mobile toolbar -@media (max-width: @screen-xs-max) { - .prevent-scroll { - overflow: hidden; - } -} - -.searchContent { - background-color: @finna-search-background; - [class^="tooltip-"]>i { - color: @action-link-color; - } -} - -.template-dir-search.template-name-results { - .search-form-container { - //Specific stylings for advanced search form container - &.advanced-container { - display: block; - } - } -} - -.template-dir-search.template-name-home { - position: relative; - .search-form-container { - padding-top: 2em; - padding-bottom: 2em; - #gradient > .vertical(@background-start-color; @background-end-color; @background-start-percent; @background-end-percent); - } - .searchContent { - -webkit-overflow-scrolling: touch; - background-size: cover; - background-position: center top; - background-color: @background-color; - background-image: @background-image-url; - background-repeat: no-repeat; - @media(max-width:@screen-sm-max) { - background-size: 150% auto; - background-position: 50% 0; - .record-view-header > .container { - padding-left: 0; - padding-right: 0; - } - } - @media(max-width:@screen-xs-max) { - background-size: 350% auto; - } - } -} - -.search-bg-image-info { - display: flex; - justify-content: flex-end; -} -.search-bg-image-info-content { - background: rgba(255,255,255,0.9); - color: @gray; - display: inline-flex; - font-size: 0.8em; - padding-left: 0.5em; - padding-right: 0.5em; -} - -.record-type-lrmi.list-view { - .targeted-information { - margin: 6px 0 0; - } -} - -.lrmi-topic { - display: inline-block; - margin: 0 3px 6px 0; - padding: 3px 6px; - color: @gray; - background-color: #F4F4F4; -} - -.list-view .material-rights { - display: flex; - flex-flow: column nowrap; - .rights-icons { - background-color: initial; - } -} - -.learning-material-recommendation { - a { - text-decoration: underline; - } -} - -.versions-tab { - .search-header { - .search-controls { - margin-top: 0; - padding-top: 0; - padding-left: 1rem; - text-align: left; - .more-link { - margin-top: 2px; - } - } - .search-stats { - padding-top: 0; - flex-grow: 0; - } - } -} - -.search-history-table { - &:extend(.table all); - &:extend(.table-striped all); - &:extend(.table-responsive all); -} -table.search-history-table { - table-layout: auto; - - tr.oddrow { - background-color: transparent; - } - thead tr, tr.evenrow { - background-color: @table-bg-accent; - } - - .history_results { - white-space: nowrap; - } - - @media screen and (min-width: 768px) { - border: 1px solid @gray-lighter; - tbody > tr > td { vertical-align: middle; } - .history_time { - width: 20%; - } - } - - @media screen and (max-width: 767px) { - tbody > tr { - border: 1px solid @gray-lighter; - } - } -} diff --git a/themes/finna2/less/finna/searchbox.less b/themes/finna2/less/finna/searchbox.less deleted file mode 100644 index b29abfa2d68..00000000000 --- a/themes/finna2/less/finna/searchbox.less +++ /dev/null @@ -1,199 +0,0 @@ -.searcbox, .searchbox-columns { - &:extend(.clearfix all); -} -.searchbox, .searchbox-flex { - margin-bottom: 12px; - margin-top: 12px; - .search-help-icon { - font-size: 26px; - } - .searchbox-home { - .tooltip-button.tooltip-search-local { - .search-help-icon { - color: #fff; - } - } - } - .searchbox-home, - .searchbox-authority-home, - .searchbox-authority-search { - .btn.btn-link { - background: @background-color; - border-radius: @border-radius-small; - color: mix(@background-color, contrast(@background-color), 5%); - font-size: 1em; - font-weight: normal; - line-height: 25px; - margin-top: 1em; - padding: 0px 5px; - overflow: hidden; - text-transform: none; - .icon { - font-size: 1.5em; - } - .adv-search { - .icon { - color: mix(@body-bg, contrast(@body-bg), 95%); - } - } - } - } - .search-tooltip:empty + .pager { - margin-left: 12px; - } - .pager { - @media (max-width: @screen-lg) { - margin-left: 6px; - } - li.pager-text { - font-size: 1em; - margin: 0px 3px; - color: mix(@finna-search-background, contrast(@finna-search-background), 5%); - } - li { - > a { - padding: 0 5px; - color: @pager-bg; - background: transparent; - border: none; - border-radius: none; - .icon { - font-size: 2em; - } - } - } - } - @media (max-width: @screen-sm) { - .dropdown.form-control.type-dropdown { - display: none; - } - } -} - -.finna-filters { - .filters { - display: inline-block; - } - &:extend(.checkbox-container); -} - -// hidden navigation bar -.searchbox .fixedbar.attached { - background: rgba(0, 0, 0, 0.9); - position: fixed; - z-index: 1000; - height: 50px; - top: 0px; - width: 100%; - left: 0px; -} -.searchbox .navbar-form { - &.attached { - z-index: 1000; - margin: 0px; - position: fixed; - top: 5px; - transition: none; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - .btn-link { - display: none; - } - } -} - -.searchbox-home { - flex-wrap: wrap; - .search-links { - flex-basis: 100%; - .btn-link:first-child { - margin-left: 0; - } - } -} - -.searchbox-flex { - display: flex; - align-items: center; - .search-col, .record-back, .adv-search, .pager { - margin: auto 0; - } - .search { - flex: 1; - @media (min-width: @screen-md) { - max-width: 70%; - } - } - .pager { - display: flex; - align-items: center; - @media (max-width: @screen-lg) { - margin-left: 6px; - } - .disabled { - > a, - > a:hover, - > a:focus { - color: @gray-light; - background-color: transparent; - } - } - } - .btn-advanced { - margin-left: 10px; - } - .btn-link { - font-size: 1em; - font-weight: 600; - color: @finna-search-link-color; - } - .search-tooltip { - button { - background-color: transparent; - border: none; - margin-left: 30px; - color: @tooltip-button-color; - .icon { - cursor: pointer; - } - } - } - .back-to-search { - a { - display: flex; - align-items: center; - font-size: 1em; - font-weight: 600; - color: @finna-search-link-color; - .icon { - font-size: 1.5em; - margin-right: 5px; - } - .back-to-search-text { - margin-right: 10px; - } - } - } - @media(max-width: @screen-md) { - .pager { - li.pager-text { - margin: 0 5px; - } - } - } - @media(max-width: @screen-sm-max) { - .pager { - min-width: 70px; - margin-left: 10px; - li:first-child { - margin-right: 4px; - } - .pager-text { - display:none; - } - } - .record-back { - margin-right: 10px; - } - } -} diff --git a/themes/finna2/less/finna/select-a11y.less b/themes/finna2/less/finna/select-a11y.less deleted file mode 100644 index 6872ede615f..00000000000 --- a/themes/finna2/less/finna/select-a11y.less +++ /dev/null @@ -1,195 +0,0 @@ -/* select-a11y ------------------------------------------------------- */ -.select-a11y { - position: relative; -} -.select-a11y.is-open .select-a11y__overlay { - display: block; -} -.select-a11y input::-webkit-contacts-auto-fill-button { - visibility: hidden; - display: none !important; - pointer-events: none; - position: absolute; - right: 0; -} -.select-a11y-button { - position: relative; - width: 100%; - text-align: left; - background: #fff; - border-radius: 4px; - border: 1px solid #ccc; - padding: 2px 8px; - &:hover, &:active, &:focus { - background-color: #e6e6e6; - border-color: #adadad; - } - &:focus { - outline-offset: -2px; - } -} - -.select-a11y-button[aria-expanded=true] { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; -} -.select-a11y-button[aria-expanded=false] .select-a11y-button__icon > .select-collapse { - display:none; -} -.select-a11y-button[aria-expanded=true] .select-a11y-button__icon > .select-expand { - display:none; -} -.select-a11y-button__clear { - position: absolute; - top: 0; - right: 2rem; - bottom: 0; - appearance: none; - padding: 0; - margin: 0; - line-height: 0; - border: none; - background: none; -} -.select-a11y-button__clear::before { - content: "✕"; -} -.select-a11y-button.select-a11y-button--no-selected-option + .select-a11y-button__clear { - display: none; -} -.select-a11y-button__text { - padding-right: 1.75rem; -} -.select-a11y-button__icon { - position: absolute; - top: 50%; - right: 0.5em; - line-height: 0; -} -.select-a11y__selected-item { - border: 1px solid #c3c4cc; - padding: 0.2em 0.1em 0.2em 0.5em; -} -.select-a11y-delete__icon:before { - content: "✕"; - color: red; - line-height: 1; -} -.select-a11y-delete { - background-color: transparent; - border: 1px solid transparent; -} -.select-a11y-delete:focus { - outline: 1px solid red; - color: red; -} -.select-a11y-delete:hover { - color: red; - border-color: red; -} -.select-a11y__hidden { - display: none; -} -.select-a11y__overlay { - position: absolute; - left: 0; - right: 0; - padding: 0.5em; - z-index: 10; - // Styling alike .dropdown-menu: - border: 1px solid @dropdown-border; - .box-shadow(0 6px 12px rgba(0, 0, 0, .275)); - background: @gray-ultralight; - font-size: 16px; // Avoid automatic zoom-in on mobile. - @media only screen and (min-width : 480px) { - font-size: 1em; - } -} -.select-a11y__input { - width: 100%; - padding: 0.25rem 0.5rem 0.25rem 0.5rem; - // Styling alike .form-control: - border: 1px solid #666; - background: #fff; - color: #666; -} -.select-a11y-suggestions { - max-height: 10em; - overflow-y: auto; - margin-top: 0.5em; - // Styling alike .form-control: - border: 1px solid #666; - background: #fff; -} -.select-a11y-suggestion { - padding: 0.25rem 0.5rem 0.25rem 0.5rem; - cursor: pointer; - text-align: left; - display: flex; - align-items: center; -} -.select-a11y-suggestion:focus, .select-a11y-suggestion:hover { - background-color: #666; - color: #fff; -} -.select-a11y-suggestion:focus { - outline: 1px #666 !important; - outline-offset: -1px; - color: #fff; - background-color: #666; -} -.select-a11y-suggestion[aria-selected=true] { - color: #fff; - background-color: #666; - position: relative; -} - -.select-a11y-suggestion__label { - word-break: break-word; -} -.select-a11y-column { - flex: 1; - min-width: 0; -} -.select-a11y-suggestion__image { - width: 3rem; - height: 3rem; - object-fit: cover; - object-position: center; - margin-right: 0.5rem; -} -.select-a11y-suggestion__image ~ .column .select-a11y-suggestion__label { - text-align: right; -} -.select-a11y-suggestion__description { - margin-top: 0.5rem; - font-size: 14px; -} -.select-a11y-suggestion__helper { - background-color: #f6f6f6; - color: #666; - padding: 0.25rem; -} -.select-a11y__no-suggestion { - padding: 0 0.5em; - color: #666; - text-align: left; - margin: 0; -} -.select-a11y__selected-list { - padding: 0.5em 0; - margin: 0; -} -.select-a11y__selected-list li { - margin: 0 0.3em 0.3em 0; -} -.select-a11y__selected-list li:before { - content: ""; -} -.select-a11y__selected-list li span { - display: inline-block; -} -.column--right { - text-align: right; -} diff --git a/themes/finna2/less/finna/street-search.less b/themes/finna2/less/finna/street-search.less deleted file mode 100644 index 200a1339fe7..00000000000 --- a/themes/finna2/less/finna/street-search.less +++ /dev/null @@ -1,152 +0,0 @@ -.template-name-streetsearch .search-form-container { - padding: 2em 0; -} -.street-search-progress .fa-spinner { - display: block; - width: auto; - height: auto; - float: left; - margin-right: 10px; -} -.street-search-progress{ - padding: 15px 0; -} - -.street-search-button { - font-size: 25px; - padding: 10px 30px; - margin-bottom: 80px; - - &:after { - content: "\e008"; - -moz-osx-font-smoothing: grayscale; - font-family: finnaicons; - margin-left: 11px; - } -} - -.street-search-terminate { - border: 0px none; - background-color: inherit; - padding: 0px; - text-decoration: underline; -} - -.street-search-introduction { - font-size: @font-size-h2; - font-weight: 600; - .highlight { - color: @brand-primary; - } - @media(max-width: @screen-xs-max) { - font-size: 18px; - } -} - -.street-search-feedback a { - margin-bottom: 2em; - position: relative; - &:hover { - background: darken(@brand-primary,5%); - } - &:before { - content: ""; - position: absolute; - bottom: -9px; - margin: auto; - border-width: 0 0 9px 12px; - border-style: solid; - border-color: transparent @brand-primary; - } - &:hover:before { - border-color: transparent darken(@brand-primary,5%); - } -} - -.street-search-header .street-search-info { - display: flex; - .street-search-introduction { - flex: 2; - } - .street-search-feedback { - flex: 1; - } -} - -.street-info.alert { - padding: 0; - margin: 0; -} -.street-search-action-links { - margin-bottom: 1.5em; - border-bottom: 1px solid @gray-lighter; - display: flex; - a { - text-align: center; - display: inline-block; - padding: 10px; - text-transform: uppercase; - font-weight: 600; - color: @brand-primary; - margin: auto 0; - i { - margin-right: 10px; - } - } -} - -.template-name-streetsearch .street-search-action-links a { - border-left: 1px solid @gray-lighter; - border-right: 1px solid @gray-lighter; - min-width: 250px; - &:last-child { - border-left: none; - } -} - -.street-search-header .street-search-action-links { - margin: 0 -15px; - margin-top: 20px; - border-top: 1px solid @gray-lighter; - display: flex; - a { - width: 49%; - border-left: 1px solid @gray-lighter; - &:first-child { - border-left: none; - } - } -} - -.street-search-info-box { - border-left: @finna-infobox-border; - background-color: @finna-infobox-bg; - color: @finna-infobox-color; - max-width: 600px; - margin: 20px 0; - padding: 15px; - font-size: 15px; -} - -.template-name-streetsearch .introduction .introduction-text { - background-color: @brand-primary; - position: relative; - display: inline-block; - max-width: 450px; - padding: 1em; - margin-bottom: 1em; - border-radius: 5px 5px 5px 0; - h2.introductionText{ - font-weight: 400; - &:before { - content: ""; - position: absolute; - bottom: -12px; - margin: auto; - left: 0; - border-width: 0 0 12px 12px; - border-style: solid; - border-color: transparent @brand-primary; - } - } -} diff --git a/themes/finna2/less/finna/survey.less b/themes/finna2/less/finna/survey.less deleted file mode 100644 index f768a8e9388..00000000000 --- a/themes/finna2/less/finna/survey.less +++ /dev/null @@ -1,54 +0,0 @@ -#finna-survey { - display: none; - position: fixed; - width: 300px; - height: 300px; - bottom: -3000px; - left: 0px; - z-index: 20000; - padding: 15px; - border-top-right-radius: 10px; - transition: all 1.0s ease-in-out; - box-shadow: -10px -10px 75px 10px rgba(1,1,1,0.7); - background: url('../../finna2/images/finna-survey-museokortti.png?_=1') no-repeat 173px 112px; - background-color: @infobox-background; - background-size: 110px; - - & h2 { - width: 100%; - font-size: 19px; - margin-bottom: 40px; - } - & h3 { - width: 135px; - font-size: 16px; - font-weight: normal; - margin-bottom: 50px; - } - & p { - float: right; - margin: 10px 15px 10px 10px; - } - & .btn-primary { - margin-bottom: 10px; - } - & .icon { - color: @brand-primary; - font-size: 40px; - } - & .icon-background { - right: -15px; - top: -10px; - position: absolute; - background-color: @body-bg; - width: 40px; - height: 40px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - } - @media print { - display: none; - } -} diff --git a/themes/finna2/less/finna/tabs.less b/themes/finna2/less/finna/tabs.less deleted file mode 100644 index 88b78292e4b..00000000000 --- a/themes/finna2/less/finna/tabs.less +++ /dev/null @@ -1,317 +0,0 @@ -.finna-main-tabs, -.authority-recommend -{ - background-color: transparent; - padding-bottom: 15px; - @media(max-width: @screen-sm-max) { - margin: 0px; - padding: 0px; - } - .container { - @media(max-width: @screen-xs-max) { - width: 100%; - } - .tabs-table { - display: table; - width: 100%; - } - } - ul.nav-tabs { - display: flex; - @media(max-width: @screen-xs-max) { - padding-top: 10px; - } - @media(max-width: 390px) { - &.many-tabs > li { - max-width: 64px; - a { - min-height: 70px; - padding: 4px 4px; - font-size: .8em; - } - } - } - > li { - color: @body-bg; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - border-top: 4px solid transparent; - border-bottom: 1px solid transparent; - border-left: 1px solid transparent; - border-right: 1px solid transparent; - background-color: #EDEDED; - border-bottom: 1px solid #919191; - @media (max-width: @screen-sm) { - &:not(.many-tabs) { - flex-basis: 50%; - } - } - &.active { - border-top: 4px solid @main-tabs-active-color; - border-left: 1px solid @main-tabs-border-color; - border-right: 1px solid @main-tabs-border-color; - border-bottom: 1px solid @body-bg; - background-color: @main-tabs-background-color; - box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.25); - a:hover { - border: none; - } - } - > a { - padding: 10px 5px; - margin-bottom: 0; - border: 0; - font-size: 1em; - font-weight: 600; - color: @main-tabs-text-color; - transition: none; - @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { - word-break: break-word; - } - } - >button { - opacity: 1; - padding-left: 0; - color: @main-tabs-active-color; - position: inherit; - z-index: 200; - background-color: transparent; - border: none; - font-size: 18px; - cursor: pointer; - .icon { - cursor: pointer; - } - } - } - } -} - -.search-tabs-recommendations { - border-top: 2px solid @brand-primary; - border-bottom: 2px solid @brand-primary; - padding: @padding-large-horizontal 0 0 0; - - a.title { - display: inline-block; - margin-bottom: 5px; - .searchterms { - font-weight: bold; - } - @media (max-width: @screen-xs-max) { - display: block; - } - } - - .count { - color: @text-muted; - } - - .tab-icon:before { - color: @gray-mid-light; - font-size: 2.5em; - } -} - -// add classes when there are too many tabs to fit on the screen -.tabs-responsive { - width: 100%; - overflow-x: auto; - &::-webkit-scrollbar { - display: none; - } - @media (max-width: @screen-xs-max) { - > .recordTabs { - width: 150%; - margin-left: 0px; - margin-right: 0px; - } - } -} - -// RSS-feed and Linked Events tabs -.feed-tabs .nav-tabs, .linked-events-tabs .nav-tabs { - border-bottom: 1px solid @nav-tabs-border-color; - margin-left: 6px; - > li { - // Make the list-items overlay the bottom border - margin-bottom: -1px; - font-size: 1.1em; - font-weight: 500; - background-color: transparent; - color: @nav-tabs-text-color; - border-bottom: 1px solid transparent; - margin: 0; - padding: .6em 0 0 0; - cursor: pointer; - @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { - .icon { - display: block; - text-align: center; - } - } - @media (max-width: @screen-sm-max) { - font-size: .9em; - } - &:hover { - color: @nav-tabs-link-hover-color; - border-color: transparent; - } - // Active state, and its :hover to override normal :hover - &.active { - cursor: initial; - &, - &:hover, - &:focus { - background-color: @body-bg; - color: @text-color; - margin-bottom: -1px; - border-bottom: none; - transition: 0s; - } - } - a { - margin-right: 0px; - height: 100%; - } - } -} - - -.useraccount-nav.nav-tabs { - border-bottom: none; - // style 5 tabs to make sure they stay as tabs - li:first-child:nth-last-child(5), li:first-child:nth-last-child(5) ~ li { - @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { - max-width: 100%; - } - @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { - max-width: 100%; - } - } - > li { - margin-bottom: 0; - > a { - border: none; - font-weight: 400; - &:hover { - border-bottom-color: @gray-lighter; - } - &.menu-parent { - display: flex; - align-items: center; - justify-content: space-between; - .icon { - font-size: 0.8em; - } - } - } - &:first-child > a { - border-top-left-radius: 4px; - border-top-right-radius: 4px; - } - &:last-child > a { - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - } - &.active > a { - background-color: @gray-ultralight; - border-color: transparent; - border-bottom-color: @gray-lighter; - &, - &:hover, - &:focus { - border: 1px solid transparent; - border-top: 1px solid transparent; - cursor: auto; - font-weight: 600; - } - } - } -} - -.useraccount-nav .collapsing { - -webkit-transition-delay: -1s; - transition-delay: -1s; - visibility: hidden; -} - -.useraccount-nav.nav-tabs .dropdown-menu { - float: none; - position: relative; - top: initial; - left: initial; -} - -.recordTabs.nav { - margin-top: 20px; - .staff-view-icon { - font-size: 1.2em; - line-height: 1em; - } - @media (max-width: @screen-xs-max) { - margin-left: -15px; - margin-right: -15px; - } - @media print { - .record-tab.versions { - display: none; - } - li.record-tab.active { - > a { - border-bottom-color: @nav-tabs-background-color; - } - } - } - li.tab-right { - float:right - } -} - -.record .recordTabs.nav > li > a { - color: @gray; -} - -.mobile-main-tabs { - width: 100%; - .dropdown-toggle { - line-height: 50px; - margin-top: 15px; - background-color: @main-tabs-active-color; - color: mix(@main-tabs-active-color, contrast(@main-tabs-active-color), 5%); - padding: 0 15px; - border-radius: 5px; - display: flex; - cursor: pointer; - .tab-title { - font-size: @font-size-h2; - font-weight: 500; - background: transparent; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - flex-grow: 1; - margin-right: 10px; - } - .more { - display: flex; - align-items: center; - font-size: 85%; - padding-left: 10px; - white-space: nowrap; - .icon { - margin-left: 5px; - font-size: 20px; - } - } - } - .tooltip { - display: none; - } -} - -.loginTabs a { - cursor: default; -} diff --git a/themes/finna2/less/finna/terms-of-service.less b/themes/finna2/less/finna/terms-of-service.less deleted file mode 100644 index 68ecc84e53f..00000000000 --- a/themes/finna2/less/finna/terms-of-service.less +++ /dev/null @@ -1,70 +0,0 @@ -.terms-of-service { - margin-top: 20px; - font-size: 15px; - - & label { - font-weight: initial; - } - - ul { - font-size: 15px; - } -} - -.terms-of-service-text { - margin-bottom: 0.5em; - // Hacks to make the dialog fit the screen since scrolling a modal is erratic - // with Safari on iOS - @media only screen and (-webkit-min-device-pixel-ratio: 1) { - max-height: 200px; - overflow-y: auto; - border: 1px solid @modal-content-border-color; - padding: 0.1em; - @media (min-device-width: 768px) { - max-height: 460px; - } - } - @media only screen and (-webkit-min-device-pixel-ratio: 2) { - max-height: 150px; - overflow-y: auto; - border: 1px solid @modal-content-border-color; - padding: 0.1em; - @media (min-device-width: 375px) { - max-height: 240px; - } - } - @media only screen and (-webkit-min-device-pixel-ratio: 3) { - max-height: 360px; - overflow-y: auto; - border: 1px solid @modal-content-border-color; - padding: 0.1em; - } -} - -.terms-of-service-title { - font-size: 18px; -} - -.terms-of-service-info-box { - background-color: @state-info-bg; - padding-left: 8px; - padding-right: 20px; - padding-top: 10px; - padding-bottom: 10px; - margin-bottom: 20px; - min-height: 100px; -} - -.terms-of-service-logo { - width: 77px; - height: 78px; - margin-bottom: 20px; - margin-right: 10px; - float: left; -} - -.terms-of-service-footnote { - font-size: 14px; - padding-bottom: 5px; - min-height: 60px; -} diff --git a/themes/finna2/less/finna/tooltip.less b/themes/finna2/less/finna/tooltip.less deleted file mode 100644 index 456db5cde38..00000000000 --- a/themes/finna2/less/finna/tooltip.less +++ /dev/null @@ -1,123 +0,0 @@ -.list-group-item , .logoutOptions , .status, .grid-image { - .tooltip-inner { - min-width: auto; - padding: 4px 8px; - text-align: left; - font-size: 0.9em; - font-weight: normal; - box-shadow: none !important; - color: #fff; - background: @gray; - border-radius: 4px; - } - .tooltip.top .tooltip-arrow, .tooltip.top-left .tooltip-arrow, .tooltip.top-right .tooltip-arrow { - border-top-color: @gray; - } - .tooltip.right .tooltip-arrow { - border-right-color: @gray; - } - .tooltip.left .tooltip-arrow { - border-left-color: @gray; - } - .tooltip.bottom .tooltip-arrow, .tooltip.bottom-left .tooltip-arrow, .tooltip.bottom-right .tooltip-arrow { - border-bottom-color: @gray; - } -} -.tooltip-tabs_local { - display: @tooltip-tabs-local; -} -.tooltip-tabs_pci { - display: @tooltip-tabs-pci; -} -.tooltip-facet { - display: @tooltip-facet; - display: block; - top: 14px; - right: 23px; -} -.tooltip-search-pci { - display: @tooltip-search-pci; -} -.tooltip-search-local { - display: @tooltip-search-local; -} -.tooltip-myaccount { - display: @tooltip-myaccount; -} -.tooltip-local-advanced { - display: @tooltip-local-advanced; -} -.tooltip-pci-advanced { - display: @tooltip-pci-advanced; -} -.tooltip-eds-advanced { - display: @tooltip-eds-advanced; -} -.tooltip-summon-advanced { - display: @tooltip-summon-advanced; -} -.tooltip-tabs_local, .tooltip-tabs_pci, .tooltip-facet, .tooltip-search-pci, .tooltip-search-local, .tooltip-search-eds, .tooltip-myaccount { - color: @tooltip-button-color; -} -.tooltip-local-advanced, .tooltip-pci-advanced, .tooltip-eds-advanced, .tooltip-summon-advanced { - color: @link-color; - font-size: .8em; - @media(max-width: @screen-xs-max) { - font-weight: 500; - } -} -.tooltip-image { - .tooltip { - overflow: hidden; - } - .tooltip-arrow { - display: none; - } - i { - margin-left: 0; - position: relative; - text-align: center; - cursor: pointer; - font-style: normal; - padding: 3px; - color: @action-link-color; - font-size: 24px; - &:before { - color: mix(@background-color, contrast(@background-color), 5%); - opacity: 0.8; - } - } - @media (max-width: @screen-sm) { - display: none; - } -} -.finna-main-tabs ul.nav-tabs>li.active>a { - .tooltip-tabs_local, .tooltip-tabs_pci { - color: @gray; - } -} -.tooltip-myaccount { - margin-left: 10px; - color: @gray; - >.icon { - vertical-align: 0px !important; - } -} -.slider { - .tooltip.top .tooltip-inner { - min-width: initial; - padding: 4px 8px; - box-shadow: none; - background: @gray-lighter; - } - .tooltip.top .tooltip-arrow { - border-top-color: @gray-lighter; - } -} - -// Disable status tooltip on touch device -#account-icon.icon { - @media (pointer:coarse) { - pointer-events: none; - } -} diff --git a/themes/finna2/less/finna/video-player.less b/themes/finna2/less/finna/video-player.less deleted file mode 100644 index 05ebb1ad86b..00000000000 --- a/themes/finna2/less/finna/video-player.less +++ /dev/null @@ -1,152 +0,0 @@ -.video-popup { - max-width: 900px; - max-height: 768px; - margin: auto; - width: 100%; - height: 100%; -} - -.video-warning { - text-align: center; -} - -.video-popup, .finna-iframe { - .video-warning { - position: absolute; - bottom: 5%; - background: transparent; - padding: 2px; - left: 10px; - } -} - -#video-player:focus, video:focus { - outline: none; -} - -.video-js-player { - height: 100%; - width: 100%; -} -.inline-video, .video-popup, .finna-iframe { - &.finna-popup { - display: flex; - align-content: center; - justify-content: center; - .popup-iframe-wrapper { - // These values are from examples in https://icareus.fi/videosoittimet/ - position: relative; - width: 100%; - // This padding-top value prevents the player from overflowing - padding-top: 56.25%; - margin: auto; - iframe { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - } - } - } -} -.inline-video-container { - width: 100vw; - position: relative; - left: 50%; - margin-left: -50vw; - background-color: black; - margin-bottom: 10px; - .inline-video { - .embed-responsive-item { - height: 100%; - width: 100%; - } - .finna-iframe.modal-holder { - max-width: 800px; - } - } - .video-accordion { - padding-top: 15px; - } - .video-buttons { - background-color: @gray-ultralight; - } - .video-link-container { - width: 200px; - } - .video-warnings { - padding: 4px 0; - } -} - -.video-warning-icon > img { - width: 32px; - height: 32px; -} - -.video-accordion { - .video-link-container { - border: 1px solid @gray-ultralight; - border-bottom: 0; - max-width: 100%; - display: inline-flex; - align-items: center; - margin-bottom: 15px; - margin-right: 15px; - padding-bottom: 0px; - padding-left: 0px; - text-align: left; - background-color: white; - box-shadow: 2px 4px 3px @gray-lighter; - overflow: hidden; - @media (max-width: @screen-xs-max) { - width: 100%; - } - .icon { - padding: 5px; - font-size: 2.5em; - background-color: @gray-light; - color: white; - &:hover { - cursor: pointer; - } - } - .video-desc { - padding-left: 10px; - padding-right: 10px; - } - } - .active-video { - color: @brand-primary; - .icon { - background-color: @brand-primary; - color: white; - } - } -} - -finna-video { - display: inline-block; - cursor: pointer; - &.btn.btn-link { - padding: 0; - } -} - -.vjs-airplay-button { - .vjs-icon-placeholder { - background: @icon-airplay--default center center no-repeat; - background-size: contain; - display: inline-block; - height: @icon-airplay-size; - width: @icon-airplay-size; - } - - &:hover { - cursor: pointer; - .vjs-icon-placeholder { - background-image: @icon-airplay--hover; - } - } -} diff --git a/themes/finna2/less/finna/wayfinder.less b/themes/finna2/less/finna/wayfinder.less deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/themes/finna2/less/global.less b/themes/finna2/less/global.less deleted file mode 100644 index c300661de82..00000000000 --- a/themes/finna2/less/global.less +++ /dev/null @@ -1,15 +0,0 @@ -// Import global CSS shared by all components - -// Finna Bootstrap overrides (in Bootstrap import order) -@import "global/buttons-bootstrap"; -@import "global/dropdowns-bootstrap"; -@import "global/navs-bootstrap"; -@import "global/navbar-bootstrap"; -@import "global/alerts-bootstrap"; -@import "global/tooltip-bootstrap"; - - -// Finna global CSS -@import "global/buttons"; -@import "global/cc-icons"; -@import "global/icons"; diff --git a/themes/finna2/less/global/alerts-bootstrap.less b/themes/finna2/less/global/alerts-bootstrap.less deleted file mode 100644 index 190568e1911..00000000000 --- a/themes/finna2/less/global/alerts-bootstrap.less +++ /dev/null @@ -1,4 +0,0 @@ -.alert { - border: none; - border-radius: 0; -} diff --git a/themes/finna2/less/global/bootstrap-variable-overrides.less b/themes/finna2/less/global/bootstrap-variable-overrides.less deleted file mode 100644 index 6ad14f62d99..00000000000 --- a/themes/finna2/less/global/bootstrap-variable-overrides.less +++ /dev/null @@ -1,341 +0,0 @@ -// -// Finna Bootstrap Variable Overrides -// -------------------------------------------------- - - -//== Colors -// -//## Gray and brand colors for use across Bootstrap. - -@gray: #2b2b2b; - -@gray-darker: #000; -@gray-dark: #121212; -@gray-light: #595959; -@gray-slightly-lighter: #757575; -@gray-mid-light: #919191; -@gray-lighter: #d1d1d1; -@gray-ultralight: #f7f7f7; - -// Brand Colors -@brand-primary: #007c90; -@brand-secondary: #007c90; -@brand-third: #007c90; -@brand-fourth: #007c90; -@brand-success: #33843B; -@brand-warning: #9E943D; -@brand-danger: #a94442; -@brand-info: #007c90; - -//== Custom Finna styling -@background-color: @gray-light; - - -//-- Z-index master list -// -// Warning: Avoid customizing these values. They're used for a bird's eye view -// of components dependent on the z-axis and are designed to all work together. -// -// Note: These variables are not generated into the Customizer. - -//@zindex-navbar: 1000; -@zindex-dropdown: 1001; -@zindex-popover: 1010; -@zindex-tooltip: 1020; -//@zindex-navbar-fixed: 1030; -//@zindex-modal-background: 1040; -//@zindex-modal: 1050; - -@fa-font-path: "../../bootstrap3/css/fonts"; - - -//== Grid System -// -//## - -@grid-float-breakpoint: 992px; // @screen-md-min - - -//== Scaffolding -// -// ## Settings for some of the most global styles. - -@body-bg: #fff; -@text-color: @gray-dark; -@link-color: #007c90; // defines all link color, also for linked icons -@link-hover-color: @link-color; -@link-hover-decoration: #fff; -@padding-base-vertical: 6px; -@padding-base-horizontal: 12px; -@padding-large-vertical: 10px; -@padding-large-horizontal: 16px; -@padding-small-vertical: 5px; -@padding-small-horizontal: 10px; -@line-height-large: 1.33; -@line-height-small: 1.5; -@component-active-bg: @brand-primary; - - -//== Navbar -// -//## - -// Basics of a navbar -@navbar-height: 64px; -@navbar-margin-bottom: 0px; -@navbar-padding-vertical: 0px; -@navbar-collapse-max-height: auto; -@navbar-default-bg: #fff; - -// Navbar links -@navbar-default-link-color: @text-color; // Color of link texts in navbar - - -//== Navs -// -//## - -//=== Shared nav styles -@nav-link-padding: 0px 15px; -@nav-link-hover-bg: rgba(255,255,255,0.2); -@nav-tabs-border-color: @gray-mid-light; -@nav-tabs-link-hover-border-color: @gray-mid-light; - - -//== Typography -// -//## Font, line-height, and color for body text, headings, and more. - -@font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; -@font-family-serif: PT Serif; -@font-family-monospace: Monaco; -@font-family-base: @font-family-sans-serif; -@font-size-base: 14px; -@font-size-large: ceil((@font-size-base * 1.3)); -@font-size-small: ceil((@font-size-base * 0.85)); -@font-size-h1: floor((@font-size-base * 2.6)); -@font-size-h2: floor((@font-size-base * 1.76)); -@font-size-h3: floor((@font-size-base * 1.6)); -@font-size-h4: floor((@font-size-base * 1.3)); -@font-size-h5: @font-size-base; -@font-size-h6: floor((@font-size-base * 0.85)); -@line-height-base: 1.5; -@line-height-computed: floor((@font-size-base * @line-height-base)); -@headings-font-family: @font-family-base; -@headings-line-height: 1.1; -@headings-color: inherit; -@headings-font-weight: 700; - - -//-- Iconography -// -//## Specify custom locations of the include Glyphicons icon font. Useful for those including Bootstrap via Bower. - -@icon-font-path: "../../finna/css/fonts/"; -@icon-font-name: "finnaicons"; -@icon-font-svg-id: "finnaicons"; - - -//== Components -// -//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). - -@border-radius-base: 4px; -@border-radius-large: 10px; -@border-radius-small: 2px; - - -//== Tables -// -//## - -@table-bg-accent: @gray-ultralight; // Defines color for striped tables used in record details and holdings -//** Border color for table and cell borders. -@table-border-color: transparent; - - -//== Buttons -// -//## For each of Bootstrap's buttons, define text, background and border color. - -@btn-font-weight: 600; -@btn-default-color: @text-color; -@btn-default-bg: #fff; -@btn-default-border: #ccc; -@btn-primary-color: #fff; -@btn-primary-bg: @brand-primary; -@btn-primary-border: darken(@btn-primary-bg, 0%); -@btn-success-color: #fff; -@btn-success-bg: @brand-success; -@btn-success-border: darken(@btn-success-bg, 5%); -@btn-warning-color: @gray-light; -@btn-warning-bg: @brand-warning; -@btn-warning-border: darken(@btn-warning-bg, 5%); -@btn-danger-color: #fff; -@btn-danger-bg: @brand-danger; -@btn-danger-border: darken(@btn-danger-bg, 5%); -@btn-info-color: #fff; -@btn-info-bg: @brand-info; -@btn-info-border: darken(@btn-info-bg, 5%); -@btn-link-disabled-color: @gray-light; - - -//== Forms -// -//## - -@input-border: #666; -@input-border-radius: @border-radius-small; -@input-bg: #fff; - - -//== Dropdowns -// -//## Dropdown menu container and contents. - -@dropdown-bg: @body-bg; -@dropdown-border: mix(@body-bg, contrast(@dropdown-bg), 80%); -@dropdown-divider-bg: #e5e5e5; -@dropdown-link-active-color: #fff; -@dropdown-link-active-bg: @component-active-bg; -@dropdown-link-color: @text-color; -@dropdown-link-hover-color: darken(@text-color, 7%); -@dropdown-link-hover-bg: rgba(1,1,1,0.1); -@dropdown-link-disabled-color: @gray-light; -@dropdown-header-color: @gray-light; -@dropdown-caret-color: #000; -@dropdown-fallback-border: none; - - -//== Pagination -// -//## - -@pagination-color: @link-color; -@pagination-bg: @body-bg; -@pagination-border: transparent; - -@pagination-hover-color: @brand-primary; -@pagination-hover-bg: #f5f5f5; -@pagination-hover-border: transparent; - -@pagination-active-color: #fff; -@pagination-active-bg: @brand-primary; -@pagination-active-border: transparent; - - -//== Pager -// -//## - -@pager-bg: @brand-primary; -@pager-hover-bg: darken(@brand-primary, 0.5%); -@pager-disabled-color: @gray-mid-light; - - -//== Form states and alerts -// -//## Define colors for form feedback states and, by default, alerts. - -@state-success-text: #2d4821; - - -//== Tooltips -// -//## - -//** Tooltip max width -@tooltip-max-width: 300px; -//** Tooltip text color -@tooltip-color: @text-color; -//** Tooltip background color -@tooltip-bg: @body-bg; -@tooltip-opacity: 1; - -//** Tooltip arrow width -@tooltip-arrow-width: 6px; -//** Tooltip arrow color -@tooltip-arrow-color: @brand-primary; -@tooltip-header-color: mix(@tooltip-arrow-color, contrast(@tooltip-arrow-color), 5%); - - -//== Modals -// -//## - -@modal-content-bg: @body-bg; - - -//== Alerts -// -//## Define alert colors, border radius, and padding. - -@alert-padding: 10px; - - -//== List group -// -//## - -//** Background color on `.list-group-item` -@list-group-bg: @body-bg; -@list-group-link-color: @text-color; - - -//== Panels -// -//## -@panel-border-radius: 0px; - - -//== thumbnail -// -//## - -@thumbnail-border: none; - - -//== Badges -// -//## - -@badge-color: lighten(@text-color, 18%); -//** Linked badge text color on hover -@badge-link-hover-color: #fff; -@badge-bg: none; -@badge-font-weight: 400; - - -//== Breadcrumbs -// -//## - -//** Breadcrumb background color -@breadcrumb-bg : #fff; -//** Breadcrumb text color -@breadcrumb-color : @gray-light; -//** Text color of current page in the breadcrumb -@breadcrumb-active-color : @gray-dark; -@breadcrumb-padding-vertical: 10px; -@breadcrumb-padding-horizontal: 10px; - - -//== Wells -// -//## - -@well-bg: mix(@body-bg, contrast(@body-bg), 95%); -@well-border: mix(@body-bg, contrast(@body-bg), 80%); - - -//== Miscellaneous -// -//## - -//** Horizontal line color. -@hr-border: rgba(255,255,255,0.2); - -@cursor-disabled: pointer; -@progress-border-radius: none; -@panel-heading-padding: 0; -@panel-footer-padding: 0; diff --git a/themes/finna2/less/global/buttons-bootstrap.less b/themes/finna2/less/global/buttons-bootstrap.less deleted file mode 100644 index b43571dce7f..00000000000 --- a/themes/finna2/less/global/buttons-bootstrap.less +++ /dev/null @@ -1,28 +0,0 @@ -.btn { - border-radius: @finna-button-radius; - .transition(background .1s ease-in-out); - border: 0; - padding-top: 10px; - padding-bottom: 10px; - font-weight: 500; - &.disabled, - &[disabled], - fieldset[disabled] & { - cursor: not-allowed; - pointer-events: none; // Future-proof disabling of clicks - .opacity(.5); - .box-shadow(none); - } - a { - color: @btn-default-color; - } -} - -.btn-default { - border-radius: @finna-button-radius; - border: 1px solid @btn-default-border; - color: @text-color; - &:hover { - color: @text-color; - } -} diff --git a/themes/finna2/less/global/buttons.less b/themes/finna2/less/global/buttons.less deleted file mode 100644 index ad28fcc7475..00000000000 --- a/themes/finna2/less/global/buttons.less +++ /dev/null @@ -1,18 +0,0 @@ -.btn-outline-primary { - background-color: transparent; - color: @action-link-color; - border: 2px solid @action-link-color; - font-weight: 600; - &:hover, &:focus { - text-decoration: none; - background: @action-link-color; - color: @body-bg; - } -} - -//== Alternate buttons - -.btn-uppercase { - text-transform: uppercase; -} - diff --git a/themes/finna2/less/global/cc-icons.less b/themes/finna2/less/global/cc-icons.less deleted file mode 100644 index 9ef7e1488a4..00000000000 --- a/themes/finna2/less/global/cc-icons.less +++ /dev/null @@ -1,415 +0,0 @@ -.cc -{ - -moz-font-feature-settings: normal; - -moz-font-language-override: normal; - display: inline-block; - font-family: finnaicons; - font-size: inherit; - font-size-adjust: none; - font-stretch: normal; - font-style: normal; - font-variant: normal; - font-weight: normal; - line-height: 1; - text-rendering: auto; -} - -/* makes the font 33% larger relative to the icon container */ -.cc-lg -{ - font-size: 2.33333333em; - line-height: 0.75em; - vertical-align: -15%; -} -.cc-2x -{ - font-size: 3em; -} -.cc-3x -{ - font-size: 4em; -} -.cc-4x -{ - font-size: 5em; -} -.cc-5x -{ - font-size: 6em; -} -.cc-fw -{ - width: 1.28571429em; - text-align: center; -} -.cc-ul -{ - padding-left: 0; - margin-left: 2.14285714em; - list-style-type: none; -} -.cc-ul > li -{ - position: relative; -} -.cc-li -{ - position: absolute; - left: -2.14285714em; - width: 2.14285714em; - top: 0.14285714em; - text-align: center; -} -.cc-li.cc-lg -{ - left: -1.85714286em; -} -.cc-border -{ - padding: .2em .25em .15em; - border: solid 0.08em #eeeeee; - border-radius: .1em; -} -.pull-right -{ - float: right; -} -.pull-left -{ - float: left; -} -.cc.pull-left -{ - margin-right: .3em; -} -.cc.pull-right -{ - margin-left: .3em; -} -.cc-spin -{ - -webkit-animation: cc-spin 2s infinite linear; - animation: cc-spin 2s infinite linear; -} -@-webkit-keyframes cc-spin -{ - 0% - { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% - { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} -@keyframes cc-spin -{ - 0% - { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% - { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} -.cc-rotate-90 -{ - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); -} -.cc-rotate-180 -{ - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); -} -.cc-rotate-270 -{ - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); - -webkit-transform: rotate(270deg); - -ms-transform: rotate(270deg); - transform: rotate(270deg); -} -.cc-flip-horizontal -{ - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1); - -webkit-transform: scale(-1, 1); - -ms-transform: scale(-1, 1); - transform: scale(-1, 1); -} -.cc-flip-vertical -{ - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); - -webkit-transform: scale(1, -1); - -ms-transform: scale(1, -1); - transform: scale(1, -1); -} -:root .cc-rotate-90, -:root .cc-rotate-180, -:root .cc-rotate-270, -:root .cc-flip-horizontal, -:root .cc-flip-vertical -{ - filter: none; -} -.cc-stack -{ - position: relative; - display: inline-block; - width: 2em; - height: 2em; - line-height: 2em; - vertical-align: middle; -} -.cc-stack-1x, -.cc-stack-2x -{ - position: absolute; - left: 0; - width: 100%; - text-align: center; -} -.cc-stack-1x -{ - line-height: inherit; -} -.cc-stack-2x -{ - font-size: 2em; -} -.cc-inverse -{ - color: #ffffff; -} - -/*=========================== -Round Icons -===========================*/ - -/*Share Alike*/ -.cc-sa:before -{ - content: "\E800"; -} -/*Attribution*/ -.cc-by:before -{ - content: "\E862"; -} -/* CC */ -.cc-cc:before -{ - content: "\E905"; -} - -/* Non Derivative */ -.cc-nd:before -{ - content: "\E864"; -} - -/* Non Commercial Euro */ -.cc-nc-eu:before -{ - content: "\E865"; -} - -/* Non Commercial Japan Yen */ -.cc-nc-jp:before -{ - content: "\E866"; -} - -/* Sampling */ -.cc-sampling:before -{ - content: "\E867"; -} - -/* Non Commercial */ -.cc-nc:before -{ - content: "\E868"; -} - -/* Zero */ -.cc-zero:before -{ - content: "\E869"; -} - -/* Public Domain */ -.cc-pd:before -{ - content: "\E86A"; -} - -/* Public Domain Alternative */ -.cc-pd-alt:before -{ - content: "\E86B"; -} - -.cc-remix:before -{ - content: "\E86C"; -} -/* Share*/ -.cc-share:before -{ - content: "\E86D"; -} - -/*=========================== -Banners -===========================*/ - -/* Some Rights Reserved */ -.cc-srr:before -{ - content: "\E86E"; -} - -.cc-BY:before -{ - content: "\E86F"; -} - -/* Creative Commons Logo */ -.cc-logo:before -{ - content: "\E870"; -} - -.cc-by-nd:before -{ - content: "\E871"; -} - -.cc-by-nc-eu:before -{ - content: "\E872"; -} - -.cc-by-nc-nd-eu:before -{ - content: "\E873"; -} - -.cc-by-nc-sa-eu:before -{ - content: "\E874"; -} - -.cc-by-nc-jp:before -{ - content: "\E875"; -} - -.cc-by-nc-nd-jp:before -{ - content: "\E876"; -} - -.cc-by-nc-sa-jp:before -{ - content: "\E877"; -} - -.cc-by-nc-sa:before -{ - content: "\E878"; -} - -.cc-by-nc:before -{ - content: "\E879"; -} - -.cc-publicdomain:before -{ - content: "\E87A"; -} - -.cc-by-nc-nd:before -{ - content: "\E87B"; -} - -.cc-by-sa:before -{ - content: "\E87C"; -} - -/*=========================== -Small Banner -===========================*/ - -/* Zero with Public Domain */ -.cc-ZERO:before, -.cc-zero-public:before -{ - content: "\E87D"; -} -/* Some Rights Reserved */ -.cc-ONE:before, -.cc-SRR:before -{ - content: "\E87E"; -} -/* CC-BY */ -.cc-TWO:before, -.cc-small-by:before -{ - content: "\E87F"; -} -/* CC-BY-SA */ -.cc-THREE:before, -.cc-BY-SA:before -{ - content: "\E880"; -} -/* CC-BY-ND */ -.cc-FOUR:before, -.cc-BY-SA-ND:before -{ - content: "\E881"; -} -/* CC-BY-NC */ -.cc-FIVE:before, -.cc-BY-NC:before -{ - content: "\E882"; -} -/* CC-BY-NC-SA */ -.cc-SIX:before, -.cc-BY-NC-SA:before -{ - content: "\E883"; -} -/* CC-BY-NC-ND */ -.cc-SEVEN:before, -.cc-BY-NC-ND:before -{ - content: "\E884"; -} -/* CC-BLANK */ -.cc-EIGHT:before, -.cc-blank:before -{ - content: "\E885"; -} -/* Public Domain */ -.cc-NINE:before, -.cc-public:before -{ - content: "\E886"; -} \ No newline at end of file diff --git a/themes/finna2/less/global/dropdowns-bootstrap.less b/themes/finna2/less/global/dropdowns-bootstrap.less deleted file mode 100644 index cb5b09547f2..00000000000 --- a/themes/finna2/less/global/dropdowns-bootstrap.less +++ /dev/null @@ -1,45 +0,0 @@ -.caret { - display: initial; - width: initial; - height: initial; - margin-left: initial; - vertical-align: initial; - border: initial; - border-top: none; - - &::before { - font-family: finnaicons; - content: "\e613"; - } -} - -.dropdown-menu { - padding: 0px 1px; - border: 1px solid @dropdown-border; - border-radius: @border-radius-base; - min-width: 0; - .box-shadow(0 6px 12px rgba(0, 0, 0, .275)); - - > li { - border-bottom: 1px solid @gray-lighter; - } - > li:last-child > a, li:last-child { - border-bottom: none; - } - - > li > a { - padding: 7px 15px; - } -} - -.dropdown-menu > li > a { - &:focus { - background-color: inherit; - } - &:hover, - &:active { - text-decoration: none; - color: @dropdown-link-hover-color; - background-color: @dropdown-link-hover-bg; - } -} diff --git a/themes/finna2/less/global/icons.less b/themes/finna2/less/global/icons.less deleted file mode 100644 index 3f0aa485732..00000000000 --- a/themes/finna2/less/global/icons.less +++ /dev/null @@ -1,668 +0,0 @@ -/* This file is for Finna's icon style changes. Do not overwrite icons in this file unless in exceptional cases. The icon configurations and overrides should be made in the theme.config.php file. */ - -/* Icon cursor */ -a .icon:hover, a .icon:hover { - cursor: pointer; -} -.disabled > a [class^="icon"]:hover, .disabled a [class*=" fa-"]:hover { - cursor: not-allowed; -} - -/* Iconlabel */ -.iconlabel:before { - font-family: finnaicons; - font-size: inherit; - font-weight: normal; - font-style: normal; - - /* For safety - reset parent styles, that can break glyph codes*/ - font-variant: normal; - text-transform: none; - - /* Better Font Rendering =========== */ - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -.iconlabel { - color: @text-color; - background: none; - padding: 0px; - font-weight: 400; - margin-right: 10px; - font-size: 1.0em; - &:before { - padding-right: 3px; - font-size: 1.3em; - vertical-align: text-bottom; - } -} -table .iconlabel { - line-height: 1.3em; -} -.template-name-results .iconlabel { - letter-spacing: 0px; - font-size: 1em; -} -.iconlabel[class*="unknownname"]:before, -.iconlabel[class*="personalname"]:before { - content: "\e922"; -} -.iconlabel[class*="corporatename-alt"]:before { - content: "\e921"; -} -.iconlabel[class*="corporatename"]:before { - content: "\e923"; -} -.iconlabel[class*="familyname"]:before { - content: "\e8ba"; -} -.iconlabel[class*="format-1other"]:before, -.iconlabel[class*="format-feed-other"]:before { - content: "\e00d"; -} -.iconlabel[class*="format-1othermicrofilm"]:before, -.iconlabel[class*="format-feed-othermicrofilm"]:before { - font-family: FontAwesome; - content: @fa-var-film; -} -.iconlabel[class*="format-1otherinterview"]:before, -.iconlabel[class*="format-feed-otherinterview"]:before { - font-family: FontAwesome; - content: @fa-var-microphone; -} -.iconlabel.format-book:before, -.iconlabel[class*="format-1book"]:before, -.iconlabel[class*="format-feed-book"]:before { - content: "\e616"; -} -.iconlabel[class*="format-1bookebook"]:before, -.iconlabel[class*="format-1bookebooksection"]:before, -.iconlabel.format-1bookotherelectronic:before, -.iconlabel[class*="format-feed-bookebook"]:before, -.iconlabel[class*="format-feed-bookbooksection"]:before, -.iconlabel.format-feed-bookotherelectronic:before { - content: "\e617"; -} -.iconlabel[class*="format-1bookaudiobook"]:before, -.iconlabel[class*="format-2bookaudiobook"]:before, -.iconlabel[class*="format-feed-bookaudiobook"]:before { - content: "\e8c4"; -} -.iconlabel.format-bookaudiobookdaisy:before, -.iconlabel.format-feed-bookaudiobookdaisy:before { - content: "\e807"; -} -.iconlabel.format-newspaper:before, -.iconlabel.format-journal:before, -.iconlabel[class*="format-1journal"]:before, -.iconlabel[class*="format-feed-journal"]:before, -.iconlabel.format-1othertextephemera:before { - content: "\e001"; -} -.iconlabel[class*="format-1journaleserial"]:before, -.iconlabel[class*="format-1journalearticle"]:before, -.iconlabel[class*="format-1journalejournal"]:before, -.iconlabel[class*="format-1journalenewspaper"]:before, -.iconlabel[class*="format-feed-journaleserial"]:before, -.iconlabel[class*="format-feed-journalearticle"]:before, -.iconlabel[class*="format-feed-journalejournal"]:before, -.iconlabel[class*="format-feed-journalenewspaper"]:before { - content: "\e60d"; -} -.iconlabel[class*="format-1place"]:before, -.iconlabel[class*="format-feed-place"]:before { - content: "\e901"; -} -.iconlabel.format-manuscript:before, -.iconlabel[class*="format-1othertextmanuscript"]:before, -.iconlabel[class*="format-1otherresearchdata"]:before, -.iconlabel[class*="format-1thesis"]:before, -.iconlabel[class*="format-feed-othertextmanuscript"]:before, -.iconlabel[class*="format-feed-otherresearchdata"]:before, -.iconlabel[class*="format-feed-thesis"]:before { - content: "\e00c"; -} -.iconlabel.format-0workofart:before, -.iconlabel[class*="format-1workofart"]:before, -.iconlabel[class*="format-feed-workofart"]:before { - content: "\e00b"; -} -.iconlabel.format-video:before, -.iconlabel[class*="format-1video"]:before, -.iconlabel[class*="format-feed-video"]:before { - content: "\e00a"; -} -.iconlabel[class*="format-1sound"]:before, -.iconlabel[class*="format-feed-sound"]:before { - content: "\e009"; -} - .iconlabel.format-1soundcd:before, - .iconlabel.format-1soundsounddisc:before, - .iconlabel.format-1soundnonmusicalcd:before, - .iconlabel.format-1soundnonmusicaldisc:before, - .iconlabel.format-feed-soundcd:before, - .iconlabel.format-feed-sounddisc:before, - .iconlabel.format-feed-soundnonmusicalcd:before, - .iconlabel.format-feed-soundnonmusicaldisc:before { - content: "\e802"; -} -.iconlabel.format-1soundsoundcassette:before, -.iconlabel.format-1soundnonmusicalcassette:before, -.iconlabel.format-1othertapecassette:before, -.iconlabel.format-1otherdisccartridge:before, -.iconlabel.format-feed-soundsoundcassette:before, -.iconlabel.format-feed-soundnonmusicalcassette:before, -.iconlabel.format-feed-othertapecassette:before, -.iconlabel.format-feed-otherdisccartridge:before { - content: "\e8ad"; -} -.iconlabel.format-photo:before, -.iconlabel[class*="format-1image"]:before, -.iconlabel[class*="format-feed-image"]:before { - content: "\e008"; -} -.iconlabel[class*="format-1document"]:before, -.iconlabel[class*="format-1othertext"]:before, -.iconlabel.format-0manuscript:before, -.iconlabel[class*="format-feed-document"]:before, -.iconlabel[class*="format-feed-othertext"]:before, -.iconlabel.format-feed-manuscript:before { - content: "\e006"; -} -.iconlabel[class*="format-1documentarchive"]:before, -.iconlabel[class*="format-1documentdigitizedarchive"]:before, -.iconlabel[class*="format-1documentseries"]:before, -.iconlabel.format-1documentothercollection:before, -.iconlabel.format-1documentcollection:before, -.iconlabel[class*="format-feed-documentarchive"]:before, -.iconlabel[class*="format-feed-documentdigitizedarchive"]:before, -.iconlabel[class*="format-feed-documentseries"]:before, -.iconlabel.format-feed-documentothercollection:before, -.iconlabel.format-feed-documentcollection:before -{ - content: "\e8cb"; -} -.iconlabel.format-0note:before, -.iconlabel.format-0musicalscore:before, -.iconlabel[class*="format-1musicalscore"]:before, -.iconlabel.format-feed-note:before, -.iconlabel.format-feed-musicalscore:before { - content: "\e005"; -} -.iconlabel.format-0database:before, -.iconlabel.format-feed-database:before { - content: "\e004"; -} -.iconlabel[class*="format-0physicalobject"]:before, -.iconlabel[class*="format-1physicalobject"]:before, -.iconlabel[class*="format-feed-physicalobject"]:before { - content: "\e003"; -} -.iconlabel[class*="format-1map"]:before, -.iconlabel[class*="format-feed-map"]:before -{ - content: "\e002"; -} -.iconlabel.format-0aipa:before, -.iconlabel.format-feed-aipa:before { - content: "\e8cc"; -} -.iconlabel.format-0learningmaterial:before, -.iconlabel.format-feed-learningmaterial:before { - content: "\e971"; -} -.iconlabel[class*="format-1gameboardgame"]:before, -.iconlabel[class*="format-feed-gameboardgame"]:before -{ - content: "\e8c2"; -} -.iconlabel[class*="format-1gamevideogame"]:before, -.iconlabel[class*="format-2gamevideogame"]:before, -.iconlabel[class*="format-feed-gamevideogame"]:before { - font-family: FontAwesome; - content: @fa-var-gamepad; -} -.iconlabel.full-text-available:before { - content: "\e96e"; -} -.iconlabel.peer-reviewed:before { - content: "\e8b6"; -} -.iconlabel.open-access:before { - content: "\e91f"; -} -.iconlabel.cc-license:before { - content: "\e905"; -} -.iconlabel.finna-street:before { - content: "\e60e"; -} -.iconlabel.download:before { - content: "\e910"; -} -.iconlabel.finna-logo:before { - content: "\e913"; -} -.iconlabel.other-records:before { - content: "\e00d"; -} - -/* Navbar */ -// Set navbar logo display only the logo -.navbar-header .fa-finnalogo { - width: 30px; - height: 40px; - background: url('../images/finna-logo.png'); // fallback if no svg support - background: url('../images/finna-logo.svg'); - overflow: hidden; - vertical-align: middle; - background-repeat: no-repeat; - background-position: 0px 2px; - background-size: 340%; -} -.navbar-brand { - & div.navbar-lang-logo { - width: 30px; - height: 40px; - & div.logo-wrapper { - position: absolute; - overflow: hidden; - width: 30px; - height: 40px; - & img { - position: relative; - top: -2px; - vertical-align: middle; - max-width: 340%; - } - } - } -} -.logo .finnalogo { - display: inline-block; - width: 250px; - height: 63px; - background: url('../../finna/images/finnafi-logo.png'); // fallback if no svg support - background: url('../../finna/images/finnafi-logo.svg'); - background-repeat: no-repeat; - background-size: 100%; - @media (max-width: @screen-xs-max) { - width: (250px*0.8); - height: (63px*0.8); - } - &:hover { - cursor: pointer; - } -} - -/* Browsebar */ -.browsebar [class*=" fa-"], .browsebar .icon { - text-align: initial; -} - -/* Spinner */ -#description_text .fa-spinner { - position: absolute; - right: 15px; - top: 0; -} - -/* Serachbox */ -.searchbox .btn-link { - .search-advanced-icon { - margin-right: 5px; - font-size: 20px; - line-height: 20px; - } - .search-icon { - margin-right: 5px; - font-size: 16px; - } -} - -/* Hierarchical facets */ -.sidebar .list-group-item i.fa.fa-square-o { - display: none; -} -.list-group-item.active i.fa.fa-check-square-o, .sidebar .list-group-item .main.applied i.fa.fa-check-square-o, .sidebar .facet .active i.fa.fa-check { - font-size: 12px; - margin-top: 4px; - margin-right: 0px; - float: right; - text-decoration: none; - transition: all 0.2s ease-in-out; -} -.facet-tree > li a.active:hover { - text-decoration:line-through; -} -.list-group-item.active i.fa.fa-check-square-o:before, .sidebar .list-group-item .main.applied i.fa.fa-check-square-o:before, .sidebar .list-group.facet a.list-group-item.active i.fa.fa-check:before { - content: "\f00c"; - color: @link-color; -} - -/* Rotate 360 degrees */ -.icon--spin { - animation: spin 1s linear infinite; -} -@keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -/* Tooltip */ -[class^="tooltip-"] { - &:hover { - cursor: pointer; - } -} - -/* Account */ -#account-icon { - position: relative; - left: 2px; -} - -/* Status styles */ -// Badges -.status { - .badge { - font-weight: 600; - float: right; - margin-left: 4px; - &.ok { - color: @brand-success; - &:before { - font-family: finnaicons; - content:"\e805"; - color: @brand-success; - margin-right: 4px; - } - } - &.warn { - color: @brand-warning; - &:before { - font-family: finnaicons; - content:"\e8b2"; - color: @brand-warning; - margin-right: 4px; - } - } - &.overdue { - color: @brand-danger; - &:before { - font-family: finnaicons; - content:"\e8b3"; - color: @brand-danger; - margin-right: 4px; - } - } - } -} -// Status none -#account-icon .account-status-none { - width: auto; - &:before { - content:""; - } -} -// Status success -.status .fa-bell.text-success:before { - font-family: finnaicons; - color: @brand-success; - content:"\e8b2"; -} -#account-icon .account-status-good.text-success { - width: auto; - &:before { - content:""; - position: absolute; - width: 12px; - height: 12px; - top: 65%; - left: 9px; - background: @brand-success; - border: 2px solid @header-background-color; - border-radius: 50%; - } -} -// Status warning -.status .fa-bell.text-warning:before { - font-family: finnaicons; - color: @brand-warning; - content:"\e8b2"; -} -#account-icon .account-status-warning.text-warning { - width: auto; - &:before { - content:""; - position: absolute; - width: 12px; - height: 12px; - top: 65%; - left: 9px; - background: @brand-warning; - border: 2px solid @header-background-color; - border-radius: 50%; - } -} -// Status danger -.status .fa-exclamation-triangle:before { - font-family: finnaicons; - color: @brand-danger; - content:"\e8b0"; -} -.profile-status.status .fa-exclamation-triangle:before { - color: @brand-warning; -} -#account-icon .account-status-danger.text-danger { - width: auto; - &:before { - content:""; - position: absolute; - width: 12px; - height: 12px; - top: 65%; - left: 9px; - background: @brand-danger; - border: 2px solid @header-background-color; - border-radius: 50%; - } -} - -/* CC icons */ -.cc-cc:before { - content: "\e905"; -} -.cc-by:before { - content: "\e862"; -} -.cc-sa:before { - content: "\e800"; -} -.cc-nd:before { - content: "\e864"; -} -.cc-nd-eu:before { - content: "\e865"; -} - -/* Rights statement icons */ -.rs-inc:before { - font-family: finnaicons; - content: "\e8bc"; -} -.rs-noc:before { - font-family: finnaicons; - content: "\e8bd"; -} -.rs-other:before { - font-family: finnaicons; - content: "\e8be"; -} - -/* Access rights */ -.imagepopup-holder .image-information-holder .access-rights .image-rights .icon { - padding-right: 0; -} -.access-rights .iconlabel { - font-size: @content-font-size-base; - line-height: @content-font-size-base; - margin-right: 0; - padding: 0; - &:before { - padding-right: 0; - } -} - - -/* Datatables icons */ -.datatables-sort-both:before { - font-family: finnaicons; - content: "\e8bf"; -} - -.feed-icon-wrapper { - position: absolute; - width: 40px; - height: 40px; - font-size: 30px; - background-color: #FFFFFF; - border-bottom-right-radius: 6px; - display: flex; - align-items: center; - justify-content: center; - z-index: 100; - &.smaller { - width: 30px; - height: 30px; - font-size: 25px; - } - .feed-icon { - color: #121212; - } -} - -/* Collapse / expand */ -.show--closed, -.collapsed .show--open { - display: none; -} -.collapsed .show--closed { - display: inline; -} - -/* Icon links */ -.icon-link { - display: inline-flex; - gap: 0.25rem; - vertical-align: middle; -} -.icon-link__icon { - flex: none; - padding: 0; - line-height: inherit; - color: inherit; -} - -/* Unicode Icons */ -.icon--unicode:before { - content: attr(data-icon); -} - -/* MD Editable */ -.fa-pen:before { - font-family: finnaicons; - content: "\e016"; -} -.fa-plus-small:before { - font-family: finnaicons; - content: "\e013"; -} -.fa-pagebreak:before { - font-family: finnaicons; - content: "\e8ab"; -} -.details-icon:before { - font-family: finnaicons; - content: "\e8b5"; -} - -/* Arrows */ -.fa-arrow-down:before { - font-family: finnaicons; - content: "\e027"; - } - .fa-arrow-left:before { - font-family: finnaicons; - content: "\e029"; - } - .fa-arrow-right:before { - font-family: finnaicons; - content: "\e025"; - } - .fa-arrow-up:before { - font-family: finnaicons; - content: "\e023"; - } - -/* Spinner */ -.fa-spinner { - &:before { - color: gray; - } -} - -/* 3D */ -.model-3d-icon:before { - font-family: finnaicons; - content: "\e8c0"; -} -.model-viewer-fullscreen:before { - font-family: finnaicons; - content: "\e801"; -} -.model-viewer-statistics:before { - font-family: finnaicons; - content: "\e918"; -} - -/* Share buttons */ -.fa-facebook-button:before { - font-family: finnaicons; - content: "\e036"; -} -.share-buttons .icon, .whatsapp .icon { - color: #fff; - display: flex; - align-items: center; - justify-content: space-around; - width: 26px; - height: 26px; - border-radius: 50%; - &.facebook-icon { - background: #3a5795; - border: 2px solid #3a5795; - color: #fff; - } - &.pinterest-icon { - background: #cb2027; - border: 2px solid #cb2027; - color: #fff; - } - &.twitter-icon { - background: #00aced; - border: 2px solid #00aced; - color: #fff; - } - &.whatsapp-icon { - background: #64d448; - border: 2px solid #64d448; - color: #fff; - } -} - diff --git a/themes/finna2/less/global/navbar-bootstrap.less b/themes/finna2/less/global/navbar-bootstrap.less deleted file mode 100644 index a808194335b..00000000000 --- a/themes/finna2/less/global/navbar-bootstrap.less +++ /dev/null @@ -1,358 +0,0 @@ -.navbar { - max-width: 1300px; // dont fully scale the navigation bar text - .collapse-open-icon { - font-size: 10px; - vertical-align: middle; - margin-top: -2px; - } - .logoutOptions, #loginOptions { - .my-account-icon { - font-size: 1.2em; - color: @action-link-color; - } - .login-icon { - font-size: 1.2em; - } - .login-text { - @media (max-width: @screen-xxs) { - display: none; - } - } - } - .login-text { - @media (max-width: @screen-xxs) { - display: inherit; - } - } -} - -.navbar { - .dropdown .dropdown-menu > li > a > div:not(.description) { - font-weight: bold; - } - .dropdown .dropdown-menu > li > a > div.description { - font-size: .9em; - } -} - -.navbar-collapse { - border-top: 3px solid @brand-primary; - @media (min-width: @grid-float-breakpoint) { - border-top: 0; - box-shadow: none; - } -} - -.navbar-brand { - padding: 0; - line-height: @navbar-height; - max-width: 150px; - display: flex; - align-items: center; - @media (min-width: @grid-float-breakpoint) { - max-width: 200px; - } - .navbar-logo { - font-size: @navbar-logo-height; - color: @logo-color; - } - img { - object-fit: contain; - height: @navbar-logo-height; - width: auto; - } -} - -.navbar-toggle { - position: absolute; - z-index: 30; - right:0; - height: @navbar-height; - width: @navbar-height; - margin:0; - color: @btn-primary-color; - background-color: @brand-primary; - padding: 0; - border-radius: 0; - &:focus { - background: darken(@brand-primary, 10%); - outline: 5px auto -webkit-focus-ring-color; - } - .mobilemenu-bars, .mobilemenu-close { - font-size: 24px; - cursor: pointer; - } - &.collapsed .mobilemenu-close { - display: none; - } - &:not(.collapsed) .mobilemenu-bars { - display: none; - } - &.activated { - animation: bg-blinker .4s ease-in-out .2s 1; - } - @keyframes bg-blinker { - 50% { - background-color: screen(@brand-primary, rgba(255, 255, 255, 0.4)); - } - } -} - -.navbar-nav { - margin: calc((@navbar-padding-vertical / 2) - @navbar-padding-horizontal); - - > li > a { - padding-top: @navbar-padding-vertical; - padding-bottom: @navbar-padding-vertical; - line-height: calc(@navbar-height / 2); - margin-top: calc(@navbar-height / 4); - margin-bottom: calc(@navbar-height / 4); - font-size: @navbar-font-size; - font-weight: @navbar-font-weight; - @media (min-width:@screen-md-min) { - margin-bottom: 0; - } - } - &.language:not(.lang-1):before { - color: @navbar-default-link-color; - content: ''; - height: ((@navbar-height) - 24); - margin-top: calc((@navbar-height - (@navbar-height - 24)) / 2); - - @media (min-width: @grid-float-breakpoint) { - border-left: solid 1px @navbar-default-link-color; - } - } - &.lang-1 { - margin-left: 10px; - } - @media (max-width: @grid-float-breakpoint-max) { - &.lang-1 { - margin-left: -15px; - border-top: 1px solid #000; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); - &:before { - border-left: none; - } - } - // Dropdowns get custom display when collapsed - .open:not(.logoutOptions):not(.browsebar-dropdown):not(#language_menu) .dropdown-menu { - position: static; - float: none; - width: auto; - margin-top: 0; - background-color: transparent; - border: 0; - box-shadow: none; - transition: background-color 0.2s ease-in-out; - padding: 0; - > li > a, - .dropdown-header { - padding: 5px 15px 5px 25px; - } - > li { - border-bottom: none; - &:first-child, &:last-child, &:first-child > a, &:last-child > a { - .border-top-radius(0px); - .border-bottom-radius(0px); - } - } - > li > a { - line-height: @line-height-computed; - white-space: normal; - &:hover, - &:focus { - background-image: none; - background-color: @nav-link-hover-bg; - } - } - } - .open .dropdown-menu { - position: absolute; - float: left; - width: initial; - margin-top: 0; - background-color: @dropdown-bg; - border: 1px solid @dropdown-fallback-border; // IE8 fallback - border: 1px solid @dropdown-border; - border-radius: @border-radius-base; - .box-shadow(0 6px 12px rgba(0,0,0,.275)); - > li > a, - .dropdown-header { - padding: 5px 15px 5px 25px; - } - > li > a { - padding: 7px 15px; - line-height: @line-height-computed; - &:hover, - &:focus, - &:active { - text-decoration: none; - color: @dropdown-link-hover-color; - background-color: @dropdown-link-hover-bg; - } - } - } - } - // Uncollapse the nav - @media (min-width: @grid-float-breakpoint) { - flex-grow: 1; - flex-shrink: 1; - float: initial; - margin: 0; - - &.navbar-main { - margin-bottom: calc(@navbar-height / 4); - } - } - .btn { - vertical-align: baseline; - } -} - -.navbar-nav { - @media(max-width: @screen-sm) { - margin: 0; - } -} - -.navbar-nav > li { - float: none; -} - -.navbar-nav.nav-login { - border-top: 1px solid @gray-lighter; - display: none; - line-height: 64px; - text-align: center; -} - -.navbar-nav>li>.dropdown-menu { - margin-top: -5px; -} - -// Menu position and menu carets -.navbar-nav > li > .dropdown-menu { - margin-top: 0; - .border-top-radius(@border-radius-base); -} - -// Fix dropdowns in navbar for wide screen -@media (min-width: @screen-md-min) { - .navbar .dropdown-menu > li > a { - width: 280px; - white-space: normal; - transition: none; - } -} -#language_menu { - #language_menu_dropdown_button:active { - box-shadow: none; - } - .dropdown-menu { - margin: 0; - background-color: @navbar-default-bg; - } - .lang-icon { - font-size: 1.2em; - color: @action-link-color; - } - .active { - font-weight: bold; - } -} -#language_menu.open { - .dropdown-menu { - position: absolute; - } - a.preserve-anchor { - width: 100%; - } -} -.header-navbar-right { - display: flex; - flex-direction: row; - align-items: baseline; - - div.logoutOptions a:active { - box-shadow: none; - } - div.logoutOptions, #loginOptions { - padding-right: 12px; - margin-top: 8px; - position: relative; - } - - @media (max-width: @screen-sm-max) { - position: absolute; - margin: 0; - line-height: @navbar-height; - top: 0; - right: @navbar-right; - flex: 0 0; - div.logoutOptions, #loginOptions { - margin-top: 0; - } - .dropdown-menu > li > a { - white-space: normal; - } - } -} - -/* Mobile navbar */ -@media(max-width: @grid-float-breakpoint-max) { - .finna-navbar { - position: fixed; - right: 0; - left: 0; - z-index: 100; - top: 0; - border-width: 0 0 1px; - background-color: @header-background-color; - box-shadow: 0 0 3px 3px rgba(0,0,0,0.1); - .navbar-collapse > ul > li { - border-bottom: 1px solid @gray-lighter; - } - .navbar-nav > li.nav-login { - border-bottom: none; - } - .navbar-nav.nav-login { - border-top: none; - display: inherit; - } - } - .navbar-collapse.in { - box-shadow: 0 3px 5px @gray; -/* #SCSS> - max-height: calc(100vh - #{$navbar-height}); -<#SCSS */ -/* #LESS> */ - max-height: ~"calc(100vh - "@navbar-height~")"; -/* <#LESS */ - } - .navbar-header { - padding-left: 10px; - } -} - -@media(max-width: @screen-sm) { - #header-collapse { - padding-left: 0; - padding-right: 0; - } -} - -.navbar .navbar-logo { - height: @navbar-logo-height; - margin-right: 10px; -} - -//Focus outline for dropdowns in Firefox -@supports (-moz-appearance:none) { - a.dropdown-toggle:focus { - outline: none; - } - a.dropdown-toggle:focus-visible { - outline: revert; - } -} diff --git a/themes/finna2/less/global/navs-bootstrap.less b/themes/finna2/less/global/navs-bootstrap.less deleted file mode 100644 index 83070386978..00000000000 --- a/themes/finna2/less/global/navs-bootstrap.less +++ /dev/null @@ -1,153 +0,0 @@ -.nav { - margin-bottom: 12px; - margin-top: 12px; - > li { - display: block; - > a { - transition: background .2s ease-in-out; - } - } -} -@media (min-width:@screen-md-min) { - .nav > li { - display: inline-block; - } -} - -.nav-tabs { - border-bottom: 1px solid @nav-tabs-border-color; - // style 5 tabs to make sure they stay as tabs - > li { - // Make the list-items overlay the bottom border - margin-bottom: -1px; - > a { - font-size: 1.1em; - font-weight: 500; - background-color: transparent; - color: @nav-tabs-text-color; - margin-right: 3px; - padding: .6em .5em; - border: 1px solid transparent; - margin-bottom: 0; - border-radius: 0; - transition: none; - border-top: 4px solid transparent; - @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { - i { - display: block; - text-align: center; - } - } - @media (max-width: @screen-sm-max) { - font-size: .9em; - } - &:hover { - color: @nav-tabs-link-hover-color; - border-color: transparent; - } - } - // Active state, and its :hover to override normal :hover - &.active > a { - &, - &:hover, - &:focus { - background-color: @body-bg; - border: 1px solid @nav-tabs-border-color; - border-top: 4px solid @nav-tabs-active-color; - border-bottom-color: transparent; - transition: border 0.05s linear; - color: @text-color; - } - } - } -} - -@media (max-width:@screen-xs-max) { - .nav-tabs { - text-align: center; - //border-bottom: 5px solid @gray-lighter; - #details { - display: none; - } - > li { - word-wrap: break-word; - } - > li > a { - padding: 0 10px 10px; - background-color: transparent; - border: none; - border-bottom: 5px solid transparent; - margin:0; - i { - display: block; - min-height: 14px; - } - } - > li.active > a { - &, - &:hover, - &:focus { - border: none; - border-bottom: 5px solid @link-color; - } - } - } -} - -.tab-content { - margin-bottom: 20px; - div.dataTables_info { - white-space: normal; - } - #commentList { - margin-bottom: 20px; - } - .comment-wrapper { - padding: 10px; - padding-top: 5px; - margin-bottom: 10px; - .name { - padding-bottom: 4px; - border-bottom: 2px solid @gray-lighter; - } - .comment-text { - padding-top: 5px; - } - .comment-rating { - display: inline-block; - } - .comment-info { - display: inline; - margin-left: 10px; - } - } - .usercomments-tab { - form.comment .rating-holder .info { - float: left; - margin-right: 5px; - } - } - .toc-tab, ul.toc { - margin-left: 10px; - } -} - -// Specified Finna styles for navbar -.nav.nav-absolute { - position: absolute; - margin:0; - line-height: @navbar-height; - top: 0px; - right: 15px; - flex-grow: 0; - flex-shrink: 0; - .dropdown-menu > li > a { - white-space: normal; - } -} - -@media (max-width: @screen-sm-max) { - .nav.nav-absolute { - right: @navbar-right; - } -} diff --git a/themes/finna2/less/global/tooltip-bootstrap.less b/themes/finna2/less/global/tooltip-bootstrap.less deleted file mode 100644 index e640b2b30ad..00000000000 --- a/themes/finna2/less/global/tooltip-bootstrap.less +++ /dev/null @@ -1,38 +0,0 @@ -.tooltip { - max-width: @tooltip-max-width; - - &.top { margin-top: -5px; padding: @tooltip-arrow-width 0; } - &.right { margin-left: 5px; padding: 0 @tooltip-arrow-width; } - &.bottom { margin-top: 5px; padding: @tooltip-arrow-width 0; } - &.left { margin-left: -5px; padding: 0 @tooltip-arrow-width; } - -} - -.tooltip-inner { - min-width: @tooltip-min-width; - padding: 12px 16px; - text-align: left; - font-size: 1.1em; - font-weight: normal; - box-shadow: 0px 0px 20px -10px @body-bg inset; - h4, h5, h6 { - font-size: 16px; - margin-top: 0; - margin: -12px -16px; - margin-bottom: 10px; - padding: 12px 16px 12px; - background-color: @tooltip-arrow-color; - border-top-left-radius: 10px; - border-top-right-radius: 10px; - color: @tooltip-header-color; - } -} - -.tooltip { - &.bottom .tooltip-inner{ - box-shadow: 0px 5px 20px -4px @gray; - } - &.top .tooltip-inner{ - box-shadow: 0px -5px 20px -4px @gray; - } -} diff --git a/themes/finna2/less/global/variables.less b/themes/finna2/less/global/variables.less deleted file mode 100644 index 5595e2dd195..00000000000 --- a/themes/finna2/less/global/variables.less +++ /dev/null @@ -1,340 +0,0 @@ -// -// Finna Variables -// -------------------------------------------------- - - -//== Colors -// - -// Brand Colors - -@logo-color: #fff; -@aoe-brand-primary: #ccf5e7; -@action-link-color: @brand-primary; - -// Extra extra small screen / phone (e.g. iPhone 5) -@screen-xxs: 400px; -@screen-xxs-min: @screen-xxs; -@screen-xxs-max: (@screen-xs-min - 1); - -@screen-xlg: 1400px; -@screen-xlg-min: @screen-xlg; - -//== Custom Finna styling -@background-image-url: url('../images/logo_background.jpg'); -@background-image-attachment: scroll; // set to fixed or scroll (fixed doesnt scoll along with page); -@background-start-color: transparent; // gradient color for background image -@background-end-color: transparent; // gradient color for background image -@background-start-percent: 10%; -@background-end-percent: 100%; -@header-height: 43px; -@navbar-logo-height: 40px; -@logo-height: 66px; -@logo-separator-color: #fff; // Color of hr line under main logo -@header-background-color: @body-bg; // Color of navigation bar top -@header-text-color: @navbar-default-link-color; -@footer-background: @gray-ultralight; -@footer-text-color: @gray; -@finna-search-background: mix(@body-bg, contrast(@body-bg), 95%); // Background color of finna searchbox section -@finna-search-link-color: @text-color; -@finna-main-header-background: @body-bg; // Color of page header background and search results tabs -@finna-searchbox-link-color: @body-bg; // style searchbox link text color contrast with background -@finna-searchbox-link-background: rgba(1,1,1,0.6); // style searchbox links (advanced search etc.) background contrast with background -@finna-record-header-background: @gray-ultralight; -@finna-feedback-color: #fff; -@finna-feedback-background: @brand-primary; -@field-margin-vertical: 20px; -@field-margin-horizontal: 15px; -@finna-text-shadow: 1px 1px 1px black; -@finna-search-input-width: 0.655; //== THIS is percentage Change this if no prefilter-select change to 0.88 -@finna-button-radius: @border-radius-base; // Defines all button radiuses -@finna-header-font-size: 1.6em; -@record-title-font-size: 1.65em; -@record-holdings-title-background: @brand-primary; -@record-holdings-title-color: mix(@record-holdings-title-background, contrast(@record-holdings-title-background), 5%); -@record-holdings-border-color: @gray-lighter; - -//== Finna home page -@introduction-text-color: #fff; -@introduction-text-small-color: #fff; -@introduction-header: 3em; -@home-content-background: @body-bg; // Add custom background color for home main section -@home-1-background: @body-bg; -@home-2-background: @body-bg; -@home-3-background: @body-bg; // change the color of right column -@home-4-background: @body-bg; -@home-left-column-background: none; -@home-right-column-background: @body-bg; -@infobox-background: #f5f5f5; -@infobox-border: none; -@infobox-text-color: @gray; -@infobox-box-shadow: none; - -//== Finna facets -@sidebar-background: @brand-primary; -@sidebar-header-text-color: mix(@sidebar-background, contrast(@sidebar-background), 5%); -@sidebar-header-icon-color: #fff; -@sidebar-border-color: mix(@body-bg, contrast(@body-bg), 80%); -@sidebar-border: 1px solid @sidebar-border-color; -@facet-header-background: @gray-ultralight; -@facet-text-color: mix(@facet-header-background, contrast(@facet-header-background), 5%); -@facet-border-color: mix(@facet-header-background, contrast(@facet-header-background), 80%); - -@display-checkbox-facet-amount: inline-block; // set to none or inline-block -// Applied filters -@filters-background-color: @action-link-color; -@filters-text-color: @body-bg; -@filters-icon-color: @body-bg; -@filterContent-background: @body-bg; -@filterContent-border-color: mix(@filterContent-background, contrast(@filterContent-background), 80%); -@filterContent-text-color: @text-color; -//Search tools -@finna-searchtools-background: @brand-primary; -@finna-searchtools-color: @body-bg; - - -//== Browsebar -@finna-browsebar-background: @brand-primary; -@finna-browsebar-highlight-background: darken(@finna-browsebar-background, 10%); -@finna-browsebar-link-color: @body-bg; - -//== Generated horizontal carousel styles -//== Carousel images background-color -@carousel-slider-background: @gray; -//== Carousel iconlabel color -@carousel-slider-iconlabel-color: #fff; -//== Styling the header of carousel -@carousel-header-background: transparent; -@carousel-header-color: @gray; -@carousel-header-padding: 0; -//== Styling the horizontal header of each slide -@carousel-slide-header-background: rgba(1, 1, 1, 0.6); -@carousel-slide-header-color: #fff; -@carousel-slide-header-text-shadow: 1px 1px 1px black; -//== Vertical slider background -@carousel-verticalslide-header-background: none; -//== Styling the text color and background of each slide -@carousel-text-background-color: rgba(1,1,1,0.75); -@carousel-slide-text-color: rgb(255, 255, 255); -@carousel-slide-link-color: rgb(255, 255, 255); - -//== Similar items carousel styles -@similar-carousel-no-image-background: #f2f2f2; -@similar-carousel-no-image-color: @gray-light; -@similar-carousel-border: none; -@similar-carousel-border-radius: 8px; -@similar-carousel-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25); -@similar-carousel-text-color: @text-color; -@similar-carousel-item-background: #fff; -@similar-carousel-format-text-color: @text-color; -@similar-carousel-format-background: #f2f2f2; - -//== Breakpoint for slider layout -@slider-stacked-breakpoint: @screen-sm; - -//== List feed styles -@list-feed-background: @body-bg; -@list-feed-padding: 10px; - -//== List feed header style -@list-feed-header-background: none; -@list-feed-header-padding: none; -@list-feed-header-color: @gray; - -//== Myreresearch custom styles -@myresearch-header-background: @body-bg; -@myresearch-tabs-color: @gray; -@myresearch-menu-header-font-color: #fff; - -// Finna info box -@finna-infobox-bg: lighten(@brand-primary, 70%); -@finna-infobox-border: 4px solid @brand-primary; -@finna-infobox-color: @brand-primary; - - -//== Typography -// - -@font-size-icon-small: 14px; -@font-size-icon-large: 1.5em; - - -//## Font size, line-height for content pages -@content-font-size-base: 16px; -@content-line-height-base: 1.5; -@content-headings-font-size-h1: floor((@content-font-size-base * 1.777)); -@content-headings-font-size-h2: floor((@content-font-size-base * 1.5)); -@content-headings-font-size-h3: floor((@content-font-size-base * 1.333)); -@content-headings-font-size-h4: floor((@content-font-size-base * 1.15)); -@content-headings-font-size-h5: @content-font-size-base; -@content-headings-font-size-h6: floor((@content-font-size-base * 0.875)); -@content-headings-line-height: @headings-line-height; -@content-headings-color: @gray-dark; -@content-heading-background: @brand-secondary; -@content-nav-bg: @gray-ultralight; - - -//-- Iconography -// - -@full-text-icon-color: #037c90; -@open-access-icon-color: #e88636; -@peer-reviewed-icon-color: #179003; - - -//== Tables -//** Finna tables -@table-finna-record-cell-padding: 3px 0px; - - -//== Forms -// -//## - -@search-input-bg: #fff; - - -//-- Finna Z-index list -// -// These are designed to work with Bootstrap Z-index master list (see bootstrap-variable-overrides). -// Warning: Avoid customizing these values. They're designed to all work together. -// - -@zindex-cookie-consent: 1034; -@zindex-header: 1035; -@zindex-sidebar: 1036; -@zindex-skip-link: 1037; -@zindex-datepicker: 1038; -@zindex-spinner-overlay: 1100; - - -//== Navbar -// -//## - -// Basics of a navbar -@navbar-right: 64px; - -// Navbar links -@navbar-font-size: 1.1em; // Font-size of navbar links -@navbar-font-weight: 500; // Font weight for navbar texts -// Navbar toggle -@navbar-toggle-color: @navbar-default-link-color; - - -//== Navs -// -//## - -//=== Shared nav styles -//== Tabs -@nav-tabs-active-color: @action-link-color; -@nav-tabs-background-color: @body-bg; -@nav-tabs-text-color: @text-color; -@nav-tabs-link-hover-color: @nav-tabs-active-link-hover-color; -@tabs-border-radius: 4px; - -//== Feed nav pills styles -@feed-nav-pills-border-radius: @border-radius-base; -@feed-nav-pills-padding: 0 15px; - -@feed-nav-pills-color: @action-link-color; -@feed-nav-pills-bg: @body-bg; -@feed-nav-pills-border: 1px solid @action-link-color; - -@feed-nav-pills-active-color: @component-active-color; -@feed-nav-pills-active-bg: @component-active-bg; -@feed-nav-pills-active-border: @feed-nav-pills-border; - -@feed-nav-pills-active-hover-bg: @component-active-bg; -@feed-nav-pills-active-hover-color: @component-active-color; -@feed-nav-pills-active-hover-border: @feed-nav-pills-border; - -// Main nav -@main-tabs-active-color: @nav-tabs-active-color; -@main-tabs-background-color: @nav-tabs-background-color; -@main-tabs-text-color: @nav-tabs-text-color; -@main-tabs-border-color: @nav-tabs-border-color; - -//== Pagination -// -//## -@pagination-background: @body-bg; - - -//== Tooltips -// -//## -//** Tooltips for Finna, set to inline or none; -@tooltip-tabs-pci: inline; -@tooltip-tabs-local: inline; -@tooltip-facet: inline; -@tooltip-search-local: inline; -@tooltip-search-pci: inline; -@tooltip-myaccount: inline; -@tooltip-local-advanced: inline; -@tooltip-pci-advanced: inline; -@tooltip-eds-advanced: inline; -@tooltip-summon-advanced: inline; -@tooltip-button-color: @action-link-color; - -@tooltip-min-width: 250px; - - -//== Modals -// -//## -@modal-header-background: @brand-primary; -@modal-header-color: mix(@modal-header-background, contrast(@modal-header-background), 5%); - - -//== Badges -// -//## - -@badge-font-size: 0.9em; - - -//== Breadcrumbs -// -//## -//** @breadcrumbs: false/true -@breadcrumbs: false; -//** Textual separator for between breadcrumb elements (obsolete) -@breadcrumb-separator: "|"; - - -//== Cookie Consent -// -//## -@cookie-consent-background-color: @gray-light; -@cookie-consent-color: #fff; -@cookie-consent-link-color: #fff; -@cookie-consent-button-border: 2px solid #fff; - -//== Cookie Consent Component -:root { - --cc-cookie-category-block-bg: lighten(@gray-base, 93.5%); - --cc-btn-border-radius: @finna-button-radius; -} - -//== Bazaar Browse Bar -@bazaar-browse-bar-background-color: @gray-light; -@bazaar-browse-bar-color: #fff; - -//== Miscellaneous -// -//## - - -@accordion-details-display: none; -@search-tab-tip-bg: #CCF5E7; - -// Airplay icon -@icon-airplay--default: url('../../finna2/images/videojs/ic_airplay_white_24px.svg'); -@icon-airplay--hover: url('../../finna2/images/videojs/ic_airplay_white_24px.svg'); -@icon-airplay-size: 22px; - -// Skip link -@skip-link-color: #fff; -@skip-link-background-color: @action-link-color; diff --git a/themes/finna2/theme.config.php b/themes/finna2/theme.config.php index cc0592039ab..f10d79e2f33 100644 --- a/themes/finna2/theme.config.php +++ b/themes/finna2/theme.config.php @@ -270,9 +270,6 @@ 'components/finna-tabs-nav.js', 'components/finna-truncate.js', ], - 'less' => [ - 'active' => false, - ], 'favicon' => 'favicon.ico', 'icons' => [ 'sets' => [