Basic functionality

default.css

@@ -0,0 +1,490 @@
+/*
+This file could be used under both CC-BY-SA 4.0 or at your chosing GNU GPLv3 or any later version
+*/
+
+html {background-color: #353849;
+      background-image: url("/pictures/new_pattern.jpg");
+      background-size: cover;
+      background-attachment: fixed;
+     }
+}
+								       
+
+
+* {
+    
+    font-size: 15px;
+    list-style-type: none;
+
+}
+
+body{
+    color: #FFFFFF;
+    font-family:"Sans";
+
+    margin-top: 5%;
+    margin-bottom: 5%;
+    margin-right: 5%;
+    margin-left: 5%;
+}
+
+/* @font-face { */
+/*   font-family: "Open-Sans-Extrabold" Open Sans; */
+/*   /\*src: url(/font);*\/ */
+/* } */
+
+pre {
+    /*background: #a89984;*/
+    border: 10px solid #928374;
+    border-radius: 10px;
+    /*padding: 1em;*/
+    /*margin: 1em;*/
+    white-space: pre-wrap;
+}
+
+table td {
+    border-style:hidden;
+    padding: 50 50;
+}
+
+h1 {
+    font-size: 30px;
+    color: #ffb800;
+    text-shadow: 2px 2px 4px rgba(0,0,0, 0.3);
+}
+
+h2 {
+    font-size: 25px;
+    color: #FFFFFF;
+}
+
+h3 {
+    font-size: 15px;
+    color: #dda800;
+}
+
+code {
+	background-color: #000000;
+	/*border: 5px solid #928374;*/
+	border-radius: 5px;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+}
+
+ul li {
+    list-style: inside circle;
+    display:list-item;
+}
+
+table {
+  border-collapse: collapse;
+  border: 2px solid #7c6f64;
+} 
+
+th,td {
+  border: 2px solid #7c6f64;
+}
+
+a {
+    color: #ffb800;
+    text-decoration: none;
+
+    
+}
+
+a:hover {
+    color: #FFFFFF;
+    text-decoration: none;
+}
+
+
+
+img {
+    max-width: 70%;
+    height: auto;
+    border-radius:14px;
+}
+
+.video_frame {
+    
+    
+    border-radius:30px;
+    border: 10px solid #ffb800;
+}
+video {    
+	   border-radius:20px;}
+
+
+
+input[type=text] {
+  padding: 12px 20px;
+  margin: 8px 0;
+  box-sizing: border-box;
+  border: 0px solid black;
+  background-color: #b058c6;
+  color: #311a46;
+  font-weight: bold;
+  box-shadow: 2px 2px 4px rgba(0,0,0, 0.3);
+}
+button, .button, select {
+    color: #ffb800;
+    padding: 5px 20;
+    margin: 8px 5px;
+    /* box-sizing: border-box; */
+    /* border: 0px solid black; */
+
+    
+    
+    word-break: break-all;
+    display: inline-block;
+    
+    /* background-color: rgba(18, 83,140, 0.7); */
+    
+    background-color: #353849;
+    border: 0px solid #ffb800;
+    color: #FFFFFF;
+    font-weight: bold;
+    border-radius: 25px;
+    box-shadow: 2px 2px 4px rgba(0,0,0, 0.3);
+}
+
+.flexity {
+
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+	
+
+}
+
+.login_fixed {
+    position: fixed;
+    right:10;
+    top:10;
+}
+
+sup {
+    background-color: #FF6600;
+    border-radius: 12px;
+    padding: 3px 3px 3px 3px;
+    margin: 5px;
+    
+}
+
+.graph_line {
+    position: absolute;
+    background-color: #ffb800;
+    height: 80%;
+    margin-top: 20%;
+    width: 30px;
+    border-radius: 25px;
+}
+
+.graph_line:hover {
+    background-color: white;
+}
+
+.article_box {
+    color: #ffb800;
+    padding: 5px 20;
+    margin: 8px 5px;
+    /* box-sizing: border-box; */
+    /* border: 0px solid black; */
+
+    max-width:300px;
+    vertical-align: top;
+    
+    word-break: break-word;
+    display: inline-block;
+    
+    /* background-color: rgba(18, 83,140, 0.7); */
+    background-color: rgba(53,56,73, 0.95);
+    backdrop-filter: blur(10px);
+    color: #FFFFFF;
+    border-radius: 25px;
+    box-shadow: 2px 2px 4px rgba(0,0,0, 0.3);}
+
+.quote {
+    background-color: rgba(53,56,73, 0.99);
+    backdrop-filter: blur(10px);
+    padding: 10px 20px;
+    margin: 8px 0;
+    border-radius: 25px;
+    box-shadow: 2px 2px 4px rgba(0,0,0, 0.3);
+}
+
+.toot {
+     color: #ffb800;
+    padding: 5px 20;
+    margin: 8px 5px;
+    /* box-sizing: border-box; */
+    /* border: 0px solid black; */
+
+
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    
+    display: inline-block;
+    
+    /* background-color: rgba(18, 83,140, 0.7); */
+    background-color: rgba(53,56,73, 0.95);
+    backdrop-filter: blur(30px);
+    border: 0px solid #ffb800;
+    color: #FFFFFF;
+    box-shadow: 2px 2px 4px rgba(0,0,0, 0.3);
+
+    border-radius: 25px;
+    }
+.button > img {background-color: rgba(53,56,73, 0);}
+.button {    line-height: 3 }
+/* summary { */
+
+/*     color: #ffb800; */
+/*     padding: 5px 20; */
+/*     margin: 8px 5px; */
+/*     /\* box-sizing: border-box; *\/ */
+/*     /\* border: 0px solid black; *\/ */
+
+/*     word-break: break-all; */
+/*     display: inline-block; */
+    
+/*     /\* background-color: rgba(18, 83,140, 0.7); *\/ */
+/*     background-color: #353849; */
+/*     border: 5px solid #ffb800; */
+/*     color: #FFFFFF; */
+/*     font-weight: bold; */
+/*     border-radius: 25px; */
+/*     background-image: url("/icon/closed"); */
+/*     background-repeat: no-repeat; */
+/*     background-position: center left; */
+/*     padding-left: 40px; */
+
+
+/* } */
+
+.in_scene_link {
+    background-color: rgba(18, 83,140, 0.7);
+    color: #FFFFFF;
+    border-radius: 25px;
+    padding-left: 5px;
+    padding-right: 5px;
+    font-weight: bold;
+}
+
+
+.vcschekbox_checked {
+    padding: 5px 12px;
+    margin: 8px 0;
+    /* box-sizing: border-box; */
+    border: 0px solid black;
+
+    word-break: break-all;
+    display: inline-block;
+    
+    background-color: rgba(18, 83,140, 0.7);
+    color: #FFFFFF;
+    font-weight: bold;
+    background-image: url("/icon/checked");
+    background-repeat: no-repeat;
+    background-position: center left;
+    padding-left: 40px;
+    border-radius: 25px;
+}
+
+.vcschekbox_unchecked {
+    padding: 5px 12px;
+    margin: 8px 0;
+    /* box-sizing: border-box; */
+    border: 0px solid black;
+
+    word-break: break-all;
+    display: inline-block;
+    
+    background-color: rgba(18, 83,140, 0.7);
+    color: #FFFFFF;
+    font-weight: bold;
+    background-image: url("/icon/unchecked");
+    background-repeat: no-repeat;
+    background-position: center left;
+    padding-left: 40px;
+    border-radius: 25px;
+}
+
+.vcschekbox_comment {
+    padding: 5px 12px;
+    margin: 8px 0;
+    /* box-sizing: border-box; */
+    border: 0px solid black;
+
+    word-break: break-all;
+    display: inline-block;
+    
+    background-color: rgba(0, 0,0, 0.5);
+    color: #FFFFFF;
+    font-weight: bold;
+    border-radius: 25px;
+}
+
+/* details[open] summary { */
+    
+/*     color: #FFFFFF; */
+/*     font-weight: bold; */
+/*     background-image: url("/icon/open"); */
+/*     background-repeat: no-repeat; */
+/*     background-position: center left; */
+/*     padding-left: 40px; */
+}
+summary:hover, summary:hover > h1 {
+    color: white;
+    cursor: pointer;
+    background-color: #4e526b;
+}
+button:hover, input:hover, button:focus, input:focus, .button:hover, .button:focus  {
+    /**background-color: #4e526b;**/
+    color: white;
+    box-shadow: 4px 4px 4px rgba(0,0,0, 0.5);
+}
+
+hr {
+    border-top: 1px solid #b058c6;
+}
+  
+p {
+    margin-right: 5%;
+    margin-left: 5%;
+}
+
+.searchbar {
+      width: 90%;
+      height: 70;
+      position: fixed;
+      top: 0;
+      margin-top: 1%;
+      left: 5%;
+}
+
+.side_found { margin-top: 100}
+
+
+
+
+/*
+If a screen is at least 1024 pixels wide, we do some more things.
+*/
+
+@media screen and (min-width: 950px) {
+ 
+    .column {width:50%}
+    .searchbar {
+	width: 35%;}
+ 
+
+    .scenes_section {
+	position: absolute;
+	left:20%;
+	top:1550;
+	width:15%;
+    }
+    .middle_section {
+	position: absolute;
+	left:20%;
+	top:1550;
+	width:39%;
+    }
+    .checklist_section {
+	position: absolute;
+	left:60%;
+	top:1550;
+	width:20%;
+    }
+    
+    .middle_section_article {
+	position: absolute;
+	left:20%;
+	top:750;
+	width:39%;
+    }
+    .checklist_section_article {
+	position: absolute;
+	left:60%;
+	top:750;
+	width:20%;
+    }
+
+    body{
+	color: #FFFFFF;
+	font-family:"Sans";
+	
+	/* margin-top: 5%; */
+	/* margin-bottom: 5%; */
+	/* margin-right: 20%; */
+	/* margin-left: 20%; */
+    }
+
+
+}
+
+
+
+.shot_1, .shot_2, .shot_3, .shot_4, .shot_5 {
+    color: #FFFFFF;
+    font-weight: bold;
+    border-radius: 25px;
+}
+
+.shot_1 {background-color:  #ff783a;}
+.shot_2 {background-color:  #abbf28;}
+.shot_3 {background-color:  #de80d1;}
+.shot_4 {background-color:  #638fff;}
+.shot_5 {background-color:  #00bd73;}
+
+#background_video {
+    position: fixed;
+    object-fit: cover;
+    right: 0;
+    bottom: 0;
+    min-width: 100%;
+    min-height: 100%;
+    z-index:-1;
+}
+
+.dark_box {
+    background-color: rgba(53,56,73, 0.95);
+    backdrop-filter: blur(10px);
+    padding: 10px 20px;
+    margin: 8px 0;
+    border-radius: 25px;
+    box-shadow: 2px 2px 4px rgba(0,0,0, 0.2);
+}
+
+.frase {
+    background-color:  rgba(0, 0,0, 0.5);
+    padding: 1%;
+    position: static;
+    margin-top: 5px;
+    margin-left:30%;
+    width: 40%;
+    color: #FFFFFF;
+    font-weight: bold;
+    border-radius: 25px;}
+
+/* prgoress bar theme */
+
+.back_progress {background-color: #45b3d1;
+                width: 100%;
+                height: 14;
+		border-radius: 7px}
+.front_progress {background-color: #FFFFFF;
+		 height: 14;
+		 border-radius:7px}
+.middle_progress {background-color: #000000;
+		  height: 14;
+		  border-radius:7px}
+.moriasrace_banner {position: static;
+		    top: 100;
+		    left: 20%;}
+
+}