therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

made alerts use red with transparent theme red. some UI improvs

Browse source
This commit is contained in:
Henry Jameson 2018-04-08 03:22:03 +03:00
parent 2e95193559
commit cc02672e14
9 changed files with 57 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/components/style_switcher/style_switcher.vue
View file

@ -92,20 +92,23 @@
'--tooltipRadius': tooltipRadiusLocal + 'px',
'--attachmentRadius': attachmentRadiusLocal + 'px'
}">
<div class="panel">
<div class="panel dummy">
<div class="panel-heading" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Preview</div>
<div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }">
<div class="avatar" :style="{
'border-radius': avatarRadiusLocal + 'px'
}">
( ͡° ͜ʖ ͡°)
</div>
<h4>Content</h4>
<br>
A bunch of more content and
<a :style="{ 'color': linkColorLocal }">a nice lil' link</a>
<i :style="{ 'color': blueColorLocal }" class="icon-reply"/>
<i :style="{ 'color': greenColorLocal }" class="icon-retweet"/>
<i :style="{ 'color': redColorLocal }" class="icon-cancel"/>
<i :style="{ 'color': orangeColorLocal }" class="icon-star"/>
<a :style="{ color: linkColorLocal }">a nice lil' link</a>
<i :style="{ color: blueColorLocal }" class="icon-reply"/>
<i :style="{ color: greenColorLocal }" class="icon-retweet"/>
<i :style="{ color: redColorLocal }" class="icon-cancel"/>
<i :style="{ color: orangeColorLocal }" class="icon-star"/>
<br>
<br>
<div class="finder-error" :style="{ 'background-color': redColorLocal }">And a scary alert</div>
<button class="btn" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Button</button>
</div>
</div>
@ -153,6 +156,10 @@
}
}
.radius-item {
flex-basis: auto;
}
.theme-radius-rn,
.theme-color-cl {
border: 0;
@ -209,4 +216,17 @@
.theme-preview-content {
padding: 20px;
}
.dummy {
.avatar {
background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
color: black;
text-align: center;
height: 48px;
line-height: 48px;
width: 48px;
float: left;
margin-right: 1em;
}
}
</style>