I've been trying to make myself a simple night mode for google docs using CSS (through a custom CSS chrome extension), but I'm having a lot of trouble. Mind you I only have basic Highschool CSS knowledge, and no more.
I am aware there are extensions for this sort of thing, but those extensions always make EVERYTHING dark, and I really don't want everything dark, just the sides/background (which I've already managed to find), the "explore" button on the bottom right (with visible text), and the outline button on the top left (With a visible icon)
This is what I've managed to find so far (Just for the sides / background):
.kix-appview-editor-container,.gb_Va {
background: #131719;
color: white;
}
.docs-gm-dialogs .docs-findinput-container, .docs-gm-dialogs .docs-gotoinput-container, .docs-copydocdialog-destination-button, .docs-material.docs-navigation-tab-button.goog-inline-block {
border: 0;
}
I can't for the life of me figure out how to darken the 2 buttons (bonus if someone can also darken the little bubble button that pops up to the right when you highlight text, but I'll take what I can get).
Any help (or improvements to what I already have) would be hugely appreciated, thanks.
Related
Select; when the dropdown is searchable, there is a blue outline around the cursor:
https://ibb.co/faG4X8
I can get rid of the cursor by using this:
.Select-input > input {
color: transparent;
}
How can i also get rid of the blue outline on focus
thanks,
mihai
You are correct that outline: 0 or outline: none will remove the blue outline when an element is focused.
That is from the browser's default stylesheet. Each browser implements that focus state indicator in some way.
I would caution you to be aware that the focus indication is important for accessibility. If the default styling is removed, it's best to replace it with some other visual indicator that the element is focused. Without that change, it makes a site nigh-impossible to traverse if someone is using a keyboard, or potentially other non-traditional methods of access.
From the html5 spec--
“…if an alternative focusing style isn’t made available instead, the page will be significantly less usable for people who primarily navigate pages using a keyboard, or those with reduced vision who use focus outlines to help them navigate the page.”
further reading: Stop messing with the browsers default focus outline
I am developing a browser based app using AngularJs.
About a week ago, I notice that the cursor had changed to a grey circle. However, I was in the throes of development and just kept coding. Now so much has changed that a diff with a previous version won't help me find the cause, and I can't see anything obvious in the code.
Is thare any sledgehammer way to rest it? I was thinging of setting a CSS style on the <biy> element, but that did no thelp.
I am sure that I am not setting the cursor. Perhaps it is done by some JS library which I use. Is there an easy way to override this?
When you are using the responsive mode of the website/ page, you will get a grey circle in the chrome dev tools. Because, you wont have a cursor for touch screens :)
You could set the following css rule:
html { cursor: auto !important; }
I guess you by 'default' you mean that you want to reset it to where the browser decides which cursor to display in a particular context, this would be auto in this case.
However this can only be a temporary solution and the rule that causes the cursor to be a grey circle should be eliminated. Further reference can be found here Mozilla Developer Network : cursor.
If the grey circle is opaque and you are using chrome with the device toggled to mobile / tablet, then you can't change the cursor - it is just showing you where your finger would be - there is no cursor on a mobile or tablet
I'm implementing a Kendo PanelBar on my webpage. I'm pretty new to CSS/HTML, so I'm lost on how to remove a default style on the PanelBar. When I select a panel, it opens properly and looks fine. When I move the mouse away from the open panel, there is an orange border that appears on the open panel. I have attached two images showing the issue.
Everything looks fine when I hover on the open panel:
When I move the mouse away, there is an orange border:
Can anyone tell me how to remove this border?
I was challenged with the same issue and submitted a ticket to kendo support. Iliana Nikolova supplied the following:
.k-panelbar .k-state-focused.k-state-selected {
box-shadow: none;
}
In my solution, the panelBar box shadow was still showing, I then used page inspector (F12) and tested following rule using the box-shadow:none; property and that did the trick for me.
.k-state-selected > .k-link, .k-panelbar > li > .k-state-selected, .k-panelbar > li.k-state-default > .k-state-selected.k-link {
background-color: #C7D3A9;
color:black;
box-shadow: none;
}
Before your post I was searching the a boat ton of code and getting no place. I used the recommendation of using theme builder and took a video (using windows media encoder 9), I feel by illustrating the problem it helped generate a better kendo response. Iliana didn't return my code with the fix so this left me hanging but he did supply the key element.
If you find this solves the issue please vote answered. Others who also find this helpful please also provide positive feedback.
I am not sure what element it is, because you did not give the exact code.
But you can use a simple css, find the element and apply the css to remove the orange border.
I had the same issue. Use the Kendo Theme Builder here at http://demos.telerik.com/kendo-ui/themebuilder/ and then load the default theme. You should see the themebuilder panel appear in the bottom right corner of your screen. Look for "Widget States" drop down. You will see the options there and you can change the orange border color.
Now if you want to completely remove the orange border and active state, you will need to open up the kendo.default.min.css file and do a CNTRL+F (Find) for the hex color code #f35800. Look at the selectors carefully to make sure you are modifying the correct style (i.e. .k-state-selected)
Then when you are sure you've got the right selector(s), change the color to "transparent" (i.e. border-color:transparent)
This worked for me
What CSS property should I change at this page to disable transparency of a share iframe which appears when Like button is clicked?
When you hover on that Facebook box after clicking Like button, it becomes partially transparent and if you move your cursor away from it, it becomes solid white. I want it to be completely opaque all the time.
Well, I see no transparency on that box, only for the fade-in effect when it opens, but once it's fully opened it's not transparent.
To answer your question, you can see for yourself using firebug (firefox) or the development tools (chrome/safari) which css rules apply to what element.
From what I've seen now, you can use the use these: fb_edge_comment_widget fb_iframe_widget which are the classes of the span containing the iframe, or you can use the iframe itself.
The thing is though, is that you should not hack that. Why? Since then you'll have to always check for updates facebook are making, changes that they do not update you about (API changes they update on the blog), if you fail to be aware of these changes it can "break" your code/style.
I was also having the exact same problem.
I am using an AddThis widget set, and I don't know if this was the case for you or not (it looks like you may have chosen a different solution as I can't see the Like button on your site).
I ended up using
.addthis_button_facebook_like {
opacity:1 !important;
}
but you would use whatever selector that wrapped your like button. if using the standard embed from Facebook, it would probably be
.fb-like {
opacity:1 !important;
}
Someone else was having a similar problem with a Send button, which got me on the right track.
See it working like it ought to here. I'm sure it had something to do with some conflict from other styles, or possibly AddThis, but it's working now!
I am using GWT 2.3 to create a web application. In the web page, I have a button for the submission. I haven't created any css properties for this button. In Google Chrome and Firefox, the size of the button is just the size of the text of the button. However, in IE8, the size is bigger, with some spaces before and after the text of the button. Does any body know how should I do? Since I need to support the internationalization, the texts of the button for different locales are different.
I have tried width:auto; for the button, but it doesn't work.
Thanks in advance!!
Ah, this is an oldie but goodie.
Basically, IE sucks at rendering buttons and you have to add this CSS to fix it:
.my_button {
/* optional */
padding:0 .25em 0 .25em;
/* These two are required */
width:auto;
overflow:visible;
}
See the link above for more information.
In general (not only for GWT), buttons are rendered very differently not only between browsers, but also between operating systems - especially they look completely different on Mac OSX. Take a look at this site, which also has a few nice solutions around the button problem: http://particletree.com/features/rediscovering-the-button-element/
So if you need exact sizes (and maybe a consistent look) across browsers/OS, I think it's better not to use the native button style at all, but to fully customize the style of your buttons. (This is pretty usual on modern web sites, e.g. I don't think there are any native style buttons on stackoverflow.com at all.)
Use Anchor with different background images for it's various states (link, active, hover, visited).