In RStudio, I have found the cache.css files for the different themes in Rstudio. They are text files with code like this:
.ace_editor { border: 2px solid rgb(159, 159, 159); } .ace_editor.ace_focus { border: 2px solid #327fbd; } .ace_gutter { background: #232323; color: #F8F8F8; } .ace_print_margin { width: 1px; background: #232323; } .ace_scroller { background-color: #141414;
} .ace_text-layer { color: #F8F8F8; } .ace_cursor { border-left: 2px solid #A7A7A7; } .ace_cursor.ace_overwrite { border-left: 0px; border-bottom: 1px solid #A7A7A7; } .ace_marker-layer .ace_selection { background: rgba(221, 240, 255, 0.20); } .multiselect
.ace_selection.start { box-shadow: 0 0 3px 0px #141414; border-radius: 2px; } .ace_marker-layer .ace_step { background: rgb(102, 82, 0); } .ace_marker-layer .ace_bracket { margin: -1px 0 0 -1px; border: 1px solid rgba(255, 255, 255, 0.25); } .ace_marker-layer
.ace_active_line { background: rgba(255, 255, 255, 0.031); } .ace_gutter_active_line { background-color: rgba(255, 255, 255, 0.031); } .ace_marker-layer .ace_selected_word { border: 1px solid rgba(221, 240, 255, 0.20); } .ace_invisible { color: rgba(255,
255, 255, 0.25); } .ace_keyword, .ace_meta { color:#CDA869; } .ace_constant, .ace_constant.ace_other { color:#CF6A4C; } .ace_constant.ace_character, { color:#CF6A4C; } .ace_constant.ace_character.ace_escape, { color:#CF6A4C; } .ace_invalid.ace_illegal
{ color:#F8F8F8; background-color:rgba(86, 45, 86, 0.75); } .ace_invalid.ace_deprecated { text-decoration:underline; font-style:italic; color:#D2A8A1; } .ace_support { color:#9B859D; } .ace_support.ace_constant { color:#CF6A4C; } .ace_fold { background-color:
#AC885B; border-color: #F8F8F8; } .ace_support.ace_function { color:#DAD085; } .ace_storage { color:#F9EE98; } .ace_variable { color:#AC885B; } .ace_string { color:#8F9D6A; } .ace_string.ace_regexp { color:#E9C062; } .ace_comment { fontSize:4pt;font-style:italic;
color:#996633; } .ace_variable { color:#7587A6; } .ace_xml_pe { color:#494949; } .ace_meta.ace_tag { color:#AC885B; } .ace_entity.ace_name.ace_function { color:#AC885B; } .ace_markup.ace_underline { text-decoration:underline; } .ace_markup.ace_heading
{ color:#CF6A4C; } .ace_markup.ace_list { color:#F9EE98; } .ace_indent-guide { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWMQERH5zzBz5sz/AA5EBAYqeZXWAAAAAElFTkSuQmCC) right repeat-y; } .nocolor.ace_editor
.ace_line span {color:#CDA869 !important;} .ace_bracket {margin: 0 !important; border: 0 !important; background-color: rgba(255, 255, 255, 0.25);} .ace_marker-layer .ace_foreign_line {position: absolute; z-index: -1; background-color: rgb(65, 65, 65);}
.ace_marker-layer .ace_find_line {position: absolute; z-index: -1; background-color: rgb(134, 134, 134);} .ace_marker-layer .ace_active_debug_line {position: absolute; z-index: -1; background-color: rgb(137, 121, 38);} .ace_console_error { background-color:
rgb(65, 65, 65); }
I am trying to edit in these, and I could use some help. So far, I have only been able to change the colour of "comments" by finding and changing the colour indicated after the "ace.comment" command. But I would like to do something similar with things like the background colour, text colour, and colour of commands in R, colour of curly brackets, etc, etc.
Is this possible? If so, what things do I need to edit in order to accomplish this?
Yes it is indeed possible. (Remember to restart Rstudio after each change)
I have no experience about ACE stuff, but it's not so hard to get the meaning of the different variables.. e.g
.ace_constant.ace_numeric {
color: #4ef971;
}
...
.ace_string {
color: #6A8F9D;
}
...
.ace_keyword {
color: #85cfda;
}
are, respectively, colors of numeric objects, strings and keywords (built in-functions and console)
I found that the default web inspector with RStudio made it difficult to make edits. I have been trying for days to get folded comments to have different font attributes based on sections.
I found it was much easier using ATOM (see screenshot below). Once I found out what each variable changed I created comments in the css file to make it easier for me next time I edit. You can see in ATOM the color is shown, making it easier to identify what the variable is defining.
I am not sure if this is optimal but it is as far as I have got. I don't know why people don't comment on variable definitions, especially since some of them are not intuitive.
Related
Let's say I have a CSS variable:
div {
--test: "hey"
}
And I would like to check what is inside this variable and do something based on this.
For example:
if var(--test) == "Hi":
margin-left: 1rem;
else:
padding-bottom: 1rem;
natively isn't possible, but with a css compiler you can!
I suggest you use SASS/SCSS for this:
https://sass-lang.com/ (is a CSS compiler, that let you write CSS in a comfortable way, then compile it (translating it) to a CSS native)
for using IF/ELSE see these docs https://sass-lang.com/documentation/at-rules/control/if
I would like to check what is inside this variable and do something based on this.
Yes, you can check the value of a CSS Custom Property natively using:
window.getComputedStyle(myDiv).getPropertyValue('--test')
Once you know the value of --test, you can either update one (or several) properties:
myDiv.style.setProperty('padding-bottom', '1rem');
or you can add a class which updates one property (or any number of properties) of myDiv:
myDiv.classList.add('increaseBottomPadding');
Working Example:
const divs = document.querySelectorAll('div');
divs.forEach((div) => {
let testValue = window.getComputedStyle(div).getPropertyValue('--test');
switch (testValue) {
case ('rainbow1') : div.classList.add('background1'); break;
case ('rainbow2') : div.classList.add('background2'); break;
case ('rainbow3') : div.classList.add('background3'); break;
case ('rainbow4') : div.classList.add('background4'); break;
}
});
div {
display: inline-block;
float: left;
width: 120px;
height: 120px;
margin-right: 12px;
background-color: rgb(255, 0, 0);
border: 8px solid rgba(255, 255, 255, 0.5);
border-radius: 50%;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
}
.div1 {
--test: rainbow1;
}
.div2 {
--test: rainbow2;
}
.div3 {
--test: rainbow3;
}
.div4 {
--test: rainbow4;
}
.background1 {
background-color: rgb(255, 0, 0);
}
.background2 {
background-color: rgb(255, 127, 0);
}
.background3 {
background-color: rgb(255, 255, 0);
}
.background4 {
background-color: rgb(0, 127, 0);
}
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
I have 20 different buttons on my page (class buttonCareCenter) and 10 different colors for its background.
Instead of using 10 times:
&:nth-child(10n + x) {
.btn.btn-primary {
background-color: #xxxxxx;
}
}
I would love to find a way to use a loop #for with nth-child to set the right colors for my buttons. But it seems that
#{$color-$i};
is not the right way to call my different variables.
$color-0: #ff5722;
$color-1: #ff4514;
$color-2: #647c8a;
$color-3: #3f51b5;
$color-4: #2196f3;
$color-5: #00b862;
$color-6: #afdf0a;
$color-7: #a7b61a;
$color-8: #f3e562;
$color-9: #ff9800;
.all-buttonCareCenter{
#for $i from 0 through 9 {
&:nth-child(10n + #{$i}) {
.btn.btn-primary {
background-color: #{$color-$i};
}
}
}
.buttonCareCenter{
height: $button-height;
border: 0;
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
}
}
Any ideas?
You could solve this by adding all the colors in another variable called $colors and loop through it. It's much easier to maintain if one of the colors change.
$button-height: 20px;
$color-0: #ff5722;
$color-1: #ff4514;
$color-2: #647c8a;
$color-3: #3f51b5;
$color-4: #2196f3;
$color-5: #00b862;
$color-6: #afdf0a;
$color-7: #a7b61a;
$color-8: #f3e562;
$color-9: #ff9800;
$colors: $color-0, $color-1, $color-2, $color-3, $color-4, $color-5, $color-6,
$color-7, $color-8, $color-9;
.all-buttonCareCenter {
#for $i from 1 through length($colors) {
&:nth-child(#{length($colors)}n+#{$i}) {
.btn.btn-primary {
background-color: nth($colors, $i);
}
}
}
.buttonCareCenter {
height: $button-height;
border: 0;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
}
}
See this CodePen example I created, click right top ยป View Compiled CSS to view the compiled code with all the iterations.
An other solution I found :
%color-0 {
background-color: #ff5722;
}
%color-1{
background-color: #ff4514;
}
%color-2 {
background-color: #647c8a;
}
%color-3{
background-color: #3f51b5;
}
%color-4 {
background-color: #2196f3;
}
%color-5{
background-color: #00b862;
}
%color-6 {
background-color: #afdf0a;
}
%color-7{
background-color: #a7b61a;
}
%color-8 {
background-color: #f3e562;
}
%color-9{
background-color: #ff9800;
}
#for $i from 0 through 9 {
&:nth-child(10n + #{$i}) {
.btn.btn-primary {
#extend %color-#{$i};
}
}
}
i am in Qt5.7 and changed my scrollbar style sheet by this code:
QScrollBar::sub-page:horizonta,QScrollBar::add-page:horizontall {
background: rgb(45, 45, 45);
border:none;
}
QScrollBar{ selection-color: rgb(255, 0, 0);
background-color:rgb(24, 24, 24);
border:none;
}
and the result is :
the question is how to change the slider's border COLOR?(the white border that pointed in the picture)
)
You can try with handle, sub-page, add-page, add-line, sub-line values in the sample below the border looks with different colors:
QScrollBar{
background: rgb(45, 45, 45);
background-color:rgb(24, 24, 24);
margin: 0;
}
QScrollBar::handle:horizonal{
border: 2px solid red;
}
QScrollBar::sub-page:horizontal{
border: 2px solid blue;
}
QScrollBar::add-page:horizontall {
border: 2px solid green;
}
QScrollBar::add-line:horizontal {
border: 2px solid yellow;
}
QScrollBar::sub-line:horizontal{
border: 2px solid white;
}
Also this link: https://forum.qt.io/topic/59351/qscrollbar-hiding-add-line-and-sub-line-when-moved was useful for me
I am using purecss to create colored buttons, href is not clickable and working. The button appears fine its just the link that is cause the trouble.
<button class='pure-u-1 pure-button pure-button-primary pure-u-md-2-5 button-xlarge' href='#' >Find out more details</button>
I am not able to click the button. Why is this not working?
The button is a large one and looks like this. Please how can i fix this?
My button CSS is like this:
/*
* -- PURE BUTTON STYLES --
* I want my pure-button elements to look a little different
*/
.pure-button {
background-color: #1f8dd6;
color: white;
padding: 0.5em 2em;
border-radius: 5px;
}
a.pure-button-primary {
background: white;
color: #1f8dd6;
border-radius: 5px;
font-size: 120%;
}
.button-xsmall {
font-size: 0.5vw;
}
.button-small {
font-size: 1vw%;
}
.button-large {
font-size: 2vw%;
}
.button-xlarge {
font-size: 2.5vw;
}
.button-success,
.button-error,
.button-warning,
.button-secondary {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
background: rgb(28, 184, 65); /* this is a green */
}
.button-error {
background: rgb(202, 60, 60); /* this is a maroon */
}
.button-warning {
background: rgb(223, 117, 20); /* this is an orange */
}
.button-secondary {
background: rgb(66, 184, 221); /* this is a light blue */
}
The href is just '#', which is a blank placeholder for anchor tags in HTML. The easiest solution is to just wrap your button in an <a> tag. For example:
<a href="http://www.google.com">
<button class='my-class'>Find out more details!</button>
</a>
There isn't a href attribute on a button, you would either have to add an onClick="" event or use a simple anchor tag
/*
* -- PURE BUTTON STYLES --
* I want my pure-button elements to look a little different
*/
.pure-button {
background-color: #1f8dd6;
color: white;
padding: 0.5em 2em;
border-radius: 5px;
}
.button-xsmall {
font-size: 0.5vw;
}
.button-small {
font-size: 1vw%;
}
.button-large {
font-size: 2vw%;
}
.button-xlarge {
font-size: 2.5vw;
}
.button-success,
.button-error,
.button-warning,
.button-secondary {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
background: rgb(28, 184, 65); /* this is a green */
}
.button-error {
background: rgb(202, 60, 60); /* this is a maroon */
}
.button-warning {
background: rgb(223, 117, 20); /* this is an orange */
}
.button-secondary {
background: rgb(66, 184, 221); /* this is a light blue */
}
<a class='pure-u-1 pure-button pure-button-primary pure-u-md-2-5 button-xlarge' href='#' >Find out more details</a>
For me, this works: http://jsfiddle.net/ysv75326/1/
All I've done is changed the <button> into <input type="button"... and given it an ID of test. Then I set up a JavaScript listener for when an element with this ID gets clicked, it runs alert("Hey");
Code Snippet:
$("#test").click(function() {
alert("Hey");
});
.pure-button {
background-color: #1f8dd6;
color: white;
padding: 0.5em 2em;
border-radius: 5px;
}
a.pure-button-primary {
background: white;
color: #1f8dd6;
border-radius: 5px;
font-size: 120%;
}
.button-xsmall {
font-size: 0.5vw;
}
.button-small {
font-size: 1vw%;
}
.button-large {
font-size: 2vw%;
}
.button-xlarge {
font-size: 2.5vw;
}
.button-success,
.button-error,
.button-warning,
.button-secondary {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
background: rgb(28, 184, 65);
/* this is a green */
}
.button-error {
background: rgb(202, 60, 60);
/* this is a maroon */
}
.button-warning {
background: rgb(223, 117, 20);
/* this is an orange */
}
.button-secondary {
background: rgb(66, 184, 221);
/* this is a light blue */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class='pure-u-1 pure-button pure-button-primary pure-u-md-2-5 button-xlarge' href='#' id="test" value="Find out more details">
Here's my LESS statements:
#colorWhite: #FFFFFF;
#colorBlack : #000000;
#opacityNormalFill: 0.2;
#opacityNormalLabel: 0.75;
.colorWithAlpha(#color, #alpha)
{
#colorWithAlpha: rgba( red(#color), green(#color), blue(#color), #alpha );
}
if I write both background-color and color as this:
.button {
.colorWithAlpha(#colorBlack, #opacityNormalFill);
background-color: #colorWithAlpha;
.colorWithAlpha(#colorWhite, #opacityNormalLabel);
color: #colorWithAlpha;
}
The output will be:
.button {
background-color: rgba(0, 0, 0, 0.2);
color: rgba(0, 0, 0, 0.2);
}
I have to write it like this:
.button {
.colorWithAlpha(#colorBlack, #opacityNormalFill);
background-color: #colorWithAlpha;
}
.button {
.colorWithAlpha(#colorWhite, #opacityNormalLabel);
color: #colorWithAlpha;
}
It will output correctly:
.button {
background-color: rgba(0, 0, 0, 0.2);
}
.button {
color: rgba(255, 255, 255, 0.75);
}
How to resolve it?
Ok, your var #colorWithAlpha is limitted to your function .colorWithAlpha. If you try to use a global var, it will modifie all your code. You should pass the part to set this color in the function params like this :
#colorWhite: #FFFFFF;
#opacityNormalFill: 0.2;
#opacityNormalLabel: 0.75;
#colorBlack : #000000;
.colorWithAlpha(#color, #alpha, #property)
{
#{property} : rgba( red(#color), green(#color), blue(#color), #alpha );
}
And when you use it :
.button {
.colorWithAlpha(#colorBlack, #opacityNormalFill, background-color);
.colorWithAlpha(#colorWhite, #opacityNormalLabel, color);
}
less doesn't set global variables. You should be using the mixin as a nested style, not as a function.
Like:
.colorWithAlpha(#bgcolor, #color, #alpha)
{
background-color: rgba( red(#bgcolor), green(#bgcolor), blue(#bgcolor), #alpha );
color: rgba( red(#color), green(#color), blue(#color), #alpha );
}
Then:
.button {
.colorWithAlpha(#colorBlack, #colorWhite, #opacityNormalLabel);
}
Docs:
All variables defined in a mixin are visible and can be used in caller's scope (unless the caller defines its own variable with the same name).
Since your first .colorWithAlpha expansion does already define the #colorWithAlpha variable inside the .button, the second .colorWithAlpha call has no effect. (See #1892 for more details).
So you need either to isolate each expansion in its own scope:
.button {
.colorWithAlpha(#colorBlack, #opacityNormalFill);
background-color: #colorWithAlpha;
& { // <- begin new scope
.colorWithAlpha(#colorWhite, #opacityNormalLabel);
color: #colorWithAlpha;
}
}
Or use the solution suggested in #throrin19's answer.
---
And btw., to change color opacity use fade function, i.e. you don't need this mixin at all and your snippet can be simplified to:
#opacityNormalFill: 20%;
#opacityNormalLabel: 75%;
.button {
background-color: fade(#000, #opacityNormalFill);
color: fade(#fff, #opacityNormalLabel);
}