component-tree.json

[
	{
		"name": "Main Container",
		"description": "Affects the main container/body of the site. You can change the main background from here.",
		"selector": "body",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "GrowStocks Loading Icon",
		"description": "Affects the loading icon that can be seen when going through different pages",
		"selector": ".gsLoading",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "GrowStocks Loading Icon Text",
		"description": "Affects the loading icon's text that can be seen when going through different pages",
		"selector": ".gsLoading span",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Header",
		"description": "Affects the container of the GrowStocks' Logo",
		"selector": "header",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Navigation Bar",
		"description": "Affects the navigation bar",
		"selector": "#id1",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Navigation Bar Item or Link",
		"description": "Affects the navigation bar's links (not including the search button)",
		"selector": ".navBar #navWrap .navContent, .navBar #navWrap .navContent i",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Navigation Bar Active Page",
		"description": "Affects the current active link in the navigation bar",
		"selector": ".navBar .active",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Search Button",
		"description": "Affects the search button located in the navigation bar",
		"selector": "#searchButton",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Search Button Icon",
		"description": "Affects the search button's icon (the magnifying glass)",
		"selector": "#searchButton > em",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Search Bar",
		"description": "Affects the search bar container (shown when the search button was clicked)",
		"selector": "#searchForm",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Search Bar Input",
		"description": "Affects the search bar input element",
		"selector": "#searchForm input",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Search Bar Buttons",
		"description": "Affects the search bar button elements (the cross & magnifying glass icon)",
		"selector": "#searchForm button",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Title Bar",
		"description": "Affects the title bars, these elements contains the title containers such as the \"Daily Quest\" container that can be seen on the homepage.",
		"selector": ".titleBar2, .titleBar3, .titleBar",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Title Bar Text",
		"description": "Affects the title bars' text, these elements contains the title containers such as the \"Daily Quest\" container that can be seen on the homepage.",
		"selector": ".titleBar2 *, .titleBar3 *, .titleBar *",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Title Bar Growtopia Button",
		"description": "Affects the huge growtopia-like button that can be found on title bars (commonly seen on website announcement container)",
		"selector": ".titleBar2 a.growButton",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Title Bar: FAQ Container",
		"description": "Affects the title bars in the FAQ page",
		"selector": ".openFaq",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Title Bar: FAQ Container Text",
		"description": "Affects the title bars' text in the FAQ page",
		"selector": ".openFaq *",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Item Chip Base",
		"description": "Affects the main items container",
		"selector": ".itemChipHead",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Item Chip Base Text",
		"description": "Affects all of the text content in the item container",
		"selector": ".itemChipHead p, .itemChipHead b, .itemChipHead h2, .itemChipHead h4, .itemChipHead a, .itemChipHead small",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Item Chip Base Button",
		"description": "Affects the main items container's buttons such as the report button at the top right corner of the container",
		"selector": ".itemChipHead button",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Item Chip Base Button Text",
		"description": "Affects the main items container's buttons text such as the report button at the top right corner of the container",
		"selector": ".itemChipHead button *",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Item Chip Base Heading or Title",
		"description": "Affects the heading/title elements in an item container",
		"selector": ".itemChipHead h2",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Item Chip Base Item Name",
		"description": "Affects the item name element in an item container",
		"selector": ".itemChipHead a.itemLink",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Item Information Container",
		"description": "Affects the item information container that can be found on an item's page",
		"selector": ".infoBlock-items",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Item Information Status: Success",
		"description": "Affects the status indicator in the item information container",
		"selector": ".greenRow, .greenRow *",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Item Information Status: Warning",
		"description": "Affects the status indicator in the item information container",
		"selector": ".yellowRow, .yellowRow *, .orangeRow, .orangeRow *",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Item Information Status: Error",
		"description": "Affects the status indicator in the item information container",
		"selector": ".redRow, .redRow *",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Item Information Status: Information",
		"description": "Affects the status indicator in the item information container",
		"selector": ".blueRow, .blueRow *",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Float Buttons",
		"description": "Affects the buttons that can be found on the Shop & Marketplace page",
		"selector": ".floatButton2, .floatButton",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Float Buttons Text",
		"description": "Affects the buttons's text that can be found on the Shop & Marketplace page",
		"selector": ".floatButton2 *, .floatButton2 p",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},	
	{
		"name": "Float Buttons: Buy Item Button",
		"description": "Affects the buy item button that can be found on the Marketplace page",
		"selector": ".floatButton.buyBtn",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},	
	{
		"name": "Float Buttons: Buy Item Button Text",
		"description": "Affects the buy item button's text that can be found on the Marketplace page",
		"selector": ".floatButton.buyBtn p",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},	
	{
		"name": "Float Buttons: Sell Item Button",
		"description": "Affects the sell item button that can be found on the Marketplace page",
		"selector": ".floatButton.sellBtn",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},	
	{
		"name": "Float Buttons: Sell Item Button Text",
		"description": "Affects the sell item button's text that can be found on the Marketplace page",
		"selector": ".floatButton.sellBtn p",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},	
	{
		"name": "Float Buttons: Find Offer Button",
		"description": "Affects the find offer button that can be found on the Marketplace page",
		"selector": ".floatButton.findOffer",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},	
	{
		"name": "Float Buttons: Find Offer Button Text",
		"description": "Affects the find offer button's button that can be found on the Marketplace page",
		"selector": ".floatButton.findOffer p",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Footer",
		"description": "Affects the footer of the site",
		"selector": "footer",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Footer Text",
		"description": "Affects the footer's text",
		"selector": "footer p, footer h4, footer a, footer em",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Footer Heading",
		"description": "Affects the footer's headings such as the \"GrowStocks\" text",
		"selector": "footer p, footer h4, footer a, footer em",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Footer Links",
		"description": "Affects the links found in the footer (e.g Status, Privacy Policy, etc.)",
		"selector": "footer .varLinks a p, footer .varLinks2 a p",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	},
	{
		"name": "Footer Social Links",
		"description": "Affects the social media links",
		"selector": "footer .socials a",
		"styles": {
			"background": "",
			"color": "",
			"border-radius": "",
			"box-shadow": ""
		}
	}
]