Şablon:Anasayfa/bicem2.css

/**

* WikimediaUI Base v0.21.0
* Wikimedia Foundation user interface base variables
* https://gerrit.wikimedia.org/g/wikimedia-ui-base/
*
* See also https://design.wikimedia.org/style-guide/
*/

// == Breakpoints == // The following numbers are prone to change with new information.

// Minimum available screen width at which a device can be considered a mobile device // Many older feature phones have screens smaller than this value. @width-breakpoint-mobile: 320px;

// Minimum available screen width at which a device can be considered a tablet // The number is currently based on the device width of a Samsung Galaxy S5 mini and is low // enough to cover iPad (768px). @width-breakpoint-tablet: 720px;

// Minimum available screen width at which a device can be considered a desktop. @width-breakpoint-desktop: 1000px;

// Wider desktop breakpoint, currently used in Flow. @width-breakpoint-desktop-wide: 1200px;

// Extra wide desktop breakpoint @width-breakpoint-desktop-extrawide: 2000px;

// == Colors == // WikimediaUI (`wmui`) color palette // See https://design.wikimedia.org/style-guide/visual-style_colors.html // Don't use those variables directly, instead define your vars // referring to them as applied further below.

@wmui-color-base0: #000; // = HSB 0°, 0%, 0% @wmui-color-base10: #202122; // = HSB 210°, 6%, 13% @wmui-color-base20: #54595d; // = HSB 207°, 10%, 36%; WCAG 2.0 level AAA 7.09:1 contrast ratio on `#fff` @wmui-color-base30: #72777d; // = HSB 210°, 9%, 49%; WCAG 2.0 level AA at 4.52:1 contrast ratio on `#fff` @wmui-color-base50: #a2a9b1; // = HSB 212°, 8%, 69% @wmui-color-base70: #c8ccd1; // = HSB 213°, 4%, 82% @wmui-color-base80: #eaecf0; // = HSB 220°, 3%, 94% @wmui-color-base90: #f8f9fa; // = HSB 210°, 1%, 98% @wmui-color-base100: #fff; // = HSB 0°, 0%, 100%

@wmui-color-accent30: #2a4b8d; // = HSB 220°, 70%, 55% @wmui-color-accent50: #36c; // = HSB 220°, 75%, 80% @wmui-color-accent90: #eaf3ff; // = HSB 214°, 8%, 100%

@wmui-color-red30: #b32424; // = HSB 360°, 80%, 70% @wmui-color-red50: #d33; // = HSB 360°, 77%, 87% @wmui-color-red90: #fee7e6; // = HSB 3°, 9%, 100%

@wmui-color-yellow30: #ac6600; // = HSB 36°, 100%, 67% @wmui-color-yellow50: #edab00; // = HSB 43°, 100%, 93% @wmui-color-yellow90: #fef6e7; // = HSB 39°, 9%, 100%

@wmui-color-green30: #14866d; // = HSB 167°, 85%, 53% @wmui-color-green50: #00af89; // = HSB 167°, 100%, 69% @wmui-color-green90: #d5fdf4; // = HSB 166°, 16%, 99%

// Note, this color is part of the Codex Design System, under different naming scheme. @wmui-color-green700: #096450;

// Modifier colors, not part of official palette, limited to interaction state usage. @wmui-color-base10--lighten: #404244; @wmui-color-accent50--lighten: #447ff5; // = `lighten( @color-primary, 3 )` @wmui-color-red50--lighten: #ff4242; // ~= `filter: brightness( 120% )` @wmui-color-green50--lighten: #1c6665; @wmui-color-purple50: #6b4ba1;

// From here on no static color values, only variable references. // Background Colors @background-color-base: @wmui-color-base100; @background-color-base--hover: @wmui-color-base80; @background-color-base--disabled: @wmui-color-base80; @background-color-base--read-only: @wmui-color-base90; @background-color-code: @wmui-color-base90; // 'Framed' UI elements (Framed Buttons, Dropdowns, ToggleSwitches…) @background-color-framed: @wmui-color-base90; @background-color-framed--hover: @wmui-color-base100; @background-color-framed--active: @wmui-color-base80; // 'Filled' UI elements (Checkboxes, Radios, ProgressBars…) @background-color-filled--disabled: @wmui-color-base70; // Binary Input elements (Checkboxes, Radios, Toggle Switches) @background-color-input-binary--active: @color-primary--active; @background-color-input-binary--checked: @color-primary; // Quiet Buttons @background-color-quiet: @background-color-base; // Use `rgba()` values here as the quiet buttons need to blend in with background. @background-color-quiet--hover: rgba( 0, 24, 73, ( 7 / 255 ) ); // = `@wmui-color-base90` on white. @background-color-quiet--active: rgba( 0, 24, 73, ( 21 / 255 ) ); // = `@wmui-color-base80` on white. // Toolbar and Tools @background-color-toolbar: @background-color-base; @background-color-tool--hover: @background-color-base--hover; @background-color-tool--active: @background-color-primary; @background-color-tool--active-hover: @background-color-primary--hover; // Tabs Navigation Background Color @background-color-tabs: @wmui-color-base80; // User system messages (errors, warnings, successes, notices) @background-color-error--framed: @wmui-color-red90; @background-color-warning--framed: @wmui-color-yellow90; @background-color-success--framed: @wmui-color-green90; @background-color-notice--framed: @wmui-color-base80; // Highlight Colors for text highlighting, think metaphorically text marker @background-color-highlight: rgba( 255, 182, 13, 0.4 ); // Equals to `#ffe29e` on `#fff` background.

// Foreground Colors @color-base: @wmui-color-base10; @color-base--hover: @wmui-color-base10--lighten; @color-base--active: @wmui-color-base0; @color-base--inverted: @wmui-color-base100; @color-base--emphasized: @wmui-color-base0; @color-base--subtle: @wmui-color-base30; @color-base--disabled: @wmui-color-base30; @color-filled--disabled: @color-base--inverted; @color-accessory: @wmui-color-base20; @color-placeholder: @wmui-color-base30; // Primary 'Progressive' Color, Background Color and states @background-color-primary: @wmui-color-accent90; @background-color-primary--hover: rgba( 41, 98, 204, 0.1 ); @color-primary: @wmui-color-accent50; @color-primary--hover: @wmui-color-accent50--lighten; @color-primary--active: @wmui-color-accent30; @color-primary--focus: @color-primary; // 'Destructive' Color, Background Color and states @background-color-destructive: @wmui-color-red90; @color-destructive: @wmui-color-red50; @color-destructive--hover: @wmui-color-red50--lighten; @color-destructive--active: @wmui-color-red30; @color-destructive--focus: @color-destructive; // Secondary Color and states (links only) @color-secondary: @wmui-color-green50; @color-secondary--hover: @wmui-color-green50--lighten; @color-secondary--active: @wmui-color-green30; @color-secondary--focus: @color-secondary; // User system messages (errors, warnings, successes, notices) @color-error: @wmui-color-red50; @color-warning: @wmui-color-base0; @color-success: @wmui-color-green30; @color-success--framed: @wmui-color-base0; @color-notice: @wmui-color-base0; // Toolbar and Tools @color-tool--hover: @color-base--emphasized; // Used here in combination with `:hover` background-color turning light grey @color-tool--active: @color-primary;

// Opacity @opacity-base: 1; @opacity-icon-base: 0.87; // = `#222` on `background-color: #fff`, closest to `#202122` @opacity-icon-base--hover: 0.74; // = `#424242` on `background-color: #fff`, closest to `#404244` @opacity-icon-base--selected: 1; @opacity-icon-base--disabled: 0.51; // = `#7d7d7d` on `background-color: #fff`, closest to `#72777d`. HSB 0°, 0%, 49%. @opacity-icon-accessory: 0.67; // = `#555`, closest to `#54595d` on background-color `#fff`.

// == Positioning == // Positioning Model // Use `px` unit to prevent pixel rounding error when using `@size-input-binary / 4`. // Works with different sizes on mobile and desktop as it negatively offsets from outside. @position-offset-input-radio-focus: -4px;

// Z-Index @z-index-base: 0; @z-index-overlay: 101;

// == Box Model properties == // Box Sizing @box-sizing-base: border-box;

// `@*size` variables are used for `*width` & `*height` properties. @min-size-base: 32px; // Values used for `min-*` are defined in `px`, see T130691. @size-base: 32px; @size-full: 100%;

@min-size-icon: 20px; @size-icon: 20px; @min-size-indicator: 12px; @size-indicator: 12px; @size-input-binary: 20px; @size-tool: 42px;

// Max Widths @max-width-base: 50em; @max-width-button: 28.75em; // = `460px` at `16px` base, see T95367 @max-width-input: @max-width-base; @max-width-input-inline: 100%;

// Border @border-base: @border-width-base @border-style-base @border-color-base; @border-dialog: @border-base; @border-menu: @border-base; @border-input-binary: @border-width-base @border-style-base @border-color-input-binary; // User system messages (errors, warnings, successes, notices) @border-error: @border-width-base @border-style-base @border-color-error; @border-warning: @border-width-base @border-style-base @border-color-warning; @border-success: @border-width-base @border-style-base @border-color-success; @border-notice: @border-base; // Border Colors @border-color-base: @wmui-color-base50; @border-color-base--hover: @wmui-color-base50; @border-color-base--active: @wmui-color-base30; @border-color-base--focus: @color-primary--focus; @border-color-base--disabled: @wmui-color-base70;

@border-color-filled--disabled: @color-filled--disabled; // Border Colors primary buttons @border-color-primary: @color-primary; @border-color-primary--hover: @color-primary--hover; @border-color-primary--active: @color-primary--active; @border-color-primary--focus: @border-color-primary; @border-color-destructive: @color-destructive; @border-color-destructive--hover: @color-destructive--hover; @border-color-destructive--active: @color-destructive--active; @border-color-destructive--focus: @border-color-destructive; @border-color-inset--focus: @color-base--inverted; @border-color-input--hover: @border-color-base--active; @border-color-input-binary: @border-color-base--active; @border-color-input-binary--active: @color-primary--active; @border-color-input-binary--checked: @color-primary; @border-color-heading: @wmui-color-base70; @border-color-divider: @wmui-color-base50; @border-color-wikitable: rgba( 84, 89, 93, 0.3 ); // See T168029 // Border Colors user system messages @border-color-error: @wmui-color-red30; @border-color-warning: @wmui-color-yellow30; @border-color-success: @wmui-color-green700; @border-color-notice: @wmui-color-base20; // Border Styles @border-style-base: solid; // Border Widths @border-width-base: 1px; // Border Radius @border-radius-base: 2px; // Use for circle or ellipsis. // See https://stackoverflow.com/a/29966500 @border-radius-circle: 50%; // Use for rounded rectangle. // Corner overlap reduce radii to half of size of smallest side. // See https://www.w3.org/TR/css-backgrounds-3/#corner-overlap @border-radius-round: 9999px; @border-radius-input-radio: @border-radius-circle;

// Paddings @padding-base: @padding-vertical-base @padding-horizontal-base; @padding-input-text: @padding-vertical-base @padding-horizontal-input-text; @padding-horizontal-base: 12px; // Must be < `8` as it cuts off scripts like Burmese. Directly connected to `line-height` further down. @padding-vertical-base: 5px; @padding-horizontal-input-text: 8px; // Menu items don't have a border. So add it to padding. @padding-vertical-menu: @padding-vertical-base + @border-width-base;

// Box Shadows // Base `box-shadow` set to `transparent` for transition purpose. @box-shadow-base: inset 0 0 0 1px transparent; @box-shadow-base--focus: inset 0 0 0 1px @wmui-color-accent50; @box-shadow-primary--focus: inset 0 0 0 1px @color-primary, inset 0 0 0 2px @color-base--inverted; @box-shadow-destructive--focus: inset 0 0 0 1px @color-destructive, inset 0 0 0 2px @color-base--inverted; @box-shadow-filled--disabled: inset 0 0 0 1px @color-filled--disabled; @box-shadow-card: 0 1px 1px rgba( 0, 0, 0, 0.15 ); @box-shadow-dialog: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 ); @box-shadow-menu: @box-shadow-dialog;

// Outlines // Enable Windows high contrast mode on certain widgets, that have default outlines overridden. @outline-base--focus: @border-width-base @border-style-base transparent;

// == Typography incl. print properties == // See https://design.wikimedia.org/style-guide/visual-style_typography.html // Font Families @font-family-base: @font-family-sans; @font-family-heading-main: @font-family-serif; // To be deprecated, see T247166. @font-family-sans: 'Helvetica Neue', 'Helvetica', 'Liberation Sans', 'Arial', sans-serif; @font-family-sans--fallback: sans-serif; // Provide better operating system-specific readability, see T175877. // `system-ui` is currently not an option due to OS/language combination issues, see T175877#4776576. @font-family-system-sans: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Inter', 'Helvetica', 'Arial', sans-serif; @font-family-serif: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif; @font-family-serif--fallback: serif; // Provide better operating system-specific monospace stack, see T209915. @font-family-monospace: 'Menlo', 'Consolas', 'Liberation Mono', 'Fira Code', 'Courier New', monospace; @font-family-monospace--fallback: monospace, monospace; // See T176636. // Font Weights @font-weight-base: @font-weight-normal; // See https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Common_weight_name_mapping @font-weight-hairline: 100; @font-weight-light: 300; @font-weight-normal: 400; @font-weight-semi-bold: 600; @font-weight-bold: 700; // Line Heights @line-height-base: 1.6; @line-height-heading: 1.375; @text-decoration-link--hover: none; // Text Shadows @text-shadow-base: 0 1px 1px @color-base--inverted; // 'coined' effect @text-shadow-base--disabled: @text-shadow-base;

// == Other Properties == // Cursors @cursor-base--disabled: default;

// == Animation & Transition == // Transitions @transition-base: @transition-duration-base; // `ease` is the initial value

// Transitions > Durations @transition-duration-base: 100ms; @transition-duration-medium: 250ms;

// == Deprecated variables == // Since v0.22.0 @opacity-base--disabled: @opacity-icon-base--disabled; // Use non-shorthand properties instead. @transition-ease-medium: @transition-duration-medium; // `ease-out` is preferably used on human initiated transitions, for example dialogs @transition-ease-out-medium: ease-out @transition-duration-medium;