Re: Event-Kalender mit SQLite
Verfasst: Di 18. Jan 2022, 15:27
Und die index.htm heißt nun demo.htm das hatte ich vergessen zu erwähnen.
Forum für Mobirise und NOF
https://www.mobirise-tutorials.com/Forum/
https://www.mobirise-tutorials.com/Forum/viewtopic.php?t=600
Code: Alles auswählen
/* Navigation */
.navLink {
cursor: pointer;
display: inline-block;
/* EDIT Tommy
padding: 5px 10px 5px 10px; */
padding: 5px;
transition: all 0.3s;
}
Code: Alles auswählen
form#form {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: clamp(0.9rem, 1vw, 1.1rem);
font-optical-sizing: Auto;
color: var(--color);
background-color: var(--bgcolor-even);
border-radius: 5px;
outline: Solid 1px #999999;
box-shadow: 0px 0px 15px 8px rgb(190 190 190 / 55%);
position: absolute;
/* EDIT Tommy von 500 auf 1500 gesetzt */
z-index: 1500;
user-select: none;
}
Code: Alles auswählen
table#tabelle th#navigation {
font-size: 1.3rem !important;
text-align: center;
white-space: nowrap;
background-image: linear-gradient(var(--bgcolor-scheme), var(--bgcolor-odd));
}
/* Media */
@media screen and (max-width: 48rem) {
table#tabelle,
div#aktiv form {
font-size: 0.8rem;
}
table#tabelle th#navigation {
/* EDIT Tommy
font-size: 1.1rem !important; */
font-size: 1rem !important;
font-weight: normal;
}
span.abbrWochentag {
display: None;
}
div.event {
font-size: 0.8rem;
}
}
Code: Alles auswählen
table#tabelle th {
text-align: Center !important;
font-weight: normal;
width: 14.285714%;
}
Code: Alles auswählen
table#tabelle th {
text-align: Center !important;
font-weight: normal;
width: 14.285714%;
}
Code: Alles auswählen
/*
* Event-Kalender (SQLite) - style.css (utf-8)
* - https://werner-zenk.de
* - EDIT Tommy 18.01.2022
*/
/* Hauptfarben */
:root {
--color: rgb(55, 55, 55);
--bgcolor-even: rgb(250, 250, 250);
--bgcolor-odd: rgb(240, 240, 240);
--bgcolor-scheme: rgb(255, 255, 255);
--highlight-color: rgb(34, 132, 230);
--highlight-bgcolor: rgb(222, 238, 252);
/* EDIT Tommy
--highlight-outlinecolor: rgb(134, 201, 255); */
--highlight-outlinecolor: rgb(75, 147, 198);
color-scheme: light dark;
}
/* Tabelle */
table#tabelle {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: clamp(0.9rem, 1vw, 1.1rem);
font-optical-sizing: Auto;
color: var(--color);
table-layout: Auto;
border-collapse: Separate;
border-spacing: 1px;
width: 100%;
z-index: 1;
cursor: Default;
user-select: none;
}
/* Tabelle (nth-child even/odd) */
table#tabelle th:nth-child(even) {
background-color: var(--bgcolor-even);
}
table#tabelle th:nth-child(odd) {
background-color: var(--bgcolor-odd);
}
table#tabelle td:nth-child(even) {
background-color: var(--bgcolor-even);
}
table#tabelle td:nth-child(odd) {
background-color: var(--bgcolor-odd);
}
table#tabelle th {
text-align: Center !important;
font-weight: normal;
width: 14.285714%;
}
table#tabelle td.eintag {
vertical-align: top;
height: 65px;
}
table#tabelle td.eintag:hover {
color: var(--highlight-color);
}
table#tabelle td.keintag {
color: rgb(202, 201, 201);
vertical-align: top;
}
table#tabelle td.heute {
border: Solid 1.5px var(--highlight-outlinecolor);
border-radius: 3px;
}
/* EDIT Tommy td#navigation changed to th#navigation */
table#tabelle th#navigation {
font-size: 1.3rem !important;
text-align: center;
white-space: nowrap;
background-image: linear-gradient(var(--bgcolor-scheme), var(--bgcolor-odd));
}
table#tabelle td#menue {
text-align: right;
padding-right: 5px;
word-spacing: 3px;
background-image: linear-gradient(var(--bgcolor-odd), var(--bgcolor-scheme));
}
/* Navigation */
.navLink {
cursor: pointer;
display: inline-block;
padding: 5px 10px 5px 10px;
transition: all 0.3s;
}
.navLink:hover {
color: var(--highlight-color);
background-color: var(--highlight-bgcolor);
outline: Solid 1px var(--highlight-outlinecolor);
}
div#titelleiste > .navLink:hover {
color: #ffffff;
background-color: #d71526;
border-top-right-radius: 5px;
outline: 0px;
}
.keineAuswahl {
padding: 5px 10px 5px 10px;
}
div#aktiv a:link,
div#aktiv a:visited {
color: var(--highlight-color);
}
form#form {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: clamp(0.9rem, 1vw, 1.1rem);
font-optical-sizing: Auto;
color: var(--color);
background-color: var(--bgcolor-even);
border-radius: 5px;
outline: Solid 1px #999999;
box-shadow: 0px 0px 15px 8px rgb(190 190 190 / 55%);
position: absolute;
/* EDIT Tommy von 500 auf 1500 gesetzt */
z-index: 1500;
user-select: none;
}
div#titelleiste {
font-size: 0.8rem;
background-color: var(--bgcolor-odd);
padding: 5px 0px 5px 10px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom: Solid 0.1px rgba(144, 144, 144, 0.5);
position: sticky;
top: 0px;
scroll-margin-top: 0;
cursor: move;
}
span#schliessen {
float: right;
vertical-align: top;
margin-top: -5px;
}
div#ueberschrift {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: clamp(1.1rem, 1.2vw, 1.3rem);
font-variant: small-caps;
font-optical-sizing: Auto;
color: var(--highlight-color);
letter-spacing: 2px;
user-select: text;
cursor: text;
}
div#beschreibung {
margin-bottom: 15px;
user-select: text;
cursor: text;
}
div#formblock {
padding: 15px 10px 10px 10px;
width: fit-content;
min-width: 330px;
max-width: 660px;
height: fit-content;
min-height: 120px;
resize: both;
overflow-x: hidden;
}
p#submit {
text-align: center;
margin-block-start: 1.5em;
}
div.event {
font-family: Arial, Tahoma, Verdana, sans-serif;
font-size: clamp(0.8rem, 1vw, 1.2rem);
padding: 2px;
border-radius: 3px;
box-shadow: 1px 1px 2px 0px #707070;
margin: 0px 1px 3px 0px;
/* -ms-hyphens: Auto;
-webkit-hyphens: Auto;
hyphens: Auto; */
word-break: break-all;
user-select: text;
cursor: pointer;
}
form div.event {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: clamp(1rem, 1.1vw, 1.2rem);
line-height: 22px;
cursor: text;
}
/* EDIT Tommy */
figure :is(img, video) {
margin-left: auto;
margin-right: auto;
display: block;
max-width: 90%;
height: Auto;
object-fit: fill;
margin: 20px 0px 20px 15px;
/*border: Solid 1px #202020;*/
box-shadow: 5px 5px 5px #999999;
border-radius: 5px;
cursor: default;
}
/* EDIT Tommy - used Bootstrap instead
a:link.link,
a:visited.link {
color: var(--highlight-color);
}
*/
span.bbcode {
cursor: help;
}
/* Formularfelder */
textarea {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin-top: 3px;
width: 100%;
max-width: 98%;
min-width: 320px;
height: 120px;
min-height: 120px;
max-height: 450px;
/* EDIT Tommy - changed from resize: vertical */
resize: both;
}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="checkbox"],
input[type="number"],
button[type="button"],
textarea,
select {
border: Solid 1px #767676;
font-family: Verdana, Tahoma, Arial, Helvetica, Sans-Serif;
font-size: 0.95rem;
caret-color: #ff0000;
}
:focus-visible {
outline: Solid 1px var(--highlight-color);
}
button[type="button"]:hover {
color: var(--highlight-color);
background-color: var(--highlight-bgcolor);
outline: Solid 1px var(--highlight-outlinecolor);
}
input[type="checkbox"],
input[type="radio"] {
accent-color: var(--highlight-color);
}
input[type="checkbox"]:checked + label {
color: var(--highlight-color);
}
input[type="checkbox"]:checked + label#delete {
color: #ee0000;
}
input[type="checkbox"]:checked + label#copy {
color: #00ac00;
}
input[type="text"].eventfeld {
width: 270px;
}
input[type="number"] {
width: 90px;
}
input[type="time"] {
width: 82px;
}
label {
transition: color 0.3s;
}
label:hover {
color: var(--highlight-color);
}
summary {
cursor: pointer;
transition: color 0.3s;
}
summary:hover {
color: var(--highlight-color);
}
summary::marker {
color: var(--highlight-color);
}
/* Media */
@media screen and (max-width: 48rem) {
table#tabelle td.eintag {
height: 45px;
}
table#tabelle,
div#aktiv form {
font-size: 0.8rem;
}
/* EDIT Tommy td#navigation changed to th#navigation */
table#tabelle th#navigation {
/* EDIT Tommy
font-size: 1.1rem !important; */
font-size: 1rem !important;
font-weight: normal;
}
span.abbrWochentag {
display: None;
}
div.event {
font-size: 0.6rem;
line-height: 12px;
}
}
@media screen and (min-width: 90rem) {
table#tabelle td.eintag {
height: 85px;
}
div.event {
line-height: 20px;
}
}
@media (prefers-color-scheme: dark) {
:root {
--color: rgb(245, 245, 245) !important;
--bgcolor-even: rgb(0, 0, 0);
--bgcolor-odd: rgb(61, 61, 61);
--bgcolor-scheme: rgb(18, 18, 18);
}
div.event {
box-shadow: 1px 1px 2px 0px #ffffff;
}
}
/* Tag hervorheben */
td[data-tag="05.07.2022"],
td[data-tag="09.08.2022"] {
background-color: #c6e3fd !important;
}
/* Tag mit einem Bild hervorheben */
td[data-tag="14.02.2022"],
td[data-tag="01.07.2022"],
td[data-tag="14.02.2023"] {
background-image: url("https://www.mobirise-tutorials.com/images/Blumen.jpg");
background-size: Cover;
}
/* Ostern mit einem Bild hervorheben */
td[data-tag="17.04.2022"],
td[data-tag="18.04.2022"] {
background-image: url("https://www.mobirise-tutorials.com/images/Ostereier.png");
background-size: Cover;
}
/* Weihnachten mit einem Bild hervorheben */
td[data-tag="24.12.2022"],
td[data-tag="25.12.2022"],
td[data-tag="26.12.2022"] {
background-image: url("https://www.mobirise-tutorials.com/images/Weihnachtskugeln.jpg");
background-size: Cover;
}
/* Tag mit einem Farbverlauf (Querstreifen) hervorheben */
td[data-tag="28.07.2022"],
td[data-tag="06.12.2022"] {
background-image: repeating-linear-gradient(45deg, Lightsteelblue, Lightsteelblue 5px, White 5px, White 10px);
}
/* Wochentag hervorheben */
td[data-wochentag="Samstag"],
td[data-wochentag="Sonntag"] {
/* EDIT Tommy
background-color: #ffcece !important;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=); */
background-color: #e1e1e1 !important;
}
/* Woche hervorheben */
tr[data-woche="10"],
tr[data-woche="29"] {
outline: Solid 2px #FF0000;
border-radius: 3px;
}
Ich habe das jetzt so erfolgreich angepasst - und auch auf 1rem verkleinert, da Navi sonst zu breit ist:table#tabelle caption#navigation {
font-size: 1.1rem !important;
Code: Alles auswählen
/* EDIT Tommy td#navigation changed to th#navigation */
table#tabelle th#navigation {
/* EDIT Tommy
font-size: 1.1rem !important; */
font-size: 1rem !important;
font-weight: normal;
}
Code: Alles auswählen
table#tabelle th#navigation {
font-size: 1rem !important;
}
Eintragen/Ändernfür den Admin ziemlich schmal. Das tut Dir ja nicht weh und lässt alle Mobirise ("Bootstrap") Benutzer ohne Probleme damit.
Code: Alles auswählen
/* Formularfelder */
textarea {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin-top: 3px;
width: 100%;
max-width: 98%;
min-width: 320px;
height: 120px;
min-height: 120px;
max-height: 450px;
/* EDIT Tommy - changed from resize: vertical */
resize: both;
}
Code: Alles auswählen
/* Schriftart und Farben */
:root {
--font-family: system-ui, "Segoe UI", "Roboto", "Ubuntu",
"Cantarell", "Noto Sans", "Verdana", "Arial", sans-serif;
--color: rgb(55, 55, 55);
--bgcolor-even: rgb(250, 250, 250);
...
heute-10 und +10 Jahre.
Genau, das habe ich jetzt gemacht. Aber als Grundlage habe ich nicht das heutige Datum verwendet, sondern das was im Kalender angezeigt wird. Ansonsten würde die Auswahlliste jedes Mal den Januar anzeigen oder das Jahr 2022.Tommy hat geschrieben:Das mit dem Jahr finde ich OK - vielleicht sollte man das automatisieren - also heute -10 und +10 Jahre.
Code: Alles auswählen
/* BEGINN EDIT Tommy min-content nicht am Firefox
div#formblock {
padding: 15px 10px 10px 10px;
width: min-content;
min-width: 330px;
max-width: 660px;
height: fit-content;
min-height: 120px;
resize: both;
overflow-x: hidden;
overscroll-behavior: contain;
}
*/
div#formblock {
padding: 15px 10px 10px 10px;
width: fit-content;
min-width: 330px;
max-width: 660px;
height: fit-content;
min-height: 120px;
resize: both;
overflow-x: hidden;
}
/*ENDE EDIT Tommy #formblock */