Use special version of theme.css for readonly widget build.origin/stable

2 files changed, 689 insertions, 1 deletions

diff --git a/bundles/org.eclipse.orion.client.ui/web/browse/browserTheme.css b/bundles/org.eclipse.orion.client.ui/web/browse/browserTheme.css
new file mode 100644
index 0000000..fe0f899
--- /dev/null
+++ b/bundles/org.eclipse.orion.client.ui/web/browse/browserTheme.css
@@ -0,0 +1,688 @@
+/**

+ * Note: many styles defined in this file are dynamically overridden at page-load time by by ThemeSheetWriter.js and ThemeData.js

+ */

+

+/* Page color */

+

+.orionPage {

+	background-color: #fdfdfd;

+	width: 100%;

+	height: 100%;

+}

+

+/* Top row/navigation banner */

+

+.topRowBanner {

+	margin: 0;

+	border: 0;

+	background-color: white;

+	height: 16px;

+	padding: 10px 3px 6px 2px;

+	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */

+	display: -ms-flexbox;     /* TWEENER - IE 10 */

+	display: -webkit-flex;     /* NEW - Chrome */

+	display: flex; 

+	white-space: nowrap;

+	border-bottom: 1px solid #ddd;

+}

+

+

+/* Footer */

+.logoFooter { 

+	float: left;

+	margin-top:2px;

+	margin-left:4px;

+}

+

+a {

+	text-decoration: none;

+	color: #3087B3;

+}

+

+a:hover {

+	cursor: pointer;

+	text-decoration: underline;

+}

+

+/* Navigation text */

+

+.primaryNav {

+	font-size: 8pt; 

+	font-weight: normal;

+	color: #BFBFBF;

+	vertical-align: baseline;

+}

+

+.primaryNav > div {

+	padding-top: 6px;

+}

+

+.primaryNav > nav {

+	padding-top: 6px;

+}

+

+.primaryNav > nav > a {

+	color: #BFBFBF;

+	margin-right: 6px;

+	margin-left: 6px; 

+	text-decoration: none;

+}

+

+.primaryNav > nav > a:hover, .primaryNav span.dropdownTrigger:hover {

+	cursor: pointer;

+	color: white;

+}

+

+/* Title area - the place for location/breadcrumbs */

+

+.titleArea {

+    margin: 0;

+    padding-top: 3px;

+    border: 0;

+    background: #EFEFEF;

+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EFEFEF), color-stop(100%,#EFEFEF));

+    border-bottom: 1px solid #DEDEDE;

+    min-height: 20px;

+}

+

+/* Row selection */

+

+.checkedRow {

+	background-color: #cedce7 !important; /* was e3e3e3 */

+}

+

+.checkedRow.disabledRow {

+	background-color: #dadada !important; /* was e3e3e3 */

+}

+

+.navRow > td:first-child {

+	border-left: 6px solid transparent;

+}

+

+.navRow.checkedRow > td:first-child {

+	border-left-color: #7fa4c0;

+}

+

+.navbar-item-selected {

+	background: #FEC;

+	color: black;

+}

+
+/* Breadcrumbs */

+

+.breadcrumb {

+	font-size: 8pt;

+	text-decoration: none;

+	color: #333;

+	padding-top: 2px;

+}

+

+a.breadcrumb:hover {

+	text-decoration: none;

+	border-bottom: 1px dotted;

+	color: #F58B0F;

+	cursor: pointer;

+}

+

+/* a.breadcrumb:visited {

+	color: #3087B3;

+} */

+

+.breadcrumbSeparator {

+	font-size: 8pt;

+	text-decoration: none;

+	color: #333;

+	font-weight: bold;

+}

+

+.currentLocation {

+	padding-top:1px;

+	font-weight: bold;

+	font-size: 8pt;

+	color: #333;

+	text-decoration: none;

+	line-height: 10pt;

+	white-space:nowrap;

+}

+

+a.currentLocation:hover {

+	font-weight: bold;

+	font-size: 8pt;

+	color: #F58B0F;

+ 	text-decoration: none;

+	border-bottom: 1px dotted;

+ }

+

+.auxpane {

+	border: 0;

+	background: #eeeeee;

+}

+

+.mainpane {

+	border: 0;

+	background: #eee !important;

+	padding-right:15px;

+}

+

+.mainToolbar {

+ 	background: #eeeeee;

+ 	padding-left: 5px;

+ 	padding-right: 5px;

+	/* border-bottom: 1px solid #ebebeb; */

+	/* padding-left:50px; */

+}

+

+/* Filesystem switcher toolbar */

+.fsToolbar {

+	padding: 2px 4px 2px 4px; /*$FSToolbarPadding*/

+	background-color: #EEEEEE;

+	/* border-bottom: 1px solid rgb(235, 235, 235); */

+	

+}

+

+.filesystemName {

+	font-weight: bold;

+	margin-left: 10px;

+	margin-top: 8px;

+	white-space: nowrap;

+	overflow: hidden;

+	text-overflow: ellipsis;

+	/* 100% - filesystemName_margin - filesystemName_margin - filesystemSwitcher_width */

+	max-width: calc(100% - 6px - 4px - 28px);

+	max-width: -webkit-calc(100% - 6px - 4px - 28px);

+	-moz-user-select: -moz-none;

+	-webkit-user-select: none;

+	-ms-user-select: none;

+	user-select: none;

+	color:#555;

+}

+

+.filesystemSwitcher {

+}

+

+.sidebarToolbar {

+	padding-right: 4px;

+}

+

+/* Searchbox in the top navigation area seems a difficult thing to 

+   get right. I've worked with a range of colors. What I notice is that

+   if the edges are curved, then it seems to need a lighter shade. That

+   draws more attention to the search box. It is more passive and fitting

+   if drawn with straight edges and a darker background */

+

+.searchbox {

+    background-image: url(../images/core_sprites.png);

+    background-repeat: no-repeat; 

+    background-position: 4px -297px; 

+    width: 12px; height: 12px;

+    background-color: #444;

+	border: 1px solid #222;

+	font-size: 11px;

+	width: 15em;

+	height: 16px;

+	border-radius: 10px; /* 10px */

+	color: #999;

+	padding: 0;

+	padding-left: 20px;

+	padding-right: 16px;

+	margin-left: 5px;

+	font: 7pt Lucida Sans Unicode,Lucida Grande,Verdana,Arial,Helvetica,Myriad,Tahoma,clean,sans-serif !important;

+}

+

+.searchbox:focus{

+	color: white;

+	outline: none;

+}

+

+/* Orion button provides standard padding, margin, alignment for any button, regardless of whether it is a command or not.  Using

+   this helps non-gray buttons remain uniform looking with respect to size. */

+   

+.orionButton {

+	border: 1px solid transparent;

+	text-align: center;

+	vertical-align: baseline;

+    display: inline-block;

+    padding: 2px 6px 3px;

+    border-radius: 1px;

+    line-height: 12px;

+	font: 8pt Lucida Sans Unicode,Lucida Grande,Verdana,Arial,Helvetica,Myriad,Tahoma,clean,sans-serif;  /* to override user agent stylesheet */

+	margin: 0;  /* to override user agent stylesheet */

+}

+

+.commandButton.orionButton.dropdownTrigger {

+	border-color: transparent;

+}

+

+.commandButton.orionButton.dropdownTrigger:hover {

+	border-color: #ccc;

+}

+

+.commandButton {

+	color: #222;

+	border: 1px solid #dedede;

+	background-color: #ddd;

+	border-radius: 2px;

+	vertical-align:middle;

+	-webkit-transition: all 0.2s ease;

+	transition: all 0.2s ease;

+}

+

+.commandButton:hover, .commandButton:focus {

+	background-color: #eee;

+	box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);

+}

+

+.commandButton.disabled {

+	color: #cdcdcd;

+}

+

+.commandImage {

+	border: 1px solid transparent;

+    border-radius: 1px;

+	background-color: transparent;

+	vertical-align: baseline;

+	cursor: pointer;

+	display: inline-block;

+	padding: 1px;

+	padding-top:0;

+	padding-bottom: 3px;

+	-webkit-touch-callout: none;

+	-webkit-user-select: none;

+	-khtml-user-select: none;

+	-moz-user-select: none;

+	-ms-user-select: none;

+	user-select: none;

+}

+

+.commandImage:hover, .commandImage:focus {

+	background-color: #e6e6e6;

+	border: 1px solid #ccc;

+}

+

+/* should be used in conjunction with .commandButton when a tool has no icon. */

+.commandMissingImageButton {

+	font-weight: bold;

+}

+

+.commandLink {

+	display: inline-block;

+	vertical-align: middle;

+	padding: 5px 0;  /* other commands have 1px plus a border and 4px of padding, so we need 5px */

+	-webkit-touch-callout: none;

+	-webkit-user-select: none;

+	-khtml-user-select: none;

+	-moz-user-select: none;

+	-ms-user-select: none;

+	user-select: none;

+}

+

+.commandSeparator {

+	padding: 2px;

+}

+

