@aladas-org/cryptocalc/www/css/style.css

Cryptocurrency wallet generator

/* ================================================================================= */
/* =================================== style.css =================================== */
/* ================================================================================= */
/* https://www.w3schools.com/css/css3_variables.asp */
:root {
  --SeedTab_color:       #FFFFF0; /*#FFFFF0;*/
  --WalletTab_color:     #F1FFFF; /*#F1FFFF;*/
  --TabLinkHover_color:  #C0FEC0; /*#C0FEC0;*/
}

.Hidden { visibility: hidden;  display: none; }
.Shown  { visibility: visible; display: block; }

html, .outer, .inner {
	height:           100%;
	width:            100%;
	margin:           0;
	font-family:      Arial, Helvetica, sans-serif;
} 

html, body , .outer, .inner {
   height:          100%;
   width:           100%;
   margin:          0;
   font-family:     Arial, Helvetica, sans-serif;
   overflow:        hidden;
} 

.ui-dialog {
  /*top:            0px;*/
  position:         relative;
  background-color: red;
  height:           14px;
  font-size:        18px;
  font-weight:      normal;
  margin:           2px;
  padding:          .2em;
  border:           2px solid black;
}

.ui-widget-content
{
   border: 2px solid black;
   background-color: #F2F2F2;
}

.ui-dialog-titlebar {
  top:              0px;
  background:       lightblue;
  background-color: lightblue;
  height:           20px;
  font-size:        16px;
  font-weight:      bold;
  margin:           0px;
  padding:          10x;
}

hr {
    border:           none;
    height:           0.5px;
    background-color: #333;  /* Modern Browsers */
}

.ReadOnlyField {
	background-color: #e9e9e9;
}

.SimpleWalletLabel {
	font-size:     13px;
}

.HorizontalBar {
	border:        none;
	height:        1px;
}

.SaveButton {
  font-size:       18px;
  background:      yellow;
  padding-top:     3px;
  padding-left:    20px;
  padding-right:   20px;
}

.RestoreButton {
  font-size:       18px;
  background:      lightblue;
  padding-top:     3px;
  padding-left:    8px;
  padding-right:   8px;
}

.ApplyButton {
  font-size:       20px;
  font-weight:     bold;
  background:      lightgreen;
  padding-top:     3px;
  padding-left:    20px;
  padding-right:   20px;
}

.CancelButton {
  font-size:       18px;
  background:      lightgrey;
  padding-top:     3px;
  padding-left:    20px;
  padding-right:   20px;
}

.SmallButton, .CopyButton {
	display:           flex;
	align-items: 	   center;
	padding:           8px;
	width:             22px;
	height:            22px;
	margin-left:       4px;
	padding-left:      2px;
	margin-top:        1px;
}

.UserMoveButton{
	font-family:       Arial, Helvetica, sans-serif;
	font-size:         15px;
	background:        lightblue;
	border-radius:     3px;	
	text-align:        center;
	padding-left:      10px;
	padding-right:     13px;
}

.PasswordFielWithApplyButton {
	font-family:       Arial, Helvetica, sans-serif;
	width:             79.5%;
	max-width:         79.5%;
}

.PasswordFielWithoutApplyButton {
	font-family:       Arial, Helvetica, sans-serif;
	/* width:             85.5%; */
	width:             82%;
	max-width:         85.5%;
}

.MouseMoveInfo{
	font-family:       Arial, Helvetica, sans-serif;
	font-size:         14px;
}

#internet_connection_label_id {
	font-weight: bold;
	position:    absolute; 
	left:        -50px;
    top:         5px; 
}

.RedLabel {
	color: red;
}

.GreenLabel {
	color: #3ABE3A;
}

#internet_connection_td_id {
	position: 	absolute; 
    top:   		0px; 
    right: 		7px
}

#password_label_id {
	margin-top: 5px ;
}

#bip32_passphrase_id {
	width:     86%; !important; 
    min-width: 86%; !important;	
}

#bip38_passphrase_id {
	width:     89%; !important; 
    min-width: 89%; !important;	
}

#bip38_passphrase_label_id {
	font-size:  14px;
	margin-top:  5px;
}

/* ==================== Bip32/38 Passphrase Strength ==================== */
html { 
	--bip38-progress-color: orange;
	--bip32-progress-color: orange;
}

progress[value].Bip38PassphraseStrength {
  --color:              var(--bip38-progress-color); /* bar color */  
  --background: 		#FFFFF0; 	                 /* the background color */

  -webkit-appearance: 	none;
  -moz-appearance: 		none;
  appearance: 			none;
  
  border: 				none;
 
  width: 				100% !important;  
  height: 				3px  !important;
  
  margin: 		    	0px 0px 5px 0px;
  box-shadow:			none;
  border-radius: 		0px;
  background: 			var(--background);
}

