mirror of
https://github.com/Kozea/Radicale.git
synced 2025-09-15 20:36:55 +00:00
WEB UI: HREF for Upload, Refresh button, and CSS fixes
This commit is contained in:
MatthewHana
parent
b945749d1b
commit
e66055de08
4 changed files with 268 additions and 154 deletions
|
|
@ -1,55 +1,72 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; display: block;" width="264px" height="264px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
|
||||
<g transform="rotate(0 50 50)">
|
||||
<rect x="45.5" y="32" rx="0" ry="0" width="9" height="4" fill="#4e9a06">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.8026755852842808s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(27.692307692307693 50 50)">
|
||||
<rect x="45.5" y="32" rx="0" ry="0" width="9" height="4" fill="#71cc1a">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.7357859531772575s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(55.38461538461539 50 50)">
|
||||
<rect x="45.5" y="32" rx="0" ry="0" width="9" height="4" fill="#8ce139">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.6688963210702341s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(83.07692307692308 50 50)">
|
||||
<rect x="45.5" y="32" rx="0" ry="0" width="9" height="4" fill="#cdff9c">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.6020066889632106s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(110.76923076923077 50 50)">
|
||||
<rect x="45.5" y="32" rx="0" ry="0" width="9" height="4" fill="#cdf7a6">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.5351170568561873s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(138.46153846153845 50 50)">
|
||||
<rect x="45.5" y="32" rx="0" ry="0" width="9" height="4" fill="#fcfcfc">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.46822742474916385s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(166.15384615384616 50 50)">
|
||||
<rect x="45.5" y="32" rx="0" ry="0" width="9" height="4" fill="#fefefe">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.4013377926421404s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(193.84615384615384 50 50)">
|
||||
<rect x="45.5" y="32" rx="0" ry="0" width="9" height="4" fill="#f4f4f4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.33444816053511706s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(221.53846153846155 50 50)">
|
||||
<rect x="45.5" y="32" rx="0" ry="0" width="9" height="4" fill="#ffd6d6">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.26755852842809363s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(249.23076923076923 50 50)">
|
||||
<rect x="45.5" y="32" rx="0" ry="0" width="9" height="4" fill="#f86f6f">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.2006688963210702s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(276.9230769230769 50 50)">
|
||||
<rect x="45.5" y="32" rx="0" ry="0" width="9" height="4" fill="#e73c3c">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.13377926421404682s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(304.61538461538464 50 50)">
|
||||
<rect x="45.5" y="32" rx="0" ry="0" width="9" height="4" fill="#da2121">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.06688963210702341s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(332.3076923076923 50 50)">
|
||||
<rect x="45.5" y="32" rx="0" ry="0" width="9" height="4" fill="#a40000">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="0s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1080" height="1080" viewBox="0 0 1080 1080" xml:space="preserve">
|
||||
<g transform="matrix(10.8 0 0 10.8 540 540)">
|
||||
<g style="">
|
||||
<g transform="matrix(2.64 0 0 2.64 0 -42.24)">
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(78,154,6); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" x="-4.5" y="-2" rx="0" ry="0" width="9" height="4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.8026755852842808s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g>
|
||||
<g transform="matrix(2.34 1.23 -1.23 2.34 19.63 -37.4)">
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(113,204,26); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" x="-4.5" y="-2" rx="0" ry="0" width="9" height="4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.7357859531772575s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g>
|
||||
<g transform="matrix(1.5 2.17 -2.17 1.5 34.76 -24)">
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(140,225,57); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" x="-4.5" y="-2" rx="0" ry="0" width="9" height="4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.6688963210702341s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g>
|
||||
<g transform="matrix(0.32 2.62 -2.62 0.32 41.93 -5.09)">
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(205,255,156); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" x="-4.5" y="-2" rx="0" ry="0" width="9" height="4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.6020066889632106s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g>
|
||||
<g transform="matrix(-0.94 2.47 -2.47 -0.94 39.5 14.98)">
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(205,247,166); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" x="-4.5" y="-2" rx="0" ry="0" width="9" height="4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.5351170568561873s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g>
|
||||
<g transform="matrix(-1.98 1.75 -1.75 -1.98 28.01 31.62)">
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(252,252,252); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" x="-4.5" y="-2" rx="0" ry="0" width="9" height="4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.46822742474916385s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g>
|
||||
<g transform="matrix(-2.56 0.63 -0.63 -2.56 10.11 41.01)">
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(254,254,254); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" x="-4.5" y="-2" rx="0" ry="0" width="9" height="4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.4013377926421404s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g>
|
||||
<g transform="matrix(-2.56 -0.63 0.63 -2.56 -10.11 41.01)">
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(244,244,244); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" x="-4.5" y="-2" rx="0" ry="0" width="9" height="4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.33444816053511706s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g>
|
||||
<g transform="matrix(-1.98 -1.75 1.75 -1.98 -28.01 31.62)">
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,214,214); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" x="-4.5" y="-2" rx="0" ry="0" width="9" height="4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.26755852842809363s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g>
|
||||
<g transform="matrix(-0.94 -2.47 2.47 -0.94 -39.5 14.98)">
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(248,111,111); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" x="-4.5" y="-2" rx="0" ry="0" width="9" height="4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.2006688963210702s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g>
|
||||
<g transform="matrix(0.32 -2.62 2.62 0.32 -41.93 -5.09)">
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(231,60,60); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" x="-4.5" y="-2" rx="0" ry="0" width="9" height="4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.13377926421404682s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g>
|
||||
<g transform="matrix(1.5 -2.17 2.17 1.5 -34.76 -24)">
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(218,33,33); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" x="-4.5" y="-2" rx="0" ry="0" width="9" height="4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="-0.06688963210702341s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g>
|
||||
<g transform="matrix(2.34 -1.23 1.23 2.34 -19.63 -37.4)">
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(164,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" x="-4.5" y="-2" rx="0" ry="0" width="9" height="4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.8695652173913042s" begin="0s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 7.9 KiB |
|
|
@ -103,11 +103,20 @@ main{
|
|||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 3px 10px;
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#logoutview a[data-name=logout]{
|
||||
right: 25px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#logoutview a[data-name=refresh]{
|
||||
left: 25px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#collectionsscene{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -116,11 +125,11 @@ main{
|
|||
align-items: center;
|
||||
margin-top: 50px;
|
||||
width: 100%;
|
||||
height: calc(100vh - 50px);
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#collectionsscene article{
|
||||
width: 250px;
|
||||
width: 275px;
|
||||
background: rgb(250, 250, 250);
|
||||
border-radius: 8px;
|
||||
box-shadow: 2px 2px 3px #0000001a;
|
||||
|
|
@ -129,7 +138,7 @@ main{
|
|||
padding-top: 0;
|
||||
margin: 10px;
|
||||
float: left;
|
||||
height: 350px;
|
||||
min-height: 375px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -170,11 +179,12 @@ main{
|
|||
}
|
||||
|
||||
#collectionsscene article:hover ul{
|
||||
display: flex !important;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#collectionsscene ul{
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
width: 60%;
|
||||
margin: 0 20%;
|
||||
|
|
@ -216,7 +226,7 @@ main{
|
|||
#uploadcollectionscene ul{
|
||||
margin: 10px -30px;
|
||||
max-height: 600px;
|
||||
overflow: overlay;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#uploadcollectionscene li{
|
||||
|
|
@ -225,6 +235,11 @@ main{
|
|||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#uploadcollectionscene div[data-name=pending]{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#uploadcollectionscene .successmessage{
|
||||
color: #4e9a06;
|
||||
width: 100%;
|
||||
|
|
@ -291,6 +306,11 @@ main{
|
|||
padding-top: 15px;
|
||||
}
|
||||
|
||||
img.loading{
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.error::before{
|
||||
content: "!";
|
||||
height: 1em;
|
||||
|
|
@ -391,7 +411,7 @@ button.blue:active, a.blue:active{
|
|||
|
||||
#collectionsscene article{
|
||||
height: auto;
|
||||
min-height: 350px;
|
||||
min-height: 375px;
|
||||
}
|
||||
|
||||
.container{
|
||||
|
|
@ -399,10 +419,10 @@ button.blue:active, a.blue:active{
|
|||
}
|
||||
|
||||
#collectionsscene ul{
|
||||
display: flex !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
#logoutview span{
|
||||
text-align: left;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue