diff options
Diffstat (limited to 'rannak/mangud/partorg/plakat.bak/style.css')
-rw-r--r-- | rannak/mangud/partorg/plakat.bak/style.css | 188 |
1 files changed, 188 insertions, 0 deletions
diff --git a/rannak/mangud/partorg/plakat.bak/style.css b/rannak/mangud/partorg/plakat.bak/style.css new file mode 100644 index 0000000..215c073 --- /dev/null +++ b/rannak/mangud/partorg/plakat.bak/style.css @@ -0,0 +1,188 @@ +body { + height: 100%; + overflow: hidden; + color: white; + background-color: #43464b; +} + +h1 { + color: #a1000e; + font-weight: bold; +} + + +/* Move on ja Sissejuhatus Button */ + +.avatar { + border-radius: 20px; + width: 100%; + max-width: 15rem; +} + + +.modalHeaderWrapper{ + text-align: center; + margin: 0; + width: 100%; +} + +button:disabled{ + opacity: 0.5; + cursor: not-allowed; +} + +.moveOn{ + display: inline-block; + border: none; + padding: 6px 12px; + margin-botton: 0; + font-size: 1rem; + font-weight: normal; + text-align: center; + cursor: pointer; + border-radius: 4px; + background-color: #4BB543; + color: white; +} + +/* Modal Stuff */ + + +.closeModalButton { + border-radius: 50px; +} + +.modalButton{ + background-color: rgba(0,136,169,1); + border: none; + border-radius: 50px; + cursor: pointer; + transition: all 0.3 ease 0; + font-size: 1.2rem; + text-align: center; + margin-left: 30px; +} + +.modalButton:hover{ + background-color: rgba(0,136,169,0.8); +} + + + +/* Main */ + +.wrapper { + height: 100%; + display: flex; +} + +/* Toolbar */ +.intro{ + text-align: center; + border-bottom: 2px solid gray; + padding: 7px; +} + + +#toolbar { + display: flex; + flex-direction: column; + align-items: center; + padding: 5px; + width: 20%; + min-width:350px; + background-color: #43464b; +} + +#clear{ + background-color: #1565c0; + border: none; + border-radius: 4px; + font-size:1.3rem; + color:white; + padding: 2px; +} + +#toolbar * {margin-bottom: 6px;} +#toolbar input {width: 4rem;} + +.toolbarDiv {width: 100%;} + +form { + display: flex; + align-items: center; +} + +label { + display: table-cell; + font-size: 1.2rem; +} + + + +/* Img Picker */ +.pickingSec { + height: 50%; + overflow: hidden; + overflow-y: scroll; +} + + +.valiTxt { + border-bottom: 4px solid gray; + padding-top: 10px; +} + + +.picked{ + border: 2px solid lime; +} + + +.addOnPicked{ + border: 2px solid aqua; +} + + + +.pickImg { + width: 50%; + height: auto; + padding: 10px; + margin-left: calc(25% - 5px); +} + + + +/* Canvas */ +canvas{ + display: block; + margin: 0 auto; +} + + + + + +/* Responsivness */ + +@media screen and (max-width: 1400px) { + .pickImg { + width: 30%; + height: auto; + padding: 7px; + margin-left: calc(7% - 21px); + } + +} + + +@media screen and (max-width: 900px) { + .pickImg { + width: 24%; + height: auto; + padding: 3px; + margin-left: calc(1% - 10px); + } + +} |