Koha/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
Owen Leonard ff22a2006b
Bug 33524: Use template wrapper for tabs: Authority editor
This patch updates the authority editor template to replace tab markup
with the use of WRAPPERs. Some CSS and JS has been modified in order to
make the custom style and behavior of the tabs on this page work
correctly with standard Bootstrap tab markup.

To test, apply the patch and go to Authorities -> New authority.

- Confirm that the tabs look correct, with the same style they had
  before the template change.
- The first tab ("0") should be selected by default.
- Confirm that tab-switching works correctly: The tab color should
  change and the list of numbered tags in the menu just below should
  change to match the section.
  - Confirm that these tag number links still work correctly to jump you
    down the page to the corresponding tag.
- Without filling in any mandatory fields, click the "Save" button.
  - You should get an error message about missing mandatory fields.
    - Clicking the "Go to field" link should take you to the correct tab
      and the correct tag.
- Append a hash to the URL to pre-select a tab other than the first one,
  e.g. "/cgi-bin/koha/authorities/authorities.pl?authtypecode=PERSO_NAME#tab5XX_panel"
  The correct tab should be selected upon page load.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
2023-06-09 12:04:59 -03:00

519 lines
8.2 KiB
CSS

form {
display: block;
}
div#toolbar {
border: 0;
margin-bottom: 0;
padding-top: 5px;
}
.tab-content {
border: 0;
border-radius: 0;
padding: 0;
}
.tab-pane h3 {
font-size: 140%;
margin: .3em 0;
}
.tab-pane ul {
margin-bottom: 0;
padding-left: 0;
}
ul li.tag,
ul li.tag li.subfield_line {
list-style-type: none;
padding-left: 30px;
position: relative;
}
ul li.tag::before {
content: " ";
font-size: .8em;
left: 10px;
padding-top: 1.7em;
position: absolute;
top: 0;
}
ul li.tag.sortable_tag::before,
ul li.tag li.subfield_line::before {
color: #999;
content: "\f0c9";
cursor: move;
font-family: FontAwesome;
font-size: .8em;
left: 10px;
position: absolute;
top: 0;
}
li.ui-sortable-helper {
background-color: #E0E0E0;
border-radius: 4px;
max-height: 150px;
padding: 2px;
}
li.ui-sortable-helper ul li {
display: none !important;
}
.sortable_subfield .ui-sortable-helper input.flat {
background-color: transparent;
}
ul li.tag li.subfield_line.ui-sortable-helper::before {
top: 5px;
}
.buttonPlus {
font-weight: bold;
text-decoration: none;
}
.buttonMinus {
font-weight: bold;
text-decoration: none;
}
a.expandfield {
text-decoration: none;
}
#authoritytabs {
margin-bottom: 1em;
margin-top: 1em;
}
.toptabs {
margin-left: -5px;
margin-top: 0;
}
.toptabs .tab-pane {
padding: 1em;
}
.tag {
border-bottom: 2px solid #E4F2DA;
clear: both;
padding: .7em 0;
}
li.subfield_line {
clear: left;
float: left;
padding-bottom: .3em;
width: 100%;
}
li.subfield_line label {
clear: left;
float: left;
font-size: 89%;
padding-right: .4em;
text-align: left;
width: 10em;
}
.subfieldcode img {
cursor: pointer;
}
.tag_title {
font-size: 90%;
padding: .2em 0;
}
.tagnum {
color: #000;
font-size: 130%;
font-weight: bold;
padding: .1em .3em .1em 0;
}
a.tagnum {
color: #000;
font-size: 110%;
font-weight: bold;
padding: .1em .3em .1em 0;
text-decoration: none;
}
.subfield {
color: #00698A;
float: left;
text-align: right;
width: 10em;
}
.subfield.subfield_mandatory {
color: #C00;
}
.subfieldcode {
display: block;
float: left;
}
.labelsubfield {
float: left;
}
#cat_addbiblio .subfieldcode,
#authoritytabs .subfieldcode {
float: none;
}
#cat_addbiblio .labelsubfield,
#authoritytabs .labelsubfield {
float: none;
font-size: 90%;
}
#cat_addbiblio .subfield,
#authoritytabs .subfield {
float: none;
padding: .25em .5em;
}
#cat_addbiblio .subfield label,
#authoritytabs .subfield label {
color: #00698A;
}
.input_marceditor {
float: left;
width: 50%;
}
#cat_addbiblio .input_marceditor,
#authoritytabs .input_marceditor {
float: none;
width: 100%;
}
#cat_addbiblio .subfield_line,
#authoritytabs .subfield_line {
display: flex;
}
#cat_addbiblio .field_marceditor,
#authoritytabs .field_marceditor {
flex-grow: 1;
padding: .25em .5em;
}
#cat_addbiblio .subfield_loop_mandatory,
#authoritytabs .subfield_loop_mandatory {
padding: .25em .5em;
}
.indicator {
box-sizing: content-box;
width: 1em;
}
.item_edit_form .subfield_line {
align-items: flex-start;
display: flex;
flex-basis: 100%;
}
div.item_edit_form ol li label,
div.item_edit_form ol li span.label {
flex-basis: 25%;
font-size: 100%;
margin-right: 1rem;
}
div.item_edit_form ol li {
padding-bottom: 3px;
}
.item_edit_form .input_marceditor {
flex-basis: 50%;
float: none;
}
.item_edit_form textarea.input_marceditor {
width: 31em;
}
div.item_edit_form ol li label:first-child,
fieldset.order_details ol li label:first-child,
div.item_edit_form ol li .label:first-child,
fieldset.order_details ol li .label:first-child {
flex-basis: 25%;
}
#cat_addbiblio .field_marceditor .flatpickr_wrapper {
display: none;
}
.mandatory_marker {
color: #C00;
}
.linktools {
display: block;
white-space: nowrap;
}
.linktools a {
background-color: #FFF;
display: block;
font-size: 75%;
margin: 0 2px;
padding: 2px;
text-align: center;
text-decoration: none;
}
.linktools a:first-child {
border-bottom: 1px solid #DDD;
}
.linktools a:hover {
background-color: #FFC;
}
.subfield_controls {
margin: 0 .5em;
}
#cataloguing_additem_itemlist {
margin-bottom: 1em;
}
tbody tr.active:nth-child( 2n+1 ) td,
tbody tr.active td {
background-color: #FFFFCC;
}
#loading {
background-color: #FFF;
cursor: wait;
height: 100%;
left: 0;
opacity: .7;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
#loading div {
background: transparent url( "../img/loading.gif" ) top left no-repeat;
font-size: 175%;
font-weight: bold;
height: 2em;
left: 50%;
margin: -1em 0 0 -2.5em;
padding-left: 50px;
position: absolute;
top: 50%;
width: 15em;
}
#toolbar {
padding: 5px 0;
}
.toolbar-tabs-container {
flex-basis: 100%;
margin-top: .5em;
}
.toolbar-tabs-container .nav-tabs {
background-color: #FFF;
clear: both;
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 0;
padding-left: 0;
}
.toolbar-tabs-container .nav-tabs li {
background-color: #FFF;
display: flex;
flex-grow: 1;
justify-content: center;
margin-bottom: 0;
text-align: center;
}
.toolbar-tabs-container .nav-tabs li a {
background-color: #71B443;
border: 1px solid #71B443;
border-left: 0;
border-radius: 5px;
border-right: 1px solid #71B443;
color: #FFF;
display: block;
font-weight: bold;
margin: 5px;
padding: .3em 1.5em;
width: 100%;
}
.toolbar-tabs-container .nav-tabs li.selected a {
background-color: #418940;
border-bottom: 1px solid #418940;
border-right: 1px solid #418940;
color: #FFF;
display: block;
font-weight: bold;
margin: 5px;
padding: .3em 1.5em;
text-decoration: none;
width: 100%;
}
.toolbar-tabs-container .nav-tabs li.selected a:hover,
.toolbar-tabs-container .nav-tabs li.selected a:focus {
background-color: #418940;
border: 1px solid #418940;
border-left: 0;
}
.toolbar-tabs-container .nav-tabs li a:hover {
background-color: #418940;
border-bottom: 1px solid #418940;
border-right: 1px solid #418940;
color: #FFF;
display: block;
font-weight: bold;
margin: 5px;
padding: .3em 1.5em;
text-decoration: none;
width: 100%;
}
.tag_anchors_list {
background-color: #FFF;
clear: both;
display: block;
font-size: 95%;
margin-bottom: 0;
padding-left: 0;
}
.tag_anchor.selected {
font-weight: bold;
}
.tag_anchors {
display: none;
padding: .5em 0;
}
.tag_anchors a {
border-right: 1px solid #CCC;
display: inline-block;
padding: 0 .4em;
}
.tag_anchors.tab_selected {
display: inline-block;
}
.matching_authority {
color: #99FF99;
}
.no_matching_authority {
color: #FFAAAA;
}
.matching_authority_field {
background-color: #99FF99 !important;
}
.no_matching_authority_field {
background-color: #FFAAAA !important;
}
.show-errors {
background: #FFEC8C none;
border-color: #E0C726;
color: #000;
display: none;
text-shadow: none;
}
.floating .show-errors {
display: inline-block;
}
@media ( min-width: 768px ) {
li.subfield_line label {
width: 20em;
}
.input_marceditor {
width: 50em;
}
.subfield {
width: 14em;
}
}
@media ( min-width: 1200px ) {
li.subfield_line label {
width: 25em;
}
.input_marceditor {
width: 60em;
}
.subfield {
width: 16em;
}
}
#authoritiestabs .marc_field {
border-radius: 3px;
display: inline-block;
padding: .3em;
}
#authoritiestabs .marc_subfield {
color: #666;
font-weight: bold;
}
#authoritiestabs .marc_subfield_desc {
color: #00698A;
font-style: italic;
}
#authoritiestabs .auth_subfield {
display: flex;
}
#authoritiestabs .tag {
padding: .4em 0;
}
#authoritiestabs .tag_desc {
color: #026;
}
#authoritiestabs .tag_num {
color: #080;
}
#authoritiestabs .tag_title {
font-size: 100%;
font-weight: bold;
padding: 0;
}