wip: programme

src/thsf/static/css/planning.css

@@ -9,23 +9,28 @@
 
 .slot {
   display: flex;
+  flex: 1;
+  justify-content: center;
+  text-align: center;
   flex-direction: row;
-  align-items: flex-start;
-  align-content: flex-start;
-  margin: 1em;
+  margin: 0.3em;
   font-size: 2em;
   width: 22em;
 }
 
+.slot_info {
+  display: flex;
+  flex-direction: row;
+  align-content: flex-start;
+}
+
 .metadata, .data {
   display: flex;
   flex-direction: column;
   justify-content: start;
-  align-items: flex-start;
   align-content: flex-start;
   padding: 0.5em;
   border-style: solid;
-  height: 8em;
 }
 
 .metadata {
@@ -33,9 +38,10 @@
   border-radius: 10px 0 0 10px;
   background-color: var(--alt-bg-color);
   color: var(--main-color);
-  border-color: var(--main-color);
+  border-color: var(--alt-bg-color);
   font-family: pfdintextcompprothin;
   border-width: 1px 0 0px 1px;
+  text-align: left;
 }
 
 .data {
@@ -45,18 +51,18 @@
   border-color: var(--main-color);
   border-width: 1px 1px 1px 0;
   font-family: pfdintextcompprothin;
-  overflow-y: auto;
+  text-align: left;
 }
 
-.metadata > .button {
+.metadata > .slot_info > .button {
   font-size: 1em;
-  margin-bottom: 1em;
+  margin-right: 0.3em;
 }
 
 .title {
   font-family: pfdintextcompprothin;
   font-weight: bold;
-  margin-bottom: 0.2em;
+  margin-bottom: 0.5em;
 }
 
 .speakers {
@@ -100,7 +106,8 @@
   padding: 0.2em;
 }
 
-.speaker_details > .details > img, .data > .abstract > img {
+.speaker_details > .details > img,
+.abstract > img {
   max-width: 200px;
   max-height: 200px;
   float: left;
@@ -112,15 +119,16 @@
   font-size: 0.5em;
 }
 
-.data > .abstract > p {
+.abstract > p {
   text-align: justify;
-  font-size: 0.8em;
+  font-size: 1em;
 }
 
 .data > .details {
   font-family: pfdintextcompprothin;
   font-weight: bold;
   margin-bottom: 0.2em;
+  font-size: 0.8em;
 }
 
 .data > .resources > .resource > a {

src/thsf/static/css/tooltip.css

@@ -1,9 +1,10 @@
-.tooltip, .planning_tooltip {
+.tooltip,
+.planning_tooltip,
+.slot_tooltip {
   position: relative;
   display: inline-block;
 }
 
-
 .tooltip .tooltiptext {
   visibility: hidden;
   background-color: var(--main-color);
@@ -13,29 +14,13 @@
   padding: 5px 0;
   position: absolute;
   z-index: 1;
-  bottom: 125%;
-  left: 50%;
-  margin-left: -60px;
+  bottom: 0;
+  left: 0;
   opacity: 0;
+  transform: translateX(-25%) translateY(-2em);
   transition: opacity 1s;
 }
 
-.tooltip .tooltiptext::after, .planning_tooltip .planning_tooltiptext::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  margin-left: -5px;
-  border-width: 5px;
-}
-
-.tooltip:hover .tooltiptext, .planning_tooltip:hover .planning_tooltiptext  {
-  visibility: visible;
-  opacity: 1;
-  font-size: 0.7em;
-  padding: 0.2em;
-}
-
 .planning_tooltip .planning_tooltiptext {
   visibility: hidden;
   background-color: var(--main-color);
@@ -48,6 +33,53 @@
   bottom: 0;
   left: 0;
   opacity: 0;
-  transform: translateX(2em) translateY(-3em);
+  transform: translateX(2em);
   transition: opacity 1s;
 }
+
+.slot_tooltip .slot_tooltiptext {
+  visibility: hidden;
+  background-color: var(--main-color);
+  color: var(--alt-main-color);
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  transform: translateX(2em) translateY(50%);
+  transition: opacity 1s;
+}
+
+.slot_tooltip .slot_tooltiptext {
+  font-size: 1em;
+  width: 26em;
+  padding: 1em;
+  border-style: solid;
+  border-color: var(--alt-main-color);
+  border-width: 1px;
+}
+
+.tooltip .tooltiptext::after,
+.planning_tooltip .planning_tooltiptext::after,
+.slot_tooltip .slot_tooltiptext::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+}
+
+.tooltip:hover .tooltiptext,
+.planning_tooltip:hover .planning_tooltiptext,
+.slot_tooltip:hover .slot_tooltiptext {
+  visibility: visible;
+  opacity: 1;
+  font-size: 0.7em;
+  padding: 0.2em;
+}
+
+