AvatarFree/Public/css/style.css

/*
 * Copyright (c) 2016, 2024, 5 Mode
 * All rights reserved.
 * 
 * This file is part of Avatar Free.
 * 
 * Avatar Free is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 * 
 * Avatar Free is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.  
 * 
 * You should have received a copy of the GNU General Public License
 * along with Avatar Free. If not, see <https://www.gnu.org/licenses/>.
 * config.inc
 * 
 * Avatar Free style sheet.
 *
 * @author Daniele Bonini <my25mb@aol.com>
 * @copyrights (c) 2021, 2024, 5 Mode 
 */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
  margin-top:20px;
  /*background: #C2DBF2;*/
  background-image:url('/res/bg1.jpg');
}
#appMenuIco {
  float:left; 
  position:relative; 
  top:1px; 
  left:-20px;
  cursor: pointer; 
}
.app-Menu {
  float:left; 
  position:relative; 
  width: 150px; 
  top:+43px; 
  left:+22px; 
  background:#313431; 
  cursor: pointer; 
}
.buttondisplaylist {
  float:right; 
  position:relative; 
  left:-10px; 
  top:+2px; 
  background-color:transparent; 
  border:0px;
}
.element {
  width:80%; 
  margin:auto; 
  background-color:#FFFFFF; 
  border: 3px solid gray; 
  height:fit-content;
  margin-bottom:0px;
}
.element-ghost {
  width:80%; 
  margin:auto; 
  background-color:#FFFFFF; 
  border: 3px dashed lightgray; 
  height:fit-content; 
  margin-bottom:20px;
}
.eltxtfield0 {
  width:98%; 
  font-size: 34px; 
  border-radius:5px; 
  border:1px solid darkgray;
}
.eltxtfield {
  width:98%; 
  font-size: 34px; 
  border-radius:5px; 
  border:1px solid darkgray;
  border-right:0px;
  color: #444;
}
.eltxtarea {
  padding-left:20px; 
  padding-right:20px;
}
.eltitle {
  width:100%;
  height:33px; 
  background-color:gray;
  color:#FFFFFF;
}
.eltitleghost {
  width:100%;
  height:33px; 
  background-color:lightgray;
  color:#FFFFFF;
}
#fileList {
  position:absolute; 
  top:-0px; 
  left:-5px;
  width:450px; 
  height:482px; 
  display:none;
}
#footerCont {
  position: fixed; 
  top: 2000px; 
  left:-10px;
  width: 102%; 
  border: 1px solid #C2DBF2; 
  padding: 7px; 
  background: white; 
  opacity: 0.3;
  color:white; 
  font-family: Arial, Sans, Verdana;
  font-size: 12px; 
  text-align: center; 
  z-index: 99998;
}
#footer {
  position: fixed;
  float: right;
  top: 2000px; 
  left:-10px;
  width: 100%; 
  border: 0px solid #C2DBF2; 
  padding: 7px; 
  opacity: 1.0;
  color:black; 
  font-family: Arial, Sans, Verdana;
  font-size: 12px; 
  font-weight: 400;
  text-align: right; 
  z-index: 99999;
}
#notBoughties {
  display:none;
}
.lanelist {
  margin-top:12px;
  margin-right:38px;
  margin-left:38px;
} 
.lanelistcyan {
  background-color: cyan;
}
.lanelistorange {
  background-color: orange;
} 
.lanelistwhite {
  background-color: white;
}  
.lanelistred {
  background-color: #f87552;
}
.lanelistyellow {
  background-color: yellow; 
}
.lanelistgray {
  background-color: darkgray; 
}
.lanelistgreen {
  background-color: green; 
}
.lanelistblack {
  background-color: black; 
}
.lanelistblue {
  background-color: blue; 
}
.lanelistlightgreen {
  background-color: lightgreen; 
}
.lanelistyellow {
  background-color: yellow; 
}
.listcont {
  position:relative;
  width:450px; 
  margin-top:20px; 
/*  margin-left:1.2%; 
  margin-bottom:80px;*/
  margin:auto;
}
.listcontr {
  float:left; 
  width:30%; 
  margin-top:20px; 
  margin-left:1.2%; 
  margin-bottom:80px;
}
.list {
  float:left; 
  width:100%; 
  padding:5px; 
  text-align:center; 
  margin-bottom:20px;
}
.listred {
  background-color: #f87552;
}
.listdarkred {
  background-color: darkred;
}
.listred-title {
  /*color:#00417c;*/
  color: #666666;
}  
.listyellow {
  background-color: yellow; 
}
.listyellow-title {
  /*color:#00417c;*/
  color: #666666;
}  
.listgray {
  background-color: darkgray; 
}
.listgray-title {
  color:#444;
}  
.listgreen {
  background-color: lightgreen; 
}
.listgreen-title {
  color: greenyellow;
}  
.listblack {
  background-color: black; 
}
.listwhite-title {
  color: #FFFFFF;
}  
.listblue {
  background-color: blue; 
}
.listcyan-title {
  color: cyan;
}
.listorange-title {
  color: orange;
}
.listlightgreen {
  background-color: lightgreen; 
}
.listdarkgreen-title {
  color: darkgreen;
}
.listyellow {
  background-color: yellow; 
}
.listred-title {
  color: red;
}  
.listel {
  width:100%; 
  height:fit-content; 
  text-align:center;
  padding-top:20px;
  padding-bottom:50px;
}
.no-drop {
  cursor: not-allowed;
}  
.no-dropzone {
  cursor: not-allowed;
}
#pagetitle {
  float:left; 
  width:100%;
  height:70px;
  padding:5px; 
  text-align:center; 
  margin-bottom:20px;
  background-color:#3366ff;
  color:#FFFFFF;  
  opacity:0.8;
  font-family:'Indie Flower';
  font-size:30px;
  font-style:italic;
  font-weight:900;
  position:relative;
  top:-60px;
  /*color:#5e383a;*/
}
.prodel {
  text-align:left;
  padding:36px;
  padding-top:7px;
  padding-right:16px;
  color:#444;
  font-weight:900;
}
.prodlist {
  padding-top:6px;
}
.prodname {
  width:45%;
  float:left;
  padding-top:8px;
  border-bottom:1px dotted darkgray;
}
.prodprice {
  width:20%;
  float:left;
  padding-top:8px;
}
.prodaction {
  width:17%;
  float:left;
  cursor:pointer;
  text-align:center;
  margin:auto;
}
.prodactionimg {
  position:relative;
  left:+10px;
  margin-bottom:7px;
  width:42px;
}
#carties {
  display: none;
}
#results {
  display: none;
}
.titlelane {
  text-align:left;
  margin-bottom:8px;
  font-weight:900;
  text-align:left;
}
.titlelanecyan {
  color:darkcyan;
}
.titlelanered {
  color:darkred;
}
.titlelaneblack {
  color:black;
}
.titlelanered {
  color: red;
}  
.titlelaneyellow {
  color: yellow;
}  
.titlelanegray {
  color: #444;
}  
.titlelanegreen {
  color: greenyellow;
}  
.titlelanewhite {
  color: #FFFFFF;
}  
.titlelaneorange {
  color: orange;
}
.titlelanedarkgreen {
  color: darkgreen;
}