progress[value].Bip32PassphraseStrength {
  --color:              var(--bip32-progress-color);  /* bar color */
  --background: 		#FFFFF0;                /* the background color */

  -webkit-appearance: 	none;
  -moz-appearance: 		none;
  appearance: 			none;
  
  border: 				none;
 
  width: 				100% !important;  
  height: 				3px  !important;
  
  margin: 		    	0px 0px 5px 0px;
  box-shadow:			none;
  border-radius: 		0px;
  background: 			var(--background);
}

#bip38_passphrase_strength_container_id {
  width: 				98.5%;
  background: 			#FFFFF0;
  
  /*height:   		    5px !important;*/
  /*max-height:   		5px !important;*/
}

#bip32_passphrase_strength_container_id {
  width: 				98.5%;
  background: 			#FFFFF0;
  
  /*height:   		    5px !important;*/
  /*max-height:   		5px !important;*/
}

#bip38_passphrase_str_table_id {	
  width: 				100%;
  height:  			    5px !important;
  max-height:  			5px !important;  
  border-spacing: 		0px; 
  border-collapse:		collapse; 
  /* border:            1px solid black; */ 
}

#bip32_passphrase_str_table_id {	
  width: 				100%;
  border-spacing: 		0px; 
  border-collapse:		collapse; 
  /* border:            1px solid black; */ 
}

#bip38_passphrase_str_col_bar_id {
  left: 				0px;
  width: 				91%;
  height:  				5px !important;
  max-height:  			5px !important;
}

#bip32_passphrase_str_col_bar_id {
  left: 				0px;
  width: 				91%;
  height:  				5px !important;
  max-height:  			5px !important;
}

#bip38_passphrase_str_col_label_id {
  width: 				9%;
  background: 			#yellow;
  text-align: 			center;
  margin:               -50px 0px 0px 0px !important;
  padding: 		        0px 0px 0px 0px   !important;
}

#bip32_passphrase_str_col_label_id {
  width: 				9%;
  background: 			#yellow;
  text-align: 			center;
  margin:               -50px 0px 0px 0px !important;
  padding: 		        0px 0px 0px 0px   !important;
}

#bip38_passphrase_strength_label_id {
  width: 				100%;
  font-size:  			11px;
  height:  				5px !important;
  max-height:  			5px !important;
  margin:               0px 0px 30px 0px !important;
  padding: 		        0px 0px 0px 0px  !important;
}

#bip32_passphrase_strength_label_id {
  width: 				100%;
  font-size:  			11px;
  height:  				5px !important;
  max-height:  			5px !important;
  margin:               0px 0px 30px 0px !important;
  padding: 		        0px 0px 0px 0px  !important;
}

progress[value].Bip38PassphraseStrength::-webkit-progress-bar {
  border-radius: 		0px;
  background: 			var(--background);
  margin:               0px 0px 0px 0px  !important;
  padding: 		        0px 0px 0px 0px  !important;
}

progress[value].Bip32PassphraseStrength::-webkit-progress-bar {
  border-radius: 		0px;
  background: 			var(--background);
  margin:               0px 0px 0px 0px  !important;
  padding: 		        0px 0px 0px 0px  !important;
}

progress[value].Bip38PassphraseStrength::-webkit-progress-value {
  border-radius: 		0px;
  background: 			var(--color);
  margin:               0px 0px 0px 0px  !important;
  padding: 		        0px 0px 0px 0px  !important;
}

progress[value].Bip32PassphraseStrength::-webkit-progress-value {
  border-radius: 		0px;
  background: 			var(--color);
  margin:               0px 0px 0px 0px  !important;
  padding: 		        0px 0px 0px 0px  !important;
}

progress[value].Bip38PassphraseStrength::-moz-progress-bar {
  border-radius: 		0px;
  background: 			var(--color);
  margin:               0px 0px 0px -20px !important;
  padding: 		        0px 0px 0px 0px    !important;
}

progress[value].Bip32PassphraseStrength::-moz-progress-bar {
  border-radius: 		0px;
  background: 			var(--color);
  margin:               0px 0px 0px -20px !important;
  padding: 		        0px 0px 0px 0px   !important;
}
/* ==================== Bip32/38 Passphrase Strength */


#apply_password_btn_id {
	background-color:  lightblue;
}

.ValueSelector {
	width:         120px;
}

.LabelValueSelector
.EntropySelector {
	width:         80px;
}

