mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-20 09:20:16 +00:00
Dark theme for Explorer (#2185)
* First dark theme commits for command bar * Updated theme on sidebar * Updated tabs, sidebar, splash screen * settings theme changes * Dark theme applied to Monaco editor * Dark theme to stored procedures * Fixed sidebar scroll * Updated scroll issue in sidebar * Command bar items fixed * Fixed lint errors * fixed lint errors * settings side panel fixed * Second last iteration for css * Fixed all the issues of css * Updated the theme icon for now on DE to change the theme from portal/DE itself * Formatting issue resolved * Remove CloudShellTerminalComponent changes - revert to master version * Fixed test issue * Fixed formatting issue * Fix tests: update snapshots and revert xterm imports for compatibility * Fix xterm imports in CloudShellTerminalComponent to use @xterm packages * Fix Cloud Shell component imports for compatibility * Update test snapshots * Fix xterm package consistency across all CloudShell components * Fix TypeScript compilation errors in CloudShell components and query Documents - Standardized xterm package imports across CloudShell components to use legacy 'xterm' package - Fixed Terminal type compatibility issues in CommonUtils.tsx - Added type casting for enableQueryControl property in queryDocuments.ts to handle Azure Cosmos SDK interface limitations - Applied code formatting to ensure consistency * Update failing snapshot tests - Updated TreeNodeComponent snapshot tests for loading states - Updated ThroughputInputAutoPilotV3Component snapshots for number formatting changes (10,00,000 -> 1,000,000) - All snapshot tests now pass * Fixed test issue * Fixed test issue * Updated the buttons for theme * Updated the Theme changes based on portal theme changes * Updated review comments * Updated the duplicate code and fixed the fabric react error * Few places styling added and resolving few comments * Fixed errors * Fixed comments * Fixed comments * Fixed comments * Fixed full text policy issue for mongoru accounts * Resolved comments for class Name and few others * Added css for homepage in ru accounts * Final commit with all the feedback issues resolved * Lint error resolved * Updated the review comments and few Ui issues * Resolved review comments and changed header bg and active state color * Moved svg code to different file and imported * css fixed for the hpome page boxed for ru account * Lint errors * Fixed boxes issue in ru accounts * Handled the initial theme from the portal * Updated snap * Update snapshots for TreeNodeComponent and CreateCopyJobScreensProvider tests * Fix duplicate DataExplorerRoot test id causing Playwright strict mode violation * Fix locale-dependent number formatting in ThroughputInputAutoPilotV3Component --------- Co-authored-by: Sakshi Gupta <sakshig+microsoft@microsoft.com> Co-authored-by: Sakshi Gupta <sakshig@microsoft.com>
This commit is contained in:
sakshigupta12feb
GitHub
@@ -237,11 +237,11 @@
|
||||
*********************************************************************************************/
|
||||
|
||||
.hover() {
|
||||
background-color: @AccentLight;
|
||||
background-color: var(--colorNeutralBackground1Hover);
|
||||
}
|
||||
|
||||
.active() {
|
||||
background-color: @AccentExtra;
|
||||
background-color: var(--colorNeutralBackground1Hover);
|
||||
}
|
||||
|
||||
.focus() {
|
||||
|
||||
@@ -1740,7 +1740,7 @@ input::-webkit-calendar-picker-indicator {
|
||||
flex: 1;
|
||||
padding-left: 34px;
|
||||
padding-right: 34px;
|
||||
color: @BaseDark;
|
||||
color: var(--colorNeutralForeground1);
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
margin: (2 * @MediumSpace) 0px;
|
||||
@@ -1749,7 +1749,6 @@ input::-webkit-calendar-picker-indicator {
|
||||
.contextual-pane .panelMainContent {
|
||||
padding-left: 34px;
|
||||
padding-right: 34px;
|
||||
color: @BaseDark;
|
||||
margin: (2 * @MediumSpace) 0px;
|
||||
}
|
||||
|
||||
@@ -1914,7 +1913,8 @@ input::-webkit-calendar-picker-indicator::after {
|
||||
}
|
||||
|
||||
.nav-tabs-margin {
|
||||
background-color: #f2f2f2;
|
||||
background-color: var(--colorNeutralBackground1);
|
||||
color: var(--colorNeutralForeground1);
|
||||
|
||||
.nav-tabs {
|
||||
display: flex;
|
||||
@@ -1922,11 +1922,19 @@ input::-webkit-calendar-picker-indicator::after {
|
||||
align-items: flex-end;
|
||||
height: 100%;
|
||||
margin-bottom: -0.5px;
|
||||
background-color: var(--colorNeutralBackground1Selected);
|
||||
|
||||
li {
|
||||
// Override the bootstrap defaults here to align with our layout constants.
|
||||
margin-bottom: 0px;
|
||||
height: 32px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--colorNeutralBackground1Hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--colorNeutralBackground1Pressed);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1940,8 +1948,9 @@ input::-webkit-calendar-picker-indicator::after {
|
||||
.nav.nav-tabs.qslevel > li > a:hover {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background-color: transparent !important;
|
||||
background-color: var(--colorNeutralBackground1Selected);
|
||||
border-color: transparent;
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
|
||||
.numbersize {
|
||||
@@ -2376,6 +2385,8 @@ a:link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0; // This prevents it to grow past the parent's width if its content is too wide
|
||||
background-color: var(--colorNeutralBackground1);
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
@@ -2631,9 +2642,10 @@ a:link {
|
||||
}
|
||||
|
||||
.tabPanesContainer {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
background-color: var(--colorNeutralBackground1);
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
@@ -2655,24 +2667,18 @@ a:link {
|
||||
.nav-tabs > li.active > .tabNavContentContainer,
|
||||
.nav-tabs > li.active > .tabNavContentContainer:focus,
|
||||
.nav-tabs > li.active > .tabNavContentContainer:hover {
|
||||
color: #555;
|
||||
color: var(--colorNeutralForeground1);
|
||||
cursor: default;
|
||||
background-color: @BaseLight;
|
||||
border-color: @BaseMedium;
|
||||
border-bottom-color: @BaseLight;
|
||||
background-color: var(--colorNeutralBackground1);
|
||||
border-color: var(--colorNeutralStroke1);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
height: @ActiveTabHeight;
|
||||
width: @ActiveTabWidth;
|
||||
}
|
||||
|
||||
.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
|
||||
font-weight: bolder;
|
||||
border-bottom: 2px solid rgba(0, 120, 212, 1);
|
||||
}
|
||||
|
||||
.nav-tabs > li.active:focus > .tabNavContentContainer {
|
||||
.focus();
|
||||
.nav-tabs > li.active .contentWrapper {
|
||||
border-bottom: 2px solid var(--colorCompoundBrandBackground);
|
||||
}
|
||||
|
||||
.tabNavContentContainer {
|
||||
@@ -2681,7 +2687,7 @@ a:link {
|
||||
justify-content: space-between;
|
||||
border-radius: 2px 2px 0 0;
|
||||
padding: @DefaultSpace 0px @SmallSpace 0px;
|
||||
color: @BaseHigh;
|
||||
color: var(--colorNeutralForeground1);
|
||||
width: @TabsWidth;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
@@ -2689,19 +2695,21 @@ a:link {
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: @BaseMediumLow;
|
||||
border-color: @BaseMediumLow;
|
||||
background-color: var(--colorNeutralBackground1Hover);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: @BaseMediumLow;
|
||||
background-color: var(--colorNeutralBackground1Pressed);
|
||||
}
|
||||
|
||||
.tab_Content {
|
||||
.flex-display();
|
||||
width: @TabsWidth;
|
||||
border-right: @ButtonBorderWidth solid @BaseMedium;
|
||||
border-right: @ButtonBorderWidth solid var(--colorNeutralStroke1);
|
||||
white-space: nowrap;
|
||||
color: var(--colorNeutralForeground1);
|
||||
|
||||
.contentWrapper {
|
||||
.flex-display();
|
||||
width: @ContentWrapper;
|
||||
@@ -2723,9 +2731,8 @@ a:link {
|
||||
background-image: url(../images/error_no_outline.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 3px;
|
||||
display: block;
|
||||
margin: 1px 0px 0px 6px;
|
||||
margin: 4px 0px 0px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2750,39 +2757,60 @@ a:link {
|
||||
.loadingIcon {
|
||||
width: @LoadingErrorIconSize;
|
||||
height: @LoadingErrorIconSize;
|
||||
margin: 0px 0px @SmallSpace @SmallSpace;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.warningIconContainer {
|
||||
width: @ErrorIconContainer;
|
||||
height: @ErrorIconContainer;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.tabNavText {
|
||||
margin-left: @SmallSpace;
|
||||
margin-right: 2px;
|
||||
color: @BaseDark;
|
||||
color: var(--colorNeutralForeground1);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
flex-grow: 1;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.tabIconSection {
|
||||
width: 29px;
|
||||
position: relative;
|
||||
padding-top: 2px;
|
||||
|
||||
.cancelButton {
|
||||
padding: 0px @SmallSpace 0px @SmallSpace;
|
||||
color: var(--colorNeutralForeground1);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
.hover();
|
||||
background-color: var(--colorNeutralBackground1Hover);
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.focus();
|
||||
background-color: var(--colorNeutralBackground1Pressed);
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
.active();
|
||||
background-color: var(--colorNeutralBackground1Pressed);
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "×";
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3137,3 +3165,12 @@ a:link {
|
||||
.sidebarContainer {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.close-Icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
200
less/forms.less
200
less/forms.less
@@ -1,211 +1,227 @@
|
||||
@import "./Common/Constants";
|
||||
|
||||
.dirty {
|
||||
border: 1px solid #9b4f96;
|
||||
border: 1px solid #9b4f96;
|
||||
}
|
||||
|
||||
.dirty:focus {
|
||||
outline: 1px solid #9b4f96;
|
||||
outline: 1px solid #9b4f96;
|
||||
}
|
||||
|
||||
.tabForm {
|
||||
padding: 12px 20px 20px 20px;
|
||||
margin-left: 3px;
|
||||
padding: 12px 20px 20px 20px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.storedTabForm {
|
||||
padding-top: @LargeSpace;
|
||||
padding-top: @LargeSpace;
|
||||
}
|
||||
|
||||
.scaleSettingScrollable {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height:100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.disableFocusDefaults[tabindex] {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
outline: none;
|
||||
}
|
||||
&:active {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.indexingPolicyEditor {
|
||||
width: 100%;
|
||||
height: calc(~"100vh - 400px");
|
||||
width: 100%;
|
||||
height: calc(~"100vh - 400px");
|
||||
}
|
||||
|
||||
.scaleDivison {
|
||||
padding: @MediumSpace 0px @DefaultSpace 0px;
|
||||
padding: @MediumSpace 0px @DefaultSpace 0px;
|
||||
}
|
||||
|
||||
.scaleSettingTitle {
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.autoScaleThroughputTitle {
|
||||
margin-bottom: @SmallSpace;
|
||||
margin-bottom: @SmallSpace;
|
||||
}
|
||||
|
||||
.autoScaleDescription {
|
||||
margin-top: 6px;
|
||||
margin-bottom: @SmallSpace;
|
||||
margin-top: 6px;
|
||||
margin-bottom: @SmallSpace;
|
||||
}
|
||||
|
||||
.ssExpandCollapseIcon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.ssCollapseIcon {
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.ssTextAllignment {
|
||||
padding-left: 19px;
|
||||
padding-left: 19px;
|
||||
}
|
||||
|
||||
.throughputStorageBlock {
|
||||
border-top: 1px solid #bbb;
|
||||
border-bottom: 1px solid #bbb;
|
||||
background-color: #ccc;
|
||||
padding-left: 10px;
|
||||
width: 315px;
|
||||
border-top: 1px solid #bbb;
|
||||
border-bottom: 1px solid #bbb;
|
||||
background-color: #ccc;
|
||||
padding-left: 10px;
|
||||
width: 315px;
|
||||
}
|
||||
|
||||
.storageCapacityTitle {
|
||||
padding: @LargeSpace 0px;
|
||||
|
||||
padding: @LargeSpace 0px;
|
||||
}
|
||||
.throughputStorageValue {
|
||||
font-size: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.estimatedCost, .largePartitionKeyEnabled {
|
||||
padding: @SmallSpace 0px @LargeSpace;
|
||||
.estimatedCost,
|
||||
.largePartitionKeyEnabled {
|
||||
padding: @SmallSpace 0px @LargeSpace;
|
||||
}
|
||||
|
||||
.storagePadding {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 14px;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
.dirtyTextbox {
|
||||
width: 176px;
|
||||
margin-top: 7px;
|
||||
padding-left: 5px;
|
||||
width: 176px;
|
||||
margin-top: 7px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.formTitleFirst {
|
||||
padding: @DefaultSpace (2 * @MediumSpace);
|
||||
padding: @DefaultSpace (2 * @MediumSpace);
|
||||
}
|
||||
|
||||
.formTitleTextbox {
|
||||
padding: 0px 0px @DefaultSpace (2 * @MediumSpace);
|
||||
padding: 0px 0px @DefaultSpace (2 * @MediumSpace);
|
||||
}
|
||||
|
||||
.formTree {
|
||||
border: 1px solid #969696;
|
||||
color: #393939;
|
||||
padding: 0px 12px 1px 8px;
|
||||
border: 1px solid var(--colorNeutralStroke1);
|
||||
color: var(--colorNeutralForeground1);
|
||||
background-color: var(--colorNeutralBackground1);
|
||||
padding: 0px 12px 1px 8px;
|
||||
}
|
||||
|
||||
.formTree:hover {
|
||||
border: 1px solid #969696;
|
||||
background-color: #e6f8fe;
|
||||
border: 1px solid var(--colorNeutralStroke1Hover);
|
||||
background-color: var(--colorNeutralBackground1Hover);
|
||||
}
|
||||
|
||||
.formTree::placeholder {
|
||||
color: var(--colorNeutralForeground2);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.formTree:active {
|
||||
border: 1px solid #1ebbee;
|
||||
border: 1px solid var(--colorNeutralStroke1Pressed);
|
||||
background-color: var(--colorNeutralBackground1Pressed);
|
||||
}
|
||||
|
||||
.scaleForm {
|
||||
padding-left: 8px;
|
||||
color: @BaseDark;
|
||||
border: 1px solid #969696;
|
||||
min-width: @ScaleFormWidth;
|
||||
padding-left: 8px;
|
||||
color: @BaseDark;
|
||||
border: 1px solid #969696;
|
||||
min-width: @ScaleFormWidth;
|
||||
|
||||
&:hover {
|
||||
background-color: #e6f8fe;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #e6f8fe;
|
||||
}
|
||||
}
|
||||
|
||||
.formTitle {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 4px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
|
||||
.spUdfTriggerHeader {
|
||||
padding: @DefaultSpace 0px @SmallSpace (2 * @MediumSpace);
|
||||
padding: @DefaultSpace 0px @SmallSpace (2 * @MediumSpace);
|
||||
}
|
||||
|
||||
.storedUdfTriggerEditor {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.unselectedRadio {
|
||||
background-color: white;
|
||||
border-color: #EEE!important;
|
||||
color: black!important;
|
||||
background-color: white;
|
||||
border-color: #eee !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.disabledRadio {
|
||||
background-color: #A19F9D;
|
||||
border-color: #EEE!important;
|
||||
color: white!important;
|
||||
background-color: #a19f9d;
|
||||
border-color: #eee !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.selectedRadio {
|
||||
background-color: @AccentMediumHigh;
|
||||
border-color: #EEE!important;
|
||||
color: white!important;
|
||||
cursor: pointer;
|
||||
background-color: @AccentMediumHigh;
|
||||
border-color: #eee !important;
|
||||
color: white !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selectedRadio:hover {
|
||||
background-color: @AccentMediumHigh;
|
||||
border-color: #EEE!important;
|
||||
color: white!important;
|
||||
cursor: pointer;
|
||||
background-color: @AccentMediumHigh;
|
||||
border-color: #eee !important;
|
||||
color: white !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selectedRadio:active {
|
||||
background-color: #0072c6;
|
||||
border-color: #EEE!important;
|
||||
color: white!important;
|
||||
cursor: pointer;
|
||||
border: 1px solid #0072c6;
|
||||
background-color: #0072c6;
|
||||
border-color: #eee !important;
|
||||
color: white !important;
|
||||
cursor: pointer;
|
||||
border: 1px solid #0072c6;
|
||||
}
|
||||
|
||||
.selectedRadio.dirty {
|
||||
background-color: #9b4f96;
|
||||
background-color: #9b4f96;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.formReadOnly {
|
||||
background-color: #ddd;
|
||||
border: 1px solid #969696;
|
||||
min-width: 184px;
|
||||
padding-left: 8px;
|
||||
background-color: #ddd;
|
||||
border: 1px solid #969696;
|
||||
min-width: 184px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.migration:disabled {
|
||||
background-color: #ccc;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.trigger-field {
|
||||
width: 40%;
|
||||
margin-top: 10px
|
||||
width: 40%;
|
||||
margin-top: 10px;
|
||||
background-color: var(--colorNeutralBackground1);
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
|
||||
.trigger-field input::placeholder {
|
||||
color: var(--colorNeutralForeground3);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.trigger-form {
|
||||
padding: 10px 30px 10px 30px;
|
||||
}
|
||||
background-color: var(--colorNeutralBackground1);
|
||||
color: var(--colorNeutralForeground1);
|
||||
padding: 10px 30px;
|
||||
}
|
||||
|
||||
@@ -255,7 +255,7 @@ body {
|
||||
flex: 1;
|
||||
padding-left: 34px;
|
||||
padding-right: 34px;
|
||||
color: @BaseDark;
|
||||
color: var(--colorNeutralForeground1);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
margin: (2 * @MediumSpace) 0px;
|
||||
|
||||
270
less/tree.less
270
less/tree.less
@@ -1,270 +0,0 @@
|
||||
@import "./Common/Constants";
|
||||
|
||||
.resourceTree {
|
||||
height: 100%;
|
||||
flex: 0 0 auto;
|
||||
.main {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.resourceTreeScroll {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.userSelectNone {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
.treeHovermargin {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
padding: @SmallSpace 2px;
|
||||
outline: 0;
|
||||
|
||||
&:hover {
|
||||
.hover();
|
||||
}
|
||||
|
||||
&:active {
|
||||
.active();
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.focus();
|
||||
}
|
||||
}
|
||||
|
||||
.contextmenushowing {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.collectionstree {
|
||||
width: 100%;
|
||||
margin-top: @DefaultSpace;
|
||||
|
||||
.databaseList {
|
||||
list-style-type: none;
|
||||
padding-left: 0px;
|
||||
|
||||
.collectionList {
|
||||
padding-left: (2 * @MediumSpace);
|
||||
}
|
||||
|
||||
.collectionChildList {
|
||||
padding-left: @LargeSpace;
|
||||
}
|
||||
|
||||
.databaseDocuments {
|
||||
padding-left: (5 * @MediumSpace);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pointerCursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menuEllipsis {
|
||||
padding-right: 6px;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
left: 0px;
|
||||
float: right;
|
||||
display: none;
|
||||
padding-left: 6px !important;
|
||||
line-height: @TreeLineHeight;
|
||||
}
|
||||
|
||||
.databaseMenu {
|
||||
.flex-display();
|
||||
}
|
||||
|
||||
.databaseMenu:hover .menuEllipsis,
|
||||
.databaseMenu:focus .menuEllipsis {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.databaseCollChildTextOverflow {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.collectionMenu {
|
||||
.flex-display();
|
||||
}
|
||||
|
||||
.collectionMenu:hover .menuEllipsis,
|
||||
.collectionMenu:focus .menuEllipsis {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.documentsMenu:hover .menuEllipsis,
|
||||
.documentsMenu:focus .menuEllipsis {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.treeChildMenu {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.storedProcedureMenu:hover .menuEllipsis,
|
||||
.storedProcedureMenu:focus .menuEllipsis {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.childMenu {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-left: (6 * @MediumSpace);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.storedChildMenu:hover .menuEllipsis,
|
||||
.storedChildMenu:focus .menuEllipsis {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.contextmenu6 {
|
||||
top: -29px;
|
||||
}
|
||||
|
||||
.userDefinedMenu:hover .contextmenu6 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.userDefinedchildMenu:hover .menuEllipsis,
|
||||
.userDefinedchildMenu:focus .menuEllipsis {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.triggersMenu:hover .menuEllipsis,
|
||||
.triggersMenu:focus .menuEllipsis {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.triggersChildMenu:hover .menuEllipsis,
|
||||
.triggersChildMenu:focus .menuEllipsis {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.databaseId {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.storedUdfTriggerMenu {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.collectionstree img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
img.collectionsTreeCollapseExpand {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.collapsed::before {
|
||||
content: "\23F5";
|
||||
margin-left: 0px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.expanded::before {
|
||||
content: "\23F7";
|
||||
margin-left: 0px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.collectionMenuChildren {
|
||||
padding-left: 42px;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
width: 100vh;
|
||||
height: 40px;
|
||||
background: white;
|
||||
transform-origin: left top;
|
||||
-webkit-transform-origin: left top;
|
||||
-ms-transform-origin: left top;
|
||||
transform: rotate(-90deg) translateX(-100%);
|
||||
-webkit-transform: rotate(-90deg) translateX(-100%);
|
||||
-ms-transform: rotate(-90deg) translateX(-100%);
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.main-nav-img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: -32px 0 0 0;
|
||||
transform: rotate(-90deg) translateX(-100%);
|
||||
-webkit-transform: rotate(-90deg) translateX(-100%);
|
||||
-ms-transform: rotate(-90deg) translateX(-100%);
|
||||
}
|
||||
|
||||
.main-nav-img.main-nav-sub-img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0px 0px 0 0;
|
||||
transform: rotate(180deg) translateX(0%);
|
||||
-webkit-transform: rotate(180deg) translateX(0%);
|
||||
-ms-transform: rotate(180deg) translateX(0%);
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
ul.nav {
|
||||
margin: 0 auto;
|
||||
margin-top: 0px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.mini ul.nav li {
|
||||
float: right;
|
||||
line-height: 25px;
|
||||
height: auto;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.spancolchildstyle {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.contextmenubutton {
|
||||
float: right;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.highlight:hover > .contextmenubutton {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
.highlight:hover > .contextmenubutton::after {
|
||||
content: "\2026";
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.showEllipsis {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
Reference in New Issue
Block a user