diff --git a/DistFiles/localization/en/Bloom.xlf b/DistFiles/localization/en/Bloom.xlf index 785b86a3d9b2..f9b9db1139c6 100644 --- a/DistFiles/localization/en/Bloom.xlf +++ b/DistFiles/localization/en/Bloom.xlf @@ -1174,6 +1174,11 @@ This sentence is too long for this level. ID: EditTab.EditTab.Toolbox.LeveledReaderTool.SentenceTooLong + + Bloom Enterprise Settings + ID: EditTab.EnterpriseSettingsButton + Text of button that appears when Bloom Enterprise is needed for access to a feature. + This page is an experimental prototype which may have many problems, for which we apologize. ID: EditTab.ExperimentalNotice @@ -1605,6 +1610,11 @@ You cannot put anything in there while making an original book. ID: EditTab.ReadOnlyInAuthorMode + + To use this feature, you'll need to enable Bloom Enterprise. + ID: EditTab.RequiresEnterprise + Appears in notice (possibly obscuring other controls when they may not be used) because no Bloom Enterprise project has been selected. + Saving... ID: EditTab.SavingNotification @@ -2041,11 +2051,6 @@ More... ID: EditTab.Toolbox.More - - This feature requires Bloom Enterprise. - ID: EditTab.Toolbox.RequiresEnterprise - Appears in notice obscuring other controls when they may not be used because no Bloom Enterprise project has been selected. - Allow changes to this shellbook ID: EditTab.Toolbox.Settings.Unlock diff --git a/src/BloomBrowserUI/bloomMaterialUITheme.js b/src/BloomBrowserUI/bloomMaterialUITheme.js index 9c6c5b9ddb92..b21ffe06954b 100644 --- a/src/BloomBrowserUI/bloomMaterialUITheme.js +++ b/src/BloomBrowserUI/bloomMaterialUITheme.js @@ -24,7 +24,8 @@ const theme = createMuiTheme({ warning: { main: "#F3AA18" } }, typography: { - fontSize: 12 + fontSize: 12, + fontFamily: ["NotoSans", "Roboto", "sans-serif"] }, props: { MuiLink: { diff --git a/src/BloomBrowserUI/bloomUI.less b/src/BloomBrowserUI/bloomUI.less index ac21bd7a253f..699ffb3ecd1e 100644 --- a/src/BloomBrowserUI/bloomUI.less +++ b/src/BloomBrowserUI/bloomUI.less @@ -1,4 +1,7 @@ /* Common Bloom UI styling */ +// This import needs to NOT be by "(reference)", since the UIFontStack variable we need is not a constant. +// That also means that if you want this bloomUI file to govern the font-family of your Less that +// imports this file, it should do a normal full import of bloomUI.less. @import "./bloomWebFonts.less"; // Working towards making this the source of truth for the font size we use in our UI. @@ -140,3 +143,15 @@ input[type="checkbox"]:indeterminate::after { -ms-user-select: text; // Edge/Internet Explorer user-select: text; // Chrome } + +// Moved from toolbox.less to here so it can be used by templatePagePreview +.enterprise-only-flag::after { + content: "BE"; + cursor: default; + color: @bloom-purple; + margin-left: 4px; + vertical-align: super; + font-style: italic; + font-weight: bold; + font-size: smaller; +} diff --git a/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.less b/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.less index cd2858591b85..f0b99be057a9 100644 --- a/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.less +++ b/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.less @@ -5,9 +5,6 @@ @styleSelectWidth: 190px; #format-toolbar { - * { - font-family: "Segoe UI", Arial, sans-serif; - } h2 { font-size: 10pt; } diff --git a/src/BloomBrowserUI/bookEdit/css/bloomDialog.less b/src/BloomBrowserUI/bookEdit/css/bloomDialog.less index 6e2cb23970ea..2a3746757403 100644 --- a/src/BloomBrowserUI/bookEdit/css/bloomDialog.less +++ b/src/BloomBrowserUI/bookEdit/css/bloomDialog.less @@ -1,4 +1,5 @@ @import (reference) "../../bookLayout/basePage"; +@import "../../bloomWebFonts.less"; // Common styles to be applied to htm-js-css dialogs in Bloom @backgroundColorWhite: rgb(255, 255, 255); @backgroundColorLight: rgb(240, 240, 240); @@ -130,25 +131,27 @@ .bloomDialogContainer .control-section { margin: 0 0 12px 0; } -.bloomDialogContainer button, -.bloomDialogContainer input { - background: linear-gradient(@backgroundColorLight, @backgroundColorDark); -} +// Interferes with Material UI background-color +// .bloomDialogContainer button, +// .bloomDialogContainer input { +// background: linear-gradient(@backgroundColorLight, @backgroundColorDark); +// } .bloomDialogContainer button { .bdRounded; border: 1px solid @buttonBorder; box-shadow: 1px 2px 7px @buttonShadow; } -.bloomDialogContainer button:hover, -.bloomDialogContainer input:hover, -.bloomDialogContainer select:hover, -.bloomDialogContainer .select2-container--default:hover, -.bloomDialogContainer .select2-container--focus { - background: linear-gradient( - @backgroundColorHoverLight, - @backgroundColorHoverDark - ); -} +// Interferes with Material UI background-color +// .bloomDialogContainer button:hover, +// .bloomDialogContainer input:hover, +// .bloomDialogContainer select:hover, +// .bloomDialogContainer .select2-container--default:hover, +// .bloomDialogContainer .select2-container--focus { +// background: linear-gradient( +// @backgroundColorHoverLight, +// @backgroundColorHoverDark +// ); +// } .bloomDialogContainer button[disabled] { border: 1px solid @disabledText; background: @backgroundColorLight; @@ -170,7 +173,7 @@ z-index: @dialogZindex; position: absolute; line-height: 1.8; - font-family: Segoe UI, Open Sans, Arial, sans-serif; + font-family: @UIFontStack; } .bloomDialogContainer .bloomDialogTitleBar { background-color: @backgroundColorTitleBar; @@ -185,7 +188,6 @@ .bloomDialogContainer .bloomDialogMainPage { background: @backgroundColorWhite; margin-left: 1em; - font-family: Segoe UI, Open Sans, Arial, sans-serif; font-size: 10pt; } diff --git a/src/BloomBrowserUI/bookEdit/css/editMode.less b/src/BloomBrowserUI/bookEdit/css/editMode.less index 1043b14d70f7..c5afa4bd7160 100644 --- a/src/BloomBrowserUI/bookEdit/css/editMode.less +++ b/src/BloomBrowserUI/bookEdit/css/editMode.less @@ -77,7 +77,6 @@ div.bloom-imageContainer { left: 5mm; top: @PageLabelVerticalDisplacement; float: left; - font-family: "Segoe UI", "Open Sans", Arial, sans-serif; &[contenteditable="true"] { color: @ControlColor; padding: 0 2px; @@ -499,7 +498,6 @@ div.bloom-editable.Heading2-style { /*Same grey color as pageLabel*/ color: rgba(0, 0, 0, 0.2); font-size: small; - font-family: Arial, sans-serif; /* Arial matches .qtip-content */ font-style: normal; font-weight: normal; line-height: 1; //else it will draw up in the box somewhere if the font is large diff --git a/src/BloomBrowserUI/bookEdit/css/editPaneGlobal.less b/src/BloomBrowserUI/bookEdit/css/editPaneGlobal.less index e00861f7b1f6..0dc569b70ed0 100644 --- a/src/BloomBrowserUI/bookEdit/css/editPaneGlobal.less +++ b/src/BloomBrowserUI/bookEdit/css/editPaneGlobal.less @@ -1,6 +1,4 @@ -@import "../../bloomWebFonts.less"; - -/* Unless otherwise noted, these rules have been moved from editMode.css +/* Unless otherwise noted, these rules have been moved from editMode.css BODY is not within the scoped css DIV */ body { @@ -18,11 +16,6 @@ To handling the mis-match.*/ z-index: 20000; } -/* Qtip won't work if these rules are inside the scoped DIV */ -.qtip-content { - font-family: @UIFontStack; // for xmatter field definition bubbles -} - div.ui-tooltip-title { text-align: justify; margin-left: -9px; diff --git a/src/BloomBrowserUI/bookEdit/css/origami.less b/src/BloomBrowserUI/bookEdit/css/origami.less index f5157683233e..ba383ad0d291 100644 --- a/src/BloomBrowserUI/bookEdit/css/origami.less +++ b/src/BloomBrowserUI/bookEdit/css/origami.less @@ -6,15 +6,14 @@ // origamiEditing.less. The initial goal of splitting them up was to avoid // getting the origami editing behaviors while reading in BloomReader. @import (inline) "../../lib/split-pane/split-pane.css"; -@import (reference) "../../bloomUI.less"; +@import "../../bloomUI.less"; @flowerPetalGrey: #7e7e7e; // shouldn't this just be @bloom-gray? @inactiveColor: @bloom-buff; -@font: "Segoe UI", "Open Sans", Arial, sans-serif; .origami-ui { visibility: hidden; - font-family: @font; + font-family: @UIFontStack; } .origami-layout-mode .origami-ui { visibility: visible; diff --git a/src/BloomBrowserUI/bookEdit/css/origamiEditing.less b/src/BloomBrowserUI/bookEdit/css/origamiEditing.less index 485816c57ee2..7dd275b6de3e 100644 --- a/src/BloomBrowserUI/bookEdit/css/origamiEditing.less +++ b/src/BloomBrowserUI/bookEdit/css/origamiEditing.less @@ -10,8 +10,6 @@ @DarkSwitch: @bloom-panelBackground; @ActiveSwitchColor: @ControlColor; -@font: "Segoe UI", "Open Sans", Arial, sans-serif; - @ToggleRightOffset: 19px; @ToggleVerticalOffset: -30px; @TogglePartsRadius: 8px; @@ -101,7 +99,6 @@ top: @ToggleVerticalOffset; line-height: 1em; color: @DisabledColor; - font-family: @font; div { color: @ActiveSwitchColor; } diff --git a/src/BloomBrowserUI/bookEdit/pageThumbnailList/pageThumbnailList.less b/src/BloomBrowserUI/bookEdit/pageThumbnailList/pageThumbnailList.less index daf605f8bea9..c57bb0f2c54e 100644 --- a/src/BloomBrowserUI/bookEdit/pageThumbnailList/pageThumbnailList.less +++ b/src/BloomBrowserUI/bookEdit/pageThumbnailList/pageThumbnailList.less @@ -238,7 +238,7 @@ body > #menuIconHolder { } #toast-container { - font-family: "Segoe UI", "sans-serif"; + font-family: @UIFontStack; font-size: 9pt; } diff --git a/src/BloomBrowserUI/bookEdit/sourceBubbles/sourceBubbles.less b/src/BloomBrowserUI/bookEdit/sourceBubbles/sourceBubbles.less index c1311e82fdbf..0aacd3827f58 100644 --- a/src/BloomBrowserUI/bookEdit/sourceBubbles/sourceBubbles.less +++ b/src/BloomBrowserUI/bookEdit/sourceBubbles/sourceBubbles.less @@ -1,7 +1,5 @@ // This file gets imported by editMode.less -@import "../../bloomWebFonts.less"; - @BubbleBorder: #e0deb7; @BubbleBackground: #faf7cc; @TabColor: @BubbleBorder; @@ -115,7 +113,6 @@ outline: none; text-decoration: none; color: black; - font-family: @UIFontStack; &.active { font-weight: bold; } @@ -138,7 +135,6 @@ line-height: 1.5; color: black; padding-top: 4px; - font-family: @UIFontStack; &.active { overflow-y: hidden !important; } diff --git a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/audioRecording.less b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/audioRecording.less index 9932c1431ab0..c51c6d5b8693 100644 --- a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/audioRecording.less +++ b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/audioRecording.less @@ -331,7 +331,7 @@ body .cursor-progress { #toast-container { z-index: 999999 !important; - font-family: "Segoe UI", "sans-serif"; + font-family: @UIFontStack; font-size: 9pt; } #toast-container > .toast { diff --git a/src/BloomBrowserUI/bookEdit/toolbox/toolbox.less b/src/BloomBrowserUI/bookEdit/toolbox/toolbox.less index c0f4e80e1557..63f34d16db49 100644 --- a/src/BloomBrowserUI/bookEdit/toolbox/toolbox.less +++ b/src/BloomBrowserUI/bookEdit/toolbox/toolbox.less @@ -109,17 +109,6 @@ div.checkbox-and-label { margin-top: -1px; } -.enterprise-only-flag::after { - content: "BE"; - cursor: default; - color: @bloom-purple; - margin-left: 4px; - vertical-align: super; - font-style: italic; - font-weight: bold; - font-size: smaller; -} - .ui-accordion h3 { padding-left: 28px; } diff --git a/src/BloomBrowserUI/lib/long-press/longpress.css b/src/BloomBrowserUI/lib/long-press/longpress.css index 7b3103617d1f..47a4469fb397 100644 --- a/src/BloomBrowserUI/lib/long-press/longpress.css +++ b/src/BloomBrowserUI/lib/long-press/longpress.css @@ -4,25 +4,25 @@ left: 0; right: 0; text-align: center; - background: #96668F; + background: #96668f; padding-top: 10px; - margin:0; + margin: 0; z-index: 2001; } .long-press-popup li { - display:inline-block; + display: inline-block; list-style: none; padding: 0px 15px 10px 15px; margin-right: 20px; margin-bottom: 10px; background: #000000; - cursor:pointer; + cursor: pointer; color: white; border: solid 4px black; border-radius: 12px; font-size: 24pt; - position: relative;/* without this, we've got 'static' and shortcut letters can't be posititioned*/ + position: relative; /* without this, we've got 'static' and shortcut letters can't be posititioned*/ } .long-press-popup li::before { content: attr(data-shortcut); @@ -30,16 +30,15 @@ font-size: 8pt; bottom: 0; right: 0; - color: #96668F; + color: #96668f; } .long-press-popup .selected { border-color: white; -webkit-box-shadow: 0 0 18px rgba(255, 255, 255, 0.75); - -moz-box-shadow: 0 0 18px rgba(255, 255, 255, 0.75); - box-shadow: 0 0 18px rgba(255, 255, 255, 0.75); + -moz-box-shadow: 0 0 18px rgba(255, 255, 255, 0.75); + box-shadow: 0 0 18px rgba(255, 255, 255, 0.75); } .long-press-popup .instructions { - font-family: Segoe UI, sans-serif; - font-size: 12pt; - margin-bottom: 10px; + font-size: 12pt; + margin-bottom: 10px; } diff --git a/src/BloomBrowserUI/package.json b/src/BloomBrowserUI/package.json index 996ee114c954..da672c475927 100644 --- a/src/BloomBrowserUI/package.json +++ b/src/BloomBrowserUI/package.json @@ -33,7 +33,8 @@ "watchTemplatesLess": "less-watch-compiler templates ../../output/browser/templates", "watchBookEditLess": "less-watch-compiler bookEdit ../../output/browser/bookEdit", "watchBookLayoutLess": "less-watch-compiler bookLayout ../../output/browser/bookLayout", - "watch": "npm-run-all --parallel watchBrandingLess watchTemplatesLess watchBookEditLess watchBookLayoutLess watchBrandingFiles watchCode", + "watchPageChooserLess": "less-watch-compiler pageChooser ../../output/browser/pageChooser", + "watch": "npm-run-all --parallel watchBrandingLess watchTemplatesLess watchBookEditLess watchBookLayoutLess watchBrandingFiles watchPageChooserLess watchCode", "gitSemiClean": "git clean -X --dry-run --exclude='!node_modules'", "gitSemiCleanForReal": "git clean -fX --exclude='!node_modules'", "tslint": "tslint --project tsconfig.json", diff --git a/src/BloomBrowserUI/pageChooser/page-chooser-main.pug b/src/BloomBrowserUI/pageChooser/page-chooser-main.pug index a12bc99d0383..c00b3d1e5f63 100644 --- a/src/BloomBrowserUI/pageChooser/page-chooser-main.pug +++ b/src/BloomBrowserUI/pageChooser/page-chooser-main.pug @@ -31,15 +31,4 @@ html .gridItemCaption Page Title .pageDescription #singlePagePreview - img(src='')#preview - #previewCaption.previewCaption - #previewDescriptionText.DescriptionText Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel sodales justo. - label#convertWholeBook - input(type='checkbox' name='WholeBook')#convertWholeBookCheckbox - | Change all similar pages in this book to this layout. - #convertLosesMaterial Converting to this layout will cause some content to be lost. - label#convertAnyway - input(type='checkbox' name='Continue')#convertAnywayCheckbox - | Continue anyway - - input(type="submit", value="Add Page").foo#addPageButton + //- This gets filled in by React diff --git a/src/BloomBrowserUI/pageChooser/page-chooser.less b/src/BloomBrowserUI/pageChooser/page-chooser.less index cbf0727b80f8..f3b727319b73 100644 --- a/src/BloomBrowserUI/pageChooser/page-chooser.less +++ b/src/BloomBrowserUI/pageChooser/page-chooser.less @@ -41,27 +41,33 @@ body { height: auto; min-width: 320px; max-width: 370px; // in the standard dialog width, allows the other pane to be wide enough for 3 columns with scroll bar - padding-left: @PreviewPaneLeftPadding; + display: flex; + flex-direction: row; + align-items: center; img { border: 1px solid @HighlightColor; - //center it - display: block; - margin-left: auto; - margin-right: auto; + max-width: 98%; + } + .previewWrapper { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; + align-items: center; } } -#preview { +.previewImage { max-height: 232px; } .landscape { - #preview { + .previewImage { width: unset; height: 200px; } } -#previewCaption { +.previewCaption { font-weight: bold; text-align: center; } @@ -69,14 +75,6 @@ body { #missingMsg { padding-left: @PreviewPaneLeftPadding * 2; } -//#previewDescription { -// height: 90px; -// border: none; -// .DescriptionHeader { -// font-weight: bold; -// } -// -//} .DescriptionText { white-space: normal; @@ -87,6 +85,7 @@ body { overflow-y: auto; margin-right: @PreviewPaneLeftPadding; margin-left: @PreviewPaneLeftPadding; + align-self: flex-start; } // Currently unused @@ -156,7 +155,16 @@ body { opacity: 0.3; } +.gridItem.enterprise-only-flag::after { + position: absolute; + top: -5px; + right: 10px; +} + .landscape { + .gridItem.enterprise-only-flag::after { + right: 0; + } .thumbnail { width: unset; height: 60px; @@ -234,15 +242,13 @@ body { display: none; } -#addPageButton { +#addOrChoosePageButton { //center it display: block; - margin-left: auto; - margin-right: auto; + margin: 20px; padding: 10px; width: 200px; - border: 5px solid @HighlightColor; font-weight: bold; background-image: none; @@ -252,41 +258,32 @@ body { } } -#convertWholeBook { - visibility: hidden; +.convertWholeBook { margin-left: @PreviewPaneLeftPadding; margin-right: @PreviewPaneLeftPadding; display: block; padding-left: @CheckboxPadding; text-indent: -@CheckboxPadding; - &.disabled { + .disabled { color: @bloom-buff; } } -.chooseLayout #convertWholeBook { - visibility: visible; -} - -#convertAnyway { +.convertAnyway { color: @WarningColor; - visibility: hidden; margin-left: @PreviewPaneLeftPadding; margin-right: @PreviewPaneLeftPadding; } -#convertLosesMaterial { +.convertLosesMaterial { color: @WarningColor; - visibility: hidden; margin-left: @PreviewPaneLeftPadding; // rather arbitrary. I'd like it to be left-aligned with the picture. margin-right: @PreviewPaneLeftPadding; line-height: 1.5em; } -.willLoseData { - #convertAnyway { - visibility: visible; - } - #convertLosesMaterial { - visibility: visible; - } +.pushToBottom { + display: flex; + flex-direction: column; + justify-content: flex-end; + flex: 1; } diff --git a/src/BloomBrowserUI/pageChooser/page-chooser.ts b/src/BloomBrowserUI/pageChooser/page-chooser.ts index 54769b345c66..9ca141719137 100644 --- a/src/BloomBrowserUI/pageChooser/page-chooser.ts +++ b/src/BloomBrowserUI/pageChooser/page-chooser.ts @@ -1,11 +1,16 @@ /// import * as $ from "jquery"; +import * as React from "react"; +import * as ReactDOM from "react-dom"; import theOneLocalizationManager from "../lib/localizationManager/localizationManager"; import "jquery-ui/jquery-ui-1.10.3.custom.min.js"; import axios from "axios"; import { BloomApi } from "../utils/bloomApi"; -import { getEditViewFrameExports } from "../bookEdit/js/bloomFrames"; import "errorHandler"; +import TemplatePagePreview from "./templatePagePreview"; +import { getEditViewFrameExports } from "../bookEdit/js/bloomFrames"; +import { ThemeProvider } from "@material-ui/styles"; +import theme from "../bloomMaterialUITheme"; $(window).ready(() => { BloomApi.get("pageTemplates", result => { @@ -21,7 +26,7 @@ $(window).ready(() => { // \"groups\":[{\"templateBookFolderUrl\":\"/bloom/localhost/C$/BloomDesktop/DistFiles/factoryGroups/Templates/Basic Book\", // \"templateBookUrl\":\"/bloom/localhost/C$/BloomDesktop/DistFiles/factoryGroups/Templates/Basic Book/Basic Book.htm\"}]}" -class PageChooser { +export class PageChooser { private _templateBookUrls: string; private _defaultPageToSelect: string; private _orientation: string; @@ -30,10 +35,9 @@ class PageChooser { private _scrollingDiv: JQuery; private _scrollTopOfTheScrollingDiv: number; private _forChooseLayout: boolean; - private _convertWholeBook: boolean; constructor(initializationJsonString: string) { - let initializationObject; + let initializationObject: object; if (initializationJsonString) { try { initializationObject = $.parseJSON(initializationJsonString); @@ -53,10 +57,6 @@ class PageChooser { this._selectedGridItem = $(); this._indexOfPageToSelect = 0; this._scrollTopOfTheScrollingDiv = 0; - this._convertWholeBook = false; - if (this._forChooseLayout) { - $("#mainContainer").addClass("chooseLayout"); // reveals convert whole book checkbox - } } private thumbnailClickHandler(clickedDiv, evt): void { @@ -92,56 +92,49 @@ class PageChooser { } // Display large preview - const caption = $("#previewCaption"); - const defaultCaptionText = $( + // This is now done with React via the TemplatePagePreview component. + // Localization will happen there, so we just send english strings from the page templates. + const englishCaptionText = $( ".gridItemCaption", this._selectedGridItem ).text(); - this.setLocalizedText( - caption, - "TemplateBooks.PageLabel.", - defaultCaptionText - ); - caption.attr("style", "display: block;"); - $("#preview").attr( - "src", - $(this._selectedGridItem) - .find("img") - .first() - .attr("src") + const englishPageDescription = $( + ".pageDescription", + this._selectedGridItem + ).text(); + const isEnterprise = $(this._selectedGridItem).hasClass( + "enterprise-only-flag" ); - this.setLocalizedText( - $("#previewDescriptionText"), - "TemplateBooks.PageDescription.", - $(".pageDescription", this._selectedGridItem).text(), - defaultCaptionText + const imgSrc = $(this._selectedGridItem) + .find("img") + .first() + .attr("src"); + const previewElement = document.getElementById( + "singlePagePreview" + ) as HTMLDivElement; + ReactDOM.render( + React.createElement( + ThemeProvider, + { theme: theme }, + React.createElement(TemplatePagePreview, { + caption: englishCaptionText, + imageSource: imgSrc, + pageDescription: englishPageDescription, + pageIsEnterpriseOnly: isEnterprise, + templateBookPath: this._selectedGridItem + .closest(".group") + .attr("data-template-book-path"), + pageId: this._selectedGridItem.attr("data-pageId"), + forChangeLayout: this._forChooseLayout, + willLoseData: this._forChooseLayout + ? this.willLoseData() + : false + }) + ), + previewElement ); - if (this._forChooseLayout) { - const willLoseData = this.willLoseData(); - if (willLoseData) { - $("#mainContainer").addClass("willLoseData"); - } else { - $("#mainContainer").removeClass("willLoseData"); - } - $("#convertAnywayCheckbox").prop("checked", !willLoseData); - this.enableWholeBookCheck(!willLoseData); - this.continueCheckBoxChanged(); // possibly redundant - } } // thumbnailClickHandler - // Enable/disable both the checkbox and the associated label for converting all similar pages - // in the book. - private enableWholeBookCheck(enable: boolean): void { - if (enable) { - $("#convertWholeBook").removeClass("disabled"); - } else { - $("#convertWholeBook").addClass("disabled"); - } - const convertBook = $("#convertWholeBookCheckbox"); - convertBook.prop("disabled", !enable); - convertBook.prop("checked", false); - } - // Return true if choosing the current layout will cause loss of data private willLoseData(): boolean { const selected = $(this._selectedGridItem); @@ -252,51 +245,41 @@ class PageChooser { } } - private addPageClickHandler(): void { - if ( - this._selectedGridItem == undefined || - this._templateBookUrls == undefined - ) - return; - if ( - this._forChooseLayout && - !$("#convertAnywayCheckbox").is(":checked") - ) - return; - - const id = this._selectedGridItem.attr("data-pageId"); - const templateBookPath = this._selectedGridItem - .closest(".group") - .attr("data-template-book-path"); - if (this._forChooseLayout) { - // using axios direct because we already had a catch...BloomApi catch might be better? - axios - .post("/bloom/api/changeLayout", { - pageId: id, + public static addPageClickHandler( + forChangeLayout: boolean, + pageId: string, + templateBookPath: string, + convertAnywayChecked: boolean, + willLoseData: boolean, + convertWholeBookChecked: boolean + ): void { + if (forChangeLayout) { + if (willLoseData && !convertAnywayChecked) { + return; + } + BloomApi.postData( + "changeLayout", + { + pageId: pageId, templateBookPath: templateBookPath, - convertWholeBook: this._convertWholeBook - }) - .catch(error => { - // we seem to get unimportant errors here, possibly because the dialog gets closed before the post completes. - console.log(error); - }) - .then(() => this.closeup()); + convertWholeBook: convertWholeBookChecked + }, + PageChooser.closeup + ); } else { - // using axios direct because we already had a catch...BloomApi catch might be better? - axios - .post("/bloom/api/addPage", { + BloomApi.postData( + "addPage", + { templateBookPath: templateBookPath, - pageId: id, + pageId: pageId, convertWholeBook: false - }) - .catch(error => { - console.log(error); - }) - .then(() => this.closeup()); + }, + PageChooser.closeup + ); } } - private closeup(): void { + private static closeup(): void { // End the disabling of other panes for the modal dialog. The final argument is because in this // method the current window is the dialog, and it's the parent window's document that is being // monitored for this event. @@ -307,21 +290,6 @@ class PageChooser { getEditViewFrameExports().closeDialog("addPageConfig"); } - private continueCheckBoxChanged(): void { - if (!this._forChooseLayout) return; - const continueChecked = $("#convertAnywayCheckbox").is(":checked"); - // If the user explicitly allows possible data loss, also allow every similar page - // to change. See https://issues.bloomlibrary.org/youtrack/issue/BL-6921. - this.enableWholeBookCheck(continueChecked); - $("#addPageButton").prop("disabled", !continueChecked); - } - - private convertBookCheckBoxChanged(): void { - if (!this._forChooseLayout) return; - const cb = $("#convertWholeBookCheckbox"); - this._convertWholeBook = cb.is(":checked"); - } - // This is the starting-point method that is invoked to initialize the dialog. // At the point where it is called, the json parameters that control what will be displayed public loadPageGroups(): void { @@ -352,52 +320,6 @@ class PageChooser { 0 ); } - $("#addPageButton", document) - .button() - .click(() => { - this.addPageClickHandler(); - }); - $("#convertAnywayCheckbox", document) - .button() - .change(() => { - this.continueCheckBoxChanged(); - }); - $("#convertWholeBookCheckbox", document) - .button() - .change(() => { - this.convertBookCheckBoxChanged(); - }); - const pageButton = $("#addPageButton", document); - let okButtonLabelId = "EditTab.AddPageDialog.AddThisPageButton"; - let okButtonLabelText = "Add This Page"; - - if (this._forChooseLayout) { - okButtonLabelId = "EditTab.AddPageDialog.ChooseLayoutButton"; - okButtonLabelText = "Use This Layout"; - this.setLocalizedText( - $("#convertAnywayCheckbox"), - "EditTab.AddPageDialog.", - "Continue anyway", - "ChooseLayoutContinueCheckbox" - ); - this.setLocalizedText( - $("#convertLosesMaterial"), - "EditTab.AddPageDialog.", - "Converting to this layout will cause some content to be lost.", - "ChooseLayoutWillLoseData" - ); - this.setLocalizedText( - $("#convertWholeBookCheckbox"), - "EditTab.AddPageDialog.", - "Change all similar pages in this book to this layout.", - "ChooseLayoutConvertBookCheckbox" - ); - } - theOneLocalizationManager - .asyncGetText(okButtonLabelId, okButtonLabelText, "") - .done(translation => { - pageButton.attr("value", translation); - }); if (this._orientation === "landscape") { $("#mainContainer").addClass("landscape"); @@ -471,8 +393,9 @@ class PageChooser { "data-template-book-path", order.templateBookPath ); + const captionDiv = $(groupToAdd).find(".groupCaption"); this.setLocalizedText( - $(groupToAdd).find(".groupCaption"), + captionDiv, "TemplateBooks.BookName.", groupTitle ); @@ -560,23 +483,27 @@ class PageChooser { let gotSelectedPage = false; // insert a template page for each page with the correct #id on the url $(pageArray).each((index, div) => { - if ($(div).attr("data-page") === "singleton") return; // skip this one + const divQuery = $(div); + if (divQuery.attr("data-page") === "singleton") return; // skip this one const currentGridItemHtml = $(gridItemTemplate).clone(); - const currentId = $(div).attr("id"); - $(currentGridItemHtml).attr("data-pageId", currentId); - $(currentGridItemHtml).attr( + if (divQuery.hasClass("enterprise-only")) { + currentGridItemHtml.addClass("enterprise-only-flag"); + } + const currentId = divQuery.attr("id"); + currentGridItemHtml.attr("data-pageId", currentId); + currentGridItemHtml.attr( "data-textDivCount", - this.countTranslationGroupsForChangeLayout($(div)) + this.countTranslationGroupsForChangeLayout(divQuery) ); - $(currentGridItemHtml).attr( + currentGridItemHtml.attr( "data-pictureCount", - $(div).find(".bloom-imageContainer").length + divQuery.find(".bloom-imageContainer").length ); - $(currentGridItemHtml).attr( + currentGridItemHtml.attr( "data-videoCount", - $(div).find(".bloom-videoContainer").length + divQuery.find(".bloom-videoContainer").length ); // The check for _indexOfPageToSelect here keeps the selection on the *first* matching page. In BL-4500, we found @@ -617,7 +544,29 @@ class PageChooser { // once the template pages are installed, attach click handler to them. $(".invisibleThumbCover", currentGroup).each((index, div) => { $(div).dblclick(() => { - this.addPageClickHandler(); + if (!this._selectedGridItem || !this._templateBookUrls) { + return; + } + const convertAnywayCheckbox = document.getElementById( + "convertAnywayCheckbox" + ) as HTMLInputElement; + const convertWholeBookCheckbox = document.getElementById( + "convertWholeBookCheckbox" + ) as HTMLInputElement; + PageChooser.addPageClickHandler( + this._forChooseLayout, + this._selectedGridItem.attr("data-pageId"), + this._selectedGridItem + .closest(".group") + .attr("data-template-book-path"), + convertAnywayCheckbox + ? convertAnywayCheckbox.checked + : false, + this.willLoseData(), + convertWholeBookCheckbox + ? convertWholeBookCheckbox.checked + : false + ); }); // invisibleThumbCover double click $(div).click(evt => { @@ -672,14 +621,31 @@ class PageChooser { } } // End OF PageChooserClass -/** - * Fires an event for C# to handle - * @param {String} eventName - * @param {String} eventData - * @param {boolean} dispatchWindow if not null, use this window's document to dispatch the event - */ +export function addPageClickHandler( + forChangeLayout: boolean, + pageId: string, + templateBookPath: string, + convertAnywayChecked: boolean, + willLoseData: boolean, + convertWholeBookChecked: boolean +) { + PageChooser.addPageClickHandler( + forChangeLayout, + pageId, + templateBookPath, + convertAnywayChecked, + willLoseData, + convertWholeBookChecked + ); +} + +// Fires an event for C# to handle // Enhance: JT notes that this method pops up from time to time; can we consolidate? -function fireCSharpEvent(eventName, eventData, dispatchWindow?: Window) { +function fireCSharpEvent( + eventName: string, + eventData: string, + dispatchWindow?: Window +) { const event = new MessageEvent(eventName, { /*'view' : window,*/ bubbles: true, cancelable: true, diff --git a/src/BloomBrowserUI/pageChooser/templatePagePreview.tsx b/src/BloomBrowserUI/pageChooser/templatePagePreview.tsx new file mode 100644 index 000000000000..532364dd817c --- /dev/null +++ b/src/BloomBrowserUI/pageChooser/templatePagePreview.tsx @@ -0,0 +1,144 @@ +import * as React from "react"; +import { useState, useEffect } from "react"; +import { Div } from "../react_components/l10nComponents"; +import { Checkbox } from "../react_components/checkbox"; +import BloomButton from "../react_components/bloomButton"; +import { BloomApi } from "../utils/bloomApi"; +import { RequiresBloomEnterprise } from "../react_components/requiresBloomEnterprise"; +import { addPageClickHandler as addOrChoosePageClickHandler } from "./page-chooser"; + +interface ITemplatePagePreviewProps { + caption?: string; + imageSource?: string; + pageDescription?: string; + pageIsEnterpriseOnly?: boolean; + templateBookPath: string; + pageId: string; + forChangeLayout?: boolean; + willLoseData?: boolean; +} + +// Displays a large preview of a template page in the Add Page or Change Layout dialog. +export const TemplatePagePreview: React.FunctionComponent< + ITemplatePagePreviewProps +> = (props: ITemplatePagePreviewProps) => { + const [enterpriseAvailable, setEnterpriseAvailable] = useState(true); + const [continueChecked, setContinueChecked] = useState(false); + const [convertWholeBookChecked, setConvertWholeBookChecked] = useState( + false + ); + + useEffect(() => { + BloomApi.get("common/enterpriseFeaturesEnabled", response => { + setEnterpriseAvailable(response.data); + }); + }, []); + + const captionKey = "TemplateBooks.PageLabel." + props.caption; + const descriptionKey = + "TemplateBooks.PageDescription." + props.pageDescription; + const buttonKey = props.forChangeLayout + ? "EditTab.AddPageDialog.ChooseLayoutButton" + : "EditTab.AddPageDialog.AddPageButton"; + const buttonEnglishText = props.forChangeLayout + ? "Use This Layout" + : "Add Page"; + + // If this function returns , we need to let the user know that they need a + // Bloom Enterprise subscription to use this page. + const enterpriseSubscriptionFault = ( + pageNeedsEnterprise: boolean | undefined + ): boolean => { + return !enterpriseAvailable && !!pageNeedsEnterprise; + }; + + const isAddOrChoosePageButtonEnabled = (): boolean => { + return !props.forChangeLayout || !props.willLoseData || continueChecked; + }; + + return ( +
+ {props.imageSource && ( + + )} +
+ {props.caption} +
+
+ {props.pageDescription} +
+ {props.forChangeLayout && + !enterpriseSubscriptionFault(props.pageIsEnterpriseOnly) && ( +
+ + setConvertWholeBookChecked( + !convertWholeBookChecked + ) + } + > + Change all similar pages in this book to this + layout. + + {props.willLoseData && ( +
+
+ Converting to this layout will cause some + content to be lost. +
+ + setContinueChecked(!continueChecked) + } + > + Continue anyway + +
+ )} +
+ )} + {!enterpriseSubscriptionFault(props.pageIsEnterpriseOnly) && ( +
+ + addOrChoosePageClickHandler( + !!props.forChangeLayout, + props.pageId, + props.templateBookPath, + continueChecked, + !!props.willLoseData, + convertWholeBookChecked + ) + } + > + {buttonEnglishText} + +
+ )} + {enterpriseSubscriptionFault(props.pageIsEnterpriseOnly) && ( +
+ +
+ )} +
+ ); +}; + +export default TemplatePagePreview; diff --git a/src/BloomBrowserUI/react_components/checkbox.tsx b/src/BloomBrowserUI/react_components/checkbox.tsx index 7fce42925f01..6d3bf6b6ea23 100644 --- a/src/BloomBrowserUI/react_components/checkbox.tsx +++ b/src/BloomBrowserUI/react_components/checkbox.tsx @@ -41,7 +41,7 @@ export class Checkbox extends LocalizableElement { // We expect the effect of clicking the label will be to set the check to the // opposite state, so that's what we pass. (But whether it really changes is // up to the owner changing the prop value. So it won't have happened yet.) - if (this.input) { + if (this.input && !this.props.disabled) { if (!this.props.tristate) { this.input.checked = !this.input.checked; } @@ -68,6 +68,7 @@ export class Checkbox extends LocalizableElement { l10nKey={this.props.l10nKey} alreadyLocalized={this.props.alreadyLocalized} onClick={() => this.onLabelClicked()} + className={this.props.disabled ? "disabled" : ""} > {/* this.props.children is the English text */} {this.props.children} diff --git a/src/BloomBrowserUI/react_components/requiresBloomEnterprise.less b/src/BloomBrowserUI/react_components/requiresBloomEnterprise.less index 1f6b22de5032..be1a9b36754e 100644 --- a/src/BloomBrowserUI/react_components/requiresBloomEnterprise.less +++ b/src/BloomBrowserUI/react_components/requiresBloomEnterprise.less @@ -22,6 +22,10 @@ text-align: center; margin: 10px; color: white; + a { + color: white; + text-decoration: none; + } } .messageSettingsDialogWrapper { diff --git a/src/BloomBrowserUI/react_components/requiresBloomEnterprise.tsx b/src/BloomBrowserUI/react_components/requiresBloomEnterprise.tsx index 7bf989347ff7..75a8f72c281f 100644 --- a/src/BloomBrowserUI/react_components/requiresBloomEnterprise.tsx +++ b/src/BloomBrowserUI/react_components/requiresBloomEnterprise.tsx @@ -1,4 +1,5 @@ import * as React from "react"; +import { useState, createContext, useEffect } from "react"; import "./requiresBloomEnterprise.less"; import { Link } from "./link"; import { BloomApi } from "../utils/bloomApi"; @@ -39,14 +40,14 @@ export class RequiresBloomEnterprise extends React.Component<
BloomApi.post( "common/showSettingsDialog?tab=enterprise" ) } > - This feature requires Bloom Enterprise. + Bloom Enterprise Settings
@@ -64,7 +65,7 @@ export interface IRequiresBloomEnterpriseProps { } // A note about the default value (false): this would only be used if a component had a context-consumer but no parent had created a context-provider. -export const BloomEnterpriseAvailableContext = React.createContext(false); +export const BloomEnterpriseAvailableContext = createContext(false); // The children of this component will be enabled and displayed if an enterprise project has been // selected; otherwise, the RequiresBloomEnterprise message will be displayed and the children @@ -73,7 +74,7 @@ export class RequiresBloomEnterpriseWrapper extends React.Component< IRequiresBloomEnterpriseProps, IWrapperComponentState > { - constructor(props) { + constructor(props: IRequiresBloomEnterpriseProps) { super(props); this.state = { enterpriseAvailable: true }; checkIfEnterpriseAvailable().then(enabled => diff --git a/src/BloomBrowserUI/templates/template books/Sign Language/Sign Language.pug b/src/BloomBrowserUI/templates/template books/Sign Language/Sign Language.pug index de7e62026cd2..264cf9bbf657 100644 --- a/src/BloomBrowserUI/templates/template books/Sign Language/Sign Language.pug +++ b/src/BloomBrowserUI/templates/template books/Sign Language/Sign Language.pug @@ -23,7 +23,7 @@ html +dataDiv +bookVariable-title('en', 'Sign Language') +bookVariable('styleNumberSequence', '*', '0') - +page-splittable-choice-custom('Big Text Diglot')#08422e7b-9406-4d11-8c71-02005b1b8095 + +page-splittable-choice-custom('Big Text Diglot').enterprise-only#08422e7b-9406-4d11-8c71-02005b1b8095 +stack +upper(33.9339) +stackLeftRight @@ -34,25 +34,25 @@ html +lower(33.9339) +fieldx +standardPage-JustVideo - +page-splittable-choice-custom('Video Over Text')#299644f5-addb-476f-a4a5-e3978139b188 + +page-splittable-choice-custom('Video Over Text').enterprise-only#299644f5-addb-476f-a4a5-e3978139b188 +stack +upper(30.6306) +videox +lower(30.6306) +fieldx - +page-splittable-choice-custom('Text Over Video')#48097654-53a1-4c5c-8c2a-a1e371489546 + +page-splittable-choice-custom('Text Over Video').enterprise-only#48097654-53a1-4c5c-8c2a-a1e371489546 +stack +upper(72.3724) +fieldx +lower(72.3724) +videox - +page-splittable-choice-custom('Picture & Video')#24c90e90-2711-465d-8f20-980d9ffae299 + +page-splittable-choice-custom('Picture & Video').enterprise-only#24c90e90-2711-465d-8f20-980d9ffae299 +stackLeftRight +left +imagex +right +videox - +page-splittable-choice-custom('Big Video Diglot')#9a4beb1f-46c5-4729-87fc-7a9a7eee534e + +page-splittable-choice-custom('Big Video Diglot').enterprise-only#9a4beb1f-46c5-4729-87fc-7a9a7eee534e +stackLeftRight +left +stack @@ -62,7 +62,7 @@ html +fieldx +right +videox - +page-splittable-choice-custom('Big Picture Diglot')#16301dd0-a813-459e-b7e8-294339f7f241 + +page-splittable-choice-custom('Big Picture Diglot').enterprise-only#16301dd0-a813-459e-b7e8-294339f7f241 +stackLeftRight +left +imagex diff --git a/src/BloomBrowserUI/templates/template books/Special/Special.less b/src/BloomBrowserUI/templates/template books/Special/Special.less index efebf3fd8fe1..839a7a1c1bc5 100644 --- a/src/BloomBrowserUI/templates/template books/Special/Special.less +++ b/src/BloomBrowserUI/templates/template books/Special/Special.less @@ -16,7 +16,7 @@ .quizIntructions { background-color: @bloom-lightgray; font-size: 10pt; - font-family: Segoe UI, Open Sans, Arial, sans-serif; + font-family: @UIFontStack; // Top and bottom padding are set to 0 so as not to clip scrolled text at the bottom. // Left and right padding of 4px gives a nice appearance, // but still allows room for the text on (smaller) Device layouts. diff --git a/src/BloomBrowserUI/templates/template books/Special/simpleComprehensionQuiz.pug b/src/BloomBrowserUI/templates/template books/Special/simpleComprehensionQuiz.pug index 829388e78876..9cfaf5fa933c 100644 --- a/src/BloomBrowserUI/templates/template books/Special/simpleComprehensionQuiz.pug +++ b/src/BloomBrowserUI/templates/template books/Special/simpleComprehensionQuiz.pug @@ -20,7 +20,7 @@ mixin choice .placeToPutVariableCircle mixin quizPage - +page('Quiz Page', 'Use for comprehension testing.').simple-comprehension-quiz.bloom-interactive-page#F125A8B6-EA15-4FB7-9F8D-271D7B3C8D4D(data-page='extra' data-analyticsCategories="comprehension" data-reader-version="2") + +page('Quiz Page', 'Use for comprehension testing.').simple-comprehension-quiz.bloom-interactive-page.enterprise-only#F125A8B6-EA15-4FB7-9F8D-271D7B3C8D4D(data-page='extra' data-analyticsCategories="comprehension" data-reader-version="2") .quiz h1(data-i18n="Quiz.CheckYourUnderstanding") Check Your Understanding +field("auto").QuizQuestion-style(data-hint="Put a comprehension question here") diff --git a/src/BloomBrowserUI/templates/template books/standard-page-mixins.pug b/src/BloomBrowserUI/templates/template books/standard-page-mixins.pug index dfc04b9b00d0..147566015601 100644 --- a/src/BloomBrowserUI/templates/template books/standard-page-mixins.pug +++ b/src/BloomBrowserUI/templates/template books/standard-page-mixins.pug @@ -63,7 +63,7 @@ mixin standardPage-JustPicture +image mixin standardPage-JustVideo - +page-choice('Just Video').customPage#8bedcdf8-3ad6-4967-b027-6c186436572f + +page-choice('Just Video').enterprise-only.customPage#8bedcdf8-3ad6-4967-b027-6c186436572f .split-pane-component-inner +videox diff --git a/src/BloomBrowserUI/themes/bloom-jqueryui-theme/jquery-ui-1.8.16.custom.css b/src/BloomBrowserUI/themes/bloom-jqueryui-theme/jquery-ui-1.8.16.custom.css index 43ac2f04740d..926c73b12f72 100644 --- a/src/BloomBrowserUI/themes/bloom-jqueryui-theme/jquery-ui-1.8.16.custom.css +++ b/src/BloomBrowserUI/themes/bloom-jqueryui-theme/jquery-ui-1.8.16.custom.css @@ -9,18 +9,15 @@ Layout helpers ----------------------------------*/ -.ui-helper-hidden -{ +.ui-helper-hidden { display: none; } -.ui-helper-hidden-accessible -{ +.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px); } -.ui-helper-reset -{ +.ui-helper-reset { margin: 0; padding: 0; border: 0; @@ -30,30 +27,25 @@ Layout helpers font-size: 100%; list-style: none; } -.ui-helper-clearfix:after -{ +.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } -.ui-helper-clearfix -{ +.ui-helper-clearfix { display: inline-block; } /*required comment for clearfix to work in Opera \*/ -* HTML .ui-helper-clearfix -{ +* html .ui-helper-clearfix { height: 1%; } -.ui-helper-clearfix -{ +.ui-helper-clearfix { display: block; } /*end clearfix*/ -.ui-helper-zfix -{ +.ui-helper-zfix { width: 100%; height: 100%; top: 0; @@ -64,15 +56,13 @@ Layout helpers } /*Interaction Cues ----------------------------------*/ -.ui-state-disabled -{ +.ui-state-disabled { cursor: default !important; } /*Icons ---------------------------------- states and images*/ -.ui-icon -{ +.ui-icon { display: block; text-indent: -99999px; overflow: hidden; @@ -81,8 +71,7 @@ states and images*/ /*Misc visuals ---------------------------------- Overlays*/ -.ui-widget-overlay -{ +.ui-widget-overlay { position: absolute; top: 0; left: 0; @@ -102,907 +91,750 @@ Overlays*/ Component containers ----------------------------------*/ -.ui-widget -{ - font-family: "Segoe UI", Arial, sans-serif; +.ui-widget { font-size: 1.1em; } -.ui-widget .ui-widget -{ +.ui-widget .ui-widget { font-size: 1em; } -.ui-widget INPUT, .ui-widget SELECT, .ui-widget TEXTAREA, .ui-widget BUTTON -{ - font-family: "Segoe UI", Arial, sans-serif; +.ui-widget input, +.ui-widget select, +.ui-widget textarea, +.ui-widget button { font-size: 1em; } -.ui-widget-content -{ +.ui-widget-content { border: 1px solid #666666; - background: #333333 url(images/ui-bg_inset-soft_5_333333_1x100.png) repeat-x 50% bottom; - color: #FFFFFF; + background: #333333 url(images/ui-bg_inset-soft_5_333333_1x100.png) repeat-x + 50% bottom; + color: #ffffff; } -.ui-widget-content A -{ - color: #FFFFFF; +.ui-widget-content a { + color: #ffffff; } -.ui-widget-header -{ +.ui-widget-header { border: 1px solid #333333; - background: #333333 url(images/ui-bg_gloss-wave_10_333333_500x100.png) repeat-x 50% 50%; - color: #FFFFFF; + background: #333333 url(images/ui-bg_gloss-wave_10_333333_500x100.png) + repeat-x 50% 50%; + color: #ffffff; font-weight: bold; } -.ui-widget-header A -{ - color: #FFFFFF; +.ui-widget-header a { + color: #ffffff; } /*Interaction states ----------------------------------*/ -.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default -{ +.ui-state-default, +.ui-widget-content .ui-state-default, +.ui-widget-header .ui-state-default { border: 1px solid #666666; background: #666666; font-weight: bold; - color: #EEEEEE; + color: #eeeeee; padding-top: 7px; padding-bottom: 6px; padding-left: 5px; } -.ui-state-default A, .ui-state-default A:link, .ui-state-default A:visited -{ - color: #EEEEEE; +.ui-state-default a, +.ui-state-default a:link, +.ui-state-default a:visited { + color: #eeeeee; text-decoration: none; } -.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus -{ - border: 1px solid #59B4D4; - background: #F08080 url(images/ui-bg_flat_40_f08080_40x100.png) repeat-x 50% 50%; +.ui-state-hover, +.ui-widget-content .ui-state-hover, +.ui-widget-header .ui-state-hover, +.ui-state-focus, +.ui-widget-content .ui-state-focus, +.ui-widget-header .ui-state-focus { + border: 1px solid #59b4d4; + background: #f08080 url(images/ui-bg_flat_40_f08080_40x100.png) repeat-x 50% + 50%; font-weight: bold; - color: #FFFFFF; + color: #ffffff; } -.ui-state-hover A, .ui-state-hover A:hover -{ - color: #FFFFFF; +.ui-state-hover a, +.ui-state-hover a:hover { + color: #ffffff; text-decoration: none; } -.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active -{ - border: 1px solid #1A7FA2; - background: #59B4D4 url(images/ui-bg_inset-soft_30_59b4d4_1x100.png) repeat-x 50% 50%; +.ui-state-active, +.ui-widget-content .ui-state-active, +.ui-widget-header .ui-state-active { + border: 1px solid #1a7fa2; + background: #59b4d4 url(images/ui-bg_inset-soft_30_59b4d4_1x100.png) + repeat-x 50% 50%; font-weight: bold; - color: #FFFFFF; + color: #ffffff; } -.ui-state-active A, .ui-state-active A:link, .ui-state-active A:visited -{ - color: #FFFFFF; +.ui-state-active a, +.ui-state-active a:link, +.ui-state-active a:visited { + color: #ffffff; text-decoration: none; } -.ui-widget :active -{ +.ui-widget :active { outline: none; } /*Interaction Cues ----------------------------------*/ -.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight -{ - border: 1px solid #CCCCCC; - background: #EEEEEE url(images/ui-bg_highlight-soft_80_eeeeee_1x100.png) repeat-x 50% top; - color: #2E7DB2; -} -.ui-state-highlight A, .ui-widget-content .ui-state-highlight A, .ui-widget-header .ui-state-highlight A -{ - color: #2E7DB2; -} -.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error -{ - border: 1px solid #FFB73D; - background: #FFC73D url(images/ui-bg_glass_40_ffc73d_1x400.png) repeat-x 50% 50%; +.ui-state-highlight, +.ui-widget-content .ui-state-highlight, +.ui-widget-header .ui-state-highlight { + border: 1px solid #cccccc; + background: #eeeeee url(images/ui-bg_highlight-soft_80_eeeeee_1x100.png) + repeat-x 50% top; + color: #2e7db2; +} +.ui-state-highlight a, +.ui-widget-content .ui-state-highlight a, +.ui-widget-header .ui-state-highlight a { + color: #2e7db2; +} +.ui-state-error, +.ui-widget-content .ui-state-error, +.ui-widget-header .ui-state-error { + border: 1px solid #ffb73d; + background: #ffc73d url(images/ui-bg_glass_40_ffc73d_1x400.png) repeat-x 50% + 50%; color: #111111; } -.ui-state-error A, .ui-widget-content .ui-state-error A, .ui-widget-header .ui-state-error A -{ +.ui-state-error a, +.ui-widget-content .ui-state-error a, +.ui-widget-header .ui-state-error a { color: #111111; } -.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text -{ +.ui-state-error-text, +.ui-widget-content .ui-state-error-text, +.ui-widget-header .ui-state-error-text { color: #111111; } -.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary -{ +.ui-priority-primary, +.ui-widget-content .ui-priority-primary, +.ui-widget-header .ui-priority-primary { font-weight: bold; } -.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary -{ - opacity: .7; +.ui-priority-secondary, +.ui-widget-content .ui-priority-secondary, +.ui-widget-header .ui-priority-secondary { + opacity: 0.7; filter: Alpha(Opacity=70); font-weight: normal; } -.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled -{ - opacity: .35; +.ui-state-disabled, +.ui-widget-content .ui-state-disabled, +.ui-widget-header .ui-state-disabled { + opacity: 0.35; filter: Alpha(Opacity=35); background-image: none; } /*Icons ---------------------------------- states and images*/ -.ui-icon -{ +.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_cccccc_256x240.png); } -.ui-widget-content .ui-icon -{ +.ui-widget-content .ui-icon { background-image: url(images/ui-icons_cccccc_256x240.png); } -.ui-widget-header .ui-icon -{ +.ui-widget-header .ui-icon { background-image: url(images/ui-icons_ffffff_256x240.png); } -.ui-state-default .ui-icon -{ +.ui-state-default .ui-icon { background-image: url(images/ui-icons_cccccc_256x240.png); } -.ui-state-hover .ui-icon, .ui-state-focus .ui-icon -{ +.ui-state-hover .ui-icon, +.ui-state-focus .ui-icon { background-image: url(images/ui-icons_ffffff_256x240.png); } -.ui-state-active .ui-icon -{ +.ui-state-active .ui-icon { background-image: url(images/ui-icons_222222_256x240.png); } -.ui-state-highlight .ui-icon -{ +.ui-state-highlight .ui-icon { background-image: url(images/ui-icons_4b8e0b_256x240.png); } -.ui-state-error .ui-icon, .ui-state-error-text .ui-icon -{ +.ui-state-error .ui-icon, +.ui-state-error-text .ui-icon { background-image: url(images/ui-icons_a83300_256x240.png); } /*positioning*/ -.ui-icon-carat-1-n -{ +.ui-icon-carat-1-n { background-position: 0 0; } -.ui-icon-carat-1-ne -{ +.ui-icon-carat-1-ne { background-position: -16px 0; } -.ui-icon-carat-1-e -{ +.ui-icon-carat-1-e { background-position: -32px 0; } -.ui-icon-carat-1-se -{ +.ui-icon-carat-1-se { background-position: -48px 0; } -.ui-icon-carat-1-s -{ +.ui-icon-carat-1-s { background-position: -64px 0; } -.ui-icon-carat-1-sw -{ +.ui-icon-carat-1-sw { background-position: -80px 0; } -.ui-icon-carat-1-w -{ +.ui-icon-carat-1-w { background-position: -96px 0; } -.ui-icon-carat-1-nw -{ +.ui-icon-carat-1-nw { background-position: -112px 0; } -.ui-icon-carat-2-n-s -{ +.ui-icon-carat-2-n-s { background-position: -128px 0; } -.ui-icon-carat-2-e-w -{ +.ui-icon-carat-2-e-w { background-position: -144px 0; } -.ui-icon-triangle-1-n -{ +.ui-icon-triangle-1-n { background-position: 0 -16px; } -.ui-icon-triangle-1-ne -{ +.ui-icon-triangle-1-ne { background-position: -16px -16px; } -.ui-icon-triangle-1-e -{ +.ui-icon-triangle-1-e { background-position: -32px -16px; } -.ui-icon-triangle-1-se -{ +.ui-icon-triangle-1-se { background-position: -48px -16px; } -.ui-icon-triangle-1-s -{ +.ui-icon-triangle-1-s { background-position: -64px -16px; } -.ui-icon-triangle-1-sw -{ +.ui-icon-triangle-1-sw { background-position: -80px -16px; } -.ui-icon-triangle-1-w -{ +.ui-icon-triangle-1-w { background-position: -96px -16px; } -.ui-icon-triangle-1-nw -{ +.ui-icon-triangle-1-nw { background-position: -112px -16px; } -.ui-icon-triangle-2-n-s -{ +.ui-icon-triangle-2-n-s { background-position: -128px -16px; } -.ui-icon-triangle-2-e-w -{ +.ui-icon-triangle-2-e-w { background-position: -144px -16px; } -.ui-icon-arrow-1-n -{ +.ui-icon-arrow-1-n { background-position: 0 -32px; } -.ui-icon-arrow-1-ne -{ +.ui-icon-arrow-1-ne { background-position: -16px -32px; } -.ui-icon-arrow-1-e -{ +.ui-icon-arrow-1-e { background-position: -32px -32px; } -.ui-icon-arrow-1-se -{ +.ui-icon-arrow-1-se { background-position: -48px -32px; } -.ui-icon-arrow-1-s -{ +.ui-icon-arrow-1-s { background-position: -64px -32px; } -.ui-icon-arrow-1-sw -{ +.ui-icon-arrow-1-sw { background-position: -80px -32px; } -.ui-icon-arrow-1-w -{ +.ui-icon-arrow-1-w { background-position: -96px -32px; } -.ui-icon-arrow-1-nw -{ +.ui-icon-arrow-1-nw { background-position: -112px -32px; } -.ui-icon-arrow-2-n-s -{ +.ui-icon-arrow-2-n-s { background-position: -128px -32px; } -.ui-icon-arrow-2-ne-sw -{ +.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } -.ui-icon-arrow-2-e-w -{ +.ui-icon-arrow-2-e-w { background-position: -160px -32px; } -.ui-icon-arrow-2-se-nw -{ +.ui-icon-arrow-2-se-nw { background-position: -176px -32px; } -.ui-icon-arrowstop-1-n -{ +.ui-icon-arrowstop-1-n { background-position: -192px -32px; } -.ui-icon-arrowstop-1-e -{ +.ui-icon-arrowstop-1-e { background-position: -208px -32px; } -.ui-icon-arrowstop-1-s -{ +.ui-icon-arrowstop-1-s { background-position: -224px -32px; } -.ui-icon-arrowstop-1-w -{ +.ui-icon-arrowstop-1-w { background-position: -240px -32px; } -.ui-icon-arrowthick-1-n -{ +.ui-icon-arrowthick-1-n { background-position: 0 -48px; } -.ui-icon-arrowthick-1-ne -{ +.ui-icon-arrowthick-1-ne { background-position: -16px -48px; } -.ui-icon-arrowthick-1-e -{ +.ui-icon-arrowthick-1-e { background-position: -32px -48px; } -.ui-icon-arrowthick-1-se -{ +.ui-icon-arrowthick-1-se { background-position: -48px -48px; } -.ui-icon-arrowthick-1-s -{ +.ui-icon-arrowthick-1-s { background-position: -64px -48px; } -.ui-icon-arrowthick-1-sw -{ +.ui-icon-arrowthick-1-sw { background-position: -80px -48px; } -.ui-icon-arrowthick-1-w -{ +.ui-icon-arrowthick-1-w { background-position: -96px -48px; } -.ui-icon-arrowthick-1-nw -{ +.ui-icon-arrowthick-1-nw { background-position: -112px -48px; } -.ui-icon-arrowthick-2-n-s -{ +.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } -.ui-icon-arrowthick-2-ne-sw -{ +.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } -.ui-icon-arrowthick-2-e-w -{ +.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } -.ui-icon-arrowthick-2-se-nw -{ +.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } -.ui-icon-arrowthickstop-1-n -{ +.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } -.ui-icon-arrowthickstop-1-e -{ +.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } -.ui-icon-arrowthickstop-1-s -{ +.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } -.ui-icon-arrowthickstop-1-w -{ +.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } -.ui-icon-arrowreturnthick-1-w -{ +.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } -.ui-icon-arrowreturnthick-1-n -{ +.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } -.ui-icon-arrowreturnthick-1-e -{ +.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } -.ui-icon-arrowreturnthick-1-s -{ +.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } -.ui-icon-arrowreturn-1-w -{ +.ui-icon-arrowreturn-1-w { background-position: -64px -64px; } -.ui-icon-arrowreturn-1-n -{ +.ui-icon-arrowreturn-1-n { background-position: -80px -64px; } -.ui-icon-arrowreturn-1-e -{ +.ui-icon-arrowreturn-1-e { background-position: -96px -64px; } -.ui-icon-arrowreturn-1-s -{ +.ui-icon-arrowreturn-1-s { background-position: -112px -64px; } -.ui-icon-arrowrefresh-1-w -{ +.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } -.ui-icon-arrowrefresh-1-n -{ +.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } -.ui-icon-arrowrefresh-1-e -{ +.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } -.ui-icon-arrowrefresh-1-s -{ +.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } -.ui-icon-arrow-4 -{ +.ui-icon-arrow-4 { background-position: 0 -80px; } -.ui-icon-arrow-4-diag -{ +.ui-icon-arrow-4-diag { background-position: -16px -80px; } -.ui-icon-extlink -{ +.ui-icon-extlink { background-position: -32px -80px; } -.ui-icon-newwin -{ +.ui-icon-newwin { background-position: -48px -80px; } -.ui-icon-refresh -{ +.ui-icon-refresh { background-position: -64px -80px; } -.ui-icon-shuffle -{ +.ui-icon-shuffle { background-position: -80px -80px; } -.ui-icon-transfer-e-w -{ +.ui-icon-transfer-e-w { background-position: -96px -80px; } -.ui-icon-transferthick-e-w -{ +.ui-icon-transferthick-e-w { background-position: -112px -80px; } -.ui-icon-folder-collapsed -{ +.ui-icon-folder-collapsed { background-position: 0 -96px; } -.ui-icon-folder-open -{ +.ui-icon-folder-open { background-position: -16px -96px; } -.ui-icon-document -{ +.ui-icon-document { background-position: -32px -96px; } -.ui-icon-document-b -{ +.ui-icon-document-b { background-position: -48px -96px; } -.ui-icon-note -{ +.ui-icon-note { background-position: -64px -96px; } -.ui-icon-mail-closed -{ +.ui-icon-mail-closed { background-position: -80px -96px; } -.ui-icon-mail-open -{ +.ui-icon-mail-open { background-position: -96px -96px; } -.ui-icon-suitcase -{ +.ui-icon-suitcase { background-position: -112px -96px; } -.ui-icon-comment -{ +.ui-icon-comment { background-position: -128px -96px; } -.ui-icon-person -{ +.ui-icon-person { background-position: -144px -96px; } -.ui-icon-print -{ +.ui-icon-print { background-position: -160px -96px; } -.ui-icon-trash -{ +.ui-icon-trash { background-position: -176px -96px; } -.ui-icon-locked -{ +.ui-icon-locked { background-position: -192px -96px; } -.ui-icon-unlocked -{ +.ui-icon-unlocked { background-position: -208px -96px; } -.ui-icon-bookmark -{ +.ui-icon-bookmark { background-position: -224px -96px; } -.ui-icon-tag -{ +.ui-icon-tag { background-position: -240px -96px; } -.ui-icon-home -{ +.ui-icon-home { background-position: 0 -112px; } -.ui-icon-flag -{ +.ui-icon-flag { background-position: -16px -112px; } -.ui-icon-calendar -{ +.ui-icon-calendar { background-position: -32px -112px; } -.ui-icon-cart -{ +.ui-icon-cart { background-position: -48px -112px; } -.ui-icon-pencil -{ +.ui-icon-pencil { background-position: -64px -112px; } -.ui-icon-clock -{ +.ui-icon-clock { background-position: -80px -112px; } -.ui-icon-disk -{ +.ui-icon-disk { background-position: -96px -112px; } -.ui-icon-calculator -{ +.ui-icon-calculator { background-position: -112px -112px; } -.ui-icon-zoomin -{ +.ui-icon-zoomin { background-position: -128px -112px; } -.ui-icon-zoomout -{ +.ui-icon-zoomout { background-position: -144px -112px; } -.ui-icon-search -{ +.ui-icon-search { background-position: -160px -112px; } -.ui-icon-wrench -{ +.ui-icon-wrench { background-position: -176px -112px; } -.ui-icon-gear -{ +.ui-icon-gear { background-position: -192px -112px; } -.ui-icon-heart -{ +.ui-icon-heart { background-position: -208px -112px; } -.ui-icon-star -{ +.ui-icon-star { background-position: -224px -112px; } -.ui-icon-link -{ +.ui-icon-link { background-position: -240px -112px; } -.ui-icon-cancel -{ +.ui-icon-cancel { background-position: 0 -128px; } -.ui-icon-plus -{ +.ui-icon-plus { background-position: -16px -128px; } -.ui-icon-plusthick -{ +.ui-icon-plusthick { background-position: -32px -128px; } -.ui-icon-minus -{ +.ui-icon-minus { background-position: -48px -128px; } -.ui-icon-minusthick -{ +.ui-icon-minusthick { background-position: -64px -128px; } -.ui-icon-close -{ +.ui-icon-close { background-position: -80px -128px; } -.ui-icon-closethick -{ +.ui-icon-closethick { background-position: -96px -128px; } -.ui-icon-key -{ +.ui-icon-key { background-position: -112px -128px; } -.ui-icon-lightbulb -{ +.ui-icon-lightbulb { background-position: -128px -128px; } -.ui-icon-scissors -{ +.ui-icon-scissors { background-position: -144px -128px; } -.ui-icon-clipboard -{ +.ui-icon-clipboard { background-position: -160px -128px; } -.ui-icon-copy -{ +.ui-icon-copy { background-position: -176px -128px; } -.ui-icon-contact -{ +.ui-icon-contact { background-position: -192px -128px; } -.ui-icon-image -{ +.ui-icon-image { background-position: -208px -128px; } -.ui-icon-video -{ +.ui-icon-video { background-position: -224px -128px; } -.ui-icon-script -{ +.ui-icon-script { background-position: -240px -128px; } -.ui-icon-alert -{ +.ui-icon-alert { background-position: 0 -144px; } -.ui-icon-info -{ +.ui-icon-info { background-position: -16px -144px; } -.ui-icon-notice -{ +.ui-icon-notice { background-position: -32px -144px; } -.ui-icon-help -{ +.ui-icon-help { background-position: -48px -144px; } -.ui-icon-check -{ +.ui-icon-check { background-position: -64px -144px; } -.ui-icon-bullet -{ +.ui-icon-bullet { background-position: -80px -144px; } -.ui-icon-radio-off -{ +.ui-icon-radio-off { background-position: -96px -144px; } -.ui-icon-radio-on -{ +.ui-icon-radio-on { background-position: -112px -144px; } -.ui-icon-pin-w -{ +.ui-icon-pin-w { background-position: -128px -144px; } -.ui-icon-pin-s -{ +.ui-icon-pin-s { background-position: -144px -144px; } -.ui-icon-play -{ +.ui-icon-play { background-position: 0 -160px; } -.ui-icon-pause -{ +.ui-icon-pause { background-position: -16px -160px; } -.ui-icon-seek-next -{ +.ui-icon-seek-next { background-position: -32px -160px; } -.ui-icon-seek-prev -{ +.ui-icon-seek-prev { background-position: -48px -160px; } -.ui-icon-seek-end -{ +.ui-icon-seek-end { background-position: -64px -160px; } -.ui-icon-seek-start -{ +.ui-icon-seek-start { background-position: -80px -160px; } /*ui-icon-seek-first is deprecated, use ui-icon-seek-start instead*/ -.ui-icon-seek-first -{ +.ui-icon-seek-first { background-position: -80px -160px; } -.ui-icon-stop -{ +.ui-icon-stop { background-position: -96px -160px; } -.ui-icon-eject -{ +.ui-icon-eject { background-position: -112px -160px; } -.ui-icon-volume-off -{ +.ui-icon-volume-off { background-position: -128px -160px; } -.ui-icon-volume-on -{ +.ui-icon-volume-on { background-position: -144px -160px; } -.ui-icon-power -{ +.ui-icon-power { background-position: 0 -176px; } -.ui-icon-signal-diag -{ +.ui-icon-signal-diag { background-position: -16px -176px; } -.ui-icon-signal -{ +.ui-icon-signal { background-position: -32px -176px; } -.ui-icon-battery-0 -{ +.ui-icon-battery-0 { background-position: -48px -176px; } -.ui-icon-battery-1 -{ +.ui-icon-battery-1 { background-position: -64px -176px; } -.ui-icon-battery-2 -{ +.ui-icon-battery-2 { background-position: -80px -176px; } -.ui-icon-battery-3 -{ +.ui-icon-battery-3 { background-position: -96px -176px; } -.ui-icon-circle-plus -{ +.ui-icon-circle-plus { background-position: 0 -192px; } -.ui-icon-circle-minus -{ +.ui-icon-circle-minus { background-position: -16px -192px; } -.ui-icon-circle-close -{ +.ui-icon-circle-close { background-position: -32px -192px; } -.ui-icon-circle-triangle-e -{ +.ui-icon-circle-triangle-e { background-position: -48px -192px; } -.ui-icon-circle-triangle-s -{ +.ui-icon-circle-triangle-s { background-position: -64px -192px; } -.ui-icon-circle-triangle-w -{ +.ui-icon-circle-triangle-w { background-position: -80px -192px; } -.ui-icon-circle-triangle-n -{ +.ui-icon-circle-triangle-n { background-position: -96px -192px; } -.ui-icon-circle-arrow-e -{ +.ui-icon-circle-arrow-e { background-position: -112px -192px; } -.ui-icon-circle-arrow-s -{ +.ui-icon-circle-arrow-s { background-position: -128px -192px; } -.ui-icon-circle-arrow-w -{ +.ui-icon-circle-arrow-w { background-position: -144px -192px; } -.ui-icon-circle-arrow-n -{ +.ui-icon-circle-arrow-n { background-position: -160px -192px; } -.ui-icon-circle-zoomin -{ +.ui-icon-circle-zoomin { background-position: -176px -192px; } -.ui-icon-circle-zoomout -{ +.ui-icon-circle-zoomout { background-position: -192px -192px; } -.ui-icon-circle-check -{ +.ui-icon-circle-check { background-position: -208px -192px; } -.ui-icon-circlesmall-plus -{ +.ui-icon-circlesmall-plus { background-position: 0 -208px; } -.ui-icon-circlesmall-minus -{ +.ui-icon-circlesmall-minus { background-position: -16px -208px; } -.ui-icon-circlesmall-close -{ +.ui-icon-circlesmall-close { background-position: -32px -208px; } -.ui-icon-squaresmall-plus -{ +.ui-icon-squaresmall-plus { background-position: -48px -208px; } -.ui-icon-squaresmall-minus -{ +.ui-icon-squaresmall-minus { background-position: -64px -208px; } -.ui-icon-squaresmall-close -{ +.ui-icon-squaresmall-close { background-position: -80px -208px; } -.ui-icon-grip-dotted-vertical -{ +.ui-icon-grip-dotted-vertical { background-position: 0 -224px; } -.ui-icon-grip-dotted-horizontal -{ +.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } -.ui-icon-grip-solid-vertical -{ +.ui-icon-grip-solid-vertical { background-position: -32px -224px; } -.ui-icon-grip-solid-horizontal -{ +.ui-icon-grip-solid-horizontal { background-position: -48px -224px; } -.ui-icon-gripsmall-diagonal-se -{ +.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } -.ui-icon-grip-diagonal-se -{ +.ui-icon-grip-diagonal-se { background-position: -80px -224px; } /*Misc visuals ---------------------------------- Corner radius*/ -.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl -{ +.ui-corner-all, +.ui-corner-top, +.ui-corner-left, +.ui-corner-tl { /*[disabled]-moz-border-radius-topleft:6px;*/ /*[disabled]-webkit-border-top-left-radius:6px;*/ /*[disabled]-khtml-border-top-left-radius:6px;*/ /*[disabled]border-top-left-radius:6px;*/ } -.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr -{ +.ui-corner-all, +.ui-corner-top, +.ui-corner-right, +.ui-corner-tr { /*[disabled]-moz-border-radius-topright:6px;*/ /*[disabled]-webkit-border-top-right-radius:6px;*/ /*[disabled]-khtml-border-top-right-radius:6px;*/ /*[disabled]border-top-right-radius:6px;*/ } -.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl -{ +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-left, +.ui-corner-bl { /*[disabled]-moz-border-radius-bottomleft:6px;*/ /*[disabled]-webkit-border-bottom-left-radius:6px;*/ /*[disabled]-khtml-border-bottom-left-radius:6px;*/ /*[disabled]border-bottom-left-radius:6px;*/ } -.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br -{ +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-right, +.ui-corner-br { /*[disabled]-moz-border-radius-bottomright:6px;*/ /*[disabled]-webkit-border-bottom-right-radius:6px;*/ /*[disabled]-khtml-border-bottom-right-radius:6px;*/ /*[disabled]border-bottom-right-radius:6px;*/ } /*Overlays*/ -.ui-widget-overlay -{ - background: #5C5C5C url(images/ui-bg_flat_50_5c5c5c_40x100.png) repeat-x 50% 50%; - opacity: .80; +.ui-widget-overlay { + background: #5c5c5c url(images/ui-bg_flat_50_5c5c5c_40x100.png) repeat-x 50% + 50%; + opacity: 0.8; filter: Alpha(Opacity=80); } -.ui-widget-shadow -{ +.ui-widget-shadow { margin: -7px 0 0 -7px; padding: 7px; - background: #CCCCCC url(images/ui-bg_flat_30_cccccc_40x100.png) repeat-x 50% 50%; - opacity: .60; + background: #cccccc url(images/ui-bg_flat_30_cccccc_40x100.png) repeat-x 50% + 50%; + opacity: 0.6; filter: Alpha(Opacity=60); -moz-border-radius: 8px; -khtml-border-radius: 8px; @@ -1018,79 +850,69 @@ Corner radius*/ * * http://docs.jquery.com/UI/Resizable#theming */ -.ui-resizable -{ +.ui-resizable { position: relative; } -.ui-resizable-handle -{ +.ui-resizable-handle { position: absolute; font-size: 0.1px; z-index: 99999; display: block; } -.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle -{ +.ui-resizable-disabled .ui-resizable-handle, +.ui-resizable-autohide .ui-resizable-handle { display: none; } -.ui-resizable-n -{ +.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } -.ui-resizable-s -{ +.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } -.ui-resizable-e -{ +.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } -.ui-resizable-w -{ +.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } -.ui-resizable-se -{ +.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } -.ui-resizable-sw -{ +.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } -.ui-resizable-nw -{ +.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } -.ui-resizable-ne -{ +.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; @@ -1106,8 +928,7 @@ Corner radius*/ * * http://docs.jquery.com/UI/Selectable#theming */ -.ui-selectable-helper -{ +.ui-selectable-helper { position: absolute; z-index: 100; border: 1px dotted #000000; @@ -1122,45 +943,37 @@ Corner radius*/ * http://docs.jquery.com/UI/Accordion#theming IE/Win - Fix animation bug - #4615*/ -.ui-accordion -{ +.ui-accordion { width: 100%; } -.ui-accordion .ui-accordion-header -{ +.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; } -.ui-accordion .ui-accordion-li-fix -{ +.ui-accordion .ui-accordion-li-fix { display: inline; } -.ui-accordion .ui-accordion-header-active -{ +.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; } -.ui-accordion .ui-accordion-header A -{ +.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: 0.5em 0.5em 0.5em 0.7em; } -.ui-accordion-icons .ui-accordion-header A -{ +.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; } -.ui-accordion .ui-accordion-header .ui-icon -{ +.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: 0.5em; top: 50%; margin-top: -8px; display: none; } -.ui-accordion .ui-accordion-content -{ +.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; @@ -1171,8 +984,7 @@ IE/Win - Fix animation bug - #4615*/ display: none; zoom: 1; } -.ui-accordion .ui-accordion-content-active -{ +.ui-accordion .ui-accordion-content-active { display: block; } /* @@ -1184,14 +996,12 @@ IE/Win - Fix animation bug - #4615*/ * * http://docs.jquery.com/UI/Autocomplete#theming */ -.ui-autocomplete -{ +.ui-autocomplete { position: absolute; cursor: default; } /*workarounds*/ -* HTML .ui-autocomplete -{ +* html .ui-autocomplete { width: 1px; } /*without this, the menu expands to 100% in IE6 @@ -1204,20 +1014,17 @@ IE/Win - Fix animation bug - #4615*/ * * http://docs.jquery.com/UI/Menu#theming */ -.ui-menu -{ +.ui-menu { list-style: none; padding: 2px; margin: 0; display: block; float: left; } -.ui-menu .ui-menu -{ +.ui-menu .ui-menu { margin-top: -3px; } -.ui-menu .ui-menu-item -{ +.ui-menu .ui-menu-item { margin: 0; padding: 0; zoom: 1; @@ -1225,16 +1032,15 @@ IE/Win - Fix animation bug - #4615*/ clear: left; width: 100%; } -.ui-menu .ui-menu-item A -{ +.ui-menu .ui-menu-item a { text-decoration: none; display: block; padding: 0.2em 0.4em; line-height: 1.5; zoom: 1; } -.ui-menu .ui-menu-item A.ui-state-hover, .ui-menu .ui-menu-item A.ui-state-active -{ +.ui-menu .ui-menu-item a.ui-state-hover, +.ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; } @@ -1247,8 +1053,7 @@ IE/Win - Fix animation bug - #4615*/ * * http://docs.jquery.com/UI/Button#theming */ -.ui-button -{ +.ui-button { display: inline-block; position: relative; padding: 0; @@ -1260,94 +1065,87 @@ IE/Win - Fix animation bug - #4615*/ overflow: visible; } /*the overflow property removes extra width in IE*/ -.ui-button-icon-only -{ +.ui-button-icon-only { width: 2.2em; } /*to make room for the icon, a width needs to be set here*/ -BUTTON.ui-button-icon-only -{ +button.ui-button-icon-only { width: 2.4em; } /*button elements seem to need a little more width*/ -.ui-button-icons-only -{ +.ui-button-icons-only { width: 3.4em; } -BUTTON.ui-button-icons-only -{ +button.ui-button-icons-only { width: 3.7em; } /*button text element*/ -.ui-button .ui-button-text -{ +.ui-button .ui-button-text { display: block; line-height: 1.4; } -.ui-button-text-only .ui-button-text -{ +.ui-button-text-only .ui-button-text { padding: 0.4em 1em; } -.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text -{ +.ui-button-icon-only .ui-button-text, +.ui-button-icons-only .ui-button-text { padding: 0.4em; text-indent: -9999999px; } -.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text -{ +.ui-button-text-icon-primary .ui-button-text, +.ui-button-text-icons .ui-button-text { padding: 0.4em 1em 0.4em 2.1em; } -.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text -{ +.ui-button-text-icon-secondary .ui-button-text, +.ui-button-text-icons .ui-button-text { padding: 0.4em 2.1em 0.4em 1em; } -.ui-button-text-icons .ui-button-text -{ +.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; } /*no icon support for input elements, provide padding by default*/ -INPUT.ui-button -{ +input.ui-button { padding: 0.4em 1em; } /*button icon element(s)*/ -.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon -{ +.ui-button-icon-only .ui-icon, +.ui-button-text-icon-primary .ui-icon, +.ui-button-text-icon-secondary .ui-icon, +.ui-button-text-icons .ui-icon, +.ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; } -.ui-button-icon-only .ui-icon -{ +.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; } -.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary -{ +.ui-button-text-icon-primary .ui-button-icon-primary, +.ui-button-text-icons .ui-button-icon-primary, +.ui-button-icons-only .ui-button-icon-primary { left: 0.5em; } -.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary -{ +.ui-button-text-icon-secondary .ui-button-icon-secondary, +.ui-button-text-icons .ui-button-icon-secondary, +.ui-button-icons-only .ui-button-icon-secondary { right: 0.5em; } -.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary -{ +.ui-button-text-icons .ui-button-icon-secondary, +.ui-button-icons-only .ui-button-icon-secondary { right: 0.5em; } /*button sets*/ -.ui-buttonset -{ +.ui-buttonset { margin-right: 7px; } -.ui-buttonset .ui-button -{ +.ui-buttonset .ui-button { margin-left: 0; margin-right: -0.3em; } /*workarounds*/ -BUTTON.ui-button::-moz-focus-inner -{ +button.ui-button::-moz-focus-inner { border: 0; padding: 0; } @@ -1361,25 +1159,21 @@ BUTTON.ui-button::-moz-focus-inner * * http://docs.jquery.com/UI/Dialog#theming */ -.ui-dialog -{ +.ui-dialog { position: absolute; padding: 0.2em; width: 300px; overflow: hidden; } -.ui-dialog .ui-dialog-titlebar -{ +.ui-dialog .ui-dialog-titlebar { padding: 0.4em 1em; position: relative; } -.ui-dialog .ui-dialog-title -{ +.ui-dialog .ui-dialog-title { float: left; margin: 0.1em 16px 0.1em 0; } -.ui-dialog .ui-dialog-titlebar-close -{ +.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: 0.3em; top: 50%; @@ -1388,8 +1182,7 @@ BUTTON.ui-button::-moz-focus-inner padding: 1px; height: 18px; } -.ui-dialog .ui-dialog-titlebar-close SPAN -{ +.ui-dialog .ui-dialog-titlebar-close span { position: absolute; top: 50%; width: 17px; @@ -1397,12 +1190,11 @@ BUTTON.ui-button::-moz-focus-inner display: block; /*margin: 1px; this was causing the close 'x' to be mispositioned */ } -.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus -{ +.ui-dialog .ui-dialog-titlebar-close:hover, +.ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; } -.ui-dialog .ui-dialog-content -{ +.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: 0.5em 1em; @@ -1410,32 +1202,27 @@ BUTTON.ui-button::-moz-focus-inner overflow: auto; zoom: 1; } -.ui-dialog .ui-dialog-buttonpane -{ +.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0; background-image: none; margin: 0.5em 0 0; padding: 0.3em 1em 0.5em 0.4em; } -.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset -{ +.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } -.ui-dialog .ui-dialog-buttonpane BUTTON -{ +.ui-dialog .ui-dialog-buttonpane button { margin: 0.5em 0.4em 0.5em 0; cursor: pointer; } -.ui-dialog .ui-resizable-se -{ +.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; } -.ui-draggable .ui-dialog-titlebar -{ +.ui-draggable .ui-dialog-titlebar { cursor: move; } /* @@ -1447,21 +1234,18 @@ BUTTON.ui-button::-moz-focus-inner * * http://docs.jquery.com/UI/Slider#theming */ -.ui-slider -{ +.ui-slider { position: relative; text-align: left; } -.ui-slider .ui-slider-handle -{ +.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; } -.ui-slider .ui-slider-range -{ +.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: 0.7em; @@ -1469,50 +1253,40 @@ BUTTON.ui-button::-moz-focus-inner border: 0; background-position: 0 0; } -.ui-slider-horizontal -{ +.ui-slider-horizontal { height: 0.8em; } -.ui-slider-horizontal .ui-slider-handle -{ +.ui-slider-horizontal .ui-slider-handle { top: -0.3em; margin-left: -0.6em; } -.ui-slider-horizontal .ui-slider-range -{ +.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } -.ui-slider-horizontal .ui-slider-range-min -{ +.ui-slider-horizontal .ui-slider-range-min { left: 0; } -.ui-slider-horizontal .ui-slider-range-max -{ +.ui-slider-horizontal .ui-slider-range-max { right: 0; } -.ui-slider-vertical -{ +.ui-slider-vertical { width: 0.8em; height: 100px; } -.ui-slider-vertical .ui-slider-handle -{ +.ui-slider-vertical .ui-slider-handle { left: -0.3em; margin-left: 0; margin-bottom: -0.6em; } -.ui-slider-vertical .ui-slider-range -{ +.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } -.ui-slider-vertical .ui-slider-range-min -{ +.ui-slider-vertical .ui-slider-range-min { bottom: 0; } -.ui-slider-vertical .ui-slider-range-max -{ +.ui-slider-vertical .ui-slider-range-max { top: 0; } /* @@ -1524,20 +1298,17 @@ BUTTON.ui-button::-moz-focus-inner * * http://docs.jquery.com/UI/Tabs#theming */ -.ui-tabs -{ +.ui-tabs { position: relative; padding: 0.2em; zoom: 1; } /*position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed")*/ -.ui-tabs .ui-tabs-nav -{ +.ui-tabs .ui-tabs-nav { margin: 0; padding: 0.2em 0.2em 0; } -.ui-tabs .ui-tabs-nav LI -{ +.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; @@ -1547,35 +1318,32 @@ BUTTON.ui-button::-moz-focus-inner padding: 0; white-space: nowrap; } -.ui-tabs .ui-tabs-nav LI A -{ +.ui-tabs .ui-tabs-nav li a { float: left; padding: 0.5em 1em; text-decoration: none; } -.ui-tabs .ui-tabs-nav LI.ui-tabs-selected -{ +.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; } -.ui-tabs .ui-tabs-nav LI.ui-tabs-selected A, .ui-tabs .ui-tabs-nav LI.ui-state-disabled A, .ui-tabs .ui-tabs-nav LI.ui-state-processing A -{ +.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, +.ui-tabs .ui-tabs-nav li.ui-state-disabled a, +.ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } -.ui-tabs .ui-tabs-nav LI A, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav LI.ui-tabs-selected A -{ +.ui-tabs .ui-tabs-nav li a, +.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /*first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere...*/ -.ui-tabs .ui-tabs-panel -{ +.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } -.ui-tabs .ui-tabs-hide -{ +.ui-tabs .ui-tabs-hide { display: none !important; } /* @@ -1587,46 +1355,40 @@ BUTTON.ui-button::-moz-focus-inner * * http://docs.jquery.com/UI/Datepicker#theming */ -.ui-datepicker -{ +.ui-datepicker { width: 17em; padding: 0.2em 0.2em 0; display: none; } -.ui-datepicker .ui-datepicker-header -{ +.ui-datepicker .ui-datepicker-header { position: relative; padding: 0.2em 0; } -.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next -{ +.ui-datepicker .ui-datepicker-prev, +.ui-datepicker .ui-datepicker-next { position: absolute; top: 2px; width: 1.8em; height: 1.8em; } -.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover -{ +.ui-datepicker .ui-datepicker-prev-hover, +.ui-datepicker .ui-datepicker-next-hover { top: 1px; } -.ui-datepicker .ui-datepicker-prev -{ +.ui-datepicker .ui-datepicker-prev { left: 2px; } -.ui-datepicker .ui-datepicker-next -{ +.ui-datepicker .ui-datepicker-next { right: 2px; } -.ui-datepicker .ui-datepicker-prev-hover -{ +.ui-datepicker .ui-datepicker-prev-hover { left: 1px; } -.ui-datepicker .ui-datepicker-next-hover -{ +.ui-datepicker .ui-datepicker-next-hover { right: 1px; } -.ui-datepicker .ui-datepicker-prev SPAN, .ui-datepicker .ui-datepicker-next SPAN -{ +.ui-datepicker .ui-datepicker-prev span, +.ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; @@ -1634,53 +1396,46 @@ BUTTON.ui-button::-moz-focus-inner top: 50%; margin-top: -8px; } -.ui-datepicker .ui-datepicker-title -{ +.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } -.ui-datepicker .ui-datepicker-title SELECT -{ +.ui-datepicker .ui-datepicker-title select { font-size: 1em; margin: 1px 0; } -.ui-datepicker SELECT.ui-datepicker-month-year -{ +.ui-datepicker select.ui-datepicker-month-year { width: 100%; } -.ui-datepicker SELECT.ui-datepicker-month, .ui-datepicker SELECT.ui-datepicker-year -{ +.ui-datepicker select.ui-datepicker-month, +.ui-datepicker select.ui-datepicker-year { width: 49%; } -.ui-datepicker TABLE -{ +.ui-datepicker table { width: 100%; font-size: 0.9em; border-collapse: collapse; margin: 0 0 0.4em; } -.ui-datepicker TH -{ +.ui-datepicker th { padding: 0.7em 0.3em; text-align: center; font-weight: bold; border: 0; } -.ui-datepicker TD -{ +.ui-datepicker td { border: 0; padding: 1px; } -.ui-datepicker TD SPAN, .ui-datepicker TD A -{ +.ui-datepicker td span, +.ui-datepicker td a { display: block; padding: 0.2em; text-align: right; text-decoration: none; } -.ui-datepicker .ui-datepicker-buttonpane -{ +.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: 0.7em 0 0; padding: 0 0.2em; @@ -1688,8 +1443,7 @@ BUTTON.ui-button::-moz-focus-inner border-right: 0; border-bottom: 0; } -.ui-datepicker .ui-datepicker-buttonpane BUTTON -{ +.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: 0.5em 0.2em 0.4em; cursor: pointer; @@ -1697,108 +1451,85 @@ BUTTON.ui-button::-moz-focus-inner width: auto; overflow: visible; } -.ui-datepicker .ui-datepicker-buttonpane BUTTON.ui-datepicker-current -{ +.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; } /*with multiple calendars*/ -.ui-datepicker.ui-datepicker-multi -{ +.ui-datepicker.ui-datepicker-multi { width: auto; } -.ui-datepicker-multi .ui-datepicker-group -{ +.ui-datepicker-multi .ui-datepicker-group { float: left; } -.ui-datepicker-multi .ui-datepicker-group TABLE -{ +.ui-datepicker-multi .ui-datepicker-group table { width: 95%; margin: 0 auto 0.4em; } -.ui-datepicker-multi-2 .ui-datepicker-group -{ +.ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; } -.ui-datepicker-multi-3 .ui-datepicker-group -{ +.ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; } -.ui-datepicker-multi-4 .ui-datepicker-group -{ +.ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; } -.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header -{ +.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width: 0; } -.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header -{ +.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; } -.ui-datepicker-multi .ui-datepicker-buttonpane -{ +.ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; } -.ui-datepicker-row-break -{ +.ui-datepicker-row-break { clear: both; width: 100%; font-size: 0em; } /*RTL support*/ -.ui-datepicker-rtl -{ +.ui-datepicker-rtl { direction: rtl; } -.ui-datepicker-rtl .ui-datepicker-prev -{ +.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } -.ui-datepicker-rtl .ui-datepicker-next -{ +.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } -.ui-datepicker-rtl .ui-datepicker-prev:hover -{ +.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } -.ui-datepicker-rtl .ui-datepicker-next:hover -{ +.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } -.ui-datepicker-rtl .ui-datepicker-buttonpane -{ +.ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; } -.ui-datepicker-rtl .ui-datepicker-buttonpane BUTTON -{ +.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } -.ui-datepicker-rtl .ui-datepicker-buttonpane BUTTON.ui-datepicker-current -{ +.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float: right; } -.ui-datepicker-rtl .ui-datepicker-group -{ +.ui-datepicker-rtl .ui-datepicker-group { float: right; } -.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header -{ +.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } -.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header -{ +.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } /*IE6 IFRAME FIX (taken from datepicker 1.5.3*/ -.ui-datepicker-cover -{ +.ui-datepicker-cover { display: none; /*sorry for IE5*/ display: block; @@ -1827,13 +1558,11 @@ BUTTON.ui-button::-moz-focus-inner * * http://docs.jquery.com/UI/Progressbar#theming */ -.ui-progressbar -{ +.ui-progressbar { height: 2em; text-align: left; } -.ui-progressbar .ui-progressbar-value -{ +.ui-progressbar .ui-progressbar-value { margin: -1px; height: 100%; } diff --git a/src/BloomBrowserUI/themes/bloom-jqueryui-theme/jquery-ui-dialog.custom.css b/src/BloomBrowserUI/themes/bloom-jqueryui-theme/jquery-ui-dialog.custom.css index ff228c10ce96..3f62bc4abbbc 100644 --- a/src/BloomBrowserUI/themes/bloom-jqueryui-theme/jquery-ui-dialog.custom.css +++ b/src/BloomBrowserUI/themes/bloom-jqueryui-theme/jquery-ui-dialog.custom.css @@ -102,7 +102,6 @@ div.ui-tabs { padding: 0; zoom: 1; background: #fff; - font-family: "Segoe UI", Arial, sans-serif; font-size: 11px; } diff --git a/src/BloomExe/web/controllers/AddOrChangePageApi.cs b/src/BloomExe/web/controllers/AddOrChangePageApi.cs index d32fc54e6cf4..077b59faf575 100644 --- a/src/BloomExe/web/controllers/AddOrChangePageApi.cs +++ b/src/BloomExe/web/controllers/AddOrChangePageApi.cs @@ -1,13 +1,8 @@ -using System; using System.Collections.Generic; -using System.Linq; using System.Web; -using System.Xml; using Bloom.Api; using Bloom.Book; using Bloom.Edit; -using SIL.Extensions; -using SIL.Xml; namespace Bloom.web.controllers {