* { font-family: Arial, Helvetica, sans-serif; } #divcontain{ padding: 10px; /* space from body */ border: 1px solid rgba(0,0,0,0.07); border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 8px 16px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07), 0 32px 64px rgba(0,0,0,0.07); background:rgba(129,129,129,.09); } #divcontain div{ display: inline-block; /*make div show in same rows*/ background:#ed1b24; width:92%; height:20 px; padding:5px 15px; /*space in div */ margin-bottom: 2em; //space between rows border: 1px solid rgba(0,0,0,1); border-radius: 5px; overflow-y:auto; box-shadow: 0 1px 2px rgba(0,0,0,0.01), 0 2px 4px rgba(0,0,0,0.01), 0 4px 8px rgba(0,0,0,0.01), 0 8px 16px rgba(0,0,0,0.01), 0 16px 32px rgba(0,0,0,0.01), 0 32px 64px rgba(0,0,0,0.01); } #divcontain1 { display: flex; /* remove gap between div*/ } #divcontain1 div{ /* no space between rows -difference row */ background:red; width:10%; display: inline-block; /*make same rows*/ } #bottombar { position: fixed; bottom: 0; left: 0px; padding-left:10px; z-index: 2; width: 100%; height:10px; } #bottombar { height: 16px; font-size:12px; background: rgb(10,10,10,0.45); background:rgba(229,229,229,.07); color:inherit; //background:#F8F8F8; -webkit-box-shadow: 0 0 1px grey; -moz-box-shadow: 0 0 1px grey; box-shadow: 0 0 1px grey; border-top: 1px solid rgba(129,129,129,.20);//#1f1209; box-shadow: 0 20px 20px -20px #333; } #bottombar a:link,a:visited { text-decoration: none; color:inherit; } hr { border:none; height: 20px; width: 99%; height: 50px; margin-top: 0; border-bottom: 1px solid rgba(129,129,129,.20);//#1f1209; box-shadow: 0 20px 20px -20px #333; margin: -50px auto 10px; } button { border: 1px solid rgba(129,129,129,.50);//#1f1209; //border:inherit; background:rgba(229,229,229,.07); color:inherit; border-radius: 2px; } a, a:hover, a:visited, a:active { color: inherit; //text-decoration: none; } @media (prefers-color-scheme: dark) { /* defaults to dark theme */ body { --text-color: #eee; color:#eee; --bkg-color: #121212; } body.light-theme { //--text-color: #222; --bkg-color: #fff; } #topbar { filter: brightness(100%) invert(1); } } body { background: var(--bkg-color); } h1, p { color: var(--text-color); } .dark-mode { background-color: #121212; color: var(beautifulColor); color: var(--global-text-color); color: white; } .sun-mode { color: orange; } .green-mode { //background-color: black; color: green; --text-color: green; } .red-mode { color: #f54c4c; } .blue-mode { color: #2d7dfc; } /*snackbar*/ #snackbar { visibility: hidden; min-width: 150px; //margin-left: -125px; //height:20px; color: #fff; text-align: center; border-radius: 4px; padding: 0px 6px; position: fixed; z-index: 12; right: 5%; top: 10px; font-size: 15px; background-color: #ed1b24;//red;//#333; -webkit-box-shadow: 0px 19px 29px -15px rgba(0,0,0,0.6); -moz-box-shadow: 0px 19px 29px -15px rgba(0,0,0,0.6); box-shadow: 0px 19px 29px -15px rgba(0,0,0,0.6); } #snackbar.show { visibility: visible; -webkit-animation: fadein 0.3s, fadeout 0.5s 2.5s; animation: fadein 0.3s, fadeout 0.5s 2.5s; } #snackbar p{ //margin-top:0px; } #snackbar2 { visibility: hidden; min-width: 250px; margin-left: -125px; background-color: #333; color: #fff; text-align: center; border-radius: 2px; padding: 1px; position: fixed; z-index: 11; left: 50%; bottom: 10px; font-size: 17px; border-radius: 5px; -webkit-box-shadow: 0px 19px 29px -15px rgba(0,0,0,0.6); -moz-box-shadow: 0px 19px 29px -15px rgba(0,0,0,0.6); box-shadow: 0px 19px 29px -15px rgba(0,0,0,0.6); width:30%; //height: 10px; margin:0 auto; display:table; position: absolute; position: fixed; left: 0; right:0; //border:1px solid #dddddd; -webkit-transform:translateY(-10%); -moz-transform:translateY(-10%); -ms-transform:translateY(-10%); -o-transform:translateY(-10%); transform:translateY(-10%); } #snackbar3 { visibility: hidden; min-width: 250px; margin-left: -125px; background-color: #fefefe; color: #222222; text-align: center; border-radius: 2px; padding: 6px; position: fixed; z-index: 10; right: 5%; bottom: 10px; font-size: 17px; border-radius: 5px; -webkit-box-shadow: 0px 19px 29px -15px rgba(0,0,0,0.6); -moz-box-shadow: 0px 19px 29px -15px rgba(0,0,0,0.6); box-shadow: 0px 19px 29px -15px rgba(0,0,0,0.6); position: absolute; width:30%; height: 10px; margin:0 auto; display:table; position: absolute; //border:1px solid #dddddd; -webkit-transform:translateY(-10%); -moz-transform:translateY(-10%); -ms-transform:translateY(-10%); -o-transform:translateY(-10%); transform:translateY(-10%); right: 5%; bottom: 10px; font-size: 17px; border-radius: 5px; -webkit-box-shadow: 0px 19px 29px -15px rgba(0,0,0,0.9); -moz-box-shadow: 0px 19px 29px -15px rgba(0,0,0,0.9); //box-shadow: 10px 20px 20px 20px rgba(0,0,0,0.3); border: 1px solid #dddddd; } #snackbar4 { visibility: hidden; min-width: 250px; margin-left: -125px; background-color: #fefefe; color: #111111; text-align: center; padding: 16px; position: fixed; z-index: 11; //cursor: pointer; font-size: 17px; border-radius: 5px; -webkit-box-shadow: 0px 19px 29px -15px rgba(0,0,0,0.5); -moz-box-shadow: 0px 19px 29px -15px rgba(0,0,0,0.5); //box-shadow: 10px 20px 20px 20px rgba(0,0,0,0.3); border: 1px solid #efefef; width: 100px; width:80%; height: 100px; margin:0 auto; display:table; left: 0; right:0; top: 17%; border:1px solid #dddddd; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } #snackbar4 p{ margin-top:1px; } #snackbar5 { visibility: hidden; min-width: 250px; margin-left: -125px; background-color: #fefefe; color: #111111; text-align: center; padding: 16px; position: fixed; z-index: 11; //cursor: pointer; font-size: 17px; border-radius: 5px; -webkit-box-shadow: 0px 19px 29px -15px rgba(0,0,0,0.5); -moz-box-shadow: 0px 19px 29px -15px rgba(0,0,0,0.5); //box-shadow: 10px 20px 20px 20px rgba(0,0,0,0.3); border: 1px solid #efefef; width: 100px; width:80%; height: 100px; margin:0 auto; display:table; left: 0; right:0; top: 17%; border:1px solid #dddddd; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } #snackbar5 p{ margin-top:1px; } #snackbar2.show { visibility: visible; -webkit-animation: fadein2 0.5s, fadeout2 0.5s 2.5s; animation: fadein2 0.5s, fadeout2 0.5s 2.5s; } #snackbar3.show { visibility: visible; -webkit-animation: fadein2 0.5s; animation: fadein2 0.5s; } #snackbar4.show { visibility: visible; //-webkit-animation: fadein2 0.5s; //animation: fadein2 0.5s; } #snackbar5.show { visibility: visible; //-webkit-animation: fadein2 0.5s; //animation: fadein2 0.5s; } @-webkit-keyframes fadein { from {top: 0; opacity: 0;} to {top: 10px; opacity: 1;} } @keyframes fadein { from {top: 0; opacity: 0;} to {top: 10px; opacity: 1;} } @-webkit-keyframes fadeout { from {top: 10px; opacity: 1;} to {top: 0; opacity: 0;} } @keyframes fadeout { from {top: 10px; opacity: 1;} to {top: 0; opacity: 0;} } @-webkit-keyframes fadein2 { from {bottom: 0; opacity: 0;} to {bottom: 10px; opacity: 1;} } @keyframes fadein2 { from {bottom: 0; opacity: 0;} to {bottom: 10px; opacity: 1;} } @-webkit-keyframes fadeout2 { from {bottom: 10px; opacity: 1;} to {bottom: 0; opacity: 0;} } @keyframes fadeout2 { from {bottom: 10px; opacity: 1;} to {bottom: 0; opacity: 0;} } .close3 { cursor: pointer; background-color:#ff7566; padding:2px 5px; margin-left:92%; font-size:13px; color:white; border-radius: 50%; } .close3:hover { cursor: pointer; background-color: #ed1b24; padding:2px 5px; margin-left:92%; font-size:13px; color:white; border-radius: 50%; } .close4 { cursor: pointer; background-color:#ff7566; padding:2px 5px; margin-left:96%; font-size:13px; color:white; border-radius: 50%; } .close4:hover { cursor: pointer; background-color: #ed1b24; padding:2px 5px; margin-left:96%; font-size:13px; color:white; border-radius: 50%; } .close5 { cursor: pointer; background-color:#ff7566; padding:2px 5px; margin-left:96%; font-size:13px; color:white; border-radius: 50%; } .close5:hover { cursor: pointer; background-color: #ed1b24; padding:2px 5px; margin-left:96%; font-size:13px; color:white; border-radius: 50%; } /*effect buttons*/ .button { background-color: #4CAF50; /* Green */ border: none; color: white; //padding: 5px 2px; text-align: center; text-decoration: none; display: inline-block; font-size: 11px; //margin: 4px 2px; cursor: pointer; } .button1 { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 2px 8px; text-align: center; text-decoration: none; font-size: 13px; cursor: pointer; justify-content: center; /* Horizontal center alignment */ border-radius:6px; display: inline-flex; align-items: center; } .button2 { background-color: #4CAF50; /* Green */ border: 1px solid #999999; color: inherit; padding: 2px 8px; text-align: center; text-decoration: none; font-size: 13px; //margin: 2px 2px; cursor: pointer; justify-content: center; /* Horizontal center alignment */ border-radius:6px; //display: inline-flex; align-items: center; } .button3 { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 12px 18px; text-align: center; text-decoration: none; font-size: 13px; cursor: pointer; justify-content: center; /* Horizontal center alignment */ border-radius:6px; display: inline-flex; align-items: center; margin:5px; } .blue {background-color: #008CBA;color: white;} /* Blue */ .red {background-color: #e82727;color: white;} /* Red */ .pink {background-color: #fa82ae;color: white;} /* Pink */ .green {background-color: #a4fc9a; color: black;} /* Gray */ .grey {background-color: rgba(110,110,110,0.17); color: black;} /* Gray */ .yellow {background-color: #ffff54; color: black;} /* Gray */ .black {background-color: #222;} /* Black */ /*effect buttons end*/ /*bowtie -icon-topbar */ #topbar { position: fixed; top: 0px; left: 0; z-index: 1; width: 100%; wheight:22px; background:#F8F8F8; //background: rgba(1,1,1,.91);//#fff; -webkit-box-shadow: 0 0 1px #9999; -moz-box-shadow: 0 0 1px #9999; box-shadow: 0 0 1px #9999; padding-left:5px; padding-top:5px; } #topbar span a:hover { background: #888888; padding-top: 14px; padding-bottom: 2px; border-radius: 2px; padding-right:0px; padding-left:-5px; } /*init*/ #topbar {margin-top:0px;height:30px; width:100%;position:fixed} #topbar span {margin-right:6px;margin-left:5px;} #topbar span a:hover {background:#dfdfdf;padding-top: 14px;padding-bottom: 2px; border-radius: 5px;} .mhead {float:left;margin-top:-12px;font-size:26px;color:rgba(9,9,9,1)} .mhead{ display:none;/*Off when wider than 800(bellow set) */ } .whead{display:none;} @media screen and (max-width: 500px) { .mhead{display:block;padding-left:5px; padding-top:5px; } .whead{display:none;} } .right {float:right;padding-right:10px;} .icon { display: inline-flex; width: 16px; height: 16px; background-size: cover; opacity: 0.9; padding:4px 4px; //margin-top:-3px; margin-left:-10px; } .icon:hover, .icon:focus { opacity: 1; filter: invert(27%) sepia(51%) saturate(2878%) //hue-rotate(346deg) brightness(94%) contrast(100%); } .icon-moon { background-image: url(img/moonblack.svg); width:22px; height:22px; filter: brightness(1.75); filter: brightness(50%); filter: brightness(1); filter: brightness(0%); filter: invert(40%); z-index:1; } .icon-moon2 { background-image: url(img/moonblack.svg); width:22px; height:22px; z-index:1; } .icon-gear { background-image: url(img/gear.svg); } .icon-menufold { background-image: url(img/menu-fold.svg); } .icon-logout { background-image: url(img/logout2.svg); margin-top:-4px; } @media only screen and (max-width: 1100px) { .icon-menufold {filter :invert(100%);} } .icon-warning { background-image: url(img/warning.svg); filter: brightness(1.75); filter: invert(100%); } .icon-sync { background-image: url(img/sync.svg); } .icon-user { background-image: url(img/userw.svg); filter: invert(70%); margin-top:0px; } .icon-recon { background-image: url(img/recon.svg); } .icon-logout { background-image: url(img/logout2.svg); margin-top:-4px; } .icon-logo { background-image: url(img/icloud.svg); width: 26px; height: 22px; // filter: brightness(1.75); //filter: invert(85%); margin-top:-4px; } .customoon { //filter: brightness(0%) invert(1); //filter: brightness(50%) invert(70%); filter: invert(91%) sepia(47%) saturate(1810%) hue-rotate(313deg) brightness(106%) contrast(103%); } .custodark { filter: brightness(0%) invert(1); //filter: brightness(50%) invert(70%); filter: brightness(100%) invert(1); } .custolight { body {background:inherit;} } /*bowtie -icon-topbar end*/
Edit file:shirt.css13927