.MnemonicsSelector {
	background-color:  lightred;	
	width:         80px;
	font-size:     14px;
}

.DerivationPathFieldAsLabel {
	background:        lightblue;	
	background-color:  lightblue;
	border:            none;
}

/* ================================= Tab pages ================================= */
/* https://www.w3schools.com/howto/howto_js_full_page_tabs.asp */
.SeedTabLayout {
	/*background-color: #FFFFF0;*/ 
	background-color: var(--SeedTab_color); 
	width:            100%; 
	height:           100%;
	min-height:       100%;
}

.WalletTabLayout {
	/*background-color: #F1FFFF;*/
	background-color: var(--WalletTab_color); 
	width:            100%; 
	height:           100%;
	min-height:       100%;
}

.tablink {
	/*background-color: #FFFFF0;*/ 
	background-color: var(--SeedTab_color);
	
	color:            black;
	/*float:     	  left;*/
	border:           none;
	outline:          none;
	cursor:           pointer;
	font-size:        17px;
	width:            25%;
	margin-left:      -2px;
	margin-right:     -3px;
}

#Seed { 
	/*background-color: #FFFFF0;*/ 
	background-color:  var(--SeedTab_color);
	height:            100%; 
}

#Wallet { 
    /*background-color: #F1FFFF;*/
	background-color:  var(--WalletTab_color); 
	height:            100%;
}

.EmptyTabLink { 
	background-color:  #FDFDFD; 
	width:             50%;
	min-width:         50%;
	margin-right:      0px;
}

#seed_tab_link_id {
    /*background-color: #FFFFF0;*/ 
	background-color:  var(--SeedTab_color);
}
#seed_tab_link_id:hover {
	/*background-color:  #C0FEC0;*/
	background-color:  var(--TabLinkHover_color); 
}

#wallet_tab_link_id {
	/*background-color: #F1FFFF;*/
	background-color:  var(--WalletTab_color); 
}
#wallet_tab_link_id:hover {
	/*background-color:  #C0FEC0;*/
	background-color:  var(--TabLinkHover_color); 
}

.ThreeBordersTabLink {
	border-top:        1px solid black;
	border-bottom:     1px solid #FFFFF0;
    border-right:      1px solid black; 
    border-left:       1px solid black;
}

.FourBordersTabLink {
	border-top:        1px solid black;
	border-bottom:     1px solid black;
    border-right:      1px solid black; 
    border-left:       1px solid black;
}

.EmptyTabLinkBorders {
	border-bottom:     1px solid black;
    border-left:       1px solid black;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
	color:             black;
	display:           none;
	/*padding: 2px 20px;*/
	/*height:            100%;*/
}
/* ================================= Tab pages */

.Button {
	font-size:         25x;
	font-weight:       500;
	height:            30px;
	margin-bottom:     50px;
}

.GenerateButton {
	background-color:  lightgreen;
	font-size:         19px;
	font-weight:       500;
	min-width:         200px;
	width:             200px;
	height:            30px;
	margin-bottom:     80px;
}

.RefreshButton {
	background-color:  lightblue;
	font-size:         19px;
	font-weight:       500;
	min-width:         200px;
	width:             200px;
	height:            30px;
	margin-bottom:     80px;
}

/* https://stackoverflow.com/questions/34439452/blinking-background-color-animation
*/
.BlinkingButton {
  /* width: 50px; */
  /* height: 50px; */
  -webkit-animation: REFRESH_ANIMATION 3s infinite; /* Safari 4+ */
  -moz-animation:    REFRESH_ANIMATION 3s infinite;    /* Fx 5+ */
  -o-animation:      REFRESH_ANIMATION 3s infinite;      /* Opera 12+ */
  animation:         REFRESH_ANIMATION 3s infinite;         /* IE 10+, Fx 29+ */
}

@-webkit-keyframes REFRESH_ANIMATION {
  0%, 49% {
    background-color: lightblue;
    border: 1px solid black;
  }
  50%, 100% {
    background-color: lightblue;
    border: 3px solid black;
  }
}

.WalletButton {
	background-color: #cefad0;
	height:           20px;
	margin-top:       -10px;
}

.WalletButtonLink {
	text-decoration: none;
}

.MarketcapButton {	
	height:      20px;
	margin-top:  -10px;
}

.CryptoshapeButton {	
	height:           20px;
	margin-top:      -10px;
	text-decoration: none;
}

.EntropyInput:invalid {
	color:  red;
}

#entropy_src_img_div_id {
	background-color:  white;
	border-top:        1px dashed black;
	border-bottom:     1px dashed black;
    border-right:      1px dashed black; 
    border-left:       1px dashed black;
}

