With Quasar, I'm trying to put q-breadcrumb-el inside a q-toolbar.
However, the breadcrumb text is invisible, because it's the same color as the background of the toolbar (the theme primary color).
Quasar components intended for use in the toolbar (e.g q-toolbar-title) render text in a color that contrasts correctly.
I can hard-code the color in my template, but that will fail if the theme primary color is changed to a light color.
Is there a common idiom to say something like, "contrasting with background color" or "same color as text in xxx element" in Quasar (or Vue, or vanilla CSS)? (I.e, something that all the cool kids just know?)
How can I determine how q-toolbar-title does it?
<q-toolbar>
<q-toolbar-title>Wiki Page</q-toolbar-title> <!-- <== white text on primary color background -->
<q-breadcrumbs>
<q-breadcrumbs-el
v-for="section in sections"
:key="section.label"
:label="section.label"
:to="section.path"
class="text-white" <!-- <== works, but is fragile -->
></q-breadcrumbs-el>
</q-breadcrumbs>
</q-toolbar>
If I get want you mean.
Add a CSS text-stroke property the color should be black or white only.
So as to differentiate the text color from the toolbar color.
<q-toolbar>
<q-toolbar-title>Wiki Page</q-toolbar-title> <!-- <== white text on primary color background -->
<q-breadcrumbs style="font-size: 20px;-webkit-text-stroke: 0.4px black;">
<q-breadcrumbs-el
v-for="section in sections"
:key="section.label"
:label="section.label"
:to="section.path"
class="text-white" <!-- <== works, but is fragile -->
></q-breadcrumbs-el>
</q-breadcrumbs>
</q-toolbar>
Related
I'm creating a visual T-Shirt designer where the user can add custom text to a specific position. I develop this tool with Vue.js.
For the drag actions for the custom text I'm using the "vue-draggable-resizable' package for vue.js (https://github.com/mauricius/vue-draggable-resizable) with the following code:
<div v-for="layer of getLayers" class="vconf-create-builder-layer" :key="layer.uid" :style="{ background: 'url(' + getLayerImage(layer) + ') center / contain no-repeat' }">
<template v-for="tile of layer.data">
<VueDragResize :key="tile.uid" v-if="tile.type=='typography'" :parentLimitation="true" :isActive="true" :x="tile.boxPositionX" :y="tile.boxPositionY" :w="tile.editBoxWidth" :h="tile.editBoxHeight" #resizestop="updateTypoBoxSize($event, layer, tile)" #dragstop="updateTypoBoxPosition($event, layer, tile)">
<h2 class="typographyTextPreview" :style="{'font-size': tile.fontSize + 'px', 'line-height': tile.lineHeight + 'px', color: tile.fontColor}">{{tile.text ? tile.text : "Please enter an initial text in the settings"}}</h2>
</VueDragResize>
</template>
</div>
To save the position of the text I'm using the dragstop event. There I get the x and y coordinates relative to the parent. My parent is the t-shirt itself, embedded in a DIV container as background-image with background-size: contain. You can see it in the code above.
So when I resize the browser window, the t-shirt becomes smaller proportionally. The problem: The text layer changes the position. It makes sense, because the x and y coordinates are static values in pixel.
Image examples with resized browser window:
What would be the right way to be sure that the text layer always has the same position relative to the parent with a background image embedded, without to define the image with static pixel size?
I have a small vuetify 2.x app that displays a list with the dark theme.
When I scroll beyond the end of the list (top or bottom) I see a white zone appearing for a second.
Is it possible to set the window background color to black, or the same as the dark theme background color, so that I don't have this white zone showing up when I scroll beyond the end of the page ?
I tested without success the answer to the question vuetify how to set background color.
Solution: setting <body style="background-color:black;"> in the public/index.html fie fixed the problem. Now it's just a matter of finding the color matching the dark background of vuetify.
Vuetify changes the background color of v-app based on dark mode.
You could use a watcher on Vuetify's dark mode ($vuetify.theme.isDark) that sets the body's background color to match that of the v-app:
Add a template ref to the v-app component (named "app"):
<v-app ref="app">
👆
Add a watcher on Vuetify's $vuetify.theme.isDark property that copies the v-app's background color to the body. The v-app's background color takes effect in the next render cycle, so query it in $nextTick():
export default {
watch: {
'$vuetify.theme.isDark'() {
this.$nextTick(() => {
const rootStyles = window.getComputedStyle(this.$refs.app.$el)
document.body.style.backgroundColor = rootStyles.backgroundColor
})
}
}
}
GitHub demo
In elementUI the default background-color is white ; when choosing the them:dark , it is black, but how can I customise the bg-color by myself?
I have tried to add the style property at the el-menu tag , but it didn't work
<el-menu style="{background-color: rgb(36,36,36)!important}"
I try to find the source code of the css file of el-menu tag and I try to change some setting relating to background-color, don't work either
the menu component just like
somebody told me I can code like this
<el-menu style="{backgroundColor: yello}.." but it didn't work
The class for that particular element is not modifiable, have a look:
:class="{
'el-menu--horizontal': mode === 'horizontal',
'el-menu--dark': theme === 'dark',
'el-menu--collapse': collapse
}"
So your choices are:
Wrap it in a custom <div class="my-specific-selector and target it with .my-specific-selector .el-menu
Override the CSS for the dark theme
Copy + paste contents of component into your own file, adjust accordingly, use that instead.
you can try put background color directly like this
<el-menu
background-color="#304156"
text-color="#bfcbd9"
active-text-color="#409EFF"
style="height: 61px;"
></el-menu>
I have created a simple Layout control using the Dojo Content Pane Border Container and Border Pane.
<xe:djContentPane id="djContentPane1" style="width:auto; height:500px;">
<xe:djBorderContainer id="djBorderContainer1">
<xe:djBorderPane id="djBorderPane1" region="top">Header
</xe:djBorderPane>
<xe:djBorderPane id="djBorderPane2" region="center">Main
Body
</xe:djBorderPane>
<xe:djBorderPane id="djBorderPane3" region="bottom">Footer
</xe:djBorderPane>
<xe:djBorderPane id="djBorderPane4" region="left"
style="width:auto">main Navigator
</xe:djBorderPane>
</xe:djBorderContainer>
</xe:djContentPane>
It does pretty much what I want (obviously no styling on it at this point) except for two things:
1. I can't figure out how to make the djContentPane fill the full space available on the screen. The width:auto works but there does not appear to be a corresponding height specification.
2. I added a repeat control view into the region="center" and it displays fine except when the content exceeds the height available there is no scrollbar. I think as I read some of the help this should be the default for the "center" djBorderPane. Do I have to define the scrollbar?
ad 1.: use height:100% instead of "auto"; works fine for me, at least using Firefox (haven't tried other browsers)
ad 2.: I put a panel around the repeat as recommended in my above comment. Then I added overflow:auto; as a style property to the panel. Instead of using an extra panel you also could add that to the repeat itself, but I usually prefer styling an outer div because sometimes you want to set the removeRepeat property and then lose its own styling possibilities. Here's my portion of the border panel's code:
<xe:djBorderPane id="djBorderPane2" region="center">Main Body
<xp:panel id="outerDiv" style="width:100%;height:100%;overflow:auto;">
<xp:repeat id="repeat1" rows="30" var="rowData">
<xp:this.value>
<![CDATA[#{javascript:["row1", "row2", "row3", "row4"]}]]>
</xp:this.value>
<xp:panel id="innerDiv">
<xp:text escape="true" id="computedField1" value="#{javascript:rowData}">
</xp:text>
</xp:panel>
</xp:repeat>
</xp:panel>
</xe:djBorderPane>
again, works fine for me
Is there a way to set the background colour of a div in blueprint?
I noticed that class=error will set the colour to pink (notify/success are similar):
<div class="error">
<p>whatever</p>
</div>
But I want to know if there is a way to set the div to some arbitrary color?
EDIT: I don't actually care about error/notify/success. I just want to be able to set the color of a div in a similar way that they do, but using a color of my choice.
Time to state the obvious - why can't you just override the div.error rule with your own?
div.error { background:black; color:#fff; } .. or are you not trying to break some sort of weird convention? If so you can use a different classname.
Just... define your own CSS class and set the background and/or (for font color) color properties to color values; then set a div to have that as one of its classes?
Yes, you can easily over-ride the CSS by specifying a rule for error in your main CSS file.
That should ideally over-ride the default colors. Else, just ensure that you use a higher specificity in your rule, something like: div.container div.error { color: red; }
You can set any color on this particular div by adding an id attribute:
<div class="error" id="myblueprint">
<p>whatever</p>
</div>
Then add in your CSS file:
#myblueprint { background:blue; }