Skip to content

Instantly share code, notes, and snippets.

@curtisault
Last active Nov 15, 2017
Embed
What would you like to do?
Paperclips Game CSS
body{
background-color: lightcoral
}
button{
height: 25px;
min-width: 75px;
}
#btnMakeProbe {
margin-bottom: 2px;
}
#btnAddProc {
width: 70px;
margin-bottom: 1px;
}
#btnAddMem {
width: 70px;
margin: 10px 0 0 0;
}
#btnEntertainSwarm {
margin-top: 4px;
margin-bottom: 4px;
}
#btnSynchSwarm {
margin-top: 4px;
margin-bottom: 4px;
}
#btnIncreaseProbeTrust{
width: 100%;
}
#btnIncreaseMaxTrust{
width: 100%;
}
#qCompDisplay {
min-width: 12pc;
margin: 10px 0 0 0;
}
#swarmSliderDiv {
position: relative;
display: inline-block;
margin-bottom: 10px;
}
#sliderLabelWork {
position: relative;
display: inline-block;
}
#swarmSlider {
position: absolute;
display: inline-block;
width: 180px;
top: 0px;
margin-left: 2px;
margin-right: 4px;
}
#sliderLabelThink {
position: relative;
display: inline-block;
left: 190px;
}
.slider {
width: 100%;
}
h2 {
line-height: 70%;
}
.toolTip {
position: relative;
display: inline-block;
}
.toolTip .toolTipText {
visibility: hidden;
width: 160px;
background-color: #c8c8c8;
color: #000;
text-align: center;
padding: 5px 0;
border-radius: 3px;
position: absolute;
z-index: 1;
bottom: 75%;
left: 50%;
margin-left: -19px;
opacity: 0;
transition: opacity 1s;
}
.toolTip:hover .toolTipText {
visibility: visible;
opacity: 1;
}
.toolTip2 {
margin-left: 2px;
position: relative;
display: inline-block;
height: 20px;
margin-top: 5px;
}
.toolTip2 .toolTipText2 {
visibility: hidden;
width: 200px;
background-color: #c8c8c8;
color: #000;
text-align: center;
padding: 5px 0;
border-radius: 3px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 11;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -15px;
opacity: 0;
transition: opacity 1s;
}
.toolTip2:hover .toolTipText2 {
visibility: visible;
opacity: 1;
}
.toolTip3 {
position: relative;
display: inline-block;
margin-bottom: 5px;
}
.toolTip3 .toolTipText3 {
visibility: hidden;
width: 180px;
background-color: #c8c8c8;
color: #000;
text-align: center;
padding: 5px 0;
border-radius: 3px;
position: absolute;
z-index: 1;
bottom: 27px;
left: 80px;
margin-left: 0px;
opacity: 0;
transition: opacity 1s;
}
.toolTip3:hover .toolTipText3 {
visibility: visible;
opacity: 1;
}
#cover {
position:fixed;
background-color: white;
top:0;
left:0;
height:100%;
width:100%;
z-index: 10;
}
#tournamentStuff {
height: 58px;
}
#tournamentLabel {
margin-bottom: 5px;
}
#wireBuyerDiv {
margin-bottom: 3px;
}
#processorDisplay {
display: inline-block;
vertical-align: baseline;
height: 22px;
}
#memoryDisplay {
display: inline-block;
vertical-align: baseline;
height: 22px;
}
#harvesterMultiButtons {
margin-bottom: 2;
}
#wireDroneMultiButtons {
margin-bottom: 2;
}
#farmMultiButtons {
margin-bottom: 2;
}
#batteryMultiButtons {
margin-bottom: 2;
}
#autoTourneyStatusDiv {
float: left;
width: 30px;
}
#tourneyButton {
float: left;
width: 120px;
}
#autoTourneyControl {
float: left;
width: 78px;
}
#victoryDiv {
margin-top: 10px;
width: 289px;
text-align: center;
}
#increaseProbeTrustDiv {
float: left;
width: 140px;
margin: 10px 15px;
}
#increaseMaxTrustDiv {
float: left;
width: 145px;
margin: 10px 15px;
}
#combatButtonDiv {
margin-top: 0;
}
#battleCanvasDiv {
position: relative;
}
#battleInterfaceDiv {
position: absolute;
left: 15px;
top: 8px;
}
canvas {
display: block;
margin-top: 0;
margin-bottom: 10;
width: 310px;
height: 150px;
margin-left: auto;
margin-right: auto;
background-color: #808080;
}
#hypnoDroneEventDiv {
float: left;
background: black;
width: 100%;
}
#prestigeDiv {
background-color: lightgrey;
}
#consoleDiv {
float: left;
background: black;
width: 100%;
}
#topDIv {
float: left;
width: 100%;
}
#leftColumn {
float: left ;
width: 32%;
}
#middleColumn {
float: left;
width: 32%;
margin-left: 10px;
}
#rightColumn {
float: left;
width: 32%;
margin-left: 10px;
}
#investmentDiv1 {
float: left;
width: 64px;
line-height: 20%;
margin: 0 20px 0 0;
}
#investmentDiv2 {
float: left;
width: 65%;
text-align: top;
margin-top: 0;
margin-left: 5px;
}
#stratDiv1 {
float: left;
width: 95px;
line-height: 20%;
}
#stratDiv2 {
float: left;
width: 60%;
text-align: top;
margin-top: 0;
margin-left: 5px;
}
#vertPad {
float: left;
width: 35%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 11;
}
#vertStrat {
float: right;
text-align: center;
width: 65%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 11;
}
#horizStrat {
float: left;
display: flex;
align-items: center;
justify-content: center;
width: 25%;
height: 56px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 11;
}
#investmentEngineUpgrade {
margin: 5px;
margin-bottom: 10px;
}
#tournamentManagement {
margin: 5px;
margin-bottom: 10px;
}
#feedButtonDiv {
margin-top: 5;
}
.engine {
margin: 5;
border: 1px solid grey;
padding: 5;
}
.engine2 {
border: 1px solid grey;
padding: 10px;
min-height: 220px;
}
.swarmEngine {
margin-bottom: 5;
border: 1px solid grey;
padding: 5;
}
.qEngine {
margin-bottom: 10px;
border: 1px solid grey;
padding: 10px;
height: 100px;
}
.qChip {
width: 8%;
height: 35%;
margin: 5px 1% 15px 1%;
background-color: black;
float: left;
}
.engineText {
margin-bottom: 0;
margin-top: 0;
line-height: 150%;
}
.engineText1 {
margin-left: 5;
margin-bottom: 0;
margin-top: 0;
}
.engineText2 {
margin-bottom: 0;
margin-top: 0;
line-height: 150%;
}
.engineText3 {
margin-left: 5;
margin-top: 10;
line-height: 150%;
}
.engineText4 {
display: block;
text-align: center;
margin: 15% 0 0 0;
}
.engineText5 {
margin-left: 0;
margin-top: 0;
margin-bottom: 3;
}
.engineText6 {
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
vertical-align: bottom;
}
.engineText7 {
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
vertical-align: bottom;
}
.engineText8 {
margin-left: 0;
margin-top: 3px;
margin-bottom: 0;
}
.engineText9 {
display: inline-block;
margin-top: 1px;
}
.engineText10 {
display: inline-block;
line-height: 18px;
vertical-align: bottom;
}
hr {
display: block;
margin-top: .05em;
margin-bottom: 0.2em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
hr.short {
width: 225px;
margin-left: 0;
}
table.table1 {
table-layout: fixed;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 11;
margin-bottom: 0;
margin-top: 0;
width: 100%;
border: none;
}
table.table1 tr:nth-child(even) {
background-color: #dddddd;
}
table.table2 {
border-collapse: collapse;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 11;
margin-bottom: 0;
margin-top: 0;
margin-right: 0px;
margin-left: 0px;
width: 70%;
}
table.table3 {
border-collapse: collapse;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 11;
margin-bottom: 0;
margin-top: 0;
margin-right: 0px;
margin-left: 0px;
width: 100%;
}
table.table2 td:nth-child(1) {
width: 45px;
text-align: right;
padding-right: 4px;
border-left: none;
border-top: none;
border-bottom:none;
font-weight: bold;
}
table.table2 td:nth-child(n>1) {
table-layout: fixed;
}
table.table2 td{
border: 1px solid black;
text-align: center;
}
p.clean {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 11;
margin-bottom: 0;
margin-top: 1px;
}
p.clean2 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 11;
margin-bottom: 0;
margin-top: 0px;
}
p.clean3 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 11;
margin-bottom: 5px;
margin-top: 2px;
}
p.console {
font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
font-size: 12;
color: white;
margin-top: 0;
}
p.consoleOld {
font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
font-size: 12;
color: grey;
margin-bottom: 0;
}
p.hypnoDrone {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 150;
color: white;
line-height: 115px;
margin-bottom: 0px;
margin-top: 0px;
}
.pulsate {
-webkit-animation: pulsate .5s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0;
}
@-webkit-keyframes pulsate {
0% {
opacity: 0.0;
}
50% {
opacity: 1.0;
}
100% {
opacity: 0.0;
}
}
.projectButton {
display: block;
height: 70px;
width: 85%;
background: lightgreen;
border: 1px solid rgba(0, 0, 0, 1);
border-radius: 10px;
outline: none;
margin-bottom: 6px;
margin-left: 7.5%
}
.projectButton:hover {
display: block;
background: royalblue;
color: white;
border: 1px solid rgba(0, 0, 0, 0.25);
}
.projectButton:active {
display: block;
background: #61ADE8;
}
.projectButton:disabled {
border: none;
}
.button {
border: 1px solid #1a1a1a;
background: #666666;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc));
background: -webkit-linear-gradient(top, #ffffff, #888888);
background: -moz-linear-gradient(top, #ffffff, #888888);
background: -ms-linear-gradient(top, #ffffff, #888888);
background: -o-linear-gradient(top, #ffffff, #888888);
background-image: -ms-linear-gradient(top, #ffffff 0%, #888888 100%);
padding: 12.5px 25px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
text-shadow: #cccccc 0 1px 0;
color: #000000;
font-size: 16px;
font-family: helvetica, serif;
text-decoration: none;
vertical-align: middle;
outline: none;
}
.button:hover {
border: 1px solid #898989;
text-shadow: #d4d4d4 0 1px 0;
background: #666666;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#666666));
background: -webkit-linear-gradient(top, #ffffff, #666666);
background: -moz-linear-gradient(top, #ffffff, #666666);
background: -ms-linear-gradient(top, #ffffff, #666666);
background: -o-linear-gradient(top, #ffffff, #666666);
background-image: -ms-linear-gradient(top, #ffffff 0%, #666666 100%);
color: #000000;
}
.button:active {
text-shadow: #bfbfbf 0 1px 0;
border: 1px solid #2e2e2e;
background: #d9d9d9;
background: -webkit-gradient(linear, left top, left bottom, from(#595959), to(#616161));
background: -webkit-linear-gradient(top, #595959, #d9d9d9);
background: -moz-linear-gradient(top, #595959, #d9d9d9);
background: -ms-linear-gradient(top, #595959, #d9d9d9);
background: -o-linear-gradient(top, #595959, #d9d9d9);
background-image: -ms-linear-gradient(top, #595959 0%, #d9d9d9 100%);
color: #000000;
}
.button:disabled{
opacity: 0.6;
border: 1px solid #ffffff;
}
.button2 {
min-height: 25px;
min-width: 80px;
border: 1px solid #1a1a1a;
background: #61ADE8;
padding: 2px 4px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
color: white;
font-size: 13px;
font-family: helvetica, serif;
vertical-align: middle;
border-radius: 5px
}
.button2:hover {
background: #26FFAB;
color: #000000;
}
.button2:active {
background: #23E8D4;
color: #000000;
}
.button2:disabled {
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc));
background: -webkit-linear-gradient(top, #ffffff, #888888);
background: -moz-linear-gradient(top, #ffffff, #888888);
background: -ms-linear-gradient(top, #ffffff, #888888);
background: -o-linear-gradient(top, #ffffff, #888888);
background-image: -ms-linear-gradient(top, #ffffff 0%, #888888 100%);
opacity: 0.4;
border: 1px solid #ffffff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment