Is there a way (setting) - we can add notch between editior group (file tabs) in visual studio code like sublime
Nope. There is no setting.
UI developer, HTML5, CSS3, Web Graphic Design,
You can probably try to use this extension: Custom CSS and JS loader
And write some CSS that would emulate sublime tabs. Similar to:
.tabs-container > .tab {
-webkit-font-smoothing: subpixel-antialiased;
transform: translateZ(0) perspective(1px) skewX(30deg);
}
.tabs-container > .tab > * {
-webkit-font-smoothing: subpixel-antialiased;
transform: translateZ(0) perspective(1px) skewX(-30deg) !important;
}
#Alex - Thank you for your suggestion,
.tabs-container {
margin-top: 5px;
background: #252526;
}
.tabs-container > .tab {
background: transparent!important;
border-bottom-width: 40px!important;
border-bottom-style: solid!important;
border-bottom-color: #42433e;
border-left: 20px solid transparent!important;
border-right: 20px solid transparent!important;
position: relative;
}
.tabs-container > .tab:not(:first-child) {
margin-left: -10px;
}
.tabs-container > .tab.active {
border-bottom-color: #1e1e1e;
z-index: 9;
}
.tabs-container > .tab > * {
padding-bottom: 10px;
}
Related
I am using a plugin in postcss which works perfectly called "postcss-preset-env"
My problem is that I don't get syntax highlight when I am nesting in an *.astro file
.link-card {
display: flex;
margin-top: 2rem;
padding: 0.15rem;
background-image: var(--link-gradient);
background-size: 400%;
border-radius: 0.5rem;
background-position: 100%;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
background-color: greenyellow;
font-size: larger;
font-weight: 400;
&:is(:hover, :focus-within) {
background-position: 0;
& h2 {
color: yellow;
& span {
transform: translateX(2px);
color: pink;
}
}
}
After "&" there is no more autocompletion or syntax highlight
Settings.json
{
"postcss.validate": false,
"emmet.includeLanguages": {
"postcss": "css"
},
"files.associations": {
"*.css": "postcss"
}
}
On .css file everything works great
Hi friends I am looking for a strictly CSS3 fix for opacity transitions on custom underlines using background-images and nested in a navigation list. I realise after some research that background-image transitions are not currently supported, I therefore attempted to construct an opacity transition using the pseudo class :before which I believe currently works in the latest versions of Chrome and Firefox. Any help that anybody could offer would be hugely appreciated, I've looked everywhere on the web and cannot find anybody else who has attempted to perform transitions on custom underline background-images so hopefully it might prevent a nice little challenge for somebody?
Here's the code I have currently:
.sf-menu, .sf-menu * {
margin:0 auto;
padding:0;
list-style: none;}
.sf-menu {
float: left;
margin-left:27%;}
ul.sf-menu li {
position:relative;
line-height:40%;
margin-left:10px;
margin-right:10px;}
ul.sf-menu > li {
float: left;}
ul.sf-menu li {
white-space: nowrap; /* no need for Supersubs plugin */
*white-space: normal; /* ...unless you support IE7 (let it wrap) */ }
ul.sf-menu li:hover > a {
background: url(../images/UNDERLINE.png) repeat-x 100% 100%;
-webkit-opacity:1;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;}
ul.sf-menu li:before {
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background: url(../images/UNDERLINE.png) repeat-x 100% 100%;
-webkit-opacity: 0.1;
-moz-opacity: 0.1;
opacity: 0.1;}`
You can also find the current framework for my site at www.mdwoodman.co.uk
Thanks in advance!
You can replace your background images with CSS borders and transition them, here is an approximation of your website:
ul li a {
color: white;
text-decoration: none;
font: bold 15px/150% sans-serif;
text-transform: uppercase;
padding: 2px 5px;
border-bottom: solid #384740 3px;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
ul li a:hover {
color: #BDE2DF;
border-bottom-color: #66FFB2;
}
To transition border colors you can either grab the computed color, or state your colors in rgba or hsla, such as...
ul li a { border-bottom: solid rgba(102, 255, 178, 0.1); }
ul li a:hover { border-bottom: solid rgba(102, 255, 178, 1.0); }
http://jsfiddle.net/de9wT/
How could I hide border of dialog box in GWT completely or we can say that hide the dialog box's caption portion completely. I tried to use .gwt-DialogBox .Caption {} in css
but I couldn't find any option which could hide the border fully.
Thanks in advance!
Don't use gwt-DialogBox name for css to change dialog box. it will not apply. try to apply different style name with same style like:
.gwt-DialogBoxNew
{
border: 8px solid #7F7F7F;
border-radius: 6px 6px 6px 6px;
box-shadow: none;
line-height: 7px;
opacity: 1;
z-index: 1000;
background-color : #FFFFFF;
}
.gwt-DialogBoxNew .Caption {
background: none repeat scroll 0 0 #E4E4E4;
border: medium none #D4D4D4;
cursor: default;
font-family: Arial Unicode MS, Arial, sans-serif !important;
font-size: 18px;
font-weight: 400;
line-height: 27px;
padding:2px 0px 0px 0px;
}
.gwt-DialogBoxNew .dialogContent {
}
.gwt-DialogBoxNew .dialogMiddleCenter {
padding: 3px;
background: white;
}
.gwt-DialogBoxNew .dialogBottomCenter {
}
.gwt-DialogBoxNew .dialogMiddleLeft {
/* background: url(images/vborder.png) repeat-y -31px 0px; */
}
.gwt-DialogBoxNew .dialogMiddleRight {
/* background: url(images/vborder.png) repeat-y -32px 0px;
}
.gwt-DialogBoxNew .dialogTopLeftInner {
width: 10px;
height: 8px;
zoom: 1;
background: none repeat scroll 0 0 #E4E4E4;
}
.gwt-DialogBoxNew .dialogTopRightInner {
width: 12px;
zoom: 1;
background: none repeat scroll 0 0 #E4E4E4;
}
.gwt-DialogBoxNew .dialogBottomLeftInner {
width: 10px;
height: 12px;
zoom: 1;
}
.gwt-DialogBoxNew .dialogBottomRightInner {
width: 12px;
height: 12px;
zoom: 1;
}
.gwt-DialogBoxNew .dialogTopLeft {
/* background: url(images/circles.png) no-repeat -20px 0px;
-background: url(images/circles_ie6.png) no-repeat -20px 0px; */
background: none repeat scroll 0 0 #E4E4E4;
}
.gwt-DialogBoxNew .dialogTopRight {
/* background: url(images/circles.png) no-repeat -28px 0px;
-background: url(images/circles_ie6.png) no-repeat -28px 0px; */
background: none repeat scroll 0 0 #E4E4E4;
}
.gwt-DialogBoxNew .dialogBottomLeft {
/* background: url(images/circles.png) no-repeat 0px -36px;
-background: url(images/circles_ie6.png) no-repeat 0px -36px; */
}
.gwt-DialogBoxNew .dialogBottomRight {
/* background: url(images/circles.png) no-repeat -8px -36px;
-background: url(images/circles_ie6.png) no-repeat -8px -36px; */
}
Remove border style from it as you concern here.
A DialogBox is basically a DecoratedPopupPanel with a caption. You want neither the decoration nor the caption, so how about using a PopupPanel instead? (AFAICT, the only difference will be how you size the panel)
I have a GWT application with two TabPanels.
The TabPanel generates css-classes that has the prefix gwt-TabPanel.
Is there any way to change this prefix for one of the tables? I want to be able to style the two TabPanels independently.
To solve this I did:
Using setStylePrimaryName(String); This will change the prefix for the CSS class names that the TabPanel and TabBar uses.
tabPanel.getTabBar().setStylePrimaryName("myTabBar");
tabPanel.setStylePrimaryName("myTabPanel");
In your CSS file your add something like this:
.myTabBar {
}
.myTabBar .gwt-TabBarFirst {
width: 5px; /* first tab distance from the left */
}
.myTabBar .gwt-TabBarRest {
}
.myTabBar .gwt-TabBarItem {
margin-left: 6px;
padding: 3px 6px 3px 6px;
cursor: pointer;
cursor: hand;
color: black;
font-weight: bold;
text-align: center;
background: #3A3A3A;
}
.myTabBar .gwt-TabBarItem-selected {
cursor: default;
/* background: black; */
}
.myTabBar .gwt-TabBarItem-disabled {
cursor: default;
color: red;
}
.myTabPanel {
}
.myTapPanel .myTabPanelBottom {
border-width: 0px;
overflow: hidden;
padding: 6px;
}
For the second TabPanel you set a different with setStylePrimaryName() on both the TabPanel and the TabBar. Then you add a new section to the CSS file with the second primary name.
You can use the methods setStyleName() and addStyleName() to set or add css styles to GWT UI objects.
I am trying to change the default css but nothing happens, even if I do
bar.setStylePrimaryName("gwt-TabBar");
Here is my CSS, even trying to change the Header does not work H1
Why isnt it changing?
/** Add css rules here for your application. */
/** Example rules used by the template application (remove for your app) */
body {
color: black;
font-family: Lucida Grande, Tahoma, Verdana, Arial, sans-serif;
font-size: 10px;
margin: 20px 20px 20px 20px;
}
h1 {
font-size: 2em;
font-weight: bold;
border: 8px solid #C3D9FF;
background-color: #E8EEF7;
color: #000099;
margin: 40px 0px 70px;
text-align: center;
}
.gwt-TabBar {
background-color: #C3D9FF;
}
.gwt-TabBar .gwt-TabBarFirst {
background-color: #C3D9FF;
}
.gwt-TabBar .gwt-TabBarRest {
background-color: #C3D9FF;
}
.gwt-TabBar .gwt-TabBarItem {
background-color: #C3D9FF;
}
.gwt-TabBar .gwt-TabBarItem-selected {
background-color: #C3D9FF;
}
I have some ideas: did you import the css into application? You can either do that in your application.gwt.xml or in your index.html.
is the css loaded? you can check this using firebug. check your target folder or war folder to find out the path.
the browser often caches the css; and you have to force its reload.
you can do this by pressing the shift key when you press the "reload" button.
I second checking if the css has changed in firebug as well.