NEW site TK023
Boris Voropaev
parent
306962c5cd
commit
8d672228b4
143
angular.json
143
angular.json
|
|
@ -456,10 +456,150 @@
|
|||
"node_modules/swiper/swiper-bundle.css"
|
||||
],
|
||||
"index": "src/gbu/index.html"
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
"tk023": {
|
||||
"buildOptimizer": false,
|
||||
"optimization": false,
|
||||
"vendorChunk": true,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true,
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/tk023.env.dev.ts"
|
||||
},
|
||||
{
|
||||
"replace": "src/app/_modules/layout/grid/grid.component.ts",
|
||||
"with": "src/tk023/component/layout/grid/grid.component.ts"
|
||||
},
|
||||
{
|
||||
"replace": "src/app/_modules/layout/header/header.component.ts",
|
||||
"with": "src/tk023/component/layout/header/header.component.ts"
|
||||
},
|
||||
{
|
||||
"replace": "src/app/_modules/layout/jumbotron/jumbotron.component.ts",
|
||||
"with": "src/tk023/component/layout/jumbotron/jumbotron.component.ts"
|
||||
},
|
||||
{
|
||||
"replace": "src/app/_modules/layout/right-content/right-content.component.ts",
|
||||
"with": "src/tk023/component/layout/right-content/right-content.component.ts"
|
||||
},
|
||||
{
|
||||
"replace": "src/app/_modules/layout/footer/footer.component.ts",
|
||||
"with": "src/tk023/component/layout/footer/footer.component.ts"
|
||||
},
|
||||
{
|
||||
"replace": "src/app/_modules/pages/menu/slider-menu/slider-menu.component.ts",
|
||||
"with": "src/tk023/component/pages/menu/slider-menu/slider-menu.component.ts"
|
||||
},
|
||||
{
|
||||
"replace": "src/app/_modules/registries/registry/entries/entry/registry-entry.component.ts",
|
||||
"with": "src/tk023/component/registries/registry/entries/entry/registry-entry.component.ts"
|
||||
}
|
||||
],
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "node_modules/tinymce",
|
||||
"output": "/tinymce/"
|
||||
},
|
||||
"src/favicon.ico",
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "src/tk023/",
|
||||
"output": "/assets/"
|
||||
}
|
||||
],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
"src/tk023/css"
|
||||
]
|
||||
},
|
||||
"styles": [
|
||||
"src/styles.scss",
|
||||
"node_modules/swiper/swiper-bundle.css"
|
||||
],
|
||||
"index": "src/tk023/index.html"
|
||||
},
|
||||
|
||||
"tk023-prod": {
|
||||
"buildOptimizer": false,
|
||||
"optimization": false,
|
||||
"vendorChunk": true,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true,
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/tk023.env.prod.ts"
|
||||
},
|
||||
{
|
||||
"replace": "src/app/_modules/layout/grid/grid.component.ts",
|
||||
"with": "src/tk023/component/layout/grid/grid.component.ts"
|
||||
},
|
||||
{
|
||||
"replace": "src/app/_modules/layout/header/header.component.ts",
|
||||
"with": "src/tk023/component/layout/header/header.component.ts"
|
||||
},
|
||||
{
|
||||
"replace": "src/app/_modules/layout/jumbotron/jumbotron.component.ts",
|
||||
"with": "src/tk023/component/layout/jumbotron/jumbotron.component.ts"
|
||||
},
|
||||
{
|
||||
"replace": "src/app/_modules/layout/right-content/right-content.component.ts",
|
||||
"with": "src/tk023/component/layout/right-content/right-content.component.ts"
|
||||
},
|
||||
{
|
||||
"replace": "src/app/_modules/layout/footer/footer.component.ts",
|
||||
"with": "src/tk023/component/layout/footer/footer.component.ts"
|
||||
},
|
||||
{
|
||||
"replace": "src/app/_modules/pages/menu/slider-menu/slider-menu.component.ts",
|
||||
"with": "src/tk023/component/pages/menu/slider-menu/slider-menu.component.ts"
|
||||
},
|
||||
{
|
||||
"replace": "src/app/_modules/registries/registry/entries/entry/registry-entry.component.ts",
|
||||
"with": "src/tk023/component/registries/registry/entries/entry/registry-entry.component.ts"
|
||||
}
|
||||
],
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "node_modules/tinymce",
|
||||
"output": "/tinymce/"
|
||||
},
|
||||
"src/favicon.ico",
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "src/tk023/",
|
||||
"output": "/assets/"
|
||||
}
|
||||
],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
"src/tk023/css"
|
||||
]
|
||||
},
|
||||
"styles": [
|
||||
"src/styles.scss",
|
||||
"node_modules/swiper/swiper-bundle.css"
|
||||
],
|
||||
"index": "src/tk023/index.html"
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
|
|
@ -480,6 +620,9 @@
|
|||
},
|
||||
"gbu": {
|
||||
"browserTarget": "front:build:gbu"
|
||||
},
|
||||
"tk023": {
|
||||
"browserTarget": "front:build:tk023"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
// This file can be replaced during build by using the `fileReplacements` array.
|
||||
// `ng build` replaces `environment.ts` with `environment.prod.ts`.
|
||||
// The list of file replacements can be found in `angular.json`.
|
||||
|
||||
export const environment = {
|
||||
production: false,
|
||||
apiUrl: 'http://api.nircms.lc',
|
||||
clientId: 4,
|
||||
clientSecret: 'KmGnhqVbEi3wlzkEyXi1JeNg9FtswdOdKQHpOcAu',
|
||||
project: null,
|
||||
licence: 'POUFLO4YW7SU',
|
||||
defaultLocale: 'ru'
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
* For easier debugging in development mode, you can import the following file
|
||||
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
|
||||
*
|
||||
* This import should be commented out in production mode because it will have a negative impact
|
||||
* on performance if an error is thrown.
|
||||
*/
|
||||
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
export const environment = {
|
||||
production: true,
|
||||
apiUrl: 'https://api-vniigaz-cert-v2.testnir.ru',
|
||||
clientId: 2,
|
||||
clientSecret: 'uMYJ7jTYfSKst631D9gKlSwlNF0bWlcrR1d5mTKX',
|
||||
project: null,
|
||||
licence: '',
|
||||
defaultLocale: 'ru'
|
||||
};
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<div class="footer layout-corral">
|
||||
<div class="footer-contact-left">
|
||||
<a routerLink="/"><img src="assets/images/logo_gbu.png"></a>
|
||||
<div class="footer-contact-left-name">
|
||||
<span>Государственное бюджетное<br>учреждение города Москвы</span><br>
|
||||
<strong>«Жилищник Таганского района»</strong>
|
||||
</div>
|
||||
<div class="footer-contact-left-license">
|
||||
Все материалы сайта доступны по лицензии Creative Commons Attribution 3.0 при условии ссылки на первоисточник.
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-contact-right">
|
||||
<a href="">Политика обработки персональных данных</a>
|
||||
<a href="">Техническая поддержка</a>
|
||||
<a href="">Соглашение о пользовании информационными системами и ресурсами города Москвы</a>
|
||||
</div>
|
||||
<div class="footer-down">
|
||||
<div>
|
||||
© 2017–2024, ГБУ «Жилищник»
|
||||
</div>
|
||||
<div>
|
||||
Работает на платформе НИР
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'footer',
|
||||
templateUrl: 'footer.component.html',
|
||||
styleUrls: ['footer.component.scss']
|
||||
})
|
||||
export class FooterComponent {
|
||||
constructor() {
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<router-outlet name="auth"></router-outlet>
|
||||
<router-outlet name="slider"></router-outlet>
|
||||
|
||||
<div class="wrapper" [class.this-root-page] = "isRootPage">
|
||||
<header class="space"></header>
|
||||
<jumbotron></jumbotron>
|
||||
<div class="space content-sapce">
|
||||
<div class="content-grid layout-corral">
|
||||
<!-- <left-content></left-content> -->
|
||||
<div class="main-content">
|
||||
<div *ngIf="isRootPage" class="main-news">
|
||||
<div *ngFor="let publications of news" class="main-news-item">
|
||||
<a [routerLink]="publications.link" class="main-news-item-header">
|
||||
<h3>{{publications.name}}</h3>
|
||||
</a>
|
||||
<a *ngFor="let page of publications.publications" class="main-news-item-card" [routerLink]="page.link">
|
||||
<img src="{{page.img}}">
|
||||
<span>{{page.date}}</span>
|
||||
<h4>{{page.name}}</h4>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<right-content *ngIf="currentPage"></right-content>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="space"></footer>
|
||||
<!-- <footer class="space"></footer> -->
|
||||
</div>
|
||||
<fullscreen-gallery></fullscreen-gallery>
|
||||
<cms-dialog dir="ltr"></cms-dialog>
|
||||
|
|
@ -0,0 +1 @@
|
|||
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {Subscription} from "rxjs";
|
||||
import {ListsService} from "@app/_services";
|
||||
import { PagesService } from '@app/_services/pages.service';
|
||||
import {PublicationsService} from "@app/_services/publications.service";
|
||||
|
||||
@Component({
|
||||
selector: 'grid',
|
||||
templateUrl: 'grid.component.html',
|
||||
styleUrls: ['grid.component.scss']
|
||||
})
|
||||
export class GridComponent {
|
||||
|
||||
public classActive = '';
|
||||
|
||||
public bright: number = 150;
|
||||
public contrast: number = 100;
|
||||
|
||||
public news:any;
|
||||
|
||||
subscription?: Subscription;
|
||||
|
||||
constructor(
|
||||
private listsService: ListsService, private pagesService: PagesService, private publicationsService: PublicationsService
|
||||
) {
|
||||
}
|
||||
get currentPage(){
|
||||
return this.pagesService.currentPage
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.pagesService.currentPageSubject.subscribe(
|
||||
currentPage=>{
|
||||
if(currentPage && this.isRootPage){
|
||||
console.log('currentPage',currentPage.link)
|
||||
this.pagesService.find(currentPage.link,{include: 'children.children'}).subscribe(
|
||||
resp=> {
|
||||
let children = resp.data.children.data;
|
||||
console.log('children',children)
|
||||
this.news = children.find(
|
||||
(child:any) => {
|
||||
console.log('child',child)
|
||||
if (!child.children.data.length) {
|
||||
console.log('notChild',child)
|
||||
return false
|
||||
} else {
|
||||
return child.children.data.reduce(
|
||||
(resp:boolean, page:any ) =>{
|
||||
return resp && page.type.name == 'publications'
|
||||
}, true
|
||||
)
|
||||
}
|
||||
}
|
||||
).children.data
|
||||
|
||||
this.news.forEach(page => {
|
||||
this.publicationsService.list({
|
||||
page:1,
|
||||
filters:JSON.stringify({
|
||||
page: page.id
|
||||
}),
|
||||
include: 'posters'
|
||||
}).subscribe(
|
||||
resp=>{
|
||||
page.publications = resp.data.slice(0,3).map(
|
||||
publication => ({
|
||||
name: publication.name,
|
||||
img: publication.posters.data[0]?publication.posters.data[0].links.thumb:null,
|
||||
link: publication.link,
|
||||
date: publication.publishDateRus
|
||||
})
|
||||
);
|
||||
}
|
||||
)
|
||||
});
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
)
|
||||
this.subscription = this.listsService.result('class').subscribe(val => {
|
||||
this.classActive = val;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.subscription?.unsubscribe();
|
||||
}
|
||||
|
||||
get isRootPage(){
|
||||
return this.pagesService.currentPage && this.pagesService.currentPage.parents && this.pagesService.currentPage.parents.data.length == 0
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<div class="header layout-corral">
|
||||
<div class="header-top-menu">
|
||||
<div class="header-top-menu-ref">
|
||||
<ico ico="frame_24" color="white" [size]="24"></ico>
|
||||
Версия для слабовидящих
|
||||
</div>
|
||||
<div class="header-top-menu-ref">
|
||||
<ico ico="search_24" color="white" [size]="24"></ico>
|
||||
Поиск
|
||||
</div>
|
||||
<div class="header-top-menu-ref" (click)="login()" *ngIf="!isLoggedIn">
|
||||
<ico ico="login_24" color="white" [size]="24"></ico>
|
||||
Вход
|
||||
</div>
|
||||
<locale></locale>
|
||||
</div>
|
||||
<div class="header-contact">
|
||||
<div class="header-contact-left">
|
||||
<a routerLink="/"><img src="assets/images/logo_gbu.png"></a>
|
||||
|
||||
<div>
|
||||
<span>Государственное бюджетное<br>учреждение города Москвы</span><br>
|
||||
<strong>«Жилищник Таганского района»</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-contact-right">
|
||||
<div>
|
||||
<ico ico="watch_24" color="var(--prime)" [size]="24"></ico>
|
||||
<span>пн-чт: 8:00–17:00, пт: 8:00–15:45; перерыв на обед: 12:00–12:45</span>
|
||||
</div>
|
||||
<div>
|
||||
<ico ico="location_24" color="var(--prime)" [size]="24"></ico>
|
||||
<span>109147, г. Москва, Воронцовская ул., д. 21б</span>
|
||||
</div>
|
||||
<div>
|
||||
<ico ico="mail_24" color="var(--prime)" [size]="24"></ico>
|
||||
<span>
|
||||
gbu-taganka@mail.ru
|
||||
</span>
|
||||
<ico ico="phone_24" color="var(--prime)" [size]="24"></ico>
|
||||
<span>8 (495) 230-57-87</span>
|
||||
<ico ico="telegram_24" color="var(--prime)" [size]="24"></ico>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pages-menu class="lvl-0"></pages-menu>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1 @@
|
|||
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {Router} from "@angular/router";
|
||||
import {PagesService} from "@app/_services/pages.service";
|
||||
import { AuthenticationService } from '@app/_services';
|
||||
|
||||
@Component({
|
||||
selector: 'header',
|
||||
templateUrl: 'header.component.html',
|
||||
styleUrls: ['header.component.scss']
|
||||
})
|
||||
export class HeaderComponent {
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
public pagesService: PagesService,
|
||||
private authService: AuthenticationService
|
||||
) {
|
||||
}
|
||||
// ngOnInit(){
|
||||
// this.pagesService.root().subscribe(
|
||||
// resp=> this.pagesService.rootPages = resp
|
||||
// )
|
||||
// }
|
||||
|
||||
get rootPage() {
|
||||
return this.pagesService.rootPage;
|
||||
}
|
||||
|
||||
get isRootPage(){
|
||||
return !this.pagesService.currentPage?.parents.data.length && this.pagesService.currentPage
|
||||
}
|
||||
|
||||
get isRusPage(){
|
||||
return this.rootPage.slug ===""
|
||||
}
|
||||
|
||||
openMobileMenu(){
|
||||
this.router.navigate([{outlets: {slider: 'pages-menu'}}], {skipLocationChange: true}).then();
|
||||
}
|
||||
|
||||
login() {
|
||||
this.authService.popup('login');
|
||||
}
|
||||
|
||||
get isLoggedIn() {
|
||||
return this.authService.isLoggedIn;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<div class="space" *ngIf="!isRootPage">
|
||||
<div class="jumbotron-content layout-corral">
|
||||
<header-user-bar></header-user-bar>
|
||||
<div class="breadcrumbs" *ngIf="parents">
|
||||
<div *ngFor="let parent of parents">
|
||||
<a [routerLink]="parent.link" *ngIf="parent.type.name!='nav-page'">
|
||||
<span>{{parent.name}}</span>
|
||||
<ico ico="chevron_right_24" [size]="24"></ico>
|
||||
</a>
|
||||
</div>
|
||||
<div>{{currentPage.name}}</div>
|
||||
</div>
|
||||
<h1>{{name}}</h1>
|
||||
<img [src]="pagePicture" *ngIf="pagePicture">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="space root-page" *ngIf="isRootPage">
|
||||
<div class="jumbotron-content layout-corral">
|
||||
<header-user-bar></header-user-bar>
|
||||
<div class="breadcrumbs" *ngIf="parents?.length>1">
|
||||
<div *ngFor="let parent of parents">
|
||||
<a [routerLink]="parent.link">
|
||||
<span>{{parent.name}}</span>
|
||||
<ico ico="chevron_right_24" [size]="24"></ico>
|
||||
</a>
|
||||
</div>
|
||||
<div>{{currentPage.name}}</div>
|
||||
</div>
|
||||
<h1>{{name}}</h1>
|
||||
|
||||
|
||||
<div class="root-menu">
|
||||
<a class="root-menu-item" routerLink="kommunalnye-uslugi">
|
||||
<div class="root-menu-img">
|
||||
<img src="assets/images/root_menu_services.jpg" alt="">
|
||||
</div>
|
||||
<div class="root-menu-name">Услуги</div>
|
||||
</a>
|
||||
<div class="root-menu-item" routerLink="otzyvy">
|
||||
<div class="root-menu-img">
|
||||
<img src="assets/images/root_menu_replies.png" alt="">
|
||||
</div>
|
||||
<div class="root-menu-name">Отзывы</div>
|
||||
</div>
|
||||
<div class="root-menu-item" routerLink="platnye-uslugi">
|
||||
<div class="root-menu-img">
|
||||
<img src="assets/images/root_menu_payment.png" alt="">
|
||||
</div>
|
||||
<div class="root-menu-name">Платные услуги</div>
|
||||
</div>
|
||||
<div class="root-menu-item" routerLink="planovye-i-avariinye-otklyuceniya">
|
||||
<div class="root-menu-img">
|
||||
<img src="assets/images/root_menu_disabling.png" alt="">
|
||||
</div>
|
||||
<div class="root-menu-name">Плановые и аварийные отключения</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space jumbotron-edit-field" *ngIf="editable" dir="ltr">
|
||||
<div class="layout-corral jumbotron-edit-field-row">
|
||||
<div class="switch-host" (click)="toggleEditMode()">
|
||||
Режим редактирования
|
||||
<switch [val]="editMode"></switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { PagesService } from '@app/_services/pages.service';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { AuthenticationService } from '@app/_services';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'jumbotron',
|
||||
templateUrl: './jumbotron.component.html',
|
||||
styleUrls: ['./jumbotron.component.scss']
|
||||
})
|
||||
export class JumbotronComponent {
|
||||
private subscription:Subscription
|
||||
public currentPage:any;
|
||||
public pagePicture:any;
|
||||
|
||||
|
||||
|
||||
constructor(
|
||||
private pagesService: PagesService,
|
||||
public authService: AuthenticationService,
|
||||
private router: Router
|
||||
){}
|
||||
|
||||
ngOnInit(){
|
||||
this.subscription = this.pagesService.currentPageSubject.subscribe(
|
||||
resp=> {
|
||||
this.currentPage = resp;
|
||||
if (this.currentPage) {
|
||||
if(this.currentPage.picture){
|
||||
this.pagePicture = this.currentPage.picture.data.links.open
|
||||
}else{
|
||||
let parents = this.currentPage.parents?.data
|
||||
let content = parents?.map(page=>page.picture).filter(page=>page)
|
||||
this.pagePicture = content.pop()?.data.links.open
|
||||
}
|
||||
}else{this.pagePicture = null;}
|
||||
}
|
||||
)
|
||||
}
|
||||
ngOnDestoy(){
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
|
||||
get name(){
|
||||
let name:string
|
||||
if(this.currentPage){
|
||||
name = this.currentPage?.h1 || this.currentPage?.name;
|
||||
let parents = this.currentPage?.parents?.data
|
||||
if (parents&&parents[2]) name = parents[2].h1|| parents[2].name
|
||||
}
|
||||
return name
|
||||
}
|
||||
|
||||
|
||||
|
||||
get mainPage(){
|
||||
return this.currentPage?.parents?.data.length === 0;
|
||||
}
|
||||
|
||||
get editable(){
|
||||
return this.currentPage&&(this.authService.privileges?.admin|| this.authService.privileges?.editor);
|
||||
}
|
||||
|
||||
get editMode(){
|
||||
return this.pagesService.editMode;
|
||||
}
|
||||
|
||||
toggleEditMode(){
|
||||
this.pagesService.editMode = !this.pagesService.editMode;
|
||||
}
|
||||
|
||||
get isRootPage(){
|
||||
return !this.pagesService.currentPage?.parents?.data.length && this.pagesService.currentPage
|
||||
}
|
||||
|
||||
get since(){
|
||||
return this.currentPage?.link === '/'
|
||||
}
|
||||
|
||||
get parents() {
|
||||
return this.currentPage?.parents?.data;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<a class="right-card" routerLink="elektronnoe-obrashhenie">
|
||||
<ico ico="web_req_48" [size]="48"></ico>
|
||||
<span>Электронное обращение</span>
|
||||
</a>
|
||||
<a class="right-card" href="https://www.mos.ru/pgu/ru/app/mosenergo/counters/#step_1" target="_blank" >
|
||||
<ico ico="lightbulb_48" [size]="48"></ico>
|
||||
<span>Прием показаний и оплата электроэнергии</span>
|
||||
</a>
|
||||
<a class="right-card" href="https://www.mos.ru/services/pokazaniya-vodi-i-tepla/" target="_blank" >
|
||||
<ico ico="water_48" [size]="48"></ico>
|
||||
<span>Прием показаний приборов учета воды</span>
|
||||
</a>
|
||||
<a class="right-card" href="https://www.mos.ru/pgu/ru/services/link/2170/" target="_blank">
|
||||
<ico ico="get_n_pay_48" [size]="48"></ico>
|
||||
<span>Получить и оплатить ЕПД</span>
|
||||
</a>
|
||||
<a class="right-baner" href="https://ag.mos.ru/home" target="_blank">
|
||||
<img src="assets/images/adv_00.png">
|
||||
</a>
|
||||
<a class="right-baner" href="https://crowd.mos.ru/propose" target="_blank">
|
||||
<img src="assets/images/adv_01.png">
|
||||
</a>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'right-content',
|
||||
templateUrl: './right-content.component.html',
|
||||
styleUrls: ['./right-content.component.scss']
|
||||
})
|
||||
export class RightContentComponent {
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<slider side="left">
|
||||
|
||||
<div body>
|
||||
<pages-menu *ngIf="rootPages" [root]="rootPages" class="top-menu"></pages-menu>
|
||||
<div class="btn-menu">
|
||||
<div *ngIf="isRusPage">
|
||||
<a href="https://ais.vniigaz-cert.ru/" target="_blank">
|
||||
Личный кабинет (АИС СЦ)
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<locale></locale>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</slider>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import { Component } from '@angular/core';
|
||||
import {Router} from "@angular/router";
|
||||
import {PagesService} from "@app/_services/pages.service";
|
||||
|
||||
@Component({
|
||||
selector: 'slider-menu',
|
||||
templateUrl: './slider-menu.component.html',
|
||||
styleUrls: ['./slider-menu.component.scss']
|
||||
})
|
||||
export class SliderMenuComponent {
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
public pagesService: PagesService
|
||||
) {
|
||||
}
|
||||
|
||||
get rootPages() {
|
||||
return this.pagesService.rootPages;
|
||||
}
|
||||
|
||||
get rootPage() {
|
||||
return this.pagesService.rootPage;
|
||||
}
|
||||
|
||||
get isRusPage(){
|
||||
return this.rootPage.slug ===""
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<div class="main">
|
||||
<div class="block row">
|
||||
<div class="name">
|
||||
<div *ngIf="link">
|
||||
<a [href]="link" target="_blank">
|
||||
<ico ico="document_24"></ico> {{title}}
|
||||
</a>
|
||||
</div>
|
||||
<span *ngIf="!link">{{title}}</span>
|
||||
</div>
|
||||
<drop-down *ngIf="isExpandable && withToggle" (click)="toggle()" [visible]="isExpanded"></drop-down>
|
||||
</div>
|
||||
<div class="block" *ngIf="registryOptions?.states && activeSince">
|
||||
<div class="state {{entry.state?.name}}">{{entry.state?.title}}</div>
|
||||
<div class="dates">
|
||||
<table class="default">
|
||||
<tr><td class="caption">Дата выдачи</td><td class="value">{{activeSince || '—'}}</td></tr>
|
||||
<tr><td class="caption">Срок действия</td><td class="value">{{activeTill || '—'}}</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block" *ngIf="editMode">
|
||||
<div class="menu menu-entry">
|
||||
<ico ico="drag-n-drop_24" class="move" title="Переместить"></ico>
|
||||
<ico ico="edit_24" title="Редактировать" (click)="edit()"></ico>
|
||||
<!-- <ico ico="add_notes_24" title="Добавить запись" (click)="add()"></ico> -->
|
||||
<ico ico="delete_24" title="Удалить категорию" (click)="delete()"></ico>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="details" *ngIf="isExpanded && withToggle">
|
||||
<div class="block" *ngIf="registryOptions?.properties">
|
||||
<entry-properties [entry]="entry"></entry-properties>
|
||||
</div>
|
||||
<div class="block" *ngIf="registryOptions?.operations">
|
||||
<entry-operations [entry]="entry" [editMode]="editMode"></entry-operations>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="!withToggle">
|
||||
<entry-properties [entry]="entry"></entry-properties>
|
||||
</div>
|
||||
<!-- <pre>
|
||||
{{entry|json}}
|
||||
</pre>
|
||||
|
||||
<pre>
|
||||
{{registry|json}}
|
||||
</pre> -->
|
||||
<!-- <pre>{{entry|json}}</pre> -->
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
import {Component, Input} from '@angular/core';
|
||||
import {FormsService, ListsService} from "@app/_services";
|
||||
import {RegistryEntriesService} from "@app/_services/registry-entries.service";
|
||||
import {DatePipe} from "@angular/common";
|
||||
|
||||
@Component({
|
||||
selector: 'registry-entry',
|
||||
templateUrl: 'registry-entry.component.html',
|
||||
styleUrls: ['registry-entry.component.scss']
|
||||
})
|
||||
export class RegistryEntryComponent {
|
||||
@Input() registry: any;
|
||||
@Input() category: any;
|
||||
@Input() entry: any;
|
||||
@Input() editMode: boolean;
|
||||
|
||||
public isExpanded = false;
|
||||
|
||||
constructor(private entriesService: RegistryEntriesService, private formsService: FormsService, private listsService: ListsService, private datePipe: DatePipe) {
|
||||
}
|
||||
|
||||
|
||||
get operationsListId() {
|
||||
return this.entry.id;
|
||||
}
|
||||
get parentListId() {
|
||||
return (this.category?.id || this.registry?.id) + '-entries';
|
||||
}
|
||||
|
||||
get isExpandable() {
|
||||
return this.registryOptions?.properties || this.registryOptions?.operations
|
||||
}
|
||||
|
||||
get title() {
|
||||
return this.entry.number ? `${this.entry.number} «${this.entry.name}»` : this.entry.name;
|
||||
}
|
||||
get activeSince() {
|
||||
return this.entry.activeSince ? this.datePipe.transform(this.entry.activeSince, 'dd.MM.yyyy') : null;
|
||||
}
|
||||
get activeTill() {
|
||||
return this.entry.activeTill ? this.datePipe.transform(this.entry.activeTill, 'dd.MM.yyyy') : null;
|
||||
}
|
||||
get asset() {
|
||||
return this.entry.asset?.data;
|
||||
}
|
||||
get link() {
|
||||
return this.asset?.links?.open || this.entry.link;
|
||||
}
|
||||
|
||||
get registryOptions() {
|
||||
return this.registry?.type?.options || this.entry?.registry?.data.type?.options;
|
||||
}
|
||||
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
add() {
|
||||
if (this.isExpandable) this.isExpanded = true;
|
||||
this.formsService.createModel('entryOperation', {extraProps: {entry: this.entry.id}}, this.operationsListId);
|
||||
}
|
||||
|
||||
edit() {
|
||||
this.formsService.editModel('registryEntry', this.entry.id, {extraProps: {registry: this.registry?.id}}, this.parentListId);
|
||||
}
|
||||
|
||||
delete() {
|
||||
if (confirm('r u sure?')) {
|
||||
this.entriesService.delete(this.entry.id).subscribe(res => {
|
||||
this.listsService.refresh(this.parentListId);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
toggle() {
|
||||
this.isExpanded = !this.isExpanded;
|
||||
}
|
||||
|
||||
get withToggle(){
|
||||
return this.registry.type.name !== 'workshops'
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,320 @@
|
|||
.administration-page{
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
padding: 32px;
|
||||
h2{
|
||||
color: var(--second-act);
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.site-admin-control{
|
||||
|
||||
.site-admin-control-toggle{
|
||||
display: flex;
|
||||
align-items:flex-start;
|
||||
gap: 16px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 32px;
|
||||
switch{
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
.site-admin-page-block{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
border-top: 1px solid var(--second-dis);
|
||||
border-bottom: 1px solid var(--second-dis);
|
||||
div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.site-admin-company{
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
ico.page-lable{
|
||||
background-color: var(--prime);
|
||||
border-radius: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
administrate-site-pages{
|
||||
>pages-tree{
|
||||
display: block;
|
||||
margin-bottom: 128px;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1330px) {
|
||||
.page-control {
|
||||
display: none;
|
||||
}
|
||||
.logo, .page-lable{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ico.page-control{
|
||||
cursor: pointer;
|
||||
svg{
|
||||
color:var(--second);
|
||||
&:hover{
|
||||
color: var(--second-act);
|
||||
}
|
||||
}
|
||||
}
|
||||
pages-tree{
|
||||
|
||||
.item:not(.home){
|
||||
.bar{
|
||||
padding-left: 50px;
|
||||
|
||||
}
|
||||
.item .bar{
|
||||
padding-left: 100px;
|
||||
}
|
||||
.item .item .bar{
|
||||
padding-left: 150px;
|
||||
}
|
||||
.item .item .item .bar{
|
||||
padding-left: 200px;
|
||||
}
|
||||
|
||||
.item .item .item .item .bar{
|
||||
padding-left: 250px;
|
||||
}
|
||||
|
||||
.item .item .item .item .item .bar{
|
||||
padding-left: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.item {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
.bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-bottom: solid var(--second-dis) 1px;
|
||||
|
||||
.left {
|
||||
cursor: pointer;
|
||||
width: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.mid {
|
||||
flex-grow: 1;
|
||||
padding: 0 16px;
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 16px;
|
||||
border-radius: 100px;
|
||||
background-color: var(--prime);
|
||||
color: #ffffff;
|
||||
cursor: move;
|
||||
&:hover{
|
||||
background-color: var(--prime-act);
|
||||
}
|
||||
span{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 20px 0;
|
||||
a {
|
||||
color: var(--dadk);
|
||||
&:nth-child(2){
|
||||
color: var(--second);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-shrink: 1;
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
administrate-licence{
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
color: var(--dark);
|
||||
.default{
|
||||
|
||||
.caption{
|
||||
color: var(--second);
|
||||
}
|
||||
.value{
|
||||
&.ok{
|
||||
color: #14A92D
|
||||
}
|
||||
&.warn{
|
||||
color: #E51F30
|
||||
}
|
||||
}
|
||||
}
|
||||
h3{
|
||||
font-family: PT Sans;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
margin: 24px 0 16px;
|
||||
}
|
||||
p{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
users-list{
|
||||
.bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 72px;
|
||||
border-top: var(--second-dis) solid 1px;
|
||||
border-bottom: var(--second-dis) solid 1px;
|
||||
ico{
|
||||
cursor: pointer;
|
||||
}
|
||||
.title {
|
||||
flex-grow: 1;
|
||||
font-weight: bold;
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
users-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 72px;
|
||||
border-bottom: var(--second-dis) solid 1px;
|
||||
.item{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.left{
|
||||
.avatar{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 16px;
|
||||
border-radius: 100px;
|
||||
background-color: var(--prime);
|
||||
color: #ffffff;
|
||||
overflow: hidden;
|
||||
img{
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.middle{
|
||||
.user-data{
|
||||
.name{
|
||||
&::after{
|
||||
content: '•';
|
||||
color: var(--second);
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
.Administrator{
|
||||
color: #E51F30;
|
||||
}
|
||||
.Editor{
|
||||
color: #A39600
|
||||
}
|
||||
.User{
|
||||
color: #14A92D;
|
||||
}
|
||||
}
|
||||
.position{
|
||||
color: var(--second);
|
||||
}
|
||||
}
|
||||
.right{
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
ico{
|
||||
cursor: pointer;
|
||||
svg{
|
||||
color: var(--second) ;
|
||||
}
|
||||
&:hover{
|
||||
svg{
|
||||
color: var(--second-act) ;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,654 @@
|
|||
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
|
||||
|
||||
|
||||
|
||||
* {
|
||||
font-family: Golos;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
|
||||
// li {
|
||||
// list-style-image: url("~src/assets/images/icons/add_24dp.svg");
|
||||
// }
|
||||
|
||||
// .btn {
|
||||
// font-weight: 500;
|
||||
// font-size: 0.875rem;
|
||||
// line-height: 1.125rem;
|
||||
// letter-spacing: 0.02em;
|
||||
// text-transform: uppercase;
|
||||
// }
|
||||
|
||||
.toggle-hide{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.inline{
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.center{
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
$layout-width: 1280px;
|
||||
$page-width: 840px;
|
||||
|
||||
$pxl:40px;
|
||||
$pl:32px;
|
||||
$p:24px;
|
||||
$ps:16px;
|
||||
$pxs:8px;
|
||||
$pxxs:4px;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.size-little {
|
||||
* {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
h1 {font-size: 1.5rem;}
|
||||
}
|
||||
.size-middle {
|
||||
* {
|
||||
font-size: 1rem;
|
||||
line-height: 20px;
|
||||
}
|
||||
h1 {
|
||||
font-weight: 700;
|
||||
font-size: 2rem;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
.size-large {
|
||||
* {
|
||||
font-size: 1.25rem;
|
||||
line-height: 24px;
|
||||
}
|
||||
h1 {font-size: 3rem;}
|
||||
}
|
||||
.image-hidden {
|
||||
img, svg {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
*, *::after, *::before {
|
||||
background-image: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.style-brown {
|
||||
filter: sepia(150%) !important;
|
||||
}
|
||||
.style-white-black {
|
||||
filter: grayscale(100%) !important;;
|
||||
}
|
||||
.style-black-white {
|
||||
filter: grayscale(100%) invert(100%) !important;;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
:root {
|
||||
|
||||
--smart: 688px;
|
||||
--medium: 1048px;
|
||||
--xs: 4px;
|
||||
--s: 8px;
|
||||
--m: 16px;
|
||||
--l: 24px;
|
||||
--xl: 36px;
|
||||
--xxl: 48px;
|
||||
|
||||
--radius-1: 12px;
|
||||
--radius-2: 20px;
|
||||
--white: #ffffff;
|
||||
--light: #F3F3F3;
|
||||
|
||||
|
||||
--prime: #00589D;
|
||||
--prime-hov: #005799;
|
||||
--prime-act: #004077;
|
||||
--prime-dis: #A1CAE5;
|
||||
|
||||
|
||||
|
||||
--second: #6C6C6C;
|
||||
--second-hov: #4D4D4D;
|
||||
--second-act: #2D2D2D;
|
||||
--second-dis: #C0C0C0;
|
||||
|
||||
--dark: #1F1F1F;
|
||||
--blue-0: #2EB2E8;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.style-color{
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
.mat-calendar-body-selected {
|
||||
background-color: #0079c2;
|
||||
}
|
||||
|
||||
button.mat-calendar-body-cell:hover{
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
button.mat-calendar-body-cell{
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){
|
||||
background-color: rgba(0, 162, 255,0.3);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.mat-calendar-body-cell-content{
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
}
|
||||
|
||||
.tox-promotion, .tox-statusbar__branding {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
|
||||
*, ::after, ::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {scrollbar-color:transparent transparent; scrollbar-width:none;}
|
||||
*::-webkit-scrollbar-track {background-color:transparent;}
|
||||
*::-webkit-scrollbar {width:0; height:0; background-color:transparent;}
|
||||
*::-webkit-scrollbar-thumb {background-color:transparent; border-radius:2rem;}
|
||||
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
font-family: "PT Sans";
|
||||
font-size: 16px;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: var(--second-act);
|
||||
background-color: var(--light);
|
||||
font-size: 20px;
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.limiter {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #000;
|
||||
font-family: Golos;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
strong{
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h1{
|
||||
color: var(--white);
|
||||
font-family: "PT Serif";
|
||||
font-size: 76px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 76px; /* 100% */
|
||||
letter-spacing: 0.76px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--second-act);
|
||||
font-family: "PT Serif";
|
||||
font-size: 50px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 60px; /* 120% */
|
||||
letter-spacing: 0.5px;
|
||||
margin:0;
|
||||
}
|
||||
h3 {
|
||||
font-family: "PT Serif";
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
h4 {
|
||||
color: #6A6868;
|
||||
font-family: "PT Serif";
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--prime);
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
color: var(--prime-hov);
|
||||
};
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
|
||||
span.link {
|
||||
font-weight: normal;
|
||||
color: #86898E;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fullwidth {
|
||||
width: calc(100% + 80px);
|
||||
margin-left: -40px;
|
||||
margin-right: -40px;
|
||||
}
|
||||
|
||||
.loader {
|
||||
margin-top: 32px;
|
||||
text-align: center;
|
||||
animation: fade-in-and-scale 0.5s infinite;
|
||||
&:before {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 100px;
|
||||
background-image: radial-gradient(rgba(44,134,205,1), rgba(44,134,205,0));
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.op-63{
|
||||
opacity: 0.63;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 1330px) {
|
||||
.fullwidth {
|
||||
width: 100vw;
|
||||
margin-left: calc((1160px - 100vw) / 2);
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes slide-from-right {
|
||||
0% {transform: translateX(100%);}
|
||||
100% {transform: translateX(0);}
|
||||
}
|
||||
|
||||
@keyframes slide-from-left {
|
||||
0% {transform: translateX(-100%);}
|
||||
100% {transform: translateX(0);}
|
||||
}
|
||||
|
||||
@keyframes slide-from-top-and-fade-in {
|
||||
0% {transform: translateY(-100%); opacity: 0}
|
||||
100% {transform: translateY(0); opacity: 1}
|
||||
}
|
||||
|
||||
@keyframes slide-from-bottom-and-fade-in {
|
||||
0% {transform: translateY(100%); opacity: 0}
|
||||
100% {transform: translateY(0); opacity: 1}
|
||||
}
|
||||
|
||||
|
||||
@keyframes fade-in-and-scale {
|
||||
0% {transform:scale(0.3); opacity:0;}
|
||||
100% {transform:scale(1); opacity:0.5;}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
h1{
|
||||
font-size: 50px;
|
||||
line-height: 60px;
|
||||
}
|
||||
h2{
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
}
|
||||
h3{
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
h4{
|
||||
color:var(--second);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1330px) {
|
||||
|
||||
.limiter {
|
||||
padding: 0 24px;
|
||||
}
|
||||
.fullwidth {
|
||||
width: calc(100% + 48px);
|
||||
margin-left: -24px;
|
||||
margin-right: -24px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
file-ico{
|
||||
width: 52px;
|
||||
height: 60px;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
|
||||
modal{
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10000;
|
||||
.modal-overlay{
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: rgba(62, 61, 64, 0.7);
|
||||
z-index: 1000;
|
||||
}
|
||||
.modal-bar{
|
||||
position: fixed;
|
||||
max-width: 800px;
|
||||
max-height: 100vh;
|
||||
background-color: var(--white);
|
||||
border: 1px solid var(--second-dis);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 12px;
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
.modal-header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: -1px;
|
||||
border-bottom: 1px solid var(--second-dis);
|
||||
padding: 14px 24px;
|
||||
h4{
|
||||
margin: 0;
|
||||
}
|
||||
ico{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.modal-body{
|
||||
padding: 36px 24px;
|
||||
overflow-y: auto;
|
||||
img{
|
||||
width: 330px;
|
||||
max-width: 80vw;
|
||||
}
|
||||
}
|
||||
.modal-footer{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: -1px;
|
||||
border-top: 1px solid var(--second-dis);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.combobox {
|
||||
position: relative;
|
||||
font-family: "PT Sans";
|
||||
border: solid 1px var(--second-dis);
|
||||
border-radius: 12px;
|
||||
font-size: 20px;
|
||||
color: var(--second-act);
|
||||
padding: 8px 12px 8px 16px;
|
||||
background: no-repeat left 16px center / 140px 16px url('~src/assets/images/icons/placeholder.svg');
|
||||
|
||||
&:hover{
|
||||
border-color: var(--second);
|
||||
outline: none;
|
||||
}
|
||||
&.active {
|
||||
border-color: var(--prime);
|
||||
outline: none;
|
||||
|
||||
}
|
||||
&:disabled{
|
||||
border-color: #EDEDED;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
font-size: 20px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
.caption {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
p {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
&.faded {
|
||||
color: #7f7f7f;
|
||||
}
|
||||
}
|
||||
}
|
||||
.filter {
|
||||
display: none;
|
||||
width: 100%;
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 8px 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 20px;
|
||||
margin-left: auto;
|
||||
background: url('~src/assets/images/icons/arrow_drop_down_grey_24dp.svg') 50% 50% no-repeat;
|
||||
content: "";
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
background: url('~src/assets/images/icons/arrow_drop_down_dark_24dp.svg') 50% 50% no-repeat;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.active .toggle:after {
|
||||
background: url('~src/assets/images/icons/arrow_drop_down_24dp.svg') 50% 50% no-repeat;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: calc(100% + 1px);
|
||||
left: -1px;
|
||||
width: calc(100% + 2px);
|
||||
margin-bottom: 50px;
|
||||
background-color: #ffffff;
|
||||
border: #dfdfdf solid 1px;
|
||||
border-radius: 4px;
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0 2px 3px 0;
|
||||
overflow: hidden;
|
||||
z-index: 100;
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
max-height: 280px;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
.empty {
|
||||
padding: 10px 16px;
|
||||
background-color: #f7f7f7;
|
||||
color: #7f7f7f;
|
||||
.add {
|
||||
display: block;
|
||||
color: #2c86cd;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
.title {
|
||||
padding: 8px 16px;
|
||||
border-bottom: #dfdfdf solid 1px;
|
||||
margin: 0 !important;
|
||||
cursor: pointer;
|
||||
p {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
&.faded {
|
||||
color: #7f7f7f;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
&.selected {
|
||||
background-color: #e3eff9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.toggle {
|
||||
.caption {
|
||||
display: none;
|
||||
}
|
||||
.filter {
|
||||
display: block;
|
||||
}
|
||||
&::after {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
}
|
||||
.dropdown {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.values {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 8px 8px 0 0;
|
||||
|
||||
.name {
|
||||
padding-right: 8px;
|
||||
line-height: 20px;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.faded {
|
||||
color: #7f7f7f;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.remove {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
border: none;
|
||||
//background: transparent url('~src/assets/images/icons/close_16dp.svg') 50% 50% no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,211 @@
|
|||
button, .btn, a.btn {
|
||||
display: inline-flex;
|
||||
padding: 7px 24px 8px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--prime);
|
||||
background:var(--prime);
|
||||
color: #FFF;
|
||||
color: var(--Black-FFFFFF, #FFF);
|
||||
font-family: Golos;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 21px; /* 150% */
|
||||
letter-spacing: 0.42px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover{
|
||||
border: 1px solid var(--prime-hov);
|
||||
background: var(--prime-hov);
|
||||
}
|
||||
|
||||
&:active{
|
||||
border: 1px solid #004077;
|
||||
background: #004077;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
border: 1px solid #A1CAE5;
|
||||
background: #A1CAE5;
|
||||
}
|
||||
|
||||
&.outline{
|
||||
background:#FFF;
|
||||
color: var(--prime);
|
||||
&:hover{
|
||||
border: 1px solid var(--prime-hov);
|
||||
color: var(--prime-hov);
|
||||
}
|
||||
|
||||
&:active{
|
||||
border: 1px solid #004077;
|
||||
color: #004077;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
border: 1px solid #A1CAE5;
|
||||
color: #A1CAE5;
|
||||
}
|
||||
}
|
||||
|
||||
&.clear,&.icon{
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: var(--second-act);
|
||||
font-family: PT Sans Narrow;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 100%; /* 133.333% */
|
||||
letter-spacing: 100%;
|
||||
}
|
||||
|
||||
&.trash,&.add-child,&.edit,&.delete,&.close-blue,&.move{
|
||||
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: center no-repeat;
|
||||
|
||||
}
|
||||
|
||||
&.trash {
|
||||
background-image: url('~src/assets/images/icons/trash_grey_24dp.svg');
|
||||
}
|
||||
&.add-child {
|
||||
background-image: url('~src/assets/images/icons/add_web_page_24dp.svg');
|
||||
}
|
||||
&.edit {
|
||||
background-image: url('~src/assets/images/icons/edit_24dp.svg');
|
||||
}
|
||||
&.close-blue {
|
||||
background-image: url('~src/assets/images/icons/close_blue_24dp.svg');
|
||||
};
|
||||
&.move {
|
||||
background-image: url('~src/assets/images/icons/drag-n-drop_24.svg');
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
|
||||
div.move{
|
||||
cursor: move;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: center no-repeat;
|
||||
background-image: url('~src/assets/images/icons/drag-n-drop_24.svg');
|
||||
}
|
||||
|
||||
// .inline-menu.default {
|
||||
// display: inline-flex;
|
||||
// align-items: center;
|
||||
// gap: 24px;
|
||||
// padding: 8px 24px;
|
||||
// background-color: #F5F4F4;
|
||||
// border: #E8E8E8 solid 1px;
|
||||
// border-radius: 4px;
|
||||
// button {
|
||||
// width: 20px;
|
||||
// height: 20px;
|
||||
// background: transparent none 50% 50% no-repeat;
|
||||
// &.add {background-image: url('~src/assets/images/icons/note_add_20.svg');}
|
||||
// &.edit {background-image: url('~src/assets/images/icons/edit_20.svg');}
|
||||
// &.delete {background-image: url('~src/assets/images/icons/trash_20.svg');}
|
||||
// &.move {background-image: url('~src/assets/images/icons/drag-n-drop_24.svg');}
|
||||
// }
|
||||
// }
|
||||
|
||||
// .btn {
|
||||
// color: #ffffff;
|
||||
// padding: 11px 24px;
|
||||
// background: var(--orange-2);
|
||||
// border: 1px solid var(--orange-2);
|
||||
// border-radius: 4px;
|
||||
// font-weight: 500;
|
||||
// font-size: 0.875rem;
|
||||
// line-height: 18px;
|
||||
// letter-spacing: 0.02em;
|
||||
// text-transform: uppercase;
|
||||
|
||||
|
||||
// &.with-icon {
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// align-items: center;
|
||||
// padding: 8px 20px 8px 12px;
|
||||
// &:before {
|
||||
// display: block;
|
||||
// width: 24px;
|
||||
// height: 24px;
|
||||
// margin-right: 8px;
|
||||
// background: transparent none 50% 50% no-repeat;
|
||||
// content: "";
|
||||
// }
|
||||
// &.add {
|
||||
// &:before {
|
||||
// //background-image: url('~src/assets/images/icons/add_circle_white_24dp.svg');
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &.small {
|
||||
// height: 28px;
|
||||
// padding: 4px 16px;
|
||||
// }
|
||||
// &.danger {
|
||||
// background-color: #db373a;
|
||||
// }
|
||||
// &.secondary {
|
||||
// background-color: var(--white);
|
||||
// color: var(--orange-2);
|
||||
// border: var(--orange-2) solid 1px;
|
||||
// &.danger {
|
||||
// border-color: #db373a;
|
||||
// color: #db373a;
|
||||
// }
|
||||
// }
|
||||
// &.icon {
|
||||
// width: 24px;
|
||||
// height: 24px;
|
||||
// padding: 0;
|
||||
// border-color: transparent;
|
||||
// background: transparent none 50% 50% no-repeat;
|
||||
// //&.reply {background-image: url('~src/assets/images/icons/add_comment_20dp.svg');}
|
||||
// //&.delete {background-image: url('~src/assets/images/icons/close_20dp.svg');}
|
||||
// &.trash {background-image: url('~src/assets/images/icons/delete_24dp.svg');}
|
||||
// &.edit {background-image: url('~src/assets/images/icons/edit_dark_24.svg');}
|
||||
// //&.chain {background-image: url('~src/assets/images/icons/linked_24dp.svg');}
|
||||
// &.checkbox {
|
||||
// display: flex;
|
||||
// width: 18px;
|
||||
// height: 18px;
|
||||
// border: solid 1px #7f7f7f;
|
||||
// border-radius: 2px;
|
||||
// &.checked,&.mixed {
|
||||
// background-color: #2c86cd;
|
||||
// border-color: #2c86cd;
|
||||
// }
|
||||
// &.checked {
|
||||
// //background-image: url('~src/assets/images/icons/checkbox_24dp.svg');
|
||||
// }
|
||||
// &.mixed {
|
||||
// &:before {
|
||||
// display: block;
|
||||
// width: 12px;
|
||||
// height: 2px;
|
||||
// margin: auto;
|
||||
// background-color: #ffffff;
|
||||
// content: "";
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
.documents.list.default {
|
||||
font-size: 20px;
|
||||
.items {
|
||||
.item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 0 0 16px;
|
||||
.value{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
.description{
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: var(--second);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.none {
|
||||
color: #7f7f7f;
|
||||
}
|
||||
}
|
||||
.buttons {
|
||||
margin-top: 24px;
|
||||
button {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 8px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.documents.list.inline {
|
||||
.item {
|
||||
display: inline-block;
|
||||
padding: 3px 30px 3px 12px;
|
||||
margin: 0 12px 4px 0;
|
||||
border: solid 1px rgba(0, 0, 0, 0.06);
|
||||
border-radius: 12px;
|
||||
//background: #e3eff9 url('~src/assets/images/icons/open_in_new_18dp.svg') calc(100% - 8px) 50% no-repeat;
|
||||
font-size: 0.875rem;
|
||||
a {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 410px) {
|
||||
.documents.list.default {
|
||||
.buttons {
|
||||
button {
|
||||
width: 100%;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
.dropdown {
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
right: 24px;
|
||||
top: 62px;
|
||||
z-index: 10;
|
||||
z-index: 1000;
|
||||
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: var(--second-dis) solid 1px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%);
|
||||
|
||||
.type {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--white);
|
||||
border-bottom: var(--second-dis) solid 1px;
|
||||
overflow: hidden;
|
||||
&:first-child {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 0 4px 4px;
|
||||
.row {
|
||||
border-bottom: none;
|
||||
}
|
||||
a, span {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
>&:hover {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
|
||||
column-gap: 12px;
|
||||
cursor: pointer;
|
||||
color: var(--second-act);
|
||||
|
||||
.title {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
a, span {
|
||||
display: block;
|
||||
padding: 12px 16px;
|
||||
color: #000000;
|
||||
cursor: pointer;
|
||||
border-bottom: #E0E0E0 solid 1px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&:last-child {
|
||||
a, span {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-row {
|
||||
padding: 12px 16px 12px 32px;
|
||||
border-top: var(--second-dis) solid 1px;
|
||||
color: var(--second);
|
||||
background-color: var(--white);
|
||||
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: var(--light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,214 @@
|
|||
// @font-face {
|
||||
// font-family: 'Open Sans';
|
||||
// src: url('../fonts/sans/OpenSans-Italic.eot');
|
||||
// src: local('Open Sans Italic'), local('OpenSans-Italic'),
|
||||
// url('../fonts/sans/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
|
||||
// url('../fonts/sans/OpenSans-Italic.woff2') format('woff2'),
|
||||
// url('../fonts/sans/OpenSans-Italic.woff') format('woff'),
|
||||
// url('../fonts/sans/OpenSans-Italic.ttf') format('truetype');
|
||||
// font-weight: normal;
|
||||
// font-style: italic;
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Open Sans';
|
||||
// src: url('../fonts/sans/OpenSans-Regular.eot');
|
||||
// src: local('Open Sans Regular'), local('OpenSans-Regular'),
|
||||
// url('../fonts/sans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
// url('../fonts/sans/OpenSans-Regular.woff2') format('woff2'),
|
||||
// url('../fonts/sans/OpenSans-Regular.woff') format('woff'),
|
||||
// url('../fonts/sans/OpenSans-Regular.ttf') format('truetype');
|
||||
// font-weight: normal;
|
||||
// font-style: normal;
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Open Sans';
|
||||
// src: url('../fonts/sans/OpenSans-BoldItalic.eot');
|
||||
// src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
|
||||
// url('../fonts/sans/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
|
||||
// url('../fonts/sans/OpenSans-BoldItalic.woff2') format('woff2'),
|
||||
// url('../fonts/sans/OpenSans-BoldItalic.woff') format('woff'),
|
||||
// url('../fonts/sans/OpenSans-BoldItalic.ttf') format('truetype');
|
||||
// font-weight: bold;
|
||||
// font-style: italic;
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Open Sans';
|
||||
// src: url('../fonts/sans/OpenSans-SemiBold.eot');
|
||||
// src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
|
||||
// url('../fonts/sans/OpenSans-SemiBold.eot?#iefix') format('embedded-opentype'),
|
||||
// url('../fonts/sans/OpenSans-SemiBold.woff2') format('woff2'),
|
||||
// url('../fonts/sans/OpenSans-SemiBold.woff') format('woff'),
|
||||
// url('../fonts/sans/OpenSans-SemiBold.ttf') format('truetype');
|
||||
// font-weight: 600;
|
||||
// font-style: normal;
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Open Sans';
|
||||
// src: url('../fonts/sans/OpenSans-ExtraBoldItalic.eot');
|
||||
// src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'),
|
||||
// url('../fonts/sans/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
|
||||
// url('../fonts/sans/OpenSans-ExtraBoldItalic.woff2') format('woff2'),
|
||||
// url('../fonts/sans/OpenSans-ExtraBoldItalic.woff') format('woff'),
|
||||
// url('../fonts/sans/OpenSans-ExtraBoldItalic.ttf') format('truetype');
|
||||
// font-weight: 800;
|
||||
// font-style: italic;
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Open Sans';
|
||||
// src: url('../fonts/sans/OpenSans-LightItalic.eot');
|
||||
// src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
|
||||
// url('../fonts/sans/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'),
|
||||
// url('../fonts/sans/OpenSans-LightItalic.woff2') format('woff2'),
|
||||
// url('../fonts/sans/OpenSans-LightItalic.woff') format('woff'),
|
||||
// url('../fonts/sans/OpenSans-LightItalic.ttf') format('truetype');
|
||||
// font-weight: 300;
|
||||
// font-style: italic;
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Open Sans';
|
||||
// src: url('../fonts/sans/OpenSans-Bold.eot');
|
||||
// src: local('Open Sans Bold'), local('OpenSans-Bold'),
|
||||
// url('../fonts/sans/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
|
||||
// url('../fonts/sans/OpenSans-Bold.woff2') format('woff2'),
|
||||
// url('../fonts/sans/OpenSans-Bold.woff') format('woff'),
|
||||
// url('../fonts/sans/OpenSans-Bold.ttf') format('truetype');
|
||||
// font-weight: bold;
|
||||
// font-style: normal;
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Open Sans';
|
||||
// src: url('../fonts/sans/OpenSans-SemiBoldItalic.eot');
|
||||
// src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
|
||||
// url('../fonts/sans/OpenSans-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
|
||||
// url('../fonts/sans/OpenSans-SemiBoldItalic.woff2') format('woff2'),
|
||||
// url('../fonts/sans/OpenSans-SemiBoldItalic.woff') format('woff'),
|
||||
// url('../fonts/sans/OpenSans-SemiBoldItalic.ttf') format('truetype');
|
||||
// font-weight: 600;
|
||||
// font-style: italic;
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Open Sans';
|
||||
// src: url('../fonts/sans/OpenSans-ExtraBold.eot');
|
||||
// src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
|
||||
// url('../fonts/sans/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
|
||||
// url('../fonts/sans/OpenSans-ExtraBold.woff2') format('woff2'),
|
||||
// url('../fonts/sans/OpenSans-ExtraBold.woff') format('woff'),
|
||||
// url('../fonts/sans/OpenSans-ExtraBold.ttf') format('truetype');
|
||||
// font-weight: 800;
|
||||
// font-style: normal;
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Open Sans';
|
||||
// src: url('../fonts/sans/OpenSans-Light.eot');
|
||||
// src: local('Open Sans Light'), local('OpenSans-Light'),
|
||||
// url('../fonts/sans/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
|
||||
// url('../fonts/sans/OpenSans-Light.woff2') format('woff2'),
|
||||
// url('../fonts/sans/OpenSans-Light.woff') format('woff'),
|
||||
// url('../fonts/sans/OpenSans-Light.ttf') format('truetype');
|
||||
// font-weight: 300;
|
||||
// font-style: normal;
|
||||
// }
|
||||
|
||||
@font-face {
|
||||
font-family: 'PT Sans';
|
||||
src: url('../fonts/ptsans/PT_Sans-Web-Regular.ttf');
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PT Sans';
|
||||
src: url('../fonts/ptsans/PT_Sans-Web-Bold.ttf');
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PT Sans';
|
||||
src: url('../fonts/ptsans/PT_Sans-Web-Italic.ttf');
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PT Sans';
|
||||
src: url('../fonts/ptsans/PT_Sans-Web-Bolditalic.ttf');
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PT Sans Narrow';
|
||||
src: url('../fonts/ptsans/PTSansNarrow-Regular.ttf');
|
||||
font-style: itnormalalic;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'PT Sans Narrow';
|
||||
src: url('../fonts/ptsans/PTSansNarrow-Bold.ttf');
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'GolosTextWebBlack';
|
||||
src:
|
||||
url('../fonts/golos/Golos-Text_Black.woff2') format('woff2'),
|
||||
url('../fonts/golos/Golos-Text_Black.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'GolosTextWebBold';
|
||||
src:
|
||||
url('../fonts/golos/Golos-Text_Bold.woff2') format('woff2'),
|
||||
url('../fonts/golos/Golos-Text_Bold.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'GolosTextWebDemiBold';
|
||||
src:
|
||||
url('../fonts/golos/Golos-Text_DemiBold.woff2') format('woff2'),
|
||||
url('../fonts/golos/Golos-Text_DemiBold.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Golos';
|
||||
src:
|
||||
url('../fonts/golos/Golos-Text_Medium.woff2') format('woff2'),
|
||||
url('../fonts/golos/Golos-Text_Medium.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Golos';
|
||||
src:
|
||||
url('../fonts/golos/Golos-Text_Regular.woff2') format('woff2'),
|
||||
url('../fonts/golos/Golos-Text_Regular.woff') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,553 @@
|
|||
input, select, textarea {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
border: solid 1px var(--second-dis);
|
||||
font-family: "PT Sans";
|
||||
font-size: 20px;
|
||||
color: var(--second-act);
|
||||
background-color: #fff;
|
||||
&:hover{
|
||||
border-color: var(--second);
|
||||
outline: none;
|
||||
}
|
||||
&:focus, &:focus-visible {
|
||||
border-color: var(--prime);
|
||||
outline: none;
|
||||
|
||||
}
|
||||
&:disabled{
|
||||
border-color: #EDEDED;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.invalid {
|
||||
input, select, .textbox {
|
||||
border-color: #e60046!important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.switch {
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
margin: auto 0;
|
||||
padding: 2px;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
border: 1px solid var(--second);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
&:before {
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: var(--second-dis);
|
||||
border-radius: 9px;
|
||||
transition: transform 0.3s;
|
||||
content: '';
|
||||
}
|
||||
&.active {
|
||||
background-color:var(--prime);
|
||||
border-color:var(--prime);
|
||||
&:before {
|
||||
transform: translateX(20px);
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
&.active{
|
||||
&:hover {
|
||||
background-color:var(--prime-hov);
|
||||
border-color:var(--prime-hov);
|
||||
&:before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
&:focus{
|
||||
background-color:var(--prime-act);
|
||||
border-color:var(--prime-act);
|
||||
&:before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.active):hover {
|
||||
border-color:var(--second-hov);
|
||||
&:before {
|
||||
background-color: var(--second);
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
field-date-single{
|
||||
input{
|
||||
background: url("/assets/images/ico/calendar_grey_24.svg") no-repeat right 12px center ;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.checkbox {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.checkbox+label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
font-size: 20px;
|
||||
}
|
||||
.checkbox+label::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
margin-right: 0.5em;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("~/src/assets/images/icons/checkbox/checbox_none_base_24dp.svg");
|
||||
}
|
||||
.checkbox:checked+label::before {
|
||||
background-image: url("~/src/assets/images/icons/checkbox/checbox_check_base_24dp.svg");
|
||||
}
|
||||
.checkbox:not(:disabled):not(:checked)+label:hover::before {
|
||||
background-image: url("~/src/assets/images/icons/checkbox/checbox_none_hover_24dp.svg");
|
||||
}
|
||||
.checkbox:not(:disabled):checked+label:hover::before {
|
||||
background-image: url("~/src/assets/images/icons/checkbox/checbox_check_hover_24dp.svg");
|
||||
}
|
||||
.checkbox:not(:disabled):checked:active+label::before {
|
||||
background-image: url("~/src/assets/images/icons/checkbox/checbox_check_active_24dp.svg");
|
||||
}
|
||||
.checkbox:not(:disabled):not(:checked):active+label::before {
|
||||
background-image: url("~/src/assets/images/icons/checkbox/checbox_none_active_24dp.svg");
|
||||
}
|
||||
.checkbox:focus:checked+label::before {
|
||||
background-image: url("~/src/assets/images/icons/checkbox/checbox_check_hover_24dp.svg");
|
||||
}
|
||||
.checkbox:focus:not(:checked)+label::before {
|
||||
background-image: url("~/src/assets/images/icons/checkbox/checbox_none_hover_24dp.svg");
|
||||
}
|
||||
.checkbox:disabled:checked+label::before {
|
||||
background-image: url("~/src/assets/images/icons/checkbox/checbox_check_disabled_24dp.svg");
|
||||
}
|
||||
.checkbox:disabled:not(:checked)+label::before {
|
||||
background-image: url("~/src/assets/images/icons/checkbox/checbox_none_disabled_24dp.svg");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
form-field-document{
|
||||
.area {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
padding: 16px;
|
||||
border: var(--prime) solid 1px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
font-size: 20px;
|
||||
&.hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
p {
|
||||
margin: auto;
|
||||
color: var(--second-dis);
|
||||
text-align: center;
|
||||
span {
|
||||
color: var(--orange-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
.indicator {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
background-color: #f7f7f7;
|
||||
.label {
|
||||
margin-bottom: 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.progress {
|
||||
height: 4px;
|
||||
background-color: #dfdfdf;
|
||||
overflow: hidden;
|
||||
.fill {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background-color: #3ca128;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.values {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex-wrap: nowrap;
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: $p;
|
||||
align-items: flex-start;
|
||||
.doc-item-header{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $pxs;
|
||||
.info{
|
||||
flex-shrink: 1;
|
||||
overflow: hidden;
|
||||
max-width: 530px;
|
||||
}
|
||||
.description{
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: var(--second);
|
||||
}
|
||||
file-ico{
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
.doc-item-form{
|
||||
input{
|
||||
margin-bottom: $pxs;
|
||||
}
|
||||
.doc-item-form-bar{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: $pxs;
|
||||
ico{
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
svg{
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
.close{
|
||||
background-color: var(--second);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.update{
|
||||
background-color: var(--prime);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.fader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
.form {
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
z-index: 100;
|
||||
border-radius: 12px;
|
||||
padding: $p;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
form-field-image{
|
||||
.area {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
padding: 16px;
|
||||
border: var(--prime) dashed 3px;
|
||||
border-radius: 4px;
|
||||
border-image: url('/assets/images/ico/border_gr.svg') 3 round round;
|
||||
overflow: hidden;
|
||||
font-size: 20px;
|
||||
&.hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
p {
|
||||
margin: auto;
|
||||
color: var(--second-dis);
|
||||
text-align: center;
|
||||
span {
|
||||
color: var(--orange-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
.indicator {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
background-color: #f7f7f7;
|
||||
.label {
|
||||
margin-bottom: 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.progress {
|
||||
height: 4px;
|
||||
background-color: #dfdfdf;
|
||||
overflow: hidden;
|
||||
.fill {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background-color: #3ca128;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.values {
|
||||
display: flex;
|
||||
column-gap: 24px;
|
||||
row-gap: 12px;
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
max-width: 100%;
|
||||
align-items: flex-start;
|
||||
overflow: hidden;
|
||||
.preview {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: #0033661F solid 2px;
|
||||
overflow: hidden;
|
||||
cursor: move;
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
.trash {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin: 0 0 24px;
|
||||
row-gap: 8px;
|
||||
|
||||
.caption {
|
||||
color: var(--second);
|
||||
font-family: PT Sans;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 32px;
|
||||
}
|
||||
.value {
|
||||
.error {
|
||||
margin-top: 2px;
|
||||
font-size: 0.875rem;
|
||||
color: #e60046;
|
||||
}
|
||||
}
|
||||
&.readonly {
|
||||
margin: 0 0 12px;
|
||||
.caption {
|
||||
//padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
.field {
|
||||
margin-bottom: 8px;
|
||||
.caption {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
.value {
|
||||
width: 100%;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
auth-page{
|
||||
.authentication {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.logo {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
border-right: #E0E0E0 solid 1px;
|
||||
text-align: center;
|
||||
color: #0071BB;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 100%;
|
||||
max-width: 416px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 959px) {
|
||||
.authentication {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.logo {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-right: none;
|
||||
}
|
||||
.form {
|
||||
flex-grow: 0;
|
||||
}
|
||||
::ng-deep h2 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
auth-page, auth-modal{
|
||||
direction: ltr;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 24px;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin: 0 0 16px;
|
||||
|
||||
label {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
margin: 0 0 12px;
|
||||
&:last-child {margin: 0;}
|
||||
label {
|
||||
font-size: 0.875rem;
|
||||
color: #86898E;
|
||||
a {
|
||||
color: #F9B417;
|
||||
}
|
||||
}
|
||||
input {
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 0 0 16px;
|
||||
font-size: 14px;
|
||||
color: #D91519;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
row-gap: 18px;
|
||||
.remember {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
input {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #86898E;
|
||||
}
|
||||
}
|
||||
.forget {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 24px;
|
||||
margin: 24px 0 0;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.bottom {
|
||||
flex-direction: column-reverse;
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,372 @@
|
|||
.center{
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.space{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
>.layout-corral{
|
||||
flex-basis: 1280px;
|
||||
display: flex;
|
||||
};
|
||||
.page-corral{
|
||||
flex-basis: calc($page-width + 2 * $pxl);
|
||||
padding: 0 $pxl;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
jumbotron{
|
||||
margin-block: 40px 32px;
|
||||
min-height: 40px;
|
||||
.jumbotron-content{
|
||||
flex-direction: column;
|
||||
header-user-bar{
|
||||
position: absolute;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.breadcrumbs{
|
||||
display: flex;
|
||||
gap:8px;
|
||||
color: #969595;
|
||||
div a{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap:8px;
|
||||
}
|
||||
}
|
||||
h1{
|
||||
color:#000;
|
||||
font-family: "PT Serif";
|
||||
font-size: 44px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 55px;
|
||||
margin-block: 8px 24px;
|
||||
}
|
||||
img{
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.root-page{
|
||||
h1{
|
||||
font-size: 64px;
|
||||
line-height: 80px;
|
||||
}
|
||||
.root-menu{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-between;
|
||||
.root-menu-item{
|
||||
width: 844px;
|
||||
height: 180px;
|
||||
background-color: var(--prime);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 24px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
.root-menu-img{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background-color: var(--light);
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
}
|
||||
.root-menu-name{
|
||||
padding: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
|
||||
img{
|
||||
transform: scale(1.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
.root-menu-item:first-child{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 411px;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
.root-menu-img{
|
||||
height: 532px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.root-menu-item:nth-child(3){
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.root-menu-item:nth-child(4){
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
height: 588px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
jumbotron .jumbotron-bg.rootpage-jumbotron .jumbotron-content .jumbotron-content-center h1{
|
||||
font-size: 50px;
|
||||
line-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.content-sapce{
|
||||
flex-grow: 1;
|
||||
.content-grid{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 48px;
|
||||
|
||||
left-content{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content-grid{
|
||||
width: 1280px;
|
||||
gap:32px;
|
||||
}
|
||||
|
||||
right-content{
|
||||
width: 258px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
.right-card{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
padding: 24px;
|
||||
gap:16px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid transparent;
|
||||
span{
|
||||
text-align: center;
|
||||
}
|
||||
&:hover{
|
||||
|
||||
border: 1px solid var(--prime);
|
||||
}
|
||||
}
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.main-content{
|
||||
width: 990px;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.this-root-page .main-content{
|
||||
background-color: transparent !important;
|
||||
.main-news{
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 1330px){
|
||||
|
||||
}
|
||||
|
||||
footer{
|
||||
.footer{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding-inline: 48px;
|
||||
background-color: #000;
|
||||
padding-block: 32px;
|
||||
color: #ACACAC;
|
||||
.footer-contact-left{
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-bottom: 24px;
|
||||
flex-wrap: wrap;
|
||||
flex-basis: 40%;
|
||||
margin-right: 16px;
|
||||
flex-grow: 1;
|
||||
a{
|
||||
width: 91px;
|
||||
height: 96px;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.footer-contact-left-name{
|
||||
|
||||
strong{
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-contact-left-license{
|
||||
font-family: Golos;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 21px; /* 150% */
|
||||
}
|
||||
|
||||
};
|
||||
.footer-contact-right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
padding-bottom: 24px;
|
||||
flex-basis: 40%;
|
||||
margin-left: 16px;
|
||||
flex-grow: 1;
|
||||
a{
|
||||
color: #ACACAC;
|
||||
}
|
||||
}
|
||||
.footer-down{
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-basis: 100%;
|
||||
justify-content: space-between;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid #6A6868;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
pages-menu-item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.item{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
drop-down{
|
||||
margin-inline-start: -24px;
|
||||
}
|
||||
min-height: 24px;
|
||||
>a{
|
||||
margin-top: 4px;
|
||||
&.active {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.pages{
|
||||
margin: 32px;
|
||||
width: calc( 100% - 64px );
|
||||
}
|
||||
|
||||
.jumbotron-edit-field{
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.main-news{
|
||||
margin: 32px;
|
||||
.main-news-item{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 32px;
|
||||
margin-bottom: 32px;
|
||||
.main-news-item-header{
|
||||
width: 100%;
|
||||
margin-bottom: -8px;
|
||||
h3{
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.main-news-item-card{
|
||||
width: 250px;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 308px;
|
||||
object-fit: cover;
|
||||
|
||||
}
|
||||
span{
|
||||
margin: 16px 16px 0;
|
||||
color: #969595;
|
||||
}
|
||||
h4{
|
||||
margin: 16px;
|
||||
}
|
||||
&:hover{
|
||||
h4{
|
||||
color: var(--prime);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1330px){
|
||||
.space{
|
||||
.layout-corral{
|
||||
max-width: 100vw;
|
||||
}
|
||||
}
|
||||
right-content, left-content{
|
||||
display: none;
|
||||
}
|
||||
.jumbotron-edit-field{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 900px){
|
||||
.space{
|
||||
.layout-corral, .page-corral{
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
.copyright{
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
.list.item.default {
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
|
||||
.main-bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
.left {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 24px;
|
||||
flex-shrink: 0;
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
button {
|
||||
margin: 0 12px 0 0;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.params {
|
||||
p {
|
||||
margin-bottom: 14px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-bottom: 14px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: bold;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
.yellow, .reviewing {color: #c48723;}
|
||||
.green, .active {color: #669933;}
|
||||
.red, .declined {color: #e60046;}
|
||||
.edit {
|
||||
//background-image: url("~src/assets/images/icons/edit_24dp.svg");
|
||||
}
|
||||
.delete {
|
||||
//background-image: url("~src/assets/images/icons/delete_24dp.svg");
|
||||
}
|
||||
.toggle {
|
||||
margin-top: auto;
|
||||
margin-left: auto;
|
||||
//background-image: url("~src/assets/images/icons/arrow_down_24dp.svg");
|
||||
transition: transform 0.2s;
|
||||
&.active {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
}
|
||||
.name {
|
||||
margin-bottom: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.details {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.list.item.default {
|
||||
padding: 16px;
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,320 @@
|
|||
pages-menu{
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
padding-left: 0;
|
||||
}
|
||||
pages-menu{
|
||||
padding-inline-start: 24px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
header{
|
||||
|
||||
.header.layout-corral{
|
||||
flex-direction: column;
|
||||
|
||||
.header-top-menu{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
height: 40px;
|
||||
background-color: var(--prime);
|
||||
.header-top-menu-ref{
|
||||
display: flex;
|
||||
align-items: end;
|
||||
color: #FFF;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
};
|
||||
locale{
|
||||
img{
|
||||
width: 27px;
|
||||
}
|
||||
.dropdown{
|
||||
left: -198px;
|
||||
top: 29px;
|
||||
img{
|
||||
border: 1px solid var(--second-dis);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-contact{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 128px;
|
||||
padding-inline: 48px;
|
||||
background-color: var(--light);
|
||||
.header-contact-left{
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
a{
|
||||
width: 91px;
|
||||
height: 96px;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
div{
|
||||
width: 280px;
|
||||
span{
|
||||
color: #6A6868;
|
||||
}
|
||||
}
|
||||
};
|
||||
.header-contact-right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
color: #6A6868;
|
||||
div{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
ico{
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pages-menu.lvl-0{
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
padding-inline: 48px;
|
||||
background-color: #FFF;
|
||||
position: relative;
|
||||
>pages-menu-item{
|
||||
.item{
|
||||
padding: 14px 24px;
|
||||
drop-down{
|
||||
display: none;
|
||||
}
|
||||
a{
|
||||
color: #000;
|
||||
margin-top: 0;
|
||||
|
||||
}
|
||||
&.parent,&.current{
|
||||
padding-bottom: 10px;
|
||||
a{
|
||||
color: var(--prime);
|
||||
margin-top: 0;
|
||||
}
|
||||
border-bottom: 4px solid var(--prime);
|
||||
}
|
||||
&:hover{
|
||||
a{
|
||||
color: var(--prime);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
pages-menu{
|
||||
display: none;
|
||||
}
|
||||
|
||||
pages-menu{
|
||||
position: absolute;
|
||||
background-color:#FFF;
|
||||
top: 52px;
|
||||
border-top: 2px solid var(--light);
|
||||
z-index:1;
|
||||
padding: 14px 0;
|
||||
.item{
|
||||
padding: 4px 24px;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
/* has mouse */
|
||||
|
||||
header{
|
||||
.header.layout-corral{
|
||||
pages-menu.lvl-0{
|
||||
>pages-menu-item:hover{
|
||||
pages-menu{
|
||||
display: flex;
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
/* fore tuchscreen */
|
||||
header{
|
||||
.header.layout-corral{
|
||||
pages-menu.lvl-0{
|
||||
>pages-menu-item{
|
||||
pages-menu{
|
||||
&.selected{
|
||||
display: flex;
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
a.logo{
|
||||
img{
|
||||
width:114px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
slider[side="left"]{
|
||||
.slider-bar{
|
||||
background-color: var(--prime-act);
|
||||
padding: 40px 48px;
|
||||
width: 480px;
|
||||
max-width: 100vw;
|
||||
.header{
|
||||
background-color: var(--prime-act);
|
||||
box-shadow: none;
|
||||
padding: 0 0 28px;
|
||||
.title{
|
||||
ico svg{
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.body{
|
||||
pages-menu{
|
||||
ico{
|
||||
|
||||
margin-top: 20px;
|
||||
svg{
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
a{
|
||||
font-family: PT Sans;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
color: var(--white);
|
||||
margin: 20px 0 2px 20px;
|
||||
}
|
||||
|
||||
&.top-menu{
|
||||
margin-bottom: 20px;
|
||||
&>pages-menu-item>.item>a{
|
||||
font-family: PT Sans Narrow;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.24px;
|
||||
}
|
||||
}
|
||||
.current{
|
||||
border-bottom: 2px solid var(--prime-dis);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-menu{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap:40px;
|
||||
padding: 20px 0 0 ;
|
||||
border-top: 1px solid var(--prime);
|
||||
a{
|
||||
font-family: PT Sans Narrow;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.24px;
|
||||
color: #FFF;
|
||||
}
|
||||
locale{
|
||||
img{
|
||||
width: 27px;
|
||||
}
|
||||
.dropdown{
|
||||
left: 48px;
|
||||
top:-24px;
|
||||
img{
|
||||
border: 1px solid var(--second-dis);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1330px){
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px){
|
||||
slider[side="left"]{
|
||||
.slider-bar{
|
||||
padding: 40px 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 1330px){
|
||||
|
||||
}
|
||||
slider-menu{
|
||||
pages-menu:not(.top-menu,.open){
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
right-content{
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
header-user-bar{
|
||||
cursor: pointer;
|
||||
.user {
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 11px;
|
||||
height: 64px;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
border-radius: 32px;
|
||||
border: 1px solid var(--second-dis);
|
||||
|
||||
.avatar {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
color: var(--prime);
|
||||
border: 1px solid var(--prime);
|
||||
background: #fff;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
.initials {
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.name{
|
||||
margin: 8px 4px 0 12px;
|
||||
color: var(--second-act);
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.dropdown{
|
||||
right: 16px;
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
drop-down {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
.on{
|
||||
svg{
|
||||
color:var(--dark)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@media screen and (max-width: 1330px) {
|
||||
.user {
|
||||
.avatar {
|
||||
background-color: var(--white);
|
||||
margin-right: 18px;
|
||||
}
|
||||
.name{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,931 @@
|
|||
|
||||
page-sections{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.section{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
h2{
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
h4 {
|
||||
margin-bottom: -16px;
|
||||
}
|
||||
p+p{
|
||||
padding-top: 16px;
|
||||
}
|
||||
page-section:first-child{
|
||||
.menu .block .up{
|
||||
display: none;
|
||||
}
|
||||
h3{margin-top: 0;}
|
||||
}
|
||||
page-section:nth-last-child(2){
|
||||
.menu .block .down{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html-section {
|
||||
text-align: justify;
|
||||
ul{
|
||||
|
||||
li{
|
||||
padding-inline-start: 12px;
|
||||
}
|
||||
li+li{
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
ol{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
add-section, publications-list{
|
||||
.add{
|
||||
position: relative;
|
||||
margin: 24px 0;
|
||||
|
||||
.toggle{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
ico{
|
||||
cursor: pointer;
|
||||
}
|
||||
.two-lines{
|
||||
flex-grow: 1;
|
||||
height: 4px;
|
||||
border-top: 1px solid var(--second-dis);
|
||||
border-bottom: 1px solid var(--second-dis);
|
||||
}
|
||||
|
||||
&.active{
|
||||
a{
|
||||
color: var(--prime-act);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown{
|
||||
left:calc( 50% - 125px );
|
||||
top:22px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
.block {
|
||||
ico{
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
svg{
|
||||
color: var(--second)
|
||||
};
|
||||
&:hover{
|
||||
svg{
|
||||
color: var(--second-act)
|
||||
};
|
||||
}
|
||||
}
|
||||
background: var(--light);
|
||||
border: 1px solid var(--second-dis);
|
||||
border-radius: 4px;
|
||||
padding: 8px 24px;
|
||||
display: flex;
|
||||
margin-bottom: 24px;
|
||||
gap: 24px
|
||||
}
|
||||
}
|
||||
|
||||
cards-section{
|
||||
.cards-add{
|
||||
direction: ltr;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid var(--second-dis);
|
||||
border-bottom: 1px solid var(--second-dis);
|
||||
margin-bottom: 40px;
|
||||
ico{
|
||||
cursor: pointer;
|
||||
svg{
|
||||
color: var(--prime) !important;
|
||||
}
|
||||
&:hover{
|
||||
svg{
|
||||
color: var(--prime-act) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
cards-section-items{
|
||||
.items {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
cards-section-item {
|
||||
|
||||
width: 252px;
|
||||
cards-item-persons{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
.image{
|
||||
width: 100%;
|
||||
height: 338px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--second-dis);
|
||||
background: url('../images/view-man.svg') var(--white) center / 65% no-repeat;
|
||||
overflow: hidden;
|
||||
img{
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.title{
|
||||
font-family: PT Sans Narrow;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
letter-spacing: 0.24px;
|
||||
color: var(--second);
|
||||
}
|
||||
.subtitle{
|
||||
color: var(--dark);
|
||||
}
|
||||
.subtitle{
|
||||
color: var(--dark);
|
||||
}
|
||||
.email{
|
||||
color:var(--prime)
|
||||
}
|
||||
.details a{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
.entry-contents{
|
||||
text-align: justify;
|
||||
text-indent: 30px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
cards-item-partners{
|
||||
a{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 252px;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--second-dis);
|
||||
background-color: var(--white);
|
||||
overflow: hidden;
|
||||
img{
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.1s;
|
||||
&:hover{
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// cards
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.cards-section-default{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
cards-section-item{
|
||||
flex-basis: 340px;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.alternative{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.card-header{
|
||||
font-size: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 125%;
|
||||
color: var(--bk44);
|
||||
order: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.card-image{
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
object-fit: scale-down;
|
||||
}
|
||||
.card-subheader, .card-text{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.default{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
margin-bottom: -8px;
|
||||
.card-image{
|
||||
width: 100%;
|
||||
max-height: 212px;
|
||||
height: calc(( 100vw - 32px ) * 0.62);
|
||||
border: 1px solid var(--bk22);
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.card-subheader{
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 27px;
|
||||
color: var(--bk66);
|
||||
order: 1;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.card-header{
|
||||
font-size: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 125%;
|
||||
color: var(--bk44);
|
||||
order: 2;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.card-text{
|
||||
display: none;
|
||||
}
|
||||
&::after{
|
||||
order: 3;
|
||||
content: '';
|
||||
width: 120px;
|
||||
height: 24px;
|
||||
background-image: url(/assets/images/ico/arrow_forward_24.svg);
|
||||
}
|
||||
&:hover{
|
||||
.card-image{
|
||||
border-color: var(--bk44);
|
||||
}
|
||||
.card-subheader{
|
||||
color: var(--bk88);
|
||||
}
|
||||
.card-header{
|
||||
color: var(--bk66);
|
||||
}
|
||||
&::after{
|
||||
background-image: url(/assets/images/ico/arrow_forward_24_hover.svg);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cards-section-slides.items{
|
||||
max-width: 588px;
|
||||
margin-left: 0;
|
||||
cards-section-item{
|
||||
margin-bottom: 40px;
|
||||
height: 348px;
|
||||
border: 1px solid var(--prime);
|
||||
background: var(--bg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.cards-section-slides{
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
margin-left: -50px;
|
||||
padding-bottom: 32px ;
|
||||
cursor: pointer;
|
||||
.swiper-slide{
|
||||
display: flex;
|
||||
width: 588px;
|
||||
}
|
||||
cards-section-item{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 274px;
|
||||
padding: 24px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--second);
|
||||
background: var(--bg);
|
||||
overflow: hidden;
|
||||
.card-slide{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
.card-header{
|
||||
font-size: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 125%;
|
||||
color: var(--bk66);
|
||||
flex-basis: 100%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.card-image{
|
||||
width: 120px;
|
||||
height: 170px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
top: 56px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--second);
|
||||
order: 1;
|
||||
margin-bottom: -120px;
|
||||
}
|
||||
.card-text{
|
||||
order: 2;
|
||||
flex-shrink: 1;
|
||||
flex-basis: calc( 100% - 136px );
|
||||
color: var(--bk88);
|
||||
font-family: PT Sans;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 27px;
|
||||
margin-inline-start: 16px;
|
||||
}
|
||||
.card-subheader{
|
||||
text-align: right;
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
color: var(--bk66);
|
||||
order: 3;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// cards
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
images-section{
|
||||
display: block;
|
||||
margin-block: 32px;
|
||||
|
||||
.mobile{
|
||||
display: none;
|
||||
}
|
||||
.desctop{
|
||||
display: flex;
|
||||
}
|
||||
.close{
|
||||
position: absolute;
|
||||
top:24px;
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.items {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
gap: 8px;
|
||||
|
||||
img{
|
||||
|
||||
}
|
||||
|
||||
&.tiles{
|
||||
.item{
|
||||
margin-bottom: 16px;
|
||||
img{
|
||||
border: 1px solid var(--second-dis);
|
||||
max-height: 273px;
|
||||
max-width: 273px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.full-width{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.item{
|
||||
max-width: 100%;
|
||||
margin-bottom: 32px;
|
||||
img{
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.full-width {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.swiper-box{
|
||||
width: 100% !important;
|
||||
height: 75vw !important;
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
|
||||
.fullscreen {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
align-items: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: grey;
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px){
|
||||
.carousel {
|
||||
|
||||
.prev, .next {
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
&.prev{
|
||||
left: 36px;
|
||||
z-index: 2;
|
||||
}
|
||||
&.next{
|
||||
right: 36px;
|
||||
}
|
||||
}
|
||||
.center {
|
||||
width: 100%;
|
||||
.slide {
|
||||
width: calc( 100vw - 80px );
|
||||
height: calc( (100vw - 80px) * 0.75 );
|
||||
|
||||
img {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
.desctop{
|
||||
display: none !important;
|
||||
}
|
||||
.mobile{
|
||||
display: flex !important;
|
||||
}
|
||||
.fullscreen {
|
||||
|
||||
|
||||
.content {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
|
||||
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.prev{
|
||||
z-index: 5;
|
||||
margin-right: -50px;
|
||||
}
|
||||
.next{
|
||||
z-index: 5;
|
||||
margin-left: -50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
publications-list{
|
||||
.add a, .publication-read-more{
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
|
||||
publications-list-item {
|
||||
display: block;
|
||||
background-color: #FFF;
|
||||
padding-top: 32px;
|
||||
&:last-child{
|
||||
.publication-content{
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.publication-content{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
min-height: 232px;
|
||||
border-bottom: solid 1px #E5E5E5;
|
||||
|
||||
|
||||
gellery{
|
||||
display: block;
|
||||
order: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
.poster{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
img{
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.gellery-fullscreen{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.date{
|
||||
margin-left: 232px;
|
||||
display: block;
|
||||
order: 1;
|
||||
color: #6A6868;
|
||||
font-family: Golos;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 21px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.name h3{
|
||||
margin: 0 0 8px 232px;
|
||||
display: block;
|
||||
order: 1;
|
||||
color: #000;
|
||||
font-family: "PT Serif";
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.excerpt{
|
||||
margin-left: 232px;
|
||||
display: block;
|
||||
order: 1;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.publication-read-more{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
publication-page {
|
||||
background-color: #FFF;
|
||||
display: block;
|
||||
.date{
|
||||
color: var(--second);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
|
||||
.name{
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.content{
|
||||
margin-top: $p;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $p;
|
||||
text-align: justify;
|
||||
};
|
||||
|
||||
.publication-page-back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
|
||||
gellery{
|
||||
.poster{
|
||||
height: 468px;
|
||||
max-width: calc( 100vw - 80px);
|
||||
max-height: calc( (100vw - 80px ) * 0.7 );
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
>img{
|
||||
height: 100%;
|
||||
border: 1px solid var(--second-dis);
|
||||
background-color: var(--second-dis);
|
||||
}
|
||||
}
|
||||
.posters{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
gap: 8px;
|
||||
justify-content: flex-start;
|
||||
.item{
|
||||
width: 72px;
|
||||
height: 52px;
|
||||
border: 1px solid var(--prime);
|
||||
cursor: pointer;
|
||||
:hover{
|
||||
border-color: var(--prime-act);
|
||||
}
|
||||
img{
|
||||
object-fit: cover;
|
||||
object-position: 50% 20%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.gellery-fullscreen{
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 1000;
|
||||
top:0;
|
||||
left: 0;
|
||||
background-color: gray;
|
||||
swiper-gellery{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
page-sections{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
video-section{
|
||||
cursor: pointer;
|
||||
.video-box{
|
||||
max-width: 720px;
|
||||
height: 405px;
|
||||
max-height: 52vw;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
||||
.poster{
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.icon{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
iframe{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
contact-section{
|
||||
|
||||
.contact{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
h2{
|
||||
|
||||
font-family: "PT Serif";
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
margin: 0;
|
||||
}
|
||||
p{
|
||||
margin-top: -16px;
|
||||
}
|
||||
}
|
||||
|
||||
page-section feedback-section{
|
||||
margin-top: 16px;
|
||||
display: block;
|
||||
form{
|
||||
max-width: none !important;
|
||||
background: #F3F3F3;
|
||||
padding: 24px;
|
||||
|
||||
form-field{
|
||||
.field{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.caption{
|
||||
width: 25%;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.value{
|
||||
flex-grow: 1;
|
||||
.area{
|
||||
background-color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
&:last-child{
|
||||
.field{
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
.caption{
|
||||
width:auto;
|
||||
margin-left: 16px;
|
||||
color: #000;
|
||||
}
|
||||
.value{
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.row{
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
&::before{
|
||||
content: '* Поля, обязательные для заполнения';
|
||||
color:#6A6868;
|
||||
font-family: Golos;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
button {
|
||||
&:not(.next, .count){
|
||||
display: flex;
|
||||
padding: 1px 0px 2px 0px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--prime);
|
||||
background: #FFF;
|
||||
color: var(--prime);
|
||||
text-align: center;
|
||||
font-family: Golos;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 21px;
|
||||
&.active {
|
||||
color: #FFF;
|
||||
border-color: var(--prime);
|
||||
background-color: var(--prime);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.next {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.dots {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: transparent url("~src/assets/images/icons/more_horiz_20dp.svg") no-repeat center;
|
||||
}
|
||||
.count {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
flex-grow: 1;
|
||||
color: var(--black);
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.pagination {
|
||||
.next {
|
||||
display: none;
|
||||
}
|
||||
.count {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
|
||||
registry-page{
|
||||
page-sections{
|
||||
padding: 0;
|
||||
>*{
|
||||
margin: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.registry {
|
||||
background-color: #ffffff;
|
||||
.filters{
|
||||
display: flex;
|
||||
gap:24px;
|
||||
align-items: flex-end;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.bar {
|
||||
background-color: var(--second);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 24px;
|
||||
margin-bottom: 24px;
|
||||
.name{
|
||||
color: var(--white);
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 24px; /* 150% */
|
||||
}
|
||||
.menu{
|
||||
display: flex;
|
||||
gap: $p;
|
||||
svg{
|
||||
cursor: pointer;
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
drop-down{
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
registry-category {
|
||||
display: block;
|
||||
.bar{
|
||||
background-color: var(--second);
|
||||
|
||||
.name{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
svg{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.top-panel {
|
||||
|
||||
.buttons {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.filters {
|
||||
padding: 16px 0 24px;
|
||||
|
||||
.search {
|
||||
flex-grow: 1;
|
||||
label {
|
||||
margin-bottom: 2px;
|
||||
color: var(--second);
|
||||
}
|
||||
input {
|
||||
height: 40px;
|
||||
padding: 8px 52px 8px 16px;
|
||||
border: 1px solid (--second-dis);
|
||||
background: #ffffff url('~src/assets/images/icons/search_24dp.svg') calc(100% - 12px) 50% no-repeat;
|
||||
}
|
||||
}
|
||||
.advanced {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
registry-entries {
|
||||
display: block;
|
||||
padding-bottom: 24px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
registry-category{
|
||||
.bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
.name {
|
||||
margin-right: auto;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 24px;
|
||||
button {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
.expand {
|
||||
margin-left: 48px;
|
||||
button {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
transform: rotateZ(180deg);
|
||||
transition: transform 0.3s;
|
||||
&.less {transform: rotateZ(0);}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.items {
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
registry-entry {
|
||||
display: block;
|
||||
padding: 16px 0;
|
||||
border-bottom: #E8E8E8 solid 1px;
|
||||
&:first-child {
|
||||
border-top: #E8E8E8 solid 1px;
|
||||
}
|
||||
.main {
|
||||
.name {
|
||||
margin-right: 8px;
|
||||
a{
|
||||
display: inline-flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.menu-entry{
|
||||
display: inline-flex;
|
||||
gap: 24px;
|
||||
}
|
||||
.toggle {
|
||||
margin-left: auto;
|
||||
button {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
background: transparent url('~src/assets/images/icons/expand_less_20.svg') 50% 50% no-repeat;
|
||||
transform: rotateZ(180deg);
|
||||
transition: transform 0.3s;
|
||||
&.less {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
.state {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
border-radius: 10px;
|
||||
background-color: #777777;
|
||||
color: #ffffff;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
&.active {background-color: #28A814;}
|
||||
&.suspended,&.cancelled {background-color: #D9235F;}
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
padding: 16px 0 0;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin-bottom: 16px;
|
||||
&:last-child {margin-bottom: 0}
|
||||
&.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
pagination{
|
||||
display: block;
|
||||
padding: 0 24px;
|
||||
&:first-child {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
&:last-child {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1330px) {
|
||||
registry-entry {
|
||||
padding: 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,234 @@
|
|||
.slider-bar {
|
||||
|
||||
|
||||
max-width: 720px;
|
||||
|
||||
background-color: #ffffff;
|
||||
|
||||
&.right-side{
|
||||
animation: slide-from-right 0.3s;
|
||||
right: 0;
|
||||
box-shadow: -3px 0 6px 0 rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
&.left-side{
|
||||
animation: slide-from-left 0.3s;
|
||||
left: 0;
|
||||
box-shadow: 3px 0 6px 0 rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
|
||||
z-index: 110;
|
||||
|
||||
.header {
|
||||
padding: 16px 24px;
|
||||
background: #F8F8F8;
|
||||
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
||||
|
||||
.title {
|
||||
|
||||
|
||||
|
||||
h2 {
|
||||
font-family: PT Sans;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
ico{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.stepper {
|
||||
padding: var(--l) 0 0;
|
||||
.items {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--l);
|
||||
.item {
|
||||
width: 150px;
|
||||
flex-shrink: 1;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
.num {
|
||||
position: relative;
|
||||
width: calc(100% - 13px);
|
||||
height: var(--l);
|
||||
padding: 4px 6px;
|
||||
margin: 0 0 4px;
|
||||
border-radius: 2px 0 0 2px;
|
||||
background-color: #E8E9EB;
|
||||
color: #86898E;
|
||||
font-weight: bold;
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
width: 13px;
|
||||
height: 100%;
|
||||
background: transparent url('~src/assets/images/icons/step_upcoming.svg') 100% 50% no-repeat;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
.name {
|
||||
font-size: 14px;
|
||||
color: #6c6c6c;
|
||||
}
|
||||
&.active {
|
||||
.num {
|
||||
background-color: #B88E12;
|
||||
color: #ffffff;
|
||||
&:after {
|
||||
background-image: url('~src/assets/images/icons/step_active.svg');
|
||||
}
|
||||
}
|
||||
.name {
|
||||
color: #B88E12;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
&.finished {
|
||||
.num {
|
||||
background-color: rgba(184, 142, 18, 0.2);
|
||||
color: #B88E12;
|
||||
&:after {
|
||||
background-image: url('~src/assets/images/icons/step_finished.svg');
|
||||
}
|
||||
}
|
||||
.name {
|
||||
color: #B88E12;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
|
||||
|
||||
form-frame, object-filters{
|
||||
margin: 36px 24px;
|
||||
display: block;
|
||||
|
||||
.group .title {
|
||||
margin: 16px 0;
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
}
|
||||
form-field{
|
||||
margin-bottom: 16px;
|
||||
.field {
|
||||
.caption{
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
input, textarea, .combobox, .area p{
|
||||
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px;
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
input{
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
[footer] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
background: #F8F8F8;
|
||||
box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.12);
|
||||
|
||||
button{
|
||||
font-family: PT Sans;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px; /* 171.429% */
|
||||
letter-spacing: 0.56px;
|
||||
text-transform: uppercase;
|
||||
border-radius: 4px;
|
||||
padding: 8px 20px;
|
||||
}
|
||||
|
||||
.left {
|
||||
.reset {
|
||||
color: #6C6C6C;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.notice {
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
button {
|
||||
margin-left: var(--l);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider-overlay {
|
||||
|
||||
background-color: rgba(0, 0, 0, 0.37);
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.slider-bar {
|
||||
.header, .footer {
|
||||
padding: var(--m);
|
||||
}
|
||||
|
||||
[footer] {
|
||||
.left {
|
||||
font-size: 14px;
|
||||
}
|
||||
.right {
|
||||
button {
|
||||
padding: var(--s) var(--m);
|
||||
margin-left: var(--m);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
table.default {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
tr {
|
||||
td {
|
||||
padding: 6px 0;
|
||||
&.caption {
|
||||
width: 232px;
|
||||
padding-right: 24px;
|
||||
color: #86898E;
|
||||
vertical-align: top;
|
||||
}
|
||||
&.value {
|
||||
vertical-align: top;
|
||||
p {
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.lined {
|
||||
tr {
|
||||
td {
|
||||
border-bottom: #e0e0e0 solid 1px;
|
||||
}
|
||||
&:last-child {
|
||||
td {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
table.default {
|
||||
tr {
|
||||
display: block;
|
||||
td {
|
||||
display: block;
|
||||
padding: 0;
|
||||
b {
|
||||
display: block;
|
||||
padding: 14px 0 0;
|
||||
}
|
||||
&.caption {
|
||||
width: 100%;
|
||||
margin: 14px 0 6px;
|
||||
}
|
||||
&.value {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
&.lined tr td {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
.tabs.default {
|
||||
display: flex;
|
||||
margin-bottom: 32px;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
box-shadow: inset 0px -1px var(--second-dis);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
&.simple {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
>div{
|
||||
margin-right: -1px;
|
||||
button {
|
||||
padding: 8px 20px;
|
||||
background: #ffffff;
|
||||
border-radius: 4px 4px 0 0;
|
||||
border: var(--prime) solid 1px;
|
||||
color: var(--prime);
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px; /* 150% */
|
||||
cursor: pointer;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
&:last-child {
|
||||
|
||||
}
|
||||
&.active {
|
||||
color: #ffffff;
|
||||
background-color: var(--prime);
|
||||
border-color: var(--prime)
|
||||
}
|
||||
&.disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--prime-act);
|
||||
border-color: var(--prime-act);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/* Generated by ParaType (http://www.paratype.com)*/
|
||||
/* Font Golos Text: Copyright ? ParaType, 2018. All rights reserved.*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'GolosTextWebBlack';
|
||||
src:
|
||||
url('Golos-Text_Black.woff2') format('woff2'),
|
||||
url('Golos-Text_Black.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
|
||||
<!--
|
||||
These webfonts were purchased at www.ParaType.com
|
||||
You can purchase them too. Please don't steal them.
|
||||
|
||||
Please don't remove this notice. Thanks.
|
||||
-->
|
||||
<title>Font Face Demo</title>
|
||||
<link rel="stylesheet" href="Golos-Text_Black.css" type="text/css" charset="utf-8">
|
||||
<style type="text/css" media="screen">
|
||||
body {font-family: Helvetica, Arial, sans-serif; color:#333333;}
|
||||
.GolosTextWebBlack {
|
||||
font-family: 'GolosTextWebBlack';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
color:#000000;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 18px;
|
||||
color:#666666;
|
||||
}
|
||||
.FontName {
|
||||
font-size: 60px;
|
||||
}
|
||||
.CopyrightFont {
|
||||
font-size: 10px;
|
||||
}
|
||||
#container {
|
||||
width: 900px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
overflow: none;
|
||||
}
|
||||
.samplebox {
|
||||
white-space:wrap;
|
||||
margin-top:10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.features {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.feature {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
cursor: pointer;
|
||||
margin: 2px;
|
||||
border-radius: 15%;
|
||||
background-color: #DCDCDC;
|
||||
border: none;
|
||||
}
|
||||
.active{
|
||||
background-color: #808080;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
fsize = 24
|
||||
window.onload = function(){ active('kern')};
|
||||
function less()
|
||||
{
|
||||
if (fsize > 2) {
|
||||
fsize = fsize-1;
|
||||
p = document.getElementById('sample');
|
||||
p.style.fontSize = fsize + "px";
|
||||
document.getElementById('stext').value = fsize + "px";
|
||||
}
|
||||
}
|
||||
|
||||
function more()
|
||||
{
|
||||
if (fsize < 100) {
|
||||
fsize = fsize+1;
|
||||
setSize ()
|
||||
}
|
||||
}
|
||||
|
||||
function setSize ()
|
||||
{
|
||||
p = document.getElementById('sample');
|
||||
document.getElementById('sample-text').style.fontSize = "28px";
|
||||
p.style.fontSize = fsize + "px";
|
||||
document.getElementById('stext').value = fsize + "px";
|
||||
}
|
||||
|
||||
function changeFSize()
|
||||
{
|
||||
tsize = document.getElementById('stext').value;
|
||||
fsize = parseInt (tsize);
|
||||
setSize ();
|
||||
return false;
|
||||
}
|
||||
function active(value)
|
||||
{
|
||||
const button = document.getElementById(value);
|
||||
const allFeatures = document.querySelectorAll(".features button");
|
||||
button.classList.toggle('active');
|
||||
let features = "";
|
||||
for(let i = 0; i < allFeatures.length; i ++){
|
||||
features += "'" + allFeatures[i].id + "'" + " ";
|
||||
if(allFeatures[i].classList.contains("active")){
|
||||
features += "1";
|
||||
}
|
||||
else { features += "0"}
|
||||
|
||||
if(i+1 !== allFeatures.length) {
|
||||
features += ",";
|
||||
}
|
||||
}
|
||||
let sample = document.getElementById('sample');
|
||||
let sampleText = document.getElementById('sample-text');
|
||||
let styles = "font-feature-settings:" + features + ";";
|
||||
sample.setAttribute("style", styles);
|
||||
sampleText.setAttribute("style", styles);
|
||||
setSize();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<p class="caption">
|
||||
Font: <br>
|
||||
|
||||
<span class="GolosTextWebBlack samplebox" style="font-size:60px; color:#990000">
|
||||
Golos Text Black</span></p>
|
||||
|
||||
<p class="caption">
|
||||
Sample Text:</p>
|
||||
<p id="sample-text" class="GolosTextWebBlack samplebox" style="font-size:28px">
|
||||
Jelly-like above the high wire, six quaking pachyderms kept the climax of the extravaganza in a dazzling state of flux.<br>Юный директор целиком сжевал весь объём продукции фундука (товара дефицитного и деликатесного), идя энергично через хрустящий камыш.</p>
|
||||
|
||||
<p class="caption">
|
||||
<div>
|
||||
<div>
|
||||
<form onsubmit="return changeFSize();">
|
||||
Character Set: <input type="button" value="-" onClick="less()"> <input id="stext" type="text" value="24px" style="width:40px"> <input type="button" value="+" onClick="more()"></p>
|
||||
</form>
|
||||
<p id="sample" class="GolosTextWebBlack samplebox" style="font-size:24px;">
|
||||
! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ ı Ł ł Œ œ Š š Ÿ Ž ž ƒ ȷ ʼ ˆ ˇ ˙ ˚ ˜ ˝ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ў џ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҡ ҡ Ң ң Ҥ ҥ Ҫ ҫ Ү ү Ұ ұ Ҳ ҳ Ҷ ҷ Ҹ ҹ Һ һ Ӏ Ӄ ӄ Ӈ ӈ Ӌ ӌ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӹ ӹ Ԓ ԓ ẞ ‐ ‑ ‒ – — ‘ ’ ‚ “ ” „ † ‡ • … ‰ ‹ › ⁄ ⁴ € ₴ ₸ ₽ № ™ ← ↑ → ↓ ↖ ↗ ↘ ↙ ∆ − ∕ √ ≈ ≤ ≥ 〈 〉
|
||||
</p>
|
||||
</div>
|
||||
<div class="features">
|
||||
<p>OpenType features:</p><button id='aalt' class='feature' onclick=active('aalt') title='Access All Alternates'>aalt</button><button id='calt' class='feature' onclick=active('calt') title='Contextual Alternates'>calt</button><button id='case' class='feature' onclick=active('case') title='Case-Sensitive Forms'>case</button><button id='ordn' class='feature' onclick=active('ordn') title='Ordinals'>ordn</button><button id='sups' class='feature' onclick=active('sups') title='Superscript'>sups</button><button id='frac' class='feature' onclick=active('frac') title='Fractions'>frac</button><button id='pnum' class='feature' onclick=active('pnum') title='Proportional Figures'>pnum</button><button id='tnum' class='feature' onclick=active('tnum') title='Tabular Figures'>tnum</button><button id='lnum' class='feature' onclick=active('lnum') title='Lining Figures'>lnum</button><button id='onum' class='feature' onclick=active('onum') title='Oldstyle Figures'>onum</button><button id='cpsp' class='feature' onclick=active('cpsp') title='Capital Spacing'>cpsp</button><button id='kern' class='feature' onclick=active('kern') title='Kerning'>kern</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="CopyrightFont">
|
||||
© ParaType, 2013. All rights reserved.<br>All trademarks mentioned in this document are the trademarks or registered trademarks of their respective holders. You may reproduce and<br>distribute this document as long as you do not remove ParaType copyright information and do not make any changes in the document.<br>Русская панграмма из книги В. В. Шахиджаняна «Соло на клавиатуре»</p> </div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/* Generated by ParaType (http://www.paratype.com)*/
|
||||
/* Font Golos Text: Copyright ? ParaType, 2018. All rights reserved.*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'GolosTextWebBold';
|
||||
src:
|
||||
url('Golos-Text_Bold.woff2') format('woff2'),
|
||||
url('Golos-Text_Bold.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
|
||||
<!--
|
||||
These webfonts were purchased at www.ParaType.com
|
||||
You can purchase them too. Please don't steal them.
|
||||
|
||||
Please don't remove this notice. Thanks.
|
||||
-->
|
||||
<title>Font Face Demo</title>
|
||||
<link rel="stylesheet" href="Golos-Text_Bold.css" type="text/css" charset="utf-8">
|
||||
<style type="text/css" media="screen">
|
||||
body {font-family: Helvetica, Arial, sans-serif; color:#333333;}
|
||||
.GolosTextWebBold {
|
||||
font-family: 'GolosTextWebBold';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
color:#000000;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 18px;
|
||||
color:#666666;
|
||||
}
|
||||
.FontName {
|
||||
font-size: 60px;
|
||||
}
|
||||
.CopyrightFont {
|
||||
font-size: 10px;
|
||||
}
|
||||
#container {
|
||||
width: 900px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
overflow: none;
|
||||
}
|
||||
.samplebox {
|
||||
white-space:wrap;
|
||||
margin-top:10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.features {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.feature {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
cursor: pointer;
|
||||
margin: 2px;
|
||||
border-radius: 15%;
|
||||
background-color: #DCDCDC;
|
||||
border: none;
|
||||
}
|
||||
.active{
|
||||
background-color: #808080;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
fsize = 24
|
||||
window.onload = function(){ active('kern')};
|
||||
function less()
|
||||
{
|
||||
if (fsize > 2) {
|
||||
fsize = fsize-1;
|
||||
p = document.getElementById('sample');
|
||||
p.style.fontSize = fsize + "px";
|
||||
document.getElementById('stext').value = fsize + "px";
|
||||
}
|
||||
}
|
||||
|
||||
function more()
|
||||
{
|
||||
if (fsize < 100) {
|
||||
fsize = fsize+1;
|
||||
setSize ()
|
||||
}
|
||||
}
|
||||
|
||||
function setSize ()
|
||||
{
|
||||
p = document.getElementById('sample');
|
||||
document.getElementById('sample-text').style.fontSize = "28px";
|
||||
p.style.fontSize = fsize + "px";
|
||||
document.getElementById('stext').value = fsize + "px";
|
||||
}
|
||||
|
||||
function changeFSize()
|
||||
{
|
||||
tsize = document.getElementById('stext').value;
|
||||
fsize = parseInt (tsize);
|
||||
setSize ();
|
||||
return false;
|
||||
}
|
||||
function active(value)
|
||||
{
|
||||
const button = document.getElementById(value);
|
||||
const allFeatures = document.querySelectorAll(".features button");
|
||||
button.classList.toggle('active');
|
||||
let features = "";
|
||||
for(let i = 0; i < allFeatures.length; i ++){
|
||||
features += "'" + allFeatures[i].id + "'" + " ";
|
||||
if(allFeatures[i].classList.contains("active")){
|
||||
features += "1";
|
||||
}
|
||||
else { features += "0"}
|
||||
|
||||
if(i+1 !== allFeatures.length) {
|
||||
features += ",";
|
||||
}
|
||||
}
|
||||
let sample = document.getElementById('sample');
|
||||
let sampleText = document.getElementById('sample-text');
|
||||
let styles = "font-feature-settings:" + features + ";";
|
||||
sample.setAttribute("style", styles);
|
||||
sampleText.setAttribute("style", styles);
|
||||
setSize();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<p class="caption">
|
||||
Font: <br>
|
||||
|
||||
<span class="GolosTextWebBold samplebox" style="font-size:60px; color:#990000">
|
||||
Golos Text Bold</span></p>
|
||||
|
||||
<p class="caption">
|
||||
Sample Text:</p>
|
||||
<p id="sample-text" class="GolosTextWebBold samplebox" style="font-size:28px">
|
||||
Jelly-like above the high wire, six quaking pachyderms kept the climax of the extravaganza in a dazzling state of flux.<br>Юный директор целиком сжевал весь объём продукции фундука (товара дефицитного и деликатесного), идя энергично через хрустящий камыш.</p>
|
||||
|
||||
<p class="caption">
|
||||
<div>
|
||||
<div>
|
||||
<form onsubmit="return changeFSize();">
|
||||
Character Set: <input type="button" value="-" onClick="less()"> <input id="stext" type="text" value="24px" style="width:40px"> <input type="button" value="+" onClick="more()"></p>
|
||||
</form>
|
||||
<p id="sample" class="GolosTextWebBold samplebox" style="font-size:24px;">
|
||||
! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ ı Ł ł Œ œ Š š Ÿ Ž ž ƒ ȷ ʼ ˆ ˇ ˙ ˚ ˜ ˝ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ў џ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҡ ҡ Ң ң Ҥ ҥ Ҫ ҫ Ү ү Ұ ұ Ҳ ҳ Ҷ ҷ Ҹ ҹ Һ һ Ӏ Ӄ ӄ Ӈ ӈ Ӌ ӌ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӹ ӹ Ԓ ԓ ẞ ‐ ‑ ‒ – — ‘ ’ ‚ “ ” „ † ‡ • … ‰ ‹ › ⁄ ⁴ € ₴ ₸ ₽ № ™ ← ↑ → ↓ ↖ ↗ ↘ ↙ ∆ − ∕ √ ≈ ≤ ≥ 〈 〉
|
||||
</p>
|
||||
</div>
|
||||
<div class="features">
|
||||
<p>OpenType features:</p><button id='aalt' class='feature' onclick=active('aalt') title='Access All Alternates'>aalt</button><button id='calt' class='feature' onclick=active('calt') title='Contextual Alternates'>calt</button><button id='case' class='feature' onclick=active('case') title='Case-Sensitive Forms'>case</button><button id='ordn' class='feature' onclick=active('ordn') title='Ordinals'>ordn</button><button id='sups' class='feature' onclick=active('sups') title='Superscript'>sups</button><button id='frac' class='feature' onclick=active('frac') title='Fractions'>frac</button><button id='pnum' class='feature' onclick=active('pnum') title='Proportional Figures'>pnum</button><button id='tnum' class='feature' onclick=active('tnum') title='Tabular Figures'>tnum</button><button id='lnum' class='feature' onclick=active('lnum') title='Lining Figures'>lnum</button><button id='onum' class='feature' onclick=active('onum') title='Oldstyle Figures'>onum</button><button id='cpsp' class='feature' onclick=active('cpsp') title='Capital Spacing'>cpsp</button><button id='kern' class='feature' onclick=active('kern') title='Kerning'>kern</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="CopyrightFont">
|
||||
© ParaType, 2013. All rights reserved.<br>All trademarks mentioned in this document are the trademarks or registered trademarks of their respective holders. You may reproduce and<br>distribute this document as long as you do not remove ParaType copyright information and do not make any changes in the document.<br>Русская панграмма из книги В. В. Шахиджаняна «Соло на клавиатуре»</p> </div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/* Generated by ParaType (http://www.paratype.com)*/
|
||||
/* Font Golos Text: Copyright ? ParaType, 2018. All rights reserved.*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'GolosTextWebDemiBold';
|
||||
src:
|
||||
url('Golos-Text_DemiBold.woff2') format('woff2'),
|
||||
url('Golos-Text_DemiBold.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
|
||||
<!--
|
||||
These webfonts were purchased at www.ParaType.com
|
||||
You can purchase them too. Please don't steal them.
|
||||
|
||||
Please don't remove this notice. Thanks.
|
||||
-->
|
||||
<title>Font Face Demo</title>
|
||||
<link rel="stylesheet" href="Golos-Text_DemiBold.css" type="text/css" charset="utf-8">
|
||||
<style type="text/css" media="screen">
|
||||
body {font-family: Helvetica, Arial, sans-serif; color:#333333;}
|
||||
.GolosTextWebDemiBold {
|
||||
font-family: 'GolosTextWebDemiBold';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
color:#000000;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 18px;
|
||||
color:#666666;
|
||||
}
|
||||
.FontName {
|
||||
font-size: 60px;
|
||||
}
|
||||
.CopyrightFont {
|
||||
font-size: 10px;
|
||||
}
|
||||
#container {
|
||||
width: 900px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
overflow: none;
|
||||
}
|
||||
.samplebox {
|
||||
white-space:wrap;
|
||||
margin-top:10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.features {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.feature {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
cursor: pointer;
|
||||
margin: 2px;
|
||||
border-radius: 15%;
|
||||
background-color: #DCDCDC;
|
||||
border: none;
|
||||
}
|
||||
.active{
|
||||
background-color: #808080;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
fsize = 24
|
||||
window.onload = function(){ active('kern')};
|
||||
function less()
|
||||
{
|
||||
if (fsize > 2) {
|
||||
fsize = fsize-1;
|
||||
p = document.getElementById('sample');
|
||||
p.style.fontSize = fsize + "px";
|
||||
document.getElementById('stext').value = fsize + "px";
|
||||
}
|
||||
}
|
||||
|
||||
function more()
|
||||
{
|
||||
if (fsize < 100) {
|
||||
fsize = fsize+1;
|
||||
setSize ()
|
||||
}
|
||||
}
|
||||
|
||||
function setSize ()
|
||||
{
|
||||
p = document.getElementById('sample');
|
||||
document.getElementById('sample-text').style.fontSize = "28px";
|
||||
p.style.fontSize = fsize + "px";
|
||||
document.getElementById('stext').value = fsize + "px";
|
||||
}
|
||||
|
||||
function changeFSize()
|
||||
{
|
||||
tsize = document.getElementById('stext').value;
|
||||
fsize = parseInt (tsize);
|
||||
setSize ();
|
||||
return false;
|
||||
}
|
||||
function active(value)
|
||||
{
|
||||
const button = document.getElementById(value);
|
||||
const allFeatures = document.querySelectorAll(".features button");
|
||||
button.classList.toggle('active');
|
||||
let features = "";
|
||||
for(let i = 0; i < allFeatures.length; i ++){
|
||||
features += "'" + allFeatures[i].id + "'" + " ";
|
||||
if(allFeatures[i].classList.contains("active")){
|
||||
features += "1";
|
||||
}
|
||||
else { features += "0"}
|
||||
|
||||
if(i+1 !== allFeatures.length) {
|
||||
features += ",";
|
||||
}
|
||||
}
|
||||
let sample = document.getElementById('sample');
|
||||
let sampleText = document.getElementById('sample-text');
|
||||
let styles = "font-feature-settings:" + features + ";";
|
||||
sample.setAttribute("style", styles);
|
||||
sampleText.setAttribute("style", styles);
|
||||
setSize();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<p class="caption">
|
||||
Font: <br>
|
||||
|
||||
<span class="GolosTextWebDemiBold samplebox" style="font-size:60px; color:#990000">
|
||||
Golos Text DemiBold</span></p>
|
||||
|
||||
<p class="caption">
|
||||
Sample Text:</p>
|
||||
<p id="sample-text" class="GolosTextWebDemiBold samplebox" style="font-size:28px">
|
||||
Jelly-like above the high wire, six quaking pachyderms kept the climax of the extravaganza in a dazzling state of flux.<br>Юный директор целиком сжевал весь объём продукции фундука (товара дефицитного и деликатесного), идя энергично через хрустящий камыш.</p>
|
||||
|
||||
<p class="caption">
|
||||
<div>
|
||||
<div>
|
||||
<form onsubmit="return changeFSize();">
|
||||
Character Set: <input type="button" value="-" onClick="less()"> <input id="stext" type="text" value="24px" style="width:40px"> <input type="button" value="+" onClick="more()"></p>
|
||||
</form>
|
||||
<p id="sample" class="GolosTextWebDemiBold samplebox" style="font-size:24px;">
|
||||
! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ ı Ł ł Œ œ Š š Ÿ Ž ž ƒ ȷ ʼ ˆ ˇ ˙ ˚ ˜ ˝ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ў џ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҡ ҡ Ң ң Ҥ ҥ Ҫ ҫ Ү ү Ұ ұ Ҳ ҳ Ҷ ҷ Ҹ ҹ Һ һ Ӏ Ӄ ӄ Ӈ ӈ Ӌ ӌ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӹ ӹ Ԓ ԓ ẞ ‐ ‑ ‒ – — ‘ ’ ‚ “ ” „ † ‡ • … ‰ ‹ › ⁄ ⁴ € ₴ ₸ ₽ № ™ ← ↑ → ↓ ↖ ↗ ↘ ↙ ∆ − ∕ √ ≈ ≤ ≥ 〈 〉
|
||||
</p>
|
||||
</div>
|
||||
<div class="features">
|
||||
<p>OpenType features:</p><button id='aalt' class='feature' onclick=active('aalt') title='Access All Alternates'>aalt</button><button id='calt' class='feature' onclick=active('calt') title='Contextual Alternates'>calt</button><button id='case' class='feature' onclick=active('case') title='Case-Sensitive Forms'>case</button><button id='ordn' class='feature' onclick=active('ordn') title='Ordinals'>ordn</button><button id='sups' class='feature' onclick=active('sups') title='Superscript'>sups</button><button id='frac' class='feature' onclick=active('frac') title='Fractions'>frac</button><button id='pnum' class='feature' onclick=active('pnum') title='Proportional Figures'>pnum</button><button id='tnum' class='feature' onclick=active('tnum') title='Tabular Figures'>tnum</button><button id='lnum' class='feature' onclick=active('lnum') title='Lining Figures'>lnum</button><button id='onum' class='feature' onclick=active('onum') title='Oldstyle Figures'>onum</button><button id='cpsp' class='feature' onclick=active('cpsp') title='Capital Spacing'>cpsp</button><button id='kern' class='feature' onclick=active('kern') title='Kerning'>kern</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="CopyrightFont">
|
||||
© ParaType, 2013. All rights reserved.<br>All trademarks mentioned in this document are the trademarks or registered trademarks of their respective holders. You may reproduce and<br>distribute this document as long as you do not remove ParaType copyright information and do not make any changes in the document.<br>Русская панграмма из книги В. В. Шахиджаняна «Соло на клавиатуре»</p> </div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/* Generated by ParaType (http://www.paratype.com)*/
|
||||
/* Font Golos Text: Copyright ? ParaType, 2018. All rights reserved.*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'GolosTextWebMedium';
|
||||
src:
|
||||
url('Golos-Text_Medium.woff2') format('woff2'),
|
||||
url('Golos-Text_Medium.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
|
||||
<!--
|
||||
These webfonts were purchased at www.ParaType.com
|
||||
You can purchase them too. Please don't steal them.
|
||||
|
||||
Please don't remove this notice. Thanks.
|
||||
-->
|
||||
<title>Font Face Demo</title>
|
||||
<link rel="stylesheet" href="Golos-Text_Medium.css" type="text/css" charset="utf-8">
|
||||
<style type="text/css" media="screen">
|
||||
body {font-family: Helvetica, Arial, sans-serif; color:#333333;}
|
||||
.GolosTextWebMedium {
|
||||
font-family: 'GolosTextWebMedium';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
color:#000000;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 18px;
|
||||
color:#666666;
|
||||
}
|
||||
.FontName {
|
||||
font-size: 60px;
|
||||
}
|
||||
.CopyrightFont {
|
||||
font-size: 10px;
|
||||
}
|
||||
#container {
|
||||
width: 900px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
overflow: none;
|
||||
}
|
||||
.samplebox {
|
||||
white-space:wrap;
|
||||
margin-top:10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.features {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.feature {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
cursor: pointer;
|
||||
margin: 2px;
|
||||
border-radius: 15%;
|
||||
background-color: #DCDCDC;
|
||||
border: none;
|
||||
}
|
||||
.active{
|
||||
background-color: #808080;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
fsize = 24
|
||||
window.onload = function(){ active('kern')};
|
||||
function less()
|
||||
{
|
||||
if (fsize > 2) {
|
||||
fsize = fsize-1;
|
||||
p = document.getElementById('sample');
|
||||
p.style.fontSize = fsize + "px";
|
||||
document.getElementById('stext').value = fsize + "px";
|
||||
}
|
||||
}
|
||||
|
||||
function more()
|
||||
{
|
||||
if (fsize < 100) {
|
||||
fsize = fsize+1;
|
||||
setSize ()
|
||||
}
|
||||
}
|
||||
|
||||
function setSize ()
|
||||
{
|
||||
p = document.getElementById('sample');
|
||||
document.getElementById('sample-text').style.fontSize = "28px";
|
||||
p.style.fontSize = fsize + "px";
|
||||
document.getElementById('stext').value = fsize + "px";
|
||||
}
|
||||
|
||||
function changeFSize()
|
||||
{
|
||||
tsize = document.getElementById('stext').value;
|
||||
fsize = parseInt (tsize);
|
||||
setSize ();
|
||||
return false;
|
||||
}
|
||||
function active(value)
|
||||
{
|
||||
const button = document.getElementById(value);
|
||||
const allFeatures = document.querySelectorAll(".features button");
|
||||
button.classList.toggle('active');
|
||||
let features = "";
|
||||
for(let i = 0; i < allFeatures.length; i ++){
|
||||
features += "'" + allFeatures[i].id + "'" + " ";
|
||||
if(allFeatures[i].classList.contains("active")){
|
||||
features += "1";
|
||||
}
|
||||
else { features += "0"}
|
||||
|
||||
if(i+1 !== allFeatures.length) {
|
||||
features += ",";
|
||||
}
|
||||
}
|
||||
let sample = document.getElementById('sample');
|
||||
let sampleText = document.getElementById('sample-text');
|
||||
let styles = "font-feature-settings:" + features + ";";
|
||||
sample.setAttribute("style", styles);
|
||||
sampleText.setAttribute("style", styles);
|
||||
setSize();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<p class="caption">
|
||||
Font: <br>
|
||||
|
||||
<span class="GolosTextWebMedium samplebox" style="font-size:60px; color:#990000">
|
||||
Golos Text Medium</span></p>
|
||||
|
||||
<p class="caption">
|
||||
Sample Text:</p>
|
||||
<p id="sample-text" class="GolosTextWebMedium samplebox" style="font-size:28px">
|
||||
Jelly-like above the high wire, six quaking pachyderms kept the climax of the extravaganza in a dazzling state of flux.<br>Юный директор целиком сжевал весь объём продукции фундука (товара дефицитного и деликатесного), идя энергично через хрустящий камыш.</p>
|
||||
|
||||
<p class="caption">
|
||||
<div>
|
||||
<div>
|
||||
<form onsubmit="return changeFSize();">
|
||||
Character Set: <input type="button" value="-" onClick="less()"> <input id="stext" type="text" value="24px" style="width:40px"> <input type="button" value="+" onClick="more()"></p>
|
||||
</form>
|
||||
<p id="sample" class="GolosTextWebMedium samplebox" style="font-size:24px;">
|
||||
! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ ı Ł ł Œ œ Š š Ÿ Ž ž ƒ ȷ ʼ ˆ ˇ ˙ ˚ ˜ ˝ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ў џ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҡ ҡ Ң ң Ҥ ҥ Ҫ ҫ Ү ү Ұ ұ Ҳ ҳ Ҷ ҷ Ҹ ҹ Һ һ Ӏ Ӄ ӄ Ӈ ӈ Ӌ ӌ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӹ ӹ Ԓ ԓ ẞ ‐ ‑ ‒ – — ‘ ’ ‚ “ ” „ † ‡ • … ‰ ‹ › ⁄ ⁴ € ₴ ₸ ₽ № ™ ← ↑ → ↓ ↖ ↗ ↘ ↙ ∆ − ∕ √ ≈ ≤ ≥ 〈 〉
|
||||
</p>
|
||||
</div>
|
||||
<div class="features">
|
||||
<p>OpenType features:</p><button id='aalt' class='feature' onclick=active('aalt') title='Access All Alternates'>aalt</button><button id='calt' class='feature' onclick=active('calt') title='Contextual Alternates'>calt</button><button id='case' class='feature' onclick=active('case') title='Case-Sensitive Forms'>case</button><button id='ordn' class='feature' onclick=active('ordn') title='Ordinals'>ordn</button><button id='sups' class='feature' onclick=active('sups') title='Superscript'>sups</button><button id='frac' class='feature' onclick=active('frac') title='Fractions'>frac</button><button id='pnum' class='feature' onclick=active('pnum') title='Proportional Figures'>pnum</button><button id='tnum' class='feature' onclick=active('tnum') title='Tabular Figures'>tnum</button><button id='lnum' class='feature' onclick=active('lnum') title='Lining Figures'>lnum</button><button id='onum' class='feature' onclick=active('onum') title='Oldstyle Figures'>onum</button><button id='cpsp' class='feature' onclick=active('cpsp') title='Capital Spacing'>cpsp</button><button id='kern' class='feature' onclick=active('kern') title='Kerning'>kern</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="CopyrightFont">
|
||||
© ParaType, 2013. All rights reserved.<br>All trademarks mentioned in this document are the trademarks or registered trademarks of their respective holders. You may reproduce and<br>distribute this document as long as you do not remove ParaType copyright information and do not make any changes in the document.<br>Русская панграмма из книги В. В. Шахиджаняна «Соло на клавиатуре»</p> </div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/* Generated by ParaType (http://www.paratype.com)*/
|
||||
/* Font Golos Text: Copyright ? ParaType, 2018. All rights reserved.*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'GolosTextWebRegular';
|
||||
src:
|
||||
url('Golos-Text_Regular.woff2') format('woff2'),
|
||||
url('Golos-Text_Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
|
||||
<!--
|
||||
These webfonts were purchased at www.ParaType.com
|
||||
You can purchase them too. Please don't steal them.
|
||||
|
||||
Please don't remove this notice. Thanks.
|
||||
-->
|
||||
<title>Font Face Demo</title>
|
||||
<link rel="stylesheet" href="Golos-Text_Regular.css" type="text/css" charset="utf-8">
|
||||
<style type="text/css" media="screen">
|
||||
body {font-family: Helvetica, Arial, sans-serif; color:#333333;}
|
||||
.GolosTextWebRegular {
|
||||
font-family: 'GolosTextWebRegular';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
color:#000000;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 18px;
|
||||
color:#666666;
|
||||
}
|
||||
.FontName {
|
||||
font-size: 60px;
|
||||
}
|
||||
.CopyrightFont {
|
||||
font-size: 10px;
|
||||
}
|
||||
#container {
|
||||
width: 900px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
overflow: none;
|
||||
}
|
||||
.samplebox {
|
||||
white-space:wrap;
|
||||
margin-top:10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.features {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.feature {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
cursor: pointer;
|
||||
margin: 2px;
|
||||
border-radius: 15%;
|
||||
background-color: #DCDCDC;
|
||||
border: none;
|
||||
}
|
||||
.active{
|
||||
background-color: #808080;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
fsize = 24
|
||||
window.onload = function(){ active('kern')};
|
||||
function less()
|
||||
{
|
||||
if (fsize > 2) {
|
||||
fsize = fsize-1;
|
||||
p = document.getElementById('sample');
|
||||
p.style.fontSize = fsize + "px";
|
||||
document.getElementById('stext').value = fsize + "px";
|
||||
}
|
||||
}
|
||||
|
||||
function more()
|
||||
{
|
||||
if (fsize < 100) {
|
||||
fsize = fsize+1;
|
||||
setSize ()
|
||||
}
|
||||
}
|
||||
|
||||
function setSize ()
|
||||
{
|
||||
p = document.getElementById('sample');
|
||||
document.getElementById('sample-text').style.fontSize = "28px";
|
||||
p.style.fontSize = fsize + "px";
|
||||
document.getElementById('stext').value = fsize + "px";
|
||||
}
|
||||
|
||||
function changeFSize()
|
||||
{
|
||||
tsize = document.getElementById('stext').value;
|
||||
fsize = parseInt (tsize);
|
||||
setSize ();
|
||||
return false;
|
||||
}
|
||||
function active(value)
|
||||
{
|
||||
const button = document.getElementById(value);
|
||||
const allFeatures = document.querySelectorAll(".features button");
|
||||
button.classList.toggle('active');
|
||||
let features = "";
|
||||
for(let i = 0; i < allFeatures.length; i ++){
|
||||
features += "'" + allFeatures[i].id + "'" + " ";
|
||||
if(allFeatures[i].classList.contains("active")){
|
||||
features += "1";
|
||||
}
|
||||
else { features += "0"}
|
||||
|
||||
if(i+1 !== allFeatures.length) {
|
||||
features += ",";
|
||||
}
|
||||
}
|
||||
let sample = document.getElementById('sample');
|
||||
let sampleText = document.getElementById('sample-text');
|
||||
let styles = "font-feature-settings:" + features + ";";
|
||||
sample.setAttribute("style", styles);
|
||||
sampleText.setAttribute("style", styles);
|
||||
setSize();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<p class="caption">
|
||||
Font: <br>
|
||||
|
||||
<span class="GolosTextWebRegular samplebox" style="font-size:60px; color:#990000">
|
||||
Golos Text Regular</span></p>
|
||||
|
||||
<p class="caption">
|
||||
Sample Text:</p>
|
||||
<p id="sample-text" class="GolosTextWebRegular samplebox" style="font-size:28px">
|
||||
Jelly-like above the high wire, six quaking pachyderms kept the climax of the extravaganza in a dazzling state of flux.<br>Юный директор целиком сжевал весь объём продукции фундука (товара дефицитного и деликатесного), идя энергично через хрустящий камыш.</p>
|
||||
|
||||
<p class="caption">
|
||||
<div>
|
||||
<div>
|
||||
<form onsubmit="return changeFSize();">
|
||||
Character Set: <input type="button" value="-" onClick="less()"> <input id="stext" type="text" value="24px" style="width:40px"> <input type="button" value="+" onClick="more()"></p>
|
||||
</form>
|
||||
<p id="sample" class="GolosTextWebRegular samplebox" style="font-size:24px;">
|
||||
! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ ı Ł ł Œ œ Š š Ÿ Ž ž ƒ ȷ ʼ ˆ ˇ ˙ ˚ ˜ ˝ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ў џ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҡ ҡ Ң ң Ҥ ҥ Ҫ ҫ Ү ү Ұ ұ Ҳ ҳ Ҷ ҷ Ҹ ҹ Һ һ Ӏ Ӄ ӄ Ӈ ӈ Ӌ ӌ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӹ ӹ Ԓ ԓ ẞ ‐ ‑ ‒ – — ‘ ’ ‚ “ ” „ † ‡ • … ‰ ‹ › ⁄ ⁴ € ₴ ₸ ₽ № ™ ← ↑ → ↓ ↖ ↗ ↘ ↙ ∆ − ∕ √ ≈ ≤ ≥ 〈 〉
|
||||
</p>
|
||||
</div>
|
||||
<div class="features">
|
||||
<p>OpenType features:</p><button id='aalt' class='feature' onclick=active('aalt') title='Access All Alternates'>aalt</button><button id='calt' class='feature' onclick=active('calt') title='Contextual Alternates'>calt</button><button id='case' class='feature' onclick=active('case') title='Case-Sensitive Forms'>case</button><button id='ordn' class='feature' onclick=active('ordn') title='Ordinals'>ordn</button><button id='sups' class='feature' onclick=active('sups') title='Superscript'>sups</button><button id='frac' class='feature' onclick=active('frac') title='Fractions'>frac</button><button id='pnum' class='feature' onclick=active('pnum') title='Proportional Figures'>pnum</button><button id='tnum' class='feature' onclick=active('tnum') title='Tabular Figures'>tnum</button><button id='lnum' class='feature' onclick=active('lnum') title='Lining Figures'>lnum</button><button id='onum' class='feature' onclick=active('onum') title='Oldstyle Figures'>onum</button><button id='cpsp' class='feature' onclick=active('cpsp') title='Capital Spacing'>cpsp</button><button id='kern' class='feature' onclick=active('kern') title='Kerning'>kern</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="CopyrightFont">
|
||||
© ParaType, 2013. All rights reserved.<br>All trademarks mentioned in this document are the trademarks or registered trademarks of their respective holders. You may reproduce and<br>distribute this document as long as you do not remove ParaType copyright information and do not make any changes in the document.<br>Русская панграмма из книги В. В. Шахиджаняна «Соло на клавиатуре»</p> </div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/* Generated by ParaType (http://www.paratype.com)*/
|
||||
/* Font Golos Text: Copyright ? ParaType, 2018. All rights reserved.*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'GolosTextWebVF';
|
||||
src:
|
||||
url('Golos-Text_VF.woff2') format('woff2'),
|
||||
url('Golos-Text_VF.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
|
||||
<!--
|
||||
These webfonts were purchased at www.ParaType.com
|
||||
You can purchase them too. Please don't steal them.
|
||||
|
||||
Please don't remove this notice. Thanks.
|
||||
-->
|
||||
<title>Font Face Demo</title>
|
||||
<link rel="stylesheet" href="Golos-Text_VF.css" type="text/css" charset="utf-8">
|
||||
<style type="text/css" media="screen">
|
||||
body {font-family: Helvetica, Arial, sans-serif; color:#333333;}
|
||||
.GolosTextWebVF {
|
||||
font-family: 'GolosTextWebVF';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
color:#000000;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 18px;
|
||||
color:#666666;
|
||||
}
|
||||
.FontName {
|
||||
font-size: 60px;
|
||||
}
|
||||
.CopyrightFont {
|
||||
font-size: 10px;
|
||||
}
|
||||
#container {
|
||||
width: 900px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
overflow: none;
|
||||
}
|
||||
.samplebox {
|
||||
white-space:wrap;
|
||||
margin-top:10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.features {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.feature {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
cursor: pointer;
|
||||
margin: 2px;
|
||||
border-radius: 15%;
|
||||
background-color: #DCDCDC;
|
||||
border: none;
|
||||
}
|
||||
.active{
|
||||
background-color: #808080;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
fsize = 24
|
||||
window.onload = function(){ active('kern')};
|
||||
function less()
|
||||
{
|
||||
if (fsize > 2) {
|
||||
fsize = fsize-1;
|
||||
p = document.getElementById('sample');
|
||||
p.style.fontSize = fsize + "px";
|
||||
document.getElementById('stext').value = fsize + "px";
|
||||
}
|
||||
}
|
||||
|
||||
function more()
|
||||
{
|
||||
if (fsize < 100) {
|
||||
fsize = fsize+1;
|
||||
setSize ()
|
||||
}
|
||||
}
|
||||
|
||||
function setSize ()
|
||||
{
|
||||
p = document.getElementById('sample');
|
||||
document.getElementById('sample-text').style.fontSize = "28px";
|
||||
p.style.fontSize = fsize + "px";
|
||||
document.getElementById('stext').value = fsize + "px";
|
||||
}
|
||||
|
||||
function changeFSize()
|
||||
{
|
||||
tsize = document.getElementById('stext').value;
|
||||
fsize = parseInt (tsize);
|
||||
setSize ();
|
||||
return false;
|
||||
}
|
||||
function active(value)
|
||||
{
|
||||
const button = document.getElementById(value);
|
||||
const allFeatures = document.querySelectorAll(".features button");
|
||||
button.classList.toggle('active');
|
||||
let features = "";
|
||||
for(let i = 0; i < allFeatures.length; i ++){
|
||||
features += "'" + allFeatures[i].id + "'" + " ";
|
||||
if(allFeatures[i].classList.contains("active")){
|
||||
features += "1";
|
||||
}
|
||||
else { features += "0"}
|
||||
|
||||
if(i+1 !== allFeatures.length) {
|
||||
features += ",";
|
||||
}
|
||||
}
|
||||
let sample = document.getElementById('sample');
|
||||
let sampleText = document.getElementById('sample-text');
|
||||
let styles = "font-feature-settings:" + features + ";";
|
||||
sample.setAttribute("style", styles);
|
||||
sampleText.setAttribute("style", styles);
|
||||
setSize();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<p class="caption">
|
||||
Font: <br>
|
||||
|
||||
<span class="GolosTextWebVF samplebox" style="font-size:60px; color:#990000">
|
||||
Golos Text VF</span></p>
|
||||
|
||||
<p class="caption">
|
||||
Sample Text:</p>
|
||||
<p id="sample-text" class="GolosTextWebVF samplebox" style="font-size:28px">
|
||||
Jelly-like above the high wire, six quaking pachyderms kept the climax of the extravaganza in a dazzling state of flux.<br>Юный директор целиком сжевал весь объём продукции фундука (товара дефицитного и деликатесного), идя энергично через хрустящий камыш.</p>
|
||||
|
||||
<p class="caption">
|
||||
<div>
|
||||
<div>
|
||||
<form onsubmit="return changeFSize();">
|
||||
Character Set: <input type="button" value="-" onClick="less()"> <input id="stext" type="text" value="24px" style="width:40px"> <input type="button" value="+" onClick="more()"></p>
|
||||
</form>
|
||||
<p id="sample" class="GolosTextWebVF samplebox" style="font-size:24px;">
|
||||
! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ ı Ł ł Œ œ Š š Ÿ Ž ž ƒ ȷ ʼ ˆ ˇ ˙ ˚ ˜ ˝ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ў џ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҡ ҡ Ң ң Ҥ ҥ Ҫ ҫ Ү ү Ұ ұ Ҳ ҳ Ҷ ҷ Ҹ ҹ Һ һ Ӏ Ӄ ӄ Ӈ ӈ Ӌ ӌ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӹ ӹ Ԓ ԓ ẞ ‐ ‑ ‒ – — ‘ ’ ‚ “ ” „ † ‡ • … ‰ ‹ › ⁄ ⁴ € ₴ ₸ ₽ № ™ ← ↑ → ↓ ↖ ↗ ↘ ↙ ∆ − ∕ √ ≈ ≤ ≥ 〈 〉
|
||||
</p>
|
||||
</div>
|
||||
<div class="features">
|
||||
<p>OpenType features:</p><button id='aalt' class='feature' onclick=active('aalt') title='Access All Alternates'>aalt</button><button id='calt' class='feature' onclick=active('calt') title='Contextual Alternates'>calt</button><button id='case' class='feature' onclick=active('case') title='Case-Sensitive Forms'>case</button><button id='ordn' class='feature' onclick=active('ordn') title='Ordinals'>ordn</button><button id='sups' class='feature' onclick=active('sups') title='Superscript'>sups</button><button id='frac' class='feature' onclick=active('frac') title='Fractions'>frac</button><button id='pnum' class='feature' onclick=active('pnum') title='Proportional Figures'>pnum</button><button id='tnum' class='feature' onclick=active('tnum') title='Tabular Figures'>tnum</button><button id='lnum' class='feature' onclick=active('lnum') title='Lining Figures'>lnum</button><button id='onum' class='feature' onclick=active('onum') title='Oldstyle Figures'>onum</button><button id='cpsp' class='feature' onclick=active('cpsp') title='Capital Spacing'>cpsp</button><button id='kern' class='feature' onclick=active('kern') title='Kerning'>kern</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="CopyrightFont">
|
||||
© ParaType, 2013. All rights reserved.<br>All trademarks mentioned in this document are the trademarks or registered trademarks of their respective holders. You may reproduce and<br>distribute this document as long as you do not remove ParaType copyright information and do not make any changes in the document.<br>Русская панграмма из книги В. В. Шахиджаняна «Соло на клавиатуре»</p> </div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue