diff --git a/web/pgadmin/static/css/pgadmin.style.css b/web/pgadmin/static/css/pgadmin.style.css new file mode 100644 index 00000000..355d8954 --- /dev/null +++ b/web/pgadmin/static/css/pgadmin.style.css @@ -0,0 +1,355 @@ +/*doc +--- +title: Alerts +name: alerts +category: alerts +--- + +```html_example +
+
+
+
+ +
+
+ Successfully run. Total query runtime: 32 msec. 1 row retrieved +
+
+
+
+ +
+
+
+
+ +
+
+ Error retrieving properties - INTERNAL SERVER ERROR +
+
+
+
+ +
+
+
+
+ This is a neutral message +
+
+
+
+ + +``` +*/ +.alert-box { + padding: 15px; } + +.alert-icon { + display: table-cell; } + +.alert-text { + display: table-cell; + padding-left: 10px; } + +.alert-info { + border-color: #84acdd; } + +/*doc +--- +title: Grays +name: Grays +category: colors +--- +For text, avoid using black or #000 to lower the contrast between the background and text. + +```html_example +
+
+
+
+ #f9f9f9 +
+
+
+
+ #e8e8e8 +
+
+
+
+ #cccccc +
+
+
+
+ #888888 +
+
+
+
+ #555555 +
+
+
+
+ #333333 +
+
+
+
+``` + +*/ +.color-chip { + align-items: center; + border-radius: 3px; + box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.15); + color: rgba(0, 0, 0, 0.65); + display: flex; + font-size: 1.25em; + height: 100px; + justify-content: center; + margin: 0 0 1em; + width: 100%; } + +.bg-gray-1 { + background-color: #f9f9f9; } + +.bg-gray-2 { + background-color: #e8e8e8; } + +.bg-gray-3 { + background-color: #cccccc; } + +.bg-gray-4 { + background-color: #888888; } + +.bg-gray-5 { + background-color: #555555; } + +.bg-gray-6 { + background-color: #333333; } + +.font-white { + color: #FFFFFF; } + +.font-gray-3 { + color: #cccccc; } + +.font-gray-4 { + color: #888888; } + +.border-gray-3 { + border: 2px solid #cccccc; } + +/*doc +--- +title: Typography +name: typography +category: typography +--- + +Font Typography + +```html_example_table +
+ Body 14 px Helvetica Neue +
+ +
+ Body 14 px Helvetica Neue bold +
+ +
+ Body 13 px Helvetica Neue +
+ +
+ Body 13 px Helvetica Neue bold +
+ +
+ Body 12 px Helvetica Neue +
+ +
+ Body 12 px Helvetica Neue bold +
+ +
+ Body 11 px Helvetica Neue +
+ +
+ Body 11 px Helvetica Neue bold +
+``` + +*/ +.text-bold { + font-weight: bold; } + +.text-14 { + font-family: "Helvetica Neue"; + font-size: 14px; } + +.text-13 { + font-family: "Helvetica Neue"; + font-size: 13px; } + +.text-12 { + font-family: "Helvetica Neue"; + font-size: 12px; } + +.text-11 { + font-family: "Helvetica Neue"; + font-size: 11px; } + +/*doc +--- +title: PGAdmin +name: pgadmin +category: pgadmin +--- +Green juice vaporware echo park, craft beer lyft tattooed sustainable. Meh skateboard seitan lumbersexual typewriter, flannel art party swag gluten-free blue bottle disrupt forage tacos thundercats chillwave. +*/ +/*doc +--- +title: Primary blue +name: colors-primaryblue +category: colors +--- +This color should be used to call attention to the main part of the app. Use sparingly. + +```html_example +
+
+
+
+ #2c76b4 +
+
+
+
+ +``` + +*/ + +.bg-primary-blue { + background-color: #2c76b4; } + +/*doc +--- +title: Overview +name: colors-overview +category: colors +--- + +Below are the colors for pgadmin4. To use, copy and paste the hex codes into the CSS. + +The current app may have more colors than what is included here. When a color is encountered in the app that is not documented here, default to replacing that color with one that is documented here. + + +*/ +/*doc +--- +title: Others +name: z-othercolors +category: colors +--- +These colors should be used to highlight hover options in dropdown menus and catalog browser or to tell the user when something is right or wrong. + + +```html_example +
+
+
+
+ #e7f2ff +
+
+
+
+ #84acdd +
+
+
+
+
+
+
+
+
+ #f2dede +
+
+
+
+ #ecccd1 +
+
+
+
+ #d0021b +
+
+
+
+
+
+
+
+
+ #dff0d7 +
+
+
+
+ #d6eac5 +
+
+
+
+ #3a773a +
+
+
+
+``` + +*/ + +.bg-highlight { + background-color: #e7f2ff; } + +.bg-border { + background-color: #84acdd; } + +.bg-red-1 { + background-color: #f2dede; } + +.bg-red-2 { + background-color: #ecccd1; } + +.bg-red-3 { + background-color: #d0021b; } + +.bg-green-1 { + background-color: #dff0d7; } + +.bg-green-2 { + background-color: #d6eac5; } + +.bg-green-3 { + background-color: #3a773a; } + +.font-white { + color: #FFFFFF; } + +.opacity-5 { + opacity: 0.5; } \ No newline at end of file