Julian/JuliaMSI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added better margins for image views, implemented upload of optical image and transparency slider

Browse Source
This commit is contained in:
Pixelguy14 2025-02-03 22:53:08 -06:00
parent 09d680db87
commit fe6508ead8
4 changed files with 201 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
app.jl
View File

@ -13,6 +13,7 @@ using Images
using LinearAlgebra using LinearAlgebra
using NativeFileDialog # Opens the file explorer depending on the OS using NativeFileDialog # Opens the file explorer depending on the OS
using StipplePlotly using StipplePlotly
using Base64
include("./julia_imzML_visual.jl") include("./julia_imzML_visual.jl")
@genietools @genietools
@ -76,7 +77,8 @@ function loadImgPlot(interfaceImg::String)
), ),
yaxis=PlotlyBase.attr( yaxis=PlotlyBase.attr(
visible=false visible=false
) ),
margin=attr(l=0,r=0,t=0,b=0,pad=0)
) )
# Create the trace for the image # Create the trace for the image
@ -109,6 +111,69 @@ function loadImgPlot(interfaceImg::String)
plotlayout=layout plotlayout=layout
return plotdata, plotlayout, width, height return plotdata, plotlayout, width, height
end end
function loadImgPlot(interfaceImg::String, overlayImg::String, imgTrans::Float64)
timestamp=string(time_ns())
# Load the main image
cleaned_img = replace(interfaceImg, r"\?.*" => "")
cleaned_img = lstrip(cleaned_img, '/')
var = joinpath("./public", cleaned_img)
img = load(var)
# Convert to grayscale
img_gray = Gray.(img)
img_array = Array(img_gray)
elevation = Float32.(Array(img_array)) ./ 255.0
# Get the X, Y coordinates of the image
height, width = size(img_array)
#println("height: $(-height), width: $(width)")
X = collect(1:width)
Y = collect(1:height)
#println("height: $(X), width: $(-Y)")
# Create the layout with overlay image
layoutImg = PlotlyBase.Layout(
images = [attr(
#source = "data:image/png;base64,$overlayImg",
#source = "https://images.plot.ly/language-icons/api-home/python-logo.png",
source = "$(overlayImg)?t=$(timestamp)",
xref = "x",
yref = "y",
x = 0,
y = 0,
sizex = width,
sizey = -height,
sizing = "stretch",
opacity = imgTrans,
layer = "above" # Place the overlay image in the foreground
)],
xaxis = PlotlyBase.attr(
visible = false,
scaleanchor = "y",
range = [1, width]
),
yaxis = PlotlyBase.attr(
visible = false,
range = [-height,-1]
),
margin = attr(l = 0, r = 0, t = 0, b = 0, pad = 0)
)
# Create the trace for the main image
trace = PlotlyBase.heatmap(
z = elevation,
x = X,
y = -Y,
name = "",
showlegend = false,
colorscale = "Viridis",
showscale = false
)
plotdata = [trace]
plotlayout = layoutImg
return plotdata, plotlayout, width, height
end
# loadContourPlot recieves the local directory of the image as a string, # loadContourPlot recieves the local directory of the image as a string,
# returns the layout and data for the contour plotly plot # returns the layout and data for the contour plotly plot
# this function loads the image and applies a gaussian filter # this function loads the image and applies a gaussian filter
@ -144,6 +209,7 @@ function loadContourPlot(interfaceImg::String)
yaxis=PlotlyBase.attr( yaxis=PlotlyBase.attr(
title="Y" title="Y"
), ),
margin=attr(l=0,r=0,t=120,b=0,pad=0)
) )
trace=PlotlyBase.contour( trace=PlotlyBase.contour(
z=elevation_smoothed, z=elevation_smoothed,
@ -203,7 +269,8 @@ function loadSurfacePlot(interfaceImg::String)
zaxis_nticks=z_nticks, zaxis_nticks=z_nticks,
camera=attr(eye=attr(x=0, y=-1, z=0.5)), camera=attr(eye=attr(x=0, y=-1, z=0.5)),
aspectratio=aspect_ratio aspectratio=aspect_ratio
) ),
margin=attr(l=0,r=0,t=120,b=0,pad=0)
) )
# Transpose the elevation_smoothed array if Y axis is longer than X axis to fix chopping # Transpose the elevation_smoothed array if Y axis is longer than X axis to fix chopping
elevation_smoothed=transpose(elevation_smoothed) elevation_smoothed=transpose(elevation_smoothed)
@ -346,6 +413,13 @@ end
@out imgWidth=0 @out imgWidth=0
@out imgHeight=0 @out imgHeight=0
# Optical Image Overlay & Transparency
@in imgTrans = 1.0
@in progressOptical = false
@out btnOpticalDisable = true
@in btnOptical = false
@out opticalImg = ""
# Messages to interface variables # Messages to interface variables
@out msg="" @out msg=""
@out msgimg="" @out msgimg=""
@ -385,7 +459,8 @@ end
), ),
yaxis=PlotlyBase.attr( yaxis=PlotlyBase.attr(
visible=false visible=false
) ),
margin=attr(l=0,r=0,t=0,b=0,pad=0)
) )
traceImg=PlotlyBase.heatmap(x=[], y=[]) traceImg=PlotlyBase.heatmap(x=[], y=[])
@out plotdataImg=[traceImg] @out plotdataImg=[traceImg]
@ -403,7 +478,8 @@ end
yaxis=PlotlyBase.attr( yaxis=PlotlyBase.attr(
title="Intensity", title="Intensity",
showgrid=true showgrid=true
) ),
margin=attr(l=0,r=0,t=120,b=0,pad=0)
) )
# Dummy 2D scatter plot # Dummy 2D scatter plot
traceSpectra=PlotlyBase.scatter(x=[], y=[], mode="lines") traceSpectra=PlotlyBase.scatter(x=[], y=[], mode="lines")
@ -430,6 +506,7 @@ end
yaxis=PlotlyBase.attr( yaxis=PlotlyBase.attr(
title="Y" title="Y"
), ),
margin=attr(l=0,r=0,t=120,b=0,pad=0)
) )
# Dummy 2D surface plot # Dummy 2D surface plot
traceContour=PlotlyBase.scatter(x=[], y=[], mode="lines") traceContour=PlotlyBase.scatter(x=[], y=[], mode="lines")
@ -450,7 +527,8 @@ end
zaxis_nticks=4, zaxis_nticks=4,
camera=attr(eye=attr(x=0, y=-1, z=0.5)), camera=attr(eye=attr(x=0, y=-1, z=0.5)),
aspectratio=attr(x=1, y=1, z=0.2) aspectratio=attr(x=1, y=1, z=0.2)
) ),
margin=attr(l=0,r=0,t=120,b=0,pad=0)
) )
# Dummy 3D surface plot # Dummy 3D surface plot
@ -655,7 +733,8 @@ end
title="Intensity", title="Intensity",
showgrid=true showgrid=true
), ),
autosize=false autosize=false,
margin=attr(l=0,r=0,t=120,b=0,pad=0)
) )
# dims=size(spectraMz) # dims=size(spectraMz)
# scansMax=dims[2] # we get the total of scansMax # scansMax=dims[2] # we get the total of scansMax
@ -709,7 +788,8 @@ end
title="Intensity", title="Intensity",
showgrid=true showgrid=true
), ),
autosize=false autosize=false,
margin=attr(l=0,r=0,t=120,b=0,pad=0)
) )
xSpectraMz=spectraMz[1,abs(xCoord)] xSpectraMz=spectraMz[1,abs(xCoord)]
ySpectraMz=spectraMz[2,abs(yCoord)] ySpectraMz=spectraMz[2,abs(yCoord)]
@ -762,6 +842,7 @@ end
msgimg="Image with the Nmass of $(replace(text_nmass, "_" => "."))" msgimg="Image with the Nmass of $(replace(text_nmass, "_" => "."))"
# Process the image in the function # Process the image in the function
plotdataImg, plotlayoutImg, imgWidth, imgHeight=loadImgPlot(imgInt) plotdataImg, plotlayoutImg, imgWidth, imgHeight=loadImgPlot(imgInt)
btnOpticalDisable = false
else else
traceImg=PlotlyBase.heatmap(x=[], y=[]) traceImg=PlotlyBase.heatmap(x=[], y=[])
plotdataImg=[traceImg] plotdataImg=[traceImg]
@ -788,6 +869,7 @@ end
msgimg="Image with the Nmass of $(replace(text_nmass, "_" => "."))" msgimg="Image with the Nmass of $(replace(text_nmass, "_" => "."))"
# Process the image in the function # Process the image in the function
plotdataImg, plotlayoutImg, imgWidth, imgHeight=loadImgPlot(imgInt) plotdataImg, plotlayoutImg, imgWidth, imgHeight=loadImgPlot(imgInt)
btnOpticalDisable = false
else else
traceImg=PlotlyBase.heatmap(x=[], y=[]) traceImg=PlotlyBase.heatmap(x=[], y=[])
plotdataImg=[traceImg] plotdataImg=[traceImg]
@ -815,6 +897,7 @@ end
msgtriq="TrIQ image with the Nmass of $(replace(text_nmass, "_" => "."))" msgtriq="TrIQ image with the Nmass of $(replace(text_nmass, "_" => "."))"
# Process the image in the function # Process the image in the function
plotdataImgT, plotlayoutImgT, imgWidth, imgHeight=loadImgPlot(imgIntT) plotdataImgT, plotlayoutImgT, imgWidth, imgHeight=loadImgPlot(imgIntT)
btnOpticalDisable = false
else else
traceImg=PlotlyBase.heatmap(x=[], y=[]) traceImg=PlotlyBase.heatmap(x=[], y=[])
plotdataImgT=[traceImg] plotdataImgT=[traceImg]
@ -841,6 +924,7 @@ end
msgtriq="TrIQ image with the Nmass of $(replace(text_nmass, "_" => "."))" msgtriq="TrIQ image with the Nmass of $(replace(text_nmass, "_" => "."))"
# Process the image in the function # Process the image in the function
plotdataImgT, plotlayoutImgT, imgWidth, imgHeight=loadImgPlot(imgIntT) plotdataImgT, plotlayoutImgT, imgWidth, imgHeight=loadImgPlot(imgIntT)
btnOpticalDisable = false
else else
traceImg=PlotlyBase.heatmap(x=[], y=[]) traceImg=PlotlyBase.heatmap(x=[], y=[])
plotdataImgT=[traceImg] plotdataImgT=[traceImg]
@ -1064,7 +1148,8 @@ end
title="Intensity", title="Intensity",
showgrid=true showgrid=true
), ),
autosize=false autosize=false,
margin=attr(l=0,r=0,t=120,b=0,pad=0)
) )
traceSpectra=PlotlyBase.scatter(x=xSpectraMz, y=ySpectraMz, mode="lines",name="Spectra",showlegend=false) traceSpectra=PlotlyBase.scatter(x=xSpectraMz, y=ySpectraMz, mode="lines",name="Spectra",showlegend=false)
trace2=PlotlyBase.scatter(x=[Nmass, Nmass],y=[0, maximum(ySpectraMz)],mode="lines",line=attr(color="red", width=0.5),name="<i>m/z</i> selected",showlegend=false) trace2=PlotlyBase.scatter(x=[Nmass, Nmass],y=[0, maximum(ySpectraMz)],mode="lines",line=attr(color="red", width=0.5),name="<i>m/z</i> selected",showlegend=false)
@ -1106,14 +1191,27 @@ end
yCoord=-imgHeight yCoord=-imgHeight
end # Get the x and y values from the click of the cursor and make sure they don't exceed image proportions end # Get the x and y values from the click of the cursor and make sure they don't exceed image proportions
#plotdataImg, plotlayoutImg, imgWidth, imgHeight=loadImgPlot(imgInt) #plotdataImg, plotlayoutImg, imgWidth, imgHeight=loadImgPlot(imgInt)
plotdataImg=filter(trace -> !(get(trace, :name, "") in ["Line X", "Line Y"]), plotdataImg) plotdataImg=filter(trace -> !(get(trace, :name, "") in ["Line X", "Line Y","Optical"]), plotdataImg)
trace1, trace2=crossLinesPlot(xCoord, yCoord, imgWidth, -imgHeight) trace1, trace2=crossLinesPlot(xCoord, yCoord, imgWidth, -imgHeight)
plotdataImg=append!(plotdataImg, [trace1, trace2]) plotdataImg=append!(plotdataImg, [trace1, trace2])
end end
end end
# WIP add an x and y input and a plot to select pixels in an image and then calculate a plot (not the sum of plots) @onbutton btnOptical begin
# optional: red lines to signal which pixel is selected in the image plot timestamp=string(time_ns())
imgRoute=pick_file(; filterlist="png,bmp,jpg,jpeg")
if isnothing(imgRoute)
println("No file selected")
else
img=load(imgRoute)
save("./public/css/imgOver.png",img)
plotdataImg, plotlayoutImg, imgWidth, imgHeight=loadImgPlot(imgInt,"/css/imgOver.png",imgTrans)
end
end
@onchange imgTrans begin
plotdataImg, plotlayoutImg, imgWidth, imgHeight=loadImgPlot(imgInt,"/css/imgOver.png",imgTrans)
end
@mounted watchplots() @mounted watchplots()
@ -1126,13 +1224,3 @@ end
# Register a new route and the page that will be loaded on access # Register a new route and the page that will be loaded on access
@page("/", "app.jl.html") @page("/", "app.jl.html")
end end
# == Advanced features ==
#=
- The @private macro defines a reactive variable that is not sent to the browser.
This is useful for storing data that is unique to each user session but is not needed
in the UI.
@private table=DataFrame(a=1:10, b=10:19, c=20:29)
=#

46
app.jl.html
View File

@ -53,6 +53,12 @@
</q-item> </q-item>
</q-list> </q-list>
</q-btn-dropdown> </q-btn-dropdown>
<q-btn id="btnStyle" icon="search" class="q-ma-sm" :disable="btnOpticalDisable"
v-on:click="btnOptical=true" label="Load your optical Image"></q-btn>
<div class="q-mx-sm">
<q-slider color="black" v-model="imgTrans" :min="0.0" :max="1" :step="0.1" :disable="btnOpticalDisable"/>
<q-badge style="background-color: #009f90;"> Transparency: {{ imgTrans }}</q-badge>
</div>
</div> </div>
<p id="lblFullRoute">full route: {{full_route}}</p> <p id="lblFullRoute">full route: {{full_route}}</p>
<!-- Variable Manipulation --> <!-- Variable Manipulation -->
@ -68,8 +74,9 @@
:rules="[val => !!val || '* Required', val => val >= 0.0 &amp;&amp; val <= 1.0 || 'Needs to be in range between 0 and 1']"></q-input> :rules="[val => !!val || '* Required', val => val >= 0.0 &amp;&amp; val <= 1.0 || 'Needs to be in range between 0 and 1']"></q-input>
</div> </div>
<div class="st-col col-4 col-sm q-ma-sm"> <div class="st-col col-4 col-sm q-ma-sm">
<q-input standout="custom-standout" id="textcolorLevel" step="1" v-model="colorLevel" <q-input standout="custom-standout" id="textcolorLevel" step="1" v-model="colorLevel" label="Color level"
label="Color level" type="number" :rules="[ val => !!val || '* Required', val => val >= 2 &amp;&amp; val <= 256 || 'Needs to be in range between 2 and 256']"></q-input> type="number"
:rules="[ val => !!val || '* Required', val => val >= 2 &amp;&amp; val <= 256 || 'Needs to be in range between 2 and 256']"></q-input>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -118,14 +125,12 @@
</div> </div>
<div class="row col-6"> <div class="row col-6">
<div class="st-col col-4 col-sm-4 q-ma-sm"> <div class="st-col col-4 col-sm-4 q-ma-sm">
<q-input standout="custom-standout" step="1" v-model="xCoord" label="X coord" <q-input standout="custom-standout" step="1" v-model="xCoord" label="X coord" type="number" :rules="[
type="number" :rules="[
val => SpectraEnabled ? ( '* Required', val >= 0|| 'Needs to be bigger than 0') : true val => SpectraEnabled ? ( '* Required', val >= 0|| 'Needs to be bigger than 0') : true
]" :readonly="!SpectraEnabled" :disable="!SpectraEnabled"></q-input> ]" :readonly="!SpectraEnabled" :disable="!SpectraEnabled"></q-input>
</div> </div>
<div class="st-col col-4 col-sm-4 q-ma-sm"> <div class="st-col col-4 col-sm-4 q-ma-sm">
<q-input standout="custom-standout" step="1" v-model="yCoord" label="Y coord" <q-input standout="custom-standout" step="1" v-model="yCoord" label="Y coord" type="number" :rules="[
type="number" :rules="[
val => SpectraEnabled ? ( '* Required', val <= 0|| 'Needs to be lower than 0') : true val => SpectraEnabled ? ( '* Required', val <= 0|| 'Needs to be lower than 0') : true
]" :readonly="!SpectraEnabled" :disable="!SpectraEnabled"></q-input> ]" :readonly="!SpectraEnabled" :disable="!SpectraEnabled"></q-input>
</div> </div>
@ -162,7 +167,8 @@
<!-- Image manager --> <!-- Image manager -->
<div id="image-container" class="row st-col col-12"> <div id="image-container" class="row st-col col-12">
<div class="col-10 q-pa-none q-ma-none"> <div class="col-10 q-pa-none q-ma-none">
<plotly id="plotStyle" :data="plotdataImg" :layout="plotlayoutImg" class="q-pa-none q-ma-none sync_data" @click="data_click"></plotly> <plotly id="plotStyle" :data="plotdataImg" :layout="plotlayoutImg" class="q-pa-none q-ma-none sync_data"
@click="data_click"></plotly>
<!--<q-img id="imgInt" class="q-ma-none q-pa-none" :src="imgInt" width="80%"></q-img>--> <!--<q-img id="imgInt" class="q-ma-none q-pa-none" :src="imgInt" width="80%"></q-img>-->
</div> </div>
<div class="col-2 q-pa-none q-ma-none"> <div class="col-2 q-pa-none q-ma-none">
@ -183,7 +189,8 @@
<!-- Triq Image manager --> <!-- Triq Image manager -->
<div id="image-container" class="row st-col col-12"> <div id="image-container" class="row st-col col-12">
<div class="col-10 q-pa-none q-ma-none "> <div class="col-10 q-pa-none q-ma-none ">
<plotly id="plotStyle" :data="plotdataImgT" :layout="plotlayoutImgT" class="q-pa-none q-ma-none sync_data" @click="data_click"></plotly> <plotly id="plotStyle" :data="plotdataImgT" :layout="plotlayoutImgT"
class="q-pa-none q-ma-none sync_data" @click="data_click"></plotly>
<!--<q-img id="imgInt" class="q-ma-none q-pa-none" :src="imgIntT" width="80%"></q-img>--> <!--<q-img id="imgInt" class="q-ma-none q-pa-none" :src="imgIntT" width="80%"></q-img>-->
</div> </div>
<div class="col-2 q-pa-none q-ma-none "> <div class="col-2 q-pa-none q-ma-none ">
@ -196,7 +203,8 @@
<q-tab-panel name="tab2"> <q-tab-panel name="tab2">
<!-- Content for Tab 2 --> <!-- Content for Tab 2 -->
<!--<plotly id="plotStyle" :data="plotdata" :layout="plotlayout" class="q-pa-none q-ma-none"></plotly>--> <!--<plotly id="plotStyle" :data="plotdata" :layout="plotlayout" class="q-pa-none q-ma-none"></plotly>-->
<plotly id="plotStyle" :data="plotdata" :layout="plotlayout" class="q-pa-none q-ma-none sync_data" @click="data_click"></plotly> <plotly id="plotStyle" :data="plotdata" :layout="plotlayout" class="q-pa-none q-ma-none sync_data"
@click="data_click"></plotly>
</q-tab-panel> </q-tab-panel>
<q-tab-panel name="tab3"> <q-tab-panel name="tab3">
@ -230,8 +238,12 @@
<q-dialog v-model="CompareDialog" full-width> <q-dialog v-model="CompareDialog" full-width>
<q-card> <q-card>
<q-card-section> <q-card-section class="row">
<div class="text-h6">Compare two diferent images or plots in a larger screen</div> <div class="text-h6 q-ma-sm">Compare two diferent images or plots in a larger screen</div>
<div class="q-mx-sm">
<q-slider color="black" v-model="imgTrans" :min="0.0" :max="1" :step="0.1" :disable="btnOpticalDisable"/>
<q-badge style="background-color: #009f90;"> Transparency: {{ imgTrans }}</q-badge>
</div>
</q-card-section> </q-card-section>
<q-card-section class="q-pt-none col-12"> <q-card-section class="q-pt-none col-12">
@ -249,7 +261,8 @@
<!-- Image manager --> <!-- Image manager -->
<div id="image-container" class="row st-col col-12"> <div id="image-container" class="row st-col col-12">
<div class="col-10 q-pa-none q-ma-none "> <div class="col-10 q-pa-none q-ma-none ">
<plotly id="plotStyle" :data="plotdataImg" :layout="plotlayoutImg" class="q-pa-none q-ma-none"></plotly> <plotly id="plotStyle" :data="plotdataImg" :layout="plotlayoutImg" class="q-pa-none q-ma-none">
</plotly>
</div> </div>
<div class="col-2"> <div class="col-2">
<q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbar"></q-img> <q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbar"></q-img>
@ -268,7 +281,8 @@
<!-- Triq Image manager --> <!-- Triq Image manager -->
<div id="image-container" class="row st-col col-12"> <div id="image-container" class="row st-col col-12">
<div class="col-10 q-pa-none q-ma-none "> <div class="col-10 q-pa-none q-ma-none ">
<plotly id="plotStyle" :data="plotdataImgT" :layout="plotlayoutImgT" class="q-pa-none q-ma-none"></plotly> <plotly id="plotStyle" :data="plotdataImgT" :layout="plotlayoutImgT" class="q-pa-none q-ma-none">
</plotly>
</div> </div>
<div class="col-2"> <div class="col-2">
<q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbarT"></q-img> <q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbarT"></q-img>
@ -304,7 +318,8 @@
<!-- Image manager --> <!-- Image manager -->
<div id="image-container" class="row st-col col-12"> <div id="image-container" class="row st-col col-12">
<div class="col-10 q-pa-none q-ma-none "> <div class="col-10 q-pa-none q-ma-none ">
<plotly id="plotStyle" :data="plotdataImg" :layout="plotlayoutImg" class="q-pa-none q-ma-none"></plotly> <plotly id="plotStyle" :data="plotdataImg" :layout="plotlayoutImg" class="q-pa-none q-ma-none">
</plotly>
</div> </div>
<div class="col-2 q-pa-none q-ma-none "> <div class="col-2 q-pa-none q-ma-none ">
<q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbar"></q-img> <q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbar"></q-img>
@ -323,7 +338,8 @@
<!-- Triq Image manager --> <!-- Triq Image manager -->
<div id="image-container" class="row st-col col-12"> <div id="image-container" class="row st-col col-12">
<div class="col-10 q-pa-none q-ma-none "> <div class="col-10 q-pa-none q-ma-none ">
<plotly id="plotStyle" :data="plotdataImgT" :layout="plotlayoutImgT" class="q-pa-none q-ma-none"></plotly> <plotly id="plotStyle" :data="plotdataImgT" :layout="plotlayoutImgT" class="q-pa-none q-ma-none">
</plotly>
</div> </div>
<div class="col-2 q-pa-none q-ma-none "> <div class="col-2 q-pa-none q-ma-none ">
<q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbarT"></q-img> <q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbarT"></q-img>

43
public/css/autogenerated.css
View File

@ -1 +1,42 @@
#btnStyle{background:#009f90;color:rgb(229, 236, 246);}#imgInt{float:left;}#header{display:flex;align-items:center;}#imgLogo{width:100px;height:80px;margin-right:10px;margin-left:10px;}#extDivStyle{background-color:#c9cdb1;border-radius: 10px;}#intDivStyle{padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;background-color: #eff2f5;}#colorbar{float:left;}.custom-standout{background-color:#7f8389!important;color:rgb(0, 0, 0)!important;}#tabHeader{color:#009f90;} #btnStyle {
background: #009f90;
color: rgb(229, 236, 246);
}
#imgInt {
float: left;
}
#header {
display: flex;
align-items: center;
}
#imgLogo {
width: 100px;
height: 80px;
margin-right: 10px;
margin-left: 10px;
}
#extDivStyle {
background-color: #c9cdb1;
border-radius: 10px;
}
#intDivStyle {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #eff2f5;
}
.custom-standout {
background-color: #7f8389 !important;
color: rgb(0, 0, 0) !important;
}
#tabHeader {
color: #009f90;
}

BIN
public/css/imgOver.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 963 KiB