#entropy_src_fortunes_id {
	height: 'auto';
	/* for support of ascii-art fortune cookies
	font-family: monospace;
	*/
}

#entropy_src_dice_d6_div_id {
	height: 'auto';
}

#entropy_src_UserMove_div_id {
	/* background-color: red; */
	height: 'auto';
}

#entropy_src_img_id, #entropy_src_img_div_id {
	width:				400px; 
	height:				130px; 
	min-width:			400px; 
	min-height:			130px;
	align:              middle;
}

.DataFieldWithButton_Container { 
	display:           flex;
	align-items: 	   center;
}

#entropy_id { 
	width:             94.8%;
}

#private_key_id { 
	width:             94.5%;
}

#wallet_mode_select_id { 
	width:             150px;
}

#wallet_blockchain_id { 
	width:             150px;
}

.Bip32CellHeader { 
	background-color:  #E3E3FF;
}

.Bip32CellValue { 
	background-color:  white;
	font-size:         17px;
	width:             100px; /* 60px; */
}

.Bip32Cell { 
	padding-right:     7px; 
	padding-left:      7px; 
	padding-top:       4px; 
	padding-bottom:    4px; 
	border:            1px solid black;
    border-collapse:   collapse;
}

.EyeButton {
	background-color:  yellow;
	height: 	       20px;
	width: 	           25px;
	min-width: 	       25px;
}

#update_btn_id {
	background-color:  lightgreen;
	width: 	           85px;
	min-width: 	       85px;
}

#salt_id {
	background-color:  #FFFFF0;
}

#wallet_coin_id {
	font-size:         14px;
}

#PRIV_KEY_label_id {
	font-size:         14px;
}

#PRIV_KEY_id {
	font-size:         12.5px;
}

.ButtonsBar {	
    /*margin-top:        70px;*/
	height:            70px;
	position:          absolute;
    bottom:            -50px;
}

.table textarea {
	max-width:         100%;
	width:             100%;
	height:            100px
}

.EllipsisButton {
	width:             27px;
	min-width:         27px;
}

.Dialog_LabelColumn {
	font-size:         14px;
	padding-left:      5px;
	width:             100px;
	min-width:         100px;
	max-width:         100px;
	height:            25px;
}

.LabelColumn {
	/*margin-left:     20px;*/
	padding-left:      10px;
	width:             135px;
	min-width:         135px;
	max-width:         135px;
	height:            25px;
}

.TextArea {
	width:             100%;
	min-width:         100%;
	max-width:         100%;
	height:            25px;
}

.Dialog_Form {
	font-family:       Arial, Helvetica, sans-serif;
	font-size:         14px;
	width:             100%;
	min-width:         100%;
	left:              0px;
}

.Dialog_ButtonBar {
	font-family:       Arial, Helvetica, sans-serif;
	font-size:         14px;
	width:             100%;
	min-width:         100%;
	padding-bottom:    20px;
}

.Dialog_FieldColumn {
	font-size:         14px;
	padding-left:      10px;
	width:             100%;
	min-width:         100%;
	max-width:         100%;
	height:            25px;
}

.Dialog_DataField {
	font-family:       Arial, Helvetica, sans-serif;
	font-size:         14px;
	width:             100%;
}

.FieldColumn {
	/*margin-left:     20px;*/
	padding-left:      5px;
	width:             100%;
	min-width:         100%;
	height:            25px;
}

.Selector {
	margin-left:       10px;
}

.Filler {
	width:             100%;
	height:            100%;
	min-height:        10%;
}

.ReadOnlySelect {
	background-color:  #F1FFFF;
}

.EditableSelect {
	background-color:  white;
}

.SaltValue {
	font-family:       Arial, Helvetica, sans-serif;
	font-size:         15px;
}

.DataField {
	font-family:       Arial, Helvetica, sans-serif;
	width:             85%;
}

.NormalAddressField {
    font-size:        18px;
}

.LongAddressField {
    font-size:        15px;
}

.SaltField {
	font-family:       Arial, Helvetica, sans-serif;
	width:             81%;
}

.RawDataField {
	font-family:       Arial, Helvetica, sans-serif;
	width:             98%;
}

.RawDataFieldWithButton {
	font-family:       Arial, Helvetica, sans-serif;
	width:             95%;
}

.WithFocus {
	background-color:  #ECFFDC; /* very light green */
}

.WithoutFocus {
	background-color:  white;
}

.ValidValue {
	color:             black;
}

.InvalidValue {
	color:             red;
}