├── Content
├── CustomPreset.css
├── Data.json
├── Fonts.css
├── Images
│ ├── 128.png
│ ├── 16.png
│ ├── 24.png
│ ├── 32.png
│ ├── 60-lines.png
│ ├── 64.png
│ ├── Background.png
│ ├── galaxy.svg
│ ├── ipad.svg
│ ├── iphone.svg
│ ├── nexus.svg
│ ├── notebook.svg
│ └── notebookback.png
├── Style.css
├── font
│ ├── OpenSans-Regular.woff2
│ ├── Vollkorn-Regular.ttf
│ ├── Vollkorn-Regular.woff2
│ └── fontello.woff2
└── fontello.css
├── CustomPreset.html
├── README.md
├── Scripts
├── Option.js
├── OptionInfo.js
├── Popup.js
├── Resizer.js
├── Sortable.js
└── background.js
├── manifest.json
└── popup.html
/Content/CustomPreset.css:
--------------------------------------------------------------------------------
1 | html
2 | {
3 |
4 | }
5 | body
6 | {
7 | height: 100vh;
8 | width: 100%;
9 | min-width: 900px;
10 | background: url('Images/60-lines.png');
11 | margin: 0;
12 | display: flex;
13 | justify-content: center;
14 | align-items: center;
15 | user-select: none;
16 | }
17 | .wrapper
18 | {
19 | position: relative;
20 | background:url(Images/Background.png) no-repeat center center;
21 | background-size: contain;
22 | width: 70%;
23 | height: 549.413px;
24 | display: flex;
25 | justify-content: center;
26 | align-items: center;
27 | }
28 |
29 | .textBox {
30 | -webkit-appearance: none;
31 | box-sizing: border-box;
32 | height: 30px;
33 | width: 200px;
34 | background-color: #fff;
35 | outline: none;
36 | border: 1px solid #fff;
37 | color: #000;
38 | border-radius: 2px;
39 | font-size: 100%;
40 | transition: all 0.2s ease;
41 | padding: 0 5px;
42 | border-radius: 1px;
43 |
44 | }
45 |
46 | .textBox-error
47 | {
48 | background-color: #edd7d7;
49 | border-color:red;
50 | }
51 | table tr td
52 | {
53 | padding: 5px;
54 | }
55 | table th,
56 | table tr td:first-of-type
57 | {
58 | color:#000;
59 | font-family: 'OpenSans';
60 | font-size: small;
61 | }
62 | table tr td
63 | {
64 | color:#000;
65 | }
66 | .sepButton-active
67 | {
68 | pointer-events: auto !important;
69 | background: rebeccapurple !important;
70 | }
71 | .sepButton {
72 | pointer-events: none;
73 | /*background: #0ab3a3;*/
74 | background: #ccc;
75 | display: flex;
76 | justify-content: center;
77 | align-items: center;
78 | color: #fff;
79 | -webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.14);
80 | box-shadow: 0 5px 5px rgba(0,0,0,0.3);
81 | font-size: small;
82 | line-height: 20px;
83 | text-align: center;
84 | vertical-align: middle;
85 | white-space: nowrap;
86 | cursor: pointer;
87 | border-radius: 0.1em;
88 | font-family: 'OpenSans';
89 | position: relative;
90 | overflow: hidden;
91 | width: 200px;
92 | height: 30px;
93 | margin-bottom: 10px;
94 | }
95 | .sepButton:hover
96 | {
97 | opacity: 0.9;
98 | }
99 | .sepButton:active
100 | {
101 | box-shadow: 0 2px 5px rgba(0,0,0,0.3);
102 |
103 | }
104 | #display {
105 | position: absolute;
106 | left:12.43%;
107 | right: 12.4%;
108 | top:7.4%;
109 | bottom: 11.0%;
110 | }
111 | #display>div {
112 | position: absolute;
113 | pointer-events: none;
114 | background: rebeccapurple;
115 | z-index: 10;
116 | }
117 | #display table {
118 | background-size:cover;
119 | pointer-events: none;
120 | position: absolute;
121 | table-layout: fixed;
122 | border-collapse: collapse;
123 | box-sizing: border-box;
124 | z-index: 20;
125 | }
126 | #display td {
127 | text-align: center;
128 |
129 | }
130 | #display td::before{
131 | content:"\00d7";
132 | display: flex;
133 | justify-content: center;
134 | align-items: center;
135 | }
136 |
137 | input:read-only
138 | {
139 | background-color: #f5f5f5;
140 | border-color: #ccc;
141 | }
142 |
--------------------------------------------------------------------------------
/Content/Data.json:
--------------------------------------------------------------------------------
1 | {
2 | "presets":[{
3 | "id": "1",
4 | "width": 100,
5 | "height": 100,
6 | "left":0,
7 | "top": 0,
8 | "sortorder":0,
9 | "isempty":false
10 | },
11 | {
12 | "id": "2",
13 | "width": 75,
14 | "height": 100,
15 | "left": 0,
16 | "top": 0,
17 | "sortorder":1,
18 | "isempty":false
19 | },
20 | {
21 | "id": "3",
22 | "width": 75,
23 | "height": 100,
24 | "left": 25,
25 | "top": 0,
26 | "sortorder":2,
27 | "isempty":false
28 | },
29 | {
30 | "id": "4",
31 | "width": 50,
32 | "height": 100,
33 | "left": 0,
34 | "top": 0,
35 | "sortorder":3,
36 | "isempty":false
37 | },
38 | {
39 | "id": "5",
40 | "width": 50,
41 | "height": 100,
42 | "left": 25,
43 | "top": 0,
44 | "sortorder":4,
45 | "isempty":false
46 | },
47 | {
48 | "id": "6",
49 | "width": 50,
50 | "height": 100,
51 | "left": 50,
52 | "top": 0,
53 | "sortorder":5,
54 | "isempty":false
55 | },
56 | {
57 | "id": "7",
58 | "width": 25,
59 | "height": 100,
60 | "left": 37.5,
61 | "top": 0,
62 | "sortorder":6,
63 | "isempty":false
64 | },
65 | {
66 | "id": "8",
67 | "width": 25,
68 | "height": 100,
69 | "left": 75,
70 | "top": 0,
71 | "sortorder":7,
72 | "isempty":false
73 | },
74 | {
75 | "id": "9",
76 | "width": 100,
77 | "height": 75,
78 | "left": 0,
79 | "top": 0,
80 | "sortorder":8,
81 | "isempty":false
82 | },
83 | {
84 | "id": "10",
85 | "width": 100,
86 | "height": 75,
87 | "left": 0,
88 | "top": 25,
89 | "sortorder":9,
90 | "isempty":false
91 | },
92 | {
93 | "id": "11",
94 | "width": 100,
95 | "height": 50,
96 | "left": 0,
97 | "top": 0,
98 | "sortorder":10,
99 | "isempty":false
100 | },
101 | {
102 | "id": "12",
103 | "width": 100,
104 | "height": 50,
105 | "left": 0,
106 | "top": 25,
107 | "sortorder":11,
108 | "isempty":false
109 | },
110 | {
111 | "id": "13",
112 | "width": 100,
113 | "height": 50,
114 | "left": 0,
115 | "top": 50,
116 | "sortorder":12,
117 | "isempty":false
118 | },
119 | {
120 | "id": "14",
121 | "width": 100,
122 | "height": 25,
123 | "left": 0,
124 | "top": 0,
125 | "sortorder":13,
126 | "isempty":false
127 | },
128 | {
129 | "id": "15",
130 | "width": 100,
131 | "height": 25,
132 | "left": 0,
133 | "top": 37.5,
134 | "sortorder":14,
135 | "isempty":false
136 | },
137 | {
138 | "id": "16",
139 | "width": 100,
140 | "height": 25,
141 | "left": 0,
142 | "top": 75,
143 | "sortorder":15,
144 | "isempty":false
145 | },
146 | {
147 | "id": "17",
148 | "width": 0,
149 | "height": 0,
150 | "left": 0,
151 | "top": 0,
152 | "sortorder":16,
153 | "isempty":true
154 | },
155 | {
156 | "id": "18",
157 | "width": 50,
158 | "height": 50,
159 | "left": 0,
160 | "top": 50,
161 | "sortorder":17,
162 | "isempty":true
163 | },
164 | {
165 | "id": "19",
166 | "width": 0,
167 | "height":0,
168 | "left": 0,
169 | "top": 0,
170 | "sortorder":18,
171 | "isempty":true
172 | },
173 | {
174 | "id": "20",
175 | "width":0,
176 | "height":0,
177 | "left": 0,
178 | "top":0,
179 | "sortorder":19,
180 | "isempty":true
181 | }
182 | ]
183 | }
184 |
--------------------------------------------------------------------------------
/Content/Fonts.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'OpenSans';
3 | src: url('font/OpenSans-Regular.woff2') format('woff2');
4 | font-weight: normal;
5 | font-style: normal;
6 | }
7 |
8 | @font-face {
9 | font-family: 'Vollkorn';
10 | src: url('font/Vollkorn-Regular.woff2') format('woff2');
11 | font-weight: normal;
12 | font-style: normal;
13 | }
14 |
--------------------------------------------------------------------------------
/Content/Images/128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ray-lothian/Layout-Resizer/5d7626640818e44ef00ea6ef6fb261c9fab43544/Content/Images/128.png
--------------------------------------------------------------------------------
/Content/Images/16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ray-lothian/Layout-Resizer/5d7626640818e44ef00ea6ef6fb261c9fab43544/Content/Images/16.png
--------------------------------------------------------------------------------
/Content/Images/24.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ray-lothian/Layout-Resizer/5d7626640818e44ef00ea6ef6fb261c9fab43544/Content/Images/24.png
--------------------------------------------------------------------------------
/Content/Images/32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ray-lothian/Layout-Resizer/5d7626640818e44ef00ea6ef6fb261c9fab43544/Content/Images/32.png
--------------------------------------------------------------------------------
/Content/Images/60-lines.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ray-lothian/Layout-Resizer/5d7626640818e44ef00ea6ef6fb261c9fab43544/Content/Images/60-lines.png
--------------------------------------------------------------------------------
/Content/Images/64.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ray-lothian/Layout-Resizer/5d7626640818e44ef00ea6ef6fb261c9fab43544/Content/Images/64.png
--------------------------------------------------------------------------------
/Content/Images/Background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ray-lothian/Layout-Resizer/5d7626640818e44ef00ea6ef6fb261c9fab43544/Content/Images/Background.png
--------------------------------------------------------------------------------
/Content/Images/galaxy.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
39 |
--------------------------------------------------------------------------------
/Content/Images/ipad.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
39 |
--------------------------------------------------------------------------------
/Content/Images/iphone.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
39 |
--------------------------------------------------------------------------------
/Content/Images/nexus.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
43 |
--------------------------------------------------------------------------------
/Content/Images/notebook.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
39 |
--------------------------------------------------------------------------------
/Content/Images/notebookback.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ray-lothian/Layout-Resizer/5d7626640818e44ef00ea6ef6fb261c9fab43544/Content/Images/notebookback.png
--------------------------------------------------------------------------------
/Content/Style.css:
--------------------------------------------------------------------------------
1 | /*:root{
2 | --counter :10s;
3 | } */
4 |
5 | ::-webkit-scrollbar {
6 | display: none;
7 | }
8 | html,body
9 | {
10 | margin: 0;
11 | padding: 0;
12 | }
13 | body
14 | {
15 | width: 550px;
16 |
17 | background: #fdfdfd;
18 | font-family: 'OpenSans';
19 |
20 | box-sizing: border-box;
21 | color: #111;
22 | overflow-y: scroll;
23 | user-select: none;
24 | }
25 | header
26 | {
27 | display: flex;
28 | justify-content: space-between;
29 | font-weight: bold;
30 | align-items: center;
31 | font-size: small;
32 | padding: 12px 0;
33 | position: fixed;
34 | top: 0;
35 | left: 0;
36 | right: 0;
37 | background-color:rebeccapurple;
38 | z-index: 1;
39 | color:#fff;
40 | }
41 | header > span >a
42 | {
43 | text-decoration: underline;
44 | }
45 | header > i, header> div >i
46 | {
47 | font-size: x-large;
48 | cursor: pointer;
49 |
50 | }
51 | main
52 | {
53 | margin-top: 57px;
54 | display :flex;
55 | flex-flow: row wrap;
56 | border-collapse: collapse;
57 | }
58 |
59 | main > div
60 | {
61 | box-sizing:border-box;
62 | width:110px;
63 | height: 100px;
64 | border:1px solid #f5f5f5;
65 | display: flex;
66 | justify-content: center;
67 | align-items: center;
68 | position: relative;
69 | cursor: pointer;
70 | transition: all 0.2s ease;
71 |
72 | }
73 | main > div > span
74 | {
75 | position: absolute;
76 | bottom:3px;
77 | font-size: 90%;
78 | }
79 | main > div > i
80 | {
81 | position: absolute;
82 | top: 3px;
83 | font-size: large;
84 | font-style:normal;
85 | color:#333;
86 | display: none;
87 | font-weight: bold;
88 | pointer-events: auto !important;
89 | }
90 | main > div >div
91 | {
92 | width:64px;
93 | height: 64px;
94 | background:url(../Content/Images/notebookback.png) center center no-repeat;
95 | }
96 | main > div >canvas
97 | {
98 | position: absolute;
99 | }
100 | .preset > *
101 | {
102 | pointer-events: none;
103 | }
104 | .preset:hover
105 | {
106 | box-shadow: inset 0 0 0 2px #aaa;
107 | }
108 |
109 | .presetDisableHover:hover
110 | {
111 | box-shadow: none;
112 | }
113 |
114 | @keyframes blink-smooth {
115 | 50% {
116 | color: transparent;
117 | opacity:0.1;
118 | }
119 | }
120 | .icon-plus{
121 | font-size: 140%;
122 | margin-left: 10px;
123 | }
124 | .icon-pencil
125 | {
126 | margin-right: 10px;
127 | }
128 |
129 | .dialogWrapper
130 | {
131 | background-color: rgba(255,255,255,0.7);
132 | position: fixed;
133 | top: 0;
134 | left: 0;
135 | right: 0;
136 | bottom: 0;
137 | z-index: 1000;
138 | justify-content: center;
139 | align-items: center;
140 | display: none;
141 | }
142 | .dialog
143 | {
144 | padding: 20px;
145 | width: 80%;
146 | box-shadow: 0 2px 25px #aaa;
147 | background-color: white;
148 |
149 | }
150 | .dialog >p
151 | {
152 | text-align: center;
153 | }
154 |
155 | .sepButton {
156 | /*background: #0ab3a3;*/
157 | background: rebeccapurple;
158 | display: inline-block;
159 | padding: 0.6em;
160 | width: 100px;
161 | color: #fff;
162 | font-size: small;
163 | line-height: 20px;
164 | text-align: center;
165 | vertical-align: middle;
166 | white-space: nowrap;
167 | cursor: pointer;
168 | border-radius: 0.3em;
169 | }
170 |
171 | .sepButton-light
172 | {
173 | background:#eee;
174 | color:#000;
175 | box-shadow: 0 2px 12px #444;
176 | }
177 | .sepButton-light:hover
178 | {
179 | background-color: #f5f5f5 !important;
180 | opacity: 1 !important;
181 | }
182 |
183 | .sepButton:hover {
184 | opacity: 0.8;
185 | }
186 |
187 | .editMode i
188 | {
189 | display:inline-block;
190 | }
191 | .editMode-cancel::before
192 | {
193 | content: 'Cancel' !important;
194 | margin-right: 40px !important;
195 | font-size: small !important;
196 | font-weight: bold !important;
197 | font-family: OpenSans !important;
198 | }
199 |
200 | .hotkey {
201 | position: absolute;
202 | top: 0.5em;
203 | right: 0.5em;
204 | font-size: 0.7em;
205 | }
206 |
--------------------------------------------------------------------------------
/Content/font/OpenSans-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ray-lothian/Layout-Resizer/5d7626640818e44ef00ea6ef6fb261c9fab43544/Content/font/OpenSans-Regular.woff2
--------------------------------------------------------------------------------
/Content/font/Vollkorn-Regular.ttf:
--------------------------------------------------------------------------------
1 | GDEFJ �h �GPOS�lҴ � (GSUB6*3J � OS/2�b� � `cmap��9� � "cvt � �
� $fpgmY�7 � sgasp g
2 | �X glyf$�@
� ��head���� 6hhea?� T $hmtx�J+[ � �loca�3�* �� �maxp� x name�N� �p 1post��g> Ĥ �prepm��|
@ � Bt��_<� � ȪT8 Ȱ�������� ��G
3 | ������ � � � u
4 | s �� �� ��� � ) � � /P �C FA @ ���
5 | �� �� " � 5� � � � 2� 2� 2� 2� 2� 2� 2� &#
6 | � (� (2 ( +� (� (� (� (� (V $� )S #. $@��D $9��*��@ $
! #, #t $T $T $ ( ( ( ( ( ( (<