Avii/Radicale
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Formatted main.css

Browse Source
This commit is contained in:
Max Berger
2026-03-07 20:26:32 +01:00
parent 0404e54a99
commit 76abbf3115
1 changed files with 88 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
radicale/web/internal_data/css/main.css
View File

@@ -1,4 +1,4 @@
body{ body {
background: #ffffff; background: #ffffff;
color: #424247; color: #424247;
font-family: sans-serif; font-family: sans-serif;
@@ -13,11 +13,11 @@ body{
justify-content: space-around; justify-content: space-around;
} }
main{ main {
width: 100%; width: 100%;
} }
.container{ .container {
height: auto; height: auto;
min-height: 450px; min-height: 450px;
width: 350px; width: 350px;
@@ -32,14 +32,14 @@ main{
margin: 0 auto; margin: 0 auto;
} }
.container h1{ .container h1 {
margin: 0; margin: 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #484848; color: #484848;
} }
.container h2{ .container h2 {
margin: 0; margin: 0;
width: 100%; width: 100%;
text-align: left; text-align: left;
@@ -47,41 +47,37 @@ main{
font-size: 1.5em; font-size: 1.5em;
} }
#loginscene .infcloudlink{ #loginscene .infcloudlink {
margin: 0; margin: 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #484848; color: #484848;
} }
#loginscene .infcloudlink-hidden{ #loginscene .infcloudlink-hidden {
visibility: hidden; visibility: hidden;
} }
#loginscene input{ #loginscene .logocontainer {
}
#loginscene .logocontainer{
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
#loginscene .logocontainer img{ #loginscene .logocontainer img {
width: 75px; width: 75px;
} }
#loginscene h1{ #loginscene h1 {
text-align: center; text-align: center;
font-family: sans-serif; font-family: sans-serif;
font-weight: normal; font-weight: normal;
} }
#loginscene button{ #loginscene button {
float: right; float: right;
} }
#loadingscene{ #loadingscene {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgb(237 237 237); background: rgb(237 237 237);
@@ -97,12 +93,12 @@ main{
z-index: 999; z-index: 999;
} }
#loadingscene h2{ #loadingscene h2 {
font-size: 2em; font-size: 2em;
font-weight: bold; font-weight: bold;
} }
#logoutview{ #logoutview {
width: 100%; width: 100%;
display: block; display: block;
background: white; background: white;
@@ -113,12 +109,12 @@ main{
position: fixed; position: fixed;
} }
#logoutview span{ #logoutview span {
width: calc(100% - 60px); width: calc(100% - 60px);
display: inline-block; display: inline-block;
} }
#logoutview a{ #logoutview a {
color: white; color: white;
text-decoration: none; text-decoration: none;
padding: 3px 10px; padding: 3px 10px;
@@ -126,17 +122,17 @@ main{
border-radius: 4px; border-radius: 4px;
} }
#logoutview a[data-name=logout]{ #logoutview a[data-name=logout] {
right: 25px; right: 25px;
float: right; float: right;
} }
#logoutview a[data-name=refresh]{ #logoutview a[data-name=refresh] {
left: 25px; left: 25px;
float: left; float: left;
} }
#collectionsscene{ #collectionsscene {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
@@ -147,7 +143,7 @@ main{
height: 100vh; height: 100vh;
} }
#collectionsscene article{ #collectionsscene article {
width: 275px; width: 275px;
background: rgb(250, 250, 250); background: rgb(250, 250, 250);
border-radius: 8px; border-radius: 8px;
@@ -161,23 +157,23 @@ main{
overflow: hidden; overflow: hidden;
} }
#collectionsscene article .colorbar{ #collectionsscene article .colorbar {
width: 500%; width: 500%;
height: 15px; height: 15px;
margin: 0px -100%; margin: 0px -100%;
background: #000000; background: #000000;
} }
#collectionsscene article .title{ #collectionsscene article .title {
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: 1.5em; font-size: 1.5em;
display: block; display: block;
padding: 10px 0; padding: 10px 0;
margin: 0; margin: 0;
} }
#collectionsscene article small{ #collectionsscene article small {
font-size: 15px; font-size: 15px;
float: left; float: left;
font-weight: normal; font-weight: normal;
@@ -187,21 +183,21 @@ main{
text-align: center; text-align: center;
} }
#collectionsscene article input[type=text]{ #collectionsscene article input[type=text] {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
#collectionsscene article p{ #collectionsscene article p {
font-size: 1em; font-size: 1em;
max-height: 130px; max-height: 130px;
overflow: overlay; overflow: overlay;
} }
#collectionsscene article:hover ul{ #collectionsscene article:hover ul {
visibility: visible; visibility: visible;
} }
#collectionsscene ul{ #collectionsscene ul {
visibility: hidden; visibility: hidden;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
@@ -210,12 +206,12 @@ main{
padding: 0; padding: 0;
} }
#collectionsscene li{ #collectionsscene li {
list-style: none; list-style: none;
display: block; display: block;
} }
#collectionsscene li a{ #collectionsscene li a {
text-decoration: none !important; text-decoration: none !important;
padding: 5px; padding: 5px;
float: left; float: left;
@@ -225,41 +221,41 @@ main{
text-align: center; text-align: center;
} }
#collectionsscene article small[data-name=contentcount]{ #collectionsscene article small[data-name=contentcount] {
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
} }
#editcollectionscene p span{ #editcollectionscene p span {
word-wrap:break-word; word-wrap: break-word;
font-weight: bold; font-weight: bold;
color: #4e9a06; color: #4e9a06;
} }
#deletecollectionscene p span{ #deletecollectionscene p span {
word-wrap:break-word; word-wrap: break-word;
font-weight: bold; font-weight: bold;
color: #a40000; color: #a40000;
} }
#uploadcollectionscene ul{ #uploadcollectionscene ul {
margin: 10px -30px; margin: 10px -30px;
max-height: 600px; max-height: 600px;
overflow-y: scroll; overflow-y: scroll;
} }
#uploadcollectionscene li{ #uploadcollectionscene li {
border-bottom: 1px dashed #d5d5d5; border-bottom: 1px dashed #d5d5d5;
margin-bottom: 10px; margin-bottom: 10px;
padding-bottom: 10px; padding-bottom: 10px;
} }
#uploadcollectionscene div[data-name=pending]{ #uploadcollectionscene div[data-name=pending] {
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
#uploadcollectionscene .successmessage{ #uploadcollectionscene .successmessage {
color: #4e9a06; color: #4e9a06;
width: 100%; width: 100%;
text-align: center; text-align: center;
@@ -267,13 +263,13 @@ main{
margin-top: 15px; margin-top: 15px;
} }
.deleteconfirmationtxt{ .deleteconfirmationtxt {
text-align: center; text-align: center;
font-size: 1em; font-size: 1em;
font-weight: bold; font-weight: bold;
} }
.fabcontainer{ .fabcontainer {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
position: fixed; position: fixed;
@@ -281,7 +277,7 @@ main{
right: 0; right: 0;
} }
.fabcontainer a{ .fabcontainer a {
width: 30px; width: 30px;
height: 30px; height: 30px;
text-decoration: none; text-decoration: none;
@@ -300,29 +296,29 @@ main{
box-shadow: 2px 2px 7px #000000d6; box-shadow: 2px 2px 7px #000000d6;
} }
.title{ .title {
word-wrap: break-word; word-wrap: break-word;
font-weight: bold; font-weight: bold;
} }
.icon{ .icon {
width: 100%; width: 100%;
height: 100%; height: 100%;
filter: invert(1); filter: invert(1);
} }
.small_icon{ .small_icon {
width: 1em; width: 1em;
height: 1em; height: 1em;
filter: invert(1); filter: invert(1);
} }
.med_icon{ .med_icon {
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
} }
.badge_icon{ .badge_icon {
width: 1em; width: 1em;
height: 1em; height: 1em;
position: absolute; position: absolute;
@@ -334,30 +330,30 @@ main{
} }
.smalltext{ .smalltext {
font-size: 75% !important; font-size: 75% !important;
} }
.error{ .error {
width: 100%; width: 100%;
display: block; display: block;
text-align: center; text-align: center;
color: rgb(217,48,37); color: rgb(217, 48, 37);
font-family: sans-serif; font-family: sans-serif;
clear: both; clear: both;
padding-top: 15px; padding-top: 15px;
} }
img.loading{ img.loading {
width: 150px; width: 150px;
height: 150px; height: 150px;
} }
.error::before{ .error::before {
content: "!"; content: "!";
height: 1em; height: 1em;
color: white; color: white;
background: rgb(217,48,37); background: rgb(217, 48, 37);
font-weight: bold; font-weight: bold;
border-radius: 100%; border-radius: 100%;
display: inline-block; display: inline-block;
@@ -367,7 +363,7 @@ img.loading{
text-align: center; text-align: center;
} }
button{ button {
font-size: 1em; font-size: 1em;
padding: 7px 21px; padding: 7px 21px;
color: white; color: white;
@@ -379,7 +375,8 @@ button{
position: relative; position: relative;
} }
input, select{ input,
select {
width: 100%; width: 100%;
height: 3em; height: 3em;
border-style: solid; border-style: solid;
@@ -396,56 +393,69 @@ input.inline {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
input[type=text], input[type=password]{ input[type=text],
input[type=password] {
width: calc(100% - 30px); width: calc(100% - 30px);
} }
input:active, input:focus, input:focus-visible{ input:active,
input:focus,
input:focus-visible {
border-color: #2494fe !important; border-color: #2494fe !important;
border-width: 1px !important; border-width: 1px !important;
} }
p.red, span.red{ p.red,
span.red {
color: #b50202; color: #b50202;
} }
button.red, a.red{ button.red,
a.red {
background: #b50202; background: #b50202;
border: 1px solid #a40000; border: 1px solid #a40000;
} }
button.red:hover, a.red:hover{ button.red:hover,
a.red:hover {
background: #a40000; background: #a40000;
} }
button.red:active, a.red:active{ button.red:active,
a.red:active {
background: #8f0000; background: #8f0000;
} }
button.green, a.green{ button.green,
a.green {
background: #4e9a06; background: #4e9a06;
border: 1px solid #377200; border: 1px solid #377200;
} }
button.green:hover, a.green:hover{ button.green:hover,
a.green:hover {
background: #377200; background: #377200;
} }
button.green:active, a.green:active{ button.green:active,
a.green:active {
background: #285200; background: #285200;
} }
button.blue, a.blue{ button.blue,
a.blue {
background: #2494fe; background: #2494fe;
border: 1px solid #055fb5; border: 1px solid #055fb5;
} }
button.blue:hover, a.blue:hover{ button.blue:hover,
a.blue:hover {
background: #1578d6; background: #1578d6;
cursor: pointer !important; cursor: pointer !important;
} }
button.blue:active, a.blue:active{ button.blue:active,
a.blue:active {
background: #055fb5; background: #055fb5;
cursor: pointer !important; cursor: pointer !important;
} }
@@ -457,25 +467,25 @@ button.inline {
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
#collectionsscene{ #collectionsscene {
flex-direction: column !important; flex-direction: column !important;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
#collectionsscene article{ #collectionsscene article {
height: auto; height: auto;
min-height: 375px; min-height: 375px;
} }
.container{ .container {
max-width: 280px !important; max-width: 280px !important;
} }
#collectionsscene ul{ #collectionsscene ul {
visibility: visible !important; visibility: visible !important;
} }
#logoutview span{ #logoutview span {
padding: 0 5px; padding: 0 5px;
} }
} }