From dd1ea90413d5da7566168374dcf631f9f408a4f4 Mon Sep 17 00:00:00 2001 From: "Michael B. Klein" Date: Fri, 5 Jul 2024 15:41:26 +0000 Subject: [PATCH] wip --- .gitignore | 1 + app/assets/stylesheets/admin.scss | 10 +- app/assets/stylesheets/application.scss | 21 +- app/assets/stylesheets/avalon.scss | 355 ++++-------------- .../stylesheets/avalon/_accordions.scss | 27 +- app/assets/stylesheets/avalon/_buttons.scss | 20 +- .../stylesheets/avalon/_collections.scss | 32 +- app/assets/stylesheets/avalon/_facets.scss | 54 +-- app/assets/stylesheets/avalon/_footer.scss | 13 +- app/assets/stylesheets/avalon/_form.scss | 98 +---- app/assets/stylesheets/avalon/_header.scss | 16 +- app/assets/stylesheets/avalon/_homepage.scss | 25 +- .../stylesheets/avalon/_loading-spinner.scss | 10 +- .../stylesheets/avalon/_mediaelement.scss | 37 ++ app/assets/stylesheets/avalon/_mixins.scss | 10 +- app/assets/stylesheets/avalon/_modals.scss | 16 +- app/assets/stylesheets/avalon/_nav.scss | 108 ++---- app/assets/stylesheets/avalon/_playlists.scss | 62 +-- app/assets/stylesheets/avalon/_timeliner.scss | 18 +- app/assets/stylesheets/blacklight.scss | 54 +-- .../stylesheets/blacklight_themes/avalon.scss | 12 +- app/assets/stylesheets/branding.scss | 44 +-- app/assets/stylesheets/datatables.css | 96 +++++ app/assets/stylesheets/embed.scss | 116 ++---- .../mejs4/mediaelement-common-styles.scss | 177 +++++++++ .../stylesheets/mejs4/mejs4_link_back.scss | 40 ++ .../mejs4_plugin_add_marker_to_playlist.scss | 139 +++++++ .../mejs4/mejs4_plugin_add_to_playlist.scss | 40 ++ .../mejs4/mejs4_plugin_create_thumbnail.scss | 30 ++ .../mejs4/mejs4_plugin_track_scrubber.scss | 180 +++++++++ app/assets/stylesheets/mejs4_player.scss | 27 ++ app/assets/stylesheets/nestable.scss | 28 +- config/initializers/cache_store.rb | 3 +- package.json | 3 +- 34 files changed, 1122 insertions(+), 800 deletions(-) create mode 100644 app/assets/stylesheets/avalon/_mediaelement.scss create mode 100644 app/assets/stylesheets/datatables.css create mode 100644 app/assets/stylesheets/mejs4/mediaelement-common-styles.scss create mode 100644 app/assets/stylesheets/mejs4/mejs4_link_back.scss create mode 100644 app/assets/stylesheets/mejs4/mejs4_plugin_add_marker_to_playlist.scss create mode 100644 app/assets/stylesheets/mejs4/mejs4_plugin_add_to_playlist.scss create mode 100644 app/assets/stylesheets/mejs4/mejs4_plugin_create_thumbnail.scss create mode 100644 app/assets/stylesheets/mejs4/mejs4_plugin_track_scrubber.scss create mode 100644 app/assets/stylesheets/mejs4_player.scss diff --git a/.gitignore b/.gitignore index d57fb943c7..a6d8eee0c6 100644 --- a/.gitignore +++ b/.gitignore @@ -32,6 +32,7 @@ config/initializers/rubyhorn.rb config/secrets.yml #config/lti.yml +public/assets public/media_objects public/streams public/**/*.m3u8 diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index 3f8d2764ed..d4fbe19e3d 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -1,12 +1,12 @@ -/* - * Copyright 2011-2024, The Trustees of Indiana University and Northwestern +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern * University. Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. - * + * * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software distributed * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 69fc799912..e4faeadebd 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -1,12 +1,12 @@ -/* - * Copyright 2011-2024, The Trustees of Indiana University and Northwestern +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern * University. Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. - * + * * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software distributed * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the @@ -30,20 +30,20 @@ * Require stylesheets for our gems * *= require jquery-ui/datepicker + *= require datatables * * Require all of our vendored stylesheets *= require_tree ../../../vendor/assets/stylesheets/. - *= require_self */ -@import 'bootstrap-sprockets'; +// @import 'bootstrap-sprockets'; @import 'nulib/base/variables'; @import 'branding'; @import 'bootstrap'; @import 'bootstrap-toggle'; @import 'font-awesome'; -@import 'browse_everything/browse_everything_bootstrap4'; +@import 'browse_everything'; @import 'cropperjs/dist/cropper.min'; @@ -55,9 +55,4 @@ @import 'nestable'; @import 'avalon'; - -@import "datatables"; - -@import "video.js/dist/video-js.css"; -@import "@silvermine/videojs-quality-selector/dist/css/quality-selector.css"; @import 'nulib/styles.scss'; diff --git a/app/assets/stylesheets/avalon.scss b/app/assets/stylesheets/avalon.scss index 58110acff5..8d394869c8 100644 --- a/app/assets/stylesheets/avalon.scss +++ b/app/assets/stylesheets/avalon.scss @@ -1,12 +1,12 @@ -/* - * Copyright 2011-2024, The Trustees of Indiana University and Northwestern +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern * University. Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. - * + * * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software distributed * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the @@ -24,6 +24,7 @@ @import 'avalon/form'; // @import 'avalon/header'; /* Don't need it */ @import 'avalon/homepage'; +@import 'avalon/mediaelement'; @import 'avalon/modals'; @import 'avalon/nav'; @import 'avalon/playlists'; @@ -38,21 +39,6 @@ body { } /* Override Bootstrap CSS */ - -/* - Bootstrap 4 has increased global font-size from 14px to 1rem. - This font size of 1rem, gets computed as 16px by browsers, increasing - font-size for text elements. Reset this to 14px. - See https://getbootstrap.com/docs/4.0/migration/#global-changes. -*/ -html { - font-size: 14px; - - @include media-breakpoint-down(md) { - font-size: 12px; - } -} - .alert { margin-bottom: 10px; } @@ -65,28 +51,10 @@ h1, h2 { } -.btn-info { - color: $primary; -} - tr.active-false td { color: $gray; } -// Override Bootstrap CSS from $info for alerts -.alert-info { - background-color: $state-info-bg; - color: $state-info-text; - border-color: $state-info-border; -} - -pre { - background-color: #f5f5f5; - border: 1px solid #ccc; - padding: 9.5px; - border-radius: 4px; -} - input[type='text']#admin_group { margin-bottom: 0; } @@ -137,33 +105,23 @@ div.alert-danger { h3 { margin-top: 0; } - - @include media-breakpoint-down(md) { - h1 { - font-size: 2rem; - } - } } // Generic content spacer .content-block { padding-bottom: 3rem; - - .card { - margin-bottom: 1.5rem; - } } // Dotted line separator from branding guide .separator { - border-bottom: 2px dotted $primary; + border-bottom: 2px dotted $primaryDark; background: white; height: 1px; } /* Headlines / page titles */ .headline { - color: $primary; + color: $primaryDark; font-size: 29.3px; } .sub-headline { @@ -171,19 +129,19 @@ div.alert-danger { } .mobile-hidden { - @include media-breakpoint-down(sm) { + @media (max-width: $screen-xs-max) { display: none !important; } } .sm-hidden { - @include media-breakpoint-down(sm) { + @media (max-width: $screen-sm-max) { display: none !important; } } .desktop-hidden { - @include media-breakpoint-up(md) { + @media (min-width: $screen-sm-min) { display: none !important; } } @@ -212,10 +170,6 @@ div.alert-danger { cursor: help; } -.tooltip-label { - font-weight: bold; -} - .tooltip-label * { cursor: pointer; } @@ -229,10 +183,6 @@ div.alert-danger { margin-right: 0; } - span.twitter-typeahead { - width: 100%; - } - .remove:hover, .remove:active { @extend .btn-danger; @@ -330,6 +280,15 @@ span.constraints-label { margin-bottom: 0px; } +.mejs-poster { + overflow: hidden; + + img { + width: 100%; + height: 100%; + } +} + .role-popover-help *, .popover-help * { cursor: pointer; @@ -355,6 +314,10 @@ span.constraints-label { } } +.ev-browser { + background-color: $white; +} + a[data-trigger='submit'] { text-decoration: none; color: $dark; @@ -387,12 +350,6 @@ a[data-trigger='submit'] { margin-top: 10px; margin-bottom: 10px; } - - @include media-breakpoint-down(sm) { - margin-top: 1rem; - padding: 0; - } - } .index_title { @@ -420,7 +377,6 @@ a[data-trigger='submit'] { #documents .document { padding-bottom: $padding-base-vertical; - margin-left: 1rem; &:last-child { border-bottom: none; @@ -444,7 +400,7 @@ a[data-trigger='submit'] { } } -@include media-breakpoint-down(xs) { +@media (max-width: $screen-xs-max) { #content { .btn { margin-top: 2px; @@ -454,16 +410,15 @@ a[data-trigger='submit'] { #resource_description_content { max-width: 700px; - - .col-form-label { - font-weight: bold; - } } .edit_media_object .form-group { margin-bottom: 0; } +#share-list .tab-content { + margin-bottom: 20px; +} .ready-to-play { .structure.current-stream:before { @@ -522,13 +477,19 @@ div.status-detail { #mediaobject_structure { overflow-x: auto; - @include media-breakpoint-between (md, xl) { + a.structure_toggle, + a.captions_toggle, + a.files_toggle { + cursor: pointer; + } + + @media (max-width: 1199px) and (min-width: 768px) { ul { - width: 100%; + width: 750px; } } - @include media-breakpoint-down (sm) { + @media (max-width: 767px) { ul { width: 730px; } @@ -552,13 +513,6 @@ div.status-detail { } } - .btn-struct { - font-size: $btn-xs-font-size; - height: $btn-xs-height; - padding: $btn-xs-padding; - width: max-content; - } - ul.fileinfo, ul.header { border-top: 1px solid $gray; @@ -617,14 +571,14 @@ div.status-detail { span.tool_label { font-weight: bold; } - - label.file-upload-label { - cursor: pointer; - } } } div.structure_edit { + .modal-dialog { + min-width: 900px; + } + ul { list-style: none; padding: 0; @@ -667,10 +621,6 @@ div.structure_edit { margin-bottom: 10px; margin-top: 4px; } - - .modal-content { - overflow: auto; - } } .item_note_header { @@ -699,18 +649,18 @@ div.structure_edit { width: auto; } -h5.card-title { +h5.panel-title { font-size: 1.15em; padding-left: 0.4em; min-height: 1em; } -.card-header .accordion-toggle:before { +.panel-heading .accordion-toggle:before { font-family: 'FontAwesome'; content: '\f078'; } -.card-header .accordion-toggle.collapsed:before { +.panel-heading .accordion-toggle.collapsed:before { content: '\f054'; } @@ -776,7 +726,6 @@ h5.card-title { .twitter-typeahead { z-index: auto !important; - background-color: $white; } /** @@ -798,12 +747,15 @@ h5.card-title { background: #efefef; margin-bottom: 15px; padding: 10px 15px 0px 15px; + + .visible-inline { + display: inline-block; + } } .associated-files-top-row { font-size: 18px; padding-bottom: 10px; - justify-content: space-between; > span { padding: 0 5px; @@ -818,6 +770,7 @@ h5.card-title { float: right; width: auto; } + } .associated-files-wrapper { input[type='text'] { @@ -834,12 +787,6 @@ h5.card-title { #associated_files, #supplemental_files { - input[type='text'] { - @extend .form-control; - padding: 3px 6px; - height: auto; - } - div.section-files { width: 100%; padding: 5px 0 15px 5px; @@ -848,11 +795,11 @@ h5.card-title { .section-captions { margin-top: 10px; border-top: 1px dotted; + border-bottom: 1px dotted; } .section_files_tool { - padding: 0.75rem; - border-top: 1px dotted; + padding: 5px; .filedata { height: 0px; @@ -881,13 +828,17 @@ h5.card-title { border-color: #f32c1e; } + div.btn-toolbar { + display: flex; + } + span.tool_label { font-weight: bold; } } div.file_view { - margin: 10px 0 5px 20px; + margin: 15px 0 0 20px; ul { padding-left: 20px; @@ -898,20 +849,13 @@ h5.card-title { } } - .caption-form-label { - font-style: italic; - font-weight: bold; - } - - div.supplemental-file-data { - height: 1.5rem; - + div.row { &.is-editing { .display-item { display: none; } .edit-item { - display: flex; + display: block; } button.edit-item { display: inline-block; @@ -919,35 +863,13 @@ h5.card-title { .file-remove { display: none; } - display: flex; } - margin-top: 0.75rem; - - .visible-inline { - display: none; - - .icon-success, .icon-error { - font-size: 1.2rem; - } - } - - .alert { - display: inline; - } - } - - .supplemental-file-form { - float: left; - width: 100%; + margin-top: 5px; } .btn-toolbar { display: flex; float: right; - - .btn { - margin-left: 0.35rem; - } } .edit-item { @@ -970,6 +892,11 @@ h5.card-title { z-index: 1; } +// Input form validation styling +.invalid-feedback { + color: $danger; +} + .is-invalid { border-color: $danger; } @@ -993,6 +920,18 @@ h5.card-title { /** * Collections */ +.collections-list-wrapper { + overflow-x: auto; + + table { + td { + &:nth-child(1) { + width: 20%; + } + } + } +} + .well-vertical-spacer { margin-bottom: 10px; } @@ -1001,18 +940,7 @@ h5.card-title { white-space: pre-wrap; } -.admin-collection-details { - border-radius: 4px; - border: 1px solid #e3e3e3; - background-color: #f5f5f5; - padding: 1.25rem; -} - // Admin Collection list page -#admin-collections-table.table-responsive { - display: table; -} - .row.display-flex { display: flex; flex-direction: row; @@ -1089,7 +1017,7 @@ h5.card-title { .file-upload-buttons { display: block; padding-top: 5px; - min-width: 75px; + min-width: 70px; margin-right: 5px; height: 30px; } @@ -1102,11 +1030,6 @@ h5.card-title { padding-top: 5px; } -.form-disabled { - pointer-events: none; - opacity: 0.4; -} - .fileinput-close { padding-top: 5px; float: none; @@ -1121,21 +1044,18 @@ h5.card-title { text-align: right; } -@include media-breakpoint-up(xs) { +@media (min-width: $screen-xs-max) { .dataTables_length { float: left; } } // Make table body scrollable in mobile devices -@include media-breakpoint-down(md) { +@media (max-width: $screen-xs-max) { .dataTableBody { width: 100%; overflow-x: scroll; } - .pagination { - justify-content: center !important; - } } // Action column of each table @@ -1160,120 +1080,3 @@ td { .btn-light { background-color: $btn-light-bg; } - -.btn-outline { - background-color: $btn-outline-bg-color; - color: $btn-outline-color; - border: 1px solid $btn-outline-border-color; - height: fit-content; - - &:hover { - background-color: $lightgray; - } -} - -.ramp--rails-content { - #addToPlaylistBtn { - svg { - color: $blue; - height: 1.3rem; - margin-right: 0.2rem; - } - } -} - -/* - Override CSS for transcript component imported - from @samvera/ramp -*/ -.ramp--transcript_nav { - padding: 10px 0 0 0; -} - -/* CDL controls on view page styles */ -.cdl-controls { - @include media-breakpoint-down(sm) { - margin-top: 1rem; - } - .remaining-time { - display: flex; - text-align: center; - - @include media-breakpoint-down(sm) { - margin: 0; - } - } - - .remaining-time p { - line-height: 1rem; - margin: 0.25rem; - text-align: left; - @include media-breakpoint-between(sm, md) { - padding: 0.75rem 0; - } - } - - .remaining-time span { - color: #fff; - margin-left: 0.25rem; - padding: 0.15rem 0.25rem; - border-radius: 0.15rem; - background: $primary; - font-size: small; - line-height: initial; - - @include media-breakpoint-between(sm, md) { - padding: 0.75rem 0.25rem; - } - } - - #return-btn { - @include media-breakpoint-down(sm) { - float: right; - } - } -} - -.checkout { - background-color: $dark; - color: $white; - - p { - position: relative; - text-align: center; - @include media-breakpoint-down(md) { - margin-bottom: 0; - } - } - - form { - width: fit-content; - margin: 0 auto; - } - - .centered { - margin: auto; - position: absolute; - width: 50%; - left: 25%; - } - - .centered.video { - top: 50%; - position: absolute; - margin: 0; - transform: translateY(-50%); - } -} - -.checkout.audio { - padding: 1rem; - height: 25%; -} - -.checkout.video { - padding: 3rem; - height: 50%; - position: relative; -} -/* End of CDL controls on view page styles */ diff --git a/app/assets/stylesheets/avalon/_accordions.scss b/app/assets/stylesheets/avalon/_accordions.scss index dc01245d92..b5a672d61b 100644 --- a/app/assets/stylesheets/avalon/_accordions.scss +++ b/app/assets/stylesheets/avalon/_accordions.scss @@ -1,12 +1,12 @@ -/* - * Copyright 2011-2024, The Trustees of Indiana University and Northwestern +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern * University. Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. - * + * * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software distributed * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the @@ -20,7 +20,7 @@ $accordionPadding: 20px; @return -1 * $n * $accordionPadding; } -#accordion.media-show-page { +#accordion.panel-group { margin-top: 10px; position: relative; @@ -36,7 +36,7 @@ $accordionPadding: 20px; } } - .card-title { + .panel-title { .fa-plus-square, .fa-minus-square { font-size: 0.9em; @@ -45,10 +45,6 @@ $accordionPadding: 20px; border: none; background-color: $lightgray; } - - .no-show { - display: none; - } } ul, @@ -66,9 +62,9 @@ $accordionPadding: 20px; left: accordion-indent(1); } - .card-header { + .panel-heading { border-bottom: 1px solid #dddddd; - padding: 0.75rem 1rem 0 1rem; + padding: 7px 10px; ul { padding-left: $accordionPadding; @@ -80,13 +76,10 @@ $accordionPadding: 20px; #collapse_button { float: right; margin-top: -2px; - font-size: $btn-xs-font-size; - height: $btn-xs-height; - padding: $btn-xs-padding; } } - .card-body { + .panel-body { border-top: none; position: relative; diff --git a/app/assets/stylesheets/avalon/_buttons.scss b/app/assets/stylesheets/avalon/_buttons.scss index 9bf7252492..1e8f81385d 100644 --- a/app/assets/stylesheets/avalon/_buttons.scss +++ b/app/assets/stylesheets/avalon/_buttons.scss @@ -1,12 +1,12 @@ -/* - * Copyright 2011-2024, The Trustees of Indiana University and Northwestern +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern * University. Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. - * + * * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software distributed * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the @@ -18,6 +18,10 @@ margin: 0.5em 0; } +.btn-options { + margin-bottom: 1em; +} + button.close { display: block; } @@ -28,6 +32,7 @@ button.close { #share-button { text-align: right; + margin-top: 10px; margin-bottom: 0; a:link, @@ -37,8 +42,3 @@ button.close { text-decoration: none; } } - -.add-to-playlist-form-buttons { - display: flex; - justify-content: flex-end; -} diff --git a/app/assets/stylesheets/avalon/_collections.scss b/app/assets/stylesheets/avalon/_collections.scss index b7069f79a7..bc0f3682b0 100644 --- a/app/assets/stylesheets/avalon/_collections.scss +++ b/app/assets/stylesheets/avalon/_collections.scss @@ -1,12 +1,12 @@ -/* - * Copyright 2011-2024, The Trustees of Indiana University and Northwestern +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern * University. Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. - * + * * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software distributed * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the @@ -22,10 +22,6 @@ } } - .collection-details-wrapper { - justify-content: space-between; - } - .document-thumbnail img { width: 100%; } @@ -43,8 +39,22 @@ .filter-collection-button-wrapper { margin-top: 1rem; } +} - .breadcrumb-item.active { - color: black; +.collection_poster { + display: flex; + justify-content: space-evenly; + + form { + flex: auto; + margin-right: 5px; + } + + form:last-child { + margin-right: 0px; + } + + input.btn { + width: 100%; } } diff --git a/app/assets/stylesheets/avalon/_facets.scss b/app/assets/stylesheets/avalon/_facets.scss index b42dde9444..9f6c8ca585 100644 --- a/app/assets/stylesheets/avalon/_facets.scss +++ b/app/assets/stylesheets/avalon/_facets.scss @@ -1,12 +1,12 @@ -/* - * Copyright 2011-2024, The Trustees of Indiana University and Northwestern +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern * University. Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. - * + * * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software distributed * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the @@ -41,11 +41,11 @@ #facets { padding-bottom: 10px; - .card { + .panel { border-radius: 0px; } - .facet-group { + .panel-group { margin-bottom: 0px; padding-right: 0px; padding-left: 0px; @@ -53,8 +53,6 @@ ul { margin-bottom: 0px; - padding-left: 0px; - list-style: none; } .top-panel-heading { @@ -62,20 +60,8 @@ } } -#content { - .btn-outline-secondary { - color: $primary; - border: 1px solid $gray; - background-color: $white; - - &:hover { - background-color: $lightgray; - } - } -} - div[id*='facet-panel-'] { - @extend .navbar-expand-md; + @extend .navbar-collapse; padding-left: 0 !important; padding-right: 0 !important; border-top: none; @@ -84,6 +70,13 @@ div[id*='facet-panel-'] { } .facets-toggle { + margin-top: -6px; + background-color: $white; + + .icon-bar { + background-color: #888888; + } + margin: 3px; } @@ -102,11 +95,6 @@ div[id*='facet-panel-'] { white-space: pre-line; } -.facet-values li .facet-label .selected, -.facet-values li .facet-count.selected { - color: #333333 !important; -} - .facet-values .facet-label { display: table-cell; position: relative; @@ -132,16 +120,10 @@ div[id*='facet-panel-'] { width: 5em; } -.facets .facet-group { - @include media-breakpoint-up(md) { - display: block; - } - - .card { - margin-bottom: 0px; - } +.facets .panel-group .panel { + margin-top: 0px; } -:not(.facet_limit-active).facet_limit > .card-header { +:not(.facet_limit-active).facet_limit > .panel-heading { background-color: $white; } diff --git a/app/assets/stylesheets/avalon/_footer.scss b/app/assets/stylesheets/avalon/_footer.scss index bd8499adc6..43f8d9b5d5 100644 --- a/app/assets/stylesheets/avalon/_footer.scss +++ b/app/assets/stylesheets/avalon/_footer.scss @@ -1,12 +1,12 @@ -/* - * Copyright 2011-2024, The Trustees of Indiana University and Northwestern +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern * University. Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. - * + * * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software distributed * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the @@ -24,7 +24,6 @@ } footer { - padding-top: 3rem; height: 5rem; line-height: 5rem; @@ -43,7 +42,7 @@ footer { float: right; } - @include media-breakpoint-down(xs) { + @media screen and (max-width: $screen-xs-max) { font-size: 12px; ul { diff --git a/app/assets/stylesheets/avalon/_form.scss b/app/assets/stylesheets/avalon/_form.scss index 28bf7dfda1..70b1787534 100644 --- a/app/assets/stylesheets/avalon/_form.scss +++ b/app/assets/stylesheets/avalon/_form.scss @@ -1,12 +1,12 @@ -/* - * Copyright 2011-2024, The Trustees of Indiana University and Northwestern +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern * University. Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. - * + * * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software distributed * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the @@ -14,21 +14,23 @@ * --- END LICENSE_HEADER BLOCK --- */ -// Copied in from bootstrap-sass -$border-radius-base: 4px !default; +$border-radius-base: 4px !default; // Form-group input fields .form-group .input-group { + width: 100%; .form-control { border-radius: 0; &:first-child { - @extend .rounded-left; + border-top-left-radius: $border-radius-base; + border-bottom-left-radius: $border-radius-base; } &:last-child { - @extend .rounded-right; + border-top-right-radius: $border-radius-base; + border-bottom-right-radius: $border-radius-base; } } @@ -41,32 +43,18 @@ $border-radius-base: 4px !default; } } -.form-group.invalid-feedback { - display: block; - font-size: 100%; -} - -.form-text .close { - cursor: pointer; -} - .form-group .input-group.typed-textarea { - .input-group-prepend:first-of-type { - width: 96%; + .input-group-btn:first-of-type { + width: 100%; - select { + button { width: 100%; text-align: left; - padding: 0.375rem 0.75rem; - background-color: $white; - border-radius: 0; - border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0; } - } - .input-group-prepend:last-of-type, - .input-group-append:last-of-type { + .input-group-btn:last-of-type { button { border-bottom-right-radius: 0; } @@ -99,64 +87,16 @@ label { } .fileinput-submit { - background-color: $blue !important; - border-color: $blue !important; + background-color: $blue !important; + border-color: $blue !important; &:hover { background-color: darken($blue, 15%) !important; } - color: $white !important; + color: $white !important; } .upload-file-wrapper { padding: 5px 5px 0 5px !important; } - -#new_comment { - .form-label { - font-weight: bold; - } -} - -#resource-description { - .input-group { - flex-wrap: nowrap; - } -} - -/* Add to playlist form on item-view page */ -#add-to-playlist-form-group { - .form-check { - padding-bottom: 0.1rem; - } - - .form-check-label { - cursor: pointer; - - .disabled-option { - cursor: not-allowed; - color: $gray; - } - } - - #playlist_item_end, #playlist_item_start { - border-radius: 0.25rem; - border: 1px solid $gray; - padding: 0 0.5rem; - } - - #playlist_item_end:invalid:focus, - #playlist_item_start:invalid:focus { - color: $danger; - box-shadow: 0 0 10px $danger; - border: 1px solid $danger; - } - - #playlist_item_end:valid:focus, - #playlist_item_start:valid:focus { - color: $dark; - box-shadow: none; - border: 1px solid $gray; - } -} diff --git a/app/assets/stylesheets/avalon/_header.scss b/app/assets/stylesheets/avalon/_header.scss index 4bfcc9d099..1e28ba6861 100644 --- a/app/assets/stylesheets/avalon/_header.scss +++ b/app/assets/stylesheets/avalon/_header.scss @@ -1,12 +1,12 @@ -/* - * Copyright 2011-2024, The Trustees of Indiana University and Northwestern +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern * University. Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. - * + * * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software distributed * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the @@ -15,7 +15,7 @@ */ .logo { - @include media-breakpoint-down(sm) { + @media screen and (max-width: $screen-sm-max) { max-width: 120px; } } @@ -28,7 +28,7 @@ .header-logo { flex-grow: 1; - @include media-breakpoint-down(md) { + @media screen and (max-width: $screen-sm-max) { img { max-width: 120px; margin-right: 10px; @@ -68,7 +68,7 @@ header div { border: 0; } - @include media-breakpoint-down(md) { + @media screen and (max-width: $screen-sm-max) { width: inherit; margin: 7px 7px 0 7px; margin-bottom: 1rem; diff --git a/app/assets/stylesheets/avalon/_homepage.scss b/app/assets/stylesheets/avalon/_homepage.scss index 978cfd2d03..8b56beb6f8 100644 --- a/app/assets/stylesheets/avalon/_homepage.scss +++ b/app/assets/stylesheets/avalon/_homepage.scss @@ -1,12 +1,12 @@ -/* - * Copyright 2011-2024, The Trustees of Indiana University and Northwestern +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern * University. Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. - * + * * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software distributed * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the @@ -16,7 +16,6 @@ main.homepage-main { padding-bottom: 0; - padding-top: 0.25rem; .alert { margin-bottom: 40px; @@ -24,7 +23,7 @@ main.homepage-main { } .homepage-splash-wrapper { - margin-top: -1.25rem; + margin-top: -20px; } .homepage-splash-top-section { @@ -33,7 +32,7 @@ main.homepage-main { height: 500px; position: relative; - @include media-breakpoint-down(xs) { + @media screen and (max-width: $screen-xs-max) { height: 350px; } } @@ -51,7 +50,7 @@ main.homepage-main { .global-search-wrapper { width: 400px; - @include media-breakpoint-down(xs) { + @media screen and (max-width: $screen-xs-max) { width: 300px; margin-bottom: 100px; } @@ -73,20 +72,20 @@ main.homepage-main { .homepage-splash-featured-collection { display: flex; - @include media-breakpoint-down(xs) { + @media screen and (max-width: $screen-xs-max) { padding-bottom: 2rem; flex-direction: column; } .homepage-featured-collection-image { width: 100%; - @include media-breakpoint-up(sm) { + @media screen and (min-width: $screen-sm-min) { width: 400px; } - @include media-breakpoint-up(md) { + @media screen and (min-width: $screen-md-min) { width: 500px; } - @include media-breakpoint-up(lg) { + @media screen and (min-width: $screen-lg-min) { width: 600px; } } diff --git a/app/assets/stylesheets/avalon/_loading-spinner.scss b/app/assets/stylesheets/avalon/_loading-spinner.scss index c513496577..0a9848fe37 100644 --- a/app/assets/stylesheets/avalon/_loading-spinner.scss +++ b/app/assets/stylesheets/avalon/_loading-spinner.scss @@ -1,12 +1,12 @@ -/* - * Copyright 2011-2024, The Trustees of Indiana University and Northwestern +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern * University. Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. - * + * * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software distributed * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the diff --git a/app/assets/stylesheets/avalon/_mediaelement.scss b/app/assets/stylesheets/avalon/_mediaelement.scss new file mode 100644 index 0000000000..e373580a19 --- /dev/null +++ b/app/assets/stylesheets/avalon/_mediaelement.scss @@ -0,0 +1,37 @@ +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern + * University. Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed + * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR + * CONDITIONS OF ANY KIND, either express or implied. See the License for the + * specific language governing permissions and limitations under the License. + * --- END LICENSE_HEADER BLOCK --- +*/ + +.mejs-overlay-loading { + border-radius: 50% !important; +} + +.me-cannotplay { + @extend .alert; + @extend .alert-danger; + text-align: center; + visibility: visible !important; +} + +.mejs-time-clip { + background: linear-gradient(#ddd, #ddd); + opacity: 0.3; + height: 14px !important; + top: -3px !important; +} + +.mejs__container { + z-index: 1000; +} diff --git a/app/assets/stylesheets/avalon/_mixins.scss b/app/assets/stylesheets/avalon/_mixins.scss index f6eeb8f70f..d42f84bcad 100644 --- a/app/assets/stylesheets/avalon/_mixins.scss +++ b/app/assets/stylesheets/avalon/_mixins.scss @@ -1,12 +1,12 @@ -/* - * Copyright 2011-2024, The Trustees of Indiana University and Northwestern +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern * University. Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. - * + * * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software distributed * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the diff --git a/app/assets/stylesheets/avalon/_modals.scss b/app/assets/stylesheets/avalon/_modals.scss index e865cc55d8..7089c8a381 100644 --- a/app/assets/stylesheets/avalon/_modals.scss +++ b/app/assets/stylesheets/avalon/_modals.scss @@ -1,12 +1,12 @@ -/* - * Copyright 2011-2024, The Trustees of Indiana University and Northwestern +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern * University. Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. - * + * * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software distributed * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the @@ -27,7 +27,7 @@ } } - .form-text { + .help-block { z-index: 1045; } @@ -54,7 +54,3 @@ } } } - -div[id*="edit_structure"].modal-dialog { - max-width: 75%; -} diff --git a/app/assets/stylesheets/avalon/_nav.scss b/app/assets/stylesheets/avalon/_nav.scss index 2d2fa9577d..091a50d581 100644 --- a/app/assets/stylesheets/avalon/_nav.scss +++ b/app/assets/stylesheets/avalon/_nav.scss @@ -1,12 +1,12 @@ -/* - * Copyright 2011-2024, The Trustees of Indiana University and Northwestern +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern * University. Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. - * + * * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software distributed * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the @@ -14,18 +14,6 @@ * --- END LICENSE_HEADER BLOCK --- */ -// Copied from bootstrap-sass -$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px -$gray-base: #000 !default; -$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee -$gray-darker: lighten($gray-base, 13.5%) !default; // #222 -$state-success-text: #3c763d !default; -$state-success-bg: #dff0d8 !default; -$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default; -$state-info-text: #31708f !default; -$state-info-bg: #d9edf7 !default; -$state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !default; - /** * Overridding Blacklight's brand logo */ @@ -35,17 +23,13 @@ $state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !de background-size: contain; background-color: white; background-position: 20%; - margin-top: 0; } - .navbar-toggler { - @include media-breakpoint-down(sm) { - background: $primary; - margin: 0.5rem 1rem 0.5rem 0.5rem; + .navbar-toggle { + @media screen and (max-width: $screen-xs-max) { + background: $primaryDark; } } - - padding: 0; } .navbar { @@ -61,27 +45,18 @@ $state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !de } } -.navbar-nav .nav-item .nav-link { - @include media-breakpoint-up(md) { - padding: 0.85rem 0.9rem; - } - @include media-breakpoint-down(sm) { - padding-left: 10px; - padding-right: 10px; - } - &:hover, &:focus { - background-color: $yellow; - border-color: $yellow; +.navbar-nav { + > li > a { + @media screen and (max-width: $screen-sm-max) { + padding-left: 10px; + padding-right: 10px; + } } } -.navbar-nav .active > .nav-link { - background-color: $yellow; -} - -.navbar-light { - @include media-breakpoint-down(xs) { - background: $secondary; +.navbar-default { + @media screen and (max-width: $screen-xs-max) { + background: $primaryDark; } } @@ -92,19 +67,21 @@ $state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !de } .navbar-header { - @include media-breakpoint-down(md) { - .row { - display: flex; - } + .row { + margin-left: 6px; + margin-right: 6px; } - @include media-breakpoint-down(sm) { - width: 100%; + @media screen and (max-width: $screen-xs-max) { background: white; box-shadow: 0 0 5px; } } +.container > .navbar-header { + height: auto; +} + .navbar-inner { padding-right: 12px; } @@ -178,25 +155,12 @@ $state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !de /* Manage menu in the nav-bar */ .manage-btn { - height: inherit; + height: 50px; font-size: inherit; border: none; border-radius: 0px; width: 100%; text-align: left; - padding: 0.85rem 0.9rem; - - &:hover { - background-color: $yellow !important; - color: $primary; - - - } -} - -#manage-dropdown:hover .manage-dropdown-menu { - display: block; - margin-top: 0; } .manage-btn:hover { @@ -206,37 +170,23 @@ $state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !de .manage-btn:focus { background-color: $yellow; - color: $secondary; + color: $primaryDark; } .manage-dropdown-menu { - display: none; border: none; border-radius: inherit; - width: max-content; - z-index: 10000; - li { width: 100%; } - - .dropdown-item:hover { - background-color: $yellow; - } - - @include media-breakpoint-down(sm) { - width: 100%; - } } .manage-dropdown { width: 100%; - display: block; } -@include media-breakpoint-down(sm) { +@media (max-width: $screen-xs-max) { .manage-btn { - height: 38px; - padding: 0 0.9rem; + height: 40px; } } diff --git a/app/assets/stylesheets/avalon/_playlists.scss b/app/assets/stylesheets/avalon/_playlists.scss index f0d6e5468b..957640c2c4 100644 --- a/app/assets/stylesheets/avalon/_playlists.scss +++ b/app/assets/stylesheets/avalon/_playlists.scss @@ -1,12 +1,12 @@ -/* - * Copyright 2011-2024, The Trustees of Indiana University and Northwestern +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern * University. Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. - * + * * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software distributed * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the @@ -14,17 +14,30 @@ * --- END LICENSE_HEADER BLOCK --- */ +.playlist-view-wrapper { + #share-button { + margin: -1.6em 1em 1em 0em; + } +} + .playlist-details-headline-wrapper { - margin: 2rem 0 1rem; + margin: 3rem 0 1rem; display: flex; align-items: center; .headline { margin: 0; } + + .playlist-details-edit-button { + padding: 0; + margin-left: 1rem; + font-size: 2rem; + } } .playlist-title { + margin: 20px 0 10px; display: flex; align-items: center; @@ -35,21 +48,19 @@ // Assuming this span is an icon span { font-size: 2rem; - padding: 0 1rem 0 0; + padding: 0 1rem; } } -.playlist-title-wrapper { - width: 100%; - margin: 20px 0 10px; -} - -.playlist-action-button-row.col-sm-4 { - padding-left: 0.75rem; - padding-right:0px; +.playlist-action-button-row { + margin-bottom: 2rem; } .playlist-autoplay-wrapper { + display: flex; + align-items: center; + margin-left: 1em; + .playlist-autoplay-label { font-weight: bold; margin-right: 1rem; @@ -142,16 +153,19 @@ a { cursor: pointer; } -} -.playlist_item_edit { - label.col-form-label { - font-weight: bold; + .pull-right { + text-align: right; + margin-right: 21px; } } -#playlist_edit_div .form-check { - padding-left: 0; +#playlist_view_div { + .dl-horizontal { + dd { + margin-bottom: 5px; + } + } } /* Playlist show page */ @@ -177,9 +191,3 @@ #Playlists_paginate { float: right; } - -/* Playlist copy modal */ -#playlist_title:invalid { - border-color: $danger; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px $danger; -} diff --git a/app/assets/stylesheets/avalon/_timeliner.scss b/app/assets/stylesheets/avalon/_timeliner.scss index 54920b904e..2188b3476d 100644 --- a/app/assets/stylesheets/avalon/_timeliner.scss +++ b/app/assets/stylesheets/avalon/_timeliner.scss @@ -1,12 +1,12 @@ -/* - * Copyright 2011-2024, The Trustees of Indiana University and Northwestern +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern * University. Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. - * + * * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software distributed * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the @@ -33,10 +33,4 @@ left: 0; right: 0; position: absolute; -} - -/* Timeliner copy modal */ -#timeline_title:invalid { - border-color: $danger; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px $danger; -} +} \ No newline at end of file diff --git a/app/assets/stylesheets/blacklight.scss b/app/assets/stylesheets/blacklight.scss index 4e4bd3f9f5..c7ea3c4324 100644 --- a/app/assets/stylesheets/blacklight.scss +++ b/app/assets/stylesheets/blacklight.scss @@ -1,12 +1,12 @@ -/* - * Copyright 2011-2024, The Trustees of Indiana University and Northwestern +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern * University. Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. - * + * * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software distributed * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the @@ -14,6 +14,8 @@ * --- END LICENSE_HEADER BLOCK --- */ +// @import 'bootstrap-sprockets'; + @import 'bootstrap'; @import 'blacklight/blacklight'; @@ -22,42 +24,14 @@ max-width: 160px; } -.no-icon img, img.no-icon { - max-height: 90px; -} - -.btn-outline-primary { - @extend .btn-sm; - @extend .btn-outline; -} - -#sort-dropdown, #per_page-dropdown { - .dropdown-item.active { - color: $dark; - background-color: $white; - } +.nav-pills > li + li { + margin-left: 0px; } -.dl-invert dt { - text-align: left; +.nav-pills > li { + margin-right: 2px; } -// Access control update modal form in Bookmarks -#update_access_control_form { - .item-discovery, .item-access, .special-access { - legend { - border-bottom: 1px solid #e5e5e5; - } - } -} - -// Search constraint remove button -// Needed to override btn-secondary-outline -.applied-filter .remove:hover { - color: white !important; - background-color: #f44336 !important; -} - -.page-item span.page-link { - color: $dark !important; -} +.clear-bookmarks { + margin-left: 0px; +} \ No newline at end of file diff --git a/app/assets/stylesheets/blacklight_themes/avalon.scss b/app/assets/stylesheets/blacklight_themes/avalon.scss index 89df320abc..4fe35c2ca2 100644 --- a/app/assets/stylesheets/blacklight_themes/avalon.scss +++ b/app/assets/stylesheets/blacklight_themes/avalon.scss @@ -1,12 +1,12 @@ -/* - * Copyright 2011-2024, The Trustees of Indiana University and Northwestern +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern * University. Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. - * + * * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software distributed * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the @@ -31,7 +31,7 @@ //@import 'blacklight/grids/susy_grid'; // $background_image: 'blacklight/bg.png'; -$logo_image: asset-url('VarVideo.png'); +$logo_image: 'VarVideo.png'; /* Various elements of search customization share these colors */ diff --git a/app/assets/stylesheets/branding.scss b/app/assets/stylesheets/branding.scss index a2c77cc904..b6519483ea 100644 --- a/app/assets/stylesheets/branding.scss +++ b/app/assets/stylesheets/branding.scss @@ -1,12 +1,12 @@ -/* - * Copyright 2011-2024, The Trustees of Indiana University and Northwestern +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern * University. Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. - * + * * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software distributed * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the @@ -28,14 +28,6 @@ $primary: $nu-purple; $primaryDark: $nu-purple-120; $dark: $rich-black-80; -// Colors not from the Styleguide -$greenBG: scale-color($secondary, $saturation: -40%, $lightness: 60%); -$gray: #999; -$lightgray: #f2f2f2; -$red: #d9534f; -$blue: #2a4d59; -$lightblue: #31708f; - // Generated palate colors from http://colormind.io/ for Avalon style guide // Add new HEX values below to match your organization's flavor of info/success/warning/danger $info: $blue; @@ -52,7 +44,7 @@ $lightgray: $rich-black-20; * https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss */ /* Branding colors */ -$brand-primary: $primary; +$brand-primary: $primaryDark; $brand-success: $success; $brand-info: $info; $brand-warning: $warning; @@ -65,13 +57,13 @@ $padding-base-vertical: 4px; // $headings-font-family: $camptonBold; /* Links */ -$link-color: $primary; -$link-hover-color: $secondary; +$link-color: $primaryDark; +$link-hover-color: $primary; /* Alerts */ -$alert-bg-level: 0; -$alert-border-level: 1; -$alert-color-level: -10; +$alert-success-bg: $success; +$alert-success-text: $white; +$alert-success-border: $success; /* General states (success, info, warning, danger) */ $state-warning-bg: $warning; @@ -116,9 +108,6 @@ $navbar-inverse-toggle-border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) $grid-gutter-width: 16px; /* Buttons */ -$btn-outline-color: $dark; -$btn-outline-border-color: $gray; -$btn-outline-bg-color: $white; $btn-border-radius-base: 0px; $btn-default-color: $white; $btn-default-bg: $primary; @@ -134,23 +123,20 @@ $btn-info-bg: $info; $btn-info-border: $info; $btn-danger-color: $white; $btn-light-bg: $lightgray; -$btn-xs-font-size: 0.85rem; -$btn-xs-height: 1.65rem; -$btn-xs-padding: 0.15rem 0.5rem; /* Pagination */ $pagination-color: $link-color; $pagination-bg: $white; -$pagination-border-color: $gray; +$pagination-border: $gray; $pagination-hover-color: $link-hover-color; $pagination-hover-bg: $lightgray; -$pagination-hover-border-color: $gray; +$pagination-hover-border: $gray; $pagination-active-color: $gray; $pagination-active-bg: $lightgray; -$pagination-active-border-color: $gray; +$pagination-active-border: $gray; $pagination-disabled-color: $gray; $pagination-disabled-bg: $white; -$pagination-disabled-border-color: $gray; +$pagination-disabled-border: $gray; // $nav-tabs-active-link-hover-color: $dark; $input-color: $dark; diff --git a/app/assets/stylesheets/datatables.css b/app/assets/stylesheets/datatables.css new file mode 100644 index 0000000000..fa77d93f17 --- /dev/null +++ b/app/assets/stylesheets/datatables.css @@ -0,0 +1,96 @@ +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern + * University. Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed + * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR + * CONDITIONS OF ANY KIND, either express or implied. See the License for the + * specific language governing permissions and limitations under the License. + * --- END LICENSE_HEADER BLOCK --- +*/ + +/* +*= require datatables/dataTables.bootstrap +* +*optional add '=' enable +* require datatables/extensions/AutoFill/autoFill.bootstrap +* require datatables/extensions/Buttons/buttons.bootstrap +* require datatables/extensions/ColReorder/colReorder.bootstrap +* require datatables/extensions/FixedColumns/fixedColumns.bootstrap +* require datatables/extensions/FixedHeader/fixedHeader.bootstrap +* require datatables/extensions/KeyTable/keyTable.bootstrap +* require datatables/extensions/Responsive/responsive.bootstrap +* require datatables/extensions/RowReorder/rowReorder.bootstrap +* require datatables/extensions/Scroller/scroller.bootstrap +* require datatables/extensions/Select/select.bootstrap +*/ + +table.dataTable { + border-collapse: collapse !important; + border-spacing: 0; +} + +table.dataTable thead tr th, +table.dataTable tbody tr td { + padding: 10px; +} + +table.dataTable a { + text-decoration: underline; +} + +table.dataTable a.btn { + text-decoration: none; +} + +table.dataTable thead .sorting, +table.dataTable thead .sorting_asc, +table.dataTable thead .sorting_desc, +table.dataTable thead .sorting_asc_disabled, +table.dataTable thead .sorting_desc_disabled { + white-space: nowrap; + cursor: pointer; + *cursor: hand; +} + +table.dataTable thead .sorting:after, +table.dataTable thead .sorting_asc:after, +table.dataTable thead .sorting_desc:after, +table.dataTable thead .sorting_asc_disabled:after, +table.dataTable thead .sorting_desc_disabled:after { + position: relative; + left: 5px; + display: inline-block; + content: ''; + width: 1em; + height: 1em; + opacity: 1; + background-repeat: no-repeat; + background-position: center right; +} + +table.dataTable thead .sorting:after { + background-image: url("datatables/sort_both.png"); + bottom: -1px; +} +table.dataTable thead .sorting_asc:after { + background-image: url("datatables/sort_asc.png"); + bottom: -4px; +} +table.dataTable thead .sorting_desc:after { + background-image: url("datatables/sort_desc.png"); + bottom: 1px; +} +table.dataTable thead .sorting_asc_disabled:after { + background-image: url("datatables/sort_asc_disabled.png"); + bottom: -4px; +} +table.dataTable thead .sorting_desc_disabled:after { + background-image: url("datatables/sort_desc_disabled.png"); + bottom: 1px; +} diff --git a/app/assets/stylesheets/embed.scss b/app/assets/stylesheets/embed.scss index 1dfb32109b..5d475e13ef 100644 --- a/app/assets/stylesheets/embed.scss +++ b/app/assets/stylesheets/embed.scss @@ -1,12 +1,12 @@ -/* - * Copyright 2011-2024, The Trustees of Indiana University and Northwestern +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern * University. Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. - * + * * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software distributed * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the @@ -14,103 +14,29 @@ * --- END LICENSE_HEADER BLOCK --- */ -.video-container { +body { + background-color: #000000; + width: 100%; + height: 100%; + margin: 0; + overflow: hidden; position: absolute; } -.video-js { - position: relative; - z-index: 0; +.container-fluid { + padding: 0; } -.video-title { - position: absolute; - z-index: 1; - top: 5px; - left: 8px; -} - -.video-title .video-link { - color: white; - font-size:150%; -} - -.video-js.vjs-playing + .video-title { - display: none; -} - -// @silvermine/videojs-quality-selector -.vjs-menu { - li { - font-size: 1em; - } -} - -.video-js .vjs-control-bar { - /* Audio: Make the controlbar visible by default */ - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - /* Increase the control-bar icons/text size */ - font-size: 120%; -} - -/* Make player height minimum to the controls height so when we hide -video/poster area the controls are displayed correctly. */ -.video-js.vjs-audio { - min-height: 3.7em; -} - -.video-js .vjs-progress-control:hover .vjs-play-progress:after { - display: none; -} - -/* Show poster image when playback ends */ -.video-js.vjs-ended .vjs-poster { - display: block; -} - -.video-js .vjs-current-time { - display: block; -} - -/* Put playhead on top of markers */ -.video-js .vjs-play-progress:before { - z-index: 101; -} - -/* time-control elements */ -.video-js .vjs-time-control { - min-width: 0.5rem; - padding: 0 0.25rem; +.mejs-layers { + pointer-events: none !important; } -.vjs-time-divider { - display: block; +#content, #content > div { + height: 100%; + max-width: none; } -.vjs-duration { - display: block !important; -} - -/* big-play button */ -.video-js .vjs-big-play-button { - margin-left: auto; - margin-right: auto; - height: 2.5rem; - width: 2.5rem; - line-height: 2.5rem; - border-radius: 50%; - scale: 2; - border: 0.1rem solid #fff; -} - -/* captions button selection */ -.captions-on { - border-bottom: 0.45rem ridge; -} - -.vjs-custom-external-link .vjs-icon-placeholder { - font-size: 120%; +.mejs__audio { + position: absolute; + bottom: 0; } diff --git a/app/assets/stylesheets/mejs4/mediaelement-common-styles.scss b/app/assets/stylesheets/mejs4/mediaelement-common-styles.scss new file mode 100644 index 0000000000..d1bfd6afae --- /dev/null +++ b/app/assets/stylesheets/mejs4/mediaelement-common-styles.scss @@ -0,0 +1,177 @@ +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern + * University. Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed + * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR + * CONDITIONS OF ANY KIND, either express or implied. See the License for the + * specific language governing permissions and limitations under the License. + * --- END LICENSE_HEADER BLOCK --- +*/ + +$avalon-primary-color: #84a791; + +// Generic class applied to the Add To Playlist form elements +.mejs-form-wrapper { + max-width: 870px; + background: #696667; + color: white; + padding: 0 20px; + border: 1pt solid #353536; + border-bottom-right-radius: 6pt; + border-bottom-left-radius: 6pt; + + input { + height: 28px; + padding-top: 7px; + } + + select, input, textarea { + width: 100%; + color: black; + } + + textarea { + resize: vertical; + } + + #select2-post_playlist_id-container { + color: black; + text-align: left; + } + +} + +.mejs-form-alert { + width: 100%; + border-radius: 0; + margin-bottom: 0; + + a { + font-weight: bold; + text-decoration: underline; + } + // TODO: Add a close button to alerts? + .close { + float: right; + font-size: 21px; + font-weight: bold; + line-height: 1; + text-shadow: 0 1px 0 white; + opacity: 0.2; + } +} + +// MEJS4 custom highlight for a section within the MEJS time rail element +.mejs-highlight-clip { + background: linear-gradient($avalon-primary-color, $avalon-primary-color); + opacity: 0.55; + height: 24px; + top: -7px; + display: block; + position: relative; + z-index: -1; +} + +// Loading spinner +@keyframes spinner { + to {transform: rotate(360deg);} +} +.spinner { + opacity: .6; + + &::before { + content: ''; + box-sizing: border-box; + position: absolute; + top: 50%; + left: 50%; + width: 100px; + height: 100px; + margin-top: -50px; + margin-left: -50px; + border-radius: 50%; + border: 10px solid #fff; + border-top-color: #84a791; + animation: spinner .8s linear infinite; + } +} + +// Player Controls +.mejs__button { + width: 30px; +} + +.mejs__button > button { + background: transparent image-url('/assets/mejs4_icons-01.svg'); + background-repeat: none; + background-size: 170px 40px; +} + +.mejs__play > button { + background-position: 0px 0px; +} + +.mejs__pause > button { + background-position: -20px 0px; +} + +.mejs__fullscreen-button > button { + background-position: -60px 0px; +} + +.mejs__unfullscreen > button { + background-position: -80px 0px; +} + +.mejs__mute, .mejs__unmute { + width: 36px; +} + +.mejs__mute > button { + background-position: 0px -20px; + width: 25px; +} + +.mejs__unmute > button { + background-position: -25px -20px; + width: 25px; +} + +.mejs__qualities-button > button { + background-position: -40px 0px; + text-indent: 200px; //hide standard text off to the side + margin: 10px 6px; + width: 20px; +} + +.mejs__captions-button > button { + width: 22px; + background-position: -140px -20px; +} + +.mejs__captions-enabled > button { + border-bottom: 2px solid red; + padding: 11px; +} + +.mejs__hd-toggle-button { + width: 35px; +} + +.mejs__hd-toggle-button > button { + width: 27px; + background-position: -141px -2px; + filter: brightness(60%); + -webkit-filter: brightness(60%); +} + +.mejs__hdtoggle-on > button { + filter: none; + -webkit-filter: none; +} diff --git a/app/assets/stylesheets/mejs4/mejs4_link_back.scss b/app/assets/stylesheets/mejs4/mejs4_link_back.scss new file mode 100644 index 0000000000..392d2836d1 --- /dev/null +++ b/app/assets/stylesheets/mejs4/mejs4_link_back.scss @@ -0,0 +1,40 @@ +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern + * University. Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed + * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR + * CONDITIONS OF ANY KIND, either express or implied. See the License for the + * specific language governing permissions and limitations under the License. + * --- END LICENSE_HEADER BLOCK --- +*/ + +/** + * Stylesheet for Avalon custom MediaElement 4 plugin: "Title Link". + */ + +.mejs__title-link { + width: 100%; + z-index: 999; + position: absolute; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.35); +} + +#mejs-title-link a { + color: white; + display: block; + font-size: 12pt; + margin: 10px 15px; +} + +.mejs-link-back-button > button, +.mejs__link-back-button > button { + background-position: -120px -20px; + } diff --git a/app/assets/stylesheets/mejs4/mejs4_plugin_add_marker_to_playlist.scss b/app/assets/stylesheets/mejs4/mejs4_plugin_add_marker_to_playlist.scss new file mode 100644 index 0000000000..e62c39c245 --- /dev/null +++ b/app/assets/stylesheets/mejs4/mejs4_plugin_add_marker_to_playlist.scss @@ -0,0 +1,139 @@ +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern + * University. Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed + * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR + * CONDITIONS OF ANY KIND, either express or implied. See the License for the + * specific language governing permissions and limitations under the License. + * --- END LICENSE_HEADER BLOCK --- +*/ + +/** + * Stylesheet for Avalon custom MediaElement 4 plugin: "Add Marker To Playlist". + */ + +.mejs__add-marker-to-playlist-button > button, +.mejs-add-marker-to-playlist-button > button { + background-position: -100px 0px; + width: 20px; +} + +#markers { + table { + tr { + .display-item { + display: block; + } + button.display-item { + display: inline-block; + } + .edit-item { + display: none; + } + &.is-editing { + .display-item { + display: none; + } + .edit-item { + display: block; + } + button.edit-item { + display: inline-block; + } + } + } + th { + &:nth-child(1) { + width: 50%; + } + &:nth-child(2) { + width: 25%; + } + } + td { + // The Edit/Delte buttons column + &:last-of-type { + position: relative; + + .popover { + min-width: 165px; + } + } + } + } +} + +.scrubber-marker { + width: 1em !important; + top: 0; + transform: translate(-50%, 0%); + position: absolute; +} + +.scrubber-marker:hover { + cursor: pointer; +} + +.mejs__time-rail-marker, +.mejs__time-current-marker, +.mejs__time-float-marker, +.mejs__time-float-current-marker, +.mejs__time-float-corner-marker { + border-radius: 2px; + display: block; + height: 10px; + position: absolute; +} + +.mejs__time-float-marker { + background: #eee; + border: solid 1px #333; + bottom: 20px; + color: #111; + display: none; + height: auto !important; + margin-bottom: 9px; + text-align: center; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + width: 100px !important; +} + +.mejs__time-float-current-marker { + display: block; + position: relative !important; + height: auto !important; + width: 92px !important; + left: 0; + margin: 4px; + text-align: center; +} + +.mejs__time-float-corner-marker { + border: solid 5px #eee; + border-color: #eee transparent transparent; + border-radius: 0; + display: block; + height: 0; + left: 50%; + line-height: 0; + position: absolute; + top: 100%; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + width: 0; +} + +.mejs__time-rail-marker { + margin: 5px 0 0; + width: 100%; + top: 20px; +} diff --git a/app/assets/stylesheets/mejs4/mejs4_plugin_add_to_playlist.scss b/app/assets/stylesheets/mejs4/mejs4_plugin_add_to_playlist.scss new file mode 100644 index 0000000000..ba6b1ed695 --- /dev/null +++ b/app/assets/stylesheets/mejs4/mejs4_plugin_add_to_playlist.scss @@ -0,0 +1,40 @@ +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern + * University. Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed + * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR + * CONDITIONS OF ANY KIND, either express or implied. See the License for the + * specific language governing permissions and limitations under the License. + * --- END LICENSE_HEADER BLOCK --- +*/ + +/** + * Stylesheet for Avalon custom MediaElement 4 plugin: "Add To Playlist". + */ + +$avalon-primary-color: #84a791; + +// Control button on MEJS player +.mejs-add-to-playlist-button > button, +.mejs__add-to-playlist-button > button { + background-position: -50px -20px; + width: 25px; +} + +.add_playlist_item_playlists_no_playlists_message { + a { + color: $avalon-primary-color !important; + } +} + +.playlist-visibility-form-group { + > label:first-of-type { + display: block; + } +} diff --git a/app/assets/stylesheets/mejs4/mejs4_plugin_create_thumbnail.scss b/app/assets/stylesheets/mejs4/mejs4_plugin_create_thumbnail.scss new file mode 100644 index 0000000000..a68f8602ec --- /dev/null +++ b/app/assets/stylesheets/mejs4/mejs4_plugin_create_thumbnail.scss @@ -0,0 +1,30 @@ +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern + * University. Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed + * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR + * CONDITIONS OF ANY KIND, either express or implied. See the License for the + * specific language governing permissions and limitations under the License. + * --- END LICENSE_HEADER BLOCK --- +*/ + +/** + * Stylesheet for Avalon custom MediaElement 4 plugin: "Create Thumbnail". + */ + +.mejs-create-thumbnail-button > button, +.mejs__create-thumbnail-button > button { + background-position: -120px 0px; + } + +#create-thumbnail-modal { + .alert { + padding-right: 35px; + } +} diff --git a/app/assets/stylesheets/mejs4/mejs4_plugin_track_scrubber.scss b/app/assets/stylesheets/mejs4/mejs4_plugin_track_scrubber.scss new file mode 100644 index 0000000000..4b769cf850 --- /dev/null +++ b/app/assets/stylesheets/mejs4/mejs4_plugin_track_scrubber.scss @@ -0,0 +1,180 @@ +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern + * University. Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed + * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR + * CONDITIONS OF ANY KIND, either express or implied. See the License for the + * specific language governing permissions and limitations under the License. + * --- END LICENSE_HEADER BLOCK --- +*/ + +/** + * Stylesheet for Avalon custom MediaElement 4 plugin: "Track Scrubber". + */ + +.mejs-track-scrubber-button, +.mejs__track-scrubber-button { + > button { + background-position: -98px -20px; + } + + &.track-scrubber-hide { + > button { + background-position: -77px -20px; + } + } + } + +.mejs-time-clip { + background: linear-gradient(#DDD,#DDD); + opacity: .3; + height: 14px !important; + top: -3px !important; +} + +.track_scrubber { + max-width: 870px; + background: #696667; + color: white; + padding: 0pt 10pt 10pt 10pt; + border: 1pt solid #353536; + list-style-type: none; + margin: 0; + padding: 0; + bottom: 0; + left: 0; + height: 36px; + width: 100%; + display: flex; + align-items: flex-end; + + &.hidden { + display: none; + } + + div { + list-style-type: none; + background-image: none; + margin: 0; + padding: 0; + width: 26px; + height: 26px; + font-size: 11px; + line-height: 11px; + font-family: Helvetica, Arial; + border: 0; + } + + > div { + display: flex; + flex-direction: row; + justify-content: flex-start; + } + + .mejs-time { + color: #fff; + width: 41.5px; + overflow: hidden; + padding: 2px 5px; + text-align: center; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; + span { + color: #fff; + font-size: 11px; + line-height: 12px; + display: block; + margin: 6px 2px 0 0px; + width: auto; + } + } + /* Start: Progress Bar */ + div.track-mejs-time-rail { + direction: ltr; + width: 80%; + span { + display: block; + position: absolute; + height: 10px; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 1px; + cursor: pointer; + } + .track-mejs-time-total { + height: 20px; + background: #333; + background: rgba(50,50,50,0.8); + background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,30,30,0.8)), to(rgba(60,60,60,0.8))); + background: -webkit-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); + background: -moz-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); + background: -o-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); + background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); + background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8)); + } + .track-mejs-time-current { + background: #84a791; + opacity: .8; + width: 0; + height: 20px; + } + .track-mejs-time-handle { + display: none; + position: absolute; + margin: 0; + width: 10px; + background: #fff; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + cursor: pointer; + border: solid 2px #333; + top: -2px; + text-align: center; + } + .track-mejs-time-float { + position: absolute; + display: none; + background: #eee; + width: 49px; + float: left; + height: 17px; + border: solid 1px #333; + top: -26px; + margin-left: -18px; + text-align: center; + color: #111; + z-index: 1001; + } + .track-mejs-time-float-current { + margin-top: 1.5px; + width: 100%; + float: left; + left: 0; + } + .track-mejs-time-float-corner { + position: absolute; + display: block; + width: 0; + height: 0; + line-height: 0; + border: solid 5px #eee; + border-color: #eee transparent transparent transparent; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + top: 15px; + left: 13px; + } + } + .track-mejs-time-rail:hover .track-mejs-time-handle { + visibility:visible; + } + } diff --git a/app/assets/stylesheets/mejs4_player.scss b/app/assets/stylesheets/mejs4_player.scss new file mode 100644 index 0000000000..0bde43aafb --- /dev/null +++ b/app/assets/stylesheets/mejs4_player.scss @@ -0,0 +1,27 @@ +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern + * University. Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed + * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR + * CONDITIONS OF ANY KIND, either express or implied. See the License for the + * specific language governing permissions and limitations under the License. + * --- END LICENSE_HEADER BLOCK --- +*/ + +/* + *= require mediaelement/mediaelementplayer.scss + *= require mediaelement/plugins/quality.css + *= require mejs4/mediaelement-common-styles.scss + *= require mejs4/mejs4_plugin_add_to_playlist.scss + *= require mejs4/mejs4_plugin_add_marker_to_playlist.scss + *= require mejs4/mejs4_plugin_create_thumbnail.scss + *= require mejs4/mejs4_plugin_track_scrubber.scss + *= require mejs4/mejs4_link_back.scss + *= require mediaelement/plugins/seekmedia.css + */ diff --git a/app/assets/stylesheets/nestable.scss b/app/assets/stylesheets/nestable.scss index af88ba01ba..7905f4bc8f 100644 --- a/app/assets/stylesheets/nestable.scss +++ b/app/assets/stylesheets/nestable.scss @@ -1,12 +1,12 @@ -/* - * Copyright 2011-2024, The Trustees of Indiana University and Northwestern +/* + * Copyright 2011-2020, The Trustees of Indiana University and Northwestern * University. Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. - * + * * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software distributed * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the @@ -62,9 +62,9 @@ tr.dd-item { font-weight: bold; border: 1px solid #ccc; background: #fafafa; - background: -webkit-linear-gradient(to bottom, #fafafa 0%, #eee 100%); - background: -moz-linear-gradient(to bottom, #fafafa 0%, #eee 100%); - background: linear-gradient(to bottom, #fafafa 0%, #eee 100%); + background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%); + background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%); + background: linear-gradient(top, #fafafa 0%, #eee 100%); -webkit-border-radius: 3px; border-radius: 3px; box-sizing: border-box; -moz-box-sizing: border-box; @@ -114,9 +114,9 @@ tr.dd-item { .dd3-content { display: block; margin: 5px 0; padding: 0 0 0 30px; background: #fafafa; - background: -webkit-linear-gradient(to bottom, #fafafa 0%, #eee 100%); - background: -moz-linear-gradient(to bottom, #fafafa 0%, #eee 100%); - background: linear-gradient(to bottom, #fafafa 0%, #eee 100%); + background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%); + background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%); + background: linear-gradient(top, #fafafa 0%, #eee 100%); -webkit-border-radius: 3px; border-radius: 3px; box-sizing: border-box; -moz-box-sizing: border-box; @@ -135,9 +135,9 @@ tr.dd-item { white-space: nowrap; overflow: hidden; border: 1px solid #aaa; background: #ddd; - background: -webkit-linear-gradient(to bottom, #ddd 0%, #bbb 100%); - background: -moz-linear-gradient(to bottom, #ddd 0%, #bbb 100%); - background: linear-gradient(to bottom, #ddd 0%, #bbb 100%); + background: -webkit-linear-gradient(top, #ddd 0%, #bbb 100%); + background: -moz-linear-gradient(top, #ddd 0%, #bbb 100%); + background: linear-gradient(top, #ddd 0%, #bbb 100%); border-top-right-radius: 0; border-bottom-right-radius: 0; } diff --git a/config/initializers/cache_store.rb b/config/initializers/cache_store.rb index 6dee7198d8..80b5f34ac4 100644 --- a/config/initializers/cache_store.rb +++ b/config/initializers/cache_store.rb @@ -16,6 +16,5 @@ config.cache_store = :redis_store, { host: redis_host, port: redis_port, - db: redis_db, - namespace: 'avalon' + db: redis_db } diff --git a/package.json b/package.json index 09b1ea8f57..3ca2daec07 100644 --- a/package.json +++ b/package.json @@ -56,5 +56,6 @@ "scripts": { "start-collection-index": "webpack-dev-server --mode development --config config/webpack/collection_index.js --host 0.0.0.0", "start-collection-view": "webpack-dev-server --mode development --config config/webpack/collection_view.js --host 0.0.0.0" - } + }, + "packageManager": "yarn@1.2.2" }