Musicing/Public/css/style.css

/*
 * Copyright (c) 2016, 2024, 5 Mode
 * All rights reserved.
 * 
 * This file is part of Musicing.
 * 
 * Musicing 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.
 * 
 * Musicing 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 Musicing. If not, see <https://www.gnu.org/licenses/>.
 * config.inc
 * 
 * Musicing 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; 
}
#AFHint {
  width:100%;
  height:fit-content;
  position:fixed;
  top:-5px;
  background:yellow;
  color:darkorange;
  text-align:center;
  cursor:pointer;
  display:inline;
  z-index:99999;
}
#avatarLogo {
  float:left;
  width:255px;
  height:255px;
}
#avatarName {
  width:250px;
  height:255px;
  padding-top:122px;
  float:left;
  border:0px solid yellow;
  vertical-align:middle;
}
#blog {
  height:fit-content;
  float:left;
/*margin:6%;
  margin-top:130px;
  margin-bottom:5px;
  width:90%;*/
  margin: 0 0 0 0;
  width:100%;
  font-size:15px;
  font-family:'Press Start 2P';
  color:#000000;
  background-image: url('/res/notation2.png');
  background-repeat: repeat;  
}
.blog-content {
  /*width:100%;*/
  height: 33%;
  float:left;
  border:1px solid transparent;
  border-radius:4px;
  color:#000000;
}
.blog-entry {
  width:5%;
  height:80px;
  margin-bottom: 0px;
  min-height: 80px;
  background-color: #dbdbdb;
  border: 1px solid black;
  /*padding:30px;*/
  text-align: left;
  font-size: 9px;
  padding:15px;
  white-space: initial;
  overflow: hidden;
  background-image:url('/res/dogborg.png'); 
  background-repeat: no-repeat; 
  background-size: 75px; 
  background-position: top 10px right 10px;
  visibility: hidden;
}
.buttondisplaylist {
  float:right; 
  position:relative; 
  left:-10px; 
  top:+2px; 
  background-color:transparent; 
  border:0px;
}
#cbLang {
  margin-left:22px;
  font-size:10px;
}
#cudoz {
  width:250px;
  height:255px;
  padding-top:116px;
  float:left;border:0px solid green;
  vertical-align:middle;
}
.cudoz-entry {
  float:left;
  width:46px
}
.cv-entry {
  float:left;
  width:64px
}
.cv-options-table {
  /*width: 140px;*/
  padding: 10px;
}
.cv-options-td {
  color: black;  
  font-size: 12px; 
  /*padding-left: 8px;*/
  padding-left: 18px;
  vertical-align: middle;
}
#cvs {
  float:right;
  border:3px solid darkgray;
  border-radius:4px;
  padding:4px;
  background:#dadada;
  font-size:20px;
  font-family:'Press Start 2P';
  font-weight:900;
}
.dragover {
  width:100%;
  height:100%;
}
.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;
}
.file-entry {
  height:fit-content;
  min-height:120px;
  float:left;
  width:fit-content;
  border:0px solid green;
  padding:10px;
  text-align:center;
}
.file-ico {
  width:64px;
  border:0px solid gray;
}
#fileList {
  position:absolute; 
  top:-0px; 
  left:-5px;
  width:450px; 
  height:482px; 
  display:none;
}
#fireupload {
  position:absolute;
  width:255px;
  height:255px;
  border-radius: 90%; 
  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,Vardana;
  font-size: 12px; 
  text-align: center; 
  z-index: 99998;
  display:none;
}
#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,Vardana;
  font-size: 12px; 
  font-weight: 400;
  text-align: right; 
  z-index: 99999;
}
#footer1 {
  position: fixed;
  float: left;
  top: 2000px; 
  left:-10px;
  width: 80px; 
  border: 0px solid #C2DBF2; 
  padding: 7px; 
  opacity: 1.0;
  color:black; 
  font-family: Arial,Sans,Vardana;
  font-size: 12px; 
  font-weight: 400;
  text-align: right; 
  z-index: 99995;
}
#footer2 {
  position: fixed;
  float: right;
  top: 2000px; 
  left:-10px;
  width: 450px; 
  border: 0px solid #C2DBF2; 
  padding: 7px; 
  opacity: 1.0;
  color:black; 
  font-family: Arial,Sans,Vardana;
  font-size: 12px; 
  font-weight: 400;
  text-align: right; 
  z-index: 99995;
}
#friends {
  float:left;
  margin:6%;
  margin-top:50px;
  width:90%;
  font-size:15px;
  font-family:Arial,Sans,Verdana;
  color:#000000;
  background:#dadada
}
.friends-content {
  width:100%;
  float:left;
  border:3px solid transparent;
  border-radius:4px;
  color:#000000;
  padding-top:10px;
  text-align:center;
}
.friend-entry {
  height:fit-content;
  min-height:120px;
  float:left;
  width:fit-content;
  border:0px solid green;
  padding:10px;
  text-align:center;
}
.friend-ico {
  width:64px;
  border:0px solid gray;
}
#gallery {
  float:left;
  margin:6%;
  margin-top:0px;
  margin-bottom:5px;
  width:90%;
  font-size:15px;
  font-family:Arial,Sans,Verdana;
  color:#000000;
  background:#C2DBF2;
}
.gallery-content {
  width:100%;
  float:left;
  border:3px solid darkgray;
  border-radius:4px;
  color:#000000;
}
.gal-options-table {
  /*width: 140px;*/
  padding: 10px;
}
.gal-options-td {
  color: black;  
  font-size: 12px; 
  /*padding-left: 8px;*/
  padding-left: 18px;
  vertical-align: middle;
}
#hashMe {
  position:relative; 
  left:-2px; 
  top:+5px; 
  font-size:18px; 
  font-weight:900; 
  color:#000000;
}
.header {
  height: 24px; 
}
.image-entry {
  height:fit-content;
  min-height:120px;
  float:left;
  width:fit-content;
  border:0px solid green;
  padding:10px;
  text-align:center;
}
.image-ico {
  width:64px;
  border:1px solid gray;
}
#mynetworkTitle {
  font-family:'Press Start 2P';
  width:fit-content;
  margin:auto;
  color:#245269;
}
#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;
}
#magicjar1 {
  float:left;
  margin:6%;
  margin-top:0px;
  margin-bottom:5px;
  width:90%;
  font-size:15px;
  font-family:Arial,Sans,Verdana;
  color:#000000;
  background:#f7ecb5;
}
.magicjar1 {
  float:left;
  width:120px;
  height:120px;
  background-size:120px 120px;
  cursor:pointer;
}
.magicjar1-content {
  width:100%;
  float:left;
  border:3px solid darkgray;
  border-radius:4px;
  color:#000000;
}
.magicjar2 {
  float:left;
  width:120px;
  height:120px;
  background-size:120px 120px;
  cursor:pointer;
}
#magicjar2 {
  float:left;
  margin:6%;
  margin-top:0px;
  margin-bottom:5px;
  width:90%;
  font-size:15px;
  font-family:Arial,Sans,Verdana;
  color:#000000;
  background:#f7ecb5;
}
.magicjar2-content {
  width:100%;
  float:left;
  border:3px solid darkgray;
  border-radius:4px;
  color:#000000;
}
.magicjar3 {
  float:left;
  width:120px;
  height:120px;
  background-size:120px 120px;
  cursor:pointer;
}
#magicjar3 {
  float:left;
  margin:6%;
  margin-top:0px;
  margin-bottom:5px;
  width:90%;
  font-size:15px;
  font-family:Arial,Sans,Verdana;
  color:#000000;
  background:#f7ecb5;
}
.magicjar3-content {
  width:100%;
  float:left;
  border:3px solid darkgray;
  border-radius:4px;
  color:#000000;
}
.magicjar-num {
  float:right;
  margin-left:99.9%;
  margin-right:2px;
  background:yellow;
  color:darkorange;
}
.no-drop {
  cursor: not-allowed;
}  
.no-dropzone {
  cursor: not-allowed;
}
#originsDisplay {
  float:left;
  position:fixed;
  top:680px;
  left:20px;
  width:275px;
  height:120px;
  font-family: Monospace, Verdana, Serif;
  font-size: 14px;
  background-color: #020401;
  border: 3px solid lightgray;
  text-align:left;
  color: #FFFFFF;
  white-space:nowrap; 
  font-weight:900;
  padding:10px;
  padding-top:4px;
  z-index:99999;
  display:none;
}
.originLabel {
  color: #7bca2e;
  font-weight:900;
}
#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;*/
}
#Password {
  font-size:18px;  
  background:transparent; 
  width: 60%; 
  border-radius:3px; 
  font-weight:900;
}
#passworddisplay {
  float:left;
  position:fixed;
  top:680px;
  left:50px;
  width:255px;
  height:120px;
  background:#434045;
  text-align:left;
  white-space:nowrap; 
  font-family:Arial,Sans,Verdana; 
  color:#000000; 
  font-weight:900;
  z-index:99999;
}
#picavatar {
  position:relative;
  width:255px;
  height:255px;
  top:-4px;
  left:-8px;
  border-radius: 90%; 
  display:none;
}
.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;
}
#Salt {
  position:relative; 
  top:+5px; 
  font-size:18px; 
  background:transparent;
  width: 90%; 
  border-radius:3px; 
  font-weight:900;
}
.settingson {
  float:left;
  width:120px;
  height:150px;
  border:0px solid black;
  background:url(/res/settingsoff.png);
  background-size:cover;
  cursor:pointer;
  display:none;
}
.settingsoff {
  float:left;
  width:120px;
  height:150px;
  border:0px solid black;
  background:url(/res/settingson.png);
  background-size:cover;
  cursor:pointer;
}
#title {
  position:relative;
  top:20px;
  left:50px;
  width:100%;
  float:left;
  font-size:25px;
  font-family:'Press Start 2P';
  border:0px solid blue;
}
.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;
}
.tools {
  position:fixed;
  top:12px;
  width:120px;
  height:620px;
  display:none;
}