+.commandActive {

+	background-color: #e6e6e6 !important;

+	border: 1px solid #808080 !important;

+    border-radius: 2px !important;

+}

+

+

+/* placeholders for possible hover states on command items */

+.commandActiveItem {

+}

+

+.commandInactiveItem {

+}

+

+/* widget theming */

+/* splitter - typically the color of the title area */

+.split {

+	background: #efefef;

+}

+

+.splitTracking {

+	background: #dedede;

+}

+

+.splitThumb {

+	background: #ccc;

+}

+

+/* dropdowns */

+.dropdown {

+}

+

+.dropdownArrowDown {

+	display: inline-block;

+	vertical-align: top;

+	line-height: 12px;

+	color: #555;

+}

+

+.dropdownArrowRight {

+	float: right;

+	font-size: 12px;

+}

+

+.dropdownTrigger:not(.dropdownDefaultButton) {

+	font-weight: normal;

+	background: none;

+	border-color: transparent;

+}

+

+.dropdownTrigger a {

+	text-decoration: none;

+}

+

+.dropdownTriggerOpen {

+	

+}

+

+.dropdownMenu {

+	box-shadow: 2px 2px 5px 3px rgba(0, 0, 0, .2);

+	color: #555;

+	background-color: white;

+	border-collapse: separate;

+	border: 1px solid #bbbbbb;

+	border-radius: 1px;

+	visibility: hidden;

+	z-index: 150;

+	position: absolute;

+	list-style-type: none;

+	display: none; /* don't take part in layout until open */

+	line-height: normal; /* don't want to inherit strange line-heights from ancestor elements */

+	margin: 0; /* needed for context menu positioning to work properly */

+	cursor: default;

+	font-size: 12px;

+	margin: 0;

+	outline: none;

+	padding: 3px 0 3px;

+}

+

+.dropdownMenuOpen {

+	min-width: 120px;

+	display: block;

+	visibility: visible;

+}

+

+.dropdownSubMenu {

+	position: relative;

+	line-height: normal;

+}

+

+.dropdownSubMenu > ul {

+	top: 0;

+	left: 100%;

+}

+

+.dropdownMenu > li {

+	min-width: 120px;

+	display: flex;

+}

+

+.dropdownMenu > li > a, .dropdownMenu > li > span {

+	width: calc( 100% - 9px );

+	margin: 0;

+}

+

+.dropdownMenu > li > *:focus {

+	outline: none;

+}

+

+

+.dropdownSeparator {

+	height: 1px;

+	background-color: #ddd;

+	color: #ddd;

+	padding: 0 !important;

+	margin: 0;

+}

+

+.dropdownMenuItem, .dropdownMenuItem a {

+	display: inline-block;

+	vertical-align: middle;

+	color: #555 !important;

+	padding: 3px 3px 3px 5px;

+	cursor: pointer;

+	-webkit-touch-callout: none;

+	-webkit-user-select: none;

+	-khtml-user-select: none;

+	-moz-user-select: none;

+	-ms-user-select: none;

+	user-select: none;

+	white-space: nowrap;

+	border-left: 6px solid transparent;

+}

+

+.dropdownMenu .dropdownMenuItemSelected {

+	background-color: #FEEFDE;

+	border-left-color: #F58B0F;

+}

+

+.dropdownMenuItem .check {

+	display: inline-block;

+	width: 12px;

+}

+

+.dropdownMenuItem .dropdownKeyBinding {

+	color: grey !important; /* !important to override .dropdownMenuItem */

+	float: right;

+	font-size: 11px;

+	padding-left: 15px;

+	padding-right: 10px;

+}

+

+.dropdownMenuItem .dropdownCommandName {

+	float: left;

+	text-decoration: inherit; /* inherit hover decoration when inside an <a> */

+}

+

+.dropdownSelection {

+/* Using !important everywhere because this class is used by

+ * a variety of elements making it difficult to increase the

+ * specificity correctly for all users.

+ */

+	background-color: white !important;

+	border: 1px solid #bbbbbb !important;

+	border-bottom: none !important;

+	border-bottom-left-radius: 0 !important;

+	border-bottom-right-radius: 0 !important;

+	box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, .2) !important;

+	margin-bottom: -1px !important;

+	position: relative !important;

+	z-index: 200 !important;

+}

+

+.checkedMenuItem {

+	margin: 4px 6px 2px 0;

+	vertical-align: bottom;

+}

+

+/* tooltips */

+

+.tooltipContainer {

+	visibility: hidden;

+	z-index: 200;

+	background: transparent;

+	position: absolute;

+	max-width: 110em;

+}

