www.spaceplanner.app

Web client to the spaceplanner API
git clone git://jacobedwards.org/www.spaceplanner.app
Log | Files | Refs

main.css (2035B)

      1 #floorplans {
      2 	list-style: none;
      3 }
      4 
      5 #floorplans.grid {
      6 	list-style: none;
      7 	display: grid;
      8 	justify-content: center;
      9 	grid-template-columns: repeat(auto-fit, minmax(15em, 25vw));
     10 	grid-column-gap: .65em;
     11 	grid-row-gap: 1em;
     12 	padding-left: 0;
     13 }
     14 
     15 #floorplans.grid > li {
     16 	//aspect-ratio: 1;
     17 }
     18 
     19 #floorplans.grid > li > .floorplan {
     20 	box-sizing: border-box;
     21 	display: block;
     22 	height: 100%;
     23 	border: .15em solid grey;
     24 	border-radius: .4rem;
     25 	/* NOTE: Required for footers to be slapped on the bottom, not sure why */
     26 	position: relative;
     27 	overflow: hidden;
     28 }
     29 
     30 .floorplan {
     31 	background-color: #FAFAFA;
     32 	padding: .5em .75em;
     33 }
     34 
     35 .floorplan > header {
     36 	padding: 4%;
     37 }
     38 
     39 .floorplan > header > .fp_ops {
     40 	display: flex;
     41 	justify-content: space-between;
     42 	padding-bottom: .5em;
     43 	border-bottom: thin solid grey;
     44 }
     45 
     46 .floorplan > header > .fp_ops > a {
     47 	margin-right: .25em;
     48 }
     49 
     50 .floorplan > header > .fp_ops > .fp_buttons > input {
     51 	margin: 0 .2em;
     52 }
     53 
     54 .floorplan > footer {
     55 	background-color: rgba(0, 0, 0, .05);
     56 	position: absolute;
     57 	bottom: 0;
     58 	right: 0;
     59 	padding: 4%;
     60 	opacity: 60%;
     61 	border-radius: .2rem 0 0 0;
     62 }
     63 
     64 .floorplan:hover > footer {
     65 	opacity: 100%;
     66 }
     67 
     68 .name_div {
     69 	display: flex;
     70 	align-items: center;
     71 	margin-bottom: .25em;
     72 }
     73 
     74 .name_div > input[type="image"] {
     75 	border: none;
     76 }
     77 
     78 input.name, input.synopsis, input.address {
     79 	background-color: white;
     80 }
     81 
     82 /*
     83  * Maybe I should give these elements two classes: fp_metadata and
     84  * one of the following: */
     85 input.synopsis, input.address {
     86 	display: block;
     87 	max-width: 60%;
     88 }
     89 
     90 .name {
     91 	font-size: larger;
     92 	margin-top: .75em;
     93 	margin-bottom: .5em;
     94 	max-width: 90%;
     95 	display: inline;
     96 	
     97 }
     98 
     99 .address {
    100 	font-style: italic;
    101 	margin-bottom: .5em;
    102 }
    103 
    104 .synopsis {
    105 	margin-top: 0;
    106 }
    107 
    108 .address::before {
    109 	content: "Address: ";
    110 	font-size: smaller;
    111 }
    112 
    113 .delete_dialog {
    114 	background-color: #F3F3F3;
    115 	position: fixed;
    116 	top: 20vh;
    117 	left: 20vw;
    118 	width: 60vw;
    119 	align-content: center;
    120 	border: thin solid black;
    121 	border-radius: .25em;
    122 	padding: 1em;
    123 }
    124 
    125 .delete_dialog > input {
    126 	margin: .5em;
    127 	font-size: larger;
    128 }