mirror of
https://gitlab.linphone.org/BC/public/flexisip-account-manager.git
synced 2026-04-17 11:48:28 +00:00
Fix FLEXIAPI-470 Base all the main colors on one hue by using CSS only
Make the footer transparent to fit with the variable color
This commit is contained in:
Timothée Jaussoin
parent
8fbfeff92a
commit
d8d3ce1721
6 changed files with 66 additions and 182 deletions
8
flexiapi/public/css/form.css
vendored
8
flexiapi/public/css/form.css
vendored
|
|
@ -167,7 +167,7 @@ form label {
|
|||
form input[type="radio"]~label:after,
|
||||
form input[required]+label:after {
|
||||
content: '' '*';
|
||||
color: var(--danger-5);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
form input:not([type=checkbox])~label,
|
||||
|
|
@ -329,13 +329,13 @@ form div textarea:active+label {
|
|||
|
||||
form div input:invalid:not(:placeholder-shown),
|
||||
form div textarea:invalid:not(:placeholder-shown) {
|
||||
border-color: var(--danger-6);
|
||||
color: var(--danger-5);
|
||||
border-color: var(--danger);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
form div input:invalid:not(:placeholder-shown)+label,
|
||||
form div textarea:invalid:not(:placeholder-shown)+label {
|
||||
color: var(--danger-5);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
/* Checkbox element */
|
||||
|
|
|
|||
80
flexiapi/public/css/style.css
vendored
80
flexiapi/public/css/style.css
vendored
|
|
@ -25,55 +25,43 @@ body {
|
|||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
|
||||
--main-1: rgba(255, 234, 203, 1);
|
||||
--main-2: rgba(255, 208, 152, 1);
|
||||
--main-3: rgba(255, 178, 102, 1);
|
||||
--main-4: rgba(255, 146, 63, 1);
|
||||
--main-5: rgba(254, 94, 0, 1);
|
||||
--main-6: rgba(218, 68, 0, 1);
|
||||
--main-7: rgba(183, 45, 0, 1);
|
||||
--main-8: rgba(147, 28, 0, 1);
|
||||
--main-9: rgba(121, 15, 0, 1);
|
||||
--hue: 22;
|
||||
--original: hsl(var(--hue) 100 50);
|
||||
|
||||
--second-0: rgba(250, 254, 255, 1);
|
||||
--second-1: rgba(238, 246, 248, 1);
|
||||
--second-2: rgba(223, 236, 242, 1);
|
||||
--second-3: rgba(192, 209, 217, 1);
|
||||
--second-4: rgba(154, 171, 181, 1);
|
||||
--second-5: rgba(108, 122, 135, 1);
|
||||
--second-6: rgba(78, 96, 116, 1);
|
||||
--second-7: rgba(54, 72, 96, 1);
|
||||
--second-8: rgba(34, 51, 77, 1);
|
||||
--second-9: rgba(20, 34, 64, 1);
|
||||
--second-1: rgba(0, 0, 0, 1);
|
||||
--main-1: hsl(from var(--original) calc(h + 14) s calc(l + 39.80));
|
||||
--main-2: hsl(from var(--original) calc(h + 11) s calc(l + 29.80));
|
||||
--main-3: hsl(from var(--original) calc(h + 8) s calc(l + 20));
|
||||
--main-4: hsl(from var(--original) calc(h + 3) s calc(l + 12.35));
|
||||
--main-5: hsl(from var(--original) calc(h + 0) s calc(l + 0)); /* original */
|
||||
--main-6: hsl(from var(--original) calc(h - 3) s calc(l - 7.25));
|
||||
--main-7: hsl(from var(--original) calc(h - 7) s calc(l - 14.12));
|
||||
|
||||
--grey-1: rgba(249, 249, 249, 1);
|
||||
--grey-2: rgba(237, 237, 237, 1);
|
||||
--grey-3: rgba(201, 201, 201, 1);
|
||||
--grey-4: rgba(148, 148, 148, 1);
|
||||
--grey-5: rgba(78, 78, 78, 1);
|
||||
--grey-6: rgba(67, 57, 57, 1);
|
||||
--grey-7: rgba(56, 39, 42, 1);
|
||||
--grey-8: rgba(45, 24, 30, 1);
|
||||
--grey-9: rgba(0, 0, 0, 1);
|
||||
--second-4: rgb(154, 171, 181);
|
||||
--second-5: rgb(108, 122, 135);
|
||||
--second-6: rgb(78, 96, 116);
|
||||
--second-7: rgb(54, 72, 96);
|
||||
--second-8: rgb(34, 51, 77);
|
||||
--second-9: rgb(20, 34, 64);
|
||||
|
||||
--danger-1: rgba(250, 232, 222, 1);
|
||||
--danger-2: rgba(245, 204, 190, 1);
|
||||
--danger-3: rgba(238, 170, 155, 1);
|
||||
--danger-4: rgba(230, 137, 130, 1);
|
||||
--danger-5: rgba(221, 95, 95, 1);
|
||||
--danger-6: rgba(189, 72, 82, 1);
|
||||
--danger-7: rgba(158, 53, 72, 1);
|
||||
--danger-8: rgba(127, 37, 61, 1);
|
||||
--danger-9: rgba(104, 26, 54, 1);
|
||||
--grey-1: rgb(249, 249, 249);
|
||||
--grey-2: rgb(237, 237, 237);
|
||||
--grey-3: rgb(201, 201, 201);
|
||||
--grey-4: rgb(148, 148, 148);
|
||||
--grey-5: rgb(78, 78, 78);
|
||||
--grey-6: rgb(67, 57, 57);
|
||||
--grey-7: rgb(56, 39, 42);
|
||||
--grey-8: rgb(45, 24, 30);
|
||||
--grey-9: rgb(0, 0, 0);
|
||||
|
||||
--color-orange: rgba(254, 94, 0, 1);
|
||||
--color-grey: rgba(108, 122, 135, 1);
|
||||
--color-green: rgba(79, 174, 128, 1);
|
||||
--color-blue: rgba(9, 197, 244, 1);
|
||||
--color-yellow: rgba(255, 220, 46, 1);
|
||||
--color-pink: rgba(255, 94, 102, 1);
|
||||
--color-purple: rgba(151, 71, 255, 1);
|
||||
--danger: rgb(221, 95, 95);
|
||||
|
||||
--color-orange: rgb(254, 94, 0);
|
||||
--color-grey: rgb(108, 122, 135);
|
||||
--color-green: rgb(79, 174, 128);
|
||||
--color-blue: rgb(9, 197, 244);
|
||||
--color-yellow: rgb(255, 220, 46);
|
||||
--color-pink: rgb(255, 94, 102);
|
||||
--color-purple: rgb(151, 71, 255);
|
||||
}
|
||||
|
||||
#wizard h3 {
|
||||
|
|
@ -1055,7 +1043,7 @@ small a {
|
|||
}
|
||||
|
||||
small.error {
|
||||
color: var(--danger-6);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
/** Errors box **/
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 169 KiB |
|
|
@ -1,19 +1,19 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="481.54166mm"
|
||||
height="54.655354mm"
|
||||
viewBox="0 0 481.54166 54.655354"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="1.0rc1 (09960d6f05, 2020-04-09)"
|
||||
sodipodi:docname="footer.svg">
|
||||
inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
|
||||
sodipodi:docname="footer.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<sodipodi:namedview
|
||||
|
|
@ -23,9 +23,9 @@
|
|||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="1.98"
|
||||
inkscape:cx="104.62963"
|
||||
inkscape:cy="93.881695"
|
||||
inkscape:zoom="0.99"
|
||||
inkscape:cx="487.87879"
|
||||
inkscape:cy="-61.616162"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="g26"
|
||||
inkscape:document-rotation="0"
|
||||
|
|
@ -37,26 +37,33 @@
|
|||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1027"
|
||||
inkscape:window-height="1011"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1">
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1">
|
||||
<sodipodi:guide
|
||||
position="8.0766935e-06,54.504169"
|
||||
orientation="1,0"
|
||||
id="guide42" />
|
||||
id="guide42"
|
||||
inkscape:locked="false" />
|
||||
<sodipodi:guide
|
||||
position="481.54165,-9.0933001e-07"
|
||||
orientation="1,0"
|
||||
id="guide44" />
|
||||
id="guide44"
|
||||
inkscape:locked="false" />
|
||||
<sodipodi:guide
|
||||
position="1.0000693e-05,34.883781"
|
||||
orientation="0,-1"
|
||||
id="guide887" />
|
||||
id="guide887"
|
||||
inkscape:locked="false" />
|
||||
<sodipodi:guide
|
||||
position="1.0000693e-05,3.0868056"
|
||||
orientation="0,-1"
|
||||
id="guide889" />
|
||||
id="guide889"
|
||||
inkscape:locked="false" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata5">
|
||||
|
|
@ -66,7 +73,6 @@
|
|||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
|
|
@ -79,19 +85,19 @@
|
|||
id="g26"
|
||||
transform="translate(9.2773437e-7,54.308819)">
|
||||
<path
|
||||
style="fill:#ffb9a0;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
style="fill:#ffffff;fill-opacity:0.13918589;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m -327.89434,14.634035 121.11229,27.528297 62.6859,-9.362178 26.45833,-18.317307 55.766026,24.423076 92.807691,-24.016025 81.124273,17.952698 41.58713,-17.923294 1e-5,54.218899 h -481.54165 z"
|
||||
id="path36"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccccccccccc" />
|
||||
<path
|
||||
style="fill:#ff9e79;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
style="fill:#ffffff;fill-opacity:0.26919717;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m -327.89434,34.25442 109.3078,-14.886957 34.19231,10.875621 30.52885,-1.10639 33.3782,11.397435 53.560418,-14.363353 62.3326405,19.188794 40.0075805,-14.594673 66.241771,22.215676 39.77373,-25.273923 12.21834,6.54777 1e-5,34.883781 -481.54166,1e-6 z"
|
||||
id="path38"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccccccccccccc" />
|
||||
<path
|
||||
style="fill:#ff723b;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
style="fill:#ffffff;fill-opacity:0.5;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m -327.89434,69.138201 0,-3.086806 58.83344,-21.446755 69.19693,6.163152 31.34474,-3.720844 25.64423,9.362181 79.375,7.733974 58.9058785,-18.783533 50.7612655,3.720841 37.576541,-14.825991 43.835825,14.201899 26.06779,17.595076 1e-5,3.086806 z"
|
||||
id="path40"
|
||||
inkscape:connector-curvature="0"
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
|
|
@ -1,110 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="412.97525mm"
|
||||
height="78.5159mm"
|
||||
viewBox="0 0 412.97525 78.515899"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="1.0rc1 (09960d6f05, 2020-04-09)"
|
||||
sodipodi:docname="header.svg">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<sodipodi:namedview
|
||||
inkscape:pagecheckerboard="true"
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="4.88"
|
||||
inkscape:cx="1531.633"
|
||||
inkscape:cy="341.22006"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="layer1"
|
||||
inkscape:document-rotation="0"
|
||||
showgrid="false"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
showguides="true"
|
||||
inkscape:guide-bbox="true"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1027"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1">
|
||||
<sodipodi:guide
|
||||
position="1.8554686e-06,0.0083693262"
|
||||
orientation="1,0"
|
||||
id="guide847" />
|
||||
<sodipodi:guide
|
||||
position="2.7832026e-06,58.623757"
|
||||
orientation="0,-1"
|
||||
id="guide863" />
|
||||
<sodipodi:guide
|
||||
position="2.7832026e-06,37.050037"
|
||||
orientation="0,-1"
|
||||
id="guide865" />
|
||||
<sodipodi:guide
|
||||
id="guide839"
|
||||
orientation="1,0"
|
||||
position="412.97523,74.310275" />
|
||||
<sodipodi:guide
|
||||
id="guide841"
|
||||
orientation="0,-1"
|
||||
position="65.250987,-6.1185994e-06" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(175.38095,-215.17998)">
|
||||
<rect
|
||||
ry="0"
|
||||
style="fill:#9cb9d0;fill-opacity:1;stroke:none;stroke-width:0.264583"
|
||||
id="rect885"
|
||||
width="412.97525"
|
||||
height="78.5159"
|
||||
x="-175.38095"
|
||||
y="215.17998" />
|
||||
<path
|
||||
sodipodi:nodetypes="cccccccc"
|
||||
style="fill:#bbcfe0;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m -175.38095,246.0625 106.647434,-21.98077 81.817307,22.38782 44.368589,-21.98077 30.935898,19.53846 1.628198,49.2532 -265.397426,0.36873 z"
|
||||
id="path861"
|
||||
inkscape:connector-curvature="0" />
|
||||
<path
|
||||
style="fill:#d6e3ed;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m -175.38095,235.07211 45.99679,22.79487 55.358977,-20.35256 33.378206,13.02564 54.544872,-17.09615 46.403844,14.24679 27.679488,-11.80449 26.458333,1.62821 29.71474,-10.17628 45.99681,6.51282 47.44317,1.22115 1e-5,58.62377 -412.97524,-10e-6 z"
|
||||
id="path857"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccccccccccccc" />
|
||||
<path
|
||||
style="fill:#ffffff;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m -175.38095,256.64583 61.46474,-11.39744 29.307694,8.95513 43.961536,-3.66346 50.0673101,15.875 68.3846149,-5.69872 23.608965,-9.36218 25.64423,3.66346 59.83655,-4.47756 50.69959,6.10577 1e-5,37.05005 -412.97524,0 z"
|
||||
id="path859"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccccccccccccc" />
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.9 KiB |
Loading…
Add table
Reference in a new issue