+.tooltip .textContent {

+	max-width: 40em;

+}

+.tooltip {

+	color: #fafafa;

+	background-color: #555;

+	border-radius: 3px;

+	padding: 8px;

+	clear: both;

+	float: left;

+}

+

+.tooltip.left {

+}

+

+.tooltip .navlinkonpage {

+	color: skyblue;

+}

+

+.tooltip h2 {

+	color: #fafafa;

+}

+

+.tooltip .operationStatus {

+	color: skyblue;

+}

+

+.tooltip .operationError {

+	color: orangered;

+}

+

+.tooltipTailFromleft {

+	position: absolute;

+	display: inline-block;

+	border: 8px solid;

+	border-color: transparent transparent transparent #555;

+	top: 4px;

+	content: '';

+	z-index: 201;

+}

+

+.tooltipTailBorderFromleft {

+	position: absolute;

+	display: inline-block;

+	border: 10px solid;

+	border-color: transparent transparent transparent #555;

+	top: 2px;

+	right: -17px;

+	content: '';

+}

+

+.tooltipTailFromright {

+	position: absolute;

+	display: inline-block;

+	border: 8px solid;

+	border-color: transparent #555 transparent transparent;

+	left: -15px;

+	top: 4px;

+	content: '';

+	z-index: 201;

+}

+

+.tooltipTailBorderFromright {

+	position: absolute;

+	display: inline-block;

+	border: 10px solid;

+	border-color: transparent #555 transparent transparent;

+	left: -17px;

+	top: 2px;

+	content: '';

+}

+

+.tooltipTailFrombelow {

+	position: absolute;

+	display: block;

+	border: 8px solid;

+	border-color: transparent transparent #555 transparent;

+	left: 16px;

+	top: -15px;

+	content: '';

+	z-index: 201;

+}

+

+.tooltipTailBorderFrombelow {

+	position: absolute;

+	display: block;

+	border: 10px solid;

+	border-color: transparent transparent #555 transparent;

+	left: 14px;

+	top: -17px;

+	content: '';

+}

+

+.tooltipTailFromabove {

+	position: absolute;

+	display: block;

+	border: 8px solid;

+	border-color: #555 transparent transparent;

+	left: 16px;

+	content: '';

+	bottom: -15px;

+	z-index: 201;

+}

+

+.tooltipTailBorderFromabove {

+	position: absolute;

+	display: block;

+	border: 10px solid;

+	border-color: #555 transparent transparent;

+	left: 14px;

+	bottom: -17px;

+	content: '';

+}

+

+.tooltipShowing {

+	visibility: visible;

+}

+

+/* dialogs */

+.dialog {

+	visibility: hidden;

+	z-index: 175;  /* less than tooltips, more than the rest */

+	position: absolute;

+	background-color: #fbfbfb;

+	border-radius: 2px;

+	border: 1px solid #BBB;

+	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

+	padding-bottom:5px;

+}

+

+.dialogShowing {

+	visibility: visible;

+}

+

+.dialogTitle {

+	display: block;

+}

+

+.dialogTitle {

+	padding-top: 5px;

+	display: inline-block;

+	background: #555;

+	width: 100%;

+	padding-bottom: 5px;

+	border-top-left-radius: 1px;

+	border-top-right-radius: 1px;

+}

+

+

+.dialogTitleText {

+	margin: 2px 2px 0;

+	color: whitesmoke;

+	font-size: 1em;

+	height: 18px;

+	padding-left: 4px;

+	font-weight: bold;

+}

+

+

+.dialogDismiss {

+	display: block;

+	cursor: pointer;

+	padding: 2px;

+}

+

+.dialogContent {

+	padding: 8px;

+}

+

+.dialogButtons {

+	float: right;

+	margin: 2px 8px 4px;

+}

+

+.modalBackdrop {

+	opacity: 0.5;

+	-webkit-transition: opacity 0.2s ease-in;

+	transition: opacity 0.2s ease-in;

+}

diff --git a/bundles/org.eclipse.orion.client.ui/web/browse/fileBrowser.css b/bundles/org.eclipse.orion.client.ui/web/browse/fileBrowser.css
index 0b88aad..596ec3f 100644
--- a/bundles/org.eclipse.orion.client.ui/web/browse/fileBrowser.css
+++ b/bundles/org.eclipse.orion.client.ui/web/browse/fileBrowser.css
@@ -9,7 +9,7 @@
 
 @import "../orion/editor/editor.css";
 
-@import "../css/theme.css";
+@import "browserTheme.css";
 
 @import "../font/font.css";