rationalized styling

This commit is contained in:
dcore94 2023-03-28 11:40:00 +02:00
parent 2e96a34f45
commit c2e5d82a4a
5 changed files with 45 additions and 108 deletions

View File

@ -6,6 +6,18 @@
display: none !important; display: none !important;
} }
.noselect{
user-select: none;
}
.plexiglass{
position: absolute;
width:100%;
height:100%;
z-index:1000;
background-color: rgba(0,0,0,.1)
}
.ccp-help-icon { .ccp-help-icon {
background-color: #ccffff; background-color: #ccffff;
border: solid 1px #0099cc; border: solid 1px #0099cc;
@ -33,3 +45,36 @@ div.ccp-execution-form form:invalid button{
opacity: 0.3; opacity: 0.3;
pointer-events: none; pointer-events: none;
} }
.ccp-toolbar-header {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0.2rem;
min-width: 20rem;
}
.ccp-toolbar-right {
position: absolute;
right: 1rem;
}
.ccp-toolbar-button {
font-weight: bold;
padding: 0.3rem;
line-height: .8rem;
cursor: pointer;
}
.ccp-toolbar-button svg {
display: block;
fill: white;
width: 24px;
height: 24px;
pointer-events: none;
}
.ccp-toolbar-button-small {
padding: 0.1rem !important;
line-height: .6rem !important;
}
.ccp-toolbar-button-small svg {
width: 16px !important;
height: 16px !important;
}

View File

@ -48,13 +48,6 @@ class CCPExecutionForm extends HTMLElement{
.ccp-execution-form{ .ccp-execution-form{
position: relative; position: relative;
} }
.plexiglass{
position: absolute;
width:100%;
height:100%;
z-index:1000;
background-color: rgba(0,0,0,.1)
}
</style> </style>
<template id="EXECUTION_FORM_TEMPLATE"> <template id="EXECUTION_FORM_TEMPLATE">
<div class="ccp-execution-form" name="execution_form"> <div class="ccp-execution-form" name="execution_form">

View File

@ -32,9 +32,6 @@ class CCPExecutionHistory extends HTMLElement {
render(){ render(){
this.#rootdoc.innerHTML = ` this.#rootdoc.innerHTML = `
<style> <style>
.noselect{
user-select: none;
}
.lxd{ .lxd{
background-color: #dd4814; background-color: #dd4814;
color: white; color: white;
@ -43,38 +40,6 @@ class CCPExecutionHistory extends HTMLElement {
color: white; color: white;
background-color: #2496ed; background-color: #2496ed;
} }
.ccp-toolbar-header {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0.2rem;
min-width: 20rem;
}
.ccp-toolbar-right {
position: absolute;
right: 1rem;
}
.ccp-toolbar-button {
font-weight: bold;
padding: 0.3rem !important;
line-height: .8rem !important;
cursor: pointer;
}
.ccp-toolbar-button-small {
padding: 0.1rem !important;
line-height: .6rem !important;
}
.ccp-toolbar-button svg {
display: block;
fill: white;
width: 24px;
height: 24px;
pointer-events: none;
}
.ccp-toolbar-button-small svg {
width: 16px !important;
height: 16px !important;
}
.ccp-execution-list { .ccp-execution-list {
min-height: 3rem; min-height: 3rem;
} }

View File

@ -55,46 +55,12 @@ class CCPMethodEditorController extends HTMLElement{
position: relative; position: relative;
} }
.ccp-toolbar-header {
display: inline-flex;
align-items: center;
gap: 5px;
padding: .2rem;
}
.ccp-toolbar-right {
position:absolute;
right: 1rem;
}
.ccp-toolbar-button {
font-weight: bold;
padding:.3rem;
line-height:.8rem;
cursor: pointer;
}
.ccp-toolbar-button svg {
fill: white;
width:24px;
height:24px;
pointer-events: none;
}
.ccp-option { .ccp-option {
background-color:#eeffff; background-color:#eeffff;
color:#0099CC; color:#0099CC;
border:solid 1px #0099CC; border:solid 1px #0099CC;
} }
.plexiglass{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.3);
z-index: 10;
}
ul.author_list, ul.context_list{ ul.author_list, ul.context_list{
list-style: none; list-style: none;
display: flex; display: flex;

View File

@ -22,38 +22,6 @@ class CCPMethodList2 extends HTMLElement{
this.#rootdoc.innerHTML = ` this.#rootdoc.innerHTML = `
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style> <style>
.ccp-toolbar-header {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0.2rem;
min-width: 20rem;
}
.ccp-toolbar-right {
position: absolute;
right: 1rem;
}
.ccp-toolbar-button {
font-weight: bold;
padding: 0.3rem;
line-height: .8rem;
cursor: pointer;
}
.ccp-toolbar-button svg {
display: block;
fill: white;
width: 24px;
height: 24px;
pointer-events: none;
}
.ccp-toolbar-button-small {
padding: 0.1rem !important;
line-height: .6rem !important;
}
.ccp-toolbar-button-small svg {
width: 16px !important;
height: 16px !important;
}
.ccp-process-category-list{ .ccp-process-category-list{
list-style:none; list-style:none;
padding-left: 0; padding-left: 0;