@import url("ox.ui.classic.css"); @import url("ox.ui.modern.css"); @import url("ox.ui.future.css"); /* ================================================================================ Base ================================================================================ */ body { margin: 0; overflow: hidden; -webkit-user-select: none } div { -webkit-user-select: none } div, input, textarea { font-family: Lucida Grande, Lucida Sans Unicode, Segoe UI; font-size: 11px; } td { padding: 0; } /* ================================================================================ Core ================================================================================ */ .OxContainer { left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; } .OxContent { overflow: auto; } /* ================================================================================ Bars ================================================================================ */ .OxBar { overflow: hidden; white-space: nowrap; } .OxTabbar > .OxButtonGroup { margin: 4px 0 0 4px; } /* ================================================================================ Dialog ================================================================================ */ .OxDialog { position: absolute; //left: 0; //top: 0; //right: 0; //bottom: 0; //margin: auto; z-index: 11; -moz-border-radius: 8px; -webkit-border-radius: 8px; } .OxDialog > .OxTitleBar { //left: 0px; //right: 0px; //height: 16px; //padding: 3px 8px 5px 8px; //padding: 3px 0 5px 0; cursor: move; overflow: hidden; white-space: nowrap; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; } .OxDialog > .OxTitleBar > .OxTitle { margin: 3px 8px 0 8px; font-size: 13px; font-weight: bold; text-overflow: ellipsis; } .OxDialog > .OxContent { top: 24px; height: 100%; padding: 16px; font-size: 12px; line-height: 16px; } .OxDialog > .OxButtonsBar { left: 0; right: 0; bottom: 0; height: 24px; //text-align: right; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; } .OxDialog > .OxButtonsBar > .OxButton { margin: 4px 2px 0 2px; } .OxDialog > .OxButtonsBar > .OxButton.OxLeft { float: left; } .OxDialog > .OxButtonsBar > .OxButton.OxLeft:first-child { margin-left: 16px; } .OxDialog > .OxButtonsBar > .OxButton.OxRight { float: right; } .OxDialog > .OxButtonsBar > .OxResize { float: right; height: 24px; width: 14px; cursor: se-resize; } /* ================================================================================ Forms ================================================================================ */ input, textarea { padding: 0; border: 1px; margin: 0; } input[type=button], input[type=reset], input[type=submit] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } input[type=image] { cursor: default; } input:focus, textarea:focus { outline: none; } /* input.OxXlarge { height: 26px; font-size: 19px; padding: 0 12px 0 12px; -moz-border-radius: 14px; -webkit-border-radius: 14px; } input.OxLarge { height: 22px; font-size: 16px; padding: 0 10px 0 10px; -moz-border-radius: 12px; -webkit-border-radius: 12px; } */ input.OxLarge { height: 18px; font-size: 13px; padding: 0 8px 0 8px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } input.OxMedium { height: 14px; padding: 0 6px 0 6px; font-size: 11px; -moz-border-radius: 8px; -webkit-border-radius: 8px; } input.OxSmall { height: 10px; padding: 0 4px 0 4px; font-size: 8px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } input[type=image] { padding: 0; -moz-user-select: none; -webkit-user-select: none; } /* input[type=image].OxLarge { width: 22px; } */ input[type=image].OxLarge { width: 18px; } input[type=image].OxMedium { width: 14px; } input[type=image].OxSmall { width: 10px; } input::-moz-focus-inner { border: none; } textarea { //padding: 2px 4px 2px 4px; padding: 0 4px 0 4px; margin: -1px 0 0 0; resize: none; -moz-border-radius: 8px; -webkit-border-radius: 8px; } .OxButton.OxSymbol, .OxButton.OxSymbol:active, .OxButton.OxSymbol:focus { padding: 0; border: 1px solid rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); //-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); } /* -------------------------------------------------------------------------------- OxButtonGroup -------------------------------------------------------------------------------- */ .OxButtonGroup { display: table-cell; float: left; //overflow: hidden; //white-space: nowrap; } .OxButtonGroup > .OxButton { border-right-width: 0; -moz-border-radius: 0; -webkit-border-radius: 0; } .OxButtonGroup > .OxButton:last-child { border-right-width: 1px; } .OxButtonGroup > .OxButton.OxLarge:first-child { -moz-border-radius-topleft: 6px; -moz-border-radius-bottomleft: 6px; -webkit-border-top-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; } .OxButtonGroup > .OxButton.OxLarge:last-child { -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; } .OxButtonGroup > .OxButton.OxMedium:first-child { -moz-border-radius-topleft: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; } .OxButtonGroup > .OxButton.OxMedium:last-child { -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; } .OxButtonGroup > .OxButton.OxSmall:first-child { -moz-border-radius-topleft: 2px; -moz-border-radius-bottomleft: 2px; -webkit-border-top-left-radius: 2px; -webkit-border-bottom-left-radius: 2px; } .OxButtonGroup > .OxButton.OxSmall:last-child { -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 2px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 2px; } .OxButtonGroup > .OxButton.OxTab { -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomleft: 0; -moz-border-radius-bottomright: 0; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; } .OxButtonGroup > .OxButton.OxTab:first-child { -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; } .OxButtonGroup > .OxButton.OxTab:last-child { -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; } /* -------------------------------------------------------------------------------- OxInput -------------------------------------------------------------------------------- */ div.OxInput { -moz-border-radius: 8px; -webkit-border-radius: 8px; } div.OxInput.OxMedium { height: 14px; } div.OxInput > .OxInputLabel { float: left; padding-left: 8px; text-overflow: ellipsis; cursor: default; overflow: hidden; } div.OxInput > .OxButton { float: left; //margin-left: 1px; margin-top: -1px; } div.OxInput > .OxButton:last-child { float: left; margin-left: -1px; margin-top: -1px; } input.OxInput { float: left; margin: -1px -1px 0 -1px; } /* -------------------------------------------------------------------------------- OxLabel -------------------------------------------------------------------------------- */ .OxLabel { height: 14px; border: 1px; padding: 0 8px 0 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; } /* -------------------------------------------------------------------------------- OxRange -------------------------------------------------------------------------------- */ .OxRange { height: 14px; border: 1px; -moz-border-radius: 8px; -webkit-border-radius: 8px; } .OxRange > .OxArrow:first-child { float: left; margin-top: -1px; } .OxRange > .OxArrow:last-child { float: left; margin-left: -1px; margin-top: -1px; } .OxRange > .OxTrack { float: left; height: 14px; margin-left: -1px; margin-top: -1px; -moz-border-radius: 8px; -webkit-border-radius: 8px; } .OxRange > .OxTrack > .OxImage { float: left; height: 14px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } .OxRange > .OxTrack > .OxThumb { float: left; margin-top: -15px; } .OxRange > .OxTrack > .OxThumb:first-child { margin-top: -1px; } /* -------------------------------------------------------------------------------- OxSelect -------------------------------------------------------------------------------- */ .OxSelect.OxMedium { margin-left: 0; } .OxSelect > .OxButton { float: right; text-align: left; } .OxSelect > .OxSymbol { text-align: right; cursor: default; -moz-user-select: none; -webkit-user-select: none; } .OxSelect.OxMedium > .OxSymbol { float: right; margin: -16px 0 0 -4px; z-index: 9; } /* ================================================================================ Layers ================================================================================ */ .OxLayer { position: absolute; width: 100%; height: 100%; top: 0px; bottom: 0px; left: 0px; right: 0px; background: rgb(0, 0, 0); opacity: 0; overflow: hidden; z-index: 10; } .OxLayer.OxFront { z-index: 100; } .OxMainMenuLayer { position: absolute; width: 100%; top: 24px; bottom: 0px; overflow: hidden; z-index: 10; } /* ================================================================================ Menus ================================================================================ */ .OxMainMenu { z-index: 9; -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75); -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75); } .OxMainMenu.OxLarge { height: 24px; padding-left: 8px; } .OxMainMenu.OxMedium { height: 20px; padding-left: 6px; } .OxMainMenu.OxSmall { height: 16px; padding-left: 4px; } .OxMainMenu > .OxTitle { float: left; cursor: default; -moz-user-select: none; -webkit-user-select: none; } .OxMainMenu.OxLarge > .OxTitle { height: 21px; padding-left: 8px; padding-right: 8px; padding-top: 3px; font-size: 14px; } .OxMainMenu.OxMedium > .OxTitle { height: 17px; padding-left: 6px; padding-right: 6px; padding-top: 3px; font-size: 11px; } .OxMainMenu.OxSmall > .OxTitle { height: 14px; padding-left: 4px; padding-right: 4px; padding-top: 2px; font-size: 9px; } .OxMainMenu > .OxTitle.OxSelected { background: rgb(48, 48, 48); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(80, 80, 80)), color-stop(1, rgb(48, 48, 48))); } .OxMainMenu > .OxExtras { float: right; padding: 4px 12px 0 0; } .OxMenu { position: absolute; display: none; z-index: 11; -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-user-select: none; -webkit-user-select: none; } .OxMenu.OxRight { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; } .OxMenu .OxTop { height: 4px; } .OxMenu.OxRight .OxTop { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; } .OxMenu .OxBottom { height: 4px; -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; } .OxMenu .OxContainer { background: transparent; overflow: hidden; } .OxMenu .OxContent { position: relative; border-collapse: collapse; border-spacing: 0; } .OxMenu .OxItem { cursor: default; } .OxMenu.OxLarge .OxItem { height: 20px; } .OxMenu.OxMedium .OxItem { height: 16px; } .OxMenu.OxSmall .OxItem { height: 12px; } .OxMenu .OxItem.OxDisabled { cursor: default; } .OxMenu.OxLarge .OxItem .OxCell { height: 20px; font-size: 14px; } .OxMenu.OxMedium .OxItem .OxCell { height: 16px; font-size: 11px; } .OxMenu.OxSmall .OxItem .OxCell { height: 12px; font-size: 9px; } .OxMenu .OxItem .OxCell.OxStatus { padding-left: 4px; text-align: right; } .OxMenu .OxItem .OxCell.OxIcon { padding-left: 4px; } .OxMenu .OxItem .OxCell.OxIcon img { position: relative; top: 2px; } .OxMenu.OxLarge .OxItem .OxCell.OxIcon img { width: 16px; height: 16px; -moz-border-radius: 2px; -webkit-border-radius: 2px; } .OxMenu.OxMedium .OxItem .OxCell.OxIcon img { width: 12px; height: 12px; -moz-border-radius: 2px; -webkit-border-radius: 2px; } .OxMenu.OxSmall .OxItem .OxCell.OxIcon img { width: 8px; height: 8px; -moz-border-radius: 1px; -webkit-border-radius: 1px; } .OxMenu .OxItem .OxCell.OxTitle { padding-left: 4px; white-space: nowrap; } .OxMenu .OxItem .OxCell.OxModifiers { padding-left: 4px; text-align: right; } .OxMenu .OxItem .OxCell.OxKey { padding-right: 8px; } .OxMenu .OxItem .OxCell.OxSubmenu { padding-right: 8px; text-align: right; } .OxMenu.OxLarge .OxItem .OxCell.OxSubmenu { font-size: 10px; } .OxMenu.OxMedium .OxItem .OxCell.OxSubmenu { font-size: 8px; } .OxMenu.OxSmall .OxItem .OxCell.OxSubmenu { font-size: 6px; } .OxMenu.OxLarge .OxItem .OxCell.OxStatus, .OxMenu.OxLarge .OxItem .OxCell.OxKey, .OxMenu.OxLarge .OxItem .OxCell.OxSubmenu { width: 12px; } .OxMenu.OxMedium .OxItem .OxCell.OxStatus, .OxMenu.OxMedium .OxItem .OxCell.OxKey, .OxMenu.OxMedium .OxItem .OxCell.OxSubmenu { width: 10px; } .OxMenu.OxSmall .OxItem .OxCell.OxStatus, .OxMenu.OxSmall .OxItem .OxCell.OxKey, .OxMenu.OxSmall .OxItem .OxCell.OxSubmenu { width: 8px; } .OxMenu .OxSpace { height: 4px; } .OxMenu .OxLine { height: 1px; } .OxMenu .OxScrollbar { text-align: center; cursor: default; display: none; } .OxMenu.OxLarge .OxScrollbar { height: 16px; padding-top: 4px; font-size: 10px; } .OxMenu.OxMedium .OxScrollbar { height: 13px; padding-top: 3px; font-size: 8px; } .OxMenu.OxSmall .OxScrollbar { height: 10px; padding-top: 2px; font-size: 6px; } /* ================================================================================ Panels ================================================================================ */ .OxCollapsePanel > .OxBar { position: relative; z-index: 1; } .OxCollapsePanel > .OxBar > .OxButton { float: left; margin: 2px 0 0 4px; } .OxCollapsePanel > .OxBar > .OxTitle { float: left; margin: 3px 0 0 4px; font-weight: bold; } .OxCollapsePanel > .OxContent { position: relative; left: 0; right: 0; } .OxPanel { overflow: auto; } .OxSplitPanel { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; } /* ================================================================================ Requests ================================================================================ */ .OxLoadingIcon { opacity: 0; -moz-user-select: none; -webkit-user-select: none; } .OxLoadingIcon.OxLarge { width: 20px; height: 20px; } .OxLoadingIcon.OxMedium { width: 16px; height: 16px; } .OxLoadingIcon.OxSmall { width: 12px; height: 12px; }