Greasy Fork

Shined up real nice.

Greasy Fork is available in English.

Add_CSS

Makes it easier to style pages

لا ينبغي أن لا يتم تثبيت هذا السكريت مباشرة. هو مكتبة لسكبتات لتشمل مع التوجيه الفوقية // @require https://greasyfork.org/scripts/35370-add-css/code/Add_CSS.js?version=260201

الإعلانات
المؤلف
Dan WL (DanWL)
التقييمات
0 0 0
الإصدار
1.2
تم إنشاؤه
تم تحديثه
الترخيص
لا يوجد
ينطبق على
جميع المواقع

وصف المؤلف

Makes it easier to add CSS to pages.

Examples of usage:
To give #MyDiv a width of 100%-
Either:
AddCss(`'#MyDiv{width: 100%;}`);
Or:
AddCss(['#MyDiv', ['width', '100%']]);
This outputs
#MyDiv
{
	width: 100%;
}
To give #MyDiv a width of 100% and a height of 300px and give #MySecondDiv a width of 50%-
Either:
AddCss(`
MyDiv {
	width: 100%;
	height: 300px;
}

#MySecondDiv {
	width: 50%;
}`);
Or:
AddCss(['#MyDiv', ['width', '100%'], ['height', '300px'], '#MySecondDiv', ['width', '50%']]);
This outputs
#MyDiv
{
	width: 100%;
	height: 300px;
}

#MySecondDiv
{
	width: 50%;
}
To make #MyDiv display flex in a column layout-
Either:
AddCss(`#MyDiv {
	display: -webkit-flex;
	display: -ms-flex;
	display: -o-flex;
	display: -moz-flex;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	-moz-flex-direction: column;
	flex-direction: column;
}`);
Or:
AddCss(['#MyDiv', ['display', 'flex', null], ['flex-direction', 'column', true]]);
This outputs
#MyDiv
{
	display: -webkit-flex;
	display: -ms-flex;
	display: -o-flex;
	display: -moz-flex;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	-moz-flex-direction: column;
	flex-direction: column;
}
To make it so that when the maximum window with is 340px, make #MyDiv have a width of 100% and also give #MySecondDiv a width of 50%-
Either:
AddCss(`@media all and (max-width: 340px) {
	#MyDiv
	{
		width: 100%;
	}

	#MySecondDiv
	{
		width: 50%;
	}
}`);
Or
AddMediaQuery(340, ['#MyDiv', ['width', '100%'], '#MySecondDiv', ['width', '50%']]);
This outputs
@media all and (max-width: 340px)
{
	#MyDiv
	{
		width: 100%;
	}

	#MySecondDiv
	{
		width: 50%;
	}
}